UNPKG

ngx-bootstrap

Version:
138 lines 5.58 kB
import { Directive, ElementRef, EventEmitter, Input, Output, Renderer2, ViewContainerRef } from '@angular/core'; import { ComponentLoaderFactory } from 'ngx-bootstrap/component-loader'; import { filter } from 'rxjs/operators'; import { BsDatepickerConfig } from './bs-datepicker.config'; import { BsDaterangepickerInlineConfig } from './bs-daterangepicker-inline.config'; import { BsDaterangepickerInlineContainerComponent } from './themes/bs/bs-daterangepicker-inline-container.component'; import { checkBsValue, checkRangesWithMaxDate } from './utils/bs-calendar-utils'; export class BsDaterangepickerInlineDirective { constructor(_config, _elementRef, _renderer, _viewContainerRef, cis) { this._config = _config; this._elementRef = _elementRef; /** * Indicates whether datepicker is enabled or not */ this.isDisabled = false; /** * Emits when daterangepicker value has been changed */ this.bsValueChange = new EventEmitter(); this._subs = []; // todo: assign only subset of fields Object.assign(this, this._config); this._datepicker = cis.createLoader(_elementRef, _viewContainerRef, _renderer); } /** * Initial value of datepicker */ set bsValue(value) { if (this._bsValue === value) { return; } this._bsValue = value; this.bsValueChange.emit(value); } ngOnInit() { this.setConfig(); // if date changes from external source (model -> view) this._subs.push(this.bsValueChange.subscribe((value) => { if (this._datepickerRef) { this._datepickerRef.instance.value = value; } })); // if date changes from picker (view -> model) if (this._datepickerRef) { this._subs.push(this._datepickerRef.instance.valueChange .pipe(filter((range) => range && range[0] && !!range[1])) .subscribe((value) => { this.bsValue = value; })); } } ngOnChanges(changes) { if (!this._datepickerRef || !this._datepickerRef.instance) { return; } if (changes.minDate) { this._datepickerRef.instance.minDate = this.minDate; this.setConfig(); } if (changes.maxDate) { this._datepickerRef.instance.maxDate = this.maxDate; this.setConfig(); } if (changes.datesEnabled) { this._datepickerRef.instance.datesEnabled = this.datesEnabled; } if (changes.datesDisabled) { this._datepickerRef.instance.datesDisabled = this.datesDisabled; this.setConfig(); } if (changes.daysDisabled) { this._datepickerRef.instance.daysDisabled = this.daysDisabled; this.setConfig(); } if (changes.isDisabled) { this._datepickerRef.instance.isDisabled = this.isDisabled; this.setConfig(); } if (changes.dateCustomClasses) { this._datepickerRef.instance.dateCustomClasses = this.dateCustomClasses; this.setConfig(); } } /** * Set config for datepicker */ setConfig() { if (this._datepicker) { this._datepicker.hide(); } this._config = Object.assign({}, this._config, this.bsConfig, { value: checkBsValue(this._bsValue, this.maxDate || this.bsConfig && this.bsConfig.maxDate), isDisabled: this.isDisabled, minDate: this.minDate || this.bsConfig && this.bsConfig.minDate, maxDate: this.maxDate || this.bsConfig && this.bsConfig.maxDate, daysDisabled: this.daysDisabled || this.bsConfig && this.bsConfig.daysDisabled, dateCustomClasses: this.dateCustomClasses || this.bsConfig && this.bsConfig.dateCustomClasses, datesDisabled: this.datesDisabled || this.bsConfig && this.bsConfig.datesDisabled, datesEnabled: this.datesEnabled || this.bsConfig && this.bsConfig.datesEnabled, ranges: checkRangesWithMaxDate(this.bsConfig && this.bsConfig.ranges, this.maxDate || this.bsConfig && this.bsConfig.maxDate), maxDateRange: this.bsConfig && this.bsConfig.maxDateRange }); this._datepickerRef = this._datepicker .provide({ provide: BsDatepickerConfig, useValue: this._config }) .attach(BsDaterangepickerInlineContainerComponent) .to(this._elementRef) .show(); } ngOnDestroy() { this._datepicker.dispose(); } } BsDaterangepickerInlineDirective.decorators = [ { type: Directive, args: [{ selector: 'bs-daterangepicker-inline', exportAs: 'bsDaterangepickerInline' },] } ]; BsDaterangepickerInlineDirective.ctorParameters = () => [ { type: BsDaterangepickerInlineConfig }, { type: ElementRef }, { type: Renderer2 }, { type: ViewContainerRef }, { type: ComponentLoaderFactory } ]; BsDaterangepickerInlineDirective.propDecorators = { bsValue: [{ type: Input }], bsConfig: [{ type: Input }], isDisabled: [{ type: Input }], minDate: [{ type: Input }], maxDate: [{ type: Input }], dateCustomClasses: [{ type: Input }], daysDisabled: [{ type: Input }], datesDisabled: [{ type: Input }], datesEnabled: [{ type: Input }], bsValueChange: [{ type: Output }] }; //# sourceMappingURL=bs-daterangepicker-inline.component.js.map