@c-standard/angular-devui-extension
Version:
an extensional components lib for devui
73 lines (72 loc) • 12 kB
JavaScript
import { Component, EventEmitter, Input, Output, ViewChild, } from '@angular/core';
import { formatDate } from 'ng-devui/utils';
import { distinct } from 'rxjs/operators';
import { isString } from 'lodash-es';
import * as i0 from "@angular/core";
import * as i1 from "ng-devui";
import * as i2 from "@angular/forms";
import * as i3 from "@angular/common";
export class DateComponent {
constructor(_renderer) {
this._renderer = _renderer;
this.showTime = false;
this.placeholder = '请选择';
this.valueChange = new EventEmitter();
this.showClearBtn = false;
}
ngOnInit() {
this.control.valueChanges.pipe(distinct()).subscribe((v) => {
this.showClearBtn = !!v;
if (isString(v)) {
this.control.setValue(v);
}
else {
this.control.setValue(formatDate(v, this.dateFormat));
}
});
}
onClearBtnClick() {
this.datePicker?.clearAll();
}
onToggleBtnClick() {
this.datePicker?.toggle();
}
onInputBoxFocus() {
this.datePicker?.show();
}
}
DateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DateComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: DateComponent, selector: "d-date", inputs: { showTime: "showTime", dateFormat: "dateFormat", placeholder: "placeholder", control: "control", validateRules: "validateRules" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true, static: true }, { propertyName: "_dateBox", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"d-date-box devui-input-group devui-dropdown-origin\">\r\n <input\r\n #input\r\n dDatepicker\r\n #datePicker=\"datepicker\"\r\n [placeholder]=\"placeholder\"\r\n [showTime]=\"showTime || false\"\r\n [dateFormat]=\"dateFormat || 'y-MM-dd'\"\r\n (focus)=\"onInputBoxFocus()\"\r\n autocomplete=\"off\"\r\n appendToBody\r\n [formControl]=\"control\"\r\n class=\"devui-input devui-form-control\"\r\n />\r\n <div\r\n *ngIf=\"showClearBtn\"\r\n class=\"date-btn devui-input-group-addon close-icon-wrapper\"\r\n (click)=\"onClearBtnClick()\"\r\n >\r\n <i class=\"icon icon-close\"></i>\r\n </div>\r\n <div\r\n class=\"date-btn devui-input-group-addon\"\r\n (click)=\"onToggleBtnClick()\"\r\n >\r\n <i class=\"icon icon-calendar\"></i>\r\n </div>\r\n</div>\r\n", styles: [".d-date-box{width:100%;min-width:240px}.date-btn{width:0}\n"], components: [{ type: i1.DatePickerAppendToBodyComponent, selector: "[dDatepicker][appendToBody]", inputs: ["appendToBodyDirections", "locale", "cssClass", "disabled", "dateConverter", "customViewTemplate", "autoOpen", "showAnimation", "showTime", "dateConfig", "dateFormat", "maxDate", "minDate"], outputs: ["selectedDateChange"], exportAs: ["datepicker"] }], directives: [{ type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DateComponent, decorators: [{
type: Component,
args: [{ selector: 'd-date', styles: [
`
.d-date-box {
width: 100%;
min-width: 240px;
}
.date-btn {
width: 0;
}
`,
], template: "<div class=\"d-date-box devui-input-group devui-dropdown-origin\">\r\n <input\r\n #input\r\n dDatepicker\r\n #datePicker=\"datepicker\"\r\n [placeholder]=\"placeholder\"\r\n [showTime]=\"showTime || false\"\r\n [dateFormat]=\"dateFormat || 'y-MM-dd'\"\r\n (focus)=\"onInputBoxFocus()\"\r\n autocomplete=\"off\"\r\n appendToBody\r\n [formControl]=\"control\"\r\n class=\"devui-input devui-form-control\"\r\n />\r\n <div\r\n *ngIf=\"showClearBtn\"\r\n class=\"date-btn devui-input-group-addon close-icon-wrapper\"\r\n (click)=\"onClearBtnClick()\"\r\n >\r\n <i class=\"icon icon-close\"></i>\r\n </div>\r\n <div\r\n class=\"date-btn devui-input-group-addon\"\r\n (click)=\"onToggleBtnClick()\"\r\n >\r\n <i class=\"icon icon-calendar\"></i>\r\n </div>\r\n</div>\r\n" }]
}], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { showTime: [{
type: Input
}], dateFormat: [{
type: Input
}], placeholder: [{
type: Input
}], control: [{
type: Input
}], validateRules: [{
type: Input
}], valueChange: [{
type: Output
}], datePicker: [{
type: ViewChild,
args: ['datePicker', { static: true }]
}], _dateBox: [{
type: ViewChild,
args: ['input']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0ZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnRzL2RhdGUvZGF0ZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnRzL2RhdGUvZGF0ZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0gsU0FBUyxFQUVULFlBQVksRUFDWixLQUFLLEVBRUwsTUFBTSxFQUVOLFNBQVMsR0FDWixNQUFNLGVBQWUsQ0FBQztBQUd2QixPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDNUMsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzFDLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxXQUFXLENBQUM7Ozs7O0FBa0JyQyxNQUFNLE9BQU8sYUFBYTtJQXNCdEIsWUFBb0IsU0FBb0I7UUFBcEIsY0FBUyxHQUFULFNBQVMsQ0FBVztRQXJCL0IsYUFBUSxHQUFhLEtBQUssQ0FBQztRQUkzQixnQkFBVyxHQUFXLEtBQUssQ0FBQztRQU0zQixnQkFBVyxHQUF1QixJQUFJLFlBQVksRUFBUSxDQUFDO1FBTXJFLGlCQUFZLEdBQVksS0FBSyxDQUFDO0lBS2EsQ0FBQztJQUU1QyxRQUFRO1FBQ0osSUFBSSxDQUFDLE9BQU8sQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUU7WUFDdkQsSUFBSSxDQUFDLFlBQVksR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDO1lBQ3hCLElBQUksUUFBUSxDQUFDLENBQUMsQ0FBQyxFQUFFO2dCQUNiLElBQUksQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFDO2FBQzVCO2lCQUFNO2dCQUNILElBQUksQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDLFVBQVUsQ0FBQyxDQUFDLEVBQUUsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUM7YUFDekQ7UUFDTCxDQUFDLENBQUMsQ0FBQztJQUNQLENBQUM7SUFFRCxlQUFlO1FBQ1gsSUFBSSxDQUFDLFVBQVUsRUFBRSxRQUFRLEVBQUUsQ0FBQztJQUNoQyxDQUFDO0lBRUQsZ0JBQWdCO1FBQ1osSUFBSSxDQUFDLFVBQVUsRUFBRSxNQUFNLEVBQUUsQ0FBQztJQUM5QixDQUFDO0lBRUQsZUFBZTtRQUNYLElBQUksQ0FBQyxVQUFVLEVBQUUsSUFBSSxFQUFFLENBQUM7SUFDNUIsQ0FBQzs7MEdBN0NRLGFBQWE7OEZBQWIsYUFBYSwrYUNoQzFCLG01QkE0QkE7MkZESWEsYUFBYTtrQkFoQnpCLFNBQVM7K0JBQ0ksUUFBUSxVQUVWO3dCQUNKOzs7Ozs7Ozs7U0FTQztxQkFDSjtnR0FHUSxRQUFRO3NCQUFoQixLQUFLO2dCQUVHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBRUcsV0FBVztzQkFBbkIsS0FBSztnQkFFRyxPQUFPO3NCQUFmLEtBQUs7Z0JBRUcsYUFBYTtzQkFBckIsS0FBSztnQkFFSSxXQUFXO3NCQUFwQixNQUFNO2dCQUVvQyxVQUFVO3NCQUFwRCxTQUFTO3VCQUFDLFlBQVksRUFBRSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUU7Z0JBRXJCLFFBQVE7c0JBQTNCLFNBQVM7dUJBQUMsT0FBTyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XHJcbiAgICBDb21wb25lbnQsXHJcbiAgICBFbGVtZW50UmVmLFxyXG4gICAgRXZlbnRFbWl0dGVyLFxyXG4gICAgSW5wdXQsXHJcbiAgICBPbkluaXQsXHJcbiAgICBPdXRwdXQsXHJcbiAgICBSZW5kZXJlcjIsXHJcbiAgICBWaWV3Q2hpbGQsXHJcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IERhdGVwaWNrZXJEaXJlY3RpdmUsIERWYWxpZGF0ZVJ1bGVzIH0gZnJvbSAnbmctZGV2dWknO1xyXG5pbXBvcnQgeyBGb3JtQ29udHJvbCB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcclxuaW1wb3J0IHsgZm9ybWF0RGF0ZSB9IGZyb20gJ25nLWRldnVpL3V0aWxzJztcclxuaW1wb3J0IHsgZGlzdGluY3QgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XHJcbmltcG9ydCB7IGlzU3RyaW5nIH0gZnJvbSAnbG9kYXNoLWVzJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gICAgc2VsZWN0b3I6ICdkLWRhdGUnLFxyXG4gICAgdGVtcGxhdGVVcmw6ICcuL2RhdGUuY29tcG9uZW50Lmh0bWwnLFxyXG4gICAgc3R5bGVzOiBbXHJcbiAgICAgICAgYFxyXG4gICAgICAgICAgICAuZC1kYXRlLWJveCB7XHJcbiAgICAgICAgICAgICAgICB3aWR0aDogMTAwJTtcclxuICAgICAgICAgICAgICAgIG1pbi13aWR0aDogMjQwcHg7XHJcbiAgICAgICAgICAgIH1cclxuXHJcbiAgICAgICAgICAgIC5kYXRlLWJ0biB7XHJcbiAgICAgICAgICAgICAgICB3aWR0aDogMDtcclxuICAgICAgICAgICAgfVxyXG4gICAgICAgIGAsXHJcbiAgICBdLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgRGF0ZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcbiAgICBASW5wdXQoKSBzaG93VGltZT86IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgICBASW5wdXQoKSBkYXRlRm9ybWF0Pzogc3RyaW5nO1xyXG5cclxuICAgIEBJbnB1dCgpIHBsYWNlaG9sZGVyOiBzdHJpbmcgPSAn6K+36YCJ5oupJztcclxuXHJcbiAgICBASW5wdXQoKSBjb250cm9sITogRm9ybUNvbnRyb2w7XHJcblxyXG4gICAgQElucHV0KCkgdmFsaWRhdGVSdWxlcyE6IERWYWxpZGF0ZVJ1bGVzO1xyXG5cclxuICAgIEBPdXRwdXQoKSB2YWx1ZUNoYW5nZTogRXZlbnRFbWl0dGVyPERhdGU+ID0gbmV3IEV2ZW50RW1pdHRlcjxEYXRlPigpO1xyXG5cclxuICAgIEBWaWV3Q2hpbGQoJ2RhdGVQaWNrZXInLCB7IHN0YXRpYzogdHJ1ZSB9KSBkYXRlUGlja2VyPzogRGF0ZXBpY2tlckRpcmVjdGl2ZTtcclxuXHJcbiAgICBAVmlld0NoaWxkKCdpbnB1dCcpIF9kYXRlQm94PzogRWxlbWVudFJlZjtcclxuXHJcbiAgICBzaG93Q2xlYXJCdG46IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgICBfb25DaGFuZ2U/OiAodmFsdWU6IGFueSkgPT4gdm9pZDtcclxuICAgIF9vblRvdWNoZWQ/OiAoKSA9PiB2b2lkO1xyXG5cclxuICAgIGNvbnN0cnVjdG9yKHByaXZhdGUgX3JlbmRlcmVyOiBSZW5kZXJlcjIpIHt9XHJcblxyXG4gICAgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgICAgICAgdGhpcy5jb250cm9sLnZhbHVlQ2hhbmdlcy5waXBlKGRpc3RpbmN0KCkpLnN1YnNjcmliZSgodikgPT4ge1xyXG4gICAgICAgICAgICB0aGlzLnNob3dDbGVhckJ0biA9ICEhdjtcclxuICAgICAgICAgICAgaWYgKGlzU3RyaW5nKHYpKSB7XHJcbiAgICAgICAgICAgICAgICB0aGlzLmNvbnRyb2wuc2V0VmFsdWUodik7XHJcbiAgICAgICAgICAgIH0gZWxzZSB7XHJcbiAgICAgICAgICAgICAgICB0aGlzLmNvbnRyb2wuc2V0VmFsdWUoZm9ybWF0RGF0ZSh2LCB0aGlzLmRhdGVGb3JtYXQpKTtcclxuICAgICAgICAgICAgfVxyXG4gICAgICAgIH0pO1xyXG4gICAgfVxyXG5cclxuICAgIG9uQ2xlYXJCdG5DbGljaygpIHtcclxuICAgICAgICB0aGlzLmRhdGVQaWNrZXI/LmNsZWFyQWxsKCk7XHJcbiAgICB9XHJcblxyXG4gICAgb25Ub2dnbGVCdG5DbGljaygpIHtcclxuICAgICAgICB0aGlzLmRhdGVQaWNrZXI/LnRvZ2dsZSgpO1xyXG4gICAgfVxyXG5cclxuICAgIG9uSW5wdXRCb3hGb2N1cygpIHtcclxuICAgICAgICB0aGlzLmRhdGVQaWNrZXI/LnNob3coKTtcclxuICAgIH1cclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwiZC1kYXRlLWJveCBkZXZ1aS1pbnB1dC1ncm91cCBkZXZ1aS1kcm9wZG93bi1vcmlnaW5cIj5cclxuICAgIDxpbnB1dFxyXG4gICAgICAgICNpbnB1dFxyXG4gICAgICAgIGREYXRlcGlja2VyXHJcbiAgICAgICAgI2RhdGVQaWNrZXI9XCJkYXRlcGlja2VyXCJcclxuICAgICAgICBbcGxhY2Vob2xkZXJdPVwicGxhY2Vob2xkZXJcIlxyXG4gICAgICAgIFtzaG93VGltZV09XCJzaG93VGltZSB8fCBmYWxzZVwiXHJcbiAgICAgICAgW2RhdGVGb3JtYXRdPVwiZGF0ZUZvcm1hdCB8fCAneS1NTS1kZCdcIlxyXG4gICAgICAgIChmb2N1cyk9XCJvbklucHV0Qm94Rm9jdXMoKVwiXHJcbiAgICAgICAgYXV0b2NvbXBsZXRlPVwib2ZmXCJcclxuICAgICAgICBhcHBlbmRUb0JvZHlcclxuICAgICAgICBbZm9ybUNvbnRyb2xdPVwiY29udHJvbFwiXHJcbiAgICAgICAgY2xhc3M9XCJkZXZ1aS1pbnB1dCBkZXZ1aS1mb3JtLWNvbnRyb2xcIlxyXG4gICAgLz5cclxuICAgIDxkaXZcclxuICAgICAgICAqbmdJZj1cInNob3dDbGVhckJ0blwiXHJcbiAgICAgICAgY2xhc3M9XCJkYXRlLWJ0biBkZXZ1aS1pbnB1dC1ncm91cC1hZGRvbiBjbG9zZS1pY29uLXdyYXBwZXJcIlxyXG4gICAgICAgIChjbGljayk9XCJvbkNsZWFyQnRuQ2xpY2soKVwiXHJcbiAgICA+XHJcbiAgICAgICAgPGkgY2xhc3M9XCJpY29uIGljb24tY2xvc2VcIj48L2k+XHJcbiAgICA8L2Rpdj5cclxuICAgIDxkaXZcclxuICAgICAgICBjbGFzcz1cImRhdGUtYnRuIGRldnVpLWlucHV0LWdyb3VwLWFkZG9uXCJcclxuICAgICAgICAoY2xpY2spPVwib25Ub2dnbGVCdG5DbGljaygpXCJcclxuICAgID5cclxuICAgICAgICA8aSBjbGFzcz1cImljb24gaWNvbi1jYWxlbmRhclwiPjwvaT5cclxuICAgIDwvZGl2PlxyXG48L2Rpdj5cclxuIl19