@c-standard/angular-devui-extension/fesm2020/c-standard-angular-devui-extension-date.mjs

an extensional components lib for devui

import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, ViewChild, NgModule } from '@angular/core';
import { formatDate } from 'ng-devui/utils';
import { distinct } from 'rxjs/operators';
import { isString } from 'lodash-es';
import * as i1 from 'ng-devui';
import { DatepickerModule, FormModule } from 'ng-devui';
import * as i2 from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
import { TransformModule } from '@c-standard/angular-devui-extension/utils';

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']
            }] } });

class DateBoxComponent {
    constructor() {
        this.defaultPattern = 'yyyy/MM/dd';
    }
    onValueChange(value) {
        const parseValue = formatDate(value, this.pattern || this.defaultPattern);
        // this.valueChange.emit(parseValue);
        if (this.control) {
            this.control.setValue(parseValue);
        }
    }
}
DateBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DateBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
DateBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: DateBoxComponent, selector: "d-date-box", inputs: { pattern: "pattern", control: "control", validateRules: "validateRules" }, ngImport: i0, template: `
        <d-date
            [dateFormat]="this.pattern || defaultPattern"
            [control]="control"
            [validateRules]="validateRules"
        ></d-date>
    `, isInline: true, components: [{ type: DateComponent, selector: "d-date", inputs: ["showTime", "dateFormat", "placeholder", "control", "validateRules"], outputs: ["valueChange"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DateBoxComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'd-date-box',
                    template: `
        <d-date
            [dateFormat]="this.pattern || defaultPattern"
            [control]="control"
            [validateRules]="validateRules"
        ></d-date>
    `,
                }]
        }], propDecorators: { pattern: [{
                type: Input
            }], control: [{
                type: Input
            }], validateRules: [{
                type: Input
            }] } });

class DateTimeBoxComponent {
    constructor() {
        this.defaultPattern = 'yyyy/MM/dd HH:mm:ss';
    }
    get value() {
        return this._value || '';
    }
    set value(value) {
        this._value = value;
    }
}
DateTimeBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DateTimeBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
DateTimeBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: DateTimeBoxComponent, selector: "d-date-time-box", inputs: { value: "value", pattern: "pattern", control: "control", validateRules: "validateRules" }, ngImport: i0, template: `
        <d-date
            [showTime]="true"
            [dateFormat]="this.pattern || defaultPattern"
            [control]="control"
            [validateRules]="validateRules"
        ></d-date>
    `, isInline: true, components: [{ type: DateComponent, selector: "d-date", inputs: ["showTime", "dateFormat", "placeholder", "control", "validateRules"], outputs: ["valueChange"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DateTimeBoxComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'd-date-time-box',
                    template: `
        <d-date
            [showTime]="true"
            [dateFormat]="this.pattern || defaultPattern"
            [control]="control"
            [validateRules]="validateRules"
        ></d-date>
    `,
                }]
        }], propDecorators: { value: [{
                type: Input
            }], pattern: [{
                type: Input
            }], control: [{
                type: Input
            }], validateRules: [{
                type: Input
            }] } });

class DateBoxModule {
}
DateBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DateBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DateBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DateBoxModule, declarations: [DateComponent, DateBoxComponent, DateTimeBoxComponent], imports: [CommonModule,
        FormsModule,
        DatepickerModule,
        TransformModule,
        ReactiveFormsModule,
        FormModule], exports: [DateComponent, DateBoxComponent, DateTimeBoxComponent] });
DateBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DateBoxModule, imports: [[
            CommonModule,
            FormsModule,
            DatepickerModule,
            TransformModule,
            ReactiveFormsModule,
            FormModule,
        ]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DateBoxModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [DateComponent, DateBoxComponent, DateTimeBoxComponent],
                    imports: [
                        CommonModule,
                        FormsModule,
                        DatepickerModule,
                        TransformModule,
                        ReactiveFormsModule,
                        FormModule,
                    ],
                    exports: [DateComponent, DateBoxComponent, DateTimeBoxComponent],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { DateBoxComponent, DateBoxModule, DateComponent, DateTimeBoxComponent };
//# sourceMappingURL=c-standard-angular-devui-extension-date.mjs.map