@eduardsson/ngx-daterange/eduardsson-ngx-daterange.metadata.json

Date-Range Selector for Angular

{"__symbolic":"module","version":4,"exports":[{"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":14,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"CalendarComponent"},{"__symbolic":"reference","name":"DateRangePickerComponent"},{"__symbolic":"reference","name":"ɵa"}],"exports":[{"__symbolic":"reference","name":"CalendarComponent"},{"__symbolic":"reference","name":"DateRangePickerComponent"},{"__symbolic":"reference","name":"ɵa"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":20,"character":4}]}]}],"members":{}},"CalendarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":18,"character":1},"arguments":[{"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":19,"character":19},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":20,"character":17},"member":"None"},"selector":"calendar","template":"<div class=\"row\">\n  <div class=\"col text-center\">\n    <div\n      class=\"d-flex align-items-center calendar-pagination {{\n        icons === 'material' ? 'material' : ''\n      }}\"\n    >\n      <div>\n        <button\n          type=\"button\"\n          class=\"btn btn-link btn-previous-year\"\n          (click)=\"yearSelected($event, { value: -1 })\"\n        >\n          <i *ngIf=\"icons === 'material'\" class=\"material-icons\">first_page</i>\n          <i\n            *ngIf=\"icons === 'font-awesome'\"\n            class=\"fas fa-angle-double-left\"\n          ></i>\n          <img\n            *ngIf=\"icons === 'default'\"\n            src=\"data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0MDcuNDM2IDQwNy40MzYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQwNy40MzYgNDA3LjQzNjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiPgo8Zz4KCTxwb2x5Z29uIHBvaW50cz0iMjY2LjQ1MiwyMS4xNzggMjQ1LjIwNCwwIDQyLjE0OSwyMDMuNzE4IDI0NS4yMDQsNDA3LjQzNiAyNjYuNDUyLDM4Ni4yNTggODQuNTA3LDIwMy43MTggICIgZmlsbD0iIzAwMDAwMCIvPgoJPHBvbHlnb24gcG9pbnRzPSIzNjUuMjg2LDIxLjE3OCAzNDQuMDM4LDAgMTQwLjk4MywyMDMuNzE4IDM0NC4wMzgsNDA3LjQzNiAzNjUuMjg2LDM4Ni4yNTggMTgzLjM0MSwyMDMuNzE4ICAiIGZpbGw9IiMwMDAwMDAiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K\"\n          />\n        </button>\n      </div>\n      <div>\n        <button\n          type=\"button\"\n          class=\"btn btn-link btn-previous-month\"\n          (click)=\"monthSelected($event, { value: -1 })\"\n        >\n          <i *ngIf=\"icons === 'material'\" class=\"material-icons\"\n            >chevron_left</i\n          >\n          <i *ngIf=\"icons === 'font-awesome'\" class=\"fas fa-angle-left\"></i>\n          <img\n            *ngIf=\"icons === 'default'\"\n            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          />\n        </button>\n      </div>\n      <div class=\"flex-grow-1 month-year\">{{ monthText }} {{ year }}</div>\n      <div>\n        <button\n          type=\"button\"\n          class=\"btn btn-link btn-next-month\"\n          (click)=\"monthSelected($event, { value: 1 })\"\n        >\n          <i *ngIf=\"icons === 'material'\" class=\"material-icons\"\n            >chevron_right</i\n          >\n          <i *ngIf=\"icons === 'font-awesome'\" class=\"fas fa-angle-right\"></i>\n          <img\n            *ngIf=\"icons === 'default'\"\n            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          />\n        </button>\n      </div>\n      <div>\n        <button\n          type=\"button\"\n          class=\"btn btn-link btn-next-year\"\n          (click)=\"yearSelected($event, { value: 1 })\"\n        >\n          <i *ngIf=\"icons === 'material'\" class=\"material-icons\">last_page</i>\n          <i\n            *ngIf=\"icons === 'font-awesome'\"\n            class=\"fas fa-angle-double-right\"\n          ></i>\n          <img\n            *ngIf=\"icons === 'default'\"\n            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          />\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\">\n      <thead>\n        <tr class=\"week-days\">\n          <th *ngFor=\"let day of getWeekDays()\">{{ day }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngFor=\"let week of weekList; let i = index\">\n          <td\n            *ngFor=\"let day of weekList[i]\"\n            (click)=\"dateSelected($event, { day: day })\"\n            [ngClass]=\"{\n              selected: isSelectedDate(day),\n              'in-selected-range': isDateInRange(day),\n              disabled: isDisabled(day),\n              'different-month': isDifferentMonth(day)\n            }\"\n          >\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.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 th,.calendar .table td{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;width:32px;max-width:32px}.calendar .table td:not(.disabled):not(.selected):hover{background-color:#eee;color:#333}.calendar .table td.selected{background-color:#003d79;border-radius:5px;color:#fff;font-size:12px}.calendar .table td.selected.in-selected-range{background-color:#003d79;border-radius:5px}.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}\n"]}]}],"members":{"month":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"year":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"selectedFromDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"selectedToDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"isLeft":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"format":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"minDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"maxDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3}}]}],"singleCalendar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3}}]}],"icons":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":3}}]}],"dateChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":56,"character":3}}]}],"monthChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":59,"character":3}}]}],"yearChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":62,"character":3}}]}],"ngOnChanges":[{"__symbolic":"method"}],"getWeekDays":[{"__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":24,"character":1},"arguments":[{"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":25,"character":17},"member":"None"},"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 [ngClass]=\"{'dateRangePicker': true, 'invisible': !showCalendars, 'dateRangePicker-single': options.singleCalendar, 'is-chrome': checkChrome(), 'open-left': options.position === 'left', 'open-right': options.position === 'right' }\">\n      <div class=\"container-fluid\">\n        <div class=\"row\">\n          <div class=\"col\">\n\n            <div class=\"row form-inputs mb-0\" *ngIf=\"!options.singleCalendar\">\n\n              <div class=\"col\">\n                <div class=\"\" *ngIf=\"options.icons !== 'default'\">\n                  <div [ngClass]=\"{ 'd-flex align-items-center input-with-icon': true, 'material': options.icons === 'material'}\">\n                    <i *ngIf=\"options.icons === 'material'\" class=\"material-icons\">event</i>\n                    <i *ngIf=\"options.icons === 'font-awesome'\" class=\"far fa-calendar-alt\"></i>\n                    <span *ngIf=\"fromDate\">From:&nbsp;</span>\n                    <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                  </div>\n                </div>\n\n                <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              </div>\n\n              <div class=\"col\">\n                <div class=\"\" *ngIf=\"options.icons !== 'default'\">\n                    <div [ngClass]=\"{ 'd-flex align-items-center input-with-icon': true, 'material': options.icons === 'material'}\">\n                      <i *ngIf=\"options.icons === 'material'\" class=\"material-icons\">event</i>\n                      <i *ngIf=\"options.icons === 'font-awesome'\" class=\"far fa-calendar-alt\"></i>\n                      <span *ngIf=\"toDate\">To:&nbsp;</span>\n                      <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                    </div>\n                  </div>\n\n                <input *ngIf=\"options.icons === 'default'\" class=\"form-control\" [ngModel]=\"toDate | formatMomentDate: options.format\" (blur)=\"setDateFromInput($event)\" name=\"daterangepicker_end\" [ngModelOptions]=\"{standalone: true}\" />\n              </div>\n\n            </div>\n\n            <div class=\"row row-calendars\">\n              <div class=\"col\">\n                <calendar [ngClass]=\"{ 'calendar': true, 'calendar-single': options.singleCalendar }\" [isLeft]=\"true\" [month]=\"fromMonth\" [year]=\"fromYear\" (monthChanged)=monthChanged($event)\n                  (yearChanged)=\"yearChanged($event)\" (dateChanged)=\"dateChanged($event)\" [format]=\"options.format\" [selectedFromDate]=\"fromDate\"\n                  [selectedToDate]=\"toDate\" [minDate]=\"options.minDate\" [maxDate]=\"options.maxDate\" [singleCalendar]=\"options.singleCalendar\" [icons]=\"options.icons\"></calendar>\n              </div>\n\n              <div class=\"col\" *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        <div class=\"row text-center my-3\" *ngIf=\"!options.singleCalendar\">\n          <div class=\"col\">\n            <div class=\"row mb-2\" *ngIf=\"options.preDefinedRanges && options.preDefinedRanges.length > 0\">\n              <div class=\"col\">\n                <button type=\"button\" *ngFor=\"let range of options.preDefinedRanges\" class=\"btn btn-link\" (click)=\"applyPredefinedRange($event, range)\">{{ range.name }}</button>\n              </div>\n            </div>\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=\"this.range\">Reset</button>\n            <button type=\"button\" class=\"btn btn-primary btn-sm ml-3\" [disabled]=\"!enableApplyButton\" (click)=\"apply($event)\" *ngIf=\"!isAutoApply()\">Apply</button>\n          </div>\n        </div>\n\n      </div>\n    </div>\n\n  </div>\n</div>\n","styles":[".dateRangePicker-wrapper{position:relative;border:none}.dateRangePicker-wrapper .dateRangePicker{background:#fff;border-radius:9px;box-shadow:0 0 10px #818b9080;font-family:\"Roboto\",Helvetica,Arial,sans-serif;overflow:visible;position:absolute;top:88px;z-index:3000}.dateRangePicker-wrapper .dateRangePicker.dateRangePicker-single{min-width:300px}@media screen and (min-width: 576px){.dateRangePicker-wrapper .dateRangePicker{min-width:600px}}.dateRangePicker-wrapper .dateRangePicker:before,.dateRangePicker-wrapper .dateRangePicker:after{content:\"\";height:0px;width:0px;border-bottom:10px solid #6E777C;border-left:10px solid transparent;border-right:10px solid transparent;position:absolute;top:-10px}.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:8px;border-top-right-radius:8px;color:#fff;font-size:16px}.dateRangePicker-wrapper .dateRangePicker .form-inputs>.col{padding:.5rem 15px;min-width:270px}.dateRangePicker-wrapper .dateRangePicker .form-inputs .input-with-icon{display:flex;align-content:flex-start;align-items:center!important}.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 none;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 .form-inputs>div:nth-child(2),.dateRangePicker-wrapper .dateRangePicker .row-calendars>div:nth-child(2){border-left:solid 2px #C6D1D6}.dateRangePicker-wrapper i.material-icons{position:relative;top:2px}\n"]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"controlName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"instanceId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"parentFormGroup":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"fromDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"toDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"rangeSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":49,"character":3}}]}],"handleClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":69,"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"}],"isAutoApply":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"formatMomentDate"}]}],"members":{"transform":[{"__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"},"importAs":"@eduardsson/ngx-daterange"}