mat-daterangepicker
Version:
Angular material date picker extension to support range selection.
1 lines • 31.8 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"MatDaterangepickerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":27,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":29,"character":4},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":30,"character":4},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":31,"character":4},{"__symbolic":"reference","module":"@angular/cdk/a11y","name":"A11yModule","line":32,"character":4},{"__symbolic":"reference","module":"@angular/cdk/portal","name":"PortalModule","line":33,"character":4},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule","line":34,"character":4},{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepickerModule","line":35,"character":4},{"__symbolic":"reference","module":"@angular/material/core","name":"MatNativeDateModule","line":36,"character":4}],"declarations":[{"__symbolic":"reference","name":"MatDaterangepicker"},{"__symbolic":"reference","name":"MatDaterangepickerInputEnd"},{"__symbolic":"reference","name":"MatDaterangepickerContent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"}],"exports":[{"__symbolic":"reference","name":"MatDaterangepicker"},{"__symbolic":"reference","name":"MatDaterangepickerInputEnd"},{"__symbolic":"reference","name":"MatDaterangepickerContent"}],"entryComponents":[{"__symbolic":"reference","name":"MatDaterangepickerContent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":64,"character":18},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":64,"character":54}]}]}},"CustomRange":{"__symbolic":"interface"},"MAT_DEFAULT_DATES_RANGES":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":41,"character":44},"arguments":["Custom Ranges"]},"MatDaterangepicker":{"__symbolic":"class","arity":1,"extends":{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepicker","line":53,"character":43},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":43,"character":1},"arguments":[{"selector":"mat-daterangepicker","template":"","exportAs":"matDaterangepicker","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":47,"character":19},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":48,"character":17},"member":"None"},"providers":[{"provide":{"__symbolic":"reference","name":"MAT_DEFAULT_DATES_RANGES"},"useValue":[]}]}]}],"members":{"applyButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":2}}]}],"dualView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":2}}]}],"showCustomRanges":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":2}}]}],"apply":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":59,"character":2}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":81,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MAT_DATEPICKER_SCROLL_STRATEGY","line":81,"character":12}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":82,"character":5}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":83,"character":5}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":84,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":84,"character":17},"arguments":[{"__symbolic":"reference","module":"@angular/common","name":"DOCUMENT","line":84,"character":24}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":85,"character":5},"arguments":[{"__symbolic":"reference","name":"MAT_DEFAULT_DATES_RANGES"}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialog","line":77,"character":24},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay","line":78,"character":24},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":79,"character":23},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":80,"character":33},null,{"__symbolic":"reference","name":"DateAdapter","module":"@angular/material/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":82,"character":51,"context":{"typeName":"D"},"module":"./lib/datepicker/datepicker.component"}]},{"__symbolic":"reference","module":"@angular/cdk/bidi","name":"Directionality","line":83,"character":32},{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"any","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":85,"character":72,"context":{"typeName":"D"},"module":"./lib/datepicker/datepicker.component"}]}]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"forwardContentValues":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"selectRangeEnd":[{"__symbolic":"method"}],"_userSelection":[{"__symbolic":"method"}],"applyRange":[{"__symbolic":"method"}],"clearRange":[{"__symbolic":"method"}],"_getViews":[{"__symbolic":"method"}],"_registerInputRangeEnd":[{"__symbolic":"method"}],"_unregisterInputRangeEnd":[{"__symbolic":"method"}],"_selectRangeEnd":[{"__symbolic":"method"}],"_setCustomRanges":[{"__symbolic":"method"}]}},"SG_DATEPICKER_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":20,"character":11},"useExisting":{"__symbolic":"reference","name":"MatDaterangepickerInputEnd"},"multi":true},"SG_DATEPICKER_VALIDATORS":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALIDATORS","line":27,"character":11},"useExisting":{"__symbolic":"reference","name":"MatDaterangepickerInputEnd"},"multi":true},"MatDaterangepickerInputEnd":{"__symbolic":"class","arity":1,"extends":{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepickerInput","line":53,"character":51},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":33,"character":1},"arguments":[{"selector":"[matDaterangepickerEnd]","providers":[{"__symbolic":"reference","name":"SG_DATEPICKER_VALUE_ACCESSOR"},{"__symbolic":"reference","name":"SG_DATEPICKER_VALIDATORS"},{"provide":{"__symbolic":"reference","module":"@angular/material/input","name":"MAT_INPUT_VALUE_ACCESSOR","line":38,"character":14},"useExisting":{"__symbolic":"reference","name":"MatDaterangepickerInputEnd"}}],"host":{"[attr.aria-haspopup]":"true","[attr.aria-owns]":"(_datepicker?.opened && _datepicker.id) || null","[attr.min]":"min ? _dateAdapter.toIso8601(min) : null","[attr.max]":"max ? _dateAdapter.toIso8601(max) : null","[disabled]":"disabled","(input)":"_onInput($event.target.value)","(change)":"_onChange()","(blur)":"_onBlur()","(keydown)":"_onKeydown($event)","$quoted$":["[attr.aria-haspopup]","[attr.aria-owns]","[attr.min]","[attr.max]","[disabled]","(input)","(change)","(blur)","(keydown)"]},"exportAs":"MatDaterangepickerInputEnd"}]}],"members":{"matDaterangepickerEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":2}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":73,"character":5}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":74,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":74,"character":17},"arguments":[{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_DATE_FORMATS","line":74,"character":24}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":75,"character":5}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":72,"character":36},{"__symbolic":"reference","name":"DateAdapter","module":"@angular/material/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":73,"character":51,"context":{"typeName":"D"},"module":"./lib/datepicker/datepicker-input.directive"}]},{"__symbolic":"reference","module":"@angular/material/core","name":"MatDateFormats","line":74,"character":66},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormField","line":75,"character":38}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"unregister":[{"__symbolic":"method"}]}},"MatDaterangepickerContent":{"__symbolic":"class","arity":1,"extends":{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepickerContent","line":32,"character":50},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"mat-daterangepicker-content","host":{"class":"mat-datepicker-content","[@transformPanel]":"\"enter\"","[class.mat-datepicker-content-touch]":"datepicker.touchUi","[class.mat-datepicker-content-above]":"_isAbove","$quoted$":["class","[@transformPanel]","[class.mat-datepicker-content-touch]","[class.mat-datepicker-content-above]"]},"animations":[{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/material/datepicker","name":"matDatepickerAnimations","line":24,"character":4},"member":"transformPanel"},{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/material/datepicker","name":"matDatepickerAnimations","line":25,"character":4},"member":"fadeInCalendar"}],"exportAs":"matDaterangepickerContent","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":28,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":29,"character":19},"member":"OnPush"},"inputs":["color"],"template":"<div>\n\t<!-- \n\t\tRANGE: Most of the code is redundant and hera as inheritance boilerplate.\n\t\tThe relevant code is marked with a comment.\n\t\tADDED LOC ~3\n\t-->\n\t<div class=\"mat-daterange-calendars\" [ngStyle]=\"{'width': getWidthDateRangePicker()}\">\n\t\t<div *ngIf=\"drDatepicker.showCustomRanges && drDatepicker.customRanges.length\" class=\"mat-daterange-custom-ranges\">\n\t\t\t<button *ngFor=\"let range of drDatepicker.customRanges\" mat-flat-button [color]=\"isSameRange(range) ? 'primary' : ''\" (click)=\"setCustomRange(range)\" class=\"mat-daterange-calendar-button-action\">{{range.name}}</button>\n\t\t\t<button mat-flat-button [color]=\"!isSomeRange() ? 'primary' : ''\" class=\"mat-daterange-custom-range mat-daterange-calendar-button-action\">Custom Range</button>\n\t\t</div>\n\t\t<mat-daterange-calendar *ngFor=\"let view of drDatepicker._getViews()\" #Calendar cdkTrapFocus\n\t\t\t\t\t[id]=\"datepicker.id\"\n\t\t\t\t\t[ngClass]=\"datepicker.panelClass\"\n\t\t\t\t\tclass=\"mat-daterange-calendar\"\n\t\t\t\t\t[view]=\"view\"\n\t\t\t\t\t[setHoverCells]=\"setHoverCells\"\n\t\t\t\t\t[clearBody]=\"clearBody\"\n\t\t\t\t\t\n\t\t\t\t\t[startAt]=\"datepicker.startAt\"\n\t\t\t\t\t[startView]=\"datepicker.startView\"\n\t\t\t\t\t[minDate]=\"datepicker._minDate\"\n\t\t\t\t\t[maxDate]=\"datepicker._maxDate\"\n\t\t\t\t\t[dateFilter]=\"datepicker._dateFilter\"\n\t\t\t\t\t[headerComponent]=\"datepicker.calendarHeaderComponent\"\n\t\t\t\t\t[selected]=\"datepicker._selected\"\n\t\t\t\t\t[@fadeInCalendar]=\"'enter'\"\n\t\t\t\t\t(selectedChange)=\"datepicker.select($event)\"\n\t\t\t\t\t(yearSelected)=\"datepicker._selectYear($event)\"\n\t\t\t\t\t(monthSelected)=\"datepicker._selectMonth($event)\"\n\n\t\t\t\t\t[range]=\"!!drDatepicker._datepickerInputRangeEnd\"\n\t\t\t\t\t[selectedRangeEnd]=\"drDatepicker._selectedRangeEnd\"\n\t\t\t\t\t(selectedRangeEndChange)=\"drDatepicker.selectRangeEnd($event)\"\n\t\t\t\t\t(_userSelection)=\"onUserSelection(view)\">\n\t\t\t\t\t<!-- \n\t\t\t\t\t\t\tTHE 3 LINES ABOVE ARE THE ONLY ADDITION\n\t\t\t\t\t\t\tThe _userSelection will pass logic handling to the datepicker component\n\t\t\t\t\t\t\tinstead of closing the dialog/popup, this is because range logic is handled there.\n\n\t\t\t\t\t\t\tThe other attributes are passing on the additional date (Range end) bindings\n\t\t\t\t\t\t\tand a flag that sets range on/off based on the input range.\n\t\t\t\t\t\t\tThis means that an *ngIf on that input by the user can toggle range on/off without\n\t\t\t\t\t\t\ta special flag.\n\t\t\t\t\t-->\n\n\t\t</mat-daterange-calendar>\n\t</div>\n\n\t<div *ngIf=\"drDatepicker.applyButton\" class=\"mat-daterange-calendar-actions\">\n\t\t<button mat-button color=\"primary\" (click)=\"clearRange()\">Clear</button> \n\t\t<button mat-flat-button color=\"primary\" (click)=\"applyRange()\">Apply</button>\n\t</div>\n</div>","styles":[".mat-daterange-calendar-body-in-range{background-color:rgba(63,81,181,.15)}.mat-daterange-calendar-body-in-range.mat-daterange-calendar-body-range-start{border-radius:100% 0 0 100%}.mat-daterange-calendar-body-in-range.mat-daterange-calendar-body-range-end{border-radius:0 100% 100% 0}.mat-daterange-calendars{display:flex}.mat-daterange-calendar{flex-grow:1}.mat-daterange-calendar-actions{padding:15px;text-align:right}.mat-daterange-custom-ranges{display:flex;flex-flow:column;width:130px;padding:8px}.mat-daterange-custom-ranges button{text-align:left;font-size:12px;line-height:32px;font-weight:400!important}.mat-daterange-calendar-button-action{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}"]}]}],"members":{"_calendar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":33,"character":2},"arguments":[{"__symbolic":"reference","name":"ɵa"},{"static":true}]}]}],"calendars":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":42,"character":2},"arguments":[{"__symbolic":"reference","name":"ɵa"}]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onUserSelection":[{"__symbolic":"method"}],"applyRange":[{"__symbolic":"method"}],"clearRange":[{"__symbolic":"method"}],"setCustomRange":[{"__symbolic":"method"}],"isSameRange":[{"__symbolic":"method"}],"isSomeRange":[{"__symbolic":"method"}],"getWidthDateRangePicker":[{"__symbolic":"method"}],"setActiveDate":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"class","arity":1,"extends":{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatCalendar","line":23,"character":45},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":13,"character":1},"arguments":[{"selector":"mat-daterange-calendar","host":{"class":"mat-calendar","$quoted$":["class"]},"exportAs":"matDaterangeCalendar","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":20,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":21,"character":19},"member":"OnPush"},"template":"<!-- \n\tRANGE: Most of the code is redundant and hera as inheritance boilerplate.\n\tThe relevant code is marked with a comment.\n\tADDED LOC ~3\n-->\n<ng-template [cdkPortalOutlet]=\"_calendarHeaderPortal\"></ng-template>\n\n<div class=\"mat-calendar-content\" [ngSwitch]=\"currentView\" cdkMonitorSubtreeFocus tabindex=\"-1\">\n\n\t<mat-daterange-month-view\n\t\t*ngSwitchCase=\"'month'\"\n\t\t[view]=\"view\"\n\t\t[activeDate]=\"activeDate\"\n\t\t[selected]=\"selected\"\n\t\t[dateFilter]=\"dateFilter\"\n\t\t[maxDate]=\"maxDate\"\n\t\t[minDate]=\"minDate\"\n\t\t(selectedChange)=\"_dateSelected($event)\"\n\t\t(_userSelection)=\"_userSelected()\"\n\n\t\t[range]=\"range\"\n\t\t[setHoverCells]=\"setHoverCells\"\n\t\t[clearBody]=\"clearBody\"\n\t\t[selectedRangeEnd]=\"selectedRangeEnd\"\n\t\t(selectedRangeEndChange)=\"_dateSelectedRangeEnd($event)\">\n\t\t<!-- THE 3 LINES ABOVE ARE THE ONLY ADDITION -->\n\t</mat-daterange-month-view>\n\n\t<mat-year-view\n\t\t*ngSwitchCase=\"'year'\"\n\t\t[activeDate]=\"activeDate\"\n\t\t[selected]=\"selected\"\n\t\t[dateFilter]=\"dateFilter\"\n\t\t[maxDate]=\"maxDate\"\n\t\t[minDate]=\"minDate\"\n\t\t(monthSelected)=\"_monthSelectedInYearView($event)\"\n\t\t(selectedChange)=\"_goToDateInView($event, 'month')\">\n\t</mat-year-view>\n\n\t<mat-multi-year-view\n\t\t*ngSwitchCase=\"'multi-year'\"\n\t\t[activeDate]=\"activeDate\"\n\t\t[selected]=\"selected\"\n\t\t[dateFilter]=\"dateFilter\"\n\t\t[maxDate]=\"maxDate\"\n\t\t[minDate]=\"minDate\"\n\t\t(yearSelected)=\"_yearSelectedInMultiYearView($event)\"\n\t\t(selectedChange)=\"_goToDateInView($event, 'year')\">\n\t</mat-multi-year-view>\n</div>\n\n"}]}],"members":{"view":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":2}}]}],"setHoverCells":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":2}}]}],"clearBody":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":2}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":30,"character":5}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":31,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":31,"character":17},"arguments":[{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_DATE_FORMATS","line":31,"character":24}]}],null,null],"parameters":[{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepickerIntl","line":29,"character":20},{"__symbolic":"reference","name":"DateAdapter","module":"@angular/material/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":30,"character":42,"context":{"typeName":"D"},"module":"./lib/calendar/calendar.component"}]},{"__symbolic":"reference","module":"@angular/material/core","name":"MatDateFormats","line":31,"character":56},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":32,"character":23},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":33,"character":24}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"range":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":2}}]}],"selectedRangeEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":2}}]}],"selectedRangeEndChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":59,"character":2}}]}],"_dateSelectedRangeEnd":[{"__symbolic":"method"}],"getSecondViewActiveDate":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","arity":1,"extends":{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatMonthView","line":25,"character":46},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":17,"character":1},"arguments":[{"selector":"mat-daterange-month-view","exportAs":"matMonthView","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":21,"character":17},"member":"None"},"preserveWhitespaces":false,"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":23,"character":19},"member":"OnPush"},"template":"<!-- \n RANGE: Most of the code is redundant and hera as inheritance boilerplate.\n \n The 3 attributes in the middle are the additional bindings to the template.\n They notify the body:\n - Are we in range mode ([range])\n - Are all the dates in range ([allInRange])\n this happens when the start date is before the current month and the end is after it.\n - The value marking the end of the range ([selectedRangeEndValue])\n\n ADDED LOC ~3\n -->\n\n<table class=\"mat-calendar-table\">\n <thead class=\"mat-calendar-table-header\">\n <tr><th *ngFor=\"let day of _weekdays\" [attr.aria-label]=\"day.long\">{{day.narrow}}</th></tr>\n <tr><th class=\"mat-calendar-table-header-divider\" colspan=\"7\" aria-hidden=\"true\"></th></tr>\n </thead>\n <tbody mat-daterange-calendar-body\n [view]=\"view\"\n [label]=\"_monthLabel\"\n [rows]=\"_weeks\"\n [todayValue]=\"_todayDate\"\n [selectedValue]=\"_selectedDate\"\n\n [selectedRangeEndValue]=\"_selectedRangeEndDate\"\n [allInRange]=\"_allInRange\"\n [range]=\"_rangable\"\n [createDate]=\"_createDate\"\n [dateAdapter]=\"_dateAdapter\"\n [selected]=\"getSelectedDate()\"\n [selectedRangeEnd]=\"getSelectedRangeEndDate()\"\n [setHoverCells]=\"setHoverCells\"\n [clearBody]=\"clearBody\"\n [labelMinRequiredCells]=\"3\"\n [activeCell]=\"_dateAdapter.getDate(activeDate) - 1\"\n (selectedValueChange)=\"_dateSelected($event)\" \n (keydown)=\"_handleCalendarBodyKeydown($event)\">\n </tbody>\n</table>\n"}]}],"members":{"range":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":2}}]}],"view":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":2}}]}],"setHoverCells":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":2}}]}],"clearBody":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":2}}]}],"selectedRangeEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":2}}]}],"selectedRangeEndChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":77,"character":2}}]}],"_init":[{"__symbolic":"method"}],"_dateSelected":[{"__symbolic":"method"}],"_dateSelectedRangeEnd":[{"__symbolic":"method"}],"createDate":[{"__symbolic":"method"}],"getSelectedDate":[{"__symbolic":"method"}],"getSelectedRangeEndDate":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","arity":1,"extends":{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatCalendarBody","line":24,"character":49},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"[mat-daterange-calendar-body]","host":{"class":"mat-calendar-body","[class.mat-daterange-calendar-body-range]":"range","role":"grid","attr.aria-readonly":"true","$quoted$":["class","[class.mat-daterange-calendar-body-range]","role","attr.aria-readonly"]},"exportAs":"matCalendarBody","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":20,"character":17},"member":"None"},"preserveWhitespaces":false,"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":22,"character":19},"member":"OnPush"},"template":"<!-- \n RANGE: Most of the code is redundant and hera as inheritance boilerplate.\n The relevant code is all element attribute bindings with the word \"range\"\n and an editing to the binding of [class.mat-calendar-body-selected]\n\n ADDED LOC ~3\n -->\n\n<!--\n If there's not enough space in the first row, create a separate label row. We mark this row as\n aria-hidden because we don't want it to be read out as one of the weeks in the month.\n-->\n<tr *ngIf=\"_firstRowOffset < labelMinRequiredCells\" aria-hidden=\"true\">\n\t<td class=\"mat-calendar-body-label\"\n\t\t[attr.colspan]=\"numCols\"\n\t\t[style.paddingTop.%]=\"50 * cellAspectRatio / numCols\"\n\t\t[style.paddingBottom.%]=\"50 * cellAspectRatio / numCols\">\n\t\t{{label}}\n\t</td>\n</tr>\n\n<!-- Create the first row separately so we can include a special spacer cell. -->\n<tr *ngFor=\"let row of rows; let rowIndex = index\" #Row role=\"row\">\n\t<!--\n\t\tWe mark this cell as aria-hidden so it doesn't get read out as one of the days in the week.\n\t\tThe aspect ratio of the table cells is maintained by setting the top and bottom padding as a\n\t\tpercentage of the width (a variant of the trick described here:\n\t\thttps://www.w3schools.com/howto/howto_css_aspect_ratio.asp).\n\t-->\n\t<td *ngIf=\"rowIndex === 0 && _firstRowOffset\"\n\t\taria-hidden=\"true\"\n\t\tclass=\"mat-calendar-body-label\"\n\t\t[attr.colspan]=\"_firstRowOffset\"\n\t\t[style.paddingTop.%]=\"50 * cellAspectRatio / numCols\"\n\t\t[style.paddingBottom.%]=\"50 * cellAspectRatio / numCols\">\n\t\t{{_firstRowOffset >= labelMinRequiredCells ? label : ''}}\n\t</td>\n\t<td *ngFor=\"let item of row; let colIndex = index\"\n\t\t#Cell\n\t\trole=\"gridcell\"\n\t\tclass=\"mat-calendar-body-cell\"\n\t\t[tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n\t\t[class.mat-calendar-body-disabled]=\"!item.enabled\"\n\t\t[class.mat-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\"\n\n\t\t[ngClass]=\"_cellClass(item.value)\"\n\n\t\t[attr.aria-label]=\"item.ariaLabel\"\n\t\t[attr.aria-disabled]=\"!item.enabled || null\"\n\t\t(click)=\"_cellClicked(item)\"\n\t\t(mouseover)=\"_onHoverCell(item.value)\"\n\t\t[style.width.%]=\"100 / numCols\"\n\t\t[style.paddingTop.%]=\"50 * cellAspectRatio / numCols\"\n\t\t[style.paddingBottom.%]=\"50 * cellAspectRatio / numCols\">\n\t\t<div class=\"mat-calendar-body-cell-content\"\n\t\t\t[class.mat-calendar-body-selected]=\"selectedValue === item.value || selectedRangeEndValue === item.value\"\n\t\t\t[class.mat-calendar-body-today]=\"todayValue === item.value\">\n\t\t{{item.displayValue}}\n\t\t</div>\n\t</td>\n</tr>\n"}]}],"members":{"range":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":2}}]}],"allInRange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":2}}]}],"selectedRangeEndValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":2}}]}],"view":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":2}}]}],"createDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":2}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":2}}]}],"selectedRangeEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":2}}]}],"setHoverCells":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":2}}]}],"clearBody":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":2}}]}],"dateAdapter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":2}}]}],"rowsElms":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":37,"character":2},"arguments":["Row"]}]}],"ngOnInit":[{"__symbolic":"method"}],"_cellClass":[{"__symbolic":"method"}],"_inRange":[{"__symbolic":"method"}],"_onHoverCell":[{"__symbolic":"method"}],"_doHoverCells":[{"__symbolic":"method"}],"_inRangeTemp":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}},"origins":{"MatDaterangepickerModule":"./lib/mat-daterangepicker.module","CustomRange":"./lib/datepicker/datepicker.component","MAT_DEFAULT_DATES_RANGES":"./lib/datepicker/datepicker.component","MatDaterangepicker":"./lib/datepicker/datepicker.component","SG_DATEPICKER_VALUE_ACCESSOR":"./lib/datepicker/datepicker-input.directive","SG_DATEPICKER_VALIDATORS":"./lib/datepicker/datepicker-input.directive","MatDaterangepickerInputEnd":"./lib/datepicker/datepicker-input.directive","MatDaterangepickerContent":"./lib/datepicker-content/datepicker-content.component","ɵa":"./lib/calendar/calendar.component","ɵb":"./lib/month-view/month-view.component","ɵc":"./lib/calendar-body/calendar-body.component"},"importAs":"mat-daterangepicker"}