UNPKG

ng-tempusdominus-bootstrap4

Version:

Angular2+ directive for tempus dominus bootstrap 4 library.

334 lines (328 loc) 9.07 kB
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