ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
1,598 lines (1,594 loc) • 54.8 kB
JavaScript
import { __decorate, __metadata } from 'tslib';
import { CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, Renderer2, ChangeDetectorRef, ViewChild, Input, Output, Directive, HostListener, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { isNotNil, slideMotion, NzUpdateHostClassService, NzConfigService, WithConfig, InputBoolean, reqAnimFrame, NzOverlayModule } from 'ng-zorro-antd/core';
import { CommonModule } from '@angular/common';
import { DateHelperService, NzI18nModule } from 'ng-zorro-antd/i18n';
import { NzIconModule } from 'ng-zorro-antd/icon';
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 NzTimePickerComponent {
/**
* @param {?} nzConfigService
* @param {?} element
* @param {?} renderer
* @param {?} updateCls
* @param {?} cdr
*/
constructor(nzConfigService, element, renderer, updateCls, cdr) {
this.nzConfigService = nzConfigService;
this.element = element;
this.renderer = renderer;
this.updateCls = updateCls;
this.cdr = cdr;
this._value = null;
this.isInit = false;
this.overlayPositions = [
{
originX: 'start',
originY: 'top',
overlayX: 'end',
overlayY: 'top',
offsetX: 0,
offsetY: 0
}
];
this.nzSize = null;
this.nzPlaceHolder = '';
this.nzDefaultOpenValue = new Date();
this.nzOpen = false;
this.nzOpenChange = new EventEmitter();
this.nzHideDisabledOptions = false;
this.nzDisabled = false;
this.nzAutoFocus = false;
}
/**
* @param {?} value
* @return {?}
*/
set value(value) {
this._value = value;
if (this._onChange) {
this._onChange(this.value);
}
if (this._onTouched) {
this._onTouched();
}
}
/**
* @return {?}
*/
get value() {
return this._value;
}
/**
* @return {?}
*/
open() {
if (this.nzDisabled) {
return;
}
this.nzOpen = true;
this.nzOpenChange.emit(this.nzOpen);
}
/**
* @return {?}
*/
close() {
this.nzOpen = false;
this.cdr.markForCheck();
this.nzOpenChange.emit(this.nzOpen);
}
/**
* @return {?}
*/
updateAutoFocus() {
if (this.isInit && !this.nzDisabled) {
if (this.nzAutoFocus) {
this.renderer.setAttribute(this.inputRef.nativeElement, 'autofocus', 'autofocus');
}
else {
this.renderer.removeAttribute(this.inputRef.nativeElement, 'autofocus');
}
}
}
/**
* @return {?}
*/
onClickClearBtn() {
this.value = null;
}
/**
* @private
* @return {?}
*/
setClassMap() {
this.updateCls.updateHostClass(this.element.nativeElement, {
[`ant-time-picker`]: true,
[`ant-time-picker-${this.nzSize}`]: isNotNil(this.nzSize)
});
}
/**
* @return {?}
*/
focus() {
if (this.inputRef.nativeElement) {
this.inputRef.nativeElement.focus();
}
}
/**
* @return {?}
*/
blur() {
if (this.inputRef.nativeElement) {
this.inputRef.nativeElement.blur();
}
}
/**
* @return {?}
*/
ngOnInit() {
this.setClassMap();
this.origin = new CdkOverlayOrigin(this.element);
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
const { nzUse12Hours, nzFormat, nzDisabled, nzAutoFocus } = changes;
if (nzUse12Hours && !nzUse12Hours.previousValue && nzUse12Hours.currentValue && !nzFormat) {
this.nzFormat = 'h:mm:ss a';
}
if (nzDisabled) {
/** @type {?} */
const value = nzDisabled.currentValue;
/** @type {?} */
const input = (/** @type {?} */ (this.inputRef.nativeElement));
if (value) {
this.renderer.setAttribute(input, 'disabled', '');
}
else {
this.renderer.removeAttribute(input, 'disabled');
}
}
if (nzAutoFocus) {
this.updateAutoFocus();
}
}
/**
* @return {?}
*/
ngAfterViewInit() {
this.isInit = true;
this.updateAutoFocus();
}
/**
* @param {?} time
* @return {?}
*/
writeValue(time) {
this._value = time;
this.cdr.markForCheck();
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this._onChange = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) {
this._onTouched = fn;
}
/**
* @param {?} isDisabled
* @return {?}
*/
setDisabledState(isDisabled) {
this.nzDisabled = isDisabled;
this.cdr.markForCheck();
}
}
NzTimePickerComponent.decorators = [
{ type: Component, args: [{
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'nz-time-picker',
exportAs: 'nzTimePicker',
template: "<input\n #inputElement\n nzType=\"text\"\n [nzTime]=\"nzFormat\"\n class=\"ant-time-picker-input\"\n [placeholder]=\"nzPlaceHolder || ('TimePicker.placeholder' | nzI18n)\"\n [(ngModel)]=\"value\"\n readonly=\"readonly\"\n (click)=\"open()\">\n<span class=\"ant-time-picker-icon\">\n <i nz-icon nzType=\"clock-circle\"></i>\n</span>\n<i\n *ngIf=\"nzAllowEmpty && value\"\n nz-icon\n nzType=\"close-circle\"\n nzTheme=\"fill\"\n class=\"anticon anticon-close-circle ant-time-picker-clear\"\n tabindex=\"-1\"\n [attr.aria-label]=\"nzClearText\"\n [attr.title]=\"nzClearText\"\n (click)=\"onClickClearBtn()\"\n></i>\n\n<ng-template\n cdkConnectedOverlay\n nzConnectedOverlay\n cdkConnectedOverlayHasBackdrop\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"nzOpen\"\n [cdkConnectedOverlayOffsetY]=\"-2\"\n (detach)=\"close()\"\n (backdropClick)=\"close()\">\n <nz-time-picker-panel\n [ngClass]=\"nzPopupClassName\"\n [@slideMotion]=\"'bottom'\"\n [format]=\"nzFormat\"\n [nzHourStep]=\"nzHourStep\"\n [nzMinuteStep]=\"nzMinuteStep\"\n [nzSecondStep]=\"nzSecondStep\"\n [nzDisabledHours]=\"nzDisabledHours\"\n [nzDisabledMinutes]=\"nzDisabledMinutes\"\n [nzDisabledSeconds]=\"nzDisabledSeconds\"\n [nzPlaceHolder]=\"nzPlaceHolder || ('TimePicker.placeholder' | nzI18n)\"\n [nzHideDisabledOptions]=\"nzHideDisabledOptions\"\n [nzUse12Hours]=\"nzUse12Hours\"\n [nzDefaultOpenValue]=\"nzDefaultOpenValue\"\n [nzAddOn]=\"nzAddOn\"\n [opened]=\"nzOpen\"\n [nzClearText]=\"nzClearText\"\n [nzAllowEmpty]=\"nzAllowEmpty\"\n [(ngModel)]=\"value\">\n </nz-time-picker-panel>\n</ng-template>\n\n",
animations: [slideMotion],
providers: [NzUpdateHostClassService, { provide: NG_VALUE_ACCESSOR, useExisting: NzTimePickerComponent, multi: true }]
}] }
];
/** @nocollapse */
NzTimePickerComponent.ctorParameters = () => [
{ type: NzConfigService },
{ type: ElementRef },
{ type: Renderer2 },
{ type: NzUpdateHostClassService },
{ type: ChangeDetectorRef }
];
NzTimePickerComponent.propDecorators = {
inputRef: [{ type: ViewChild, args: ['inputElement', { static: true },] }],
nzSize: [{ type: Input }],
nzHourStep: [{ type: Input }],
nzMinuteStep: [{ type: Input }],
nzSecondStep: [{ type: Input }],
nzClearText: [{ type: Input }],
nzPopupClassName: [{ type: Input }],
nzPlaceHolder: [{ type: Input }],
nzAddOn: [{ type: Input }],
nzDefaultOpenValue: [{ type: Input }],
nzDisabledHours: [{ type: Input }],
nzDisabledMinutes: [{ type: Input }],
nzDisabledSeconds: [{ type: Input }],
nzFormat: [{ type: Input }],
nzOpen: [{ type: Input }],
nzUse12Hours: [{ type: Input }],
nzOpenChange: [{ type: Output }],
nzHideDisabledOptions: [{ type: Input }],
nzAllowEmpty: [{ type: Input }],
nzDisabled: [{ type: Input }],
nzAutoFocus: [{ type: Input }]
};
__decorate([
WithConfig(1),
__metadata("design:type", Number)
], NzTimePickerComponent.prototype, "nzHourStep", void 0);
__decorate([
WithConfig(1),
__metadata("design:type", Number)
], NzTimePickerComponent.prototype, "nzMinuteStep", void 0);
__decorate([
WithConfig(1),
__metadata("design:type", Number)
], NzTimePickerComponent.prototype, "nzSecondStep", void 0);
__decorate([
WithConfig('clear'),
__metadata("design:type", String)
], NzTimePickerComponent.prototype, "nzClearText", void 0);
__decorate([
WithConfig(),
__metadata("design:type", String)
], NzTimePickerComponent.prototype, "nzPopupClassName", void 0);
__decorate([
WithConfig('HH:mm:ss'),
__metadata("design:type", String)
], NzTimePickerComponent.prototype, "nzFormat", void 0);
__decorate([
WithConfig(false), InputBoolean(),
__metadata("design:type", Boolean)
], NzTimePickerComponent.prototype, "nzUse12Hours", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzTimePickerComponent.prototype, "nzHideDisabledOptions", void 0);
__decorate([
WithConfig(true), InputBoolean(),
__metadata("design:type", Boolean)
], NzTimePickerComponent.prototype, "nzAllowEmpty", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzTimePickerComponent.prototype, "nzDisabled", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzTimePickerComponent.prototype, "nzAutoFocus", void 0);
if (false) {
/**
* @type {?}
* @private
*/
NzTimePickerComponent.prototype._value;
/**
* @type {?}
* @private
*/
NzTimePickerComponent.prototype._onChange;
/**
* @type {?}
* @private
*/
NzTimePickerComponent.prototype._onTouched;
/** @type {?} */
NzTimePickerComponent.prototype.isInit;
/** @type {?} */
NzTimePickerComponent.prototype.origin;
/** @type {?} */
NzTimePickerComponent.prototype.overlayPositions;
/** @type {?} */
NzTimePickerComponent.prototype.inputRef;
/** @type {?} */
NzTimePickerComponent.prototype.nzSize;
/** @type {?} */
NzTimePickerComponent.prototype.nzHourStep;
/** @type {?} */
NzTimePickerComponent.prototype.nzMinuteStep;
/** @type {?} */
NzTimePickerComponent.prototype.nzSecondStep;
/** @type {?} */
NzTimePickerComponent.prototype.nzClearText;
/** @type {?} */
NzTimePickerComponent.prototype.nzPopupClassName;
/** @type {?} */
NzTimePickerComponent.prototype.nzPlaceHolder;
/** @type {?} */
NzTimePickerComponent.prototype.nzAddOn;
/** @type {?} */
NzTimePickerComponent.prototype.nzDefaultOpenValue;
/** @type {?} */
NzTimePickerComponent.prototype.nzDisabledHours;
/** @type {?} */
NzTimePickerComponent.prototype.nzDisabledMinutes;
/** @type {?} */
NzTimePickerComponent.prototype.nzDisabledSeconds;
/** @type {?} */
NzTimePickerComponent.prototype.nzFormat;
/** @type {?} */
NzTimePickerComponent.prototype.nzOpen;
/** @type {?} */
NzTimePickerComponent.prototype.nzUse12Hours;
/** @type {?} */
NzTimePickerComponent.prototype.nzOpenChange;
/** @type {?} */
NzTimePickerComponent.prototype.nzHideDisabledOptions;
/** @type {?} */
NzTimePickerComponent.prototype.nzAllowEmpty;
/** @type {?} */
NzTimePickerComponent.prototype.nzDisabled;
/** @type {?} */
NzTimePickerComponent.prototype.nzAutoFocus;
/** @type {?} */
NzTimePickerComponent.prototype.nzConfigService;
/**
* @type {?}
* @private
*/
NzTimePickerComponent.prototype.element;
/**
* @type {?}
* @private
*/
NzTimePickerComponent.prototype.renderer;
/**
* @type {?}
* @private
*/
NzTimePickerComponent.prototype.updateCls;
/** @type {?} */
NzTimePickerComponent.prototype.cdr;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NzTimeValueAccessorDirective {
/**
* @param {?} dateHelper
* @param {?} elementRef
*/
constructor(dateHelper, elementRef) {
this.dateHelper = dateHelper;
this.elementRef = elementRef;
}
/**
* @return {?}
*/
keyup() {
this.changed();
}
/**
* @return {?}
*/
blur() {
this.touched();
}
/**
* @return {?}
*/
changed() {
if (this._onChange) {
/** @type {?} */
const value = this.dateHelper.parseTime(this.elementRef.nativeElement.value);
this._onChange((/** @type {?} */ (value)));
}
}
/**
* @return {?}
*/
touched() {
if (this._onTouch) {
this._onTouch();
}
}
/**
* @return {?}
*/
setRange() {
this.elementRef.nativeElement.focus();
this.elementRef.nativeElement.setSelectionRange(0, this.elementRef.nativeElement.value.length);
}
/**
* @param {?} value
* @return {?}
*/
writeValue(value) {
this.elementRef.nativeElement.value = this.dateHelper.format(value, this.nzTime);
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this._onChange = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) {
this._onTouch = fn;
}
}
NzTimeValueAccessorDirective.decorators = [
{ type: Directive, args: [{
selector: 'input[nzTime]',
exportAs: 'nzTime',
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: NzTimeValueAccessorDirective, multi: true }]
},] }
];
/** @nocollapse */
NzTimeValueAccessorDirective.ctorParameters = () => [
{ type: DateHelperService },
{ type: ElementRef }
];
NzTimeValueAccessorDirective.propDecorators = {
nzTime: [{ type: Input }],
keyup: [{ type: HostListener, args: ['keyup',] }],
blur: [{ type: HostListener, args: ['blur',] }]
};
if (false) {
/**
* @type {?}
* @private
*/
NzTimeValueAccessorDirective.prototype._onChange;
/**
* @type {?}
* @private
*/
NzTimeValueAccessorDirective.prototype._onTouch;
/** @type {?} */
NzTimeValueAccessorDirective.prototype.nzTime;
/**
* @type {?}
* @private
*/
NzTimeValueAccessorDirective.prototype.dateHelper;
/**
* @type {?}
* @private
*/
NzTimeValueAccessorDirective.prototype.elementRef;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class TimeHolder {
constructor() {
this._seconds = undefined;
this._hours = undefined;
this._minutes = undefined;
this._selected12Hours = undefined;
this._use12Hours = false;
this._defaultOpenValue = new Date();
this._changes = new Subject();
}
/**
* @return {?}
*/
setDefaultValueIfNil() {
if (!isNotNil(this._value)) {
this._value = new Date(this.defaultOpenValue);
}
}
/**
* @template THIS
* @this {THIS}
* @param {?} value
* @param {?} disabled
* @return {THIS}
*/
setMinutes(value, disabled) {
if (disabled) {
return (/** @type {?} */ (this));
}
(/** @type {?} */ (this)).setDefaultValueIfNil();
(/** @type {?} */ (this)).minutes = value;
return (/** @type {?} */ (this));
}
/**
* @template THIS
* @this {THIS}
* @param {?} value
* @param {?} disabled
* @return {THIS}
*/
setHours(value, disabled) {
if (disabled) {
return (/** @type {?} */ (this));
}
(/** @type {?} */ (this)).setDefaultValueIfNil();
(/** @type {?} */ (this)).hours = value;
return (/** @type {?} */ (this));
}
/**
* @template THIS
* @this {THIS}
* @param {?} value
* @param {?} disabled
* @return {THIS}
*/
setSeconds(value, disabled) {
if (disabled) {
return (/** @type {?} */ (this));
}
(/** @type {?} */ (this)).setDefaultValueIfNil();
(/** @type {?} */ (this)).seconds = value;
return (/** @type {?} */ (this));
}
/**
* @template THIS
* @this {THIS}
* @param {?} value
* @return {THIS}
*/
setUse12Hours(value) {
(/** @type {?} */ (this))._use12Hours = value;
return (/** @type {?} */ (this));
}
/**
* @return {?}
*/
get changes() {
return this._changes.asObservable();
}
/**
* @return {?}
*/
get value() {
return this._value;
}
/**
* @param {?} value
* @return {?}
*/
set value(value) {
if (value !== this._value) {
this._value = value;
if (isNotNil(this._value)) {
this._hours = (/** @type {?} */ (this._value)).getHours();
this._minutes = (/** @type {?} */ (this._value)).getMinutes();
this._seconds = (/** @type {?} */ (this._value)).getSeconds();
if (this._use12Hours && isNotNil(this._hours)) {
this._selected12Hours = this._hours >= 12 ? 'PM' : 'AM';
}
}
else {
this._clear();
}
}
}
/**
* @template THIS
* @this {THIS}
* @param {?} value
* @param {?=} use12Hours
* @return {THIS}
*/
setValue(value, use12Hours) {
if (isNotNil(use12Hours)) {
(/** @type {?} */ (this))._use12Hours = (/** @type {?} */ (use12Hours));
}
(/** @type {?} */ (this)).value = value;
return (/** @type {?} */ (this));
}
/**
* @return {?}
*/
clear() {
this._clear();
this.update();
}
/**
* @return {?}
*/
get isEmpty() {
return !(isNotNil(this._hours) || isNotNil(this._minutes) || isNotNil(this._seconds));
}
/**
* @private
* @return {?}
*/
_clear() {
this._hours = undefined;
this._minutes = undefined;
this._seconds = undefined;
this._selected12Hours = undefined;
}
/**
* @private
* @return {?}
*/
update() {
if (this.isEmpty) {
this._value = undefined;
}
else {
if (!isNotNil(this._hours)) {
this._hours = this.defaultHours;
}
else {
(/** @type {?} */ (this._value)).setHours((/** @type {?} */ (this.hours)));
}
if (!isNotNil(this._minutes)) {
this._minutes = this.defaultMinutes;
}
else {
(/** @type {?} */ (this._value)).setMinutes((/** @type {?} */ (this.minutes)));
}
if (!isNotNil(this._seconds)) {
this._seconds = this.defaultSeconds;
}
else {
(/** @type {?} */ (this._value)).setSeconds((/** @type {?} */ (this.seconds)));
}
if (this._use12Hours) {
if (!isNotNil(this._selected12Hours)) {
this._selected12Hours = this.default12Hours;
}
if (this.selected12Hours === 'PM' && (/** @type {?} */ (this._hours)) < 12) {
(/** @type {?} */ (this._hours)) += 12;
(/** @type {?} */ (this._value)).setHours((/** @type {?} */ (this._hours)));
}
if (this.selected12Hours === 'AM' && (/** @type {?} */ (this._hours)) >= 12) {
(/** @type {?} */ (this._hours)) -= 12;
(/** @type {?} */ (this._value)).setHours((/** @type {?} */ (this._hours)));
}
}
this._value = new Date((/** @type {?} */ (this._value)));
}
this.changed();
}
/**
* @return {?}
*/
changed() {
this._changes.next(this._value);
}
/**
* \@description
* UI view hours
* Get viewHours which is selected in `time-picker-panel` and its range is [12, 1, 2, ..., 11]
* @return {?}
*/
get viewHours() {
return this._use12Hours && isNotNil(this._hours) ? this.calculateViewHour((/** @type {?} */ (this._hours))) : this._hours;
}
/**
* \@description
* Value hours
* Get realHours and its range is [0, 1, 2, ..., 22, 23]
* @return {?}
*/
get realHours() {
return this._hours;
}
/**
* \@description
* Same as realHours
* @see realHours
* @return {?}
*/
get hours() {
return this._hours;
}
/**
* \@description
* Set viewHours to realHours
* @param {?} value
* @return {?}
*/
set hours(value) {
if (value !== this._hours) {
if (this._use12Hours) {
if (this.selected12Hours === 'PM' && value !== 12) {
(/** @type {?} */ (this._hours)) = ((/** @type {?} */ (value))) + 12;
}
else if (this.selected12Hours === 'AM' && value === 12) {
this._hours = 0;
}
else {
this._hours = value;
}
}
else {
this._hours = value;
}
this.update();
}
}
/**
* @return {?}
*/
get minutes() {
return this._minutes;
}
/**
* @param {?} value
* @return {?}
*/
set minutes(value) {
if (value !== this._minutes) {
this._minutes = value;
this.update();
}
}
/**
* @return {?}
*/
get seconds() {
return this._seconds;
}
/**
* @param {?} value
* @return {?}
*/
set seconds(value) {
if (value !== this._seconds) {
this._seconds = value;
this.update();
}
}
/**
* @return {?}
*/
get selected12Hours() {
return this._selected12Hours;
}
/**
* @param {?} value
* @return {?}
*/
set selected12Hours(value) {
if ((/** @type {?} */ (value)).toUpperCase() !== this._selected12Hours) {
this._selected12Hours = (/** @type {?} */ (value)).toUpperCase();
this.update();
}
}
/**
* @return {?}
*/
get defaultOpenValue() {
return this._defaultOpenValue;
}
/**
* @param {?} value
* @return {?}
*/
set defaultOpenValue(value) {
if (this._defaultOpenValue !== value) {
this._defaultOpenValue = value;
this.update();
}
}
/**
* @template THIS
* @this {THIS}
* @param {?} value
* @return {THIS}
*/
setDefaultOpenValue(value) {
(/** @type {?} */ (this)).defaultOpenValue = value;
return (/** @type {?} */ (this));
}
/**
* \@description
* Get deafultViewHours when defaultOpenValue is setted
* @see viewHours
* @return {?}
*/
get defaultViewHours() {
/** @type {?} */
const hours = this._defaultOpenValue.getHours();
return this._use12Hours && isNotNil(hours) ? this.calculateViewHour(hours) : hours;
}
/**
* \@description
* Get defaultRealHours when defaultOpenValue is setted
* @see realHours
* @return {?}
*/
get defaultRealHours() {
return this._defaultOpenValue.getHours();
}
/**
* \@description
* Same as defaultRealHours
* @return {?}
*/
get defaultHours() {
return this._defaultOpenValue.getHours();
}
/**
* @return {?}
*/
get defaultMinutes() {
return this._defaultOpenValue.getMinutes();
}
/**
* @return {?}
*/
get defaultSeconds() {
return this._defaultOpenValue.getSeconds();
}
/**
* @return {?}
*/
get default12Hours() {
return this._defaultOpenValue.getHours() >= 12 ? 'PM' : 'AM';
}
/**
* @private
* @param {?} value
* @return {?}
*/
calculateViewHour(value) {
/** @type {?} */
const selected12Hours = this._selected12Hours || this.default12Hours;
if (selected12Hours === 'PM' && value > 12) {
return value - 12;
}
if (selected12Hours === 'AM' && value === 0) {
return 12;
}
return value;
}
}
if (false) {
/**
* @type {?}
* @private
*/
TimeHolder.prototype._seconds;
/**
* @type {?}
* @private
*/
TimeHolder.prototype._hours;
/**
* @type {?}
* @private
*/
TimeHolder.prototype._minutes;
/**
* @type {?}
* @private
*/
TimeHolder.prototype._selected12Hours;
/**
* @type {?}
* @private
*/
TimeHolder.prototype._use12Hours;
/**
* @type {?}
* @private
*/
TimeHolder.prototype._defaultOpenValue;
/**
* @type {?}
* @private
*/
TimeHolder.prototype._value;
/**
* @type {?}
* @private
*/
TimeHolder.prototype._changes;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @param {?} length
* @param {?=} step
* @param {?=} start
* @return {?}
*/
function makeRange(length, step = 1, start = 0) {
return new Array(Math.ceil(length / step)).fill(0).map((/**
* @param {?} _
* @param {?} i
* @return {?}
*/
(_, i) => (i + start) * step));
}
class NzTimePickerPanelComponent {
/**
* @param {?} element
* @param {?} updateCls
* @param {?} cdr
*/
constructor(element, updateCls, cdr) {
this.element = element;
this.updateCls = updateCls;
this.cdr = cdr;
this._nzHourStep = 1;
this._nzMinuteStep = 1;
this._nzSecondStep = 1;
this.unsubscribe$ = new Subject();
this._format = 'HH:mm:ss';
this._allowEmpty = true;
this.prefixCls = 'ant-time-picker-panel';
this.time = new TimeHolder();
this.hourEnabled = true;
this.minuteEnabled = true;
this.secondEnabled = true;
this.enabledColumns = 3;
this.nzInDatePicker = false; // If inside a date-picker, more diff works need to be done
this.nzHideDisabledOptions = false;
this.nzUse12Hours = false;
this.opened = false;
this.nzDefaultOpenValue = new Date();
}
/**
* @param {?} value
* @return {?}
*/
set nzAllowEmpty(value) {
if (isNotNil(value)) {
this._allowEmpty = value;
}
}
/**
* @return {?}
*/
get nzAllowEmpty() {
return this._allowEmpty;
}
/**
* @param {?} value
* @return {?}
*/
set nzDisabledHours(value) {
this._disabledHours = value;
if (this._disabledHours) {
this.buildHours();
}
}
/**
* @return {?}
*/
get nzDisabledHours() {
return this._disabledHours;
}
/**
* @param {?} value
* @return {?}
*/
set nzDisabledMinutes(value) {
if (isNotNil(value)) {
this._disabledMinutes = value;
this.buildMinutes();
}
}
/**
* @return {?}
*/
get nzDisabledMinutes() {
return this._disabledMinutes;
}
/**
* @param {?} value
* @return {?}
*/
set nzDisabledSeconds(value) {
if (isNotNil(value)) {
this._disabledSeconds = value;
this.buildSeconds();
}
}
/**
* @return {?}
*/
get nzDisabledSeconds() {
return this._disabledSeconds;
}
/**
* @param {?} value
* @return {?}
*/
set format(value) {
if (isNotNil(value)) {
this._format = value;
this.enabledColumns = 0;
/** @type {?} */
const charSet = new Set(value);
this.hourEnabled = charSet.has('H') || charSet.has('h');
this.minuteEnabled = charSet.has('m');
this.secondEnabled = charSet.has('s');
if (this.hourEnabled) {
this.enabledColumns++;
}
if (this.minuteEnabled) {
this.enabledColumns++;
}
if (this.secondEnabled) {
this.enabledColumns++;
}
if (this.nzUse12Hours) {
this.build12Hours();
}
}
}
/**
* @return {?}
*/
get format() {
return this._format;
}
/**
* @param {?} value
* @return {?}
*/
set nzHourStep(value) {
if (isNotNil(value)) {
this._nzHourStep = value;
this.buildHours();
}
}
/**
* @return {?}
*/
get nzHourStep() {
return this._nzHourStep;
}
/**
* @param {?} value
* @return {?}
*/
set nzMinuteStep(value) {
if (isNotNil(value)) {
this._nzMinuteStep = value;
this.buildMinutes();
}
}
/**
* @return {?}
*/
get nzMinuteStep() {
return this._nzMinuteStep;
}
/**
* @param {?} value
* @return {?}
*/
set nzSecondStep(value) {
if (isNotNil(value)) {
this._nzSecondStep = value;
this.buildSeconds();
}
}
/**
* @return {?}
*/
get nzSecondStep() {
return this._nzSecondStep;
}
/**
* @return {?}
*/
selectInputRange() {
setTimeout((/**
* @return {?}
*/
() => {
if (this.nzTimeValueAccessorDirective) {
this.nzTimeValueAccessorDirective.setRange();
}
}));
}
/**
* @return {?}
*/
buildHours() {
/** @type {?} */
let hourRanges = 24;
/** @type {?} */
let disabledHours = this.nzDisabledHours && this.nzDisabledHours();
/** @type {?} */
let startIndex = 0;
if (this.nzUse12Hours) {
hourRanges = 12;
if (disabledHours) {
if (this.time.selected12Hours === 'PM') {
/**
* Filter and transform hours which greater or equal to 12
* [0, 1, 2, ..., 12, 13, 14, 15, ..., 23] => [12, 1, 2, 3, ..., 11]
*/
disabledHours = disabledHours.filter((/**
* @param {?} i
* @return {?}
*/
i => i >= 12)).map((/**
* @param {?} i
* @return {?}
*/
i => (i > 12 ? i - 12 : i)));
}
else {
/**
* Filter and transform hours which less than 12
* [0, 1, 2,..., 12, 13, 14, 15, ...23] => [12, 1, 2, 3, ..., 11]
*/
disabledHours = disabledHours.filter((/**
* @param {?} i
* @return {?}
*/
i => i < 12 || i === 24)).map((/**
* @param {?} i
* @return {?}
*/
i => (i === 24 || i === 0 ? 12 : i)));
}
}
startIndex = 1;
}
this.hourRange = makeRange(hourRanges, this.nzHourStep, startIndex).map((/**
* @param {?} r
* @return {?}
*/
r => {
return {
index: r,
disabled: this.nzDisabledHours && disabledHours.indexOf(r) !== -1
};
}));
if (this.nzUse12Hours && this.hourRange[this.hourRange.length - 1].index === 12) {
/** @type {?} */
const temp = [...this.hourRange];
temp.unshift(temp[temp.length - 1]);
temp.splice(temp.length - 1, 1);
this.hourRange = temp;
}
}
/**
* @return {?}
*/
buildMinutes() {
this.minuteRange = makeRange(60, this.nzMinuteStep).map((/**
* @param {?} r
* @return {?}
*/
r => {
return {
index: r,
disabled: this.nzDisabledMinutes && this.nzDisabledMinutes((/** @type {?} */ (this.time.hours))).indexOf(r) !== -1
};
}));
}
/**
* @return {?}
*/
buildSeconds() {
this.secondRange = makeRange(60, this.nzSecondStep).map((/**
* @param {?} r
* @return {?}
*/
r => {
return {
index: r,
disabled: this.nzDisabledSeconds && this.nzDisabledSeconds((/** @type {?} */ (this.time.hours)), (/** @type {?} */ (this.time.minutes))).indexOf(r) !== -1
};
}));
}
/**
* @return {?}
*/
build12Hours() {
/** @type {?} */
const isUpperForamt = this._format.includes('A');
this.use12HoursRange = [
{
index: 0,
value: isUpperForamt ? 'AM' : 'am'
},
{
index: 1,
value: isUpperForamt ? 'PM' : 'pm'
}
];
}
/**
* @return {?}
*/
buildTimes() {
this.buildHours();
this.buildMinutes();
this.buildSeconds();
this.build12Hours();
}
/**
* @param {?} hour
* @return {?}
*/
selectHour(hour) {
this.time.setHours(hour.index, hour.disabled);
this.scrollToSelected(this.hourListElement.nativeElement, hour.index, 120, 'hour');
if (this._disabledMinutes) {
this.buildMinutes();
}
if (this._disabledSeconds || this._disabledMinutes) {
this.buildSeconds();
}
}
/**
* @param {?} minute
* @return {?}
*/
selectMinute(minute) {
this.time.setMinutes(minute.index, minute.disabled);
this.scrollToSelected(this.minuteListElement.nativeElement, minute.index, 120, 'minute');
if (this._disabledSeconds) {
this.buildSeconds();
}
}
/**
* @param {?} second
* @return {?}
*/
selectSecond(second) {
this.time.setSeconds(second.index, second.disabled);
this.scrollToSelected(this.secondListElement.nativeElement, second.index, 120, 'second');
}
/**
* @param {?} value
* @return {?}
*/
select12Hours(value) {
this.time.selected12Hours = value.value;
if (this._disabledHours) {
this.buildHours();
}
if (this._disabledMinutes) {
this.buildMinutes();
}
if (this._disabledSeconds) {
this.buildSeconds();
}
this.scrollToSelected(this.use12HoursListElement.nativeElement, value.index, 120, '12-hour');
}
/**
* @param {?} instance
* @param {?} index
* @param {?=} duration
* @param {?=} unit
* @return {?}
*/
scrollToSelected(instance, index, duration = 0, unit) {
/** @type {?} */
const transIndex = this.translateIndex(index, unit);
/** @type {?} */
const currentOption = (/** @type {?} */ ((instance.children[0].children[transIndex] ||
instance.children[0].children[0])));
this.scrollTo(instance, currentOption.offsetTop, duration);
}
/**
* @param {?} index
* @param {?} unit
* @return {?}
*/
translateIndex(index, unit) {
if (unit === 'hour') {
/** @type {?} */
const disabledHours = this.nzDisabledHours && this.nzDisabledHours();
return this.calcIndex(disabledHours, this.hourRange.map((/**
* @param {?} item
* @return {?}
*/
item => item.index)).indexOf(index));
}
else if (unit === 'minute') {
/** @type {?} */
const disabledMinutes = this.nzDisabledMinutes && this.nzDisabledMinutes((/** @type {?} */ (this.time.hours)));
return this.calcIndex(disabledMinutes, this.minuteRange.map((/**
* @param {?} item
* @return {?}
*/
item => item.index)).indexOf(index));
}
else if (unit === 'second') {
// second
/** @type {?} */
const disabledSeconds = this.nzDisabledSeconds && this.nzDisabledSeconds((/** @type {?} */ (this.time.hours)), (/** @type {?} */ (this.time.minutes)));
return this.calcIndex(disabledSeconds, this.secondRange.map((/**
* @param {?} item
* @return {?}
*/
item => item.index)).indexOf(index));
}
else {
// 12-hour
return this.calcIndex([], this.use12HoursRange.map((/**
* @param {?} item
* @return {?}
*/
item => item.index)).indexOf(index));
}
}
/**
* @param {?} element
* @param {?} to
* @param {?} duration
* @return {?}
*/
scrollTo(element, to, duration) {
if (duration <= 0) {
element.scrollTop = to;
return;
}
/** @type {?} */
const difference = to - element.scrollTop;
/** @type {?} */
const perTick = (difference / duration) * 10;
reqAnimFrame((/**
* @return {?}
*/
() => {
element.scrollTop = element.scrollTop + perTick;
if (element.scrollTop === to) {
return;
}
this.scrollTo(element, to, duration - 10);
}));
}
/**
* @param {?} array
* @param {?} index
* @return {?}
*/
calcIndex(array, index) {
if (array && array.length && this.nzHideDisabledOptions) {
return (index -
array.reduce((/**
* @param {?} pre
* @param {?} value
* @return {?}
*/
(pre, value) => {
return pre + (value < index ? 1 : 0);
}), 0));
}
else {
return index;
}
}
/**
* @protected
* @return {?}
*/
changed() {
if (this.onChange) {
this.onChange((/** @type {?} */ (this.time.value)));
}
}
/**
* @protected
* @return {?}
*/
touched() {
if (this.onTouch) {
this.onTouch();
}
}
/**
* @private
* @return {?}
*/
setClassMap() {
this.updateCls.updateHostClass(this.element.nativeElement, {
[`${this.prefixCls}`]: true,
[`${this.prefixCls}-column-${this.enabledColumns}`]: this.nzInDatePicker ? false : true,
[`${this.prefixCls}-narrow`]: this.enabledColumns < 3,
[`${this.prefixCls}-placement-bottomLeft`]: this.nzInDatePicker ? false : true
});
}
/**
* @param {?} hour
* @return {?}
*/
isSelectedHour(hour) {
return (hour.index === this.time.viewHours ||
(!isNotNil(this.time.viewHours) && hour.index === this.time.defaultViewHours));
}
/**
* @param {?} minute
* @return {?}
*/
isSelectedMinute(minute) {
return (minute.index === this.time.minutes || (!isNotNil(this.time.minutes) && minute.index === this.time.defaultMinutes));
}
/**
* @param {?} second
* @return {?}
*/
isSelectedSecond(second) {
return (second.index === this.time.seconds || (!isNotNil(this.time.seconds) && second.index === this.time.defaultSeconds));
}
/**
* @param {?} value
* @return {?}
*/
isSelected12Hours(value) {
return (value.value.toUpperCase() === this.time.selected12Hours ||
(!isNotNil(this.time.selected12Hours) && value.value.toUpperCase() === this.time.default12Hours));
}
/**
* @return {?}
*/
initPosition() {
setTimeout((/**
* @return {?}
*/
() => {
if (this.hourEnabled && this.hourListElement) {
if (isNotNil(this.time.viewHours)) {
this.scrollToSelected(this.hourListElement.nativeElement, (/** @type {?} */ (this.time.viewHours)), 0, 'hour');
}
else {
this.scrollToSelected(this.hourListElement.nativeElement, this.time.defaultViewHours, 0, 'hour');
}
}
if (this.minuteEnabled && this.minuteListElement) {
if (isNotNil(this.time.minutes)) {
this.scrollToSelected(this.minuteListElement.nativeElement, (/** @type {?} */ (this.time.minutes)), 0, 'minute');
}
else {
this.scrollToSelected(this.minuteListElement.nativeElement, this.time.defaultMinutes, 0, 'minute');
}
}
if (this.secondEnabled && this.secondListElement) {
if (isNotNil(this.time.seconds)) {
this.scrollToSelected(this.secondListElement.nativeElement, (/** @type {?} */ (this.time.seconds)), 0, 'second');
}
else {
this.scrollToSelected(this.secondListElement.nativeElement, this.time.defaultSeconds, 0, 'second');
}
}
if (this.nzUse12Hours && this.use12HoursListElement) {
/** @type {?} */
const selectedHours = isNotNil(this.time.selected12Hours)
? this.time.selected12Hours
: this.time.default12Hours;
/** @type {?} */
const index = selectedHours === 'AM' ? 0 : 1;
this.scrollToSelected(this.use12HoursListElement.nativeElement, index, 0, '12-hour');
}
}));
}
/**
* @return {?}
*/
ngOnInit() {
if (this.nzInDatePicker) {
this.prefixCls = 'ant-calendar-time-picker';
}
this.time.changes.pipe(takeUntil(this.unsubscribe$)).subscribe((/**
* @return {?}
*/
() => {
this.changed();
this.touched();
}));
this.buildTimes();
this.setClassMap();
}
/**
* @return {?}
*/
ngOnDestroy() {
this.unsubscribe$.next();
this.unsubscribe$.complete();
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
const { nzUse12Hours, opened, nzDefaultOpenValue } = changes;
if (nzUse12Hours && !nzUse12Hours.previousValue && nzUse12Hours.currentValue) {
this.build12Hours();
this.enabledColumns++;
}
if (opened && opened.currentValue) {
this.initPosition();
this.selectInputRange();
}
if (nzDefaultOpenValue) {
/** @type {?} */
const value = nzDefaultOpenValue.currentValue;
if (isNotNil(value)) {
this.time.setDefaultOpenValue(this.nzDefaultOpenValue);
}
}
}
/**
* @param {?} value
* @return {?}
*/
writeValue(value) {
this.time.setValue(value, this.nzUse12Hours);
this.buildTimes();
// Mark this component to be checked manually with internal properties changing (see: https://github.com/angular/angular/issues/10816)
this.cdr.markForCheck();
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.onChange = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) {
this.onTouch = fn;
}
}
NzTimePickerPanelComponent.decorators = [
{ type: Component, args: [{
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'nz-time-picker-panel',
exportAs: 'nzTimePickerPanel',
template: "<div class=\"{{ nzInDatePicker ? prefixCls + '-panel' : '' }}\">\n <div\n class=\"{{ prefixCls }}-inner {{ nzInDatePicker ? prefixCls + '-column-' + enabledColumns : '' }}\"\n [style.width.px]=\"nzInDatePicker ? null : enabledColumns * 56\">\n <div class=\"{{ prefixCls }}-input-wrap\">\n <input\n type=\"text\"\n class=\"{{ prefixCls }}-input\"\n [placeholder]=\"nzPlaceHolder\"\n [nzTime]=\"format\"\n [(ngModel)]=\"time.value\"\n (blur)=\"time.changed()\">\n </div>\n <div class=\"{{ prefixCls }}-combobox\">\n <div\n *ngIf=\"hourEnabled\"\n #hourListElement\n class=\"{{ prefixCls }}-select\">\n <ul>\n <ng-container *ngFor=\"let hour of hourRange\">\n <li\n *ngIf=\"!(nzHideDisabledOptions && hour.disabled)\"\n (click)=\"selectHour(hour)\"\n class=\"\n {{ isSelectedHour(hour) ? prefixCls + '-select-option-selected' : '' }}\n {{ hour.disabled ? prefixCls + '-select-option-disabled' : '' }}\n \"\n >\n {{ hour.index | number:'2.0-0' }}\n </li>\n </ng-container>\n </ul>\n </div>\n <div\n *ngIf=\"minuteEnabled\"\n #minuteListElement\n class=\"{{ prefixCls }}-select\">\n <ul>\n <ng-container *ngFor=\"let minute of minuteRange\">\n <li\n *ngIf=\"!(nzHideDisabledOptions && minute.disabled)\"\n (click)=\"selectMinute(minute)\"\n class=\"\n {{ isSelectedMinute(minute) ? prefixCls + '-select-option-selected' : '' }}\n {{ minute.disabled ? prefixCls + '-select-option-disabled' : '' }}\n \"\n >\n {{ minute.index | number:'2.0-0' }}\n </li>\n </ng-container>\n </ul>\n </div>\n <div\n *ngIf=\"secondEnabled\"\n #secondListElement\n class=\"{{ prefixCls }}-select\">\n <ul>\n <ng-container *ngFor=\"let second of secondRange\">\n <li\n *ngIf=\"!(nzHideDisabledOptions && second.disabled)\"\n (click)=\"selectSecond(second)\"\n class=\"\n {{ isSelectedSecond(second) ? prefixCls + '-select-option-selected' : '' }}\n {{ second.disabled ? prefixCls + '-select-option-disabled' : '' }}\n \"\n >\n {{ second.index | number:'2.0-0' }}\n </li>\n </ng-container>\n </ul>\n </div>\n <div\n *ngIf=\"nzUse12Hours\"\n #use12HoursListElement\n class=\"{{ prefixCls }}-select\">\n <ul>\n <ng-container *ngFor=\"let range of use12HoursRange \">\n <li\n *ngIf=\"!nzHideDisabledOptions\"\n (click)=\"select12Hours(range)\"\n class=\"\n {{ isSelected12Hours(range) ? prefixCls + '-select-option-selected' : '' }}\n \"\n >\n {{ range.value }}\n </li>\n </ng-container>\n </ul>\n </div>\n </div>\n <div class=\"{{ prefixCls }}-addon\" *ngIf=\"nzAddOn\">\n <ng-template [ngTemplateOutlet]=\"nzAddOn\"></ng-template>\n </div>\n </div>\n</div>",
providers: [NzUpdateHostClassService, { provide: NG_VALUE_ACCESSOR, useExisting: NzTimePickerPanelComponent, multi: true }]
}] }
];
/** @nocollapse */
NzTimePickerPanelComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: NzUpdateHostClassService },
{ type: ChangeDetectorRef }
];
NzTimePickerPanelComponent.propDecorators = {
nzTimeValueAccessorDirective: [{ type: ViewChild, args: [NzTimeValueAccessorDirective, { static: false },] }],
hourListElement: [{ type: ViewChild, args: ['hourListElement', { static: false },] }],
minuteListElement: [{ type: ViewChild, args: ['minuteListElement', { static: false },] }],
secondListElement: [{ type: ViewChild, args: ['secondListElement', { static: false },] }],
use12HoursListElement: [{ type: ViewChild, args: ['use12HoursListElement', { static: false },] }],
nzInDatePicker: [{ type: Input }],
nzAddOn: [{ type: Input }],
nzHideDisabledOptions: [{ type: Input }],
nzClearText: [{ type: Input }],
nzPlaceHolder: [{ type: Input }],
nzUse12Hours: [{ type: Input }],
opened: [{ type: Input }],
nzDefaultOpenValue: [{ type: Input }],
nzAllowEmpty: [{ type: Inp