ng-mat-daterange-picker/dist/bundles/ng-mat-daterange-picker.umd.min.js

[](https://circleci.com/gh/ashishgkwd/ngx-mat-daterange-picker) [](https

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@angular/cdk/overlay"),require("@angular/cdk/portal"),require("rxjs/operators"),require("rxjs"),require("@angular/animations"),require("@angular/material/form-field"),require("@angular/material/datepicker"),require("@angular/material/core"),require("@angular/material/input"),require("@angular/material/button"),require("@angular/material/tooltip")):"function"==typeof define&&define.amd?define("ng-mat-daterange-picker",["exports","@angular/core","@angular/common","@angular/cdk/overlay","@angular/cdk/portal","rxjs/operators","rxjs","@angular/animations","@angular/material/form-field","@angular/material/datepicker","@angular/material/core","@angular/material/input","@angular/material/button","@angular/material/tooltip"],t):t((e=e||self)["ng-mat-daterange-picker"]={},e.ng.core,e.ng.common,e.ng.cdk.overlay,e.ng.cdk.portal,e.rxjs.operators,e.rxjs,e.ng.animations,e.ng.material.formField,e.ng.material.datepicker,e.ng.material.core,e.ng.material.input,e.ng.material.button,e.ng.material.tooltip)}(this,(function(e,t,r,n,a,o,i,s,p,l,c,d,u,g){"use strict";
/*! *****************************************************************************
    Copyright (c) Microsoft Corporation. All rights reserved.
    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
    this file except in compliance with the License. You may obtain a copy of the
    License at http://www.apache.org/licenses/LICENSE-2.0

    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
    MERCHANTABLITY OR NON-INFRINGEMENT.

    See the Apache Version 2.0 License for specific language governing permissions
    and limitations under the License.
    ***************************************************************************** */Object.setPrototypeOf;var m=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var a in t=arguments[r])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e};function f(e,t,r,n){var a,o=arguments.length,i=o<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,r):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,n);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(i=(o<3?a(i):o>3?a(t,r,i):a(t,r))||i);return o>3&&i&&Object.defineProperty(t,r,i),i}function h(e,t){return function(r,n){t(r,n,e)}}var v=new t.InjectionToken("date"),y=function(){function e(e,t){this._fromDate=e,this._toDate=t,this.rangeUpdate$=new i.Subject}return Object.defineProperty(e.prototype,"fromDate",{get:function(){return this._fromDate},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"toDate",{get:function(){return this._toDate},enumerable:!0,configurable:!0}),e.prototype.updateRange=function(e,t){void 0===e&&(e=this._fromDate),void 0===t&&(t=this._toDate),this._fromDate=e,this._toDate=t,this.rangeUpdate$.next({fromDate:this._fromDate,toDate:this._toDate})},e.ctorParameters=function(){return[{type:Date,decorators:[{type:t.Inject,args:[v]}]},{type:Date,decorators:[{type:t.Inject,args:[v]}]}]},e=f([t.Injectable(),h(0,t.Inject(v)),h(1,t.Inject(v))],e)}(),D=function(){function e(){this.defaultOptions={excludeWeekends:!1,animation:!0,locale:"en-US",fromMinMax:{fromDate:null,toDate:null},toMinMax:{fromDate:null,toDate:null}}}return Object.defineProperty(e.prototype,"ngxDrpOptions",{get:function(){return this._ngxDrpOptions},set:function(e){this._ngxDrpOptions=m(m({},this.defaultOptions),e)},enumerable:!0,configurable:!0}),e=f([t.Injectable()],e)}(),x={transformPanel:s.trigger("transformPickerOverlay",[s.state("void",s.style({opacity:0,transform:"scale(1, 0)"})),s.state("enter",s.style({opacity:1,transform:"scale(1, 1)"})),s.transition("void => enter",s.group([s.animate("400ms cubic-bezier(0.25, 0.8, 0.25, 1)")])),s.transition("* => void",s.animate("100ms linear",s.style({opacity:0})))])},b=function(){function e(e,t,r){this.rangeStoreService=e,this.configStoreService=t,this.overlayRef=r,this.presets=[]}return e.prototype.ngOnInit=function(){var e,t;this.fromDate=this.rangeStoreService.fromDate,this.toDate=this.rangeStoreService.toDate,this.startDatePrefix=this.configStoreService.ngxDrpOptions.startDatePrefix||"FROM:",this.endDatePrefix=this.configStoreService.ngxDrpOptions.endDatePrefix||"TO:",this.applyLabel=this.configStoreService.ngxDrpOptions.applyLabel||"Apply",this.cancelLabel=this.configStoreService.ngxDrpOptions.cancelLabel||"Cancel",this.presets=this.configStoreService.ngxDrpOptions.presets,this.shouldAnimate=this.configStoreService.ngxDrpOptions.animation?"enter":"noop",e=this.configStoreService.ngxDrpOptions.fromMinMax,this.fromMinDate=e.fromDate,this.fromMaxDate=e.toDate,t=this.configStoreService.ngxDrpOptions.toMinMax,this.toMinDate=t.fromDate,this.toMaxDate=t.toDate},e.prototype.updateFromDate=function(e){this.fromDate=e},e.prototype.updateToDate=function(e){this.toDate=e},e.prototype.updateRangeByPreset=function(e){this.updateFromDate(e.range.fromDate),this.updateToDate(e.range.toDate)},e.prototype.applyNewDates=function(e){this.rangeStoreService.updateRange(this.fromDate,this.toDate),this.disposeOverLay()},e.prototype.discardNewDates=function(e){this.disposeOverLay()},e.prototype.disposeOverLay=function(){this.overlayRef.dispose()},e.ctorParameters=function(){return[{type:y},{type:D},{type:n.OverlayRef}]},e=f([t.Component({selector:"ngx-mat-drp-picker-overlay",template:'<div [@transformPickerOverlay]="shouldAnimate" class="ngx-mat-drp-calendar-container">\r\n\r\n  <div class="ngx-mat-drp-calendar-item">\r\n    <calendar-wrapper \r\n    [prefixLabel]="startDatePrefix"\r\n    [selectedDate]="fromDate"\r\n    [minDate]="fromMinDate"\r\n    [maxDate]="fromMaxDate"\r\n    (selectedDateChange)="updateFromDate($event)">\r\n  </calendar-wrapper>\r\n  </div>\r\n  <div class="ngx-mat-drp-calendar-item">\r\n    <calendar-wrapper \r\n    [prefixLabel]="endDatePrefix"\r\n    [selectedDate]="toDate"\r\n    [minDate]="toMinDate"\r\n    [maxDate]="toMaxDate" \r\n    (selectedDateChange)="updateToDate($event)">\r\n  </calendar-wrapper>\r\n  </div>\r\n  <div class="ngx-mat-drp-calendar-item">\r\n    <div class="ngx-mat-drp-menu">\r\n      <mat-drp-presets [presets]="presets" (presetChanged)="updateRangeByPreset($event)"></mat-drp-presets>\r\n      <div class="ngx-mat-drp-controls">\r\n        <button mat-button color="primary" (click)="applyNewDates($event)">{{applyLabel}}</button>\r\n        <button mat-button (click)="discardNewDates($event)">{{cancelLabel}}</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n',animations:[x.transformPanel],encapsulation:t.ViewEncapsulation.None,styles:['.ngx-mat-drp-calendar-container{display:-webkit-box;display:flex;justify-content:space-around;min-width:650px;height:300px}.ngx-mat-drp-calendar-item{flex-basis:33.33%;min-width:210px;padding:1em;font-family:Roboto,"Helvetica Neue",sans-serif;font-size:14px;font-weight:400}.ngx-mat-drp-menu{height:100%}.ngx-mat-drp-controls{display:-webkit-box;display:flex;justify-content:space-around;margin:10% auto}.ngx-mat-drp-overlay{box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);background:#fff;border-radius:2px}.ngx-mat-drp-overlay-backdrop{background-color:rgba(0,0,0,.2);opacity:.2}']})],e)}(),S={panelClass:"ngx-mat-drp-overlay",hasBackdrop:!0,backdropClass:"ngx-mat-drp-overlay-backdrop",shouldCloseOnBackdropClick:!0},O=function(){function e(e,t){this.overlay=e,this.injector=t}return e.prototype.open=function(e,t){void 0===e&&(e={}),this.hostElemRef=t;var r=m(m({},S),e),n=this.createOverlay(r),i=this.createInjector(n),s=new a.ComponentPortal(b,null,i);return n.attach(s),n.backdropClick().pipe(o.takeWhile((function(){return r.shouldCloseOnBackdropClick}))).subscribe((function(){return n.dispose()})),n},e.prototype.createOverlay=function(e){var t=this.getOverlayConfig(e);return this.overlay.create(t)},e.prototype.getOverlayConfig=function(e){var t=this.overlay.position().flexibleConnectedTo(this.hostElemRef).withFlexibleDimensions(!1).withViewportMargin(8).withDefaultOffsetY(12).withPositions([{originX:"start",originY:"bottom",overlayX:"start",overlayY:"top"},{originX:"start",originY:"top",overlayX:"start",overlayY:"bottom"},{originX:"end",originY:"bottom",overlayX:"end",overlayY:"top"},{originX:"end",originY:"top",overlayX:"end",overlayY:"bottom"}]);return new n.OverlayConfig({hasBackdrop:e.hasBackdrop,backdropClass:e.backdropClass,panelClass:e.panelClass,scrollStrategy:this.overlay.scrollStrategies.block(),positionStrategy:t})},e.prototype.createInjector=function(e){var t=new WeakMap;return t.set(n.OverlayRef,e),new a.PortalInjector(this.injector,t)},e.ctorParameters=function(){return[{type:n.Overlay},{type:t.Injector}]},e=f([t.Injectable()],e)}(),C=function(){function e(e,r,n,a,o){this.changeDetectionRef=e,this.calendarOverlayService=r,this.rangeStoreService=n,this.configStoreService=a,this.datePipe=o,this.selectedDateRangeChanged=new t.EventEmitter,this.selectedDateRange=""}return e.prototype.ngOnInit=function(){var e=this;this.configStoreService.ngxDrpOptions=this.options,this.options.placeholder=this.options.placeholder||"Choose a date",this.rangeUpdate$=this.rangeStoreService.rangeUpdate$.subscribe((function(t){var r=e.formatToDateString(t.fromDate,e.options.format),n=e.formatToDateString(t.toDate,e.options.format);e.selectedDateRange=r+" - "+n,e.selectedDateRangeChanged.emit(t)})),this.rangeStoreService.updateRange(this.options.range.fromDate,this.options.range.toDate),this.changeDetectionRef.detectChanges()},e.prototype.ngOnDestroy=function(){this.rangeUpdate$&&this.rangeUpdate$.unsubscribe()},e.prototype.formatToDateString=function(e,t){return this.datePipe.transform(e,t)},e.prototype.openCalendar=function(e){this.calendarOverlayService.open(this.options.calendarOverlayConfig,this.calendarInput)},e.prototype.resetDates=function(e){this.rangeStoreService.updateRange(e.fromDate,e.toDate)},e.ctorParameters=function(){return[{type:t.ChangeDetectorRef},{type:O},{type:y},{type:D},{type:r.DatePipe}]},f([t.ViewChild("calendarInput",{static:!1})],e.prototype,"calendarInput",void 0),f([t.Output()],e.prototype,"selectedDateRangeChanged",void 0),f([t.Input()],e.prototype,"options",void 0),e=f([t.Component({selector:"ngx-mat-drp",template:'<div> \r\n  \r\n  <mat-form-field class="ngx-mat-drp-date-display">\r\n    <input class="ngx-mat-drp-date-input"\r\n          matInput [placeholder]="options.placeholder"\r\n          [value]="selectedDateRange"\r\n          [matTooltip]="selectedDateRange"\r\n          (click)="openCalendar($event)"\r\n          readonly\r\n          #calendarInput >\r\n    <div matSuffix \r\n          class="ngx-mat-drp-calendar"\r\n          (click)="openCalendar($event)">\r\n    </div>\r\n  </mat-form-field>\r\n  \r\n</div>    \r\n',providers:[O,y,D,r.DatePipe],changeDetection:t.ChangeDetectionStrategy.OnPush,styles:['.ngx-mat-drp-date-display{min-width:230px}.ngx-mat-drp-date-input{text-overflow:ellipsis;color:#4169e1}.ngx-mat-drp-calendar{background-image:url(\'data:image/svg+xml,<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">    <path d="M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z"/>    <path d="M0 0h24v24H0z" fill="none"/></svg>\');width:24px;height:24px}']})],e)}(),k=function(){function e(e){this.configStore=e,this.selectedDateChange=new t.EventEmitter,this.weekendFilter=function(e){return!0},this.dateFormat=e.ngxDrpOptions.format,e.ngxDrpOptions.excludeWeekends&&(this.weekendFilter=function(e){var t=e.getDay();return 0!==t&&6!==t})}return e.prototype.ngOnChanges=function(e){this.matCalendar.activeDate=e.selectedDate.currentValue},e.prototype.onSelectedChange=function(e){this.selectedDateChange.emit(e)},e.prototype.onYearSelected=function(e){},e.prototype.onUserSelection=function(e){},e.ctorParameters=function(){return[{type:D}]},f([t.ViewChild(l.MatCalendar,{static:!1})],e.prototype,"matCalendar",void 0),f([t.Output()],e.prototype,"selectedDateChange",void 0),f([t.Input()],e.prototype,"selectedDate",void 0),f([t.Input()],e.prototype,"prefixLabel",void 0),f([t.Input()],e.prototype,"minDate",void 0),f([t.Input()],e.prototype,"maxDate",void 0),e=f([t.Component({selector:"calendar-wrapper",template:'<div>\r\n\r\n  \x3c!-- <mat-divider></mat-divider> --\x3e\r\n  <span class="ngx-mat-drp-date-label">\r\n    <label>{{prefixLabel}}</label>\r\n    <label class="ngx-mat-drp-selected-date-label">{{selectedDate | date:dateFormat}}</label>\r\n  </span>\r\n  \x3c!-- <mat-divider></mat-divider> --\x3e\r\n\r\n  <mat-calendar \r\n    [startAt]="selectedDate"\r\n    [selected]="selectedDate"\r\n    [minDate]="minDate"\r\n    [maxDate]="maxDate"\r\n    (selectedChange)="onSelectedChange($event)"\r\n    (yearSelected)="onYearSelected($event)"\r\n    (_userSelection)="onUserSelection($event)"\r\n    [dateFilter]="weekendFilter">\r\n  </mat-calendar>\r\n\r\n</div>',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:[".ngx-mat-drp-date-label{background:#fafafa;margin:15px;padding:4px 2px;width:100%;font-size:14px;font-weight:500}.ngx-mat-drp-selected-date-label{color:rgba(0,0,0,.38);padding-left:5%}"]})],e)}(),w=function(){function e(){this.presetChanged=new t.EventEmitter}return e.prototype.ngOnInit=function(){},e.prototype.setPresetPeriod=function(e){this.presetChanged.emit(e)},f([t.Input()],e.prototype,"presets",void 0),f([t.Output()],e.prototype,"presetChanged",void 0),e=f([t.Component({selector:"mat-drp-presets",template:'<div>\r\n  <ul class="ngx-mat-drp-presets-list">\r\n    <li *ngFor="let preset of presets" (click)="setPresetPeriod(preset)"> {{preset.presetLabel}} </li>\r\n  </ul>\r\n</div>',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:[".ngx-mat-drp-presets-list{list-style-type:none;margin:0;padding:0}.ngx-mat-drp-presets-list li{margin:5px 0;padding:4%;cursor:pointer;background:#fafafa;color:#3f51b5;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ngx-mat-drp-presets-list li:hover{background:#3f51b5;color:#fff}"]})],e)}(),M=new Date,P=function(){function e(){}return e=f([t.NgModule({imports:[r.CommonModule,p.MatFormFieldModule,l.MatDatepickerModule,c.MatNativeDateModule,d.MatInputModule,u.MatButtonModule,g.MatTooltipModule,n.OverlayModule],declarations:[C,k,b,w],providers:[{provide:v,useValue:M}],entryComponents:[b],exports:[C]})],e)}();e.CalendarOverlayService=O,e.CalendarWrapperComponent=k,e.ConfigStoreService=D,e.DATE=v,e.NgxMatDrpComponent=C,e.NgxMatDrpModule=P,e.PickerOverlayComponent=b,e.PresetsComponent=w,e.RangeStoreService=y,e.ɵ0=M,e.ɵa=x,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=ng-mat-daterange-picker.umd.min.js.map