ng-devui
Version:
DevUI components based on Angular
678 lines (673 loc) • 36.3 kB
JavaScript
import * as i4 from '@angular/cdk/overlay';
import { CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
import * as i3 from '@angular/common';
import { DOCUMENT, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { EventEmitter, forwardRef, Component, Inject, Input, Output, ViewChild, HostListener, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import * as i5 from 'ng-devui/button';
import { ButtonModule } from 'ng-devui/button';
import { __decorate, __metadata } from 'tslib';
import * as i1 from 'ng-devui/i18n';
import * as i2 from 'ng-devui/utils';
import { removeClassFromOrigin, formWithDropDown, addClassToOrigin, unshiftString, AppendToBodyDirectionsConfig, fadeInOut, WithConfig } from 'ng-devui/utils';
import { fromEvent } from 'rxjs';
import { map, filter, debounceTime } from 'rxjs/operators';
class TimePickerComponent {
set minTime(minTime) {
this.setCurrent('minTime', minTime);
this.setTimeArr();
}
get minTime() {
return this.getCurrent('minTime');
}
set maxTime(maxTime) {
this.setCurrent('maxTime', maxTime);
this.setTimeArr();
}
get maxTime() {
return this.getCurrent('maxTime');
}
set format(format) {
if (this._format !== format && format) {
this._format = format.toLocaleLowerCase();
this.firstList.length = 0;
this.secondList.length = 0;
this.thirdList.length = 0;
setTimeout(() => {
this.writeValue();
this.writeModelValue(this.selectedTimeFormat, true);
});
}
}
get format() {
return this._format;
}
set timePickerWidth(width) {
if (width !== undefined) {
this._timePickerWidth = width;
}
}
get timePickerWidth() {
return this._timePickerWidth;
}
set isOpen(open) {
if (this._isOpen !== open) {
this._isOpen = open;
if (!open) {
this.startAnimation = false;
removeClassFromOrigin(this.elementRef);
this.document.removeEventListener('click', this.onDocumentClick);
}
else {
if (this.timePickerWidth !== undefined) {
this.originWidth = this.timePickerWidth;
}
else {
let currentOrigin;
if (this.origin) {
currentOrigin = this.origin;
}
else if (this.elementRef.nativeElement) {
currentOrigin = formWithDropDown(this.elementRef) || this.elementRef.nativeElement;
}
if (currentOrigin) {
this.originWidth = currentOrigin.offsetWidth;
}
}
setTimeout(() => {
this.startAnimation = true;
this.document.addEventListener('click', this.onDocumentClick);
});
addClassToOrigin(this.elementRef);
}
}
}
get isOpen() {
return this._isOpen;
}
set selectedTime(time) {
if (this.validateTime(time)) {
this.setFormatCurrent('selectedTime', time);
}
else {
this.setFormatCurrent('selectedTime', this.initTime);
}
}
get selectedTime() {
return this.getCurrent('selectedTime');
}
get selectedTimeFormat() {
return this.getFormatCurrent('selectedTime');
}
get initTime() {
return this.getCurrent('initTime');
}
get illegalTime() {
return this.getCurrent('illegalTime');
}
constructor(elementRef, viewContainerRef, renderer2, i18n, cdr, devConfigService, doc) {
this.elementRef = elementRef;
this.viewContainerRef = viewContainerRef;
this.renderer2 = renderer2;
this.i18n = i18n;
this.cdr = cdr;
this.devConfigService = devConfigService;
this.doc = doc;
this.appendToBodyDirections = ['rightDown', 'leftDown', 'rightUp', 'leftUp'];
this.autoOpen = false;
this.showAnimation = true;
this.splitter = ':'; // 暂不开放
this.startAnimation = false;
this.selectedTimeChange = new EventEmitter();
this.dropdownPosition = 'bottom';
// 此处使用第一第二第三列而不是时分秒是为了方便在format顺序变化（例如ss:mm）时，可以比较容易的换数组顺序
this.firstList = [];
this.secondList = [];
this.thirdList = [];
this._isOpen = false;
this._minTimeHour = '00';
this._minTimeMin = '00';
this._minTimeSec = '00';
this._maxTimeHour = '23';
this._maxTimeMin = '59';
this._maxTimeSec = '59';
this._format = 'hh:mm:ss';
this._initTimeHour = '00';
this._initTimeMin = '00';
this._initTimeSec = '00';
this._illegalTimeHour = '24';
this._illegalTimeMin = '60';
this._illegalTimeSec = '60';
this.correct = ['Hour', 'Min', 'Sec'];
this.onChange = (_) => null;
this.onTouched = () => null;
this.onDocumentClick = ($event) => {
if (this.elementRef.nativeElement !== $event.target && this.timePicker && !this.timePicker.nativeElement.contains($event.target)) {
this.isOpen = false;
this.cdr.markForCheck();
}
};
this.hide = () => {
this.isOpen = false;
};
this.transUserInputToTimePicker = (value) => {
if (!value) {
this.clearAll();
return;
}
if (value === this.selectedTime || !this.validateTime(value)) {
return;
}
if (this.disabled) {
this.resetValue();
}
else {
this.writeValue(value);
this.writeModelValue(value, true);
}
};
this.chooseTime = (timeObj) => {
this.selectTime(timeObj, true);
};
this.confirmTime = (timeObj) => {
this.selectTime(timeObj);
this.hide();
};
this.clearAll = () => {
if (this.disabled) {
return;
}
this.writeValue(null);
this.writeModelValue(null, true);
};
this.document = this.doc;
}
onBlur($event) {
this.onTouched();
const value = this.elementRef.nativeElement.value;
if (!this.validateTime(value)) {
this.resetValue();
}
}
ngOnChanges(changes) {
if (changes.appendToBodyDirections) {
this.setTimePickerPositions();
}
}
ngOnInit() {
this.setTimePickerPositions();
this.setI18nText();
this.updateCdkConnectedOverlayOrigin();
if (this.autoOpen) {
this.toggle(true);
}
this.valueChanges = this.registerInputEvent();
this.userInputSubscription = this.valueChanges.subscribe((source) => this.transUserInputToTimePicker(source));
}
ngOnDestroy() {
if (this.i18nSubscription) {
this.i18nSubscription.unsubscribe();
}
if (this.userInputSubscription) {
this.userInputSubscription.unsubscribe();
}
this.document.removeEventListener('click', this.onDocumentClick);
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
writeValue(time) {
if (time !== undefined) {
this.selectedTime = time;
}
const value = this.selectedTimeFormat || '';
this.renderer2.setProperty(this.elementRef.nativeElement, 'value', value);
this.setTimeArr();
}
registerInputEvent() {
return fromEvent(this.elementRef.nativeElement, 'input').pipe(map((e) => {
return e.target.value;
}), filter(() => !this.disabled), debounceTime(300));
}
isMinuteInRange(minute) {
const curTime = this.elementRef.nativeElement.value;
const hourIndex = this.format.split(':').findIndex((t) => t === 'hh');
const curHour = hourIndex !== -1 ? curTime.split(':')[hourIndex] : null;
// 不存在小时时直接依据最值判定
if (!curHour) {
return minute <= this._maxTimeMin && minute >= this._minTimeMin;
}
// 存在小时时，依据小时是否在临界点进行判断
if (curHour < this._maxTimeHour && curHour > this._minTimeHour) {
return true;
}
else if (curHour === this._maxTimeHour) {
return minute <= this._maxTimeMin;
}
else if (curHour === this._minTimeHour) {
return minute >= this._minTimeMin;
}
else {
return true;
}
}
isSecondInRange(second) {
const curTime = this.elementRef.nativeElement.value;
const hourIndex = this.format.split(':').findIndex((t) => t === 'hh');
const minIndex = this.format.split(':').findIndex((t) => t === 'mm');
const curHour = hourIndex !== -1 ? curTime.split(':')[hourIndex] : null;
const curMin = minIndex !== -1 ? curTime.split(':')[minIndex] : null;
// 当不存在分钟时，直接依据最值判定
if (!curMin) {
return second <= this._maxTimeSec && second >= this._minTimeSec;
}
// 当存在分钟时，依据分钟是否在临界点进行判断
if (this.isMinuteInRangeNotBoundary(curHour, curMin)) {
return true;
}
else if (curMin === this._maxTimeMin) {
return second <= this._maxTimeSec;
}
else if (curMin === this._minTimeMin) {
return second >= this._minTimeSec;
}
else {
return true;
}
}
// 判断当前的分钟是否在范围内但不在边界上
isMinuteInRangeNotBoundary(hour, min) {
return ((hour && hour < this._maxTimeHour && hour > this._minTimeHour) || // 小时在范围内
(min < this._maxTimeMin && min > this._minTimeMin)); // 分钟在范围内
}
validateTime(time, type) {
if (!time && time !== '') {
return false;
}
const timeArr = time.split(':');
if (type && timeArr.length === 1) {
let valid;
switch (type) {
case 'hh':
valid = time <= this._maxTimeHour && time >= this._minTimeHour;
break;
case 'mm':
valid = this.isMinuteInRange(time);
break;
case 'ss':
valid = this.isSecondInRange(time);
break;
default:
}
return valid;
}
if (timeArr.some((t, i) => {
return Number(t) > Number(this.maxTime.split(':')[i]) || Number(t) < Number(this.minTime.split(':')[i]);
})) {
return false;
}
if (timeArr.length !== 3) {
if (timeArr.length === this.format.split(':').length &&
!timeArr.some((t) => t.length > 2 || t !== unshiftString(String(Number(t)), 2, '0'))) {
return true;
}
else {
return false;
}
}
else if (timeArr.some((t) => t !== unshiftString(String(Number(t)), 2, '0'))) {
return false;
}
return true;
}
setI18nText() {
this.i18nCommonText = this.i18n.getI18nText().common;
this.i18nSubscription = this.i18n.langChange().subscribe((data) => {
this.i18nCommonText = data.common;
});
}
updateCdkConnectedOverlayOrigin() {
let currentOrigin;
if (this.origin) {
currentOrigin = this.origin;
}
else if (this.elementRef.nativeElement) {
currentOrigin = formWithDropDown(this.elementRef) || this.elementRef.nativeElement;
}
this.cdkConnectedOverlayOrigin = new CdkOverlayOrigin(currentOrigin);
}
toggle(clickShow) {
if (clickShow === undefined) {
if (this.disabled) {
this.isOpen = false;
}
else {
this.isOpen = !this.isOpen;
}
}
else {
if (this.disabled) {
this.isOpen = false;
}
else {
this.isOpen = clickShow;
}
}
}
writeModelValue(selectTimeObj, noEmit = false) {
let selectTime;
if (selectTimeObj && typeof selectTimeObj === 'object' && Object.prototype.hasOwnProperty.call(selectTimeObj, 'selectedTime')) {
selectTime = selectTimeObj.selectedTime;
}
else {
selectTime = selectTimeObj;
}
selectTime = selectTime || null;
this.onChange(selectTime); // 这行代码能触发ngModel绑定的变量值发生变化
if (!noEmit) {
this.selectedTimeChange.emit(this.selectedTimeFormat);
}
}
onPositionChange(position) {
switch (position.connectionPair.overlayY) {
case 'top':
case 'center':
this.dropdownPosition = 'bottom';
break;
case 'bottom':
this.dropdownPosition = 'top';
break;
default:
}
}
setTimePickerPositions() {
if (this.appendToBodyDirections && this.appendToBodyDirections.length > 0) {
this.pickerPositions = this.appendToBodyDirections
.map((position) => {
if (typeof position === 'string') {
return AppendToBodyDirectionsConfig[position];
}
else {
return position;
}
})
.filter((position) => position !== undefined);
}
else {
this.pickerPositions = undefined;
}
}
resetValue() {
if (this.selectedTime) {
this.writeValue(this.selectedTime);
}
else {
this.elementRef.nativeElement.value = '';
}
}
setTimeArr(justScroll) {
this.format.split(':').forEach((type, index) => this.setSingleTimeArr(index, justScroll));
}
setSingleTimeArr(index, justScroll) {
const selectedTimeArr = this.selectedTime ? this.selectedTime.split(':') : this.illegalTime.split(':');
let whichList;
switch (index) {
case 0:
whichList = 'first';
break;
case 1:
whichList = 'second';
break;
case 2:
whichList = 'third';
break;
default:
}
const type = this.format.split(':')[index];
const arr = ['hh', 'mm', 'ss'];
const len = type === 'hh' ? 24 : 60;
if (!this[`${whichList}List`] || !this[`${whichList}List`].length) {
this[`${whichList}List`] = new Array(len).fill(0).map((item, i) => {
const time = unshiftString(String(i), 2, '0');
const disabled = this.disabled || !this.validateTime(time, type);
return {
time,
active: selectedTimeArr[arr.indexOf(type)] === time,
type: index,
disabled,
};
});
}
else {
this[`${whichList}List`].forEach((item, i) => {
if (!justScroll) {
const time = unshiftString(String(i), 2, '0');
const disabled = this.disabled || !this.validateTime(time, type);
item.active = selectedTimeArr[arr.indexOf(type)] === time;
item.disabled = disabled;
}
if (item.active && this.isOpen) {
this.setScroll(whichList, i, justScroll);
}
});
}
if (!this.disabled) {
this.fixTimeInRange(this[`${whichList}List`]);
}
}
// 当存在值选中的是不可选选项时，进行修正
fixTimeInRange(list) {
const curActive = list.find((item) => item.active);
if (curActive?.disabled) {
this.selectTime(list.find((item) => !item.disabled));
}
}
setScroll(whichList, index, justScroll) {
const scroll = (24 + 8) * index;
const duration = justScroll || !this.showAnimation ? 0 : 150;
if (this.timePicker) {
this.scrollTo(this.timePicker.nativeElement.querySelector(`.devui-${whichList}-list`), scroll, duration);
}
}
scrollTo(element, to, duration) {
if (typeof window === 'undefined') {
return;
}
if (duration <= 0) {
element.scrollTop = to;
return;
}
const difference = to - element.scrollTop;
const perTick = (difference / duration) * 10;
const reqAnimFrame = window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.requestAnimationFrame;
reqAnimFrame(() => {
element.scrollTop = element.scrollTop + perTick;
if (element.scrollTop === to) {
return;
}
this.scrollTo(element, to, duration - 10);
});
}
animationEnd(event) {
if (this.isOpen && event.toState !== 'void') {
this.setTimeArr(true);
}
}
setCurrent(which, current) {
const timeArr = current ? current.split(':') : this[which].split(':');
this.correct.forEach((t, i) => {
this[`_${which}${t}`] = timeArr[i];
});
}
getCurrent(which) {
const res = [];
this.correct.forEach((t) => res.push(this[`_${which}${t}`]));
return res.join(':');
}
setFormatCurrent(which, current) {
const timeArr = current ? current.split(':') : this[which].split(':');
this.format.split(':').forEach((t, i) => {
switch (t) {
case 'hh':
this[`_${which}Hour`] = timeArr[i];
break;
case 'mm':
this[`_${which}Min`] = timeArr[i];
break;
case 'ss':
this[`_${which}Sec`] = timeArr[i];
break;
default:
}
});
}
getFormatCurrent(which) {
const formatArr = this.format.split(':');
const res = [];
formatArr.forEach((t) => {
switch (t) {
case 'hh':
res.push(this[`_${which}Hour`]);
break;
case 'mm':
res.push(this[`_${which}Min`]);
break;
case 'ss':
res.push(this[`_${which}Sec`]);
break;
default:
}
});
return res.join(':');
}
selectTime(timeObj, noEmit) {
if (timeObj !== undefined) {
const time = timeObj.time;
const type = timeObj.type;
const timeArr = time.split(':');
const curType = typeof type === 'string' ? type : this.format.split(':')[type];
let typeArr;
if (!this.validateTime(time, curType)) {
return;
}
if (typeof type === 'number') {
typeArr = [this.format.split(':')[type]];
}
else if (typeof type === 'string') {
typeArr = [type];
}
else if (!type) {
typeArr = this.format.split(':');
}
typeArr.forEach((t, i) => {
switch (t) {
case 'hh':
this._selectedTimeHour = unshiftString(timeArr[i], 2, '0');
break;
case 'mm':
this._selectedTimeMin = unshiftString(timeArr[i], 2, '0');
break;
case 'ss':
this._selectedTimeSec = unshiftString(timeArr[i], 2, '0');
break;
default:
}
});
}
this.writeValue();
this.writeModelValue(this.selectedTimeFormat, noEmit);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.Renderer2 }, { token: i1.I18nService }, { token: i0.ChangeDetectorRef }, { token: i2.DevConfigService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TimePickerComponent, selector: "[dTimePicker]", inputs: { appendToBodyDirections: "appendToBodyDirections", disabled: "disabled", customViewTemplate: "customViewTemplate", autoOpen: "autoOpen", showAnimation: "showAnimation", minTime: "minTime", maxTime: "maxTime", format: "format", timePickerWidth: "timePickerWidth" }, outputs: { selectedTimeChange: "selectedTimeChange" }, host: { listeners: { "blur": "onBlur($event)" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TimePickerComponent),
multi: true,
},
], viewQueries: [{ propertyName: "timePicker", first: true, predicate: ["timePicker"], descendants: true }], exportAs: ["timePicker"], usesOnChanges: true, ngImport: i0, template: "<ng-template\n cdk-connected-overlay\n [cdkConnectedOverlayOrigin]=\"cdkConnectedOverlayOrigin\"\n [cdkConnectedOverlayWidth]=\"originWidth\"\n [cdkConnectedOverlayPositions]=\"pickerPositions\"\n [cdkConnectedOverlayOpen]=\"isOpen\"\n (backdropClick)=\"isOpen = false\"\n (positionChange)=\"onPositionChange($event)\"\n>\n <div\n [@fadeInOut]=\"startAnimation ? dropdownPosition : 'void'\"\n (@fadeInOut.done)=\"animationEnd($event)\"\n [@.disabled]=\"!showAnimation\"\n class=\"devui-time-picker-wrapper devui-dropdown-menu\"\n #timePicker\n >\n <div class=\"devui-time-picker\" [ngClass]=\"{ 'devui-time-picker-animation': showAnimation }\">\n <ul *ngIf=\"firstList.length\" class=\"devui-time-list devui-first-list\">\n <li\n *ngFor=\"let item of firstList\"\n class=\"devui-time-item devui-first-item\"\n [ngClass]=\"{\n active: item.active,\n disabled: item.disabled\n }\"\n (click)=\"chooseTime(item)\"\n >\n {{ item.time }}\n </li>\n </ul>\n <ul *ngIf=\"secondList.length\" class=\"devui-time-list devui-second-list\">\n <li\n *ngFor=\"let item of secondList\"\n class=\"devui-time-item devui-second-item\"\n [ngClass]=\"{\n active: item.active,\n disabled: item.disabled\n }\"\n (click)=\"chooseTime(item)\"\n >\n {{ item.time }}\n </li>\n </ul>\n <ul *ngIf=\"thirdList.length\" class=\"devui-time-list devui-third-list\">\n <li\n *ngFor=\"let item of thirdList\"\n class=\"devui-time-item devui-third-item\"\n [ngClass]=\"{\n active: item.active,\n disabled: item.disabled\n }\"\n (click)=\"chooseTime(item)\"\n >\n {{ item.time }}\n </li>\n </ul>\n </div>\n <div class=\"devui-time-footer\">\n <ng-container *ngIf=\"!customViewTemplate\">\n <div class=\"devui-btn-wrapper\">\n <d-button bsStyle=\"common\" [disabled]=\"disabled\" (btnClick)=\"confirmTime()\" bsSize=\"sm\"\n >{{ i18nCommonText?.btnConfirm }}\n </d-button>\n </div>\n </ng-container>\n <ng-container *ngIf=\"customViewTemplate\">\n <ng-template\n [ngTemplateOutlet]=\"customViewTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: this, chooseTime: chooseTime, clearAll: clearAll, confirmTime: confirmTime }\"\n ></ng-template>\n </ng-container>\n </div>\n </div>\n</ng-template>\n", styles: [".devui-time-picker-wrapper{width:100%;min-width:184px;background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-length-connected-overlay, 0 4px 12px 0) var(--devui-shadow, rgba(0, 0, 0, .16));display:block;position:unset}.devui-time-picker{display:flex;height:248px;overflow:hidden;border-bottom:1px solid var(--devui-dividing-line, #f0f0f0);border-radius:var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0 0}.devui-time-picker-animation .devui-time-list{scroll-behavior:smooth}.devui-time-picker .devui-time-list{flex:1;overflow-y:hidden;overflow-x:hidden;scrollbar-gutter:stable;padding-left:4px}.devui-time-picker .devui-time-list::-webkit-scrollbar{width:4px}.devui-time-picker .devui-time-list:hover{overflow-y:scroll}.devui-time-picker .devui-time-list:not(:last-child){border-right:1px solid var(--devui-dividing-line, #f0f0f0)}.devui-time-picker .devui-time-list .devui-time-item{width:100%;height:24px;line-height:24px;text-align:center;cursor:pointer;border-radius:var(--devui-border-radius-feedback, 4px)}.devui-time-picker .devui-time-list .devui-time-item:hover{color:var(--devui-list-item-hover-text, #000000);background-color:var(--devui-list-item-hover-bg, #f2f2f3)}.devui-time-picker .devui-time-list .devui-time-item.active{color:var(--devui-list-item-active-text, #000000);background-color:var(--devui-list-item-active-bg, #cedefd)}.devui-time-picker .devui-time-list .devui-time-item.disabled{color:var(--devui-disabled-text, #c2c2c2);background-color:var(--devui-disabled-bg, #f3f3f3)}.devui-time-picker .devui-time-list .devui-time-item:not(:last-child){margin-bottom:8px}.devui-time-picker .devui-time-list .devui-time-item:last-child{margin-bottom:224px}.devui-time-footer{padding:8px 16px;overflow:hidden}.devui-time-footer .devui-btn-wrapper{float:right}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: i5.ButtonComponent, selector: "d-button", inputs: ["id", "type", "bsStyle", "shape", "bsSize", "bsPosition", "bordered", "icon", "disabled", "showLoading", "width", "autofocus", "loadingTemplateRef"], outputs: ["btnClick"] }], animations: [fadeInOut] }); }
}
__decorate([
WithConfig(),
__metadata("design:type", Object)
], TimePickerComponent.prototype, "showAnimation", void 0);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimePickerComponent, decorators: [{
type: Component,
args: [{ selector: '[dTimePicker]', providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TimePickerComponent),
multi: true,
},
], exportAs: 'timePicker', animations: [fadeInOut], template: "<ng-template\n cdk-connected-overlay\n [cdkConnectedOverlayOrigin]=\"cdkConnectedOverlayOrigin\"\n [cdkConnectedOverlayWidth]=\"originWidth\"\n [cdkConnectedOverlayPositions]=\"pickerPositions\"\n [cdkConnectedOverlayOpen]=\"isOpen\"\n (backdropClick)=\"isOpen = false\"\n (positionChange)=\"onPositionChange($event)\"\n>\n <div\n [@fadeInOut]=\"startAnimation ? dropdownPosition : 'void'\"\n (@fadeInOut.done)=\"animationEnd($event)\"\n [@.disabled]=\"!showAnimation\"\n class=\"devui-time-picker-wrapper devui-dropdown-menu\"\n #timePicker\n >\n <div class=\"devui-time-picker\" [ngClass]=\"{ 'devui-time-picker-animation': showAnimation }\">\n <ul *ngIf=\"firstList.length\" class=\"devui-time-list devui-first-list\">\n <li\n *ngFor=\"let item of firstList\"\n class=\"devui-time-item devui-first-item\"\n [ngClass]=\"{\n active: item.active,\n disabled: item.disabled\n }\"\n (click)=\"chooseTime(item)\"\n >\n {{ item.time }}\n </li>\n </ul>\n <ul *ngIf=\"secondList.length\" class=\"devui-time-list devui-second-list\">\n <li\n *ngFor=\"let item of secondList\"\n class=\"devui-time-item devui-second-item\"\n [ngClass]=\"{\n active: item.active,\n disabled: item.disabled\n }\"\n (click)=\"chooseTime(item)\"\n >\n {{ item.time }}\n </li>\n </ul>\n <ul *ngIf=\"thirdList.length\" class=\"devui-time-list devui-third-list\">\n <li\n *ngFor=\"let item of thirdList\"\n class=\"devui-time-item devui-third-item\"\n [ngClass]=\"{\n active: item.active,\n disabled: item.disabled\n }\"\n (click)=\"chooseTime(item)\"\n >\n {{ item.time }}\n </li>\n </ul>\n </div>\n <div class=\"devui-time-footer\">\n <ng-container *ngIf=\"!customViewTemplate\">\n <div class=\"devui-btn-wrapper\">\n <d-button bsStyle=\"common\" [disabled]=\"disabled\" (btnClick)=\"confirmTime()\" bsSize=\"sm\"\n >{{ i18nCommonText?.btnConfirm }}\n </d-button>\n </div>\n </ng-container>\n <ng-container *ngIf=\"customViewTemplate\">\n <ng-template\n [ngTemplateOutlet]=\"customViewTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: this, chooseTime: chooseTime, clearAll: clearAll, confirmTime: confirmTime }\"\n ></ng-template>\n </ng-container>\n </div>\n </div>\n</ng-template>\n", styles: [".devui-time-picker-wrapper{width:100%;min-width:184px;background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-length-connected-overlay, 0 4px 12px 0) var(--devui-shadow, rgba(0, 0, 0, .16));display:block;position:unset}.devui-time-picker{display:flex;height:248px;overflow:hidden;border-bottom:1px solid var(--devui-dividing-line, #f0f0f0);border-radius:var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0 0}.devui-time-picker-animation .devui-time-list{scroll-behavior:smooth}.devui-time-picker .devui-time-list{flex:1;overflow-y:hidden;overflow-x:hidden;scrollbar-gutter:stable;padding-left:4px}.devui-time-picker .devui-time-list::-webkit-scrollbar{width:4px}.devui-time-picker .devui-time-list:hover{overflow-y:scroll}.devui-time-picker .devui-time-list:not(:last-child){border-right:1px solid var(--devui-dividing-line, #f0f0f0)}.devui-time-picker .devui-time-list .devui-time-item{width:100%;height:24px;line-height:24px;text-align:center;cursor:pointer;border-radius:var(--devui-border-radius-feedback, 4px)}.devui-time-picker .devui-time-list .devui-time-item:hover{color:var(--devui-list-item-hover-text, #000000);background-color:var(--devui-list-item-hover-bg, #f2f2f3)}.devui-time-picker .devui-time-list .devui-time-item.active{color:var(--devui-list-item-active-text, #000000);background-color:var(--devui-list-item-active-bg, #cedefd)}.devui-time-picker .devui-time-list .devui-time-item.disabled{color:var(--devui-disabled-text, #c2c2c2);background-color:var(--devui-disabled-bg, #f3f3f3)}.devui-time-picker .devui-time-list .devui-time-item:not(:last-child){margin-bottom:8px}.devui-time-picker .devui-time-list .devui-time-item:last-child{margin-bottom:224px}.devui-time-footer{padding:8px 16px;overflow:hidden}.devui-time-footer .devui-btn-wrapper{float:right}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: i1.I18nService }, { type: i0.ChangeDetectorRef }, { type: i2.DevConfigService }, { type: undefined, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }], propDecorators: { appendToBodyDirections: [{
type: Input
}], disabled: [{
type: Input
}], customViewTemplate: [{
type: Input
}], autoOpen: [{
type: Input
}], showAnimation: [{
type: Input
}], selectedTimeChange: [{
type: Output
}], timePicker: [{
type: ViewChild,
args: ['timePicker']
}], minTime: [{
type: Input
}], maxTime: [{
type: Input
}], format: [{
type: Input
}], timePickerWidth: [{
type: Input
}], onBlur: [{
type: HostListener,
args: ['blur', ['$event']]
}] } });
class TimePickerModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: TimePickerModule, declarations: [TimePickerComponent], imports: [CommonModule,
FormsModule,
OverlayModule,
ButtonModule], exports: [TimePickerComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimePickerModule, imports: [CommonModule,
FormsModule,
OverlayModule,
ButtonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimePickerModule, decorators: [{
type: NgModule,
args: [{
imports: [
CommonModule,
FormsModule,
OverlayModule,
ButtonModule
],
exports: [
TimePickerComponent
],
declarations: [
TimePickerComponent
],
providers: [],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { TimePickerComponent, TimePickerModule };
//# sourceMappingURL=ng-devui-time-picker.mjs.map