ngx-animating-datepicker 1.2.1 → 2.0.0

package/fesm2022/ngx-animating-datepicker.mjs

@@ -0,0 +1,1534 @@
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, HostBinding, Input, Output, Component, ViewChild, createComponent, HostListener, Optional, Directive, NgModule } from '@angular/core';
+import * as i1 from '@angular/forms';
+
+class DatepickerService {
+    /**
+     * Get the formatted weekdays
+     *
+     * @param language
+     * @param format
+     * @param start
+     */
+    static getWeekDays(language, format, start) {
+        const days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
+        const index = days.indexOf(start.toLowerCase());
+        if (index < 0) {
+            throw new Error('Invalid week day start: ' + start);
+        }
+        const weekdays = [];
+        for (let day = 5; day <= 11; day++) {
+            weekdays.push(new Date(1970, 1 - 1, day + index).toLocaleString(language, {
+                weekday: format
+            }));
+        }
+        return weekdays;
+    }
+    /**
+     * Checks if is a value iso code
+     *
+     * @param isoCode
+     */
+    static isValidIsoCode(isoCode) {
+        const pattern = new RegExp(/([a-z]{2})-([A-Z]{2})/);
+        return pattern.test(isoCode);
+    }
+    /**
+     * Create a week array from the merged day arrays
+     *
+     * @param dayArray
+     */
+    static createWeekArray(dayArray) {
+        const size = 7;
+        const weeks = [];
+        while (dayArray.length) {
+            weeks.push({
+                days: dayArray.splice(0, size)
+            });
+        }
+        return weeks;
+    }
+    static getDaysInMonth(year, month) {
+        return [31, DatepickerService.isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
+    }
+    static isValidDate(value) {
+        let validDate = true;
+        for (let i = 0; i < value.length; i++) {
+            if (!DatepickerService.isDate(value[i]) && validDate) {
+                validDate = false;
+            }
+        }
+        return validDate;
+    }
+    /**
+     * Check if year is a leap year
+     *
+     * @param year
+     */
+    static isLeapYear(year) {
+        return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+    }
+    /**
+     * Checks to see if value is a valid date
+     *
+     * @param value
+     */
+    static isDate(value) {
+        return value instanceof Date;
+    }
+    /**
+     * Get the year of the next month
+     *
+     * @param year
+     * @param month
+     */
+    static getYearOfNextMonth(year, month) {
+        return month === 11 ? year + 1 : year;
+    }
+    /**
+     * Get the next month
+     *
+     * @param month
+     */
+    static getNextMonth(month) {
+        return month === 11 ? 0 : month + 1;
+    }
+    /**
+     * Get the year of the previous month
+     *
+     * @param year
+     * @param month
+     */
+    static getYearOfPreviousMonth(year, month) {
+        return month === 0 ? year - 1 : year;
+    }
+    /**
+     * Get previous motnh
+     *
+     * @param month
+     */
+    static getPreviousMonth(month) {
+        return month === 0 ? 11 : month - 1;
+    }
+    /**
+     * Check if a date is later
+     *
+     * @param date
+     * @param compareDate
+     */
+    static isLater(date, compareDate) {
+        return date > compareDate;
+    }
+    /**
+     * Check if a date is ealrier
+     *
+     * @param date
+     * @param compareDate
+     */
+    static isEarlier(date, compareDate) {
+        return date < compareDate;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: DatepickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: DatepickerService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: DatepickerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const DefaultOptions = {
+    selectMultiple: false, // Select multiple dates
+    closeOnSelect: false, // Close datepicker when date(s) selected
+    animationSpeed: 400, // Animation speed in ms
+    easing: 'ease-in', // Easing type string
+    hideRestDays: false, // Hide the rest days
+    disableRestDays: true, // Disable the click on rest days
+    hideNavigation: false, // Hide the navigation
+    range: false, // Use range functionality
+    currentDate: new Date(), // Tne current displayed date (month, year)
+    timeoutBeforeClosing: 300, // The timeout / delay before closing
+    weekdayFormat: 'short', // "narrow", "short", "long"
+    weekStart: 'monday' // Set the week start day
+};
+const DefaultDirectiveOptions = {
+    appendToBody: true, // Append Datepicker to body
+    openDirection: 'bottom', // The direction it should open to
+    closeOnBlur: true, // Close the datepicker onBlur
+    useAnimatePicker: true // Use the animatepickerComponent
+};
+
+class UtilitiesService {
+    static getScrollOffset() {
+        const x = window.pageXOffset || document.documentElement.scrollLeft;
+        const y = window.pageYOffset || document.documentElement.scrollTop;
+        return { x: x, y: y };
+    }
+    static getPageOffset(el) {
+        const scrollOffset = UtilitiesService.getScrollOffset();
+        const width = el.offsetWidth;
+        const height = el.offsetHeight;
+        if (el.getBoundingClientRect) {
+            const props = el.getBoundingClientRect();
+            const position = {
+                top: props.top + scrollOffset.y,
+                left: props.left + scrollOffset.x,
+                right: props.left + scrollOffset.x + width,
+                bottom: props.top + scrollOffset.y + height,
+                forRight: window.innerWidth - props.left,
+                forBottom: window.innerHeight - (props.top + scrollOffset.y)
+            };
+            return position;
+        }
+        return {
+            top: 0,
+            left: 0,
+            right: width,
+            bottom: height,
+            forRight: window.innerWidth,
+            forBottom: window.innerHeight
+        };
+    }
+    createArray(start, end) {
+        return new Array(end - start + 1).fill(1).map((_, idx) => start + idx);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: UtilitiesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: UtilitiesService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: UtilitiesService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class NavigationComponent {
+    previousClick = new EventEmitter();
+    nextClick = new EventEmitter();
+    subNavigationClick = new EventEmitter();
+    monthFormat = 'long'; // "narrow", "short", "long";
+    set language(language) {
+        this.formatMonth = new Intl.DateTimeFormat(language, {
+            month: this.monthFormat
+        });
+        this._language = language;
+        if (this.initialised) {
+            this.titles = this.createNavigationItems(this._totalYearMonth);
+        }
+    }
+    get language() {
+        return this._language;
+    }
+    _totalYearMonth;
+    set totalYearMonth(totalYearMonth) {
+        this._totalYearMonth = totalYearMonth;
+        this.titles = this.createNavigationItems(totalYearMonth);
+    }
+    transition;
+    translateX;
+    leftPosition;
+    hideNavigation;
+    animate = false;
+    _language;
+    initialised = false;
+    formatMonth;
+    subNavigationOpen = false;
+    navigationItems;
+    titles;
+    ngOnInit() {
+        this.initialised = true;
+    }
+    onMonthClick(title) {
+        const monthArray = this.createMonthArray(title);
+        const formatMonth = new Intl.DateTimeFormat(this.language, { month: 'short' });
+        this.navigationItems = this.createNavigationItems(monthArray, true, formatMonth);
+        this.toggleSubNavigation();
+    }
+    onYearClick(title) {
+        this.navigationItems = this.createYearArray(title);
+        this.toggleSubNavigation();
+    }
+    toggleSubNavigation() {
+        this.subNavigationOpen = !this.subNavigationOpen;
+    }
+    /**
+     * Sets the title
+     *
+     * @param totalMonthYear
+     * @param monthType
+     * @param formatMonth
+     * @returns NavigationItem[]
+     */
+    createNavigationItems(totalMonthYear, monthType = true, formatMonth = null) {
+        const _formatMonth = formatMonth || this.formatMonth;
+        // TODO: copy the object / remove the reference
+        return totalMonthYear.map(s => {
+            const date = new Date(s.year, s.month);
+            s.navigationTitle = monthType ? _formatMonth.format(date) : s.year;
+            return s;
+        });
+    }
+    createMonthArray(navigationItem) {
+        const months = [], currentYear = navigationItem.year;
+        for (let i = 0; i < 11; i++) {
+            months.push({ month: i, year: currentYear });
+        }
+        return months;
+    }
+    /**
+     * Create an array of navigation items with year as label
+     *
+     * @param navigationItem
+     * @returns NavigationItem[]
+     */
+    createYearArray(navigationItem) {
+        const currentYear = navigationItem.year, years = [{ ...navigationItem, navigationTitle: currentYear }];
+        for (let i = 0; i < 5; i++) {
+            years.unshift({ ...navigationItem, navigationTitle: currentYear - (i + 1) });
+            years.push({ ...navigationItem, navigationTitle: currentYear + (i + 1) });
+        }
+        return years;
+    }
+    onSubNavigationClick(date) {
+        this.subNavigationClick.emit(date);
+    }
+    /**
+     * Emits previous click event
+     */
+    previous() {
+        this.previousClick.emit();
+    }
+    /**
+     * Emits next click event
+     */
+    next() {
+        this.nextClick.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.15", type: NavigationComponent, isStandalone: false, selector: "aa-navigation", inputs: { monthFormat: "monthFormat", language: "language", totalYearMonth: "totalYearMonth", transition: "transition", translateX: "translateX", leftPosition: "leftPosition", hideNavigation: "hideNavigation", animate: "animate" }, outputs: { previousClick: "previousClick", nextClick: "nextClick", subNavigationClick: "subNavigationClick" }, host: { properties: { "class.is-animate": "this.animate" } }, ngImport: i0, template: "<button *ngIf=\"!hideNavigation\" class=\"navigation__button is-previous\" (click)=\"previous()\"></button>\n<div class=\"navigation__title-wrapper\" [ngStyle]=\"{\n  'transform': 'translateX(' + translateX + '%)',\n  'transition': transition,\n  'left.%': leftPosition\n}\">\n    <div *ngFor=\"let title of titles\"\n         class=\"navigation__title\"\n         [ngStyle]=\"{\n          'width.%': (100 / titles.length)\n        }\"\n    ><span (click)=\"onMonthClick(title)\">{{title.navigationTitle}}</span>&nbsp;<span (click)=\"onYearClick(title)\">{{title.year}}</span></div>\n</div>\n<button *ngIf=\"!hideNavigation\" class=\"navigation__button is-next\" (click)=\"next()\"></button>", styles: [":host:before,:host:after{content:\" \";display:table}:host:after{clear:both}:host{display:block;padding:10px;height:52px}:host .navigation__title-wrapper{position:absolute;left:0;width:100%}:host .navigation__title{width:100%;font-weight:700;text-align:center;float:left;line-height:2.2rem}:host .navigation__button{padding:0;background-color:transparent;border:none;outline:none;font-style:inherit;cursor:pointer;position:relative;z-index:1;background-color:#fff;border:1px solid rgb(192.1130434783,191.5565217391,189.8869565217);text-align:center;width:32px;height:32px;border-radius:4px}:host .navigation__button:hover{border-color:#8e8d8a}:host .navigation__button.is-previous{float:left}:host .navigation__button.is-previous:after{content:\"<\"}:host .navigation__button.is-next:before{content:\">\"}:host .navigation__button.is-next{float:right}:host.is-animate .navigation__title-wrapper{width:200%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NavigationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'aa-navigation', standalone: false, template: "<button *ngIf=\"!hideNavigation\" class=\"navigation__button is-previous\" (click)=\"previous()\"></button>\n<div class=\"navigation__title-wrapper\" [ngStyle]=\"{\n  'transform': 'translateX(' + translateX + '%)',\n  'transition': transition,\n  'left.%': leftPosition\n}\">\n    <div *ngFor=\"let title of titles\"\n         class=\"navigation__title\"\n         [ngStyle]=\"{\n          'width.%': (100 / titles.length)\n        }\"\n    ><span (click)=\"onMonthClick(title)\">{{title.navigationTitle}}</span>&nbsp;<span (click)=\"onYearClick(title)\">{{title.year}}</span></div>\n</div>\n<button *ngIf=\"!hideNavigation\" class=\"navigation__button is-next\" (click)=\"next()\"></button>", styles: [":host:before,:host:after{content:\" \";display:table}:host:after{clear:both}:host{display:block;padding:10px;height:52px}:host .navigation__title-wrapper{position:absolute;left:0;width:100%}:host .navigation__title{width:100%;font-weight:700;text-align:center;float:left;line-height:2.2rem}:host .navigation__button{padding:0;background-color:transparent;border:none;outline:none;font-style:inherit;cursor:pointer;position:relative;z-index:1;background-color:#fff;border:1px solid rgb(192.1130434783,191.5565217391,189.8869565217);text-align:center;width:32px;height:32px;border-radius:4px}:host .navigation__button:hover{border-color:#8e8d8a}:host .navigation__button.is-previous{float:left}:host .navigation__button.is-previous:after{content:\"<\"}:host .navigation__button.is-next:before{content:\">\"}:host .navigation__button.is-next{float:right}:host.is-animate .navigation__title-wrapper{width:200%}\n"] }]
+        }], propDecorators: { previousClick: [{
+                type: Output
+            }], nextClick: [{
+                type: Output
+            }], subNavigationClick: [{
+                type: Output
+            }], monthFormat: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], totalYearMonth: [{
+                type: Input
+            }], transition: [{
+                type: Input
+            }], translateX: [{
+                type: Input
+            }], leftPosition: [{
+                type: Input
+            }], hideNavigation: [{
+                type: Input
+            }], animate: [{
+                type: HostBinding,
+                args: ['class.is-animate']
+            }, {
+                type: Input
+            }] } });
+
+class DatepickerComponent {
+    utils;
+    element;
+    /* ==============================================
+     * Internal Properties
+     * ============================================== */
+    date = new Date();
+    year = null;
+    month = null;
+    today = this.date;
+    months = null;
+    weekdays = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
+    totalYearMonth;
+    selectedRange = 'startDate';
+    startDate = null;
+    endDate = null;
+    initialised = false;
+    weekStartArray = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
+    /* ==============================================
+     * Initial Options
+     * ============================================== */
+    _options = DefaultOptions;
+    set options(options) {
+        if (options === undefined || !options) {
+            return;
+        }
+        this._options = { ...this._options, ...options };
+        if (options.currentDate !== undefined) {
+            this.date = this.options.currentDate;
+        }
+        if (this.initialised) {
+            this.goToDate();
+        }
+    }
+    get options() {
+        return this._options;
+    }
+    /* ==============================================
+     * External Properties
+     * ============================================== */
+    /**
+     * Set the the language manualy. A string with a BCP 47 language tag
+     * @example nl-NL
+     */
+    _language = navigator.language;
+    set language(value) {
+        if (!value || value === undefined || !DatepickerService.isValidIsoCode(value)) {
+            return;
+        }
+        this._language = value;
+        this.renderWeekdays();
+    }
+    get language() {
+        return this._language;
+    }
+    /**
+     * Minimal Date: If set the dates before it will be disabled
+     */
+    _minDate = null;
+    set minDate(value) {
+        if (value === undefined || value === this._minDate) {
+            return;
+        }
+        this._minDate = new Date(value);
+        this.goToDate();
+    }
+    get minDate() {
+        return this._minDate;
+    }
+    /**
+     * Maximal Date: If set the dates after it will be disabled
+     */
+    _maxDate = null;
+    set maxDate(value) {
+        if (value === undefined || value === this._minDate) {
+            return;
+        }
+        this._maxDate = new Date(value);
+        this.goToDate();
+    }
+    get maxDate() {
+        return this._maxDate;
+    }
+    /**
+     * Selected Dates: handles the selected dates array. Can be set both internally and externally
+     */
+    _selectedDates = [];
+    selectedDatesChange = new EventEmitter();
+    set selectedDates(value) {
+        const _value = Array.isArray(value) ? value : [value];
+        if (!DatepickerService.isValidDate(_value)) {
+            return;
+        }
+        this._selectedDates = _value;
+        if (this.options.range) {
+            this.resetRange();
+        }
+        this.goToDate();
+        this.selectedDatesChange.emit(this._selectedDates);
+    }
+    get selectedDates() {
+        return this._selectedDates;
+    }
+    /* ==============================================
+     * Bindings and Children
+     * ============================================== */
+    calendarContainer;
+    calendarTopContainer;
+    theme = '';
+    isOpen = true;
+    asDirective = false;
+    animate = false;
+    topPosition = null;
+    leftPosition = null;
+    bottomPosition = null;
+    rightPosition = null;
+    constructor(utils, element) {
+        this.utils = utils;
+        this.element = element;
+    }
+    ngOnInit() {
+        this.initialised = true;
+        if (!this.month && !this.year) {
+            this.goToDate(this.options.currentDate);
+        }
+    }
+    /**
+     * Creates a day array
+     *
+     * @param year
+     * @param month
+     * @param isRestDays
+     */
+    createDayArray(year, month, isRestDays) {
+        const days = [];
+        const daysInMonth = DatepickerService.getDaysInMonth(year, month);
+        for (let index = 0; index < daysInMonth; index++) {
+            const dayNumber = index + 1;
+            const date = new Date(year, month, dayNumber);
+            const day = {
+                date,
+                dayNumber,
+                isFirst: dayNumber === 1,
+                isLast: dayNumber === daysInMonth,
+                isToday: this.isToday(date),
+                isSelected: this.isSelected(date),
+                isRest: isRestDays,
+                isHidden: isRestDays && this.options.hideRestDays,
+                isDisabled: ((this.minDate || this.maxDate) && this.isDisabled(date)) ||
+                    (isRestDays && this.options.disableRestDays),
+                isInRange: this.isInRange(date) ||
+                    ((this.isStartDate(date) || this.isEndDate(date)) && this.startDate && this.endDate),
+                isStartDate: this.isStartDate(date),
+                isEndDate: this.isEndDate(date)
+            };
+            days.push(day);
+        }
+        return days;
+    }
+    /**
+     * Get the days from the next month
+     *
+     * @param year
+     * @param month
+     */
+    getNextRestDays(year, month) {
+        const monthLength = DatepickerService.getDaysInMonth(year, month);
+        const weekStartIndex = this.weekStartArray.indexOf(this.options.weekStart);
+        const endOfTheMonth = new Date(year, month, monthLength).getDay() - weekStartIndex;
+        const _endOfTheMonth = endOfTheMonth < 0 ? 7 - Math.abs(endOfTheMonth) : endOfTheMonth;
+        const nextDays = this.createDayArray(DatepickerService.getYearOfNextMonth(year, month), DatepickerService.getNextMonth(month), true).slice(0, 7 - _endOfTheMonth);
+        return nextDays.length > 6 ? [] : nextDays;
+    }
+    /**
+     * Get the days of the previous month
+     *
+     * @param year
+     * @param month
+     */
+    getPreviousRestDays(year, month) {
+        const startOfTheMonth = new Date(year, month, 0).getDay();
+        const previousDays = this.createDayArray(DatepickerService.getYearOfPreviousMonth(year, month), DatepickerService.getPreviousMonth(month), true);
+        const weekStartIndex = this.weekStartArray.indexOf(this.options.weekStart);
+        const _weekStartIndex = weekStartIndex === 0 ? 0 : (7 - weekStartIndex);
+        let sliceIndex = previousDays.length - startOfTheMonth - _weekStartIndex;
+        sliceIndex = previousDays.length - sliceIndex >= 7 ? sliceIndex + 7 : sliceIndex;
+        return previousDays.slice(sliceIndex, previousDays.length);
+    }
+    /**
+     * Merge all the day arrays together
+     *
+     * @param year
+     * @param month
+     */
+    getMergedDayArrays(year, month) {
+        return [
+            ...this.getPreviousRestDays(year, month),
+            ...this.createDayArray(year, month),
+            ...this.getNextRestDays(year, month)
+        ];
+    }
+    /**
+     * Create the calendar array from the week arrays
+     *
+     * @param year
+     * @param month
+     */
+    createCalendarArray(year, month) {
+        const dayArray = this.getMergedDayArrays(year, month);
+        const weeks = DatepickerService.createWeekArray(dayArray);
+        return [{ weeks: weeks }];
+    }
+    /**
+     * Update value is being triggered
+     *
+     * @param date
+     */
+    updateValue(date) {
+        if (this.options.range) {
+            this.selectRange(date);
+        }
+        else if (!this.isSelected(date)) {
+            if (this.options.selectMultiple) {
+                this.selectDate(date);
+            }
+            else {
+                this.toggleDate(date);
+            }
+            if (this.options.closeOnSelect) {
+                this.close(true);
+            }
+        }
+        else {
+            this.deselectDate(date);
+            if (this.options.closeOnSelect) {
+                this.close(true);
+            }
+        }
+        this.months = this.createCalendarArray(this.year, this.month);
+    }
+    /**
+     * Select range method - contains the logic to select the start- and endrange
+     *
+     * @param date
+     */
+    selectRange(date) {
+        if (this.isSelected(date)) {
+            this.deselectDate(date);
+        }
+        else if (DatepickerService.isEarlier(date, this.startDate)) {
+            if (this.startDate) {
+                this.toggleDate(date, this.startDate, true);
+            }
+            else {
+                this.selectDate(date);
+            }
+            this.startDate = date;
+            this.selectEndDate();
+        }
+        else if (this.endDate && DatepickerService.isLater(date, this.endDate)) {
+            this.toggleDate(date, this.endDate);
+            this.endDate = date;
+            this.selectStartDate();
+        }
+        else if (this.selectedRange === 'startDate') {
+            if (this.startDate) {
+                this.toggleDate(date, this.startDate, true);
+            }
+            else {
+                this.selectDate(date);
+            }
+            this.startDate = date;
+            this.selectEndDate();
+        }
+        else if (this.selectedRange === 'endDate') {
+            if (this.endDate) {
+                this.toggleDate(date, this.endDate);
+            }
+            else {
+                this.selectDate(date);
+            }
+            this.endDate = date;
+            this.selectStartDate();
+            if (this.options.closeOnSelect) {
+                this.close(true);
+            }
+        }
+    }
+    /**
+     * Reset the range if the selected dates change externally
+     */
+    resetRange() {
+        if (this._selectedDates.length === 1) {
+            this.startDate = this._selectedDates[0];
+            this.endDate = null;
+        }
+        else if (this._selectedDates.length === 0) {
+            this.startDate = null;
+            this.endDate = null;
+        }
+    }
+    /**
+     * Toggle a date. One in, on out.
+     *
+     * @param date - Date to be toggled on
+     * @param toggleDate - Optional set specific date to toggle off
+     * @param unshift - Optional set to unshift in the selectedDates array. is passed to selectDate method
+     */
+    toggleDate(date, toggleDate, unshift) {
+        if (!toggleDate) {
+            this.selectedDates = [date];
+        }
+        else if (unshift) {
+            this._selectedDates.unshift(date);
+            this.selectedDates = this._selectedDates.filter(selectedDate => {
+                return selectedDate.toDateString() !== toggleDate.toDateString();
+            });
+        }
+        else {
+            this._selectedDates.push(date);
+            this.selectedDates = this._selectedDates.filter(selectedDate => {
+                return selectedDate.toDateString() !== toggleDate.toDateString();
+            });
+        }
+    }
+    /**
+     * Select a date
+     *
+     * @param date
+     * @param unshift - Optional set to unshift instead of push the date in the selectedDates array
+     */
+    selectDate(date, unshift) {
+        const selectedDates = [...this.selectedDates];
+        if (unshift) {
+            selectedDates.unshift(date);
+        }
+        else {
+            selectedDates.push(date);
+        }
+        this.selectedDates = selectedDates;
+    }
+    /**
+     * Deselect a date
+     *
+     * @param date
+     */
+    deselectDate(date) {
+        this.selectedDates = this._selectedDates.filter(selectedDate => {
+            return selectedDate.toDateString() !== date.toDateString();
+        });
+    }
+    /**
+     * Go to the next month
+     */
+    goToNextMonth() {
+        this.year = DatepickerService.getYearOfNextMonth(this.year, this.month);
+        this.month = DatepickerService.getNextMonth(this.month);
+        this.totalYearMonth = [{ month: this.month, year: this.year }];
+        this.months = this.createCalendarArray(this.year, this.month);
+    }
+    /**
+     * Go to the previous month
+     */
+    goToPreviousMonth() {
+        this.year = DatepickerService.getYearOfPreviousMonth(this.year, this.month);
+        this.month = DatepickerService.getPreviousMonth(this.month);
+        this.totalYearMonth = [{ month: this.month, year: this.year }];
+        this.months = this.createCalendarArray(this.year, this.month);
+    }
+    /**
+     * Go to a specific month. Is also used to rerender the datepicker
+     *
+     * @param date - default is the current date.
+     */
+    goToDate(date = this.date) {
+        this.month = date.getMonth();
+        this.year = date.getFullYear();
+        this.totalYearMonth = [{ month: this.month, year: this.year }];
+        this.months = this.createCalendarArray(this.year, this.month);
+    }
+    /**
+     * Render weekdays when options or language changes
+     */
+    renderWeekdays() {
+        this.weekdays = DatepickerService.getWeekDays(this._language, this.options.weekdayFormat, this.options.weekStart);
+    }
+    /**
+     * Set the open state to true
+     */
+    open() {
+        if (this.isOpen) {
+            return;
+        }
+        this.isOpen = true;
+    }
+    /**
+     * Close the datepicker
+     *
+     * @param useTimeout - optional timeout
+     */
+    close(useTimeout) {
+        if (!this.isOpen) {
+            return;
+        }
+        const timeout = useTimeout ? this.options.timeoutBeforeClosing : 0;
+        setTimeout(() => {
+            this.isOpen = false;
+        }, timeout);
+    }
+    /**
+     * Select the start date - used for range functionality
+     */
+    selectStartDate() {
+        this.selectedRange = 'startDate';
+    }
+    /**
+     * Select the end date - used for range functionality
+     */
+    selectEndDate() {
+        this.selectedRange = 'endDate';
+    }
+    // TODO: maybe output the startDate and Endate or just of internal use
+    /**
+     * Check if date is the start date
+     */
+    isStartDate(date) {
+        return this.startDate && date.toDateString() === this.startDate.toDateString();
+    }
+    /**
+     * Check if date is the end date
+     */
+    isEndDate(date) {
+        return this.endDate && date.toDateString() === this.endDate.toDateString();
+    }
+    /**
+     * Check if date is today
+     */
+    isToday(date) {
+        return date.toDateString() === this.today.toDateString();
+    }
+    /**
+     * Check if date is selected
+     */
+    isSelected(dateToCheck) {
+        return this._selectedDates.map(date => date.toDateString()).indexOf(dateToCheck.toDateString()) !== -1;
+    }
+    /**
+     * Check if date is disabled
+     */
+    isDisabled(date) {
+        if (!this.minDate) {
+            return !(date < this.maxDate);
+        }
+        if (!this.maxDate) {
+            return !(date > this.minDate);
+        }
+        return !(date < this.maxDate && date > this.minDate);
+    }
+    /**
+     * Check if date is in range
+     */
+    isInRange(date) {
+        return this.startDate && this.endDate && this.startDate < date && date < this.endDate;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: DatepickerComponent, deps: [{ token: UtilitiesService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.15", type: DatepickerComponent, isStandalone: false, selector: "aa-datepicker", inputs: { options: "options", language: "language", minDate: "minDate", maxDate: "maxDate", selectedDates: "selectedDates", theme: "theme", isOpen: "isOpen" }, outputs: { selectedDatesChange: "selectedDatesChange" }, host: { properties: { "class": "this.theme", "class.is-open": "this.isOpen", "class.is-directive": "this.asDirective", "class.is-animate": "this.animate", "style.top.px": "this.topPosition", "style.left.px": "this.leftPosition", "style.bottom.px": "this.bottomPosition", "style.right.px": "this.rightPosition" } }, viewQueries: [{ propertyName: "calendarContainer", first: true, predicate: ["calendarContainer"], descendants: true, static: true }, { propertyName: "calendarTopContainer", first: true, predicate: ["calendarTopContainer"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"datepicker__wrapper\">\n\t<div>\n\t\t<aa-navigation\n\t\t\t\t[hideNavigation]=\"options.hideNavigation\"\n                (previousClick)=\"goToPreviousMonth()\"\n\t\t\t\t(nextClick)=\"goToNextMonth()\"\n\t\t\t\t[language]=\"language\"\n\t\t\t\t[totalYearMonth]=\"totalYearMonth\"></aa-navigation>\n\t\t<div class=\"datepicker__weekdays-wrapper\">\n\t\t\t<div class=\"datepicker__weekdays-container\">\n\t\t\t\t<table class=\"datepicker__weekdays\">\n\t\t\t\t\t<thead>\n\t\t\t\t\t<td class=\"datepicker__weekday\" *ngFor=\"let weekday of weekdays; index as i\">{{weekday}}</td>\n\t\t\t\t\t</thead>\n\t\t\t\t</table>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div class=\"datepicker__calendar-wrapper\">\n\t\t<div *ngFor=\"let month of months;\" class=\"datepicker__calendar-container\">\n\t\t\t<table class=\"datepicker__calendar\">\n\t\t\t\t<tbody>\n\t\t\t\t<tr *ngFor=\"let week of month.weeks; index as i\">\n\t\t\t\t\t<td class=\"datepicker__day\" *ngFor=\"let day of week.days; index as i\" [ngClass]=\"{\n\t\t\t'is-first': day.isFirst,\n\t\t\t'is-last': day.isLast,\n\t\t\t'is-hidden': day.isHidden,\n\t\t\t'is-disabled': day.isDisabled,\n\t\t\t'is-today': day.isToday,\n\t\t\t'is-selected': day.isSelected,\n\t\t\t'is-in-range': day.isInRange,\n\t\t\t'is-start-date': day.isStartDate,\n\t\t\t'is-end-date': day.isEndDate,\n\t\t\t'is-rest': day.isRest\n\t\t\t}\">\n\t\t\t\t\t\t<button class=\"datepicker__button\" [disabled]=\"day.isDisabled || day.isHidden\"\n\t\t\t\t\t\t\t\t(click)=\"updateValue(day.date)\">{{day.dayNumber}}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t\t</tbody>\n\t\t\t</table>\n\t\t</div>\n\t</div>\n\t<ng-content></ng-content>\n</div>", styles: [":host{font-family:Arial,Helvetica,sans-serif;border:1px solid rgb(217.1695652174,216.8347826087,215.8304347826);width:300px;position:relative;display:inline-block;z-index:2;border-radius:4px;box-shadow:0 1px 5px #00000026;overflow:hidden;background-color:#fff;box-sizing:border-box;visibility:hidden}:host *{box-sizing:border-box}:host .datepicker__calendar-container{padding:0 10px 10px}:host .datepicker__footer{position:relative;z-index:1}:host table{width:100%;table-layout:fixed;border-spacing:0;border-collapse:collapse}:host td{padding:0}:host .datepicker__weekdays-wrapper:before,:host .datepicker__weekdays-wrapper:after{content:\" \";display:table}:host .datepicker__weekdays-wrapper:after{clear:both}:host .datepicker__weekdays-container{padding:10px 10px 0;float:left}:host .datepicker__weekdays{table-layout:fixed;width:100%}:host .datepicker__weekday{color:gray;font-size:12px;height:20px;text-align:center}:host .datepicker__day{position:relative;text-align:center;height:40px;width:auto;border:1px solid rgb(217.1695652174,216.8347826087,215.8304347826)}:host .datepicker__day.is-rest{border:none}:host .datepicker__button{padding:0;background-color:transparent;border:none;outline:none;font-style:inherit;cursor:pointer;color:#8e8d8a;width:100%;height:100%}:host .datepicker__button:hover{border:1px solid transparent;background-color:#f2f2f2;color:#8e8d8a}:host .is-hidden{opacity:0;display:table-cell}:host .is-rest{border:none}:host .is-rest .datepicker__button{color:#c0c0be}:host .is-today .datepicker__button{background-color:#eae7dc}:host .is-in-range .datepicker__button{background-color:#e98074;color:#fff}:host .is-in-range .datepicker__button:hover{background-color:#e66c5e}:host .is-selected .datepicker__button{background-color:#e85a4f;color:#fff;font-weight:700}:host .is-selected .datepicker__button:hover{background-color:#e23022}:host .is-start-date .datepicker__button{background-color:#e85a4f;color:#fff}:host .is-end-date .datepicker__button{background-color:#e85a4f;color:#fff}:host .is-disabled .datepicker__button{color:#d9d9d8;cursor:default}:host .is-disabled .datepicker__button:hover{background-color:transparent}:host.is-directive{visibility:hidden;position:absolute}:host.is-open{visibility:visible}:host.is-animate{transition:height .2s ease-in;width:300px}:host.is-animate .datepicker__main{transition:height .2s ease-in}:host.is-animate .datepicker__calendar-wrapper{position:absolute;width:200%;left:0}:host.is-animate .datepicker__calendar{float:left;width:100%}:host.is-animate .datepicker__calendar-container{float:left}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: NavigationComponent, selector: "aa-navigation", inputs: ["monthFormat", "language", "totalYearMonth", "transition", "translateX", "leftPosition", "hideNavigation", "animate"], outputs: ["previousClick", "nextClick", "subNavigationClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: DatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'aa-datepicker', standalone: false, template: "<div class=\"datepicker__wrapper\">\n\t<div>\n\t\t<aa-navigation\n\t\t\t\t[hideNavigation]=\"options.hideNavigation\"\n                (previousClick)=\"goToPreviousMonth()\"\n\t\t\t\t(nextClick)=\"goToNextMonth()\"\n\t\t\t\t[language]=\"language\"\n\t\t\t\t[totalYearMonth]=\"totalYearMonth\"></aa-navigation>\n\t\t<div class=\"datepicker__weekdays-wrapper\">\n\t\t\t<div class=\"datepicker__weekdays-container\">\n\t\t\t\t<table class=\"datepicker__weekdays\">\n\t\t\t\t\t<thead>\n\t\t\t\t\t<td class=\"datepicker__weekday\" *ngFor=\"let weekday of weekdays; index as i\">{{weekday}}</td>\n\t\t\t\t\t</thead>\n\t\t\t\t</table>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div class=\"datepicker__calendar-wrapper\">\n\t\t<div *ngFor=\"let month of months;\" class=\"datepicker__calendar-container\">\n\t\t\t<table class=\"datepicker__calendar\">\n\t\t\t\t<tbody>\n\t\t\t\t<tr *ngFor=\"let week of month.weeks; index as i\">\n\t\t\t\t\t<td class=\"datepicker__day\" *ngFor=\"let day of week.days; index as i\" [ngClass]=\"{\n\t\t\t'is-first': day.isFirst,\n\t\t\t'is-last': day.isLast,\n\t\t\t'is-hidden': day.isHidden,\n\t\t\t'is-disabled': day.isDisabled,\n\t\t\t'is-today': day.isToday,\n\t\t\t'is-selected': day.isSelected,\n\t\t\t'is-in-range': day.isInRange,\n\t\t\t'is-start-date': day.isStartDate,\n\t\t\t'is-end-date': day.isEndDate,\n\t\t\t'is-rest': day.isRest\n\t\t\t}\">\n\t\t\t\t\t\t<button class=\"datepicker__button\" [disabled]=\"day.isDisabled || day.isHidden\"\n\t\t\t\t\t\t\t\t(click)=\"updateValue(day.date)\">{{day.dayNumber}}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t\t</tbody>\n\t\t\t</table>\n\t\t</div>\n\t</div>\n\t<ng-content></ng-content>\n</div>", styles: [":host{font-family:Arial,Helvetica,sans-serif;border:1px solid rgb(217.1695652174,216.8347826087,215.8304347826);width:300px;position:relative;display:inline-block;z-index:2;border-radius:4px;box-shadow:0 1px 5px #00000026;overflow:hidden;background-color:#fff;box-sizing:border-box;visibility:hidden}:host *{box-sizing:border-box}:host .datepicker__calendar-container{padding:0 10px 10px}:host .datepicker__footer{position:relative;z-index:1}:host table{width:100%;table-layout:fixed;border-spacing:0;border-collapse:collapse}:host td{padding:0}:host .datepicker__weekdays-wrapper:before,:host .datepicker__weekdays-wrapper:after{content:\" \";display:table}:host .datepicker__weekdays-wrapper:after{clear:both}:host .datepicker__weekdays-container{padding:10px 10px 0;float:left}:host .datepicker__weekdays{table-layout:fixed;width:100%}:host .datepicker__weekday{color:gray;font-size:12px;height:20px;text-align:center}:host .datepicker__day{position:relative;text-align:center;height:40px;width:auto;border:1px solid rgb(217.1695652174,216.8347826087,215.8304347826)}:host .datepicker__day.is-rest{border:none}:host .datepicker__button{padding:0;background-color:transparent;border:none;outline:none;font-style:inherit;cursor:pointer;color:#8e8d8a;width:100%;height:100%}:host .datepicker__button:hover{border:1px solid transparent;background-color:#f2f2f2;color:#8e8d8a}:host .is-hidden{opacity:0;display:table-cell}:host .is-rest{border:none}:host .is-rest .datepicker__button{color:#c0c0be}:host .is-today .datepicker__button{background-color:#eae7dc}:host .is-in-range .datepicker__button{background-color:#e98074;color:#fff}:host .is-in-range .datepicker__button:hover{background-color:#e66c5e}:host .is-selected .datepicker__button{background-color:#e85a4f;color:#fff;font-weight:700}:host .is-selected .datepicker__button:hover{background-color:#e23022}:host .is-start-date .datepicker__button{background-color:#e85a4f;color:#fff}:host .is-end-date .datepicker__button{background-color:#e85a4f;color:#fff}:host .is-disabled .datepicker__button{color:#d9d9d8;cursor:default}:host .is-disabled .datepicker__button:hover{background-color:transparent}:host.is-directive{visibility:hidden;position:absolute}:host.is-open{visibility:visible}:host.is-animate{transition:height .2s ease-in;width:300px}:host.is-animate .datepicker__main{transition:height .2s ease-in}:host.is-animate .datepicker__calendar-wrapper{position:absolute;width:200%;left:0}:host.is-animate .datepicker__calendar{float:left;width:100%}:host.is-animate .datepicker__calendar-container{float:left}\n"] }]
+        }], ctorParameters: () => [{ type: UtilitiesService }, { type: i0.ElementRef }], propDecorators: { options: [{
+                type: Input,
+                args: ['options']
+            }], language: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], selectedDatesChange: [{
+                type: Output
+            }], selectedDates: [{
+                type: Input
+            }], calendarContainer: [{
+                type: ViewChild,
+                args: ['calendarContainer', { static: true }]
+            }], calendarTopContainer: [{
+                type: ViewChild,
+                args: ['calendarTopContainer', { static: true }]
+            }], theme: [{
+                type: HostBinding,
+                args: ['class']
+            }, {
+                type: Input
+            }], isOpen: [{
+                type: HostBinding,
+                args: ['class.is-open']
+            }, {
+                type: Input
+            }], asDirective: [{
+                type: HostBinding,
+                args: ['class.is-directive']
+            }], animate: [{
+                type: HostBinding,
+                args: ['class.is-animate']
+            }], topPosition: [{
+                type: HostBinding,
+                args: ['style.top.px']
+            }], leftPosition: [{
+                type: HostBinding,
+                args: ['style.left.px']
+            }], bottomPosition: [{
+                type: HostBinding,
+                args: ['style.bottom.px']
+            }], rightPosition: [{
+                type: HostBinding,
+                args: ['style.right.px']
+            }] } });
+
+class AnimatepickerComponent extends DatepickerComponent {
+    elementRef;
+    utilities;
+    /* ==============================================
+     * Internal Properties
+     * ============================================== */
+    animate = true;
+    initialWidth;
+    calendarWidth;
+    isAnimating = false;
+    leftInnerPosition = 0;
+    transition;
+    translateX;
+    datepickerPosition;
+    initialised = false;
+    calendarHeight;
+    _currentYearMonth = null;
+    set currentYearMonth(yearMonths) {
+        this._currentYearMonth = yearMonths;
+        this.navigate.emit(yearMonths);
+    }
+    get currentYearMonth() {
+        return this._currentYearMonth;
+    }
+    /* ==============================================
+     * External Properties
+     * ============================================== */
+    /**
+     * Number of months: the number of months displayed
+     */
+    _numberOfMonths = new Array(1);
+    set numberOfMonths(value) {
+        if (value === undefined || value === this._numberOfMonths.length) {
+            return;
+        }
+        this._numberOfMonths = new Array(value);
+        this.setDatePickerDimension();
+        this.goToDate(this.date);
+    }
+    get numberOfMonths() {
+        return this._numberOfMonths;
+    }
+    /* ==============================================
+     * Outputs
+     * ============================================== */
+    navigate = new EventEmitter();
+    /* ==============================================
+     * Bindings and Children
+     * ============================================== */
+    calendarContainer;
+    calendarTopContainer;
+    footer;
+    datepickerWidth;
+    datepickerHeight;
+    constructor(elementRef, utilities) {
+        super(utilities, elementRef);
+        this.elementRef = elementRef;
+        this.utilities = utilities;
+    }
+    ngOnInit() {
+        // Get the computed width from the calendar. Set the initial width
+        const computedWidth = window
+            .getComputedStyle(this.elementRef.nativeElement, null)
+            .getPropertyValue('width');
+        this.initialWidth = parseInt(computedWidth, 10);
+        this.initialised = true;
+        // Set the current year and month object
+        if (!this.month && !this.year) {
+            this.goToDate(this.options.currentDate);
+        }
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.setDatePickerDimension();
+            this.setDatepickerHeight(true);
+        });
+    }
+    /**
+     * Set the height and the width properties
+     */
+    setDatePickerDimension() {
+        this.datepickerHeight =
+            this.calendarContainer.nativeElement.offsetHeight +
+                this.calendarTopContainer.nativeElement.offsetHeight +
+                this.footer.nativeElement.offsetHeight;
+        this.calendarHeight = this.calendarContainer.nativeElement.offsetHeight;
+        this.datepickerWidth = this.initialWidth * this._numberOfMonths.length;
+    }
+    /**
+     * Go to a specific month
+     *
+     * @param date - optional
+     */
+    goToDate(date) {
+        if (date) {
+            this.currentYearMonth = this.getNextYearMonthArray(date.getFullYear(), date.getMonth());
+        }
+        this.calendarWidth = 50 / this._numberOfMonths.length;
+        this.months = this.getNextMonthArray(this.currentYearMonth, true);
+        this.resetStyle();
+    }
+    /**
+     * Create an array of the next year and months
+     *
+     * @param year
+     * @param month
+     */
+    getNextYearMonthArray(year, month) {
+        const array = [];
+        for (let index = 0; index < this._numberOfMonths.length; index++) {
+            array.push({ year: year, month: month });
+            year = DatepickerService.getYearOfNextMonth(year, month);
+            month = DatepickerService.getNextMonth(month);
+        }
+        return array;
+    }
+    /**
+     * Create an array of the previous year and months
+     *
+     * @param year
+     * @param month
+     */
+    getPreviousYearMonthArray(year, month) {
+        const array = [];
+        for (let index = 0; index < this._numberOfMonths.length; index++) {
+            array.unshift({ year: year, month: month });
+            year = DatepickerService.getYearOfPreviousMonth(year, month);
+            month = DatepickerService.getPreviousMonth(month);
+        }
+        return array;
+    }
+    /**
+     * Set the datepicker height, used when animating
+     *
+     * @param directionRight - Set optional when sliding to the right
+     */
+    setDatepickerHeight(directionRight) {
+        let indexArray;
+        // TODO: Seperate this logic for readability purpose
+        if (this._numberOfMonths.length > 1) {
+            const start = directionRight ? 0 : this._numberOfMonths.length;
+            const end = directionRight
+                ? this._numberOfMonths.length - 1
+                : this._numberOfMonths.length + this._numberOfMonths.length - 1;
+            indexArray = this.utilities.createArray(start, end);
+        }
+        else {
+            indexArray = directionRight ? [0] : [1];
+        }
+        const that = this;
+        setTimeout(() => {
+            const calendarArray = that.elementRef.nativeElement.querySelectorAll('.datepicker__calendar-container');
+            let offsetHeight = 0;
+            indexArray.forEach(el => {
+                if (calendarArray[el].offsetHeight > offsetHeight) {
+                    offsetHeight = calendarArray[el].offsetHeight;
+                }
+            });
+            // TODO: Merge with setHeight function.
+            that.datepickerHeight =
+                offsetHeight + that.calendarTopContainer.nativeElement.offsetHeight + that.footer.nativeElement.offsetHeight;
+            that.calendarHeight = offsetHeight;
+        });
+    }
+    /**
+     * Get next month array, gets multiple months.
+     * Used when the options animate is set or multiple months are visable
+     *
+     * @return Month[]
+     */
+    getNextMonthArray(currentYearMonth, keepDate = false, nextMonthsYearMonthArray) {
+        // Get the last index, used for selecting the right year month object
+        const lastIndex = this._numberOfMonths.length - 1;
+        // Get next year and month in an Object
+        const nextMonths = nextMonthsYearMonthArray ||
+            this.getNextYearMonthArray(DatepickerService.getYearOfNextMonth(currentYearMonth[lastIndex].year, currentYearMonth[lastIndex].month), DatepickerService.getNextMonth(currentYearMonth[lastIndex].month));
+        // Concatenates the two objects to create a total year and month object
+        this.totalYearMonth = currentYearMonth.concat(nextMonths);
+        // Create the calendar array using the total year and month Object
+        const monthArray = [];
+        this.totalYearMonth.forEach(e => monthArray.push(this.createCalendarArray(e.year, e.month)));
+        // Set the new current year and month object.
+        if (!keepDate) {
+            this.currentYearMonth = nextMonths;
+        }
+        return [].concat.apply([], monthArray);
+    }
+    /**
+     * Gets an array of previous months.
+     * Used for animation and when more months are displayed
+     *
+     * @param currentYearMonth
+     * @param keepDate
+     */
+    getPreviousMonthArray(currentYearMonth, keepDate = false) {
+        // Get previous year and month in an Object
+        const previousMonths = this.getPreviousYearMonthArray(DatepickerService.getYearOfPreviousMonth(currentYearMonth[0].year, currentYearMonth[0].month), DatepickerService.getPreviousMonth(currentYearMonth[0].month));
+        // Concatenates the two objects to create a total year and month object
+        this.totalYearMonth = previousMonths.concat(currentYearMonth);
+        // Create the calendar array using the total year and month Object
+        const monthArray = [];
+        this.totalYearMonth.forEach(e => {
+            monthArray.push(this.createCalendarArray(e['year'], e['month']));
+        });
+        // Set the new current year and month object.
+        if (!keepDate) {
+            this.currentYearMonth = previousMonths;
+        }
+        return [].concat.apply([], monthArray);
+    }
+    /**
+     * Update value is being triggered
+     *
+     * @param date
+     */
+    updateValue(date) {
+        if (this.options.range) {
+            this.selectRange(date);
+        }
+        else if (!this.isSelected(date)) {
+            if (this.options.selectMultiple) {
+                this.selectDate(date);
+            }
+            else {
+                this.toggleDate(date);
+            }
+            if (this.options.closeOnSelect) {
+                this.close(true);
+            }
+        }
+        else {
+            this.deselectDate(date);
+            if (this.options.closeOnSelect) {
+                this.close(true);
+            }
+        }
+        this.months = this.getNextMonthArray(this.currentYearMonth, true);
+        this.resetStyle();
+    }
+    /**
+     * Go to the next month
+     */
+    goToNextMonth() {
+        if (this.isAnimating) {
+            return;
+        }
+        this.months = this.getNextMonthArray(this.currentYearMonth);
+        this.resetStyle();
+        this.setDatepickerHeight();
+        this.slideLeft();
+    }
+    /**
+     * Go to the previous month
+     */
+    goToPreviousMonth() {
+        if (this.isAnimating) {
+            return;
+        }
+        this.months = this.getPreviousMonthArray(this.currentYearMonth);
+        this.resetStyle(true);
+        this.setDatepickerHeight(true);
+        this.slideRight();
+    }
+    /**
+     * Go to a specific month
+     * TODO: WIP Check if date is in current range, or if it is later or earlier
+     */
+    goToMonth(date) {
+        const nextMonths = this.getNextYearMonthArray(date.getFullYear(), date.getMonth());
+        this.months = this.getNextMonthArray(this.totalYearMonth, false, nextMonths);
+        this.resetStyle();
+        this.setDatepickerHeight();
+        this.slideRight();
+    }
+    /**
+     * Slide to the right
+     */
+    slideRight() {
+        this.setIsAnimating();
+        setTimeout(() => {
+            this.transition =
+                'transform ' + this.options.animationSpeed + 'ms ' + this.options.easing;
+            this.translateX = 50;
+        });
+    }
+    /**
+     * Slide to the left (criss cross)
+     */
+    slideLeft() {
+        this.setIsAnimating();
+        setTimeout(() => {
+            this.transition =
+                'transform ' + this.options.animationSpeed + 'ms ' + this.options.easing;
+            this.translateX = -50;
+        });
+    }
+    /**
+     * Set animating state
+     */
+    setIsAnimating() {
+        this.isAnimating = true;
+        setTimeout(() => {
+            this.isAnimating = false;
+        }, this.options.animationSpeed);
+    }
+    /**
+     * Reset Style
+     *
+     * @param resetForPrevious - Optional
+     */
+    resetStyle(resetForPrevious) {
+        this.transition = 'transform 0ms ease-in';
+        this.translateX = 0;
+        this.leftInnerPosition = resetForPrevious ? -100 : 0;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AnimatepickerComponent, deps: [{ token: i0.ElementRef }, { token: UtilitiesService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.15", type: AnimatepickerComponent, isStandalone: false, selector: "aa-animatepicker", inputs: { numberOfMonths: "numberOfMonths" }, outputs: { navigate: "navigate" }, host: { properties: { "style.width.px": "this.datepickerWidth", "style.height.px": "this.datepickerHeight" } }, viewQueries: [{ propertyName: "calendarContainer", first: true, predicate: ["calendarContainer"], descendants: true, static: true }, { propertyName: "calendarTopContainer", first: true, predicate: ["calendarTopContainer"], descendants: true, static: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"datepicker__wrapper\" [ngStyle]=\"datepickerPosition\">\n\t<div #calendarTopContainer>\n\t\t<div class=\"datepicker__header\" #header>\n\t\t\t<ng-content select=\"header\"></ng-content>\n\t\t</div>\n\t\t<aa-navigation\n\t\t\t\t(previousClick)=\"goToPreviousMonth()\"\n\t\t\t\t(nextClick)=\"goToNextMonth()\"\n\t\t\t\t(subNavigationClick)=\"goToDate($event)\"\n\t\t\t\t[language]=\"language\"\n\t\t\t\t[animate]=\"animate\"\n\t\t\t\t[translateX]=\"translateX\"\n\t\t\t\t[transition]=\"transition\"\n\t\t\t\t[leftPosition]=\"leftInnerPosition\"\n\t\t\t\t[hideNavigation]=\"options.hideNavigation\"\n\t\t\t\t[totalYearMonth]=\"totalYearMonth\"\n\t\t></aa-navigation>\n\n\t\t<div class=\"datepicker__weekdays-wrapper\">\n\t\t\t<div \t*ngFor=\"let month of numberOfMonths\"\n\t\t\t\t\t[ngStyle]=\"{\n\t\t\t\t'width.%': (100 / numberOfMonths.length)\n\t\t\t\t}\"\n\t\t\t\t\tclass=\"datepicker__weekdays-container\">\n\t\t\t\t<table class=\"datepicker__weekdays\">\n\t\t\t\t\t<thead>\n\t\t\t\t\t<td class=\"datepicker__weekday\" *ngFor=\"let weekday of weekdays; index as i\">{{weekday}}</td>\n\t\t\t\t\t</thead>\n\t\t\t\t</table>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div class=\"datepicker__main\" [ngStyle]=\"{\n\t\t'height.px': calendarHeight}\">\n\t\t<div class=\"datepicker__calendar-wrapper\" #calendarContainer [ngStyle]=\"{\n\t\t\t\t\t'transform': 'translateX(' + translateX + '%)',\n\t\t\t\t\t'transition': transition,\n\t\t\t\t\t'left.%': leftInnerPosition\n\t\t\t\t\t}\"\n\t\t>\n\t\t\t<div\n\t\t\t\t\t*ngFor=\"let month of months;\"\n\t\t\t\t\tclass=\"datepicker__calendar-container\"\n\t\t\t\t\t[ngStyle]=\"{'width.%': calendarWidth}\"\n\t\t\t>\n\t\t\t\t<table class=\"datepicker__calendar\">\n\t\t\t\t\t<tbody>\n\t\t\t\t\t<tr *ngFor=\"let week of month.weeks; index as i\" class=\"datepicker__week\">\n\t\t\t\t\t\t<td class=\"datepicker__day\" *ngFor=\"let day of week.days; index as i\"\n\t\t\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'is-first': day.isFirst,\n\t\t\t\t\t\t'is-last': day.isLast,\n\t\t\t\t\t\t'is-hidden': day.isHidden,\n\t\t\t\t\t\t'is-disabled': day.isDisabled,\n\t\t\t\t\t\t'is-today': day.isToday,\n\t\t\t\t\t\t'is-selected': day.isSelected,\n\t\t\t\t\t\t'is-in-range': day.isInRange,\n\t\t\t\t\t\t'is-start-date': day.isStartDate,\n\t\t\t\t\t\t'is-end-date': day.isEndDate,\n\t\t\t\t\t\t'is-rest': day.isRest\n\t\t\t\t\t\t}\">\n\t\t\t\t\t\t\t<button class=\"datepicker__button\" [disabled]=\"day.isDisabled || day.isHidden\"\n\t\t\t\t\t\t\t\t\t(click)=\"updateValue(day.date)\">{{day.dayNumber}}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</td>\n\t\t\t\t\t</tr>\n\t\t\t\t\t</tbody>\n\t\t\t\t</table>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div class=\"datepicker__footer\" #footer>\n\t\t<ng-content select=\"footer\"></ng-content>\n\t</div>\n</div>\n\t\t", styles: [":host{font-family:Arial,Helvetica,sans-serif;border:1px solid rgb(217.1695652174,216.8347826087,215.8304347826);width:300px;position:relative;display:inline-block;z-index:2;border-radius:4px;box-shadow:0 1px 5px #00000026;overflow:hidden;background-color:#fff;box-sizing:border-box;visibility:hidden}:host *{box-sizing:border-box}:host .datepicker__calendar-container{padding:0 10px 10px}:host .datepicker__footer{position:relative;z-index:1}:host table{width:100%;table-layout:fixed;border-spacing:0;border-collapse:collapse}:host td{padding:0}:host .datepicker__weekdays-wrapper:before,:host .datepicker__weekdays-wrapper:after{content:\" \";display:table}:host .datepicker__weekdays-wrapper:after{clear:both}:host .datepicker__weekdays-container{padding:10px 10px 0;float:left}:host .datepicker__weekdays{table-layout:fixed;width:100%}:host .datepicker__weekday{color:gray;font-size:12px;height:20px;text-align:center}:host .datepicker__day{position:relative;text-align:center;height:40px;width:auto;border:1px solid rgb(217.1695652174,216.8347826087,215.8304347826)}:host .datepicker__day.is-rest{border:none}:host .datepicker__button{padding:0;background-color:transparent;border:none;outline:none;font-style:inherit;cursor:pointer;color:#8e8d8a;width:100%;height:100%}:host .datepicker__button:hover{border:1px solid transparent;background-color:#f2f2f2;color:#8e8d8a}:host .is-hidden{opacity:0;display:table-cell}:host .is-rest{border:none}:host .is-rest .datepicker__button{color:#c0c0be}:host .is-today .datepicker__button{background-color:#eae7dc}:host .is-in-range .datepicker__button{background-color:#e98074;color:#fff}:host .is-in-range .datepicker__button:hover{background-color:#e66c5e}:host .is-selected .datepicker__button{background-color:#e85a4f;color:#fff;font-weight:700}:host .is-selected .datepicker__button:hover{background-color:#e23022}:host .is-start-date .datepicker__button{background-color:#e85a4f;color:#fff}:host .is-end-date .datepicker__button{background-color:#e85a4f;color:#fff}:host .is-disabled .datepicker__button{color:#d9d9d8;cursor:default}:host .is-disabled .datepicker__button:hover{background-color:transparent}:host.is-directive{visibility:hidden;position:absolute}:host.is-open{visibility:visible}:host.is-animate{transition:height .2s ease-in;width:300px}:host.is-animate .datepicker__main{transition:height .2s ease-in}:host.is-animate .datepicker__calendar-wrapper{position:absolute;width:200%;left:0}:host.is-animate .datepicker__calendar{float:left;width:100%}:host.is-animate .datepicker__calendar-container{float:left}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NavigationComponent, selector: "aa-navigation", inputs: ["monthFormat", "language", "totalYearMonth", "transition", "translateX", "leftPosition", "hideNavigation", "animate"], outputs: ["previousClick", "nextClick", "subNavigationClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AnimatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'aa-animatepicker', standalone: false, template: "<div class=\"datepicker__wrapper\" [ngStyle]=\"datepickerPosition\">\n\t<div #calendarTopContainer>\n\t\t<div class=\"datepicker__header\" #header>\n\t\t\t<ng-content select=\"header\"></ng-content>\n\t\t</div>\n\t\t<aa-navigation\n\t\t\t\t(previousClick)=\"goToPreviousMonth()\"\n\t\t\t\t(nextClick)=\"goToNextMonth()\"\n\t\t\t\t(subNavigationClick)=\"goToDate($event)\"\n\t\t\t\t[language]=\"language\"\n\t\t\t\t[animate]=\"animate\"\n\t\t\t\t[translateX]=\"translateX\"\n\t\t\t\t[transition]=\"transition\"\n\t\t\t\t[leftPosition]=\"leftInnerPosition\"\n\t\t\t\t[hideNavigation]=\"options.hideNavigation\"\n\t\t\t\t[totalYearMonth]=\"totalYearMonth\"\n\t\t></aa-navigation>\n\n\t\t<div class=\"datepicker__weekdays-wrapper\">\n\t\t\t<div \t*ngFor=\"let month of numberOfMonths\"\n\t\t\t\t\t[ngStyle]=\"{\n\t\t\t\t'width.%': (100 / numberOfMonths.length)\n\t\t\t\t}\"\n\t\t\t\t\tclass=\"datepicker__weekdays-container\">\n\t\t\t\t<table class=\"datepicker__weekdays\">\n\t\t\t\t\t<thead>\n\t\t\t\t\t<td class=\"datepicker__weekday\" *ngFor=\"let weekday of weekdays; index as i\">{{weekday}}</td>\n\t\t\t\t\t</thead>\n\t\t\t\t</table>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div class=\"datepicker__main\" [ngStyle]=\"{\n\t\t'height.px': calendarHeight}\">\n\t\t<div class=\"datepicker__calendar-wrapper\" #calendarContainer [ngStyle]=\"{\n\t\t\t\t\t'transform': 'translateX(' + translateX + '%)',\n\t\t\t\t\t'transition': transition,\n\t\t\t\t\t'left.%': leftInnerPosition\n\t\t\t\t\t}\"\n\t\t>\n\t\t\t<div\n\t\t\t\t\t*ngFor=\"let month of months;\"\n\t\t\t\t\tclass=\"datepicker__calendar-container\"\n\t\t\t\t\t[ngStyle]=\"{'width.%': calendarWidth}\"\n\t\t\t>\n\t\t\t\t<table class=\"datepicker__calendar\">\n\t\t\t\t\t<tbody>\n\t\t\t\t\t<tr *ngFor=\"let week of month.weeks; index as i\" class=\"datepicker__week\">\n\t\t\t\t\t\t<td class=\"datepicker__day\" *ngFor=\"let day of week.days; index as i\"\n\t\t\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'is-first': day.isFirst,\n\t\t\t\t\t\t'is-last': day.isLast,\n\t\t\t\t\t\t'is-hidden': day.isHidden,\n\t\t\t\t\t\t'is-disabled': day.isDisabled,\n\t\t\t\t\t\t'is-today': day.isToday,\n\t\t\t\t\t\t'is-selected': day.isSelected,\n\t\t\t\t\t\t'is-in-range': day.isInRange,\n\t\t\t\t\t\t'is-start-date': day.isStartDate,\n\t\t\t\t\t\t'is-end-date': day.isEndDate,\n\t\t\t\t\t\t'is-rest': day.isRest\n\t\t\t\t\t\t}\">\n\t\t\t\t\t\t\t<button class=\"datepicker__button\" [disabled]=\"day.isDisabled || day.isHidden\"\n\t\t\t\t\t\t\t\t\t(click)=\"updateValue(day.date)\">{{day.dayNumber}}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</td>\n\t\t\t\t\t</tr>\n\t\t\t\t\t</tbody>\n\t\t\t\t</table>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div class=\"datepicker__footer\" #footer>\n\t\t<ng-content select=\"footer\"></ng-content>\n\t</div>\n</div>\n\t\t", styles: [":host{font-family:Arial,Helvetica,sans-serif;border:1px solid rgb(217.1695652174,216.8347826087,215.8304347826);width:300px;position:relative;display:inline-block;z-index:2;border-radius:4px;box-shadow:0 1px 5px #00000026;overflow:hidden;background-color:#fff;box-sizing:border-box;visibility:hidden}:host *{box-sizing:border-box}:host .datepicker__calendar-container{padding:0 10px 10px}:host .datepicker__footer{position:relative;z-index:1}:host table{width:100%;table-layout:fixed;border-spacing:0;border-collapse:collapse}:host td{padding:0}:host .datepicker__weekdays-wrapper:before,:host .datepicker__weekdays-wrapper:after{content:\" \";display:table}:host .datepicker__weekdays-wrapper:after{clear:both}:host .datepicker__weekdays-container{padding:10px 10px 0;float:left}:host .datepicker__weekdays{table-layout:fixed;width:100%}:host .datepicker__weekday{color:gray;font-size:12px;height:20px;text-align:center}:host .datepicker__day{position:relative;text-align:center;height:40px;width:auto;border:1px solid rgb(217.1695652174,216.8347826087,215.8304347826)}:host .datepicker__day.is-rest{border:none}:host .datepicker__button{padding:0;background-color:transparent;border:none;outline:none;font-style:inherit;cursor:pointer;color:#8e8d8a;width:100%;height:100%}:host .datepicker__button:hover{border:1px solid transparent;background-color:#f2f2f2;color:#8e8d8a}:host .is-hidden{opacity:0;display:table-cell}:host .is-rest{border:none}:host .is-rest .datepicker__button{color:#c0c0be}:host .is-today .datepicker__button{background-color:#eae7dc}:host .is-in-range .datepicker__button{background-color:#e98074;color:#fff}:host .is-in-range .datepicker__button:hover{background-color:#e66c5e}:host .is-selected .datepicker__button{background-color:#e85a4f;color:#fff;font-weight:700}:host .is-selected .datepicker__button:hover{background-color:#e23022}:host .is-start-date .datepicker__button{background-color:#e85a4f;color:#fff}:host .is-end-date .datepicker__button{background-color:#e85a4f;color:#fff}:host .is-disabled .datepicker__button{color:#d9d9d8;cursor:default}:host .is-disabled .datepicker__button:hover{background-color:transparent}:host.is-directive{visibility:hidden;position:absolute}:host.is-open{visibility:visible}:host.is-animate{transition:height .2s ease-in;width:300px}:host.is-animate .datepicker__main{transition:height .2s ease-in}:host.is-animate .datepicker__calendar-wrapper{position:absolute;width:200%;left:0}:host.is-animate .datepicker__calendar{float:left;width:100%}:host.is-animate .datepicker__calendar-container{float:left}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: UtilitiesService }], propDecorators: { numberOfMonths: [{
+                type: Input
+            }], navigate: [{
+                type: Output
+            }], calendarContainer: [{
+                type: ViewChild,
+                args: ['calendarContainer', { static: true }]
+            }], calendarTopContainer: [{
+                type: ViewChild,
+                args: ['calendarTopContainer', { static: true }]
+            }], footer: [{
+                type: ViewChild,
+                args: ['footer', { static: true }]
+            }], datepickerWidth: [{
+                type: HostBinding,
+                args: ['style.width.px']
+            }], datepickerHeight: [{
+                type: HostBinding,
+                args: ['style.height.px']
+            }] } });
+
+class DatepickerDirective {
+    viewContainerRef;
+    appRef;
+    injector;
+    renderer;
+    formControl;
+    datepicker = null; // TODO: fix types: DatepickerComponent | AnimatepickerComponent
+    datepickerRef = null;
+    clickListener;
+    _options = DefaultDirectiveOptions;
+    set options(options) {
+        if (options === undefined || !options) {
+            return;
+        }
+        // TODO: could be improved
+        this._options = { ...this._options, ...options };
+    }
+    get options() {
+        return this._options;
+    }
+    _datepickerOptions;
+    set datepickerOptions(options) {
+        this._datepickerOptions = options;
+        if (this.datepicker) {
+            this.datepicker.options = options;
+        }
+    }
+    get datepickerOptions() {
+        return this._datepickerOptions;
+    }
+    /**
+     * Set the the language manualy. A string with a BCP 47 language tag
+     * @example nl-NL
+     */
+    _language;
+    set language(value) {
+        this._language = value;
+        if (this.datepicker) {
+            this.datepicker.language = value;
+        }
+    }
+    get language() {
+        return this._language;
+    }
+    /**
+     * Minimal Date: If set the dates before it will be disabled
+     */
+    _minDate;
+    set minDate(value) {
+        this._minDate = value;
+        if (this.datepicker) {
+            this.datepicker.minDate = value;
+        }
+    }
+    get minDate() {
+        return this._minDate;
+    }
+    /**
+     * Maximal Date: If set the dates after it will be disabled
+     */
+    _maxDate;
+    set maxDate(value) {
+        this._maxDate = value;
+        if (this.datepicker) {
+            this.datepicker.maxDate = value;
+        }
+    }
+    get maxDate() {
+        return this._maxDate;
+    }
+    /**
+     * Number of months: the number of months displayed
+     */
+    _numberOfMonths;
+    set numberOfMonths(value) {
+        this._numberOfMonths = value;
+        if (this.datepicker) {
+            this.datepicker.numberOfMonths = value;
+        }
+    }
+    get numberOfMonths() {
+        return this._numberOfMonths;
+    }
+    /**
+     * Theme string is added to the host
+     */
+    _theme;
+    set theme(value) {
+        if (this.datepicker) {
+            this.datepicker.theme = value;
+        }
+    }
+    get theme() {
+        return this._theme;
+    }
+    /**
+     * The open state
+     */
+    _isOpen;
+    set isOpen(value) {
+        this._isOpen = value;
+        if (this.datepicker) {
+            this.datepicker.isOpen = value;
+        }
+    }
+    get isOpen() {
+        return this._isOpen;
+    }
+    /**
+     * Selected Dates: handles the selected dates array. Can be set both internally and externally
+     */
+    _selectedDates = [];
+    selectedDatesChange = new EventEmitter();
+    set selectedDates(value) {
+        if (value === undefined || this._selectedDates === value) {
+            return;
+        }
+        this._selectedDates = value;
+        this.selectedDatesChange.emit(this._selectedDates);
+    }
+    get selectedDates() {
+        return this._selectedDates;
+    }
+    onClick() {
+        if (!this.datepicker) {
+            this.datepicker = this.createDatepicker();
+            this.setDatepickerOptionsAndInputs();
+            this.subscribeToSelectedChanges();
+        }
+        if (!this.datepicker.isOpen) {
+            if (this.options.appendToBody) {
+                this.setPosition();
+            }
+            this.datepicker.open();
+            if (this.options.closeOnBlur) {
+                setTimeout(() => (this.clickListener = this.renderer.listen('document', 'click', this.onBlurHandler.bind(this))));
+            }
+        }
+    }
+    constructor(viewContainerRef, appRef, injector, renderer, formControl) {
+        this.viewContainerRef = viewContainerRef;
+        this.appRef = appRef;
+        this.injector = injector;
+        this.renderer = renderer;
+        this.formControl = formControl;
+    }
+    /**
+     * Add selected changes
+     */
+    subscribeToSelectedChanges() {
+        this.datepicker.selectedDatesChange.subscribe(date => {
+            if (this.formControl) {
+                this.formControl.control.setValue(date);
+            }
+            else {
+                this.selectedDates = date;
+            }
+        });
+    }
+    /**
+     * Set all the options and inputs of the datepicker
+     */
+    setDatepickerOptionsAndInputs() {
+        this.datepicker.options = this.datepickerOptions;
+        this.datepicker.isOpen = this.isOpen || false;
+        this.datepicker.asDirective = true;
+        this.datepicker.numberOfMonths = this.numberOfMonths;
+        this.datepicker.theme = this.theme;
+        this.datepicker._selectedDates = this.selectedDates;
+        this.datepicker.language = this.language;
+        this.datepicker.minDate = this.minDate;
+        this.datepicker.maxDate = this.maxDate;
+    }
+    /**
+     * Handles the (faked) blur event
+     *
+     * @param event
+     */
+    onBlurHandler(event) {
+        if (event.target !== this.datepicker.element.nativeElement &&
+            !this.datepicker.element.nativeElement.contains(event.target)) {
+            // check click origin
+            this.clickListener();
+            this.datepicker.close(true);
+        }
+    }
+    /**
+     * Returns a create DatepickerComponent method
+     */
+    createDatepicker() {
+        return this.options.appendToBody ? this.appendToBody() : this.appendToContainer();
+    }
+    /**
+     * Sets the position of the datepicker
+     */
+    setPosition() {
+        const position = UtilitiesService.getPageOffset(this.viewContainerRef.element.nativeElement);
+        if (this.options.openDirection === 'bottom') {
+            this.datepicker.topPosition = position.bottom;
+            this.datepicker.leftPosition = position.left;
+        }
+        if (this.options.openDirection === 'left') {
+            this.datepicker.topPosition = position.top;
+            this.datepicker.rightPosition = position.forRight;
+        }
+        if (this.options.openDirection === 'right') {
+            this.datepicker.topPosition = position.top;
+            this.datepicker.leftPosition = position.right;
+        }
+        if (this.options.openDirection === 'top') {
+            this.datepicker.bottomPosition = position.forBottom;
+            this.datepicker.leftPosition = position.left;
+        }
+    }
+    /**
+     * Appends the DatepickerComponent to the body and returns the instance
+     */
+    appendToBody() {
+        const datepickerComponent = this.options.useAnimatePicker ? AnimatepickerComponent : DatepickerComponent;
+        this.datepickerRef = createComponent(datepickerComponent, {
+            environmentInjector: this.appRef.injector,
+            elementInjector: this.injector
+        });
+        this.appRef.attachView(this.datepickerRef.hostView);
+        const domElem = this.datepickerRef.hostView.rootNodes[0];
+        document.body.appendChild(domElem);
+        return this.datepickerRef.instance;
+    }
+    /**
+     * Appends the DatepickerComponent to the container and returns the instance
+     */
+    appendToContainer() {
+        const datepickerComponent = this.options.useAnimatePicker ? AnimatepickerComponent : DatepickerComponent;
+        this.datepickerRef = this.viewContainerRef.createComponent(datepickerComponent);
+        return this.datepickerRef.instance;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: DatepickerDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ApplicationRef }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i1.NgControl, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: DatepickerDirective, isStandalone: false, selector: "[aaDatepicker]", inputs: { options: ["aaDatepicker", "options"], datepickerOptions: ["options", "datepickerOptions"], language: "language", minDate: "minDate", maxDate: "maxDate", numberOfMonths: "numberOfMonths", theme: "theme", isOpen: "isOpen", selectedDates: "selectedDates" }, outputs: { selectedDatesChange: "selectedDatesChange" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: DatepickerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[aaDatepicker]',
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ApplicationRef }, { type: i0.Injector }, { type: i0.Renderer2 }, { type: i1.NgControl, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { options: [{
+                type: Input,
+                args: ['aaDatepicker']
+            }], datepickerOptions: [{
+                type: Input,
+                args: ['options']
+            }], language: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], numberOfMonths: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], isOpen: [{
+                type: Input
+            }], selectedDatesChange: [{
+                type: Output
+            }], selectedDates: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class SubNavigationComponent {
+    close = new EventEmitter();
+    subNavigationClick = new EventEmitter();
+    navigationItems;
+    onItemCLick(navigationItem) {
+        const date = new Date(navigationItem.year, navigationItem.month);
+        this.close.emit();
+        this.subNavigationClick.emit(date);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SubNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.15", type: SubNavigationComponent, isStandalone: false, selector: "aa-sub-navigation", inputs: { navigationItems: "navigationItems" }, outputs: { close: "close", subNavigationClick: "subNavigationClick" }, ngImport: i0, template: "<span (click)=\"close.emit()\">Close</span>\n<div class=\"sub-navigation__items-container\">\n  <div class=\"sub-navigation__item\" *ngFor=\"let item of navigationItems;\" (click)=\"onItemCLick(item)\">\n    <span class=\"sub-navigation__label\">{{item.navigationTitle}}</span>\n  </div>\n</div>\n", styles: [":host{position:absolute;z-index:4;top:0;left:0;width:100%;height:100%;display:block;background-color:#fff}:host .sub-navigation__items-container{display:flex;align-items:center;flex-wrap:wrap}:host .sub-navigation__item{border:1px solid #8e8d8a;width:auto;height:40px;width:40px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SubNavigationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'aa-sub-navigation', standalone: false, template: "<span (click)=\"close.emit()\">Close</span>\n<div class=\"sub-navigation__items-container\">\n  <div class=\"sub-navigation__item\" *ngFor=\"let item of navigationItems;\" (click)=\"onItemCLick(item)\">\n    <span class=\"sub-navigation__label\">{{item.navigationTitle}}</span>\n  </div>\n</div>\n", styles: [":host{position:absolute;z-index:4;top:0;left:0;width:100%;height:100%;display:block;background-color:#fff}:host .sub-navigation__items-container{display:flex;align-items:center;flex-wrap:wrap}:host .sub-navigation__item{border:1px solid #8e8d8a;width:auto;height:40px;width:40px}\n"] }]
+        }], propDecorators: { close: [{
+                type: Output
+            }], subNavigationClick: [{
+                type: Output
+            }], navigationItems: [{
+                type: Input
+            }] } });
+
+class AaDatepickerModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AaDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.15", ngImport: i0, type: AaDatepickerModule, declarations: [DatepickerComponent,
+            NavigationComponent,
+            AnimatepickerComponent,
+            DatepickerDirective,
+            SubNavigationComponent], imports: [CommonModule], exports: [DatepickerComponent,
+            NavigationComponent,
+            AnimatepickerComponent,
+            DatepickerDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AaDatepickerModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AaDatepickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        DatepickerComponent,
+                        NavigationComponent,
+                        AnimatepickerComponent,
+                        DatepickerDirective,
+                        SubNavigationComponent
+                    ],
+                    imports: [CommonModule],
+                    exports: [
+                        DatepickerComponent,
+                        NavigationComponent,
+                        AnimatepickerComponent,
+                        DatepickerDirective
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AaDatepickerModule, AnimatepickerComponent, DatepickerComponent, DatepickerDirective, NavigationComponent };
+//# sourceMappingURL=ngx-animating-datepicker.mjs.map