@noaestudio/forms
Version:
Dynamic forms extension for Covalent
159 lines (147 loc) • 13.2 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
import { Component, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { AbstractControlValueAccessor } from '../abstract-control-value-accesor';
import * as moment_ from 'moment';
const /** @type {?} */ moment = moment_;
export const /** @type {?} */ DATEPICKER_INPUT_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DateTimePickerComponent),
multi: true,
};
export class DateTimePickerComponent extends AbstractControlValueAccessor {
constructor() {
super(...arguments);
this.label = '';
this.type = undefined;
this.required = undefined;
this.min = undefined;
this.max = undefined;
this.format = 24;
this.dateTime = moment.utc();
this.dateValue = null;
this.timeValue = '';
}
/**
* @return {?}
*/
ngOnInit() {
if (this.value) {
this.dateTime = this.value;
this.initValues();
}
else {
this.dateTime = moment.utc();
this.control.setValue(this.dateTime);
}
}
/**
* @return {?}
*/
initValues() {
this.dateValue = moment.utc(this.dateTime.clone());
this.timeValue = this.dateTime.format('HH:mm');
}
/**
* @param {?} value
* @return {?}
*/
selectDateValue(value) {
if (this.dateTime == null) {
this.dateTime = moment.utc();
}
this.dateTime.year(value.year()).month(value.month()).date(value.date());
this.control.setValue(this.dateTime);
}
/**
* @param {?} value
* @return {?}
*/
selectTimeValue(value) {
let /** @type {?} */ timeMoment = moment.utc(this.timeValue, 'HH:mm');
if (this.dateTime == null) {
this.dateTime = moment.utc();
}
this.dateTime.hour(timeMoment.hour()).minute(timeMoment.minute()).second(timeMoment.second());
this.control.setValue(this.dateTime);
}
}
DateTimePickerComponent.decorators = [
{ type: Component, args: [{
providers: [DATEPICKER_INPUT_CONTROL_VALUE_ACCESSOR],
selector: 'td-date-time-picker',
styles: [`.td-dynamic-timepicker-wrapper{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-timepicker-wrapper .td-dynamic-timepicker-field{-ms-flex:1;flex:1;box-sizing:border-box}`],
template: `<style>
.timeLabel {
display: block;
margin-bottom: 5px;
color: rgba(0, 0, 0, 0.54);
font-size: 11px;
}
.timeInput {
border: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.54);
width: 201px;
}
.timeIcon {
display: inline-flex;
vertical-align: middle;
}
</style>
<div class="td-dynamic-datepicker-wrapper">
<label>{{label}}</label>
<br />
<br />
<mat-form-field class="td-dynamic-datepicker-field">
<input #elementInput matInput [matDatepicker]="dynamicDatePicker" autocomplete="off"
[(ngModel)]="dateValue" (ngModelChange)="selectDateValue($event)"
placeholder="Fecha" [required]="required" [min]="min" [max]="max"
/>
<mat-datepicker-toggle matSuffix [for]="dynamicDatePicker"></mat-datepicker-toggle>
<mat-datepicker #dynamicDatePicker></mat-datepicker>
</mat-form-field>
<br />
<label class="timeLabel">Hora</label>
<input class="timeInput" [ngxTimepicker]="pickerDT" [(ngModel)]="timeValue" (ngModelChange)="selectTimeValue($event)"
[disableClick]="true" readonly [format]="format" [required]="required" autocomplete="off" />
<ngx-material-timepicker-toggle class="timeIcon" [for]="pickerDT"></ngx-material-timepicker-toggle>
<ngx-material-timepicker #pickerDT></ngx-material-timepicker>
</div>
`,
},] },
];
/** @nocollapse */
DateTimePickerComponent.ctorParameters = () => [];
function DateTimePickerComponent_tsickle_Closure_declarations() {
/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
DateTimePickerComponent.decorators;
/**
* @nocollapse
* @type {function(): !Array<(null|{type: ?, decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>)})>}
*/
DateTimePickerComponent.ctorParameters;
/** @type {?} */
DateTimePickerComponent.prototype.control;
/** @type {?} */
DateTimePickerComponent.prototype.label;
/** @type {?} */
DateTimePickerComponent.prototype.type;
/** @type {?} */
DateTimePickerComponent.prototype.required;
/** @type {?} */
DateTimePickerComponent.prototype.min;
/** @type {?} */
DateTimePickerComponent.prototype.max;
/** @type {?} */
DateTimePickerComponent.prototype.format;
/** @type {?} */
DateTimePickerComponent.prototype.dateTime;
/** @type {?} */
DateTimePickerComponent.prototype.dateValue;
/** @type {?} */
DateTimePickerComponent.prototype.timeValue;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0ZS10aW1lLXBpY2tlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AY292YWxlbnQvZHluYW1pYy1mb3Jtcy8iLCJzb3VyY2VzIjpbImR5bmFtaWMtZWxlbWVudHMvZGF0ZS10aW1lLXBpY2tlci9kYXRlLXRpbWUtcGlja2VyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdEQsT0FBTyxFQUFFLGlCQUFpQixFQUFxQyxNQUFNLGdCQUFnQixDQUFDO0FBRXRGLE9BQU8sRUFBRSw0QkFBNEIsRUFBRSxNQUFNLG1DQUFtQyxDQUFDO0FBR2pGLE9BQU8sS0FBSyxPQUFPLE1BQU0sUUFBUSxDQUFDO0FBRWxDLHVCQUFNLE1BQU0sR0FBRyxPQUFPLENBQUM7QUFFdkIsTUFBTSxDQUFDLHVCQUFNLHVDQUF1QyxHQUFRO0lBQzNELE9BQU8sRUFBRSxpQkFBaUI7SUFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyx1QkFBdUIsQ0FBQztJQUN0RCxLQUFLLEVBQUUsSUFBSTtDQUNYLENBQUM7QUF1REYsTUFBTSw4QkFBK0IsU0FBUSw0QkFBNEI7OztxQkFJeEQsRUFBRTtvQkFFSCxTQUFTO3dCQUVKLFNBQVM7bUJBRWYsU0FBUzttQkFFVCxTQUFTO3NCQUVMLEVBQUU7d0JBRUQsTUFBTSxDQUFDLEdBQUcsRUFBRTt5QkFFVixJQUFJO3lCQUNKLEVBQUU7Ozs7O0lBRXZCLFFBQVE7UUFDUCxFQUFFLENBQUMsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQztZQUNoQixJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUM7WUFDM0IsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDO1NBQ2xCO1FBQ0QsSUFBSSxDQUFDLENBQUM7WUFDTCxJQUFJLENBQUMsUUFBUSxHQUFHLE1BQU0sQ0FBQyxHQUFHLEVBQUUsQ0FBQztZQUM3QixJQUFJLENBQUMsT0FBTyxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7U0FDckM7S0FDRDs7OztJQUVPLFVBQVU7UUFDakIsSUFBSSxDQUFDLFNBQVMsR0FBRyxNQUFNLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQztRQUNuRCxJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQyxDQUFDOzs7Ozs7SUFJaEQsZUFBZSxDQUFDLEtBQWE7UUFDNUIsRUFBRSxDQUFDLENBQUMsSUFBSSxDQUFDLFFBQVEsSUFBSSxJQUFJLENBQUMsQ0FBQyxDQUFDO1lBQzNCLElBQUksQ0FBQyxRQUFRLEdBQUcsTUFBTSxDQUFDLEdBQUcsRUFBRSxDQUFDO1NBQzdCO1FBRUQsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksRUFBRSxDQUFDLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQztRQUV6RSxJQUFJLENBQUMsT0FBTyxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7S0FDckM7Ozs7O0lBRUQsZUFBZSxDQUFDLEtBQWM7UUFDN0IscUJBQUksVUFBVSxHQUFZLE1BQU0sQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLFNBQVMsRUFBQyxPQUFPLENBQUMsQ0FBQztRQUU3RCxFQUFFLENBQUMsQ0FBQyxJQUFJLENBQUMsUUFBUSxJQUFJLElBQUksQ0FBQyxDQUFDLENBQUM7WUFDM0IsSUFBSSxDQUFDLFFBQVEsR0FBRyxNQUFNLENBQUMsR0FBRyxFQUFFLENBQUM7U0FDN0I7UUFFRCxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQyxNQUFNLENBQUMsVUFBVSxDQUFDLE1BQU0sRUFBRSxDQUFDLENBQUMsTUFBTSxDQUFDLFVBQVUsQ0FBQyxNQUFNLEVBQUUsQ0FBQyxDQUFDO1FBRTlGLElBQUksQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQztLQUNyQzs7O1lBL0dELFNBQVMsU0FBQztnQkFDVixTQUFTLEVBQUUsQ0FBQyx1Q0FBdUMsQ0FBQztnQkFDcEQsUUFBUSxFQUFFLHFCQUFxQjtnQkFDL0IsTUFBTSxFQUFFLENBQUMsc09BQXNPLENBQUM7Z0JBQ2hQLFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Q0ErQ1Y7YUFDQSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgZm9yd2FyZFJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBOR19WQUxVRV9BQ0NFU1NPUiwgQ29udHJvbFZhbHVlQWNjZXNzb3IsIEZvcm1Db250cm9sIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5cclxuaW1wb3J0IHsgQWJzdHJhY3RDb250cm9sVmFsdWVBY2Nlc3NvciB9IGZyb20gJy4uL2Fic3RyYWN0LWNvbnRyb2wtdmFsdWUtYWNjZXNvcic7XHJcblxyXG5pbXBvcnQgeyBNb21lbnQgfSBmcm9tICdtb21lbnQnO1xyXG5pbXBvcnQgKiBhcyBtb21lbnRfIGZyb20gJ21vbWVudCc7XHJcblxyXG5jb25zdCBtb21lbnQgPSBtb21lbnRfO1xyXG5cclxuZXhwb3J0IGNvbnN0IERBVEVQSUNLRVJfSU5QVVRfQ09OVFJPTF9WQUxVRV9BQ0NFU1NPUjogYW55ID0ge1xyXG5cdHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxyXG5cdHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IERhdGVUaW1lUGlja2VyQ29tcG9uZW50KSxcclxuXHRtdWx0aTogdHJ1ZSxcclxufTtcclxuXHJcbkBDb21wb25lbnQoe1xyXG5cdHByb3ZpZGVyczogW0RBVEVQSUNLRVJfSU5QVVRfQ09OVFJPTF9WQUxVRV9BQ0NFU1NPUl0sXHJcblx0c2VsZWN0b3I6ICd0ZC1kYXRlLXRpbWUtcGlja2VyJyxcclxuXHRzdHlsZXM6IFtgLnRkLWR5bmFtaWMtdGltZXBpY2tlci13cmFwcGVyey1tcy1mbGV4LWRpcmVjdGlvbjpyb3c7ZmxleC1kaXJlY3Rpb246cm93O2Rpc3BsYXk6LW1zLWZsZXhib3g7ZGlzcGxheTpmbGV4O2JveC1zaXppbmc6Ym9yZGVyLWJveH0udGQtZHluYW1pYy10aW1lcGlja2VyLXdyYXBwZXIgLnRkLWR5bmFtaWMtdGltZXBpY2tlci1maWVsZHstbXMtZmxleDoxO2ZsZXg6MTtib3gtc2l6aW5nOmJvcmRlci1ib3h9YF0sXHJcblx0dGVtcGxhdGU6IGA8c3R5bGU+XHJcblxyXG4udGltZUxhYmVsIHtcclxuXHRkaXNwbGF5OiBibG9jaztcclxuXHRtYXJnaW4tYm90dG9tOiA1cHg7XHJcblx0Y29sb3I6IHJnYmEoMCwgMCwgMCwgMC41NCk7XHJcblx0Zm9udC1zaXplOiAxMXB4O1xyXG59XHJcblxyXG4udGltZUlucHV0IHtcclxuXHRib3JkZXI6IG5vbmU7XHJcbiAgICBib3JkZXItYm90dG9tOiAxcHggc29saWQgcmdiYSgwLCAwLCAwLCAwLjU0KTtcclxuICAgIHdpZHRoOiAyMDFweDtcclxufVxyXG5cclxuLnRpbWVJY29uIHtcclxuXHRkaXNwbGF5OiBpbmxpbmUtZmxleDtcclxuXHR2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlO1xyXG59XHJcblxyXG48L3N0eWxlPlxyXG5cclxuPGRpdiBjbGFzcz1cInRkLWR5bmFtaWMtZGF0ZXBpY2tlci13cmFwcGVyXCI+XHJcblx0PGxhYmVsPnt7bGFiZWx9fTwvbGFiZWw+XHJcblxyXG5cdDxiciAvPlxyXG5cdDxiciAvPlxyXG5cclxuXHQ8bWF0LWZvcm0tZmllbGQgY2xhc3M9XCJ0ZC1keW5hbWljLWRhdGVwaWNrZXItZmllbGRcIj5cclxuXHRcdDxpbnB1dCAjZWxlbWVudElucHV0IG1hdElucHV0IFttYXREYXRlcGlja2VyXT1cImR5bmFtaWNEYXRlUGlja2VyXCIgYXV0b2NvbXBsZXRlPVwib2ZmXCJcclxuXHRcdFx0WyhuZ01vZGVsKV09XCJkYXRlVmFsdWVcIiAobmdNb2RlbENoYW5nZSk9XCJzZWxlY3REYXRlVmFsdWUoJGV2ZW50KVwiXHJcblx0XHRcdHBsYWNlaG9sZGVyPVwiRmVjaGFcIiBbcmVxdWlyZWRdPVwicmVxdWlyZWRcIiBbbWluXT1cIm1pblwiIFttYXhdPVwibWF4XCJcclxuXHRcdC8+XHJcblx0XHQ8bWF0LWRhdGVwaWNrZXItdG9nZ2xlIG1hdFN1ZmZpeCBbZm9yXT1cImR5bmFtaWNEYXRlUGlja2VyXCI+PC9tYXQtZGF0ZXBpY2tlci10b2dnbGU+XHJcblx0XHQ8bWF0LWRhdGVwaWNrZXIgI2R5bmFtaWNEYXRlUGlja2VyPjwvbWF0LWRhdGVwaWNrZXI+XHJcblxyXG5cdDwvbWF0LWZvcm0tZmllbGQ+XHJcblxyXG5cdDxiciAvPlxyXG5cclxuXHQ8bGFiZWwgY2xhc3M9XCJ0aW1lTGFiZWxcIj5Ib3JhPC9sYWJlbD5cclxuXHQ8aW5wdXQgY2xhc3M9XCJ0aW1lSW5wdXRcIiBbbmd4VGltZXBpY2tlcl09XCJwaWNrZXJEVFwiIFsobmdNb2RlbCldPVwidGltZVZhbHVlXCIgKG5nTW9kZWxDaGFuZ2UpPVwic2VsZWN0VGltZVZhbHVlKCRldmVudClcIlxyXG5cdFx0W2Rpc2FibGVDbGlja109XCJ0cnVlXCIgcmVhZG9ubHkgW2Zvcm1hdF09XCJmb3JtYXRcIiBbcmVxdWlyZWRdPVwicmVxdWlyZWRcIiBhdXRvY29tcGxldGU9XCJvZmZcIiAvPlxyXG4gICAgPG5neC1tYXRlcmlhbC10aW1lcGlja2VyLXRvZ2dsZSBjbGFzcz1cInRpbWVJY29uXCIgW2Zvcl09XCJwaWNrZXJEVFwiPjwvbmd4LW1hdGVyaWFsLXRpbWVwaWNrZXItdG9nZ2xlPlxyXG4gICAgPG5neC1tYXRlcmlhbC10aW1lcGlja2VyICNwaWNrZXJEVD48L25neC1tYXRlcmlhbC10aW1lcGlja2VyPlxyXG5cclxuPC9kaXY+XHJcbmAsXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBEYXRlVGltZVBpY2tlckNvbXBvbmVudCBleHRlbmRzIEFic3RyYWN0Q29udHJvbFZhbHVlQWNjZXNzb3IgaW1wbGVtZW50cyBDb250cm9sVmFsdWVBY2Nlc3NvciB7XHJcblxyXG5cdGNvbnRyb2w6IEZvcm1Db250cm9sO1xyXG5cclxuXHRsYWJlbDogc3RyaW5nID0gJyc7XHJcblxyXG5cdHR5cGU6IHN0cmluZyA9IHVuZGVmaW5lZDtcclxuXHJcblx0cmVxdWlyZWQ6IGJvb2xlYW4gPSB1bmRlZmluZWQ7XHJcblxyXG5cdG1pbjogbnVtYmVyID0gdW5kZWZpbmVkO1xyXG5cclxuXHRtYXg6IG51bWJlciA9IHVuZGVmaW5lZDtcclxuXHJcblx0Zm9ybWF0IDogbnVtYmVyID0gMjQ7XHJcblxyXG5cdGRhdGVUaW1lOiBNb21lbnQgPSBtb21lbnQudXRjKCk7XHJcblxyXG5cdGRhdGVWYWx1ZSA6IE1vbWVudCA9IG51bGw7XHJcblx0dGltZVZhbHVlIDogc3RyaW5nID0gJyc7XHJcblxyXG5cdG5nT25Jbml0KCkge1xyXG5cdFx0aWYgKHRoaXMudmFsdWUpIHtcclxuXHRcdFx0dGhpcy5kYXRlVGltZSA9IHRoaXMudmFsdWU7XHJcblx0XHRcdHRoaXMuaW5pdFZhbHVlcygpO1xyXG5cdFx0fVxyXG5cdFx0ZWxzZSB7XHJcblx0XHRcdHRoaXMuZGF0ZVRpbWUgPSBtb21lbnQudXRjKCk7XHJcblx0XHRcdHRoaXMuY29udHJvbC5zZXRWYWx1ZSh0aGlzLmRhdGVUaW1lKTtcclxuXHRcdH1cclxuXHR9XHJcblxyXG5cdHByaXZhdGUgaW5pdFZhbHVlcygpIHtcclxuXHRcdHRoaXMuZGF0ZVZhbHVlID0gbW9tZW50LnV0Yyh0aGlzLmRhdGVUaW1lLmNsb25lKCkpO1xyXG5cdFx0dGhpcy50aW1lVmFsdWUgPSB0aGlzLmRhdGVUaW1lLmZvcm1hdCgnSEg6bW0nKTtcclxuXHR9XHJcblxyXG5cclxuXHRzZWxlY3REYXRlVmFsdWUodmFsdWU6IE1vbWVudCkge1xyXG5cdFx0aWYgKHRoaXMuZGF0ZVRpbWUgPT0gbnVsbCkge1xyXG5cdFx0XHR0aGlzLmRhdGVUaW1lID0gbW9tZW50LnV0YygpO1xyXG5cdFx0fVxyXG5cclxuXHRcdHRoaXMuZGF0ZVRpbWUueWVhcih2YWx1ZS55ZWFyKCkpLm1vbnRoKHZhbHVlLm1vbnRoKCkpLmRhdGUodmFsdWUuZGF0ZSgpKTtcclxuXHJcblx0XHR0aGlzLmNvbnRyb2wuc2V0VmFsdWUodGhpcy5kYXRlVGltZSk7XHJcblx0fVxyXG5cclxuXHRzZWxlY3RUaW1lVmFsdWUodmFsdWUgOiBzdHJpbmcpIHtcclxuXHRcdGxldCB0aW1lTW9tZW50IDogTW9tZW50ID0gbW9tZW50LnV0Yyh0aGlzLnRpbWVWYWx1ZSwnSEg6bW0nKTtcclxuXHJcblx0XHRpZiAodGhpcy5kYXRlVGltZSA9PSBudWxsKSB7XHJcblx0XHRcdHRoaXMuZGF0ZVRpbWUgPSBtb21lbnQudXRjKCk7XHJcblx0XHR9XHJcblxyXG5cdFx0dGhpcy5kYXRlVGltZS5ob3VyKHRpbWVNb21lbnQuaG91cigpKS5taW51dGUodGltZU1vbWVudC5taW51dGUoKSkuc2Vjb25kKHRpbWVNb21lbnQuc2Vjb25kKCkpO1xyXG5cclxuXHRcdHRoaXMuY29udHJvbC5zZXRWYWx1ZSh0aGlzLmRhdGVUaW1lKTtcclxuXHR9XHJcblxyXG59XHJcbiJdfQ==