ngx-daterange
Version:
Date-Range Selector for Angular
1 lines • 37.7 kB
JSON
{"__symbolic":"module","version":4,"exports":[{"export":[{"name":"IDateRange","as":"IDateRange"}],"from":"./IDateRange"},{"export":[{"name":"IDateRangePickerOptions","as":"IDateRangePickerOptions"}],"from":"./IDateRangePickerOptions"},{"export":[{"name":"IDefinedDateRange","as":"IDefinedDateRange"}],"from":"./IDefinedDateRange"}],"metadata":{"NgxDateRangeModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":18,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"CalendarComponent"},{"__symbolic":"reference","name":"DateRangePickerComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"}],"exports":[{"__symbolic":"reference","name":"CalendarComponent"},{"__symbolic":"reference","name":"DateRangePickerComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":22,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":23,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":24,"character":4}]}]}],"members":{}},"CalendarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":9,"character":19},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":10,"character":17},"member":"None"},"selector":"calendar","template":"<div class=\"row\">\n <div class=\"col text-center\">\n <div class=\"d-flex align-items-center calendar-pagination {{ icons === 'material' ? 'material' : '' }}\">\n <div>\n <button type=\"button\" class=\"btn btn-link btn-previous-year\" (click)=\"yearSelected($event, { value: -1 })\">\n <i *ngIf=\"icons === 'material'\" class=\"material-icons\">first_page</i>\n <i *ngIf=\"icons === 'font-awesome'\" class=\"fas fa-angle-double-left\"></i>\n <img *ngIf=\"icons === 'default'\" src=\"data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0MDcuNDM2IDQwNy40MzYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQwNy40MzYgNDA3LjQzNjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiPgo8Zz4KCTxwb2x5Z29uIHBvaW50cz0iMjY2LjQ1MiwyMS4xNzggMjQ1LjIwNCwwIDQyLjE0OSwyMDMuNzE4IDI0NS4yMDQsNDA3LjQzNiAyNjYuNDUyLDM4Ni4yNTggODQuNTA3LDIwMy43MTggICIgZmlsbD0iIzAwMDAwMCIvPgoJPHBvbHlnb24gcG9pbnRzPSIzNjUuMjg2LDIxLjE3OCAzNDQuMDM4LDAgMTQwLjk4MywyMDMuNzE4IDM0NC4wMzgsNDA3LjQzNiAzNjUuMjg2LDM4Ni4yNTggMTgzLjM0MSwyMDMuNzE4ICAiIGZpbGw9IiMwMDAwMDAiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K\" />\n </button>\n </div>\n <div>\n <button type=\"button\" class=\"btn btn-link btn-previous-month\" (click)=\"monthSelected($event, { value: -1 })\">\n <i *ngIf=\"icons === 'material'\" class=\"material-icons\">chevron_left</i>\n <i *ngIf=\"icons === 'font-awesome'\" class=\"fas fa-angle-left\"></i>\n <img *ngIf=\"icons === 'default'\" src=\"data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDQ0NC41MzEgNDQ0LjUzMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDQ0LjUzMSA0NDQuNTMxOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTIxMy4xMywyMjIuNDA5TDM1MS44OCw4My42NTNjNy4wNS03LjA0MywxMC41NjctMTUuNjU3LDEwLjU2Ny0yNS44NDFjMC0xMC4xODMtMy41MTgtMTguNzkzLTEwLjU2Ny0yNS44MzUgICBsLTIxLjQwOS0yMS40MTZDMzIzLjQzMiwzLjUyMSwzMTQuODE3LDAsMzA0LjYzNywwcy0xOC43OTEsMy41MjEtMjUuODQxLDEwLjU2MUw5Mi42NDksMTk2LjQyNSAgIGMtNy4wNDQsNy4wNDMtMTAuNTY2LDE1LjY1Ni0xMC41NjYsMjUuODQxczMuNTIxLDE4Ljc5MSwxMC41NjYsMjUuODM3bDE4Ni4xNDYsMTg1Ljg2NGM3LjA1LDcuMDQzLDE1LjY2LDEwLjU2NCwyNS44NDEsMTAuNTY0ICAgczE4Ljc5NS0zLjUyMSwyNS44MzQtMTAuNTY0bDIxLjQwOS0yMS40MTJjNy4wNS03LjAzOSwxMC41NjctMTUuNjA0LDEwLjU2Ny0yNS42OTdjMC0xMC4wODUtMy41MTgtMTguNzQ2LTEwLjU2Ny0yNS45NzggICBMMjEzLjEzLDIyMi40MDl6IiBmaWxsPSIjMDAwMDAwIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==\" />\n </button>\n </div>\n <div class=\"flex-grow-1 month-year\">\n {{ monthText }} {{ year }}\n </div>\n <div>\n <button type=\"button\" class=\"btn btn-link btn-next-month\" (click)=\"monthSelected($event, { value: 1 })\">\n <i *ngIf=\"icons === 'material'\" class=\"material-icons\">chevron_right</i>\n <i *ngIf=\"icons === 'font-awesome'\" class=\"fas fa-angle-right\"></i>\n <img *ngIf=\"icons === 'default'\" src=\"data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDQ0NC44MTkgNDQ0LjgxOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDQ0LjgxOSA0NDQuODE5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTM1Mi4wMjUsMTk2LjcxMkwxNjUuODg0LDEwLjg0OEMxNTkuMDI5LDMuNjE1LDE1MC40NjksMCwxNDAuMTg3LDBjLTEwLjI4MiwwLTE4Ljg0MiwzLjYxOS0yNS42OTcsMTAuODQ4TDkyLjc5MiwzMi4yNjQgICBjLTcuMDQ0LDcuMDQzLTEwLjU2NiwxNS42MDQtMTAuNTY2LDI1LjY5MmMwLDkuODk3LDMuNTIxLDE4LjU2LDEwLjU2NiwyNS45ODFsMTM4Ljc1MywxMzguNDczTDkyLjc4NiwzNjEuMTY4ICAgYy03LjA0Miw3LjA0My0xMC41NjQsMTUuNjA0LTEwLjU2NCwyNS42OTNjMCw5Ljg5NiwzLjUyMSwxOC41NjIsMTAuNTY0LDI1Ljk4bDIxLjcsMjEuNDEzICAgYzcuMDQzLDcuMDQzLDE1LjYxMiwxMC41NjQsMjUuNjk3LDEwLjU2NGMxMC4wODksMCwxOC42NTYtMy41MjEsMjUuNjk3LTEwLjU2NGwxODYuMTQ1LTE4NS44NjQgICBjNy4wNDYtNy40MjMsMTAuNTcxLTE2LjA4NCwxMC41NzEtMjUuOTgxQzM2Mi41OTcsMjEyLjMyMSwzNTkuMDcxLDIwMy43NTUsMzUyLjAyNSwxOTYuNzEyeiIgZmlsbD0iIzAwMDAwMCIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=\" />\n </button>\n </div>\n <div>\n <button type=\"button\" class=\"btn btn-link btn-next-year\" (click)=\"yearSelected($event, { value: 1 })\">\n <i *ngIf=\"icons === 'material'\" class=\"material-icons\">last_page</i>\n <i *ngIf=\"icons === 'font-awesome'\" class=\"fas fa-angle-double-right\"></i>\n <img *ngIf=\"icons === 'default'\" src=\"data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0MDcuNDM2IDQwNy40MzYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQwNy40MzYgNDA3LjQzNjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiPgo8Zz4KCTxwb2x5Z29uIHBvaW50cz0iMTYyLjIzMSwwIDE0MC45ODMsMjEuMTc4IDMyMi45MjksMjAzLjcxOCAxNDAuOTgzLDM4Ni4yNTggMTYyLjIzMSw0MDcuNDM2IDM2NS4yODYsMjAzLjcxOCAgIiBmaWxsPSIjMDAwMDAwIi8+Cgk8cG9seWdvbiBwb2ludHM9IjYzLjM5NywwIDQyLjE0OSwyMS4xNzggMjI0LjA5NSwyMDMuNzE4IDQyLjE0OSwzODYuMjU4IDYzLjM5Nyw0MDcuNDM2IDI2Ni40NTIsMjAzLjcxOCAgIiBmaWxsPSIjMDAwMDAwIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==\" />\n </button>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"row\">\n <div class=\"col\">\n <table class=\"table table-borderless mb-0 w-100\">\n <thead>\n <tr class=\"week-days\">\n <th>Sun</th>\n <th>Mon</th>\n <th>Tue</th>\n <th>Wed</th>\n <th>Thu</th>\n <th>Fri</th>\n <th>Sat</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let week of weekList; let i = index\">\n <td *ngFor=\"let day of weekList[i]\" (click)=\"dateSelected($event, { day: day })\" [attr.data-day]=\"day | date:'MM-dd-yyyy'\" [ngClass]=\"{ 'selected': isSelectedDate(day), 'in-selected-range': isDateInRange(day), 'disabled': isDisabled(day), 'different-month': isDifferentMonth(day) }\">\n {{ day.format('D') }}\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n</div>\n","styles":[".calendar.calendar-single .table td.in-selected-range{background-color:transparent}.calendar .calendar-pagination{font-size:16px;margin:.5rem -15px 0}.calendar .calendar-pagination .btn,.calendar .calendar-pagination .btn-link{background-color:transparent;min-width:auto;width:auto}.calendar .calendar-pagination.material .btn.btn-previous-year{padding-right:3px}.calendar .calendar-pagination.material .btn.btn-previous-month{padding-left:0}.calendar .calendar-pagination.material .btn.btn-next-month{padding-right:0}.calendar .calendar-pagination.material .btn.btn-next-year{padding-left:3px}.calendar .calendar-pagination .month-year{font-weight:600}.calendar .week-days{text-transform:uppercase}.calendar .table td,.calendar .table th{border-radius:0;color:#333;font-size:12px;height:36px;line-height:1;padding:0;text-align:center;vertical-align:middle}.calendar .table th{font-weight:400}.calendar .table td{border-radius:5px;cursor:pointer;font-weight:900;max-width:32px;width:32px}.calendar .table td:not(.disabled):not(.selected):hover{background-color:#eee;color:#333}.calendar .table td.selected{color:#fff;font-size:12px}.calendar .table td.selected,.calendar .table td.selected.in-selected-range{background-color:#003d79;border-radius:5px}.calendar .table td.selected.different-month{color:#fff}.calendar .table td.selected:hover{background-color:#003d79}.calendar .table td.in-selected-range{background-color:#dfefff;border-radius:0;font-size:12px}.calendar .table td.disabled{background-color:transparent;color:#666;cursor:not-allowed;font-weight:400}.calendar .table td.different-month{color:#888;font-weight:500}.calendar .table td.different-month.disabled{color:#ccc}"]}]}],"members":{"month":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"year":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"selectedFromDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"selectedToDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"isLeft":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"format":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"minDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"maxDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"singleCalendar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"icons":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"dateChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":49,"character":3}}]}],"monthChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":52,"character":3}}]}],"yearChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":55,"character":3}}]}],"ngOnChanges":[{"__symbolic":"method"}],"getWeekNumbers":[{"__symbolic":"method"}],"getWeeksRange":[{"__symbolic":"method"}],"createCalendarGridData":[{"__symbolic":"method"}],"isDisabled":[{"__symbolic":"method"}],"isDateAvailable":[{"__symbolic":"method"}],"isSelectedDate":[{"__symbolic":"method"}],"isDateInRange":[{"__symbolic":"method"}],"isDifferentMonth":[{"__symbolic":"method"}],"dateSelected":[{"__symbolic":"method"}],"monthSelected":[{"__symbolic":"method"}],"yearSelected":[{"__symbolic":"method"}]}},"DateRangePickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":11,"character":17},"member":"Emulated"},"selector":"date-range-picker","template":"<div class=\"dateRangePicker-wrapper\" *ngIf=\"parentFormGroup\">\n <div #content>\n <ng-content></ng-content>\n </div>\n <div class=\"form-group\" [formGroup]=\"parentFormGroup\">\n <ng-container *ngIf=\"content.childNodes.length === 0\">\n <label [attr.for]=\"instanceId\">{{ options.labelText }}</label>\n <input [attr.id]=\"instanceId\" class=\"form-control\" type=\"text\" [formControlName]=\"controlName\">\n </ng-container>\n\n <div class=\"modal\" tabindex=\"-1\" role=\"dialog\" [ngClass]=\"{ 'modal-display': displayStyle}\">\n <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\n <div class=\"modal-content\">\n <div class=\"modal-body\">\n <div [ngClass]=\"{'dateRangePickerModal': true, 'dateRangePicker-single': options.singleCalendar, 'is-chrome': checkChrome(), 'mobile': isMobile }\">\n <div class=\"container-fluid\">\n <div class=\"row\">\n <div class=\"col\">\n \n <!-- Manual Inputs -->\n <manual-inputs [options]=\"options\" [fromDate]=\"fromDate\" [toDate]=\"toDate\" [isMobile]=\"isMobile\" (dateFromInput)=\"setDateFromInput($event)\"></manual-inputs>\n \n <!-- Calendars -->\n <div class=\"row row-calendars\">\n <div [ngClass]=\"{ 'col-12': true, 'col-sm-6': !isMobile && !options.singleCalendar }\">\n <calendar [ngClass]=\"{ 'calendar': true, 'calendar-single': options.singleCalendar }\" [isLeft]=\"true\" [month]=\"fromMonth\" [year]=\"fromYear\" (monthChanged)=monthChanged($event) (yearChanged)=\"yearChanged($event)\" (dateChanged)=\"dateChanged($event)\" [format]=\"options.format\" [selectedFromDate]=\"fromDate\" [selectedToDate]=\"toDate\" [minDate]=\"options.minDate\" [maxDate]=\"options.maxDate\" [singleCalendar]=\"options.singleCalendar\" [icons]=\"options.icons\"></calendar>\n </div>\n \n <div [ngClass]=\"{ 'col-12': true, 'col-sm-6': !isMobile, 'col__mobile': isMobile }\" *ngIf=\"!options.singleCalendar\">\n <calendar class=\"calendar\" [month]=\"toMonth\" [year]=\"toYear\" [format]=\"options.format\" (dateChanged)=\"dateChanged($event)\" (monthChanged)=\"monthChanged($event)\" (yearChanged)=\"yearChanged($event)\" [selectedFromDate]=\"fromDate\" [selectedToDate]=\"toDate\" [minDate]=\"options.minDate\" [maxDate]=\"options.maxDate\" [icons]=\"options.icons\"></calendar>\n </div>\n </div>\n </div>\n </div>\n \n <!-- Pre-Defined Date Ranges -->\n <predefined-date-ranges [options]=\"options\" [range]=\"range\" [enableApplyButton]=\"enableApplyButton\" (closeEvent)=\"close($event)\" (resetEvent)=\"reset($event)\" (applyEvent)=\"apply($event)\" (predefinedRange)=\"applyPredefinedRange($event)\"></predefined-date-ranges>\n \n </div>\n </div>\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"close($event)\">Close</button>\n <button type=\"button\" class=\"btn btn-outline-secondary btn-sm ml-3\" (click)=\"reset($event)\" *ngIf=\"range && options.showResetButton\">Reset</button>\n <button type=\"button\" class=\"btn btn-primary btn-sm ml-3\" [disabled]=\"!enableApplyButton\" (click)=\"apply($event)\" *ngIf=\"!options.autoApply\">Apply</button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Desktop Browsers -->\n <div [ngClass]=\"{'dateRangePicker': true, 'invisible': !showCalendars, 'dateRangePicker-single': options.singleCalendar, 'is-chrome': checkChrome(), 'open-left': options.position === 'left', 'open-right': options.position === 'right', 'mobile': isMobile }\">\n <div class=\"container-fluid\">\n <div class=\"row\">\n <div class=\"col\">\n\n <!-- Manual Inputs -->\n <manual-inputs [options]=\"options\" [fromDate]=\"fromDate\" [toDate]=\"toDate\" [isMobile]=\"isMobile\" (dateFromInput)=\"setDateFromInput($event)\"></manual-inputs>\n\n <!-- Calendars -->\n <div class=\"row row-calendars\">\n <div [ngClass]=\"{ 'col-12': true, 'col-sm-6': !isMobile && !options.singleCalendar }\">\n <calendar [ngClass]=\"{ 'calendar': true, 'calendar-single': options.singleCalendar }\" [isLeft]=\"true\" [month]=\"fromMonth\" [year]=\"fromYear\" (monthChanged)=monthChanged($event) (yearChanged)=\"yearChanged($event)\" (dateChanged)=\"dateChanged($event)\" [format]=\"options.format\" [selectedFromDate]=\"fromDate\" [selectedToDate]=\"toDate\" [minDate]=\"options.minDate\" [maxDate]=\"options.maxDate\" [singleCalendar]=\"options.singleCalendar\" [icons]=\"options.icons\"></calendar>\n </div>\n\n <div [ngClass]=\"{ 'col-12': true, 'col-sm-6': !isMobile, 'col__mobile': isMobile }\" *ngIf=\"!options.singleCalendar\">\n <calendar class=\"calendar\" [month]=\"toMonth\" [year]=\"toYear\" [format]=\"options.format\" (dateChanged)=\"dateChanged($event)\" (monthChanged)=\"monthChanged($event)\" (yearChanged)=\"yearChanged($event)\" [selectedFromDate]=\"fromDate\" [selectedToDate]=\"toDate\" [minDate]=\"options.minDate\" [maxDate]=\"options.maxDate\" [icons]=\"options.icons\"></calendar>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Pre-Defined Date Ranges -->\n <predefined-date-ranges [options]=\"options\" [range]=\"range\" [enableApplyButton]=\"enableApplyButton\" (closeEvent)=\"close($event)\" (resetEvent)=\"reset($event)\" (applyEvent)=\"apply($event)\"></predefined-date-ranges>\n\n </div>\n </div>\n\n </div>\n</div>\n","styles":[".dateRangePicker-wrapper{border:none;position:relative}.dateRangePicker-wrapper input.form-control[disabled]{background-color:#fff}.dateRangePicker-wrapper .modal-body{padding:0!important}.dateRangePicker-wrapper .modal{-webkit-backdrop-filter:brightness(50%);backdrop-filter:brightness(50%)}.dateRangePicker-wrapper .modal-display{display:flex}.dateRangePicker-wrapper .modal-display .modal-dialog{box-shadow:none;display:flex}.dateRangePicker-wrapper .modal-content{border:0;border-radius:8px;box-shadow:0 0 10px 0 rgba(129,139,144,.5);display:flex;width:602px}.dateRangePicker-wrapper .modal-content .modal-footer .btn{width:auto}.dateRangePicker-wrapper .dateRangePickerModal{border-top-left-radius:5px;border-top-right-radius:5px;font-family:Roboto,Helvetica,Arial,sans-serif;overflow:visible;z-index:3000}@media screen and (min-width:576px){.dateRangePicker-wrapper .dateRangePickerModal{min-width:600px}}.dateRangePicker-wrapper .dateRangePickerModal.dateRangePicker-single,.dateRangePicker-wrapper .dateRangePickerModal.mobile{min-width:300px}.dateRangePicker-wrapper .dateRangePickerModal.dateRangePicker-single:after,.dateRangePicker-wrapper .dateRangePickerModal.dateRangePicker-single:before,.dateRangePicker-wrapper .dateRangePickerModal.mobile:after,.dateRangePicker-wrapper .dateRangePickerModal.mobile:before{border-bottom-color:#fff}.dateRangePicker-wrapper .dateRangePickerModal.is-chrome .form-inputs .input-with-icon span{position:relative;top:1px}.dateRangePicker-wrapper .dateRangePickerModal .btn,.dateRangePicker-wrapper .dateRangePickerModal .btn.btn-link{min-width:60px;width:60px}.dateRangePicker-wrapper .dateRangePickerModal .form-inputs{background-color:#6e777c;border-top-left-radius:5px;border-top-right-radius:5px;color:#fff;font-size:16px}.dateRangePicker-wrapper .dateRangePickerModal .form-inputs>.col{min-width:270px;padding:.5rem 15px}.dateRangePicker-wrapper .dateRangePickerModal .form-inputs .input-with-icon{align-content:flex-start;align-items:center!important;display:flex}.dateRangePicker-wrapper .dateRangePickerModal .form-inputs .input-with-icon i{color:#fff;margin-right:.5rem}.dateRangePicker-wrapper .dateRangePickerModal .form-inputs .input-with-icon i.material-icons{top:0}.dateRangePicker-wrapper .dateRangePickerModal .form-inputs .input-with-icon span{line-height:1}.dateRangePicker-wrapper .dateRangePickerModal .form-inputs .form-control{background:none;border:0;color:#fff;display:inline-block;padding:0;width:150px}.dateRangePicker-wrapper .dateRangePickerModal .form-inputs .form-control::-moz-placeholder{color:#fff}.dateRangePicker-wrapper .dateRangePickerModal .form-inputs .form-control::placeholder{color:#fff}.dateRangePicker-wrapper .dateRangePickerModal .row-1s .col__mobile{border-top:1px dotted #ccc;margin-top:1rem}.dateRangePicker-wrapper .dateRangePickerModal:not(.mobile) .form-inputs>div:nth-child(2),.dateRangePicker-wrapper .dateRangePickerModal:not(.mobile) .row-calendars>div:nth-child(2){border-left:2px solid #c6d1d6}.dateRangePicker-wrapper .dateRangePicker{background:#fff;border-radius:9px;box-shadow:0 0 10px 0 rgba(129,139,144,.5);font-family:Roboto,Helvetica,Arial,sans-serif;overflow:visible;position:absolute;top:88px;z-index:3000}@media screen and (min-width:576px){.dateRangePicker-wrapper .dateRangePicker{min-width:600px}}.dateRangePicker-wrapper .dateRangePicker.dateRangePicker-single,.dateRangePicker-wrapper .dateRangePicker.mobile{min-width:300px}.dateRangePicker-wrapper .dateRangePicker.dateRangePicker-single:after,.dateRangePicker-wrapper .dateRangePicker.dateRangePicker-single:before,.dateRangePicker-wrapper .dateRangePicker.mobile:after,.dateRangePicker-wrapper .dateRangePicker.mobile:before{border-bottom-color:#fff}.dateRangePicker-wrapper .dateRangePicker:after,.dateRangePicker-wrapper .dateRangePicker:before{border-bottom:10px solid #6e777c;border-left:10px solid transparent;border-right:10px solid transparent;content:\"\";height:0;position:absolute;top:-10px;width:0}.dateRangePicker-wrapper .dateRangePicker.open-left{left:0}.dateRangePicker-wrapper .dateRangePicker.open-left:before{left:10px}.dateRangePicker-wrapper .dateRangePicker.open-left:after{display:none}.dateRangePicker-wrapper .dateRangePicker.open-right{right:0}.dateRangePicker-wrapper .dateRangePicker.open-right:before{display:none}.dateRangePicker-wrapper .dateRangePicker.open-right:after{right:10px}.dateRangePicker-wrapper .dateRangePicker.is-chrome .form-inputs .input-with-icon span{position:relative;top:1px}.dateRangePicker-wrapper .dateRangePicker .btn,.dateRangePicker-wrapper .dateRangePicker .btn.btn-link{min-width:auto;width:auto}.dateRangePicker-wrapper .dateRangePicker .form-inputs{background-color:#6e777c;border-top-left-radius:5px;border-top-right-radius:5px;color:#fff;font-size:16px}.dateRangePicker-wrapper .dateRangePicker .form-inputs>.col{min-width:270px;padding:.5rem 15px}.dateRangePicker-wrapper .dateRangePicker .form-inputs .input-with-icon{align-content:flex-start;align-items:center!important;display:flex}.dateRangePicker-wrapper .dateRangePicker .form-inputs .input-with-icon i{color:#fff;margin-right:.5rem}.dateRangePicker-wrapper .dateRangePicker .form-inputs .input-with-icon i.material-icons{top:0}.dateRangePicker-wrapper .dateRangePicker .form-inputs .input-with-icon span{line-height:1}.dateRangePicker-wrapper .dateRangePicker .form-inputs .form-control{background:none;border:0;color:#fff;display:inline-block;padding:0;width:150px}.dateRangePicker-wrapper .dateRangePicker .form-inputs .form-control::-moz-placeholder{color:#fff}.dateRangePicker-wrapper .dateRangePicker .form-inputs .form-control::placeholder{color:#fff}.dateRangePicker-wrapper .dateRangePicker .row-calendars .col__mobile{border-top:1px dotted #ccc;margin-top:1rem}.dateRangePicker-wrapper .dateRangePicker:not(.mobile) .form-inputs>div:nth-child(2),.dateRangePicker-wrapper .dateRangePicker:not(.mobile) .row-calendars>div:nth-child(2){border-left:2px solid #c6d1d6}.dateRangePicker-wrapper i.material-icons{position:relative;top:2px}"]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"controlName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"instanceId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"parentFormGroup":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"fromDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"toDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"datepickerReset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":38,"character":3}}]}],"rangeSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":41,"character":3}}]}],"handleClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":64,"character":3},"arguments":["document:click",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"validateInputDates":[{"__symbolic":"method"}],"validateOptionDates":[{"__symbolic":"method"}],"checkChrome":[{"__symbolic":"method"}],"toggleCalendarVisibility":[{"__symbolic":"method"}],"setFromToMonthYear":[{"__symbolic":"method"}],"updateCalendar":[{"__symbolic":"method"}],"dateChanged":[{"__symbolic":"method"}],"emitRangeSelected":[{"__symbolic":"method"}],"getMoment":[{"__symbolic":"method"}],"formatRangeAsString":[{"__symbolic":"method"}],"setRange":[{"__symbolic":"method"}],"setDateFromInput":[{"__symbolic":"method"}],"monthChanged":[{"__symbolic":"method"}],"yearChanged":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"reset":[{"__symbolic":"method"}],"apply":[{"__symbolic":"method"}],"applyPredefinedRange":[{"__symbolic":"method"}],"validateAndAssignPredefinedRanges":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":4,"character":1},"arguments":[{"name":"formatMomentDate"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":6,"character":17},"member":"Emulated"},"selector":"manual-inputs","template":"<ng-container *ngIf=\"!isMobile\">\n\n\t<div class=\"row form-inputs mb-0\" *ngIf=\"!options.singleCalendar\">\n\t\t<div class=\"col\">\n\t\t\t<div *ngIf=\"options.icons !== 'default'\">\n\t\t\t\t<div [ngClass]=\"{ 'd-flex align-items-center input-with-icon': true, 'material': options.icons === 'material' }\">\n\t\t\t\t\t<i *ngIf=\"options.icons === 'material'\" class=\"material-icons\">event</i>\n\t\t\t\t\t<i *ngIf=\"options.icons === 'font-awesome'\" class=\"far fa-calendar-alt\"></i>\n\t\t\t\t\t<span *ngIf=\"fromDate\">From: </span>\n\t\t\t\t\t<input class=\"form-control\" [ngModel]=\"fromDate | formatMomentDate: options.format\" (blur)=\"setDateFromInput($event, true)\" type=\"text\" name=\"daterangepicker_start\" [ngModelOptions]=\"{ standalone: true }\" placeholder=\"Select From Date\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\n\t\t\t<input *ngIf=\"options.icons === 'default'\" class=\"form-control\" [ngModel]=\"fromDate | formatMomentDate: options.format\" (blur)=\"setDateFromInput($event, true)\" type=\"text\" name=\"daterangepicker_start\" [ngModelOptions]=\"{standalone: true}\" placeholder=\"Select From Date\" />\n\t\t</div>\n\t\n\t\t<div class=\"col\">\n\t\t\t<div *ngIf=\"options.icons !== 'default'\">\n\t\t\t\t\t<div [ngClass]=\"{ 'd-flex align-items-center input-with-icon': true, 'material': options.icons === 'material' }\">\n\t\t\t\t\t\t<i *ngIf=\"options.icons === 'material'\" class=\"material-icons\">event</i>\n\t\t\t\t\t\t<i *ngIf=\"options.icons === 'font-awesome'\" class=\"far fa-calendar-alt\"></i>\n\t\t\t\t\t\t<span *ngIf=\"toDate\">To: </span>\n\t\t\t\t\t\t<input class=\"form-control\" [ngModel]=\"toDate | formatMomentDate: options.format\" (blur)=\"setDateFromInput($event)\" type=\"text\" name=\"daterangepicker_end\" [ngModelOptions]=\"{ standalone: true }\" placeholder=\"Select To Date\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\n\t\t\t<input *ngIf=\"options.icons === 'default'\" class=\"form-control\" [ngModel]=\"toDate | formatMomentDate: options.format\" (blur)=\"setDateFromInput($event)\" name=\"daterangepicker_end\" [ngModelOptions]=\"{standalone: true}\" />\n\t\t</div>\n\t</div>\n</ng-container>","styles":[".is-chrome .form-inputs .input-with-icon span{position:relative;top:1px}.form-inputs{background-color:#6e777c;border-top-left-radius:8px;border-top-right-radius:8px;color:#fff;font-size:16px}.form-inputs>.col{min-width:270px;padding:.5rem 15px}.form-inputs .input-with-icon{align-content:flex-start;align-items:center!important;display:flex}.form-inputs .input-with-icon i{color:#fff;margin-right:.5rem}.form-inputs .input-with-icon i.material-icons{top:0}.form-inputs .input-with-icon span{line-height:1}.form-inputs .form-control{background:none;border:0;color:#fff;display:inline-block;padding:0;width:150px}.form-inputs .form-control::-moz-placeholder{color:#fff}.form-inputs .form-control::placeholder{color:#fff}:not(.mobile) .form-inputs>div:nth-child(2),:not(.mobile) .row-calendars>div:nth-child(2){border-left:2px solid #c6d1d6}"]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"fromDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"toDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"isMobile":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"dateFromInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":25,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"setDateFromInput":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":4,"character":17},"member":"Emulated"},"selector":"predefined-date-ranges","template":"<div class=\"row text-center my-3\">\n\t<div class=\"col\">\n\t\t<div class=\"row mb-2\" *ngIf=\"!options.singleCalendar && options.preDefinedRanges && options.preDefinedRanges.length > 0\">\n\t\t\t<div class=\"col\">\n\t\t\t\t<button type=\"button\" *ngFor=\"let range of options.preDefinedRanges\" class=\"btn btn-link\" (click)=\"applyPredefinedRange($event, range)\">{{ range.name }}</button>\n\t\t\t</div>\n\t\t</div>\n\t\t<ng-container *ngIf=\"!options.modal\">\n\t\t\t<button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"close($event)\">Close</button>\n\t\t\t<button type=\"button\" class=\"btn btn-outline-secondary btn-sm ml-3\" (click)=\"reset($event)\" *ngIf=\"range && options.showResetButton\">Reset</button>\n\t\t\t<button type=\"button\" class=\"btn btn-primary btn-sm ml-3\" [disabled]=\"!enableApplyButton\" (click)=\"apply($event)\" *ngIf=\"!options.autoApply\">Apply</button>\n\t\t</ng-container>\n\t</div>\n</div>","styles":[".btn,.btn.btn-link{min-width:60px}"]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"range":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"enableApplyButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"closeEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":20,"character":3}}]}],"resetEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":23,"character":3}}]}],"applyEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":26,"character":3}}]}],"predefinedRange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":29,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"applyPredefinedRange":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"reset":[{"__symbolic":"method"}],"apply":[{"__symbolic":"method"}]}}},"origins":{"NgxDateRangeModule":"./ngx-daterange.module","CalendarComponent":"./components/calendar/calendar.component","DateRangePickerComponent":"./components/datepicker/date-range-picker.component","ɵa":"./pipes/format-moment-date.pipe","ɵb":"./components/manual-inputs/manual-inputs.component","ɵc":"./components/predefined-date-ranges/predefined-date-ranges.component"},"importAs":"ngx-daterange"}