ng-mat-daterange-picker/dist/ng-mat-daterange-picker.metadata.json

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

{"__symbolic":"module","version":4,"metadata":{"NgxMatDrpModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":17,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":20,"character":4},{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepickerModule","line":21,"character":4},{"__symbolic":"reference","module":"@angular/material/core","name":"MatNativeDateModule","line":22,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":23,"character":4},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":24,"character":4},{"__symbolic":"reference","module":"@angular/material/tooltip","name":"MatTooltipModule","line":25,"character":4},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule","line":26,"character":4}],"declarations":[{"__symbolic":"reference","name":"NgxMatDrpComponent"},{"__symbolic":"reference","name":"CalendarWrapperComponent"},{"__symbolic":"reference","name":"PickerOverlayComponent"},{"__symbolic":"reference","name":"PresetsComponent"}],"providers":[{"provide":{"__symbolic":"reference","name":"DATE"},"useValue":{"__symbolic":"new","expression":{"__symbolic":"reference","name":"Date"}}}],"entryComponents":[{"__symbolic":"reference","name":"PickerOverlayComponent"}],"exports":[{"__symbolic":"reference","name":"NgxMatDrpComponent"}]}]}],"members":{}},"NgxMatDrpComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":19,"character":1},"arguments":[{"selector":"ngx-mat-drp","providers":[{"__symbolic":"reference","name":"CalendarOverlayService"},{"__symbolic":"reference","name":"RangeStoreService"},{"__symbolic":"reference","name":"ConfigStoreService"},{"__symbolic":"reference","module":"@angular/common","name":"DatePipe","line":27,"character":4}],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":29,"character":19},"member":"OnPush"},"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","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}"]}]}],"members":{"calendarInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":32,"character":3},"arguments":["calendarInput",{"static":false}]}]}],"selectedDateRangeChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":34,"character":3}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":42,"character":32},{"__symbolic":"reference","name":"CalendarOverlayService"},{"__symbolic":"reference","name":"RangeStoreService"},{"__symbolic":"reference","name":"ConfigStoreService"},{"__symbolic":"reference","module":"@angular/common","name":"DatePipe","line":46,"character":22}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"formatToDateString":[{"__symbolic":"method"}],"openCalendar":[{"__symbolic":"method"}],"resetDates":[{"__symbolic":"method"}]}},"PickerOverlayComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"ngx-mat-drp-picker-overlay","animations":[{"__symbolic":"select","expression":{"__symbolic":"reference","name":"ɵa"},"member":"transformPanel"}],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":12,"character":17},"member":"None"},"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","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}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"RangeStoreService"},{"__symbolic":"reference","name":"ConfigStoreService"},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayRef","line":31,"character":24}]}],"ngOnInit":[{"__symbolic":"method"}],"updateFromDate":[{"__symbolic":"method"}],"updateToDate":[{"__symbolic":"method"}],"updateRangeByPreset":[{"__symbolic":"method"}],"applyNewDates":[{"__symbolic":"method"}],"discardNewDates":[{"__symbolic":"method"}],"disposeOverLay":[{"__symbolic":"method"}]}},"CalendarWrapperComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":13,"character":1},"arguments":[{"selector":"calendar-wrapper","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":17,"character":19},"member":"OnPush"},"template":"<div>\r\n\r\n  <!-- <mat-divider></mat-divider> -->\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  <!-- <mat-divider></mat-divider> -->\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>","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%}"]}]}],"members":{"matCalendar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":20,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatCalendar","line":20,"character":13},{"static":false}]}]}],"selectedDateChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":23,"character":3}}]}],"selectedDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"prefixLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"minDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"maxDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ConfigStoreService"}]}],"ngOnChanges":[{"__symbolic":"method"}],"onSelectedChange":[{"__symbolic":"method"}],"onYearSelected":[{"__symbolic":"method"}],"onUserSelection":[{"__symbolic":"method"}]}},"PresetsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"selector":"mat-drp-presets","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":15,"character":19},"member":"OnPush"},"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>","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}"]}]}],"members":{"presets":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"presetChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":20,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"setPresetPeriod":[{"__symbolic":"method"}]}},"CalendarOverlayService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":14,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay","line":18,"character":31},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":18,"character":58}]}],"open":[{"__symbolic":"method"}],"createOverlay":[{"__symbolic":"method"}],"getOverlayConfig":[{"__symbolic":"method"}],"createInjector":[{"__symbolic":"method"}]}},"ConfigStoreService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":3,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}]}},"DATE":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":5,"character":24},"arguments":["date"]},"RangeStoreService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":7,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":12,"character":5},"arguments":[{"__symbolic":"reference","name":"DATE"}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":13,"character":5},"arguments":[{"__symbolic":"reference","name":"DATE"}]}]],"parameters":[{"__symbolic":"reference","name":"Date"},{"__symbolic":"reference","name":"Date"}]}],"updateRange":[{"__symbolic":"method"}]}},"PresetItem":{"__symbolic":"interface"},"Range":{"__symbolic":"interface"},"CalendarOverlayConfig":{"__symbolic":"interface"},"NgxDrpOptions":{"__symbolic":"interface"},"ɵa":{"transformPanel":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":14,"character":18},"arguments":["transformPickerOverlay",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":15,"character":4},"arguments":["void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":15,"character":18},"arguments":[{"opacity":0,"transform":"scale(1, 0)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":16,"character":4},"arguments":["enter",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":16,"character":19},"arguments":[{"opacity":1,"transform":"scale(1, 1)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":17,"character":4},"arguments":["void => enter",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"group","line":17,"character":32},"arguments":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":18,"character":6},"arguments":["400ms cubic-bezier(0.25, 0.8, 0.25, 1)"]}]]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":20,"character":4},"arguments":["* => void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":20,"character":28},"arguments":["100ms linear",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":20,"character":52},"arguments":[{"opacity":0}]}]}]}]]}}},"origins":{"NgxMatDrpModule":"./src/app/modules/ngx-mat-drp/ngx-mat-drp.module","NgxMatDrpComponent":"./src/app/modules/ngx-mat-drp/ngx-mat-drp/ngx-mat-drp.component","PickerOverlayComponent":"./src/app/modules/ngx-mat-drp/picker-overlay/picker-overlay.component","CalendarWrapperComponent":"./src/app/modules/ngx-mat-drp/calendar-wrapper/calendar-wrapper.component","PresetsComponent":"./src/app/modules/ngx-mat-drp/presets/presets.component","CalendarOverlayService":"./src/app/modules/ngx-mat-drp/services/calendar-overlay.service","ConfigStoreService":"./src/app/modules/ngx-mat-drp/services/config-store.service","DATE":"./src/app/modules/ngx-mat-drp/services/range-store.service","RangeStoreService":"./src/app/modules/ngx-mat-drp/services/range-store.service","PresetItem":"./src/app/modules/ngx-mat-drp/model/model","Range":"./src/app/modules/ngx-mat-drp/model/model","CalendarOverlayConfig":"./src/app/modules/ngx-mat-drp/model/model","NgxDrpOptions":"./src/app/modules/ngx-mat-drp/model/model","ɵa":"./src/app/modules/ngx-mat-drp/picker-overlay/picker-overlay.animations"},"importAs":"ng-mat-daterange-picker"}