ng-pick-datetime
Version:
Angular Date Time Picker
427 lines (426 loc) • 20.6 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var __param = (this && this.__param) || function (paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); }
};
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostBinding, HostListener, Optional, ViewChild } from '@angular/core';
import { OwlDateTimeIntl } from './date-time-picker-intl.service';
import { OwlCalendarComponent } from './calendar.component';
import { OwlTimerComponent } from './timer.component';
import { DateTimeAdapter } from './adapter/date-time-adapter.class';
import { Subject } from 'rxjs';
import { owlDateTimePickerAnimations } from './date-time-picker.animations';
import { DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, SPACE, UP_ARROW } from '@angular/cdk/keycodes';
var OwlDateTimeContainerComponent = (function () {
function OwlDateTimeContainerComponent(cdRef, elmRef, pickerIntl, dateTimeAdapter) {
this.cdRef = cdRef;
this.elmRef = elmRef;
this.pickerIntl = pickerIntl;
this.dateTimeAdapter = dateTimeAdapter;
this.activeSelectedIndex = 0;
this.hidePicker$ = new Subject();
this.confirmSelected$ = new Subject();
this.pickerOpened$ = new Subject();
}
Object.defineProperty(OwlDateTimeContainerComponent.prototype, "hidePickerStream", {
get: function () {
return this.hidePicker$.asObservable();
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlDateTimeContainerComponent.prototype, "confirmSelectedStream", {
get: function () {
return this.confirmSelected$.asObservable();
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlDateTimeContainerComponent.prototype, "pickerOpenedStream", {
get: function () {
return this.pickerOpened$.asObservable();
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlDateTimeContainerComponent.prototype, "pickerMoment", {
get: function () {
return this._clamPickerMoment;
},
set: function (value) {
if (value) {
this._clamPickerMoment = this.dateTimeAdapter.clampDate(value, this.picker.minDateTime, this.picker.maxDateTime);
}
this.cdRef.markForCheck();
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlDateTimeContainerComponent.prototype, "pickerType", {
get: function () {
return this.picker.pickerType;
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlDateTimeContainerComponent.prototype, "cancelLabel", {
get: function () {
return this.pickerIntl.cancelBtnLabel;
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlDateTimeContainerComponent.prototype, "setLabel", {
get: function () {
return this.pickerIntl.setBtnLabel;
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlDateTimeContainerComponent.prototype, "fromLabel", {
get: function () {
return this.pickerIntl.rangeFromLabel;
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlDateTimeContainerComponent.prototype, "toLabel", {
get: function () {
return this.pickerIntl.rangeToLabel;
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlDateTimeContainerComponent.prototype, "fromFormattedValue", {
get: function () {
var value = this.picker.selecteds[0];
return value ? this.dateTimeAdapter.format(value, this.picker.formatString) : '';
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlDateTimeContainerComponent.prototype, "toFormattedValue", {
get: function () {
var value = this.picker.selecteds[1];
return value ? this.dateTimeAdapter.format(value, this.picker.formatString) : '';
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlDateTimeContainerComponent.prototype, "showControlButtons", {
get: function () {
return this.picker.pickerMode === 'dialog' ||
(this.picker.pickerType !== 'calendar' && this.picker.pickerMode !== 'inline');
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlDateTimeContainerComponent.prototype, "containerElm", {
get: function () {
return this.elmRef.nativeElement;
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlDateTimeContainerComponent.prototype, "owlDTContainerClass", {
get: function () {
return true;
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlDateTimeContainerComponent.prototype, "owlDTPopupContainerClass", {
get: function () {
return this.picker.pickerMode === 'popup';
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlDateTimeContainerComponent.prototype, "owlDTDialogContainerClass", {
get: function () {
return this.picker.pickerMode === 'dialog';
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlDateTimeContainerComponent.prototype, "owlDTInlineContainerClass", {
get: function () {
return this.picker.pickerMode === 'inline';
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlDateTimeContainerComponent.prototype, "owlDTContainerDisabledClass", {
get: function () {
return this.picker.disabled;
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlDateTimeContainerComponent.prototype, "owlDTContainerId", {
get: function () {
return this.picker.id;
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlDateTimeContainerComponent.prototype, "owlDTContainerAnimation", {
get: function () {
return this.picker.pickerMode === 'inline' ? '' : 'enter';
},
enumerable: true,
configurable: true
});
OwlDateTimeContainerComponent.prototype.ngOnInit = function () {
};
OwlDateTimeContainerComponent.prototype.ngAfterContentInit = function () {
this.initPicker();
};
OwlDateTimeContainerComponent.prototype.ngAfterViewInit = function () {
this.focusPicker();
};
OwlDateTimeContainerComponent.prototype.handleContainerAnimationDone = function (event) {
var toState = event.toState;
if (toState === 'enter') {
this.pickerOpened$.next();
}
};
OwlDateTimeContainerComponent.prototype.dateSelected = function (date) {
var result;
if (this.picker.isInSingleMode) {
result = this.dateSelectedInSingleMode(date);
if (result) {
this.pickerMoment = result;
this.picker.select(result);
}
else {
if (this.pickerType === 'calendar') {
this.hidePicker$.next(null);
}
}
return;
}
if (this.picker.isInRangeMode) {
result = this.dateSelectedInRangeMode(date);
if (result) {
this.pickerMoment = result[this.activeSelectedIndex];
this.picker.select(result);
}
}
};
OwlDateTimeContainerComponent.prototype.timeSelected = function (time) {
this.pickerMoment = this.dateTimeAdapter.clone(time);
if (!this.picker.dateTimeChecker(this.pickerMoment)) {
return;
}
if (this.picker.isInSingleMode) {
this.picker.select(this.pickerMoment);
return;
}
if (this.picker.isInRangeMode) {
var selecteds = this.picker.selecteds.slice();
if ((this.activeSelectedIndex === 0 && selecteds[1] && this.dateTimeAdapter.compare(this.pickerMoment, selecteds[1]) === 1) ||
(this.activeSelectedIndex === 1 && selecteds[0] && this.dateTimeAdapter.compare(this.pickerMoment, selecteds[0]) === -1)) {
selecteds[0] = this.pickerMoment;
selecteds[1] = this.pickerMoment;
}
else {
selecteds[this.activeSelectedIndex] = this.pickerMoment;
}
this.picker.select(selecteds);
}
};
OwlDateTimeContainerComponent.prototype.onCancelClicked = function (event) {
this.hidePicker$.next(null);
event.preventDefault();
return;
};
OwlDateTimeContainerComponent.prototype.onSetClicked = function (event) {
if (!this.picker.dateTimeChecker(this.pickerMoment)) {
this.hidePicker$.next(null);
event.preventDefault();
return;
}
this.confirmSelected$.next(event);
event.preventDefault();
return;
};
OwlDateTimeContainerComponent.prototype.handleClickOnInfoGroup = function (event, index) {
this.setActiveSelectedIndex(index);
event.preventDefault();
event.stopPropagation();
};
OwlDateTimeContainerComponent.prototype.handleKeydownOnInfoGroup = function (event, next, index) {
switch (event.keyCode) {
case DOWN_ARROW:
case RIGHT_ARROW:
case UP_ARROW:
case LEFT_ARROW:
next.focus();
this.setActiveSelectedIndex(index === 0 ? 1 : 0);
event.preventDefault();
event.stopPropagation();
break;
case SPACE:
this.setActiveSelectedIndex(index);
event.preventDefault();
event.stopPropagation();
break;
default:
return;
}
};
OwlDateTimeContainerComponent.prototype.setActiveSelectedIndex = function (index) {
if (this.picker.selectMode === 'range' &&
this.activeSelectedIndex !== index) {
this.activeSelectedIndex = index;
var selected = this.picker.selecteds[this.activeSelectedIndex];
if (this.picker.selecteds && selected) {
this.pickerMoment = this.dateTimeAdapter.clone(selected);
}
}
return;
};
OwlDateTimeContainerComponent.prototype.initPicker = function () {
this.pickerMoment = this.picker.startAt || this.dateTimeAdapter.now();
this.activeSelectedIndex = this.picker.selectMode === 'rangeTo' ? 1 : 0;
};
OwlDateTimeContainerComponent.prototype.dateSelectedInSingleMode = function (date) {
if (this.dateTimeAdapter.isSameDay(date, this.picker.selected)) {
return null;
}
return this.updateAndCheckCalendarDate(date);
};
OwlDateTimeContainerComponent.prototype.dateSelectedInRangeMode = function (date) {
var from = this.picker.selecteds[0];
var to = this.picker.selecteds[1];
var result = this.updateAndCheckCalendarDate(date);
if (!result) {
return null;
}
if (this.picker.selectMode === 'range') {
if (this.picker.selecteds && this.picker.selecteds.length && !to && from &&
this.dateTimeAdapter.differenceInCalendarDays(result, from) >= 0) {
to = result;
this.activeSelectedIndex = 1;
}
else {
from = result;
to = null;
this.activeSelectedIndex = 0;
}
}
else if (this.picker.selectMode === 'rangeFrom') {
from = result;
if (to && this.dateTimeAdapter.compare(from, to) > 0) {
to = null;
}
}
else if (this.picker.selectMode === 'rangeTo') {
to = result;
if (from && this.dateTimeAdapter.compare(from, to) > 0) {
from = null;
}
}
return [from, to];
};
OwlDateTimeContainerComponent.prototype.updateAndCheckCalendarDate = function (date) {
var result;
if (this.picker.pickerType === 'both') {
result = this.dateTimeAdapter.createDate(this.dateTimeAdapter.getYear(date), this.dateTimeAdapter.getMonth(date), this.dateTimeAdapter.getDate(date), this.dateTimeAdapter.getHours(this.pickerMoment), this.dateTimeAdapter.getMinutes(this.pickerMoment), this.dateTimeAdapter.getSeconds(this.pickerMoment));
result = this.dateTimeAdapter.clampDate(result, this.picker.minDateTime, this.picker.maxDateTime);
}
else {
result = this.dateTimeAdapter.clone(date);
}
return this.picker.dateTimeChecker(result) ? result : null;
};
OwlDateTimeContainerComponent.prototype.focusPicker = function () {
if (this.picker.pickerMode === 'inline') {
return;
}
if (this.calendar) {
this.calendar.focusActiveCell();
}
else if (this.timer) {
this.timer.focus();
}
};
__decorate([
ViewChild(OwlCalendarComponent),
__metadata("design:type", OwlCalendarComponent)
], OwlDateTimeContainerComponent.prototype, "calendar", void 0);
__decorate([
ViewChild(OwlTimerComponent),
__metadata("design:type", OwlTimerComponent)
], OwlDateTimeContainerComponent.prototype, "timer", void 0);
__decorate([
HostBinding('class.owl-dt-container'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [])
], OwlDateTimeContainerComponent.prototype, "owlDTContainerClass", null);
__decorate([
HostBinding('class.owl-dt-popup-container'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [])
], OwlDateTimeContainerComponent.prototype, "owlDTPopupContainerClass", null);
__decorate([
HostBinding('class.owl-dt-dialog-container'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [])
], OwlDateTimeContainerComponent.prototype, "owlDTDialogContainerClass", null);
__decorate([
HostBinding('class.owl-dt-inline-container'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [])
], OwlDateTimeContainerComponent.prototype, "owlDTInlineContainerClass", null);
__decorate([
HostBinding('class.owl-dt-container-disabled'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [])
], OwlDateTimeContainerComponent.prototype, "owlDTContainerDisabledClass", null);
__decorate([
HostBinding('attr.id'),
__metadata("design:type", String),
__metadata("design:paramtypes", [])
], OwlDateTimeContainerComponent.prototype, "owlDTContainerId", null);
__decorate([
HostBinding('@transformPicker'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], OwlDateTimeContainerComponent.prototype, "owlDTContainerAnimation", null);
__decorate([
HostListener('@transformPicker.done', ['$event']),
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", void 0)
], OwlDateTimeContainerComponent.prototype, "handleContainerAnimationDone", null);
OwlDateTimeContainerComponent = __decorate([
Component({
exportAs: 'owlDateTimeContainer',
selector: 'owl-date-time-container',
template: "<div [cdkTrapFocus]=\"picker.pickerMode !== 'inline'\" [@fadeInPicker]=\"picker.pickerMode === 'inline'? '' : 'enter'\" class=\"owl-dt-container-inner\"><owl-date-time-calendar *ngIf=\"pickerType === 'both' || pickerType === 'calendar'\" class=\"owl-dt-container-row\" [firstDayOfWeek]=\"picker.firstDayOfWeek\" [(pickerMoment)]=\"pickerMoment\" [selected]=\"picker.selected\" [selecteds]=\"picker.selecteds\" [selectMode]=\"picker.selectMode\" [minDate]=\"picker.minDateTime\" [maxDate]=\"picker.maxDateTime\" [dateFilter]=\"picker.dateTimeFilter\" [startView]=\"picker.startView\" [hideOtherMonths]=\"picker.hideOtherMonths\" (yearSelected)=\"picker.selectYear($event)\" (monthSelected)=\"picker.selectMonth($event)\" (selectedChange)=\"dateSelected($event)\"></owl-date-time-calendar><owl-date-time-timer *ngIf=\"pickerType === 'both' || pickerType === 'timer'\" class=\"owl-dt-container-row\" [pickerMoment]=\"pickerMoment\" [minDateTime]=\"picker.minDateTime\" [maxDateTime]=\"picker.maxDateTime\" [showSecondsTimer]=\"picker.showSecondsTimer\" [hour12Timer]=\"picker.hour12Timer\" [stepHour]=\"picker.stepHour\" [stepMinute]=\"picker.stepMinute\" [stepSecond]=\"picker.stepSecond\" (selectedChange)=\"timeSelected($event)\"></owl-date-time-timer><div *ngIf=\"picker.isInRangeMode\" role=\"radiogroup\" class=\"owl-dt-container-info owl-dt-container-row\"><div role=\"radio\" [tabindex]=\"activeSelectedIndex === 0 ? 0 : -1\" [attr.aria-checked]=\"activeSelectedIndex === 0\" class=\"owl-dt-control owl-dt-container-range owl-dt-container-from\" [ngClass]=\"{'owl-dt-container-info-active': activeSelectedIndex === 0}\" (click)=\"handleClickOnInfoGroup($event, 0)\" (keydown)=\"handleKeydownOnInfoGroup($event, to, 0)\" #from><span class=\"owl-dt-control-content owl-dt-container-range-content\" tabindex=\"-1\"><span class=\"owl-dt-container-info-label\">{{fromLabel}}:</span> <span class=\"owl-dt-container-info-value\">{{fromFormattedValue}}</span></span></div><div role=\"radio\" [tabindex]=\"activeSelectedIndex === 1 ? 0 : -1\" [attr.aria-checked]=\"activeSelectedIndex === 1\" class=\"owl-dt-control owl-dt-container-range owl-dt-container-to\" [ngClass]=\"{'owl-dt-container-info-active': activeSelectedIndex === 1}\" (click)=\"handleClickOnInfoGroup($event, 1)\" (keydown)=\"handleKeydownOnInfoGroup($event, from, 1)\" #to><span class=\"owl-dt-control-content owl-dt-container-range-content\" tabindex=\"-1\"><span class=\"owl-dt-container-info-label\">{{toLabel}}:</span> <span class=\"owl-dt-container-info-value\">{{toFormattedValue}}</span></span></div></div><div *ngIf=\"showControlButtons\" class=\"owl-dt-container-buttons owl-dt-container-row\"><button class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\" type=\"button\" tabindex=\"0\" (click)=\"onCancelClicked($event)\"><span class=\"owl-dt-control-content owl-dt-control-button-content\" tabindex=\"-1\">{{cancelLabel}}</span></button> <button class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\" type=\"button\" tabindex=\"0\" (click)=\"onSetClicked($event)\"><span class=\"owl-dt-control-content owl-dt-control-button-content\" tabindex=\"-1\">{{setLabel}}</span></button></div></div>",
styles: [""],
changeDetection: ChangeDetectionStrategy.OnPush,
preserveWhitespaces: false,
animations: [
owlDateTimePickerAnimations.transformPicker,
owlDateTimePickerAnimations.fadeInPicker
]
}),
__param(3, Optional()),
__metadata("design:paramtypes", [ChangeDetectorRef,
ElementRef,
OwlDateTimeIntl,
DateTimeAdapter])
], OwlDateTimeContainerComponent);
return OwlDateTimeContainerComponent;
}());
export { OwlDateTimeContainerComponent };