@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
1,130 lines (1,126 loc) • 205 kB
JavaScript
import { Injectable, EventEmitter, Component, forwardRef, ElementRef, Renderer2, ChangeDetectorRef, Input, Output, HostListener, Directive, ViewContainerRef, ComponentFactoryResolver, Injector, ViewChild, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { DefaultDateConverter, AppendToBodyDirectionsConfig, cornerFadeInOut } from '@duoduo-oba/ng-devui/utils';
import { I18nService } from '@duoduo-oba/ng-devui/i18n';
import { style, animate, AnimationBuilder } from '@angular/animations';
import { fromEvent, Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
import { CommonModule } from '@angular/common';
import { CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
import { ButtonModule } from '@duoduo-oba/ng-devui/button';
/**
* @fileoverview added by tsickle
* Generated from: date-picker.config.service.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class DatePickerConfigService {
constructor() {
this.dateConfig = {
timePicker: false,
dateConverter: null,
min: 1900,
max: 2099,
format: {
date: 'y/MM/dd',
time: 'y/MM/dd HH:mm:ss'
}
};
}
}
DatePickerConfigService.decorators = [
{ type: Injectable }
];
if (false) {
/** @type {?} */
DatePickerConfigService.prototype.dateConfig;
}
/**
* @fileoverview added by tsickle
* Generated from: date-change-event-args.model.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @enum {number} */
const SelectDateChangeReason = {
date: 0,
time: 1,
button: 2,
format: 3,
};
SelectDateChangeReason[SelectDateChangeReason.date] = 'date';
SelectDateChangeReason[SelectDateChangeReason.time] = 'time';
SelectDateChangeReason[SelectDateChangeReason.button] = 'button';
SelectDateChangeReason[SelectDateChangeReason.format] = 'format';
/**
* @record
*/
function SelectDateChangeEventArgs() { }
if (false) {
/** @type {?} */
SelectDateChangeEventArgs.prototype.reason;
/** @type {?} */
SelectDateChangeEventArgs.prototype.selectedDate;
}
/**
* @fileoverview added by tsickle
* Generated from: datepicker.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class DatepickerComponent {
/**
* @param {?} elementRef
* @param {?} renderer2
* @param {?} datePickerConfig
* @param {?} changeDetectorRef
* @param {?} i18n
*/
constructor(elementRef, renderer2, datePickerConfig, changeDetectorRef, i18n) {
this.elementRef = elementRef;
this.renderer2 = renderer2;
this.datePickerConfig = datePickerConfig;
this.changeDetectorRef = changeDetectorRef;
this.i18n = i18n;
this.selectedDateChange = new EventEmitter();
this.disabled = false;
this.yearNumber = 12;
this.onChange = (/**
* @param {?} _
* @return {?}
*/
(_) => null);
this.onTouched = (/**
* @return {?}
*/
() => null);
this.clearAll = (/**
* @return {?}
*/
() => {
this.writeValue(null);
this.onChange(null);
this.selectedDateChange.emit({
reason: SelectDateChangeReason.button,
selectedDate: null
});
});
this.chooseDate = (/**
* @param {?} date
* @param {?=} event
* @return {?}
*/
(date, event = {}) => {
/** @type {?} */
const parseDate = this.dateConverter.parse(date, this.dateFormat, this.locale || this.i18nLocale);
this.selectedDate = parseDate || new Date();
this.onSelectDateChanged();
this.onSelectDate(event, parseDate);
});
this._dateConfig = datePickerConfig['dateConfig'];
this.dateConverter = datePickerConfig['dateConfig'].dateConverter || new DefaultDateConverter();
this.renderer2.setStyle(this.elementRef.nativeElement, 'display', 'inline-block');
}
/**
* @return {?}
*/
ngOnInit() {
this.showTime = this.showTime || this.dateConfig.timePicker;
this._minDate = this.minDate ? new Date(this.minDate) : new Date(this.dateConfig.min, 0, 1, 0, 0, 0);
this._maxDate = this.maxDate ? new Date(this.maxDate) : new Date(this.dateConfig.max, 11, 31, 23, 59, 59);
this.hourOptions = new Array(24).fill(0).map((/**
* @param {?} value
* @param {?} index
* @return {?}
*/
(value, index) => this.fillLeft(index)));
this.minuteOptions = new Array(60).fill(0).map((/**
* @param {?} value
* @param {?} index
* @return {?}
*/
(value, index) => this.fillLeft(index)));
this.nowMinYear = (new Date()).getFullYear() - Math.floor(this.yearNumber / 2) < this.minDate.getFullYear() ?
this.minDate.getFullYear() : (new Date()).getFullYear() - Math.floor(this.yearNumber / 2);
this.nowMaxYear = this.nowMinYear + this.yearNumber > this.maxDate.getFullYear() ?
this.maxDate.getFullYear() : this.nowMinYear + this.yearNumber;
this.setI18nText();
this.onSelectDateChanged();
this.onDisplayWeeksChange();
this.onYearRangeChange();
this.initDatePicker();
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (changes && changes['selectedDate'] && changes['selectedDate'].currentValue) {
this.writeValue(this.selectedDate);
}
}
/**
* @param {?} $event
* @return {?}
*/
onDocumentClick($event) {
if (!this.elementRef.nativeElement.contains($event.target)) {
this.openChooseYearAndMonth = false;
this.resetYearOptions();
}
}
/**
* @param {?} $event
* @return {?}
*/
onClick($event) {
$event.stopPropagation();
}
/**
* @param {?} dateConfig
* @return {?}
*/
set dateConfig(dateConfig) {
if (this.checkDateConfig(dateConfig)) {
this._dateConfig = dateConfig;
this._dateFormat = this.showTime ? dateConfig.format.time : dateConfig.format.date;
}
else {
this._dateConfig = this.datePickerConfig.dateConfig;
}
}
/**
* @return {?}
*/
get dateConfig() {
return this._dateConfig;
}
/**
* @param {?} dateConfig
* @return {?}
*/
checkDateConfig(dateConfig) {
if (!dateConfig) {
return false;
}
if (typeof (dateConfig.timePicker) !== 'boolean' || !dateConfig.max || !dateConfig.min || !dateConfig.format) {
return false;
}
return true;
}
/**
* @param {?} date
* @return {?}
*/
set minDate(date) {
/** @type {?} */
const parseDate = this.dateConverter.parse(date, this.dateFormat, this.locale || this.i18nLocale);
if (parseDate) {
this._minDate = parseDate;
this.onYearRangeChange();
}
}
/**
* @param {?} date
* @return {?}
*/
set maxDate(date) {
/** @type {?} */
const parseDate = this.dateConverter.parse(date, this.dateFormat, this.locale || this.i18nLocale);
if (parseDate) {
this._maxDate = parseDate;
this.onYearRangeChange();
}
}
/**
* @return {?}
*/
get maxDate() {
return this._maxDate;
}
/**
* @return {?}
*/
get minDate() {
return this._minDate;
}
/**
* @param {?} dateFormat
* @return {?}
*/
set dateFormat(dateFormat) {
if (this._dateFormat !== dateFormat) {
this._dateFormat = dateFormat;
}
}
/**
* @return {?}
*/
get dateFormat() {
return this._dateFormat;
}
/**
* @protected
* @return {?}
*/
resetYearOptions() {
/** @type {?} */
const baseYear = this.selectedDate ? this.selectedDate.getFullYear() : (new Date()).getFullYear();
this.currentYear = baseYear;
this.nowMinYear = baseYear - Math.floor(this.yearNumber / 2) < this.minDate.getFullYear() ?
this.minDate.getFullYear() : baseYear - Math.floor(this.yearNumber / 2);
this.nowMaxYear = this.nowMinYear + this.yearNumber > this.maxDate.getFullYear() ?
this.maxDate.getFullYear() : this.nowMinYear + this.yearNumber;
this.onYearRangeChange();
}
/**
* @return {?}
*/
onYearRangeChange() {
if (!this.nowMinYear || !this.nowMaxYear) {
return;
}
/** @type {?} */
const yearNumber = this.yearNumber > this.nowMaxYear - this.nowMinYear + 1 ? this.nowMaxYear - this.nowMinYear + 1 : this.yearNumber;
this.yearOptions = new Array(yearNumber).fill(0).map((/**
* @param {?} value
* @param {?} index
* @return {?}
*/
(value, index) => {
return this.nowMinYear + index;
}));
}
/**
* @param {?} obj
* @return {?}
*/
writeValue(obj) {
if (!obj) {
return;
}
this.selectedDate = obj ?
this.dateConverter.parse(obj, this.dateFormat, this.locale || this.i18nLocale) : null;
this.onSelectDateChanged();
this.onDisplayWeeksChange();
this.availableMonths = this.onDisplayMonthsChange();
this.changeDetectorRef.markForCheck();
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.onChange = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) {
this.onTouched = fn;
}
/**
* @return {?}
*/
hasPreMonth() {
if (this.currentYear > this.minDate.getFullYear()) {
return true;
}
else if (this.currentYear === this.minDate.getFullYear() && this.currentMonth > this.minDate.getMonth()) {
return true;
}
else {
return false;
}
}
/**
* @return {?}
*/
onPreMonth() {
if (!this.hasPreMonth()) {
return;
}
/** @type {?} */
const date = new Date(this.currentYear, this.currentMonth);
date.setMonth(date.getMonth() - 1);
this.currentMonth = date.getMonth();
this.currentYear = date.getFullYear();
this.onDisplayWeeksChange();
}
/**
* @return {?}
*/
hasNextMonth() {
if (this.currentYear < this.maxDate.getFullYear()) {
return true;
}
else if (this.currentYear === this.maxDate.getFullYear() && this.currentMonth < this.maxDate.getMonth()) {
return true;
}
else {
return false;
}
}
/**
* @param {?=} currentDate
* @param {?=} invocation
* @return {?}
*/
onNextMonth(currentDate, invocation) {
if (!this.hasNextMonth() && invocation !== 'init') {
return;
}
/** @type {?} */
let date;
if (currentDate) {
date = new Date(currentDate.getTime());
}
else {
date = new Date(this.currentYear, this.currentMonth);
}
date.setMonth(date.getMonth() + 1);
this.currentMonth = date.getMonth();
this.currentYear = date.getFullYear();
this.onDisplayWeeksChange();
}
/**
* @return {?}
*/
hasPreYearOption() {
return this.nowMinYear > this.minDate.getFullYear();
}
/**
* @return {?}
*/
onPreYearOption() {
if (!this.hasPreYearOption()) {
return;
}
if (this.nowMinYear - this.yearNumber >= this.minDate.getFullYear()) {
this.nowMaxYear = this.nowMinYear - 1;
this.nowMinYear = this.nowMinYear - this.yearNumber;
}
else {
this.nowMaxYear = this.nowMinYear - 1;
this.nowMinYear = this.minDate.getFullYear();
}
this.onYearRangeChange();
}
/**
* @return {?}
*/
hasNextYearOption() {
return this.nowMaxYear < this.maxDate.getFullYear();
}
/**
* @return {?}
*/
onNextYearOption() {
if (!this.hasNextYearOption()) {
return;
}
if (this.nowMaxYear + this.yearNumber <= this.maxDate.getFullYear()) {
this.nowMinYear = this.nowMaxYear + 1;
this.nowMaxYear = this.nowMaxYear + this.yearNumber;
}
else {
this.nowMinYear = this.nowMaxYear + 1;
this.nowMaxYear = this.maxDate.getFullYear();
}
this.onYearRangeChange();
}
/**
* @param {?} year
* @param {?=} $event
* @return {?}
*/
onSelectYear(year, $event) {
if ($event) {
$event.stopPropagation();
}
this.currentYear = year;
this.onDisplayWeeksChange();
this.availableMonths = this.onDisplayMonthsChange();
}
/**
* @protected
* @return {?}
*/
onSelectDateChanged() {
/** @type {?} */
let date = this.selectedDate || new Date();
if (date.getTime() < this.minDate.getTime()) {
date = this.minDate;
}
if (date.getTime() > this.maxDate.getTime()) {
date = this.maxDate;
}
this.currentYear = date.getFullYear();
this.currentMonth = date.getMonth();
this.currentHour = this.showTime ? date.getHours() : 0;
this.currentMinute = this.showTime ? date.getMinutes() : 0;
this.currentSecond = this.showTime ? date.getSeconds() : 0;
}
/**
* @return {?}
*/
onDisplayWeeksChange() {
/** @type {?} */
const firstDayOfMonth = new Date(this.currentYear, this.currentMonth, 1);
/** @type {?} */
const weekOfDay = firstDayOfMonth.getDay();
/** @type {?} */
const startDate = new Date(firstDayOfMonth.getTime() - weekOfDay * DatepickerComponent.DAY_DURATION);
/** @type {?} */
const displayWeeks = [];
for (let i = 0; i < 6; i++) {
/** @type {?} */
const startWeekDate = startDate.getTime() + i * 7 * DatepickerComponent.DAY_DURATION;
/** @type {?} */
const weekDays = new Array(7).fill(0).map((/**
* @param {?} value
* @param {?} index
* @return {?}
*/
(value, index) => {
/** @type {?} */
const currentDate = new Date(startWeekDate + index * DatepickerComponent.DAY_DURATION);
return {
day: this.fillLeft(currentDate.getDate()),
date: currentDate,
inMonth: currentDate.getMonth().toString() === this.currentMonth.toString()
};
}));
displayWeeks.push(weekDays);
}
this.displayWeeks = displayWeeks;
}
/**
* @return {?}
*/
onDisplayMonthsChange() {
/** @type {?} */
const all = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
if (this.currentYear > this.minDate.getFullYear() && this.currentYear < this.maxDate.getFullYear()) {
return all;
}
if (this.currentYear < this.minDate.getFullYear() || this.currentYear > this.maxDate.getFullYear()) {
return [];
}
/** @type {?} */
const returnValue = [];
if (this.currentYear === this.minDate.getFullYear()) {
for (const month of all) {
if (month >= this.minDate.getMonth()) {
returnValue.push(month);
}
}
return returnValue;
}
if (this.currentYear === this.maxDate.getFullYear()) {
for (const month of all) {
if (month <= this.maxDate.getMonth()) {
returnValue.push(month);
}
}
return returnValue;
}
}
/**
* @protected
* @param {?} num
* @return {?}
*/
fillLeft(num) {
return num < 10 ? `0${num}` : `${num}`;
}
/**
* @param {?} date
* @return {?}
*/
isDisabledDay(date) {
/** @type {?} */
const minDate = new Date(this.minDate.getFullYear(), this.minDate.getMonth(), this.minDate.getDate());
/** @type {?} */
const maxDate = new Date(this.maxDate.getFullYear(), this.maxDate.getMonth(), this.maxDate.getDate(), 23, 59, 59);
/** @type {?} */
const dis = date.getTime() < minDate.getTime();
return this.disabled || (date.getTime() < minDate.getTime() ||
date.getTime() > maxDate.getTime());
}
/**
* @param {?} date
* @return {?}
*/
isSelectDay(date) {
if (!this.selectedDate || !date) {
return false;
}
return (date.getFullYear() === this.selectedDate.getFullYear() &&
date.getMonth() === this.selectedDate.getMonth() &&
date.getDate() === this.selectedDate.getDate());
}
/*
** @param invocation:调用时机
*/
/**
* @param {?} $event
* @param {?} date
* @param {?=} invocation
* @return {?}
*/
onSelectDate($event, date, invocation) {
if ($event.stopPropagation) {
$event.stopPropagation();
}
if (this.isDisabledDay(date)) {
return;
}
this.selectedDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), this.currentHour, this.currentMinute, this.currentSecond);
this.onTouched();
this.writeValue(this.selectedDate);
// 初始化的时候不触发emit和ngModelChange
if (invocation !== 'init') {
this.onChange(this.selectedDate);
this.selectedDateChange.emit({
reason: SelectDateChangeReason.date,
selectedDate: this.selectedDate
});
}
if (this.currentMonth !== this.selectedDate.getMonth() ||
this.currentYear !== this.selectedDate.getFullYear()) {
this.currentYear = this.selectedDate.getFullYear();
this.currentMonth = this.selectedDate.getMonth();
this.onDisplayWeeksChange();
}
}
/**
* @return {?}
*/
onTimeChange() {
/** @type {?} */
const date = this.selectedDate || new Date();
this.selectedDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), this.currentHour, this.currentMinute, this.currentSecond);
this.onTouched();
this.writeValue(this.selectedDate);
this.onChange(this.selectedDate);
this.selectedDateChange.emit({
reason: SelectDateChangeReason.time,
selectedDate: this.selectedDate
});
}
/**
* @param {?} type
* @return {?}
*/
timeUp(type) {
switch (type) {
case 'h': {
this.currentHour < 23 ? this.currentHour += 1 : this.currentHour = 0;
break;
}
case 'm': {
this.currentMinute < 59 ? this.currentMinute += 1 : this.currentMinute = 0;
break;
}
case 's': {
this.currentSecond < 59 ? this.currentSecond += 1 : this.currentSecond = 0;
break;
}
}
this.onTimeChange();
}
/**
* @param {?} type
* @return {?}
*/
timeDown(type) {
switch (type) {
case 'h': {
this.currentHour > 0 ? this.currentHour -= 1 : this.currentHour = 23;
break;
}
case 'm': {
this.currentMinute > 0 ? this.currentMinute -= 1 : this.currentMinute = 59;
break;
}
case 's': {
this.currentSecond > 0 ? this.currentSecond -= 1 : this.currentSecond = 59;
break;
}
}
this.onTimeChange();
}
/**
* @param {?} $event
* @return {?}
*/
toggle($event) {
$event.stopPropagation();
this.openChooseYearAndMonth = !this.openChooseYearAndMonth;
}
/**
* @return {?}
*/
isTodayDisable() {
return this.isDisabledDay(new Date());
}
/**
* @return {?}
*/
isDisabledTime() {
return this.isDisabledDay(this.selectedDate);
}
/**
* @return {?}
*/
initDatePicker() {
this.selectedDate = this.selectedDate ? this.selectedDate : new Date();
if (this.isDisabledDay(this.selectedDate)) {
return;
}
this.selectedDate = this.selectedDate ? this.selectedDate : new Date();
this.onSelectDateChanged();
this.onSelectDate({}, this.selectedDate, 'init');
}
/**
* @param {?} event
* @return {?}
*/
confirmTime(event) {
event.stopPropagation();
this.writeValue(this.selectedDate);
this.onChange(this.selectedDate);
this.selectedDateChange.emit({
reason: SelectDateChangeReason.button,
selectedDate: this.selectedDate
});
}
/**
* @return {?}
*/
chooseToday() {
/** @type {?} */
const today = new Date();
if (this.isDisabledDay(today)) {
return;
}
this.selectedDate = today;
this.onSelectDateChanged();
this.onSelectDate({}, today);
}
/**
* @param {?} $index
* @return {?}
*/
onSelectMonth($index) {
this.currentMonth = $index;
this.onDisplayWeeksChange();
}
/**
* @param {?} item
* @return {?}
*/
changeHoverYear(item) {
this.hoverYear = item;
}
/**
* @param {?} item
* @return {?}
*/
changeHoverMonth(item) {
this.hoverMonth = item;
}
/**
* @return {?}
*/
get minDateDefined() {
return this.minDate.getTime() !== new Date(this.dateConfig.min, 0, 1, 0, 0, 0).getTime();
}
/**
* @return {?}
*/
get maxDateDefined() {
return this.maxDate.getTime() !== new Date(this.dateConfig.max, 11, 31, 23, 59, 59).getTime();
}
/**
* @return {?}
*/
setI18nText() {
this.i18nText = this.i18n.getI18nText().datePicker;
this.i18nLocale = this.i18n.getI18nText().locale;
this.i18nCommonText = this.i18n.getI18nText().common;
this.i18nSubscription = this.i18n.langChange().subscribe((/**
* @param {?} data
* @return {?}
*/
(data) => {
this.i18nText = data.datePicker;
this.i18nLocale = data.locale;
this.i18nCommonText = data.common;
}));
}
/**
* @return {?}
*/
ngOnDestroy() {
if (this.i18nSubscription) {
this.i18nSubscription.unsubscribe();
}
}
}
DatepickerComponent.DAY_DURATION = 24 * 60 * 60 * 1000;
DatepickerComponent.decorators = [
{ type: Component, args: [{
selector: 'd-datepicker',
template: "<div class=\"devui-month-view {{ cssClass }}\">\r\n <table class=\"devui-table devui-month-view-table\">\r\n <thead class=\"devui-noSelect\">\r\n <tr>\r\n <td>\r\n <a\r\n *ngIf=\"openChooseYearAndMonth\"\r\n class=\"devui-btn-link\"\r\n aria-hidden=\"true\"\r\n (click)=\"onPreYearOption()\"\r\n [ngClass]=\"{\r\n 'devui-year-month-disabled': !hasPreYearOption() || !openChooseYearAndMonth\r\n }\"\r\n >\r\n <span class=\"left-triangle\"></span>\r\n <span class=\"left-triangle second\"></span>\r\n </a>\r\n </td>\r\n <td>\r\n <a\r\n class=\"devui-btn-link devui-btn-left\"\r\n aria-hidden=\"true\"\r\n (click)=\"onPreMonth()\"\r\n [ngClass]=\"{ 'devui-year-month-disabled': !hasPreMonth() }\"\r\n >\r\n <svg\r\n width=\"16px\"\r\n height=\"16px\"\r\n viewBox=\"0 0 16 16\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n >\r\n <g id=\"collapse-left\" stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\">\r\n <g>\r\n <polygon\r\n id=\"left-path\"\r\n fill-rule=\"nonzero\"\r\n points=\"10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8\"\r\n ></polygon>\r\n </g>\r\n </g>\r\n </svg>\r\n </a>\r\n </td>\r\n <td colspan=\"3\" class=\"devui-dropdown\" [ngClass]=\"{ open: openChooseYearAndMonth }\" (click)=\"toggle($event)\">\r\n <span class=\"devui-date-title\">{{ (i18nText?.monthsOfYear)[currentMonth] }}</span>\r\n <span class=\"devui-date-title\">{{ currentYear }}</span>\r\n <ul class=\"devui-dropdown-menu devui-monthOption text-center\">\r\n <li\r\n *ngFor=\"let month of availableMonths\"\r\n class=\"devui-dropdown-item\"\r\n (mouseover)=\"changeHoverMonth(month)\"\r\n (mouseleave)=\"changeHoverMonth(null)\"\r\n [ngClass]=\"{ active: currentMonth == month }\"\r\n (click)=\"onSelectMonth(month)\"\r\n >\r\n {{ month + 1 }}\r\n </li>\r\n </ul>\r\n <ul class=\"devui-dropdown-menu devui-yearOption text-center\">\r\n <li\r\n *ngFor=\"let item of yearOptions\"\r\n class=\"devui-dropdown-item\"\r\n (mouseover)=\"changeHoverYear(item)\"\r\n (mouseleave)=\"changeHoverYear(null)\"\r\n [ngClass]=\"{ active: currentYear == item }\"\r\n (click)=\"onSelectYear(item, $event)\"\r\n >\r\n {{ item }}\r\n </li>\r\n </ul>\r\n </td>\r\n <td>\r\n <a\r\n class=\"devui-btn-link devui-btn-right\"\r\n aria-hidden=\"true\"\r\n (click)=\"onNextMonth()\"\r\n [ngClass]=\"{ 'devui-year-month-disabled': !hasNextMonth() }\"\r\n >\r\n <svg\r\n width=\"16px\"\r\n height=\"16px\"\r\n viewBox=\"0 0 16 16\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n >\r\n <g id=\"collapse-right\" stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\">\r\n <g>\r\n <polygon\r\n id=\"right-path\"\r\n fill-rule=\"nonzero\"\r\n points=\"10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8\"\r\n ></polygon>\r\n </g>\r\n </g>\r\n </svg>\r\n </a>\r\n </td>\r\n <td>\r\n <a\r\n *ngIf=\"openChooseYearAndMonth\"\r\n class=\"devui-btn-link\"\r\n aria-hidden=\"true\"\r\n (click)=\"onNextYearOption()\"\r\n [ngClass]=\"{\r\n 'devui-year-month-disabled': !hasNextYearOption() || !openChooseYearAndMonth\r\n }\"\r\n >\r\n <span class=\"right-triangle\"></span>\r\n <span class=\"right-triangle second\"></span>\r\n </a>\r\n </td>\r\n </tr>\r\n <tr class=\"small text-center devui-week-header\">\r\n <td *ngFor=\"let item of i18nText?.daysOfWeek\">{{ item }}</td>\r\n </tr>\r\n </thead>\r\n <tbody class=\"devui-noSelect\">\r\n <tr *ngFor=\"let week of displayWeeks\">\r\n <td\r\n *ngFor=\"let day of week\"\r\n class=\"devui-day\"\r\n [ngClass]=\"{\r\n 'devui-out-of-month': !day.inMonth,\r\n 'devui-in-month-day': day.inMonth,\r\n active: isSelectDay(day.date),\r\n disabled: isDisabledDay(day.date)\r\n }\"\r\n (click)=\"onSelectDate($event, day.date)\"\r\n >\r\n <div class=\"devui-calendar-date\">{{ day.day }}</div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n <tfoot [ngClass]=\"{ 'devui-noSelect': !customViewTemplate }\">\r\n <tr class=\"time-picker-view\" (click)=\"!customViewTemplate && $event.stopPropagation()\">\r\n <ng-container *ngIf=\"!customViewTemplate\">\r\n <td colspan=\"4\">\r\n <div class=\"devui-timepicker\" *ngIf=\"showTime\" [ngClass]=\"{ 'devui-timepicker-disabled': isDisabledTime() }\">\r\n <div class=\"devui-time\">\r\n <input type=\"number\" [(ngModel)]=\"currentHour\" (change)=\"onTimeChange()\" max=\"23\" min=\"0\" [disabled]=\"isDisabledTime()\" />\r\n <div class=\"devui-btn-nav\" *ngIf=\"!isDisabledTime()\">\r\n <div class=\"btn-up\" (click)=\"timeUp('h')\"></div>\r\n <div class=\"btn-down\" (click)=\"timeDown('h')\"></div>\r\n </div>\r\n </div>\r\n <div class=\"devui-time\">\r\n <input\r\n type=\"number\"\r\n class=\"devui-minutes\"\r\n [(ngModel)]=\"currentMinute\"\r\n (change)=\"onTimeChange()\"\r\n max=\"59\"\r\n min=\"0\"\r\n [disabled]=\"isDisabledTime()\"\r\n />\r\n <div class=\"devui-btn-nav\" *ngIf=\"!isDisabledTime()\">\r\n <div class=\"btn-up\" (click)=\"timeUp('m')\"></div>\r\n <div class=\"btn-down\" (click)=\"timeDown('m')\"></div>\r\n </div>\r\n </div>\r\n <div class=\"devui-time\">\r\n <input\r\n type=\"number\"\r\n class=\"devui-seconds\"\r\n [(ngModel)]=\"currentSecond\"\r\n (change)=\"onTimeChange()\"\r\n max=\"59\"\r\n min=\"0\"\r\n [disabled]=\"isDisabledTime()\"\r\n />\r\n <div class=\"devui-btn-nav\" *ngIf=\"!isDisabledTime()\">\r\n <div class=\"btn-up\" (click)=\"timeUp('s')\"></div>\r\n <div class=\"btn-down\" (click)=\"timeDown('s')\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </td>\r\n <td colspan=\"3\">\r\n <div class=\"devui-btn-wrapper\" *ngIf=\"showTime\">\r\n <d-button bsStyle=\"primary\" [disabled]=\"disabled\" (btnClick)=\"confirmTime($event)\" bsSize=\"sm\"\r\n >{{ i18nCommonText?.btnConfirm }}\r\n </d-button>\r\n </div>\r\n <div class=\"devui-btn-wrapper\" *ngIf=\"!showTime\">\r\n <d-button bsStyle=\"primary\" [disabled]=\"isTodayDisable()\" (btnClick)=\"chooseToday()\" bsSize=\"sm\"\r\n >{{ i18nText?.today }}\r\n </d-button>\r\n </div>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngIf=\"customViewTemplate\">\r\n <td colspan=\"7\">\r\n <ng-template\r\n [ngTemplateOutlet]=\"customViewTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: this, chooseDate: chooseDate, clearAll: clearAll }\"\r\n ></ng-template>\r\n </td>\r\n </ng-container>\r\n </tr>\r\n </tfoot>\r\n </table>\r\n</div>\r\n",
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
() => DatepickerComponent)),
multi: true
}],
styles: [".devui-month-view{background-color:#fff;font-size:12px;width:240px;text-align:center;box-shadow:0 4px 8px 0 rgba(41,48,64,.2);border-radius:2px;position:relative}.devui-month-view .devui-month-view-table{margin-bottom:0;background:#fff;table-layout:fixed;border-collapse:collapse}.devui-month-view .devui-date-title{font-weight:700;cursor:pointer;font-size:12px}.devui-month-view .devui-btn-link{text-decoration:none;cursor:pointer}.devui-month-view .devui-btn-link.devui-year-month-disabled{opacity:.3;cursor:not-allowed}.devui-month-view .devui-btn-link .left-triangle,.devui-month-view .devui-btn-link .right-triangle{display:inline-block;position:absolute;top:6px;width:0;height:0;border:6px solid}.devui-month-view .devui-btn-link .left-triangle{left:6px;border-color:transparent #252b3a transparent transparent}.devui-month-view .devui-btn-link .right-triangle{right:6px;border-color:transparent transparent transparent #252b3a}.devui-month-view .devui-btn-link .left-triangle.second{left:12px}.devui-month-view .devui-btn-link .right-triangle.second{right:12px}.devui-month-view .devui-btn-link svg #left-path,.devui-month-view .devui-btn-link svg #right-path{fill:#252b3a}.devui-month-view .devui-btn-link:not(.devui-year-month-disabled):hover .left-triangle{border-right-color:#344899}.devui-month-view .devui-btn-link:not(.devui-year-month-disabled):hover .right-triangle{border-left-color:#344899}.devui-month-view .devui-btn-link:not(.devui-year-month-disabled):hover #left-path,.devui-month-view .devui-btn-link:not(.devui-year-month-disabled):hover #right-path,.devui-month-view .devui-btn-link:not(.devui-year-month-disabled):hover svg #left-path,.devui-month-view .devui-btn-link:not(.devui-year-month-disabled):hover svg #right-path{fill:#344899}.devui-month-view .devui-btn-link.devui-btn-right{-webkit-transform:scale(-1,1);transform:scale(-1,1);display:inline-block;line-height:1}.devui-month-view .date-select{border:none;background:0 0;outline:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.devui-month-view .devui-week-header{cursor:default;margin-bottom:16px}.devui-month-view .devui-week-header td{width:32px;height:24px;line-height:24px;color:#252b3a;border:none}.devui-month-view .devui-day:not(.disabled){cursor:pointer;font-size:12px;color:#dfe1e6}.devui-month-view .devui-day.disabled{cursor:not-allowed}.devui-calendar-date{display:block;margin:0 3px;width:20px;height:20px;padding:0;line-height:20px;background:0 0;text-align:center;-webkit-transition:background .3s;transition:background .3s;font-size:12px;color:#252b3a}.devui-month-view .devui-day:hover:not(.active):not(.disabled) .devui-calendar-date{background-color:#f2f5fc}.devui-month-view .devui-day.active:hover .devui-calendar-date{background-color:#344899;color:#fff}.devui-month-view .devui-in-month-day.disabled:not(.active) .devui-calendar-date{color:#252b3a;background-color:#dfe1e6;opacity:.8;cursor:not-allowed}.devui-month-view .devui-in-month-day.active .devui-calendar-date{background:#5e7ce0;color:#fff}.devui-month-view .devui-out-of-month .devui-calendar-date{opacity:.8;background-color:#fff;color:#adb0b8}.devui-month-view .devui-minutes:before{content:':';text-align:center;position:absolute;margin-left:-13px}.devui-month-view .devui-seconds:before{content:':';text-align:center;position:absolute;margin-left:-13px;z-index:999}.devui-yearOption{min-width:4em;margin-left:4.5em;max-height:255px;overflow-x:hidden;overflow-y:auto}.devui-monthOption{min-width:3em;margin-left:1em}.devui-monthOption li,.devui-yearOption li{text-align:center}.devui-monthOption li:hover,.devui-yearOption li:hover{background:#344899;color:#fff;cursor:pointer}.devui-monthOption li.active,.devui-yearOption li.active{color:#fff;background-color:#5e7ce0}.devui-monthOption li.active:hover,.devui-yearOption li.active:hover{background-color:#344899}.devui-month-view .devui-timepicker{background:#f8f8f8;display:-webkit-box;display:flex;-webkit-box-pack:space-evenly;justify-content:space-evenly}.devui-month-view .devui-timepicker input{outline:0;border:0;background:#f8f8f8;color:#252b3a;width:30px;padding:0 0 0 3px;height:30px;text-align:center}.devui-month-view .devui-timepicker.devui-timepicker-disabled input{cursor:not-allowed;opacity:.3}.devui-month-view .devui-timepicker .devui-time{position:relative;display:inline-block;width:40px}.devui-month-view .devui-timepicker .devui-time:not(:first-child):before{content:':'}.devui-month-view .devui-table>tbody>tr>td{vertical-align:middle;padding:4px;border-top:none}.devui-month-view .devui-table>tbody>tr>td:not(.disabled){border-top:none;background:#fff}.devui-month-view .devui-table>thead>tr>td{vertical-align:top;line-height:1.5;padding:4px}.devui-noSelect{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.devui-month-view .devui-month-view-table td{border-bottom:none}.devui-month-view .devui-table tfoot{border-top:1px solid #f8f8f8}.devui-month-view tfoot td{padding:2px;vertical-align:middle;border-top:none}.devui-dropdown-menu{font-size:12px}.devui-btn-wrapper{margin-top:0}.devui-btn-nav{display:none;position:absolute;right:9px;top:0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.devui-btn-nav .btn-down,.devui-btn-nav .btn-up{position:absolute;width:0;height:0;border:6px solid}.devui-btn-nav .btn-up{padding-top:2px;padding-bottom:1px;border-color:transparent transparent #252b3a}.devui-btn-nav .btn-up:hover{border-color:transparent transparent #344899}.devui-btn-nav .btn-down{top:16px;padding-bottom:4px;border-color:#252b3a transparent transparent}.devui-btn-nav .btn-down:hover{border-color:#344899 transparent transparent}.devui-time input[type=number]::-webkit-inner-spin-button,.devui-time input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.devui-time input[type=number]{-moz-appearance:textfield}.devui-time:hover .devui-btn-nav{display:block}:host ::ng-deep .cdk-overlay-pane d-datepicker.devui-dropdown-menu{padding:0}"]
}] }
];
/** @nocollapse */
DatepickerComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: Renderer2 },
{ type: DatePickerConfigService },
{ type: ChangeDetectorRef },
{ type: I18nService }
];
DatepickerComponent.propDecorators = {
showTime: [{ type: Input }],
cssClass: [{ type: Input }],
dateConverter: [{ type: Input }],
locale: [{ type: Input }],
selectedDateChange: [{ type: Output }],
disabled: [{ type: Input }],
yearNumber: [{ type: Input }],
customViewTemplate: [{ type: Input }],
selectedDate: [{ type: Input }],
onDocumentClick: [{ type: HostListener, args: ['document:click', ['$event'],] }],
onClick: [{ type: HostListener, args: ['click', ['$event'],] }],
dateConfig: [{ type: Input }],
minDate: [{ type: Input }],
maxDate: [{ type: Input }],
dateFormat: [{ type: Input }]
};
if (false) {
/** @type {?} */
DatepickerComponent.DAY_DURATION;
/**
* @type {?}
* @protected
*/
DatepickerComponent.prototype._maxDate;
/**
* @type {?}
* @protected
*/
DatepickerComponent.prototype._minDate;
/**
* @type {?}
* @protected
*/
DatepickerComponent.prototype.nowMinYear;
/**
* @type {?}
* @protected
*/
DatepickerComponent.prototype.nowMaxYear;
/**
* @type {?}
* @protected
*/
DatepickerComponent.prototype._dateFormat;
/** @type {?} */
DatepickerComponent.prototype.showTime;
/** @type {?} */
DatepickerComponent.prototype.cssClass;
/** @type {?} */
DatepickerComponent.prototype.dateConverter;
/** @type {?} */
DatepickerComponent.prototype.locale;
/** @type {?} */
DatepickerComponent.prototype.selectedDateChange;
/** @type {?} */
DatepickerComponent.prototype.disabled;
/** @type {?} */
DatepickerComponent.prototype.yearNumber;
/** @type {?} */
DatepickerComponent.prototype.customViewTemplate;
/** @type {?} */
DatepickerComponent.prototype.selectedDate;
/** @type {?} */
DatepickerComponent.prototype._dateConfig;
/** @type {?} */
DatepickerComponent.prototype.currentYear;
/** @type {?} */
DatepickerComponent.prototype.currentMonth;
/** @type {?} */
DatepickerComponent.prototype.currentHour;
/** @type {?} */
DatepickerComponent.prototype.currentMinute;
/** @type {?} */
DatepickerComponent.prototype.currentSecond;
/** @type {?} */
DatepickerComponent.prototype.hourOptions;
/** @type {?} */
DatepickerComponent.prototype.minuteOptions;
/** @type {?} */
DatepickerComponent.prototype.displayWeeks;
/** @type {?} */
DatepickerComponent.prototype.yearOptions;
/** @type {?} */
DatepickerComponent.prototype.openChooseYearAndMonth;
/** @type {?} */
DatepickerComponent.prototype.hoverYear;
/** @type {?} */
DatepickerComponent.prototype.hoverMonth;
/** @type {?} */
DatepickerComponent.prototype.availableMonths;
/** @type {?} */
DatepickerComponent.prototype.i18nText;
/** @type {?} */
DatepickerComponent.prototype.i18nLocale;
/** @type {?} */
DatepickerComponent.prototype.i18nCommonText;
/** @type {?} */
DatepickerComponent.prototype.i18nSubscription;
/**
* @type {?}
* @protected
*/
DatepickerComponent.prototype.onChange;
/**
* @type {?}
* @protected
*/
DatepickerComponent.prototype.onTouched;
/** @type {?} */
DatepickerComponent.prototype.clearAll;
/** @type {?} */
DatepickerComponent.prototype.chooseDate;
/**
* @type {?}
* @protected
*/
DatepickerComponent.prototype.elementRef;
/**
* @type {?}
* @protected
*/
DatepickerComponent.prototype.renderer2;
/**
* @type {?}
* @protected
*/
DatepickerComponent.prototype.datePickerConfig;
/**
* @type {?}
* @protected
*/
DatepickerComponent.prototype.changeDetectorRef;
/**
* @type {?}
* @protected
*/
DatepickerComponent.prototype.i18n;
}
/**
* @fileoverview added by tsickle
* Generated from: datepicker.directive.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const easeInQuint = 'cubic-bezier(0.755, 0.05, 0.855, 0.06)';
/** @type {?} */
const easeOutQuint = 'cubic-bezier(0.23, 1, 0.32, 1)';
/** @type {?} */
const animationDuration = '200ms';
class DatepickerDirective {
/**
* @param {?} elementRef
* @param {?} viewContainerRef
* @param {?} componentFactoryResolver
* @param {?} renderer2
* @param {?} injector
* @param {?} datePickerConfig
* @param {?} i18n
* @param {?} builder
*/
constructor(elementRef, viewContainerRef, componentFactoryResolver, renderer2, injector, datePickerConfig, i18n, builder) {
this.elementRef = elementRef;
this.viewContainerRef = viewContainerRef;
this.componentFactoryResolver = componentFactoryResolver;
this.renderer2 = renderer2;
this.injector = injector;
this.datePickerConfig = datePickerConfig;
this.i18n = i18n;
this.builder = builder;
this.direction = 'down';
this.autoOpen = false;
this.selectedDateChange = new EventEmitter();
this.isOpen = false;
this.onChange = (/**
* @param {?} _
* @return {?}
*/
(_) => null);
this.onTouched = (/**
* @return {?}
*/
() => null);
this._dateConfig = datePickerConfig['dateConfig'];
this.dateConverter = datePickerConfig['dateConfig'].dateConverter || new DefaultDateConverter();
this.selectedDate = null;
/** @type {?} */
const factory = this.componentFactoryResolver.resolveComponentFactory(DatepickerComponent);
this.cmpRef = this.viewContainerRef.createComponent(factory, this.viewContainerRef.length, this.injector);
this.inputSub = fromEvent(this.elementRef.nativeElement, 'input')
.pipe(debounceTime(300)).subscribe((/**
* @param {?} event
* @return {?}
*/
event => {
this.transUserInputToDatepicker(event);
}));
}
/**
* @param {?} dateConfig
* @return {?}
*/
set dateConfig(dateConfig) {
if (dateConfig) {
this._dateConfig = dateConfig;
this._dateFormat = this.showTime ? dateConfig.format.time : dateConfig.format.date;
}
else {
this._dateConfig = this.datePickerConfig.dateConfig;
}
}
/**
* @return {?}
*/
get dateConfig() {
return this._dateConfig;
}
/**
* @param {?} dateFormat
* @return {?}
*/
set dateFormat(dateFormat) {
if (this._dateFormat !== dateFormat) {
this._dateFormat = dateFormat;
this.writeModelValue({ selectedDate: this.selectedDate, reason: SelectDateChangeReason.format });
}
}
/**
* @return {?}
*/
get dateFormat() {
return this._dateFormat;
}
/**
* @param {?} date
* @return {?}
*/
set maxDate(date) {
/** @type {?} */
const parseDate = this.dateConverter.parse(date, this.dateFormat, this.locale || this.i18nLocale);
if (parseDate) {
this._maxDate = parseDate;
}
}
/**
* @return {?}
*/
get maxDate() {
return this._maxDate;
}
/**
* @param {?} date
* @return {?}
*/
set minDate(date) {
/** @type {?} */
const parseDate = this.dateConverter.parse(date, this.dateFormat, this.locale || this.i18nLocale);
if (parseDate) {
this._minDate = parseDate;
}
}
/**
* @return {?}
*/
get minDate() {
return this._minDate;
}
/**
* @return {?}
*/
ngOnInit() {
this.showTime = this.showTime || this.dateConfig.timePicker;
this._minDate = this.minDate ? new Date(this.minDate) : new Date(this.dateConfig.min, 0, 1, 0, 0, 0);
this._maxDate = this.maxDate ? new Date(this.maxDate) : new Date(this.dateConfig.max, 11, 31, 23, 59, 59);
/** @type {?} */
const target = this.cmpRef.location.nativeElement;
this.applyPopupStyling(target);
/** @type {?} */
const component = this.cmpRef.instance;
this.renderer2.setStyle(target, 'display', 'none');
component.writeValue(this.selectedDate);
this.fillPopupData();
component.ngOnInit();
component.registerOnChange((/**
* @param {?} selectedDate
* @return {?}
*/
selectedDate => {
this.writeValue(selectedDate);
this.onChange(selectedDate);
}));
component.selectedDateChange.subscribe((/**
* @param {?} arg
* @return {?}
*/
(arg) => {
if (arg.reason === SelectDateChangeReason.date && !this.showTime ||
arg.reason === SelectDateChangeReason.button) {
this.hide();
}
}));
if (this.autoOpen) {
this.show();
}
this.setI18nText();
}
/**
* @param {?} obj
* @return {?}
*/
writeValue(obj) {
/** @type {?} */
let curDate;
if (obj && typeof obj === 'object' && obj.hasOwnProperty('selectedDate')) {
curDate = obj.selectedDate;
}
else {
curDate = obj;
}
this.selectedDate = curDate ?
this.dateConverter.parse(curDate, this.dateFormat, this.locale || this.i18nLocale) : null;
this.writeModelValue(obj);
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.onChange = fn;
}
/**
* @param {?} fn
*