ng-zorro-antd-mobile
Version:
An enterprise-class mobile UI components based on Ant Design and Angular
985 lines (975 loc) • 74.3 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, ViewEncapsulation, Input, HostBinding, ViewChild, TemplateRef, EventEmitter, Output, forwardRef, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from 'ng-zorro-antd-mobile/icon';
import { IconModule } from 'ng-zorro-antd-mobile/icon';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import * as i1$1 from 'ng-zorro-antd-mobile/locale-provider';
import { zh_CN, en_US, LocaleProviderModule } from 'ng-zorro-antd-mobile/locale-provider';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
import * as i2 from 'ng-zorro-antd-mobile/date-picker-view';
import { DatePickerViewModule } from 'ng-zorro-antd-mobile/date-picker-view';
var DateModels;
(function (DateModels) {
let SelectType;
(function (SelectType) {
SelectType[SelectType["None"] = 0] = "None";
SelectType[SelectType["Single"] = 1] = "Single";
SelectType[SelectType["All"] = 2] = "All";
SelectType[SelectType["Only"] = 3] = "Only";
SelectType[SelectType["Start"] = 4] = "Start";
SelectType[SelectType["Middle"] = 5] = "Middle";
SelectType[SelectType["End"] = 6] = "End";
})(SelectType = DateModels.SelectType || (DateModels.SelectType = {}));
})(DateModels || (DateModels = {}));
const mergeDateTime = (date, time) => {
date = date || new Date();
if (!time) {
return date;
}
return new Date(date.getFullYear(), date.getMonth(), date.getDate(), time.getHours(), time.getMinutes(), time.getSeconds());
};
const formatDate = (date, format, locale) => {
const week = locale && locale.week;
let o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds(),
'q+': Math.floor((date.getMonth() + 3) / 3),
'w+': week && week[date.getDay()],
S: date.getMilliseconds()
};
if (/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
}
for (let k in o) {
if (new RegExp('(' + k + ')').test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));
}
}
return format;
};
const isSameDate = (day_one, day_two) => {
if (!day_one || !day_two) {
console.error('isSameDate function need two params');
return 'need two params';
}
const compareDate = day_one.getDate() === day_two.getDate();
const compareMonth = day_one.getMonth() === day_two.getMonth();
const compareYear = day_one.getFullYear() === day_two.getFullYear();
return compareDate && compareMonth && compareYear;
};
class CalendarDatePickerBaseComponent {
constructor() {
this.props = {
prefixCls: 'rmc-calendar',
infinite: false,
infiniteOpt: false,
defaultDate: new Date(),
initalMonths: 6,
locale: zh_CN.Calendar
};
this.state = {
months: []
};
this.visibleMonth = [];
this.getDateWithoutTime = (date) => {
if (!date) {
return 0;
}
return +new Date(date.getFullYear(), date.getMonth(), date.getDate());
};
this.genWeekData = (firstDate) => {
const minDateTime = this.getDateWithoutTime(this.props.minDate);
const maxDateTime = this.getDateWithoutTime(this.props.maxDate) || Number.POSITIVE_INFINITY;
const weeks = [];
const nextMonth = this.getMonthDate(firstDate, 1).firstDate;
let currentDay = firstDate;
let currentWeek = [];
weeks.push(currentWeek);
let startWeekday = currentDay.getDay();
if (startWeekday > 0) {
for (let i = 0; i < startWeekday; i++) {
currentWeek.push({});
}
}
while (currentDay < nextMonth) {
if (currentWeek.length === 7) {
currentWeek = [];
weeks.push(currentWeek);
}
const dayOfMonth = currentDay.getDate();
const tick = +currentDay;
currentWeek.push({
tick,
dayOfMonth,
selected: DateModels.SelectType.None,
isFirstOfMonth: dayOfMonth === 1,
isLastOfMonth: false,
outOfDate: tick < minDateTime || tick > maxDateTime
});
const year = currentDay.getFullYear();
const month = currentDay.getMonth();
const date = currentDay.getDate();
currentDay = new Date(year, month, date + 1);
}
currentWeek[currentWeek.length - 1].isLastOfMonth = true;
return weeks;
};
this.selectDateRange = (startDate, endDate, clear = false) => {
const { getDateExtra, type, onSelectHasDisableDate } = this.props;
if (type === 'one') {
endDate = undefined;
}
const time1 = this.getDateWithoutTime(startDate), time2 = this.getDateWithoutTime(endDate);
const startDateTick = !time2 || time1 < time2 ? time1 : time2;
const endDateTick = time2 && time1 > time2 ? time1 : time2;
const startMonthDate = this.getMonthDate(new Date(startDateTick)).firstDate;
const endMonthDate = endDateTick ? new Date(endDateTick) : this.getMonthDate(new Date(startDateTick)).lastDate;
let unuseable = [], needUpdate = false;
this.state.months
.filter(m => {
return m.firstDate >= startMonthDate && m.firstDate <= endMonthDate;
})
.forEach(m => {
m.weeks.forEach(w => w
.filter(d => {
if (!endDateTick) {
return d.tick && this.inDate(startDateTick, d.tick);
}
else {
return d.tick && d.tick >= startDateTick && d.tick <= endDateTick;
}
})
.forEach(d => {
const oldValue = d.selected;
if (clear) {
d.selected = DateModels.SelectType.None;
}
else {
const info = (getDateExtra && getDateExtra(new Date(d.tick))) || {};
if (d.outOfDate || info.disable) {
unuseable.push(d.tick);
}
if (this.inDate(startDateTick, d.tick)) {
if (type === 'one') {
d.selected = DateModels.SelectType.Single;
}
else if (!endDateTick) {
d.selected = DateModels.SelectType.Only;
}
else if (startDateTick !== endDateTick) {
d.selected = DateModels.SelectType.Start;
}
else {
d.selected = DateModels.SelectType.All;
}
}
else if (this.inDate(endDateTick, d.tick)) {
d.selected = DateModels.SelectType.End;
}
else {
d.selected = DateModels.SelectType.Middle;
}
}
needUpdate = needUpdate || d.selected !== oldValue;
}));
if (needUpdate && m.componentRef) {
m.componentRef.updateWeeks();
}
});
if (unuseable.length > 0) {
if (onSelectHasDisableDate) {
onSelectHasDisableDate(unuseable.map(tick => new Date(tick)));
}
else {
console.warn('Unusable date. You can handle by onSelectHasDisableDate.', unuseable);
}
}
};
this.computeVisible = (clientHeight, scrollTop) => {
let needUpdate = false;
const MAX_VIEW_PORT = clientHeight * 2;
const MIN_VIEW_PORT = clientHeight;
// 大缓冲区外过滤规则
const filterFunc = (vm) => vm.y &&
vm.height &&
vm.y + vm.height > scrollTop - MAX_VIEW_PORT &&
vm.y < scrollTop + clientHeight + MAX_VIEW_PORT;
if (this.props.infiniteOpt && this.visibleMonth.length > 12) {
this.visibleMonth = this.visibleMonth.filter(filterFunc).sort((a, b) => +a.firstDate - +b.firstDate);
}
// 当小缓冲区不满时填充
if (this.visibleMonth.length > 0) {
const last = this.visibleMonth[this.visibleMonth.length - 1];
if (last.y !== undefined && last.height && last.y + last.height < scrollTop + clientHeight + MIN_VIEW_PORT) {
const lastIndex = this.state.months.indexOf(last);
for (let i = 1; i <= 2; i++) {
const index = lastIndex + i;
if (index < this.state.months.length && this.visibleMonth.indexOf(this.state.months[index]) < 0) {
this.visibleMonth.push(this.state.months[index]);
}
else {
if (this.canLoadNext()) {
this.genMonthData(undefined, 1);
}
}
}
needUpdate = true;
}
const first = this.visibleMonth[0];
if (first.y !== undefined && first.height && first.y > scrollTop - MIN_VIEW_PORT) {
const firstIndex = this.state.months.indexOf(first);
for (let i = 1; i <= 2; i++) {
const index = firstIndex - i;
if (index >= 0 && this.visibleMonth.indexOf(this.state.months[index]) < 0) {
this.visibleMonth.unshift(this.state.months[index]);
needUpdate = true;
}
}
}
}
else if (this.state.months.length > 0) {
this.visibleMonth = this.state.months.filter(filterFunc);
needUpdate = true;
}
return needUpdate;
};
this.createOnScroll = () => {
// let timer: any;
let clientHeight = 0, scrollTop = 0;
return (data) => {
const { client, top } = data;
clientHeight = client;
scrollTop = top;
this.computeVisible(clientHeight, scrollTop);
// 以上方法目前无问题，如果后续有性能问题，改用如下方法，但以下方法会导致刷新稍微延迟现象
// if (timer) {
// return;
// }
//
// timer = setTimeout(() => {
// timer = undefined;
//
// if (this.computeVisible(clientHeight, scrollTop)) {
// console.log('update dom');
// }
// }, 50);
};
};
this.baseOnCellClick = (day) => {
if (!day.tick) {
return;
}
if (this.props.onCellClick) {
this.props.onCellClick(new Date(day.tick));
}
};
}
init() {
const { initalMonths = 6, defaultDate } = this.props;
for (let i = 0; i < initalMonths; i++) {
if (this.canLoadNext()) {
this.genMonthData(defaultDate, i);
}
}
this.visibleMonth = [...this.state.months];
}
receiveProps(oldValue, newValue) {
if (oldValue && newValue) {
if (oldValue.startDate !== newValue.startDate || oldValue.endDate !== newValue.endDate) {
if (oldValue.startDate) {
this.selectDateRange(oldValue.startDate, oldValue.endDate, true);
}
if (newValue.startDate) {
this.selectDateRange(newValue.startDate, newValue.endDate);
}
}
}
}
getMonthDate(date = new Date(), addMonth = 0) {
const y = date.getFullYear(), m = date.getMonth();
return {
firstDate: new Date(y, m + addMonth, 1),
lastDate: new Date(y, m + 1 + addMonth, 0)
};
}
canLoadPrev() {
const { minDate } = this.props;
return (!minDate ||
this.state.months.length <= 0 ||
+this.getMonthDate(minDate).firstDate < +this.state.months[0].firstDate);
}
canLoadNext() {
const { maxDate } = this.props;
return (!maxDate ||
this.state.months.length <= 0 ||
+this.getMonthDate(maxDate).firstDate > +this.state.months[this.state.months.length - 1].firstDate);
}
genMonthData(date, addMonth = 0) {
if (!date) {
date = addMonth >= 0 ? this.state.months[this.state.months.length - 1].firstDate : this.state.months[0].firstDate;
}
if (!date) {
date = new Date();
}
const { locale } = this.props;
const { firstDate, lastDate } = this.getMonthDate(date, addMonth);
const weeks = this.genWeekData(firstDate);
const title = formatDate(firstDate, locale ? locale.monthTitle : 'yyyy/MM', this.props.locale);
const data = {
title,
firstDate,
lastDate,
weeks
};
data.component = this.genMonthComponent(data);
if (addMonth >= 0) {
this.state.months.push(data);
}
else {
this.state.months.unshift(data);
}
const { startDate, endDate } = this.props;
if (startDate) {
this.selectDateRange(startDate, endDate);
}
return data;
}
inDate(date, tick) {
return date <= tick && tick < date + 24 * 3600000;
}
}
class CalendarWeekPanelComponent {
constructor() {
this.week = ['日', '一', '二', '三', '四', '五', '六'];
this.weekPanel = true;
}
set locale(value) {
this._locale = value;
}
ngOnInit() {
this.week = this._locale.week;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CalendarWeekPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: CalendarWeekPanelComponent, selector: "CalendarWeekPanel, nzm-calendar-week-panel", inputs: { locale: "locale" }, host: { properties: { "class.week-panel": "this.weekPanel" } }, ngImport: i0, template: "<div class=\"cell cell-grey\">{{ week[0] }}</div>\n<div class=\"cell\">{{ week[1] }}</div>\n<div class=\"cell\">{{ week[2] }}</div>\n<div class=\"cell\">{{ week[3] }}</div>\n<div class=\"cell\">{{ week[4] }}</div>\n<div class=\"cell\">{{ week[5] }}</div>\n<div class=\"cell cell-grey\">{{ week[6] }}</div>\n", encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CalendarWeekPanelComponent, decorators: [{
type: Component,
args: [{ selector: 'CalendarWeekPanel, nzm-calendar-week-panel', encapsulation: ViewEncapsulation.None, template: "<div class=\"cell cell-grey\">{{ week[0] }}</div>\n<div class=\"cell\">{{ week[1] }}</div>\n<div class=\"cell\">{{ week[2] }}</div>\n<div class=\"cell\">{{ week[3] }}</div>\n<div class=\"cell\">{{ week[4] }}</div>\n<div class=\"cell\">{{ week[5] }}</div>\n<div class=\"cell cell-grey\">{{ week[6] }}</div>\n" }]
}], ctorParameters: () => [], propDecorators: { locale: [{
type: Input
}], weekPanel: [{
type: HostBinding,
args: ['class.week-panel']
}] } });
class CalendarSingleMonthComponent {
set data(value) {
this.props = {
...this.props,
...value
};
}
constructor(_elementRef) {
this._elementRef = _elementRef;
this.props = {
rowSize: 'normal'
};
this.state = {
weekComponents: []
};
this.singleMonth = true;
this.genWeek = (weeksData, index) => {
const { getDateExtra, monthData, onCellClick, locale, rowSize } = this.props;
let rowCls = 'row';
let weeksDataList = [];
if (rowSize === 'xl') {
rowCls += ' row-xl';
}
weeksData.forEach((day, dayOfWeek) => {
const extra = (getDateExtra && getDateExtra(new Date(day.tick))) || {};
let info = extra.info;
const disable = extra.disable || day.outOfDate;
let cls = 'date';
let lCls = 'left';
let rCls = 'right';
let infoCls = 'info';
if (dayOfWeek === 0 || dayOfWeek === 6) {
cls += ' grey';
}
if (disable) {
cls += ' disable';
}
else if (info) {
cls += ' important';
}
if (day.selected) {
cls += ' date-selected';
let styleType = day.selected;
switch (styleType) {
case DateModels.SelectType.Only:
info = locale.begin;
infoCls += ' date-selected';
break;
case DateModels.SelectType.All:
info = locale.begin_over;
infoCls += ' date-selected';
break;
case DateModels.SelectType.Start:
info = locale.begin;
infoCls += ' date-selected';
if (dayOfWeek === 6 || day.isLastOfMonth) {
styleType = DateModels.SelectType.All;
}
break;
case DateModels.SelectType.Middle:
if (dayOfWeek === 0 || day.isFirstOfMonth) {
if (day.isLastOfMonth || dayOfWeek === 6) {
styleType = DateModels.SelectType.All;
}
else {
styleType = DateModels.SelectType.Start;
}
}
else if (dayOfWeek === 6 || day.isLastOfMonth) {
styleType = DateModels.SelectType.End;
}
break;
case DateModels.SelectType.End:
info = locale.over;
infoCls += ' date-selected';
if (dayOfWeek === 0 || day.isFirstOfMonth) {
styleType = DateModels.SelectType.All;
}
break;
}
switch (styleType) {
case DateModels.SelectType.Single:
case DateModels.SelectType.Only:
case DateModels.SelectType.All:
cls += ' selected-single';
break;
case DateModels.SelectType.Start:
cls += ' selected-start';
rCls += ' date-selected';
break;
case DateModels.SelectType.Middle:
cls += ' selected-middle';
lCls += ' date-selected';
rCls += ' date-selected';
break;
case DateModels.SelectType.End:
cls += ' selected-end';
lCls += ' date-selected';
break;
}
}
weeksDataList[dayOfWeek] = {
lCls,
cls,
day,
rCls,
infoCls,
info,
extra,
disable,
onCellClick: onCellClick,
monthData
};
});
this.state.weekComponents[index] = {
index: index,
rowCls,
weeksDataList
};
};
this.updateWeeks = (monthData) => {
(monthData || this.props.monthData).weeks.forEach((week, index) => {
this.genWeek(week, index);
});
};
this.setWarpper = (dom) => {
this.wrapperDivDOM = dom;
};
}
onClickCell(item) {
if (!item.disable && item.onCellClick) {
item.onCellClick(item.day, item.monthData);
}
}
ngOnInit() {
this.setWarpper(this._elementRef.nativeElement);
this.props.monthData.weeks.forEach((week, index) => {
this.genWeek(week, index);
});
}
ngAfterViewInit() {
this.ref = this.props.ref;
this.ref(this);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CalendarSingleMonthComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: CalendarSingleMonthComponent, selector: "CalendarSingleMonth, nzm-single-month", inputs: { data: "data" }, host: { properties: { "class.single-month": "this.singleMonth" } }, ngImport: i0, template: "<div class=\"month-title\">\n {{ props.monthData.title }}\n</div>\n<div class=\"date\">\n <div *ngFor=\"let row of state.weekComponents; let i = index\" [ngClass]=\"row.rowCls\">\n <div\n *ngFor=\"let cell of row.weeksDataList; let j = index\"\n class=\"{{ 'cell ' + ((cell.extra && cell.extra.cellCls) || '') }}\"\n (click)=\"onClickCell(cell)\"\n >\n <div *ngIf=\"row.extra && row.extra.cellRender\">test</div>\n <div *ngIf=\"!row.extra || (row.extra && row.extra.cellRender)\" class=\"date-wrapper\">\n <span [ngClass]=\"cell.lCls\"></span>\n <div [ngClass]=\"cell.cls\">\n {{ (cell.day && cell.day.dayOfMonth) || '' }}\n </div>\n <span [ngClass]=\"cell.rCls\"></span>\n </div>\n <div *ngIf=\"!row.extra || (row.extra && row.extra.cellRender)\" [ngClass]=\"cell.infoCls\">\n {{ cell.info }}\n </div>\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CalendarSingleMonthComponent, decorators: [{
type: Component,
args: [{ selector: 'CalendarSingleMonth, nzm-single-month', encapsulation: ViewEncapsulation.None, template: "<div class=\"month-title\">\n {{ props.monthData.title }}\n</div>\n<div class=\"date\">\n <div *ngFor=\"let row of state.weekComponents; let i = index\" [ngClass]=\"row.rowCls\">\n <div\n *ngFor=\"let cell of row.weeksDataList; let j = index\"\n class=\"{{ 'cell ' + ((cell.extra && cell.extra.cellCls) || '') }}\"\n (click)=\"onClickCell(cell)\"\n >\n <div *ngIf=\"row.extra && row.extra.cellRender\">test</div>\n <div *ngIf=\"!row.extra || (row.extra && row.extra.cellRender)\" class=\"date-wrapper\">\n <span [ngClass]=\"cell.lCls\"></span>\n <div [ngClass]=\"cell.cls\">\n {{ (cell.day && cell.day.dayOfMonth) || '' }}\n </div>\n <span [ngClass]=\"cell.rCls\"></span>\n </div>\n <div *ngIf=\"!row.extra || (row.extra && row.extra.cellRender)\" [ngClass]=\"cell.infoCls\">\n {{ cell.info }}\n </div>\n </div>\n </div>\n</div>\n" }]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { data: [{
type: Input
}], singleMonth: [{
type: HostBinding,
args: ['class.single-month']
}] } });
class CalendarDatePickerComponent extends CalendarDatePickerBaseComponent {
constructor() {
super();
this.transform = '';
this._initDelta = 0;
this._lastY = 0;
this._delta = this._initDelta;
this.amCalendar = true;
this.datePicker = true;
this.genMonthComponent = (data) => {
if (!data) {
return;
}
return {
monthData: data,
locale: this.props.locale,
rowSize: this.props.rowSize,
onCellClick: this.baseOnCellClick,
getDateExtra: this.props.getDateExtra,
ref: dom => {
data.componentRef = dom || data.componentRef || undefined;
data.updateLayout = () => {
this.computeHeight(data, dom);
};
data.updateLayout();
}
};
};
this.computeHeight = (data, singleMonth) => {
if (singleMonth && singleMonth.wrapperDivDOM) {
if (!data.height && !singleMonth.wrapperDivDOM.clientHeight) {
setTimeout(() => this.computeHeight(data, singleMonth), 500);
return;
}
data.height = singleMonth.wrapperDivDOM.clientHeight || data.height || 0;
data.y = singleMonth.wrapperDivDOM.offsetTop || data.y || 0;
}
};
this.setLayout = (dom) => {
if (dom) {
const { onLayout } = this.props;
if (onLayout) {
onLayout(dom.clientHeight);
}
const scrollHandler = this.createOnScroll();
dom.onscroll = evt => {
scrollHandler({
client: dom.clientHeight,
full: evt.currentTarget.clientHeight,
top: evt.currentTarget.scrollTop
});
};
}
};
this.setPanel = (dom) => {
this._panel = dom;
};
}
set onCellClick(value) {
this.props.onCellClick = value;
}
set endDate(value) {
const oldProps = Object.assign({}, this.props);
this.props.endDate = value;
this.receiveProps(oldProps, this.props);
}
set startDate(value) {
const oldProps = Object.assign({}, this.props);
this.props.startDate = value;
this.receiveProps(oldProps, this.props);
}
set propsData(value) {
this.props = {
...this.props,
...value
};
}
set onSelectHasDisableDate(value) {
this.props.onSelectHasDisableDate = value;
}
set onLayout(value) {
this.props.onLayout = value;
}
onTouchStart(event) {
this._lastY = event.touches[0].screenY || event.touches[0].pageY;
this._delta = this._initDelta;
}
onTouchMove(event) {
const ele = event.currentTarget;
const isReachTop = ele.scrollTop === 0;
if (isReachTop) {
this._delta = (event.touches[0].screenY || event.touches[0].pageY) - this._lastY;
if (this._delta > 0) {
event.preventDefault();
if (this._delta > 80) {
this._delta = 80;
}
}
else {
this._delta = 0;
}
this.setTransform(this._panel.style, `translate3d(0,${this._delta}px,0)`);
}
}
onTouchEnd(event) {
this.onFinish();
}
onFinish() {
if (this._delta > 40 && this.canLoadPrev()) {
this.genMonthData(this.state.months[0].firstDate, -1);
this.visibleMonth = this.state.months.slice(0, this.props.initalMonths);
this.state.months.forEach(m => {
if (m.updateLayout) {
m.updateLayout();
}
});
}
this.setTransform(this._panel.style, `translate3d(0,0,0)`);
this.setTransition(this._panel.style, '.3s');
setTimeout(() => {
if (this._panel) {
this.setTransition(this._panel.style, '');
}
}, 300);
}
setTransform(nodeStyle, value) {
this.transform = value;
nodeStyle.transform = value;
nodeStyle.webkitTransform = value;
}
setTransition(nodeStyle, value) {
nodeStyle.transition = value;
nodeStyle.webkitTransition = value;
}
ngOnInit() {
this.init();
this.setLayout(this.layoutDom.nativeElement);
this.setPanel(this.panelDom.nativeElement);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CalendarDatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: CalendarDatePickerComponent, selector: "CalendarDatePicker, nzm-calendar-date-picker", inputs: { onCellClick: "onCellClick", endDate: "endDate", startDate: "startDate", propsData: "propsData", onSelectHasDisableDate: "onSelectHasDisableDate", onLayout: "onLayout" }, host: { properties: { "class.am-calendar": "this.amCalendar", "class.date-picker": "this.datePicker" } }, viewQueries: [{ propertyName: "layoutDom", first: true, predicate: ["layout"], descendants: true, static: true }, { propertyName: "panelDom", first: true, predicate: ["panel"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<CalendarWeekPanel [locale]=\"props.locale\"></CalendarWeekPanel>\n<div\n #layout\n class=\"wrapper\"\n style=\"overflow-x:hidden;overflow-y:visible;-webkit-overflow-scrolling:touch;\"\n (touchstart)=\"onTouchStart($event)\"\n (touchmove)=\"onTouchMove($event)\"\n (touchend)=\"onTouchEnd($event)\"\n>\n <div #panel [ngStyle]=\"{ transform: transform }\">\n <div *ngIf=\"canLoadPrev()\" class=\"load-tip\">{{ props.locale.loadPrevMonth }}</div>\n <div class=\"months\">\n <CalendarSingleMonth\n *ngFor=\"let item of visibleMonth; let i = index\"\n style=\"display: block;\"\n [data]=\"item.component\"\n ></CalendarSingleMonth>\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CalendarWeekPanelComponent, selector: "CalendarWeekPanel, nzm-calendar-week-panel", inputs: ["locale"] }, { kind: "component", type: CalendarSingleMonthComponent, selector: "CalendarSingleMonth, nzm-single-month", inputs: ["data"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CalendarDatePickerComponent, decorators: [{
type: Component,
args: [{ selector: 'CalendarDatePicker, nzm-calendar-date-picker', encapsulation: ViewEncapsulation.None, template: "<CalendarWeekPanel [locale]=\"props.locale\"></CalendarWeekPanel>\n<div\n #layout\n class=\"wrapper\"\n style=\"overflow-x:hidden;overflow-y:visible;-webkit-overflow-scrolling:touch;\"\n (touchstart)=\"onTouchStart($event)\"\n (touchmove)=\"onTouchMove($event)\"\n (touchend)=\"onTouchEnd($event)\"\n>\n <div #panel [ngStyle]=\"{ transform: transform }\">\n <div *ngIf=\"canLoadPrev()\" class=\"load-tip\">{{ props.locale.loadPrevMonth }}</div>\n <div class=\"months\">\n <CalendarSingleMonth\n *ngFor=\"let item of visibleMonth; let i = index\"\n style=\"display: block;\"\n [data]=\"item.component\"\n ></CalendarSingleMonth>\n </div>\n </div>\n</div>\n" }]
}], ctorParameters: () => [], propDecorators: { layoutDom: [{
type: ViewChild,
args: ['layout', { static: true }]
}], panelDom: [{
type: ViewChild,
args: ['panel', { static: true }]
}], onCellClick: [{
type: Input
}], endDate: [{
type: Input
}], startDate: [{
type: Input
}], propsData: [{
type: Input
}], onSelectHasDisableDate: [{
type: Input
}], onLayout: [{
type: Input
}], amCalendar: [{
type: HostBinding,
args: ['class.am-calendar']
}], datePicker: [{
type: HostBinding,
args: ['class.date-picker']
}] } });
class CalendarHeaderComponent {
get locale() {
return this._locale;
}
set locale(value) {
this._locale = value;
}
get closeIcon() {
return this._closeIcon;
}
set closeIcon(value) {
if (value instanceof TemplateRef) {
this._closeIcon = value;
this.closeIcon_component = true;
}
else {
this._closeIcon = value;
this.closeIcon_component = false;
}
}
get showClear() {
return this._showClear;
}
set showClear(value) {
this._showClear = value;
}
constructor() {
this.closeIcon_component = false;
this._closeIcon = 'X';
this.onCancel = new EventEmitter();
this.onClear = new EventEmitter();
this.header = true;
}
triggerCancel() {
if (this.onCancel) {
this.onCancel.emit();
}
}
triggerClear() {
if (this.onClear) {
this.onClear.emit();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CalendarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: CalendarHeaderComponent, selector: "CalendarHeader, nzm-calendar-header", inputs: { locale: "locale", closeIcon: "closeIcon", showClear: "showClear" }, outputs: { onCancel: "onCancel", onClear: "onClear" }, host: { properties: { "class.header": "this.header" } }, ngImport: i0, template: "<span *ngIf=\"!closeIcon_component\" class=\"left\" (click)=\"triggerCancel()\" [innerHTML]=\"closeIcon\"></span>\n<span *ngIf=\"closeIcon_component\" class=\"left\" (click)=\"triggerCancel()\">\n <ng-template [ngTemplateOutlet]=\"closeIcon\"></ng-template>\n</span>\n<span class=\"title\">{{ title || locale.title }}</span>\n<span *ngIf=\"showClear\" class=\"right\" (click)=\"triggerClear()\">{{ clearIcon || locale.clear }}</span>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CalendarHeaderComponent, decorators: [{
type: Component,
args: [{ selector: 'CalendarHeader, nzm-calendar-header', encapsulation: ViewEncapsulation.None, template: "<span *ngIf=\"!closeIcon_component\" class=\"left\" (click)=\"triggerCancel()\" [innerHTML]=\"closeIcon\"></span>\n<span *ngIf=\"closeIcon_component\" class=\"left\" (click)=\"triggerCancel()\">\n <ng-template [ngTemplateOutlet]=\"closeIcon\"></ng-template>\n</span>\n<span class=\"title\">{{ title || locale.title }}</span>\n<span *ngIf=\"showClear\" class=\"right\" (click)=\"triggerClear()\">{{ clearIcon || locale.clear }}</span>\n" }]
}], ctorParameters: () => [], propDecorators: { locale: [{
type: Input
}], closeIcon: [{
type: Input
}], showClear: [{
type: Input
}], onCancel: [{
type: Output
}], onClear: [{
type: Output
}], header: [{
type: HostBinding,
args: ['class.header']
}] } });
class CalendarTimePickerComponent {
set propsData(value) {
this.props = {
...this.props,
...value
};
if (this.props.locale && this.props.locale.today === 'Today') {
this.props.datePickerViewLocale = en_US;
}
else {
this.props.datePickerViewLocale = zh_CN;
}
}
set title(value) {
this.props.title = value;
}
set value(value) {
this.props.value = value;
}
set prefixCls(value) {
this.props.prefixCls = value;
}
set defaultValue(value) {
this.props.defaultValue = value;
}
set pickerPrefixCls(value) {
this.props.pickerPrefixCls = value;
}
set clientHeight(value) {
this.props.clientHeight = value;
const height = (value && (value * 3) / 8 - 52) || Number.POSITIVE_INFINITY;
this.selfHeight = (height > 164 || height < 0 ? 164 : height) + 'px';
}
set onValueChange(value) {
this.props.onValueChange = value;
}
constructor() {
this.defaultProps = {
minDate: new Date(0, 0, 0, 0, 0),
maxDate: new Date(9999, 11, 31, 23, 59, 59),
defaultValue: new Date(2000, 1, 1, 8),
mode: 'time',
datePickerViewLocale: zh_CN
};
this.props = {
minDate: new Date(0, 0, 0, 0, 0),
maxDate: new Date(9999, 11, 31, 23, 59, 59),
defaultValue: new Date(2000, 1, 1, 8),
mode: 'time',
datePickerViewLocale: zh_CN
};
this.timePicker = true;
this.onDateChange = (date) => {
const { onValueChange } = this.props;
if (onValueChange) {
onValueChange(date.date);
}
};
}
getMinTime(date) {
const minDate = this.props.minDate;
if (!date ||
date.getFullYear() > minDate.getFullYear() ||
date.getMonth() > minDate.getMonth() ||
date.getDate() > minDate.getDate()) {
return this.defaultProps.minDate;
}
return minDate;
}
getMaxTime(date) {
const maxDate = this.props.maxDate;
if (!date ||
date.getFullYear() < maxDate.getFullYear() ||
date.getMonth() < maxDate.getMonth() ||
date.getDate() < maxDate.getDate()) {
return this.defaultProps.maxDate;
}
return maxDate;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CalendarTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: CalendarTimePickerComponent, selector: "CalendarTimePicker, nzm-calendar-time-picker", inputs: { propsData: "propsData", title: "title", value: "value", prefixCls: "prefixCls", defaultValue: "defaultValue", pickerPrefixCls: "pickerPrefixCls", clientHeight: "clientHeight", onValueChange: "onValueChange" }, host: { properties: { "class.time-picker": "this.timePicker" } }, ngImport: i0, template: "<div class=\"title\">{{ props.title }}</div>\n<DatePickerView\n [ngStyle]=\"{ height: selfHeight, overflow: 'hidden' }\"\n [mode]=\"props.mode\"\n [value]=\"props.value\"\n [locale]=\"props.datePickerViewLocale\"\n [minDate]=\"getMinTime(props.value || props.defaultValue || undefined)\"\n [maxDate]=\"getMaxTime(props.value || props.defaultValue || undefined)\"\n (onValueChange)=\"onDateChange($event)\"\n></DatePickerView>\n", dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.DatePickerViewComponent, selector: "DatePickerView, nzm-date-picker-view", inputs: ["mode", "minDate", "maxDate", "value", "disabled", "indicatorStyle", "locale", "showErrorToast", "showErrorToastInterval"], outputs: ["onValueChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CalendarTimePickerComponent, decorators: [{
type: Component,
args: [{ selector: 'CalendarTimePicker, nzm-calendar-time-picker', encapsulation: ViewEncapsulation.None, template: "<div class=\"title\">{{ props.title }}</div>\n<DatePickerView\n [ngStyle]=\"{ height: selfHeight, overflow: 'hidden' }\"\n [mode]=\"props.mode\"\n [value]=\"props.value\"\n [locale]=\"props.datePickerViewLocale\"\n [minDate]=\"getMinTime(props.value || props.defaultValue || undefined)\"\n [maxDate]=\"getMaxTime(props.value || props.defaultValue || undefined)\"\n (onValueChange)=\"onDateChange($event)\"\n></DatePickerView>\n" }]
}], ctorParameters: () => [], propDecorators: { propsData: [{
type: Input
}], title: [{
type: Input
}], value: [{
type: Input
}], prefixCls: [{
type: Input
}], defaultValue: [{
type: Input
}], pickerPrefixCls: [{
type: Input
}], clientHeight: [{
type: Input
}], onValueChange: [{
type: Input
}], timePicker: [{
type: HostBinding,
args: ['class.time-picker']
}] } });
class CalendarConfirmPanelComponent {
set propsData(value) {
this.props = {
...this.props,
...value
};
}
set disableBtn(value) {
this.props.disableBtn = value;
const { type } = this.props;
let btnCls = value ? 'button button-disable' : 'button';
if (type === 'one') {
btnCls += ' button-full';
}
this.btnCls = btnCls;
}
set formatStr(value) {
this.props.formatStr = value;
}
set startDateTime(value) {
this.props.startDateTime = value;
this.formatTime();
}
set endDateTime(value) {
this.props.endDateTime = value;
this.formatTime();
}
set onConfirm(value) {
this.props.onConfirm = value;
}
constructor() {
this.props = {
formatStr: 'yyyy-MM-dd hh:mm'
};
this.confirmPane = true;
this.triggerConfirm = () => {
const { onConfirm, disableBtn } = this.props;
if (!disableBtn) {
onConfirm();
}
};
}
formatTime() {
const { locale } = this.props;
let { startDateTime, endDateTime } = this.props;
if (startDateTime && endDateTime && +startDateTime > +endDateTime) {
const tmp = startDateTime;
startDateTime = endDateTime;
endDateTime = tmp;
}
this.startTimeStr = startDateTime ? this.selfFormatDate(startDateTime) : locale.noChoose;
this.endTimeStr = endDateTime ? this.selfFormatDate(endDateTime) : locale.noChoose;
}
selfFormatDate(date) {
const { formatStr = '', locale } = this.props;
return formatDate(date, formatStr, locale);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CalendarConfirmPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: CalendarConfirmPanelComponent, selector: "CalendarConfirmPanel, nzm-calendar-confirm-panel", inputs: { propsData: "propsData", disableBtn: "disableBtn", formatStr: "formatStr", startDateTime: "startDateTime", endDateTime: "endDateTime", onConfirm: "onConfirm" }, host: { properties: { "class.confirm-panel": "this.confirmPane" } }, ngImport: i0, template: "<div *ngIf=\"props.type === 'range'\" class=\"info\">\n <p>\n {{ props.locale.start }}: <span class=\"{{ !props.startDateTime ? 'grey' : '' }}\">{{ startTimeStr }}</span>\n </p>\n <p>\n {{ props.locale.end }}: <span class=\"{{ !props.endDateTime ? 'grey' : '' }}\">{{ endTimeStr }}</span>\n </p>\n</div>\n<div [ngClass]=\"btnCls\" (click)=\"triggerConfirm()\">\n {{ props.locale.confirm }}\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CalendarConfirmPanelComponent, decorators: [{
type: Component,
args: [{ selector: 'CalendarConfirmPanel, nzm-calendar-confirm-panel', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"props.type === 'range'\" class=\"info\">\n <p>\n {{ props.locale.start }}: <span class=\"{{ !props.startDateTime ? 'grey' : '' }}\">{{ startTimeStr }}</span>\n </p>\n <p>\n {{ props.locale.end }}: <span class=\"{{ !props.endDateTime ? 'grey' : '' }}\">{{ endTimeStr }}</span>\n </p>\n</div>\n<div [ngClass]=\"btnCls\" (click)=\"triggerConfirm()\">\n {{ props.locale.confirm }}\n</div>\n" }]
}], ctorParameters: () => [], propDecorators: { propsData: [{
type: Input
}], disableBtn: [{
type: Input
}], formatStr: [{
type: Input
}], startDateTime: [{
type: Input
}], endDateTime: [{
type: Input
}], onConfirm: [{
type: Input
}], confirmPane: [{
type: HostBinding,
args: ['class.confirm-panel']
}] } });
class CalendarShortcutPanelComponent {
set locale(value) {
this.props.locale = value;
}
set onSelect(value) {
this.props.onSelect = value;
}
constructor() {
this.props = {};
this.shortcutPanel = true;
this.onClick = (type) => {
const { onSelect } = this.props;
const today = new Date();
switch (type) {
case 'today':
onSelect(new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0), new Date(today.getFullYear(), today.getMonth(), today.getDate(), 12));
break;
case 'yesterday':
onSelect(new Date(today.getFullYear(), today.getMonth(), today.getDate() - 1, 0), new Date(today.getFullYear(), today.getMonth(), today.getDate() - 1, 12));
break;
case 'lastweek':
onSelect(new Date(today.getFullYear(), today.getMonth(), today.getDate() - 6, 0), new Date(today.getFullYear(), today.getMonth(), today.getDate(), 12));
break;
case 'lastmonth':
onSelect(new Date(today.getFullYear(), today.getMonth(), today.getDate() - 29, 0), new Date(today.getFullYear(), today.getMonth(), today.getDate(), 12));
break;
}
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CalendarShortcutPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: CalendarShortcutPanelComponent, selector: "CalendarShortcutPanel, nzm-calendar-shortcut-panel", inputs: { locale: "locale", onSelect: "onSelect" }, host: { properties: { "class.shortcut-panel": "this.shortcutPanel" } }, ngImport: i0, template: "<div class=\"item\" (click)=\"onClick('today')\">{{ props.locale.today }}</div>\n<div class=\"item\" (click)=\"onClick('yesterday')\">{{ props.locale.yesterday }}</div>\n<div class=\"item\" (click)=\"onClick('lastweek')\">{{ props.locale.lastWeek }}</div>\n<div class=\"item\" (click)=\"onClick('lastmonth')\">{{ props.locale.lastMonth }}</div>\n", encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CalendarShortcutPanelComponent, d