ng-tempusdominus-bootstrap4
Version:
Angular2+ directive for tempus dominus bootstrap 4 library.
334 lines (328 loc) • 9.07 kB
JavaScript
import { Directive, ElementRef, Input, EventEmitter, Output, forwardRef, ChangeDetectorRef, KeyValueDiffers, HostListener, HostBinding, Inject, ContentChild, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class NgTempusdominusBootstrapInputDirective {
/**
* @param {?} changeDetector
* @param {?} el
* @param {?} differs
*/
constructor(changeDetector, el, differs) {
this.changeDetector = changeDetector;
this.el = el;
this.differs = differs;
this._options = {};
this.click = new EventEmitter();
this._onTouched = () => {
};
this._onChange = () => {
};
this.dpinitialized = false;
const /** @type {?} */ $parent = $(el.nativeElement.parentNode);
this.inputOnly = !$parent.hasClass('input-group');
this.dpElement = $parent.hasClass('input-group') ? $parent : $(el.nativeElement);
}
/**
* @param {?} value
* @return {?}
*/
set options(value) {
if (value !== null) {
this._options = value;
}
}
/**
* @return {?}
*/
get options() {
return this._options;
}
/**
* @return {?}
*/
onBlur() {
this._onTouched();
}
/**
* @return {?}
*/
onFocus() {
if (this.inputOnly) {
this.dpElement.datetimepicker('toggle');
}
}
/**
* For click outside of input, for input only
* @param {?} event event object
* @param {?} targetElement target element object
* @return {?}
*/
outsideClick(event, targetElement) {
if (!targetElement || !this.inputOnly || this.options.inline) {
return;
}
const /** @type {?} */ clickedInside = this.el.nativeElement.contains(targetElement);
if (!clickedInside) {
this.dpElement.datetimepicker('hide');
}
}
/**
* @return {?}
*/
get value() {
return this._value || null;
}
/**
* @param {?} val
* @return {?}
*/
set value(val) {
this._value = val;
this._onChange(val);
if (val) {
this._onTouched();
}
this.changeDetector.markForCheck();
}
/**
* @param {?} value
* @return {?}
*/
writeValue(value) {
// if we have a previous value and current value is falsy
// clear the picker
if (this._value && !value) {
this.value = null;
this.dpElement.datetimepicker('clear');
}
this.value = value;
this.setDpValue(value);
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this._onChange = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) {
this._onTouched = fn;
}
/**
* @param {?} val
* @return {?}
*/
setDpValue(val) {
if (!this.dpinitialized) {
return;
}
if (val) {
this.dpElement.datetimepicker('date', this.value);
}
}
/**
* @param {?} isDisabled
* @return {?}
*/
setDisabledState(isDisabled) {
if (isDisabled) {
this.dpElement.datetimepicker('disable');
return;
}
this.dpElement.datetimepicker('enable');
}
/**
* @return {?}
*/
ngOnInit() {
this.dpinitialized = true;
this.dpElement.datetimepicker(this.options);
this.dpElement.on('change.datetimepicker', (e) => {
if (e.date !== this.value) {
this.value = e.date || null;
}
});
this.dpElement.on('click', () => {
this.click.emit();
});
this.optionsDiffer = this.differs.find(this.options).create();
}
/**
* @return {?}
*/
ngDoCheck() {
if (this.dpinitialized) {
const /** @type {?} */ changes = this.optionsDiffer.diff(this.options);
if (changes) {
$.map(this.options, (value, key) => {
this.dpElement.datetimepicker(key, value);
});
}
}
}
/**
* @return {?}
*/
ngOnDestroy() {
this.dpElement.datetimepicker('destroy');
}
/**
* @return {?}
*/
toggle() {
this.dpElement.datetimepicker('toggle');
}
}
NgTempusdominusBootstrapInputDirective.decorators = [
{ type: Directive, args: [{
selector: '[NgTempusdominusBootstrapInput]',
exportAs: 'NgTempusdominusBootstrapInput',
providers: [
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NgTempusdominusBootstrapInputDirective), multi: true }
]
},] },
];
/** @nocollapse */
NgTempusdominusBootstrapInputDirective.ctorParameters = () => [
{ type: ChangeDetectorRef, },
{ type: ElementRef, },
{ type: KeyValueDiffers, },
];
NgTempusdominusBootstrapInputDirective.propDecorators = {
"options": [{ type: Input },],
"click": [{ type: Output },],
"onBlur": [{ type: HostListener, args: ['blur',] },],
"onFocus": [{ type: HostListener, args: ['focus',] },],
"outsideClick": [{ type: HostListener, args: ['document:click', ['$event', '$event.target'],] },],
};
/**
* Allows the datepicker to be toggled via click.
*
*/
class NgTempusdominusBootstrapToggleDirective {
/**
* @param {?} tempusDominus
* @param {?} elementRef
*/
constructor(tempusDominus, elementRef) {
this.tempusDominus = tempusDominus;
this.cursor = 'pointer';
}
/**
* @return {?}
*/
click() {
this.toggleOpen();
}
/**
* @return {?}
*/
toggleOpen() {
this.tempusDominus.toggle();
}
}
NgTempusdominusBootstrapToggleDirective.decorators = [
{ type: Directive, args: [{
selector: '[NgTempusdominusBootstrapToggle]'
},] },
];
/** @nocollapse */
NgTempusdominusBootstrapToggleDirective.ctorParameters = () => [
{ type: undefined, decorators: [{ type: Inject, args: [forwardRef(() => NgTempusdominusBootstrapDirective),] },] },
{ type: ElementRef, },
];
NgTempusdominusBootstrapToggleDirective.propDecorators = {
"cursor": [{ type: HostBinding, args: ['style.cursor',] },],
"click": [{ type: HostListener, args: ['click',] },],
};
/**
* Container
*
*/
class NgTempusdominusBootstrapDirective {
/**
* @param {?} el
*/
constructor(el) {
this.el = el;
}
/**
* For click outside of container,
* @param {?} event event object
* @param {?} targetElement target element object
* @return {?}
*/
outsideClick(event, targetElement) {
if (!targetElement) {
return;
}
const /** @type {?} */ clickedInside = this.el.nativeElement.contains(targetElement);
if (!clickedInside) {
this._input.dpElement.datetimepicker('hide');
}
}
/**
* @return {?}
*/
toggle() {
this._input.toggle();
}
}
NgTempusdominusBootstrapDirective.decorators = [
{ type: Directive, args: [{
selector: '[NgTempusdominusBootstrap]'
},] },
];
/** @nocollapse */
NgTempusdominusBootstrapDirective.ctorParameters = () => [
{ type: ElementRef, },
];
NgTempusdominusBootstrapDirective.propDecorators = {
"_input": [{ type: ContentChild, args: [NgTempusdominusBootstrapInputDirective,] },],
"outsideClick": [{ type: HostListener, args: ['document:click', ['$event', '$event.target'],] },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class NgTempusdominusBootstrapModule {
}
NgTempusdominusBootstrapModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
FormsModule
],
declarations: [
NgTempusdominusBootstrapDirective,
NgTempusdominusBootstrapToggleDirective,
NgTempusdominusBootstrapInputDirective,
],
exports: [
NgTempusdominusBootstrapDirective,
NgTempusdominusBootstrapToggleDirective,
NgTempusdominusBootstrapInputDirective
]
},] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgTempusdominusBootstrapModule, NgTempusdominusBootstrapToggleDirective, NgTempusdominusBootstrapDirective, NgTempusdominusBootstrapInputDirective };
//# sourceMappingURL=ng-tempusdominus-bootstrap4.js.map