ng-daterangepicker-ext/src/ng-daterangepicker/ng-daterangepicker.component.js

Angular PayPal Datepicker

import { NgDateRangePickerHelper } from './shared/ng-daterangerpicker.helper';
import { NgDateRangeCalendarComponent } from './ng-daterange-calendar/ng-daterange-calendar.component';
import { ApplicationRef, Component, ComponentFactoryResolver, ElementRef, forwardRef, HostListener, Injector, Input, Renderer, ViewChild, ViewContainerRef } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import * as dateFns from 'date-fns';
export var DATERANGEPICKER_VALUE_ACCESSOR = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(function () { return NgDateRangePickerComponent; }),
    multi: true
};
var NgDateRangePickerComponent = (function () {
    function NgDateRangePickerComponent(elementRef, renderer, injector, viewContainerRef, applicationRef, componentFactoryResolver, helper) {
        this.elementRef = elementRef;
        this.renderer = renderer;
        this.injector = injector;
        this.viewContainerRef = viewContainerRef;
        this.applicationRef = applicationRef;
        this.componentFactoryResolver = componentFactoryResolver;
        this.helper = helper;
        this._opened = false;
        this.defaultOptions = {
            theme: 'default',
            range: 'tm',
            dayNames: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            presetNames: ['This Month', 'Last Month', 'This Week', 'Last Week', 'This Year', 'Last Year', 'Start', 'End',
                'Hours', 'Minutes', 'Seconds'],
            outputFormat: 'DD/MM/YYYY',
            startOfWeek: 0,
            showTime: false,
            timeFormat: 'HH:mm:ss',
            container: false
        };
        this.onTouchedCallback = function () { };
        this.onChangeCallback = function () { };
    }
    Object.defineProperty(NgDateRangePickerComponent.prototype, "opened", {
        get: function () {
            return this._opened;
        },
        set: function (value) {
            this._opened = value;
            if (this.calendarComponentRef && this.calendarComponentRef.instance) {
                this.calendarComponentRef.instance.opened = this.opened;
            }
        },
        enumerable: true,
        configurable: true
    });
    ;
    ;
    Object.defineProperty(NgDateRangePickerComponent.prototype, "value", {
        get: function () {
            return this.modelValue;
        },
        set: function (value) {
            if (!value) {
                return;
            }
            this.modelValue = value;
            this.onChangeCallback(value);
        },
        enumerable: true,
        configurable: true
    });
    NgDateRangePickerComponent.prototype.writeValue = function (value) {
        if (!value) {
            return;
        }
        this.modelValue = value;
    };
    NgDateRangePickerComponent.prototype.registerOnChange = function (fn) {
        this.onChangeCallback = fn;
    };
    NgDateRangePickerComponent.prototype.registerOnTouched = function (fn) {
        this.onTouchedCallback = fn;
    };
    NgDateRangePickerComponent.prototype.ngOnInit = function () {
        var _this = this;
        this.options = this.options || {};
        Object.keys(this.defaultOptions).forEach(function (key) {
            if (!_this.options.hasOwnProperty(key)) {
                _this.options[key] = _this.defaultOptions[key];
            }
        });
        var dates = this.helper.selectRange(this.options);
        this.dateFrom = dates.dateFrom;
        this.dateTo = dates.dateTo;
    };
    NgDateRangePickerComponent.prototype.toggleCalendar = function (e, selection) {
        if (!this.created) {
            this.createCalendar();
            this.created = true;
        }
        if (this.opened && this.opened !== selection) {
            this.opened = selection;
            this.calendarComponentRef.instance.opened = this.opened;
        }
        else {
            this.opened = this.opened ? false : selection;
            this.calendarComponentRef.instance.opened = this.opened;
        }
    };
    NgDateRangePickerComponent.prototype.createCalendar = function () {
        this.calendarComponentRef = this.componentFactoryResolver.resolveComponentFactory(NgDateRangeCalendarComponent).create(this.injector);
        this.initCalendar();
        this.applicationRef.attachView(this.calendarComponentRef.hostView);
        var container = this.options.container ?
            document.querySelector(this.options.container) :
            this.defaultContainer.nativeElement;
        container.appendChild(this.calendarComponentRef.location.nativeElement);
    };
    NgDateRangePickerComponent.prototype.initCalendar = function () {
        var _this = this;
        this.calendarComponentRef.instance.options = this.options;
        this.calendarComponentRef.instance.dateFrom = this.dateFrom;
        this.calendarComponentRef.instance.dateTo = this.dateTo;
        this.calendarComponentRef.instance.onDateFrom.subscribe(function (val) {
            _this.dateFrom = val;
        });
        this.calendarComponentRef.instance.onDateTo.subscribe(function (val) {
            _this.dateTo = val;
        });
        this.calendarComponentRef.instance.opened = this.opened;
        this.calendarComponentRef.instance.onValueChange.subscribe(function (val) {
            _this.value = val;
        });
        this.calendarComponentRef.instance.target = this.options.container ? this.defaultContainer.nativeElement : false;
    };
    NgDateRangePickerComponent.prototype.formatDate = function (value) {
        return dateFns.format(value, this.options.outputFormat);
    };
    NgDateRangePickerComponent.prototype.getCSSClasses = function () {
        return "ng-daterangepicker theme-" + this.options.theme + (!!this.opened ? ' is-active' : '');
    };
    NgDateRangePickerComponent.prototype.handleBlurClick = function (e) {
        var target = e.srcElement || e.target;
        if (!this.elementRef.nativeElement.contains(e.target) &&
            (this.calendarComponentRef && !this.calendarComponentRef.instance.element.nativeElement.contains(e.target)) &&
            !target.classList.contains('day-num') &&
            !target.classList.contains('time-link') &&
            !target.classList.contains('time-svg')) {
            this.opened = false;
        }
    };
    return NgDateRangePickerComponent;
}());
export { NgDateRangePickerComponent };
NgDateRangePickerComponent.decorators = [
    { type: Component, args: [{
                selector: 'ng-daterangepicker',
                templateUrl: 'ng-daterangepicker.component.html',
                styleUrls: ['ng-daterangepicker.sass'],
                providers: [DATERANGEPICKER_VALUE_ACCESSOR]
            },] },
];
/** @nocollapse */
NgDateRangePickerComponent.ctorParameters = function () { return [
    { type: ElementRef, },
    { type: Renderer, },
    { type: Injector, },
    { type: ViewContainerRef, },
    { type: ApplicationRef, },
    { type: ComponentFactoryResolver, },
    { type: NgDateRangePickerHelper, },
]; };
NgDateRangePickerComponent.propDecorators = {
    'options': [{ type: Input },],
    'container': [{ type: Input },],
    'defaultContainer': [{ type: ViewChild, args: ['defaultContainer',] },],
    'handleBlurClick': [{ type: HostListener, args: ['document:click', ['$event'],] },],
};