UNPKG

ngx-animating-datepicker

Version:

An Animating Datepicker for Angular 2+, for some smooth date picking :).

2 lines 36.4 kB
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/forms"),require("@angular/common")):"function"==typeof define&&define.amd?define("ngx-animating-datepicker",["exports","@angular/core","@angular/forms","@angular/common"],e):e(t["ngx-animating-datepicker"]={},t.ng.core,t.ng.forms,t.ng.common)}(this,function(t,s,e,i){"use strict";var a=function(t,e){return(a=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i])})(t,e)};var o=function(){return(o=Object.assign||function(t){for(var e,i=1,n=arguments.length;i<n;i++)for(var o in e=arguments[i])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)};function n(t,e){var i="function"==typeof Symbol&&t[Symbol.iterator];if(!i)return t;var n,o,a=i.call(t),s=[];try{for(;(void 0===e||0<e--)&&!(n=a.next()).done;)s.push(n.value)}catch(r){o={error:r}}finally{try{n&&!n.done&&(i=a["return"])&&i.call(a)}finally{if(o)throw o.error}}return s}function r(){for(var t=[],e=0;e<arguments.length;e++)t=t.concat(n(arguments[e]));return t}var c=function(){function n(){}return n.getWeekDays=function(t,e,i){var n=["monday","tuesday","wednesday","thursday","friday","saturday","sunday"].indexOf(i.toLowerCase());if(n<0)throw new Error("Invalid week day start: "+i);for(var o=[],a=5;a<=11;a++)o.push(new Date(1970,0,a+n).toLocaleString(t,{weekday:e}));return o},n.isValidIsoCode=function(t){return new RegExp(/([a-z]{2})-([A-Z]{2})/).test(t)},n.createWeekArray=function(t){for(var e=[];t.length;)e.push({days:t.splice(0,7)});return e},n.getDaysInMonth=function(t,e){return[31,n.isLeapYear(t)?29:28,31,30,31,30,31,31,30,31,30,31][e]},n.isValidDate=function(t){for(var e=!0,i=0;i<t.length;i++)!n.isDate(t[i])&&e&&(e=!1);return e},n.isLeapYear=function(t){return t%4==0&&t%100!=0||t%400==0},n.isDate=function(t){return t instanceof Date},n.getYearOfNextMonth=function(t,e){return 11===e?t+1:t},n.getNextMonth=function(t){return 11===t?0:t+1},n.getYearOfPreviousMonth=function(t,e){return 0===e?t-1:t},n.getPreviousMonth=function(t){return 0===t?11:t-1},n.isLater=function(t,e){return e<t},n.isEarlier=function(t,e){return t<e},n.decorators=[{type:s.Injectable}],n}(),h=function(){function a(){}return a.getScrollOffset=function(){return{x:window.pageXOffset||document.documentElement.scrollLeft,y:window.pageYOffset||document.documentElement.scrollTop}},a.getPageOffset=function(t){var e=a.getScrollOffset(),i=t.offsetWidth,n=t.offsetHeight;if(t.getBoundingClientRect){var o=t.getBoundingClientRect();return{top:o.top+e.y,left:o.left+e.x,right:o.left+e.x+i,bottom:o.top+e.y+n,forRight:window.innerWidth-o.left,forBottom:window.innerHeight-(o.top+e.y)}}},a.prototype.createArray=function(i,t){return new Array(t-i+1).fill(1).map(function(t,e){return i+e})},a.decorators=[{type:s.Injectable}],a}(),d={selectMultiple:!1,closeOnSelect:!1,animationSpeed:400,easing:"ease-in",hideRestDays:!1,disableRestDays:!0,hideNavigation:!1,range:!1,currentDate:new Date,timeoutBeforeClosing:300,weekdayFormat:"short",weekStart:"monday"},l={appendToBody:!0,openDirection:"bottom",closeOnBlur:!0,useAnimatePicker:!0},p=function(){function t(t,e){this.utils=t,this.element=e,this.date=new Date,this.year=null,this.month=null,this.today=this.date,this.months=null,this.weekdays=["M","T","W","T","F","S","S"],this.selectedRange="startDate",this.startDate=null,this.endDate=null,this.initialised=!1,this.weekStartArray=["monday","tuesday","wednesday","thursday","friday","saturday","sunday"],this._options=d,this._language=navigator.language,this._minDate=null,this._maxDate=null,this._selectedDates=[],this.selectedDatesChange=new s.EventEmitter,this.theme="",this.isOpen=!0,this.asDirective=!1,this.animate=!1,this.topPosition=null,this.leftPosition=null,this.bottomPosition=null,this.rightPosition=null}return Object.defineProperty(t.prototype,"options",{get:function(){return this._options},set:function(t){t!==undefined&&t&&(this._options=o({},this._options,t),t.currentDate!==undefined&&(this.date=this.options.currentDate),this.initialised&&this.goToDate())},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"language",{get:function(){return this._language},set:function(t){t&&t!==undefined&&c.isValidIsoCode(t)&&(this._language=t,this.renderWeekdays())},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"minDate",{get:function(){return this._minDate},set:function(t){t!==undefined&&t!==this._minDate&&(this._minDate=new Date(t),this.goToDate())},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"maxDate",{get:function(){return this._maxDate},set:function(t){t!==undefined&&t!==this._minDate&&(this._maxDate=new Date(t),this.goToDate())},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"selectedDates",{get:function(){return this._selectedDates},set:function(t){var e=Array.isArray(t)?t:[t];c.isValidDate(e)&&(this._selectedDates=e,this.options.range&&this.resetRange(),this.goToDate(),this.selectedDatesChange.emit(this._selectedDates))},enumerable:!0,configurable:!0}),t.prototype.ngOnInit=function(){this.initialised=!0,this.month||this.year||this.goToDate(this.options.currentDate)},t.prototype.createDayArray=function(t,e,i){for(var n=[],o=c.getDaysInMonth(t,e),a=0;a<o;a++){var s=a+1,r=new Date(t,e,s),h={date:r,dayNumber:s,isFirst:1===s,isLast:s===o,isToday:this.isToday(r),isSelected:this.isSelected(r),isRest:i,isHidden:i&&this.options.hideRestDays,isDisabled:(this.minDate||this.maxDate)&&this.isDisabled(r)||i&&this.options.disableRestDays,isInRange:this.isInRange(r)||(this.isStartDate(r)||this.isEndDate(r))&&this.startDate&&this.endDate,isStartDate:this.isStartDate(r),isEndDate:this.isEndDate(r)};n.push(h)}return n},t.prototype.getNextRestDays=function(t,e){var i=c.getDaysInMonth(t,e),n=this.weekStartArray.indexOf(this.options.weekStart),o=new Date(t,e,i).getDay()-n,a=o<0?7-Math.abs(o):o,s=this.createDayArray(c.getYearOfNextMonth(t,e),c.getNextMonth(e),!0).slice(0,7-a);return 6<s.length?[]:s},t.prototype.getPreviousRestDays=function(t,e){var i=new Date(t,e,0).getDay(),n=this.createDayArray(c.getYearOfPreviousMonth(t,e),c.getPreviousMonth(e),!0),o=this.weekStartArray.indexOf(this.options.weekStart),a=0===o?0:7-o,s=n.length-i-a;return s=7<=n.length-s?s+7:s,n.slice(s,n.length)},t.prototype.getMergedDayArrays=function(t,e){return r(this.getPreviousRestDays(t,e),this.createDayArray(t,e),this.getNextRestDays(t,e))},t.prototype.createCalendarArray=function(t,e){var i=this.getMergedDayArrays(t,e);return[{weeks:c.createWeekArray(i)}]},t.prototype.updateValue=function(t){this.options.range?this.selectRange(t):(this.isSelected(t)?this.deselectDate(t):this.options.selectMultiple?this.selectDate(t):this.toggleDate(t),this.options.closeOnSelect&&this.close(!0)),this.months=this.createCalendarArray(this.year,this.month)},t.prototype.selectRange=function(t){this.isSelected(t)?this.deselectDate(t):c.isEarlier(t,this.startDate)?(this.startDate?this.toggleDate(t,this.startDate,!0):this.selectDate(t),this.startDate=t,this.selectEndDate()):this.endDate&&c.isLater(t,this.endDate)?(this.toggleDate(t,this.endDate),this.endDate=t,this.selectStartDate()):"startDate"===this.selectedRange?(this.startDate?this.toggleDate(t,this.startDate,!0):this.selectDate(t),this.startDate=t,this.selectEndDate()):"endDate"===this.selectedRange&&(this.endDate?this.toggleDate(t,this.endDate):this.selectDate(t),this.endDate=t,this.selectStartDate(),this.options.closeOnSelect&&this.close(!0))},t.prototype.resetRange=function(){1===this._selectedDates.length?(this.startDate=this._selectedDates[0],this.endDate=null):0===this._selectedDates.length&&(this.startDate=null,this.endDate=null)},t.prototype.toggleDate=function(t,e,i){this.selectedDates=e?i?(this._selectedDates.unshift(t),this._selectedDates.filter(function(t){return t.toDateString()!==e.toDateString()})):(this._selectedDates.push(t),this._selectedDates.filter(function(t){return t.toDateString()!==e.toDateString()})):[t]},t.prototype.selectDate=function(t,e){var i=r(this.selectedDates);e?i.unshift(t):i.push(t),this.selectedDates=i},t.prototype.deselectDate=function(e){this.selectedDates=this._selectedDates.filter(function(t){return t.toDateString()!==e.toDateString()})},t.prototype.goToNextMonth=function(){this.year=c.getYearOfNextMonth(this.year,this.month),this.month=c.getNextMonth(this.month),this.totalYearMonth=[{month:this.month,year:this.year}],this.months=this.createCalendarArray(this.year,this.month)},t.prototype.goToPreviousMonth=function(){this.year=c.getYearOfPreviousMonth(this.year,this.month),this.month=c.getPreviousMonth(this.month),this.totalYearMonth=[{month:this.month,year:this.year}],this.months=this.createCalendarArray(this.year,this.month)},t.prototype.goToDate=function(t){void 0===t&&(t=this.date),this.month=t.getMonth(),this.year=t.getFullYear(),this.totalYearMonth=[{month:this.month,year:this.year}],this.months=this.createCalendarArray(this.year,this.month)},t.prototype.renderWeekdays=function(){this.weekdays=c.getWeekDays(this._language,this.options.weekdayFormat,this.options.weekStart)},t.prototype.open=function(){this.isOpen||(this.isOpen=!0)},t.prototype.close=function(t){var e=this;if(this.isOpen){var i=t?this.options.timeoutBeforeClosing:0;setTimeout(function(){e.isOpen=!1},i)}},t.prototype.selectStartDate=function(){this.selectedRange="startDate"},t.prototype.selectEndDate=function(){this.selectedRange="endDate"},t.prototype.isStartDate=function(t){return this.startDate&&t.toDateString()===this.startDate.toDateString()},t.prototype.isEndDate=function(t){return this.endDate&&t.toDateString()===this.endDate.toDateString()},t.prototype.isToday=function(t){return t.toDateString()===this.today.toDateString()},t.prototype.isSelected=function(t){return-1!==this._selectedDates.map(function(t){return t.toDateString()}).indexOf(t.toDateString())},t.prototype.isDisabled=function(t){return this.minDate?this.maxDate?!(t<this.maxDate&&t>this.minDate):!(t>this.minDate):!(t<this.maxDate)},t.prototype.isInRange=function(t){return this.startDate&&this.endDate&&this.startDate<t&&t<this.endDate},t.decorators=[{type:s.Component,args:[{selector:"aa-datepicker",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 #d9d9d8;width:300px;position:relative;display:inline-block;z-index:2;border-radius:4px;box-shadow:0 1px 5px rgba(0,0,0,.15);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::after,:host .datepicker__weekdays-wrapper::before{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:grey;font-size:12px;height:20px;text-align:center}:host .datepicker__day{position:relative;text-align:center;height:40px;width:auto;border:1px solid #d9d9d8}:host .datepicker__day.is-rest{border:none}:host .datepicker__button{padding:0;background-color:transparent;border:none;outline:0;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}"]}]}],t.ctorParameters=function(){return[{type:h},{type:s.ElementRef}]},t.propDecorators={options:[{type:s.Input,args:["options"]}],language:[{type:s.Input}],minDate:[{type:s.Input}],maxDate:[{type:s.Input}],selectedDatesChange:[{type:s.Output}],selectedDates:[{type:s.Input}],calendarContainer:[{type:s.ViewChild,args:["calendarContainer"]}],calendarTopContainer:[{type:s.ViewChild,args:["calendarTopContainer"]}],theme:[{type:s.HostBinding,args:["class"]},{type:s.Input}],isOpen:[{type:s.HostBinding,args:["class.is-open"]},{type:s.Input}],asDirective:[{type:s.HostBinding,args:["class.is-directive"]}],animate:[{type:s.HostBinding,args:["class.is-animate"]}],topPosition:[{type:s.HostBinding,args:["style.top.px"]}],leftPosition:[{type:s.HostBinding,args:["style.left.px"]}],bottomPosition:[{type:s.HostBinding,args:["style.bottom.px"]}],rightPosition:[{type:s.HostBinding,args:["style.right.px"]}]},t}(),u=function(n){function t(t,e){var i=n.call(this,e,t)||this;return i.elementRef=t,i.utilities=e,i.animate=!0,i.isAnimating=!1,i.leftInnerPosition=0,i.currentYearMonth=null,i.initialised=!1,i._numberOfMonths=new Array(1),i}return function o(t,e){function i(){this.constructor=t}a(t,e),t.prototype=null===e?Object.create(e):(i.prototype=e.prototype,new i)}(t,n),Object.defineProperty(t.prototype,"numberOfMonths",{get:function(){return this._numberOfMonths},set:function(t){t!==undefined&&t!==this._numberOfMonths.length&&(this._numberOfMonths=new Array(t),this.setDatePickerDimension(),this.goToDate(this.date))},enumerable:!0,configurable:!0}),t.prototype.ngOnInit=function(){var t=window.getComputedStyle(this.elementRef.nativeElement,null).getPropertyValue("width");this.initialWidth=parseInt(t,10),this.initialised=!0,this.month||this.year||this.goToDate(this.options.currentDate)},t.prototype.ngAfterViewInit=function(){var t=this;setTimeout(function(){t.setDatePickerDimension(),t.setDatepickerHeight(!0)})},t.prototype.setDatePickerDimension=function(){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},t.prototype.goToDate=function(t){t&&(this.currentYearMonth=this.getNextYearMonthArray(t.getFullYear(),t.getMonth())),this.calendarWidth=50/this._numberOfMonths.length,this.months=this.getNextMonthArray(this.currentYearMonth,!0),this.resetStyle()},t.prototype.getNextYearMonthArray=function(t,e){for(var i=[],n=0;n<this._numberOfMonths.length;n++)i.push({year:t,month:e}),t=c.getYearOfNextMonth(t,e),e=c.getNextMonth(e);return i},t.prototype.getPreviousYearMonthArray=function(t,e){for(var i=[],n=0;n<this._numberOfMonths.length;n++)i.unshift({year:t,month:e}),t=c.getYearOfPreviousMonth(t,e),e=c.getPreviousMonth(e);return i},t.prototype.setDatepickerHeight=function(t){var n;if(1<this._numberOfMonths.length){var e=t?0:this._numberOfMonths.length,i=t?this._numberOfMonths.length-1:this._numberOfMonths.length+this._numberOfMonths.length-1;n=this.utilities.createArray(e,i)}else n=t?[0]:[1];var o=this;setTimeout(function(){var e=o.elementRef.nativeElement.querySelectorAll(".datepicker__calendar-container"),i=0;n.forEach(function(t){e[t].offsetHeight>i&&(i=e[t].offsetHeight)}),o.datepickerHeight=i+o.calendarTopContainer.nativeElement.offsetHeight+o.footer.nativeElement.offsetHeight,o.calendarHeight=i})},t.prototype.getNextMonthArray=function(t,e,i){var n=this;void 0===e&&(e=!1);var o=this._numberOfMonths.length-1,a=i||this.getNextYearMonthArray(c.getYearOfNextMonth(t[o].year,t[o].month),c.getNextMonth(t[o].month));this.totalYearMonth=t.concat(a);var s=[];return this.totalYearMonth.forEach(function(t){return s.push(n.createCalendarArray(t.year,t.month))}),e||(this.currentYearMonth=a),[].concat.apply([],s)},t.prototype.getPreviousMonthArray=function(t,e){var i=this;void 0===e&&(e=!1);var n=this.getPreviousYearMonthArray(c.getYearOfPreviousMonth(t[0].year,t[0].month),c.getPreviousMonth(t[0].month));this.totalYearMonth=n.concat(t);var o=[];return this.totalYearMonth.forEach(function(t){o.push(i.createCalendarArray(t.year,t.month))}),e||(this.currentYearMonth=n),[].concat.apply([],o)},t.prototype.updateValue=function(t){this.options.range?this.selectRange(t):(this.isSelected(t)?this.deselectDate(t):this.options.selectMultiple?this.selectDate(t):this.toggleDate(t),this.options.closeOnSelect&&this.close(!0)),this.months=this.getNextMonthArray(this.currentYearMonth,!0),this.resetStyle()},t.prototype.goToNextMonth=function(){this.isAnimating||(this.months=this.getNextMonthArray(this.currentYearMonth),this.resetStyle(),this.setDatepickerHeight(),this.slideLeft())},t.prototype.goToPreviousMonth=function(){this.isAnimating||(this.months=this.getPreviousMonthArray(this.currentYearMonth),this.resetStyle(!0),this.setDatepickerHeight(!0),this.slideRight())},t.prototype.goToMonth=function(t){var e=this.getNextYearMonthArray(t.getFullYear(),t.getMonth());this.months=this.getNextMonthArray(this.totalYearMonth,!1,e),this.resetStyle(),this.setDatepickerHeight(),this.slideRight()},t.prototype.slideRight=function(){var t=this;this.setIsAnimating(),setTimeout(function(){t.transition="transform "+t.options.animationSpeed+"ms "+t.options.easing,t.translateX=50})},t.prototype.slideLeft=function(){var t=this;this.setIsAnimating(),setTimeout(function(){t.transition="transform "+t.options.animationSpeed+"ms "+t.options.easing,t.translateX=-50})},t.prototype.setIsAnimating=function(){var t=this;this.isAnimating=!0,setTimeout(function(){t.isAnimating=!1},this.options.animationSpeed)},t.prototype.resetStyle=function(t){this.transition="transform 0ms ease-in",this.translateX=0,this.leftInnerPosition=t?-100:0},t.decorators=[{type:s.Component,args:[{selector:"aa-animatepicker",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 #d9d9d8;width:300px;position:relative;display:inline-block;z-index:2;border-radius:4px;box-shadow:0 1px 5px rgba(0,0,0,.15);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::after,:host .datepicker__weekdays-wrapper::before{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:grey;font-size:12px;height:20px;text-align:center}:host .datepicker__day{position:relative;text-align:center;height:40px;width:auto;border:1px solid #d9d9d8}:host .datepicker__day.is-rest{border:none}:host .datepicker__button{padding:0;background-color:transparent;border:none;outline:0;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}"]}]}],t.ctorParameters=function(){return[{type:s.ElementRef},{type:h}]},t.propDecorators={numberOfMonths:[{type:s.Input}],calendarContainer:[{type:s.ViewChild,args:["calendarContainer"]}],calendarTopContainer:[{type:s.ViewChild,args:["calendarTopContainer"]}],footer:[{type:s.ViewChild,args:["footer"]}],datepickerWidth:[{type:s.HostBinding,args:["style.width.px"]}],datepickerHeight:[{type:s.HostBinding,args:["style.height.px"]}]},t}(p),g=function(){function t(t,e,i,n,o,a){this.viewContainerRef=t,this.componentFactoryResolver=e,this.appRef=i,this.injector=n,this.renderer=o,this.formControl=a,this.datepicker=null,this._options=l,this._selectedDates=[],this.selectedDatesChange=new s.EventEmitter}return Object.defineProperty(t.prototype,"options",{get:function(){return this._options},set:function(t){t!==undefined&&t&&(this._options=o({},this._options,t))},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"datepickerOptions",{get:function(){return this._datepickerOptions},set:function(t){this._datepickerOptions=t,this.datepicker&&(this.datepicker.options=t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"language",{get:function(){return this._language},set:function(t){this._language=t,this.datepicker&&(this.datepicker.language=t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"minDate",{get:function(){return this._minDate},set:function(t){this._minDate=t,this.datepicker&&(this.datepicker.minDate=t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"maxDate",{get:function(){return this._minDate},set:function(t){this._maxDate=t,this.datepicker&&(this.datepicker.maxDate=t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"numberOfMonths",{get:function(){return this._numberOfMonths},set:function(t){this._numberOfMonths=t,this.datepicker&&(this.datepicker.numberOfMonths=t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"theme",{get:function(){return this._theme},set:function(t){this.datepicker&&(this.datepicker.theme=t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"isOpen",{get:function(){return this._isOpen},set:function(t){this._isOpen=t,this.datepicker&&(this.datepicker.isOpen=t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"selectedDates",{get:function(){return this._selectedDates},set:function(t){t!==undefined&&this._selectedDates!==t&&(this._selectedDates=t,this.selectedDatesChange.emit(this._selectedDates))},enumerable:!0,configurable:!0}),t.prototype.onClick=function(){var t=this;this.datepicker||(this.datepicker=this.createDatepicker(),this.setDatepickerOptionsAndInputs(),this.subscribeToSelectedChanges()),this.datepicker.isOpen||(this.options.appendToBody&&this.setPosition(),this.datepicker.open(),this.options.closeOnBlur&&setTimeout(function(){return t.clickListener=t.renderer.listen("document","click",t.onBlurHandler.bind(t))}))},t.prototype.subscribeToSelectedChanges=function(){var e=this;this.datepicker.selectedDatesChange.subscribe(function(t){e.formControl?e.formControl.control.setValue(t):e.selectedDates=t})},t.prototype.setDatepickerOptionsAndInputs=function(){this.datepicker.options=this.datepickerOptions,this.datepicker.isOpen=this.isOpen||!1,this.datepicker.asDirective=!0,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.minDate=this.maxDate},t.prototype.onBlurHandler=function(t){t.target===this.datepicker.element.nativeElement||this.datepicker.element.nativeElement.contains(t.target)||(this.clickListener(),this.datepicker.close(!0))},t.prototype.createDatepicker=function(){return this.options.appendToBody?this.appendToBody():this.appendToContainer()},t.prototype.setPosition=function(){var t=h.getPageOffset(this.viewContainerRef.element.nativeElement);"bottom"===this.options.openDirection&&(this.datepicker.topPosition=t.bottom,this.datepicker.leftPosition=t.left),"left"===this.options.openDirection&&(this.datepicker.topPosition=t.top,this.datepicker.rightPosition=t.forRight),"right"===this.options.openDirection&&(this.datepicker.topPosition=t.top,this.datepicker.leftPosition=t.right),"top"===this.options.openDirection&&(this.datepicker.bottomPosition=t.forBottom,this.datepicker.leftPosition=t.left)},t.prototype.appendToBody=function(){var t=this.options.useAnimatePicker?u:p,e=this.componentFactoryResolver.resolveComponentFactory(t).create(this.injector);this.appRef.attachView(e.hostView);var i=e.hostView.rootNodes[0];return document.body.appendChild(i),e.instance},t.prototype.appendToContainer=function(){var t=this.options.useAnimatePicker?u:p,e=this.componentFactoryResolver.resolveComponentFactory(t);return this.viewContainerRef.createComponent(e).instance},t.decorators=[{type:s.Directive,args:[{selector:"[aaDatepicker]"}]}],t.ctorParameters=function(){return[{type:s.ViewContainerRef},{type:s.ComponentFactoryResolver},{type:s.ApplicationRef},{type:s.Injector},{type:s.Renderer2},{type:e.NgControl,decorators:[{type:s.Optional}]}]},t.propDecorators={options:[{type:s.Input,args:["aaDatepicker"]}],datepickerOptions:[{type:s.Input,args:["options"]}],language:[{type:s.Input}],minDate:[{type:s.Input}],maxDate:[{type:s.Input}],numberOfMonths:[{type:s.Input}],theme:[{type:s.Input}],isOpen:[{type:s.Input}],selectedDatesChange:[{type:s.Output}],selectedDates:[{type:s.Input}],onClick:[{type:s.HostListener,args:["click",["$event.target"]]}]},t}(),f=function(){function t(){this.close=new s.EventEmitter,this.subNavigationClick=new s.EventEmitter}return t.prototype.onItemCLick=function(t){var e=new Date(t.year,t.month);this.close.emit(),this.subNavigationClick.emit(e)},t.decorators=[{type:s.Component,args:[{selector:"aa-sub-navigation",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;height:40px;width:40px}"]}]}],t.propDecorators={close:[{type:s.Output}],subNavigationClick:[{type:s.Output}],navigationItems:[{type:s.Input}]},t}(),y=function(){function t(){this.previousClick=new s.EventEmitter,this.nextClick=new s.EventEmitter,this.subNavigationClick=new s.EventEmitter,this.monthFormat="long",this.animate=!1,this.initialised=!1,this.subNavigationOpen=!1}return Object.defineProperty(t.prototype,"language",{get:function(){return this._language},set:function(t){this.formatMonth=new Intl.DateTimeFormat(t,{month:this.monthFormat}),this._language=t,this.initialised&&(this.titles=this.createNavigationItems(this._totalYearMonth))},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"totalYearMonth",{set:function(t){this._totalYearMonth=t,this.titles=this.createNavigationItems(t)},enumerable:!0,configurable:!0}),t.prototype.ngOnInit=function(){this.initialised=!0},t.prototype.onMonthClick=function(t){var e=this.createMonthArray(t),i=new Intl.DateTimeFormat(this.language,{month:"short"});this.navigationItems=this.createNavigationItems(e,!0,i),this.toggleSubNavigation()},t.prototype.onYearClick=function(t){this.navigationItems=this.createYearArray(t),this.toggleSubNavigation()},t.prototype.toggleSubNavigation=function(){this.subNavigationOpen=!this.subNavigationOpen},t.prototype.createNavigationItems=function(t,i,e){void 0===i&&(i=!0),void 0===e&&(e=null);var n=e||this.formatMonth;return t.map(function(t){var e=new Date(t.year,t.month);return t.navigationTitle=i?n.format(e):t.year,t})},t.prototype.createMonthArray=function(t){for(var e=[],i=t.year,n=0;n<11;n++)e.push({month:n,year:i});return e},t.prototype.createYearArray=function(t){for(var e=t.year,i=[o({},t,{navigationTitle:e})],n=0;n<5;n++)i.unshift(o({},t,{navigationTitle:e-(n+1)})),i.push(o({},t,{navigationTitle:e+(n+1)}));return i},t.prototype.onSubNavigationClick=function(t){this.subNavigationClick.emit(t)},t.prototype.previous=function(){this.previousClick.emit()},t.prototype.next=function(){this.nextClick.emit()},t.decorators=[{type:s.Component,args:[{selector:"aa-navigation",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{display:block;padding:10px;height:52px}:host::after,:host::before{content:' ';display:table}:host::after{clear:both}: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;border:1px solid #c0c0be;outline:0;font-style:inherit;cursor:pointer;position:relative;z-index:1;background-color:#fff;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{float:right}:host .navigation__button.is-next::before{content:'>'}:host.is-animate .navigation__title-wrapper{width:200%}"]}]}],t.propDecorators={previousClick:[{type:s.Output}],nextClick:[{type:s.Output}],subNavigationClick:[{type:s.Output}],monthFormat:[{type:s.Input}],language:[{type:s.Input}],totalYearMonth:[{type:s.Input}],transition:[{type:s.Input}],translateX:[{type:s.Input}],leftPosition:[{type:s.Input}],hideNavigation:[{type:s.Input}],animate:[{type:s.HostBinding,args:["class.is-animate"]},{type:s.Input}]},t}(),m=function(){function t(){}return t.decorators=[{type:s.NgModule,args:[{declarations:[p,y,u,g,f],imports:[i.CommonModule],providers:[h],exports:[p,y,u,g],entryComponents:[p,u]}]}],t}();t.AaDatepickerModule=m,t.DatepickerComponent=p,t.AnimatepickerComponent=u,t.ɵc=g,t.ɵb=y,t.ɵd=f,t.ɵa=h,Object.defineProperty(t,"__esModule",{value:!0})}); //# sourceMappingURL=ngx-animating-datepicker.umd.min.js.map