ng2-jalali-date-picker - npm Package Compare versions

Comparing version 1.3.4 to 1.3.5

calendar-nav/calendar-nav.component.d.ts

@@ -0,0 +0,0 @@ import { EventEmitter } from '@angular/core';

calendar-nav/calendar-nav.component.js

@@ -28,4 +28,4 @@ "use strict";
                 selector: 'dp-calendar-nav',
-                template: '<div class="dp-calendar-nav-container">   <button class="dp-calendar-nav-left"           [hidden]="!showLeftNav"           [disabled]="leftNavDisabled"           (click)="leftNavClicked()">  &lt;   </button>   <span class="dp-nav-header" [hidden]="isLabelClickable">{{label}}</span>   <button class="dp-nav-header dp-nav-header-btn"           [hidden]="!isLabelClickable"           (click)="labelClicked()">     {{label}}   </button>   <button class="dp-calendar-nav-right"           [hidden]="!showRightNav"           [disabled]="rightNavDisabled"           (click)="rightNavClicked()">  &gt;   </button> </div>',
-                styles: ['.dp-calendar-nav-container {  position: relative;  box-sizing: border-box;  height: 25px;  border: 1px solid #000000;  border-bottom: none;}.dp-nav-date-btn {  box-sizing: border-box;  height: 25px;  border: 1px solid #000000;  border-bottom: none;}.dp-calendar-nav-left,.dp-calendar-nav-right {  position: absolute;  top: 50%;  transform: translateY(-50%);  cursor: pointer;}.dp-calendar-nav-left {  left: 0;}.dp-calendar-nav-right {  right: 0;}.dp-nav-header {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  font-size: 13px;}.dp-nav-header-btn {  cursor: pointer;}:host.dp-material .dp-calendar-nav-container {  height: 30px;  border: 1px solid #E0E0E0;}:host.dp-material .dp-calendar-nav-left,:host.dp-material .dp-calendar-nav-right {  border: none;  background: #FFFFFF;  outline: none;  font-size: 16px;}:host.dp-material .dp-nav-header-btn {  height: 20px;  width: 100px;  border: none;  background: #FFFFFF;  outline: none;}:host.dp-material .dp-nav-header-btn:hover {  background: rgba(0, 0, 0, 0.05);}:host.dp-material .dp-nav-header-btn:active {  background: rgba(0, 0, 0, 0.1);}']
+                template: '<div class="dp-calendar-nav-container">   <button type="button"           class="dp-calendar-nav-left"           [hidden]="!showLeftNav"           [disabled]="leftNavDisabled"           (click)="leftNavClicked()">  &lt;   </button>   <span class="dp-nav-header" [hidden]="isLabelClickable">{{label}}</span>   <button type="button"           class="dp-nav-header dp-nav-header-btn"           [hidden]="!isLabelClickable"           (click)="labelClicked()">     {{label}}   </button>   <button type="button"           class="dp-calendar-nav-right"           [hidden]="!showRightNav"           [disabled]="rightNavDisabled"           (click)="rightNavClicked()">  &gt;   </button> </div> ',
+                styles: ['.dp-calendar-nav-container {  position: relative;  box-sizing: border-box;  height: 25px;  border: 1px solid #000000;  border-bottom: none;}.dp-nav-date-btn {  box-sizing: border-box;  height: 25px;  border: 1px solid #000000;  border-bottom: none;}.dp-calendar-nav-left,.dp-calendar-nav-right {  position: absolute;  top: 50%;  transform: translateY(-50%);  cursor: pointer;}.dp-calendar-nav-left {  left: 0;}.dp-calendar-nav-right {  right: 0;}.dp-nav-header {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  font-size: 13px;}.dp-nav-header-btn {  cursor: pointer;}:host.dp-material .dp-calendar-nav-container {  height: 30px;  border: none;  background: #E0E0E0;}:host.dp-material .dp-calendar-nav-left,:host.dp-material .dp-calendar-nav-right {  border: none;  color: inherit;  background: none;  outline: none;  font-size: 16px;}:host.dp-material .dp-nav-header-btn {  height: 20px;  width: 100px;  border: none;  color: inherit;  background: none;  outline: none;}:host.dp-material .dp-nav-header-btn:hover {  background: rgba(0, 0, 0, 0.05);}:host.dp-material .dp-nav-header-btn:active {  background: rgba(0, 0, 0, 0.1);}']
             },] },
@@ -32,0 +32,0 @@ ];

calendar-nav/calendar-nav.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"CalendarNavComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"dp-calendar-nav","template":"<div class=\"dp-calendar-nav-container\">   <button class=\"dp-calendar-nav-left\"           [hidden]=\"!showLeftNav\"           [disabled]=\"leftNavDisabled\"           (click)=\"leftNavClicked()\">  &lt;   </button>   <span class=\"dp-nav-header\" [hidden]=\"isLabelClickable\">{{label}}</span>   <button class=\"dp-nav-header dp-nav-header-btn\"           [hidden]=\"!isLabelClickable\"           (click)=\"labelClicked()\">     {{label}}   </button>   <button class=\"dp-calendar-nav-right\"           [hidden]=\"!showRightNav\"           [disabled]=\"rightNavDisabled\"           (click)=\"rightNavClicked()\">  &gt;   </button> </div>","styles":[".dp-calendar-nav-container {  position: relative;  box-sizing: border-box;  height: 25px;  border: 1px solid #000000;  border-bottom: none;}.dp-nav-date-btn {  box-sizing: border-box;  height: 25px;  border: 1px solid #000000;  border-bottom: none;}.dp-calendar-nav-left,.dp-calendar-nav-right {  position: absolute;  top: 50%;  transform: translateY(-50%);  cursor: pointer;}.dp-calendar-nav-left {  left: 0;}.dp-calendar-nav-right {  right: 0;}.dp-nav-header {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  font-size: 13px;}.dp-nav-header-btn {  cursor: pointer;}:host.dp-material .dp-calendar-nav-container {  height: 30px;  border: 1px solid #E0E0E0;}:host.dp-material .dp-calendar-nav-left,:host.dp-material .dp-calendar-nav-right {  border: none;  background: #FFFFFF;  outline: none;  font-size: 16px;}:host.dp-material .dp-nav-header-btn {  height: 20px;  width: 100px;  border: none;  background: #FFFFFF;  outline: none;}:host.dp-material .dp-nav-header-btn:hover {  background: rgba(0, 0, 0, 0.05);}:host.dp-material .dp-nav-header-btn:active {  background: rgba(0, 0, 0, 0.1);}"]}]}],"members":{"onLeftNav":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onRightNav":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onLabelClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"isLabelClickable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showLeftNav":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showRightNav":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"leftNavDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"rightNavDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"leftNavClicked":[{"__symbolic":"method"}],"rightNavClicked":[{"__symbolic":"method"}],"labelClicked":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CalendarNavComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"dp-calendar-nav","template":"<div class=\"dp-calendar-nav-container\">   <button class=\"dp-calendar-nav-left\"           [hidden]=\"!showLeftNav\"           [disabled]=\"leftNavDisabled\"           (click)=\"leftNavClicked()\">  &lt;   </button>   <span class=\"dp-nav-header\" [hidden]=\"isLabelClickable\">{{label}}</span>   <button class=\"dp-nav-header dp-nav-header-btn\"           [hidden]=\"!isLabelClickable\"           (click)=\"labelClicked()\">     {{label}}   </button>   <button class=\"dp-calendar-nav-right\"           [hidden]=\"!showRightNav\"           [disabled]=\"rightNavDisabled\"           (click)=\"rightNavClicked()\">  &gt;   </button> </div>","styles":[".dp-calendar-nav-container {  position: relative;  box-sizing: border-box;  height: 25px;  border: 1px solid #000000;  border-bottom: none;}.dp-nav-date-btn {  box-sizing: border-box;  height: 25px;  border: 1px solid #000000;  border-bottom: none;}.dp-calendar-nav-left,.dp-calendar-nav-right {  position: absolute;  top: 50%;  transform: translateY(-50%);  cursor: pointer;}.dp-calendar-nav-left {  left: 0;}.dp-calendar-nav-right {  right: 0;}.dp-nav-header {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  font-size: 13px;}.dp-nav-header-btn {  cursor: pointer;}:host.dp-material .dp-calendar-nav-container {  height: 30px;  border: 1px solid #E0E0E0;}:host.dp-material .dp-calendar-nav-left,:host.dp-material .dp-calendar-nav-right {  border: none;  background: #FFFFFF;  outline: none;  font-size: 16px;}:host.dp-material .dp-nav-header-btn {  height: 20px;  width: 100px;  border: none;  background: #FFFFFF;  outline: none;}:host.dp-material .dp-nav-header-btn:hover {  background: rgba(0, 0, 0, 0.05);}:host.dp-material .dp-nav-header-btn:active {  background: rgba(0, 0, 0, 0.1);}"]}]}],"members":{"onLeftNav":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onRightNav":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onLabelClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"isLabelClickable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showLeftNav":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showRightNav":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"leftNavDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"rightNavDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"leftNavClicked":[{"__symbolic":"method"}],"rightNavClicked":[{"__symbolic":"method"}],"labelClicked":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"CalendarNavComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"dp-calendar-nav","template":"<div class=\"dp-calendar-nav-container\">   <button type=\"button\"           class=\"dp-calendar-nav-left\"           [hidden]=\"!showLeftNav\"           [disabled]=\"leftNavDisabled\"           (click)=\"leftNavClicked()\">  &lt;   </button>   <span class=\"dp-nav-header\" [hidden]=\"isLabelClickable\">{{label}}</span>   <button type=\"button\"           class=\"dp-nav-header dp-nav-header-btn\"           [hidden]=\"!isLabelClickable\"           (click)=\"labelClicked()\">     {{label}}   </button>   <button type=\"button\"           class=\"dp-calendar-nav-right\"           [hidden]=\"!showRightNav\"           [disabled]=\"rightNavDisabled\"           (click)=\"rightNavClicked()\">  &gt;   </button> </div> ","styles":[".dp-calendar-nav-container {  position: relative;  box-sizing: border-box;  height: 25px;  border: 1px solid #000000;  border-bottom: none;}.dp-nav-date-btn {  box-sizing: border-box;  height: 25px;  border: 1px solid #000000;  border-bottom: none;}.dp-calendar-nav-left,.dp-calendar-nav-right {  position: absolute;  top: 50%;  transform: translateY(-50%);  cursor: pointer;}.dp-calendar-nav-left {  left: 0;}.dp-calendar-nav-right {  right: 0;}.dp-nav-header {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  font-size: 13px;}.dp-nav-header-btn {  cursor: pointer;}:host.dp-material .dp-calendar-nav-container {  height: 30px;  border: none;  background: #E0E0E0;}:host.dp-material .dp-calendar-nav-left,:host.dp-material .dp-calendar-nav-right {  border: none;  color: inherit;  background: none;  outline: none;  font-size: 16px;}:host.dp-material .dp-nav-header-btn {  height: 20px;  width: 100px;  border: none;  color: inherit;  background: none;  outline: none;}:host.dp-material .dp-nav-header-btn:hover {  background: rgba(0, 0, 0, 0.05);}:host.dp-material .dp-nav-header-btn:active {  background: rgba(0, 0, 0, 0.1);}"]}]}],"members":{"onLeftNav":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onRightNav":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onLabelClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"isLabelClickable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showLeftNav":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showRightNav":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"leftNavDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"rightNavDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"leftNavClicked":[{"__symbolic":"method"}],"rightNavClicked":[{"__symbolic":"method"}],"labelClicked":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CalendarNavComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"dp-calendar-nav","template":"<div class=\"dp-calendar-nav-container\">   <button type=\"button\"           class=\"dp-calendar-nav-left\"           [hidden]=\"!showLeftNav\"           [disabled]=\"leftNavDisabled\"           (click)=\"leftNavClicked()\">  &lt;   </button>   <span class=\"dp-nav-header\" [hidden]=\"isLabelClickable\">{{label}}</span>   <button type=\"button\"           class=\"dp-nav-header dp-nav-header-btn\"           [hidden]=\"!isLabelClickable\"           (click)=\"labelClicked()\">     {{label}}   </button>   <button type=\"button\"           class=\"dp-calendar-nav-right\"           [hidden]=\"!showRightNav\"           [disabled]=\"rightNavDisabled\"           (click)=\"rightNavClicked()\">  &gt;   </button> </div> ","styles":[".dp-calendar-nav-container {  position: relative;  box-sizing: border-box;  height: 25px;  border: 1px solid #000000;  border-bottom: none;}.dp-nav-date-btn {  box-sizing: border-box;  height: 25px;  border: 1px solid #000000;  border-bottom: none;}.dp-calendar-nav-left,.dp-calendar-nav-right {  position: absolute;  top: 50%;  transform: translateY(-50%);  cursor: pointer;}.dp-calendar-nav-left {  left: 0;}.dp-calendar-nav-right {  right: 0;}.dp-nav-header {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  font-size: 13px;}.dp-nav-header-btn {  cursor: pointer;}:host.dp-material .dp-calendar-nav-container {  height: 30px;  border: none;  background: #E0E0E0;}:host.dp-material .dp-calendar-nav-left,:host.dp-material .dp-calendar-nav-right {  border: none;  color: inherit;  background: none;  outline: none;  font-size: 16px;}:host.dp-material .dp-nav-header-btn {  height: 20px;  width: 100px;  border: none;  color: inherit;  background: none;  outline: none;}:host.dp-material .dp-nav-header-btn:hover {  background: rgba(0, 0, 0, 0.05);}:host.dp-material .dp-nav-header-btn:active {  background: rgba(0, 0, 0, 0.1);}"]}]}],"members":{"onLeftNav":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onRightNav":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onLabelClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"isLabelClickable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showLeftNav":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showRightNav":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"leftNavDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"rightNavDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"leftNavClicked":[{"__symbolic":"method"}],"rightNavClicked":[{"__symbolic":"method"}],"labelClicked":[{"__symbolic":"method"}]}}}}]

common/models/calendar.model.d.ts

@@ -0,0 +0,0 @@ import { Moment } from 'jalali-moment';

common/models/calendar.model.js

 "use strict";
 //# sourceMappingURL=calendar.model.js.map

common/models/date.model.d.ts

@@ -0,0 +0,0 @@ import { Moment } from 'jalali-moment';

common/models/date.model.js

 "use strict";
 //# sourceMappingURL=date.model.js.map

common/services/dom-appender/dom-appender.service.d.ts

@@ -0,0 +0,0 @@ import { TDrops, TOpens } from '../../types/poistions.type';

common/services/dom-appender/dom-appender.service.js

@@ -0,0 +0,0 @@ "use strict";

common/services/utils/utils.service.d.ts

 import * as moment from 'jalali-moment';
 import { Moment, unitOfTime } from 'jalali-moment';
-import { CalendarValue, ECalendarValue, SingleCalendarValue } from '../../types/calendar-value';
+import { CalendarValue } from '../../types/calendar-value';
+import { ECalendarValue } from '../../types/calendar-value-enum';
+import { SingleCalendarValue } from '../../types/single-calendar-value';
 import { IDate } from '../../models/date.model';
@@ -17,2 +19,9 @@ export declare class UtilsService {
     updateSelected(isMultiple: boolean, currentlySelected: Moment[], date: IDate, granularity?: unitOfTime.Base): Moment[];
+    closestParent(element: HTMLElement, selector: string): HTMLElement;
+    createValidator({minDate, maxDate}: {
+        minDate: any;
+        maxDate: any;
+    }, format: string, granularity: unitOfTime.Base): (inputVal: CalendarValue) => {
+        [key: string]: any;
+    };
 }

common/services/utils/utils.service.js

 "use strict";
 var core_1 = require("@angular/core");
 var moment = require("jalali-moment");
-var calendar_value_1 = require("../../types/calendar-value");
+var calendar_value_enum_1 = require("../../types/calendar-value-enum");
 var UtilsService = (function () {
@@ -60,9 +60,9 @@ function UtilsService() {
             if (!value.length) {
-                return calendar_value_1.ECalendarValue.MomentArr;
+                return calendar_value_enum_1.ECalendarValue.MomentArr;
             }
             else if (typeof value[0] === 'string') {
-                return calendar_value_1.ECalendarValue.StringArr;
+                return calendar_value_enum_1.ECalendarValue.StringArr;
             }
             else if (moment.isMoment(value[0])) {
-                return calendar_value_1.ECalendarValue.MomentArr;
+                return calendar_value_enum_1.ECalendarValue.MomentArr;
             }
@@ -72,9 +72,9 @@ }
             if (typeof value === 'string') {
-                return calendar_value_1.ECalendarValue.String;
+                return calendar_value_enum_1.ECalendarValue.String;
             }
             else if (moment.isMoment(value)) {
-                return calendar_value_1.ECalendarValue.Moment;
+                return calendar_value_enum_1.ECalendarValue.Moment;
             }
         }
-        return allowMultiSelect ? calendar_value_1.ECalendarValue.MomentArr : calendar_value_1.ECalendarValue.Moment;
+        return allowMultiSelect ? calendar_value_enum_1.ECalendarValue.MomentArr : calendar_value_enum_1.ECalendarValue.Moment;
     };
@@ -84,9 +84,9 @@ // todo:: add unit test
         switch (this.getInputType(value, allowMultiSelect)) {
-            case (calendar_value_1.ECalendarValue.String):
+            case (calendar_value_enum_1.ECalendarValue.String):
                 return value ? [moment(value, format)] : [];
-            case (calendar_value_1.ECalendarValue.StringArr):
+            case (calendar_value_enum_1.ECalendarValue.StringArr):
                 return value.map(function (v) { return v ? moment(v, format) : null; }).filter(Boolean);
-            case (calendar_value_1.ECalendarValue.Moment):
+            case (calendar_value_enum_1.ECalendarValue.Moment):
                 return [value];
-            case (calendar_value_1.ECalendarValue.MomentArr):
+            case (calendar_value_enum_1.ECalendarValue.MomentArr):
                 return [].concat(value);
@@ -100,9 +100,9 @@ default:
         switch (inputValueType) {
-            case (calendar_value_1.ECalendarValue.String):
+            case (calendar_value_enum_1.ECalendarValue.String):
                 return value[0].format(format);
-            case (calendar_value_1.ECalendarValue.StringArr):
+            case (calendar_value_enum_1.ECalendarValue.StringArr):
                 return value.map(function (v) { return v.format(format); });
-            case (calendar_value_1.ECalendarValue.Moment):
+            case (calendar_value_enum_1.ECalendarValue.Moment):
                 return value[0];
-            case (calendar_value_1.ECalendarValue.MomentArr):
+            case (calendar_value_enum_1.ECalendarValue.MomentArr):
                 return value;
@@ -147,2 +147,58 @@ default:
     };
+    UtilsService.prototype.closestParent = function (element, selector) {
+        if (!element) {
+            return undefined;
+        }
+        var match = element.querySelector(selector);
+        return match || this.closestParent(element.parentElement, selector);
+    };
+    UtilsService.prototype.createValidator = function (_a, format, granularity) {
+        var _this = this;
+        var minDate = _a.minDate, maxDate = _a.maxDate;
+        var isValid;
+        var value;
+        var validators = [];
+        if (minDate) {
+            var md_1 = this.convertToMoment(minDate, format);
+            validators.push({
+                key: 'minDate',
+                isValid: function () {
+                    var _isValid = value.every(function (val) { return val.isSameOrAfter(md_1, granularity); });
+                    isValid = isValid ? _isValid : false;
+                    return _isValid;
+                }
+            });
+        }
+        if (maxDate) {
+            var md_2 = this.convertToMoment(maxDate, format);
+            validators.push({
+                key: 'maxDate',
+                isValid: function () {
+                    var _isValid = value.every(function (val) { return val.isSameOrBefore(md_2, granularity); });
+                    isValid = isValid ? _isValid : false;
+                    return _isValid;
+                }
+            });
+        }
+        return function (inputVal) {
+            isValid = true;
+            value = _this.convertToMomentArray(inputVal, format, true).filter(Boolean);
+            if (!value.every(function (val) { return val.isValid(); })) {
+                return {
+                    format: {
+                        given: inputVal
+                    }
+                };
+            }
+            var errors = validators.reduce(function (map, err) {
+                if (!err.isValid()) {
+                    map[err.key] = {
+                        given: value
+                    };
+                }
+                return map;
+            }, {});
+            return !isValid ? errors : null;
+        };
+    };
     return UtilsService;
@@ -149,0 +205,0 @@ }());

common/services/utils/utils.service.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"UtilsService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"createArray":[{"__symbolic":"method"}],"convertToMoment":[{"__symbolic":"method"}],"isDateValid":[{"__symbolic":"method"}],"getDefaultDisplayDate":[{"__symbolic":"method"}],"getInputType":[{"__symbolic":"method"}],"convertToMomentArray":[{"__symbolic":"method"}],"convertFromMomentArray":[{"__symbolic":"method"}],"clearUndefined":[{"__symbolic":"method"}],"compareMomentArrays":[{"__symbolic":"method"}],"updateSelected":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"UtilsService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"createArray":[{"__symbolic":"method"}],"convertToMoment":[{"__symbolic":"method"}],"isDateValid":[{"__symbolic":"method"}],"getDefaultDisplayDate":[{"__symbolic":"method"}],"getInputType":[{"__symbolic":"method"}],"convertToMomentArray":[{"__symbolic":"method"}],"convertFromMomentArray":[{"__symbolic":"method"}],"clearUndefined":[{"__symbolic":"method"}],"compareMomentArrays":[{"__symbolic":"method"}],"updateSelected":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"UtilsService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"createArray":[{"__symbolic":"method"}],"convertToMoment":[{"__symbolic":"method"}],"isDateValid":[{"__symbolic":"method"}],"getDefaultDisplayDate":[{"__symbolic":"method"}],"getInputType":[{"__symbolic":"method"}],"convertToMomentArray":[{"__symbolic":"method"}],"convertFromMomentArray":[{"__symbolic":"method"}],"clearUndefined":[{"__symbolic":"method"}],"compareMomentArrays":[{"__symbolic":"method"}],"updateSelected":[{"__symbolic":"method"}],"closestParent":[{"__symbolic":"method"}],"createValidator":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"UtilsService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"createArray":[{"__symbolic":"method"}],"convertToMoment":[{"__symbolic":"method"}],"isDateValid":[{"__symbolic":"method"}],"getDefaultDisplayDate":[{"__symbolic":"method"}],"getInputType":[{"__symbolic":"method"}],"convertToMomentArray":[{"__symbolic":"method"}],"convertFromMomentArray":[{"__symbolic":"method"}],"clearUndefined":[{"__symbolic":"method"}],"compareMomentArrays":[{"__symbolic":"method"}],"updateSelected":[{"__symbolic":"method"}],"closestParent":[{"__symbolic":"method"}],"createValidator":[{"__symbolic":"method"}]}}}}]

common/types/calendar-type.d.ts

 export declare type CalendarType = 'day' | 'month';
-export declare enum ECalendarSystem {
-    jalali = 0,
-    gregorian = 1,
-}
-export declare enum ECalendarType {
-    Day = 0,
-    Month = 1,
-}

common/types/calendar-type.js

 "use strict";
-var ECalendarSystem;
-(function (ECalendarSystem) {
-    ECalendarSystem[ECalendarSystem["jalali"] = 0] = "jalali";
-    ECalendarSystem[ECalendarSystem["gregorian"] = 1] = "gregorian";
-})(ECalendarSystem = exports.ECalendarSystem || (exports.ECalendarSystem = {}));
-var ECalendarType;
-(function (ECalendarType) {
-    ECalendarType[ECalendarType["Day"] = 0] = "Day";
-    ECalendarType[ECalendarType["Month"] = 1] = "Month";
-})(ECalendarType = exports.ECalendarType || (exports.ECalendarType = {}));
 //# sourceMappingURL=calendar-type.js.map

common/types/calendar-value.d.ts

 import { Moment } from 'jalali-moment';
 export declare type CalendarValue = Moment | Moment[] | string | string[];
-export declare type SingleCalendarValue = Moment | string;
-export declare enum ECalendarValue {
-    Moment = 0,
-    MomentArr = 1,
-    String = 2,
-    StringArr = 3,
-}

common/types/calendar-value.js

 "use strict";
-var ECalendarValue;
-(function (ECalendarValue) {
-    ECalendarValue[ECalendarValue["Moment"] = 0] = "Moment";
-    ECalendarValue[ECalendarValue["MomentArr"] = 1] = "MomentArr";
-    ECalendarValue[ECalendarValue["String"] = 2] = "String";
-    ECalendarValue[ECalendarValue["StringArr"] = 3] = "StringArr";
-})(ECalendarValue = exports.ECalendarValue || (exports.ECalendarValue = {}));
 //# sourceMappingURL=calendar-value.js.map

common/types/poistions.type.d.ts

 export declare type TOpens = 'right' | 'left';
 export declare type TDrops = 'up' | 'down';

common/types/poistions.type.js

 "use strict";
 //# sourceMappingURL=poistions.type.js.map

common/types/week-days.type.d.ts

 export declare type WeekDays = 'su' | 'mo' | 'tu' | 'we' | 'th' | 'fr' | 'sa';

common/types/week-days.type.js

 "use strict";
 //# sourceMappingURL=week-days.type.js.map

date-picker.module.d.ts

 export { DatePickerComponent } from './date-picker/date-picker.component';
+export { DatePickerDirective } from './date-picker/date-picker.directive';
 export { DayCalendarComponent } from './day-calendar/day-calendar.component';
 export declare class DpDatePickerModule {
 }

date-picker.module.js

@@ -6,2 +6,3 @@ "use strict";
 var date_picker_component_1 = require("./date-picker/date-picker.component");
+var date_picker_directive_1 = require("./date-picker/date-picker.directive");
 var day_calendar_component_1 = require("./day-calendar/day-calendar.component");
@@ -14,2 +15,4 @@ var dom_appender_service_1 = require("./common/services/dom-appender/dom-appender.service");
 exports.DatePickerComponent = date_picker_component_2.DatePickerComponent;
+var date_picker_directive_2 = require("./date-picker/date-picker.directive");
+exports.DatePickerDirective = date_picker_directive_2.DatePickerDirective;
 var day_calendar_component_2 = require("./day-calendar/day-calendar.component");
@@ -30,2 +33,3 @@ exports.DayCalendarComponent = day_calendar_component_2.DayCalendarComponent;
                     date_picker_component_1.DatePickerComponent,
+                    date_picker_directive_1.DatePickerDirective,
                     day_calendar_component_1.DayCalendarComponent,
@@ -35,2 +39,5 @@ month_calendar_component_1.MonthCalendarComponent,
                 ],
+                entryComponents: [
+                    date_picker_component_1.DatePickerComponent,
+                ],
                 imports: [
@@ -40,3 +47,3 @@ common_1.CommonModule,
                 ],
-                exports: [date_picker_component_1.DatePickerComponent, month_calendar_component_1.MonthCalendarComponent, day_calendar_component_1.DayCalendarComponent]
+                exports: [date_picker_component_1.DatePickerComponent, date_picker_directive_1.DatePickerDirective, month_calendar_component_1.MonthCalendarComponent, day_calendar_component_1.DayCalendarComponent]
             },] },
@@ -43,0 +50,0 @@ ];

date-picker.module.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"DpDatePickerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"providers":[{"__symbolic":"reference","module":"./common/services/dom-appender/dom-appender.service","name":"DomHelper"},{"__symbolic":"reference","module":"./common/services/utils/utils.service","name":"UtilsService"}],"declarations":[{"__symbolic":"reference","module":"./date-picker/date-picker.component","name":"DatePickerComponent"},{"__symbolic":"reference","module":"./day-calendar/day-calendar.component","name":"DayCalendarComponent"},{"__symbolic":"reference","module":"./month-calendar/month-calendar.component","name":"MonthCalendarComponent"},{"__symbolic":"reference","module":"./calendar-nav/calendar-nav.component","name":"CalendarNavComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"exports":[{"__symbolic":"reference","module":"./date-picker/date-picker.component","name":"DatePickerComponent"},{"__symbolic":"reference","module":"./month-calendar/month-calendar.component","name":"MonthCalendarComponent"},{"__symbolic":"reference","module":"./day-calendar/day-calendar.component","name":"DayCalendarComponent"}]}]}]}},"exports":[{"from":"./date-picker/date-picker.component","export":["DatePickerComponent"]},{"from":"./day-calendar/day-calendar.component","export":["DayCalendarComponent"]}]},{"__symbolic":"module","version":1,"metadata":{"DpDatePickerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"providers":[{"__symbolic":"reference","module":"./common/services/dom-appender/dom-appender.service","name":"DomHelper"},{"__symbolic":"reference","module":"./common/services/utils/utils.service","name":"UtilsService"}],"declarations":[{"__symbolic":"reference","module":"./date-picker/date-picker.component","name":"DatePickerComponent"},{"__symbolic":"reference","module":"./day-calendar/day-calendar.component","name":"DayCalendarComponent"},{"__symbolic":"reference","module":"./month-calendar/month-calendar.component","name":"MonthCalendarComponent"},{"__symbolic":"reference","module":"./calendar-nav/calendar-nav.component","name":"CalendarNavComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"exports":[{"__symbolic":"reference","module":"./date-picker/date-picker.component","name":"DatePickerComponent"},{"__symbolic":"reference","module":"./month-calendar/month-calendar.component","name":"MonthCalendarComponent"},{"__symbolic":"reference","module":"./day-calendar/day-calendar.component","name":"DayCalendarComponent"}]}]}]}},"exports":[{"from":"./date-picker/date-picker.component","export":["DatePickerComponent"]},{"from":"./day-calendar/day-calendar.component","export":["DayCalendarComponent"]}]}]
+[{"__symbolic":"module","version":3,"metadata":{"DpDatePickerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"providers":[{"__symbolic":"reference","module":"./common/services/dom-appender/dom-appender.service","name":"DomHelper"},{"__symbolic":"reference","module":"./common/services/utils/utils.service","name":"UtilsService"}],"declarations":[{"__symbolic":"reference","module":"./date-picker/date-picker.component","name":"DatePickerComponent"},{"__symbolic":"reference","module":"./date-picker/date-picker.directive","name":"DatePickerDirective"},{"__symbolic":"reference","module":"./day-calendar/day-calendar.component","name":"DayCalendarComponent"},{"__symbolic":"reference","module":"./month-calendar/month-calendar.component","name":"MonthCalendarComponent"},{"__symbolic":"reference","module":"./calendar-nav/calendar-nav.component","name":"CalendarNavComponent"}],"entryComponents":[{"__symbolic":"reference","module":"./date-picker/date-picker.component","name":"DatePickerComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"exports":[{"__symbolic":"reference","module":"./date-picker/date-picker.component","name":"DatePickerComponent"},{"__symbolic":"reference","module":"./date-picker/date-picker.directive","name":"DatePickerDirective"},{"__symbolic":"reference","module":"./month-calendar/month-calendar.component","name":"MonthCalendarComponent"},{"__symbolic":"reference","module":"./day-calendar/day-calendar.component","name":"DayCalendarComponent"}]}]}]}},"exports":[{"from":"./date-picker/date-picker.component","export":["DatePickerComponent"]},{"from":"./date-picker/date-picker.directive","export":["DatePickerDirective"]},{"from":"./day-calendar/day-calendar.component","export":["DayCalendarComponent"]}]},{"__symbolic":"module","version":1,"metadata":{"DpDatePickerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"providers":[{"__symbolic":"reference","module":"./common/services/dom-appender/dom-appender.service","name":"DomHelper"},{"__symbolic":"reference","module":"./common/services/utils/utils.service","name":"UtilsService"}],"declarations":[{"__symbolic":"reference","module":"./date-picker/date-picker.component","name":"DatePickerComponent"},{"__symbolic":"reference","module":"./date-picker/date-picker.directive","name":"DatePickerDirective"},{"__symbolic":"reference","module":"./day-calendar/day-calendar.component","name":"DayCalendarComponent"},{"__symbolic":"reference","module":"./month-calendar/month-calendar.component","name":"MonthCalendarComponent"},{"__symbolic":"reference","module":"./calendar-nav/calendar-nav.component","name":"CalendarNavComponent"}],"entryComponents":[{"__symbolic":"reference","module":"./date-picker/date-picker.component","name":"DatePickerComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"exports":[{"__symbolic":"reference","module":"./date-picker/date-picker.component","name":"DatePickerComponent"},{"__symbolic":"reference","module":"./date-picker/date-picker.directive","name":"DatePickerDirective"},{"__symbolic":"reference","module":"./month-calendar/month-calendar.component","name":"MonthCalendarComponent"},{"__symbolic":"reference","module":"./day-calendar/day-calendar.component","name":"DayCalendarComponent"}]}]}]}},"exports":[{"from":"./date-picker/date-picker.component","export":["DatePickerComponent"]},{"from":"./date-picker/date-picker.directive","export":["DatePickerDirective"]},{"from":"./day-calendar/day-calendar.component","export":["DayCalendarComponent"]}]}]

date-picker/date-picker-config.model.d.ts

@@ -10,5 +10,7 @@ import { TDrops, TOpens } from '../common/types/poistions.type';
     appendTo?: string | HTMLElement;
+    inputElementContainer?: HTMLElement;
     showGoToCurrent?: boolean;
     drops?: TDrops;
     opens?: TOpens;
+    hideInputContainer?: boolean;
 }

date-picker/date-picker-config.model.js

 "use strict";
 //# sourceMappingURL=date-picker-config.model.js.map

date-picker/date-picker.api.d.ts

@@ -0,0 +0,0 @@ export interface IDpDayPickerApi {

date-picker/date-picker.api.js

 "use strict";
 //# sourceMappingURL=date-picker.api.js.map

date-picker/date-picker.component.d.ts

@@ -1,14 +0,16 @@
-import { OnChanges, OnInit, SimpleChanges, ElementRef, AfterViewInit, Renderer, OnDestroy } from '@angular/core';
-import { Moment, unitOfTime } from 'jalali-moment';
-import { DatePickerService } from './date-picker.service';
-import { IDatePickerConfig } from './date-picker-config.model';
-import { ControlValueAccessor, FormControl, Validator, ValidationErrors } from '@angular/forms';
+import { IDate } from '../common/models/date.model';
+import { DomHelper } from '../common/services/dom-appender/dom-appender.service';
 import { UtilsService } from '../common/services/utils/utils.service';
-import { IDpDayPickerApi } from './date-picker.api';
-import { DomHelper } from '../common/services/dom-appender/dom-appender.service';
-import { CalendarValue, ECalendarValue, SingleCalendarValue } from '../common/types/calendar-value';
 import { CalendarType } from '../common/types/calendar-type';
+import { CalendarValue } from '../common/types/calendar-value';
+import { ECalendarValue } from '../common/types/calendar-value-enum';
+import { SingleCalendarValue } from '../common/types/single-calendar-value';
 import { IDayCalendarConfig } from '../day-calendar/day-calendar-config.model';
 import { DayCalendarComponent } from '../day-calendar/day-calendar.component';
-import { IDate } from '../common/models/date.model';
+import { IDatePickerConfig } from './date-picker-config.model';
+import { IDpDayPickerApi } from './date-picker.api';
+import { DatePickerService } from './date-picker.service';
+import { AfterViewInit, ElementRef, OnChanges, OnDestroy, OnInit, Renderer, SimpleChanges } from '@angular/core';
+import { ControlValueAccessor, FormControl, ValidationErrors, Validator } from '@angular/forms';
+import { Moment, unitOfTime } from 'jalali-moment';
 export declare class DatePickerComponent implements OnChanges, OnInit, AfterViewInit, ControlValueAccessor, Validator, OnDestroy {
@@ -48,3 +50,3 @@ private dayPickerService;
     globalListnersUnlisteners: Function[];
-    validateFn: (FormControl, string) => {
+    validateFn: (inputVal: CalendarValue) => {
         [key: string]: any;
@@ -70,2 +72,3 @@ };
     setElementPositionInDom(): void;
+    setInputElementContainer(): void;
     handleInnerElementClick(element: HTMLElement): void;
@@ -72,0 +75,0 @@ init(): void;

date-picker/date-picker.component.js

 "use strict";
+var dom_appender_service_1 = require("../common/services/dom-appender/dom-appender.service");
+var utils_service_1 = require("../common/services/utils/utils.service");
+var calendar_type_enum_1 = require("../common/types/calendar-type-enum");
+var calendar_value_enum_1 = require("../common/types/calendar-value-enum");
+var date_picker_service_1 = require("./date-picker.service");
 var core_1 = require("@angular/core");
+var forms_1 = require("@angular/forms");
 var moment = require("jalali-moment");
-var date_picker_service_1 = require("./date-picker.service");
-var forms_1 = require("@angular/forms");
-var utils_service_1 = require("../common/services/utils/utils.service");
-var dom_appender_service_1 = require("../common/services/dom-appender/dom-appender.service");
-var calendar_value_1 = require("../common/types/calendar-value");
-var calendar_type_1 = require("../common/types/calendar-type");
 var DatePickerComponent = (function () {
@@ -39,3 +39,3 @@ function DatePickerComponent(dayPickerService, domHelper, elemRef, renderer, utilsService) {
             this.inputElementValue = this.utilsService
-                .convertFromMomentArray(this.componentConfig.format, selected, calendar_value_1.ECalendarValue.StringArr)
+                .convertFromMomentArray(this.componentConfig.format, selected, calendar_value_enum_1.ECalendarValue.StringArr)
                 .join(', ');
@@ -73,3 +73,3 @@ this.onChangeCallback(this.processOnChangeCallback(selected));
     DatePickerComponent.prototype.onClick = function () {
-        if (!this.isFocusedTrigger) {
+        if (!this.isFocusedTrigger && !this.disabled) {
             this.hideStateHelper = true;
@@ -117,3 +117,3 @@ if (!this.areCalendarsShown) {
         if (this.minDate || this.maxDate) {
-            return this.validateFn(formControl, this.componentConfig.format);
+            return this.validateFn(formControl.value);
         }
@@ -128,6 +128,3 @@ else {
     DatePickerComponent.prototype.initValidators = function () {
-        this.validateFn = this.dayPickerService.createValidator({
-            minDate: this.utilsService.convertToMoment(this.minDate, this.componentConfig.format),
-            maxDate: this.utilsService.convertToMoment(this.maxDate, this.componentConfig.format)
-        }, this.componentConfig.format);
+        this.validateFn = this.utilsService.createValidator({ minDate: this.minDate, maxDate: this.maxDate }, this.componentConfig.format, this.type);
         this.onChangeCallback(this.processOnChangeCallback(this.selected));
@@ -154,3 +151,3 @@ };
         this.calendarWrapper = this.calendarContainer.nativeElement;
-        this.inputElementContainer = this.elemRef.nativeElement.querySelector('.dp-input-container');
+        this.setInputElementContainer();
         this.popupElem = this.elemRef.nativeElement.querySelector('.dp-popup');
@@ -172,2 +169,6 @@ this.handleInnerElementClick(this.popupElem);
     };
+    DatePickerComponent.prototype.setInputElementContainer = function () {
+        this.inputElementContainer = this.componentConfig.inputElementContainer
+            || this.elemRef.nativeElement.querySelector('.dp-input-container');
+    };
     DatePickerComponent.prototype.handleInnerElementClick = function (element) {
@@ -206,3 +207,3 @@ var _this = this;
         if (this.dayCalendarRef) {
-            this.dayCalendarRef.api.toggleCalendar(calendar_type_1.ECalendarType.Day);
+            this.dayCalendarRef.api.toggleCalendar(calendar_type_enum_1.ECalendarType.Day);
         }
@@ -258,3 +259,3 @@ };
                 selector: 'dp-date-picker',
-                template: '<div>   <div class="dp-input-container">     <input type="text"            class="dp-picker-input"            [placeholder]="placeholder"            [ngModel]="inputElementValue"            (ngModelChange)="onViewDateChange($event)"            (focus)="inputFocused()"            [readonly]="componentConfig.disableKeypress"            [disabled]="disabled"/>      <button class="dp-current-location-btn"             *ngIf="componentConfig.showGoToCurrent"             (click)="moveToCurrent()"             [hidden]="!_areCalendarsShown">     </button>   </div>   <div #container>     <div class="dp-popup {{theme}}"          [ngSwitch]="type"          [hidden]="!_areCalendarsShown">       <dp-day-calendar #dayCalendar                        *ngSwitchCase="\'day\'"                        [config]="dayCalendarConfig"                        [ngModel]="_selected"                        [displayDate]="currentDateView"                        (onSelect)="dateSelected($event, \'day\')"                        [theme]="theme">        </dp-day-calendar>        <dp-month-calendar #monthCalendar                          *ngSwitchCase="\'month\'"                          [config]="dayCalendarConfig"                          [ngModel]="_selected"                          [displayDate]="currentDateView"                          (onSelect)="dateSelected($event, \'month\')"                          [theme]="theme">       </dp-month-calendar>     </div>   </div> </div> ',
+                template: '<div>   <div *ngIf="!componentConfig.hideInputContainer" class="dp-input-container">     <input type="text"            class="dp-picker-input"            [placeholder]="placeholder"            [ngModel]="inputElementValue"            (ngModelChange)="onViewDateChange($event)"            (focus)="inputFocused()"            [readonly]="componentConfig.disableKeypress"            [disabled]="disabled"/>      <button type="button"             class="dp-current-location-btn"             *ngIf="componentConfig.showGoToCurrent"             (click)="moveToCurrent()"             [hidden]="!_areCalendarsShown">     </button>   </div>   <div #container>     <div class="dp-popup {{theme}}"          [ngSwitch]="type"          [hidden]="!_areCalendarsShown">       <dp-day-calendar #dayCalendar                        *ngSwitchCase="\'day\'"                        [config]="dayCalendarConfig"                        [ngModel]="_selected"                        [displayDate]="currentDateView"                        (onSelect)="dateSelected($event, \'day\')"                        [theme]="theme">        </dp-day-calendar>        <dp-month-calendar #monthCalendar                          *ngSwitchCase="\'month\'"                          [config]="dayCalendarConfig"                          [ngModel]="_selected"                          [displayDate]="currentDateView"                          (onSelect)="dateSelected($event, \'month\')"                          [theme]="theme">       </dp-month-calendar>     </div>   </div> </div> ',
                 styles: [':host {  display: inline-block;}:host.dp-material .dp-picker-input {  box-sizing: border-box;  height: 30px;  width: 213px;  font-size: 13px;  outline: none;}:host.dp-material .dp-current-location-btn {  top: calc(50% - 9px);  right: 5px;  height: 18px;  width: 18px;  border: 2px solid rgba(0, 0, 0, 0.6);}.dp-input-container {  position: relative;}.dp-popup {  position: relative;  background: #FFFFFF;  box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.1);  border-left: 1px solid rgba(0, 0, 0, 0.1);  border-right: 1px solid rgba(0, 0, 0, 0.1);  border-bottom: 1px solid rgba(0, 0, 0, 0.1);  z-index: 9999;  white-space: nowrap;}.dp-selected {  background: #106CC8;  color: #FFFFFF;}.dp-current-location-btn {  position: absolute;  top: calc(50% - 7px);  right: 5px;  height: 14px;  width: 13px;  background: rgba(0, 0, 0, 0.6);  border: 1px solid rgba(0, 0, 0, 0.6);  outline: none;  border-radius: 50%;  box-shadow: inset 0 0 0 3px #FFFFFF;  cursor: pointer;}.dp-current-location-btn:hover {  background: #000000;}'],
@@ -261,0 +262,0 @@ providers: [

date-picker/date-picker.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"DatePickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"dp-date-picker","template":"<div>   <div class=\"dp-input-container\">     <input type=\"text\"            class=\"dp-picker-input\"            [placeholder]=\"placeholder\"            [ngModel]=\"inputElementValue\"            (ngModelChange)=\"onViewDateChange($event)\"            (focus)=\"inputFocused()\"            [readonly]=\"componentConfig.disableKeypress\"            [disabled]=\"disabled\"/>      <button class=\"dp-current-location-btn\"             *ngIf=\"componentConfig.showGoToCurrent\"             (click)=\"moveToCurrent()\"             [hidden]=\"!_areCalendarsShown\">     </button>   </div>   <div #container>     <div class=\"dp-popup {{theme}}\"          [ngSwitch]=\"type\"          [hidden]=\"!_areCalendarsShown\">       <dp-day-calendar #dayCalendar                        *ngSwitchCase=\"'day'\"                        [config]=\"dayCalendarConfig\"                        [ngModel]=\"_selected\"                        [displayDate]=\"currentDateView\"                        (onSelect)=\"dateSelected($event, 'day')\"                        [theme]=\"theme\">        </dp-day-calendar>        <dp-month-calendar #monthCalendar                          *ngSwitchCase=\"'month'\"                          [config]=\"dayCalendarConfig\"                          [ngModel]=\"_selected\"                          [displayDate]=\"currentDateView\"                          (onSelect)=\"dateSelected($event, 'month')\"                          [theme]=\"theme\">       </dp-month-calendar>     </div>   </div> </div> ","styles":[":host {  display: inline-block;}:host.dp-material .dp-picker-input {  box-sizing: border-box;  height: 30px;  width: 213px;  font-size: 13px;  outline: none;}:host.dp-material .dp-current-location-btn {  top: calc(50% - 9px);  right: 5px;  height: 18px;  width: 18px;  border: 2px solid rgba(0, 0, 0, 0.6);}.dp-input-container {  position: relative;}.dp-popup {  position: relative;  background: #FFFFFF;  box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.1);  border-left: 1px solid rgba(0, 0, 0, 0.1);  border-right: 1px solid rgba(0, 0, 0, 0.1);  border-bottom: 1px solid rgba(0, 0, 0, 0.1);  z-index: 9999;  white-space: nowrap;}.dp-selected {  background: #106CC8;  color: #FFFFFF;}.dp-current-location-btn {  position: absolute;  top: calc(50% - 7px);  right: 5px;  height: 14px;  width: 13px;  background: rgba(0, 0, 0, 0.6);  border: 1px solid rgba(0, 0, 0, 0.6);  outline: none;  border-radius: 50%;  box-shadow: inset 0 0 0 3px #FFFFFF;  cursor: pointer;}.dp-current-location-btn:hover {  background: #000000;}"],"providers":[{"__symbolic":"reference","module":"./date-picker.service","name":"DatePickerService"},{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"DatePickerComponent"},"multi":true},{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALIDATORS"},"useExisting":{"__symbolic":"reference","name":"DatePickerComponent"},"multi":true}]}]}],"members":{"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"displayDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"minDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"calendarContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["container"]}]}],"dayCalendarRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["dayCalendar"]}]}],"monthCalendarRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["monthCalendar"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./date-picker.service","name":"DatePickerService"},{"__symbolic":"reference","module":"../common/services/dom-appender/dom-appender.service","name":"DomHelper"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","module":"../common/services/utils/utils.service","name":"UtilsService"}]}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["click"]}]}],"onBodyClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:click"]}]}],"onScroll":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:scroll"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["window:resize"]}]}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"onChangeCallback":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"processOnChangeCallback":[{"__symbolic":"method"}],"initValidators":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"setElementPositionInDom":[{"__symbolic":"method"}],"handleInnerElementClick":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"inputFocused":[{"__symbolic":"method"}],"showCalendars":[{"__symbolic":"method"}],"hideCalendar":[{"__symbolic":"method"}],"onViewDateChange":[{"__symbolic":"method"}],"moveToCurrent":[{"__symbolic":"method"}],"dateSelected":[{"__symbolic":"method"}],"onDateClick":[{"__symbolic":"method"}],"onKeyPress":[{"__symbolic":"method"}],"startGlobalListeners":[{"__symbolic":"method"}],"stopGlobalListeners":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DatePickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"dp-date-picker","template":"<div>   <div class=\"dp-input-container\">     <input type=\"text\"            class=\"dp-picker-input\"            [placeholder]=\"placeholder\"            [ngModel]=\"inputElementValue\"            (ngModelChange)=\"onViewDateChange($event)\"            (focus)=\"inputFocused()\"            [readonly]=\"componentConfig.disableKeypress\"            [disabled]=\"disabled\"/>      <button class=\"dp-current-location-btn\"             *ngIf=\"componentConfig.showGoToCurrent\"             (click)=\"moveToCurrent()\"             [hidden]=\"!_areCalendarsShown\">     </button>   </div>   <div #container>     <div class=\"dp-popup {{theme}}\"          [ngSwitch]=\"type\"          [hidden]=\"!_areCalendarsShown\">       <dp-day-calendar #dayCalendar                        *ngSwitchCase=\"'day'\"                        [config]=\"dayCalendarConfig\"                        [ngModel]=\"_selected\"                        [displayDate]=\"currentDateView\"                        (onSelect)=\"dateSelected($event, 'day')\"                        [theme]=\"theme\">        </dp-day-calendar>        <dp-month-calendar #monthCalendar                          *ngSwitchCase=\"'month'\"                          [config]=\"dayCalendarConfig\"                          [ngModel]=\"_selected\"                          [displayDate]=\"currentDateView\"                          (onSelect)=\"dateSelected($event, 'month')\"                          [theme]=\"theme\">       </dp-month-calendar>     </div>   </div> </div> ","styles":[":host {  display: inline-block;}:host.dp-material .dp-picker-input {  box-sizing: border-box;  height: 30px;  width: 213px;  font-size: 13px;  outline: none;}:host.dp-material .dp-current-location-btn {  top: calc(50% - 9px);  right: 5px;  height: 18px;  width: 18px;  border: 2px solid rgba(0, 0, 0, 0.6);}.dp-input-container {  position: relative;}.dp-popup {  position: relative;  background: #FFFFFF;  box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.1);  border-left: 1px solid rgba(0, 0, 0, 0.1);  border-right: 1px solid rgba(0, 0, 0, 0.1);  border-bottom: 1px solid rgba(0, 0, 0, 0.1);  z-index: 9999;  white-space: nowrap;}.dp-selected {  background: #106CC8;  color: #FFFFFF;}.dp-current-location-btn {  position: absolute;  top: calc(50% - 7px);  right: 5px;  height: 14px;  width: 13px;  background: rgba(0, 0, 0, 0.6);  border: 1px solid rgba(0, 0, 0, 0.6);  outline: none;  border-radius: 50%;  box-shadow: inset 0 0 0 3px #FFFFFF;  cursor: pointer;}.dp-current-location-btn:hover {  background: #000000;}"],"providers":[{"__symbolic":"reference","module":"./date-picker.service","name":"DatePickerService"},{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"DatePickerComponent"},"multi":true},{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALIDATORS"},"useExisting":{"__symbolic":"reference","name":"DatePickerComponent"},"multi":true}]}]}],"members":{"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"displayDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"minDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"calendarContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["container"]}]}],"dayCalendarRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["dayCalendar"]}]}],"monthCalendarRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["monthCalendar"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./date-picker.service","name":"DatePickerService"},{"__symbolic":"reference","module":"../common/services/dom-appender/dom-appender.service","name":"DomHelper"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","module":"../common/services/utils/utils.service","name":"UtilsService"}]}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["click"]}]}],"onBodyClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:click"]}]}],"onScroll":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:scroll"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["window:resize"]}]}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"onChangeCallback":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"processOnChangeCallback":[{"__symbolic":"method"}],"initValidators":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"setElementPositionInDom":[{"__symbolic":"method"}],"handleInnerElementClick":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"inputFocused":[{"__symbolic":"method"}],"showCalendars":[{"__symbolic":"method"}],"hideCalendar":[{"__symbolic":"method"}],"onViewDateChange":[{"__symbolic":"method"}],"moveToCurrent":[{"__symbolic":"method"}],"dateSelected":[{"__symbolic":"method"}],"onDateClick":[{"__symbolic":"method"}],"onKeyPress":[{"__symbolic":"method"}],"startGlobalListeners":[{"__symbolic":"method"}],"stopGlobalListeners":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"DatePickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"dp-date-picker","template":"<div>   <div *ngIf=\"!componentConfig.hideInputContainer\" class=\"dp-input-container\">     <input type=\"text\"            class=\"dp-picker-input\"            [placeholder]=\"placeholder\"            [ngModel]=\"inputElementValue\"            (ngModelChange)=\"onViewDateChange($event)\"            (focus)=\"inputFocused()\"            [readonly]=\"componentConfig.disableKeypress\"            [disabled]=\"disabled\"/>      <button type=\"button\"             class=\"dp-current-location-btn\"             *ngIf=\"componentConfig.showGoToCurrent\"             (click)=\"moveToCurrent()\"             [hidden]=\"!_areCalendarsShown\">     </button>   </div>   <div #container>     <div class=\"dp-popup {{theme}}\"          [ngSwitch]=\"type\"          [hidden]=\"!_areCalendarsShown\">       <dp-day-calendar #dayCalendar                        *ngSwitchCase=\"'day'\"                        [config]=\"dayCalendarConfig\"                        [ngModel]=\"_selected\"                        [displayDate]=\"currentDateView\"                        (onSelect)=\"dateSelected($event, 'day')\"                        [theme]=\"theme\">        </dp-day-calendar>        <dp-month-calendar #monthCalendar                          *ngSwitchCase=\"'month'\"                          [config]=\"dayCalendarConfig\"                          [ngModel]=\"_selected\"                          [displayDate]=\"currentDateView\"                          (onSelect)=\"dateSelected($event, 'month')\"                          [theme]=\"theme\">       </dp-month-calendar>     </div>   </div> </div> ","styles":[":host {  display: inline-block;}:host.dp-material .dp-picker-input {  box-sizing: border-box;  height: 30px;  width: 213px;  font-size: 13px;  outline: none;}:host.dp-material .dp-current-location-btn {  top: calc(50% - 9px);  right: 5px;  height: 18px;  width: 18px;  border: 2px solid rgba(0, 0, 0, 0.6);}.dp-input-container {  position: relative;}.dp-popup {  position: relative;  background: #FFFFFF;  box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.1);  border-left: 1px solid rgba(0, 0, 0, 0.1);  border-right: 1px solid rgba(0, 0, 0, 0.1);  border-bottom: 1px solid rgba(0, 0, 0, 0.1);  z-index: 9999;  white-space: nowrap;}.dp-selected {  background: #106CC8;  color: #FFFFFF;}.dp-current-location-btn {  position: absolute;  top: calc(50% - 7px);  right: 5px;  height: 14px;  width: 13px;  background: rgba(0, 0, 0, 0.6);  border: 1px solid rgba(0, 0, 0, 0.6);  outline: none;  border-radius: 50%;  box-shadow: inset 0 0 0 3px #FFFFFF;  cursor: pointer;}.dp-current-location-btn:hover {  background: #000000;}"],"providers":[{"__symbolic":"reference","module":"./date-picker.service","name":"DatePickerService"},{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"DatePickerComponent"},"multi":true},{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALIDATORS"},"useExisting":{"__symbolic":"reference","name":"DatePickerComponent"},"multi":true}]}]}],"members":{"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"displayDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"minDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"calendarContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["container"]}]}],"dayCalendarRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["dayCalendar"]}]}],"monthCalendarRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["monthCalendar"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./date-picker.service","name":"DatePickerService"},{"__symbolic":"reference","module":"../common/services/dom-appender/dom-appender.service","name":"DomHelper"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","module":"../common/services/utils/utils.service","name":"UtilsService"}]}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["click"]}]}],"onBodyClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:click"]}]}],"onScroll":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:scroll"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["window:resize"]}]}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"onChangeCallback":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"processOnChangeCallback":[{"__symbolic":"method"}],"initValidators":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"setElementPositionInDom":[{"__symbolic":"method"}],"setInputElementContainer":[{"__symbolic":"method"}],"handleInnerElementClick":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"inputFocused":[{"__symbolic":"method"}],"showCalendars":[{"__symbolic":"method"}],"hideCalendar":[{"__symbolic":"method"}],"onViewDateChange":[{"__symbolic":"method"}],"moveToCurrent":[{"__symbolic":"method"}],"dateSelected":[{"__symbolic":"method"}],"onDateClick":[{"__symbolic":"method"}],"onKeyPress":[{"__symbolic":"method"}],"startGlobalListeners":[{"__symbolic":"method"}],"stopGlobalListeners":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DatePickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"dp-date-picker","template":"<div>   <div *ngIf=\"!componentConfig.hideInputContainer\" class=\"dp-input-container\">     <input type=\"text\"            class=\"dp-picker-input\"            [placeholder]=\"placeholder\"            [ngModel]=\"inputElementValue\"            (ngModelChange)=\"onViewDateChange($event)\"            (focus)=\"inputFocused()\"            [readonly]=\"componentConfig.disableKeypress\"            [disabled]=\"disabled\"/>      <button type=\"button\"             class=\"dp-current-location-btn\"             *ngIf=\"componentConfig.showGoToCurrent\"             (click)=\"moveToCurrent()\"             [hidden]=\"!_areCalendarsShown\">     </button>   </div>   <div #container>     <div class=\"dp-popup {{theme}}\"          [ngSwitch]=\"type\"          [hidden]=\"!_areCalendarsShown\">       <dp-day-calendar #dayCalendar                        *ngSwitchCase=\"'day'\"                        [config]=\"dayCalendarConfig\"                        [ngModel]=\"_selected\"                        [displayDate]=\"currentDateView\"                        (onSelect)=\"dateSelected($event, 'day')\"                        [theme]=\"theme\">        </dp-day-calendar>        <dp-month-calendar #monthCalendar                          *ngSwitchCase=\"'month'\"                          [config]=\"dayCalendarConfig\"                          [ngModel]=\"_selected\"                          [displayDate]=\"currentDateView\"                          (onSelect)=\"dateSelected($event, 'month')\"                          [theme]=\"theme\">       </dp-month-calendar>     </div>   </div> </div> ","styles":[":host {  display: inline-block;}:host.dp-material .dp-picker-input {  box-sizing: border-box;  height: 30px;  width: 213px;  font-size: 13px;  outline: none;}:host.dp-material .dp-current-location-btn {  top: calc(50% - 9px);  right: 5px;  height: 18px;  width: 18px;  border: 2px solid rgba(0, 0, 0, 0.6);}.dp-input-container {  position: relative;}.dp-popup {  position: relative;  background: #FFFFFF;  box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.1);  border-left: 1px solid rgba(0, 0, 0, 0.1);  border-right: 1px solid rgba(0, 0, 0, 0.1);  border-bottom: 1px solid rgba(0, 0, 0, 0.1);  z-index: 9999;  white-space: nowrap;}.dp-selected {  background: #106CC8;  color: #FFFFFF;}.dp-current-location-btn {  position: absolute;  top: calc(50% - 7px);  right: 5px;  height: 14px;  width: 13px;  background: rgba(0, 0, 0, 0.6);  border: 1px solid rgba(0, 0, 0, 0.6);  outline: none;  border-radius: 50%;  box-shadow: inset 0 0 0 3px #FFFFFF;  cursor: pointer;}.dp-current-location-btn:hover {  background: #000000;}"],"providers":[{"__symbolic":"reference","module":"./date-picker.service","name":"DatePickerService"},{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"DatePickerComponent"},"multi":true},{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALIDATORS"},"useExisting":{"__symbolic":"reference","name":"DatePickerComponent"},"multi":true}]}]}],"members":{"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"displayDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"minDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"calendarContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["container"]}]}],"dayCalendarRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["dayCalendar"]}]}],"monthCalendarRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["monthCalendar"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./date-picker.service","name":"DatePickerService"},{"__symbolic":"reference","module":"../common/services/dom-appender/dom-appender.service","name":"DomHelper"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","module":"../common/services/utils/utils.service","name":"UtilsService"}]}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["click"]}]}],"onBodyClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:click"]}]}],"onScroll":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:scroll"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["window:resize"]}]}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"onChangeCallback":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"processOnChangeCallback":[{"__symbolic":"method"}],"initValidators":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"setElementPositionInDom":[{"__symbolic":"method"}],"setInputElementContainer":[{"__symbolic":"method"}],"handleInnerElementClick":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"inputFocused":[{"__symbolic":"method"}],"showCalendars":[{"__symbolic":"method"}],"hideCalendar":[{"__symbolic":"method"}],"onViewDateChange":[{"__symbolic":"method"}],"moveToCurrent":[{"__symbolic":"method"}],"dateSelected":[{"__symbolic":"method"}],"onDateClick":[{"__symbolic":"method"}],"onKeyPress":[{"__symbolic":"method"}],"startGlobalListeners":[{"__symbolic":"method"}],"stopGlobalListeners":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}}]

date-picker/date-picker.service.d.ts

@@ -13,8 +13,2 @@ import { EventEmitter } from '@angular/core';
     getDayConfigService(pickerConfig: IDatePickerConfig): IDayCalendarConfig;
-    createValidator({minDate, maxDate}: {
-        minDate: any;
-        maxDate: any;
-    }, dateFormat: string): (FormControl, string) => {
-        [key: string]: any;
-    };
     pickerClosed(): void;
@@ -21,0 +15,0 @@ isValidInputDateValue(value: string, config: IDatePickerConfig): boolean;

date-picker/date-picker.service.js

@@ -11,5 +11,4 @@ "use strict";
 var core_1 = require("@angular/core");
-var moment = require("jalali-moment");
 var utils_service_1 = require("../common/services/utils/utils.service");
-var calendar_type_1 = require("../common/types/calendar-type");
+var calendar_type_enum_1 = require("../common/types/calendar-type-enum");
 var DatePickerService = (function () {
@@ -35,3 +34,3 @@ function DatePickerService(utilsService) {
     DatePickerService.prototype.getConfig = function (config) {
-        this.defaultConfig.format = (!config || (config.calendarSystem != calendar_type_1.ECalendarSystem.gregorian)) ? 'jDD-jMM-jYYYY' : 'DD-MM-YYYY';
+        this.defaultConfig.format = (!config || (config.calendarSystem != calendar_type_enum_1.ECalendarSystem.gregorian)) ? 'jDD-jMM-jYYYY' : 'DD-MM-YYYY';
         var _config = __assign({}, this.defaultConfig, this.utilsService.clearUndefined(config));
@@ -73,65 +72,2 @@ var min = _config.min, max = _config.max, format = _config.format;
     };
-    DatePickerService.prototype.createValidator = function (_a, dateFormat) {
-        var minDate = _a.minDate, maxDate = _a.maxDate;
-        var isValid;
-        var value;
-        var validators = [];
-        if (minDate) {
-            validators.push({
-                key: 'minDate',
-                isValid: function () {
-                    var _isValid = value.every(function (val) { return val.isSameOrAfter(minDate, 'day'); });
-                    isValid = isValid ? _isValid : false;
-                    return _isValid;
-                }
-            });
-        }
-        if (maxDate) {
-            validators.push({
-                key: 'maxDate',
-                isValid: function () {
-                    var _isValid = value.every(function (val) { return val.isSameOrBefore(maxDate, 'day'); });
-                    isValid = isValid ? _isValid : false;
-                    return _isValid;
-                }
-            });
-        }
-        return function validateInput(formControl, format) {
-            var _this = this;
-            isValid = true;
-            if (formControl.value) {
-                if (typeof formControl.value === 'string') {
-                    var dateStrings = formControl.value.split(',').map(function (date) { return date.trim(); });
-                    var validDateStrings = dateStrings
-                        .filter(function (date) { return _this.utilsService.isDateValid(date, format); });
-                    value = validDateStrings.map(function (dateString) { return moment(dateString, dateFormat); });
-                }
-                else if (!Array.isArray(formControl.value)) {
-                    value = [formControl.value];
-                }
-                else {
-                    value = formControl.value.map(function (val) { return _this.utilsService.convertToMoment(val, dateFormat); });
-                }
-            }
-            else {
-                return null;
-            }
-            if (!value.every(function (val) { return val.isValid(); })) {
-                return {
-                    format: {
-                        given: formControl.value
-                    }
-                };
-            }
-            var errors = validators.reduce(function (map, err) {
-                if (!err.isValid()) {
-                    map[err.key] = {
-                        given: value
-                    };
-                }
-                return map;
-            }, {});
-            return !isValid ? errors : null;
-        };
-    };
     DatePickerService.prototype.pickerClosed = function () {
@@ -138,0 +74,0 @@ this.onPickerClosed.emit();

date-picker/date-picker.service.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"DatePickerService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../common/services/utils/utils.service","name":"UtilsService"}]}],"getConfig":[{"__symbolic":"method"}],"getDayConfigService":[{"__symbolic":"method"}],"createValidator":[{"__symbolic":"method"}],"pickerClosed":[{"__symbolic":"method"}],"isValidInputDateValue":[{"__symbolic":"method"}],"convertInputValueToMomentArray":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DatePickerService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../common/services/utils/utils.service","name":"UtilsService"}]}],"getConfig":[{"__symbolic":"method"}],"getDayConfigService":[{"__symbolic":"method"}],"createValidator":[{"__symbolic":"method"}],"pickerClosed":[{"__symbolic":"method"}],"isValidInputDateValue":[{"__symbolic":"method"}],"convertInputValueToMomentArray":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"DatePickerService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../common/services/utils/utils.service","name":"UtilsService"}]}],"getConfig":[{"__symbolic":"method"}],"getDayConfigService":[{"__symbolic":"method"}],"pickerClosed":[{"__symbolic":"method"}],"isValidInputDateValue":[{"__symbolic":"method"}],"convertInputValueToMomentArray":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DatePickerService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../common/services/utils/utils.service","name":"UtilsService"}]}],"getConfig":[{"__symbolic":"method"}],"getDayConfigService":[{"__symbolic":"method"}],"pickerClosed":[{"__symbolic":"method"}],"isValidInputDateValue":[{"__symbolic":"method"}],"convertInputValueToMomentArray":[{"__symbolic":"method"}]}}}}]

day-calendar/day-calendar-config.model.d.ts

 import { ICalendar } from '../common/models/calendar.model';
 import { WeekDays } from '../common/types/week-days.type';
 import { Moment } from 'jalali-moment';
-import { ECalendarSystem } from "../common/types/calendar-type";
+import { ECalendarSystem } from '../common/types/calendar-type-enum';
 export interface IDayCalendarConfig extends ICalendar {
@@ -6,0 +6,0 @@ isDayDisabledCallback?: (date: Moment) => boolean;

day-calendar/day-calendar-config.model.js

 "use strict";
 //# sourceMappingURL=day-calendar-config.model.js.map

day-calendar/day-calendar.component.d.ts

@@ -0,1 +1,3 @@
+import { ECalendarValue } from '../common/types/calendar-value-enum';
+import { SingleCalendarValue } from '../common/types/single-calendar-value';
 import { OnInit, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
@@ -8,5 +10,5 @@ import { DayCalendarService } from './day-calendar.service';
 import { ControlValueAccessor, Validator, ValidationErrors, FormControl } from '@angular/forms';
-import { CalendarValue, ECalendarValue, SingleCalendarValue } from '../common/types/calendar-value';
+import { CalendarValue } from '../common/types/calendar-value';
 import { UtilsService } from '../common/services/utils/utils.service';
-import { ECalendarType } from '../common/types/calendar-type';
+import { ECalendarType } from '../common/types/calendar-type-enum';
 import { IMonthCalendarConfig } from '../month-calendar/month-calendar-config';
@@ -23,2 +25,3 @@ import { IMonth } from '../month-calendar/month.model';
     onSelect: EventEmitter<IDay>;
+    onMonthSelect: EventEmitter<IMonth>;
     onNavHeaderBtnClick: EventEmitter<ECalendarType>;
@@ -34,3 +37,3 @@ CalendarType: typeof ECalendarType;
     inputValueType: ECalendarValue;
-    validateFn: (FormControl, string) => {
+    validateFn: (inputVal: CalendarValue) => {
         [key: string]: any;
@@ -37,0 +40,0 @@ };

day-calendar/day-calendar.component.js

@@ -6,3 +6,3 @@ "use strict";
 var utils_service_1 = require("../common/services/utils/utils.service");
-var calendar_type_1 = require("../common/types/calendar-type");
+var calendar_type_enum_1 = require("../common/types/calendar-type-enum");
 var DayCalendarComponent = (function () {
@@ -13,6 +13,7 @@ function DayCalendarComponent(dayCalendarService, utilsService) {
         this.onSelect = new core_1.EventEmitter();
+        this.onMonthSelect = new core_1.EventEmitter();
         this.onNavHeaderBtnClick = new core_1.EventEmitter();
-        this.CalendarType = calendar_type_1.ECalendarType;
+        this.CalendarType = calendar_type_enum_1.ECalendarType;
         this.isInited = false;
-        this.currentCalendarType = calendar_type_1.ECalendarType.Day;
+        this.currentCalendarType = calendar_type_enum_1.ECalendarType.Day;
         this.api = {
@@ -54,3 +55,3 @@ moveCalendarsBy: this.moveCalendarsBy.bind(this),
     DayCalendarComponent.prototype.isJalali = function () {
-        return this.componentConfig.calendarSystem != calendar_type_1.ECalendarSystem.gregorian;
+        return this.componentConfig.calendarSystem != calendar_type_enum_1.ECalendarSystem.gregorian;
     };
@@ -87,3 +88,3 @@ DayCalendarComponent.prototype.ngOnChanges = function (changes) {
         if (this.minDate || this.maxDate) {
-            return this.validateFn(formControl, this.componentConfig.format);
+            return this.validateFn(formControl.value);
         }
@@ -98,6 +99,3 @@ else {
     DayCalendarComponent.prototype.initValidators = function () {
-        this.validateFn = this.dayCalendarService.createValidator({
-            minDate: this.utilsService.convertToMoment(this.minDate, this.componentConfig.format),
-            maxDate: this.utilsService.convertToMoment(this.maxDate, this.componentConfig.format)
-        }, this.componentConfig.format);
+        this.validateFn = this.utilsService.createValidator({ minDate: this.minDate, maxDate: this.maxDate }, this.componentConfig.format, 'day');
         this.onChangeCallback(this.processOnChangeCallback(this.selected));
@@ -148,5 +146,6 @@ };
         this.currentDateView = month.date.clone();
-        this.currentCalendarType = calendar_type_1.ECalendarType.Day;
+        this.currentCalendarType = calendar_type_enum_1.ECalendarType.Day;
         this.weeks = this.dayCalendarService
             .generateMonthArray(this.componentConfig, this.currentDateView, this.selected);
+        this.onMonthSelect.emit(month);
     };
@@ -164,4 +163,4 @@ DayCalendarComponent.prototype.moveCalendarsBy = function (current, amount, granularity) {
                 selector: 'dp-day-calendar',
-                template: '<div class="dp-day-calendar-container" [hidden]="currentCalendarType !==  CalendarType.Day">   <dp-calendar-nav       [label]="getNavLabel()"       [showLeftNav]="shouldShowLeftNav()"       [showRightNav]="shouldShowRightNav()"       [isLabelClickable]="isNavHeaderBtnClickable()"       [theme]="theme"       (onLeftNav)="onLeftNav()"       (onRightNav)="onRightNav()"       (onLabelClick)="toggleCalendar(CalendarType.Month)">   </dp-calendar-nav>    <div class="dp-calendar-wrapper"        [ngClass]="{\'dp-hide-near-month\': !componentConfig.showNearMonthDays,\'rtl\':isJalali()}">     <div class="dp-weekdays">       <span class="dp-calendar-weekday" *ngFor="let weekday of weekdays">{{weekday}}</span>     </div>     <div class="dp-calendar-week" *ngFor="let week of weeks">       <span *ngIf="componentConfig.showWeekNumbers" class="dp-week-number">{{week[0].date.isoWeek()}}</span>       <button class="dp-calendar-day"               *ngFor="let day of week"               (click)="dayClicked(day)"               [disabled]="isDisabledDay(day)"               [ngClass]="{               \'dp-selected\': day.selected,               \'dp-current-month\': day.currentMonth,               \'dp-prev-month\': day.prevMonth,               \'dp-next-month\': day.nextMonth,               \'dp-current-day\': day.currentDay             }">         {{getDayBtnText(day)}}       </button>     </div>   </div>  </div>  <dp-month-calendar     *ngIf="currentCalendarType ===  CalendarType.Month"     [config]="monthCalendarConfig"     [displayDate]="currentDateView"     [theme]="theme"     (onSelect)="monthSelected($event)"     (onNavHeaderBtnClick)="toggleCalendar(CalendarType.Day)"> </dp-month-calendar> ',
-                styles: [':host {  display: inline-block;}.dp-calendar-wrapper {  box-sizing: border-box;  border: 1px solid #000000;  background: #FFFFFF;}.dp-calendar-wrapper .dp-calendar-weekday:first-child {  border-left: none;}.dp-calendar-weekday {  box-sizing: border-box;  display: inline-block;  width: 30px;  text-align: center;  border-left: 1px solid #000000;  border-bottom: 1px solid #000000;}.dp-calendar-day {  box-sizing: border-box;  width: 30px;  height: 30px;  cursor: pointer;}.dp-selected {  background: #106CC8;  color: #FFFFFF;}.dp-prev-month,.dp-next-month {  opacity: 0.5;}.dp-hide-near-month .dp-prev-month,.dp-hide-near-month .dp-next-month {  visibility: hidden;}.dp-week-number {  position: absolute;  font-size: 9px;}:host.dp-material .dp-calendar-weekday {  height: 25px;  width: 30px;  line-height: 25px;  background: #E0E0E0;  border: none;}:host.dp-material .dp-calendar-wrapper {  border: 1px solid #E0E0E0;}:host.dp-material .dp-calendar-wrapper.rtl {  direction: rtl;}:host.dp-material .dp-calendar-month,:host.dp-material .dp-calendar-day {  box-sizing: border-box;  background: #FFFFFF;  border-radius: 50%;  border: none;  outline: none;}:host.dp-material .dp-calendar-month:hover,:host.dp-material .dp-calendar-day:hover {  background: #E0E0E0;}:host.dp-material .dp-selected {  background: #106CC8;  color: #FFFFFF;}:host.dp-material .dp-selected:hover {  background: #106CC8;}:host.dp-material .dp-current-day {  border: 1px solid #106CC8;}'],
+                template: '<div class="dp-day-calendar-container" [hidden]="currentCalendarType !==  CalendarType.Day">   <dp-calendar-nav       [label]="getNavLabel()"       [showLeftNav]="shouldShowLeftNav()"       [showRightNav]="shouldShowRightNav()"       [isLabelClickable]="isNavHeaderBtnClickable()"       [theme]="theme"       (onLeftNav)="onLeftNav()"       (onRightNav)="onRightNav()"       (onLabelClick)="toggleCalendar(CalendarType.Month)">   </dp-calendar-nav>    <div class="dp-calendar-wrapper"        [ngClass]="{\'dp-hide-near-month\': !componentConfig.showNearMonthDays,\'rtl\':isJalali()}">     <div class="dp-weekdays">       <span class="dp-calendar-weekday" *ngFor="let weekday of weekdays">{{weekday}}</span>     </div>     <div class="dp-calendar-week" *ngFor="let week of weeks">       <span *ngIf="componentConfig.showWeekNumbers" class="dp-week-number">{{week[0].date.isoWeek()}}</span>       <button type="button"               class="dp-calendar-day"               *ngFor="let day of week"               (click)="dayClicked(day)"               [disabled]="isDisabledDay(day)"               [ngClass]="{               \'dp-selected\': day.selected,               \'dp-current-month\': day.currentMonth,               \'dp-prev-month\': day.prevMonth,               \'dp-next-month\': day.nextMonth,               \'dp-current-day\': day.currentDay             }">         {{getDayBtnText(day)}}       </button>     </div>   </div>  </div>  <dp-month-calendar     *ngIf="currentCalendarType ===  CalendarType.Month"     [config]="monthCalendarConfig"     [displayDate]="currentDateView"     [theme]="theme"     (onSelect)="monthSelected($event)"     (onNavHeaderBtnClick)="toggleCalendar(CalendarType.Day)"> </dp-month-calendar> ',
+                styles: [':host {  display: inline-block;}.dp-calendar-wrapper {  box-sizing: border-box;  border: 1px solid #000000;  background: #FFFFFF;}.dp-calendar-wrapper .dp-calendar-weekday:first-child {  border-left: none;}.dp-calendar-weekday {  box-sizing: border-box;  display: inline-block;  width: 30px;  text-align: center;  border-left: 1px solid #000000;  border-bottom: 1px solid #000000;}.dp-calendar-day {  box-sizing: border-box;  width: 30px;  height: 30px;  cursor: pointer;}.dp-selected {  background: #106CC8;  color: #FFFFFF;}.dp-prev-month,.dp-next-month {  opacity: 0.5;}.dp-hide-near-month .dp-prev-month,.dp-hide-near-month .dp-next-month {  visibility: hidden;}.dp-week-number {  position: absolute;  font-size: 9px;}:host.dp-material .dp-calendar-weekday {  height: 25px;  width: 30px;  line-height: 25px;  border: none;  font-size: 12px;  color: #E0E0E0;}:host.dp-material .dp-calendar-wrapper {  border: 1px solid #E0E0E0;}:host.dp-material .dp-calendar-wrapper.rtl {  direction: rtl;}:host.dp-material .dp-calendar-month,:host.dp-material .dp-calendar-day {  box-sizing: border-box;  background: #FFFFFF;  border-radius: 50%;  border: none;  outline: none;  padding: 0;}:host.dp-material .dp-calendar-month:hover,:host.dp-material .dp-calendar-day:hover {  background: #E0E0E0;}:host.dp-material .dp-selected {  background: #106CC8;  color: #FFFFFF;}:host.dp-material .dp-selected:hover {  background: #106CC8;}:host.dp-material .dp-current-day {  border: 1px solid #106CC8;}'],
                 providers: [
@@ -194,2 +193,3 @@ day_calendar_service_1.DayCalendarService,
     'onSelect': [{ type: core_1.Output },],
+    'onMonthSelect': [{ type: core_1.Output },],
     'onNavHeaderBtnClick': [{ type: core_1.Output },],
@@ -196,0 +196,0 @@ };

day-calendar/day-calendar.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"DayCalendarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"dp-day-calendar","template":"<div class=\"dp-day-calendar-container\" [hidden]=\"currentCalendarType !==  CalendarType.Day\">   <dp-calendar-nav       [label]=\"getNavLabel()\"       [showLeftNav]=\"shouldShowLeftNav()\"       [showRightNav]=\"shouldShowRightNav()\"       [isLabelClickable]=\"isNavHeaderBtnClickable()\"       [theme]=\"theme\"       (onLeftNav)=\"onLeftNav()\"       (onRightNav)=\"onRightNav()\"       (onLabelClick)=\"toggleCalendar(CalendarType.Month)\">   </dp-calendar-nav>    <div class=\"dp-calendar-wrapper\"        [ngClass]=\"{'dp-hide-near-month': !componentConfig.showNearMonthDays,'rtl':isJalali()}\">     <div class=\"dp-weekdays\">       <span class=\"dp-calendar-weekday\" *ngFor=\"let weekday of weekdays\">{{weekday}}</span>     </div>     <div class=\"dp-calendar-week\" *ngFor=\"let week of weeks\">       <span *ngIf=\"componentConfig.showWeekNumbers\" class=\"dp-week-number\">{{week[0].date.isoWeek()}}</span>       <button class=\"dp-calendar-day\"               *ngFor=\"let day of week\"               (click)=\"dayClicked(day)\"               [disabled]=\"isDisabledDay(day)\"               [ngClass]=\"{               'dp-selected': day.selected,               'dp-current-month': day.currentMonth,               'dp-prev-month': day.prevMonth,               'dp-next-month': day.nextMonth,               'dp-current-day': day.currentDay             }\">         {{getDayBtnText(day)}}       </button>     </div>   </div>  </div>  <dp-month-calendar     *ngIf=\"currentCalendarType ===  CalendarType.Month\"     [config]=\"monthCalendarConfig\"     [displayDate]=\"currentDateView\"     [theme]=\"theme\"     (onSelect)=\"monthSelected($event)\"     (onNavHeaderBtnClick)=\"toggleCalendar(CalendarType.Day)\"> </dp-month-calendar> ","styles":[":host {  display: inline-block;}.dp-calendar-wrapper {  box-sizing: border-box;  border: 1px solid #000000;  background: #FFFFFF;}.dp-calendar-wrapper .dp-calendar-weekday:first-child {  border-left: none;}.dp-calendar-weekday {  box-sizing: border-box;  display: inline-block;  width: 30px;  text-align: center;  border-left: 1px solid #000000;  border-bottom: 1px solid #000000;}.dp-calendar-day {  box-sizing: border-box;  width: 30px;  height: 30px;  cursor: pointer;}.dp-selected {  background: #106CC8;  color: #FFFFFF;}.dp-prev-month,.dp-next-month {  opacity: 0.5;}.dp-hide-near-month .dp-prev-month,.dp-hide-near-month .dp-next-month {  visibility: hidden;}.dp-week-number {  position: absolute;  font-size: 9px;}:host.dp-material .dp-calendar-weekday {  height: 25px;  width: 30px;  line-height: 25px;  background: #E0E0E0;  border: none;}:host.dp-material .dp-calendar-wrapper {  border: 1px solid #E0E0E0;}:host.dp-material .dp-calendar-wrapper.rtl {  direction: rtl;}:host.dp-material .dp-calendar-month,:host.dp-material .dp-calendar-day {  box-sizing: border-box;  background: #FFFFFF;  border-radius: 50%;  border: none;  outline: none;}:host.dp-material .dp-calendar-month:hover,:host.dp-material .dp-calendar-day:hover {  background: #E0E0E0;}:host.dp-material .dp-selected {  background: #106CC8;  color: #FFFFFF;}:host.dp-material .dp-selected:hover {  background: #106CC8;}:host.dp-material .dp-current-day {  border: 1px solid #106CC8;}"],"providers":[{"__symbolic":"reference","module":"./day-calendar.service","name":"DayCalendarService"},{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"DayCalendarComponent"},"multi":true},{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALIDATORS"},"useExisting":{"__symbolic":"reference","name":"DayCalendarComponent"},"multi":true}]}]}],"members":{"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"displayDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"minDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onNavHeaderBtnClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./day-calendar.service","name":"DayCalendarService"},{"__symbolic":"reference","module":"../common/services/utils/utils.service","name":"UtilsService"}]}],"ngOnInit":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"isJalali":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"onChangeCallback":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"processOnChangeCallback":[{"__symbolic":"method"}],"initValidators":[{"__symbolic":"method"}],"isDisabledDay":[{"__symbolic":"method"}],"dayClicked":[{"__symbolic":"method"}],"getNavLabel":[{"__symbolic":"method"}],"getDayBtnText":[{"__symbolic":"method"}],"onLeftNav":[{"__symbolic":"method"}],"onRightNav":[{"__symbolic":"method"}],"shouldShowLeftNav":[{"__symbolic":"method"}],"shouldShowRightNav":[{"__symbolic":"method"}],"isNavHeaderBtnClickable":[{"__symbolic":"method"}],"toggleCalendar":[{"__symbolic":"method"}],"monthSelected":[{"__symbolic":"method"}],"moveCalendarsBy":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DayCalendarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"dp-day-calendar","template":"<div class=\"dp-day-calendar-container\" [hidden]=\"currentCalendarType !==  CalendarType.Day\">   <dp-calendar-nav       [label]=\"getNavLabel()\"       [showLeftNav]=\"shouldShowLeftNav()\"       [showRightNav]=\"shouldShowRightNav()\"       [isLabelClickable]=\"isNavHeaderBtnClickable()\"       [theme]=\"theme\"       (onLeftNav)=\"onLeftNav()\"       (onRightNav)=\"onRightNav()\"       (onLabelClick)=\"toggleCalendar(CalendarType.Month)\">   </dp-calendar-nav>    <div class=\"dp-calendar-wrapper\"        [ngClass]=\"{'dp-hide-near-month': !componentConfig.showNearMonthDays,'rtl':isJalali()}\">     <div class=\"dp-weekdays\">       <span class=\"dp-calendar-weekday\" *ngFor=\"let weekday of weekdays\">{{weekday}}</span>     </div>     <div class=\"dp-calendar-week\" *ngFor=\"let week of weeks\">       <span *ngIf=\"componentConfig.showWeekNumbers\" class=\"dp-week-number\">{{week[0].date.isoWeek()}}</span>       <button class=\"dp-calendar-day\"               *ngFor=\"let day of week\"               (click)=\"dayClicked(day)\"               [disabled]=\"isDisabledDay(day)\"               [ngClass]=\"{               'dp-selected': day.selected,               'dp-current-month': day.currentMonth,               'dp-prev-month': day.prevMonth,               'dp-next-month': day.nextMonth,               'dp-current-day': day.currentDay             }\">         {{getDayBtnText(day)}}       </button>     </div>   </div>  </div>  <dp-month-calendar     *ngIf=\"currentCalendarType ===  CalendarType.Month\"     [config]=\"monthCalendarConfig\"     [displayDate]=\"currentDateView\"     [theme]=\"theme\"     (onSelect)=\"monthSelected($event)\"     (onNavHeaderBtnClick)=\"toggleCalendar(CalendarType.Day)\"> </dp-month-calendar> ","styles":[":host {  display: inline-block;}.dp-calendar-wrapper {  box-sizing: border-box;  border: 1px solid #000000;  background: #FFFFFF;}.dp-calendar-wrapper .dp-calendar-weekday:first-child {  border-left: none;}.dp-calendar-weekday {  box-sizing: border-box;  display: inline-block;  width: 30px;  text-align: center;  border-left: 1px solid #000000;  border-bottom: 1px solid #000000;}.dp-calendar-day {  box-sizing: border-box;  width: 30px;  height: 30px;  cursor: pointer;}.dp-selected {  background: #106CC8;  color: #FFFFFF;}.dp-prev-month,.dp-next-month {  opacity: 0.5;}.dp-hide-near-month .dp-prev-month,.dp-hide-near-month .dp-next-month {  visibility: hidden;}.dp-week-number {  position: absolute;  font-size: 9px;}:host.dp-material .dp-calendar-weekday {  height: 25px;  width: 30px;  line-height: 25px;  background: #E0E0E0;  border: none;}:host.dp-material .dp-calendar-wrapper {  border: 1px solid #E0E0E0;}:host.dp-material .dp-calendar-wrapper.rtl {  direction: rtl;}:host.dp-material .dp-calendar-month,:host.dp-material .dp-calendar-day {  box-sizing: border-box;  background: #FFFFFF;  border-radius: 50%;  border: none;  outline: none;}:host.dp-material .dp-calendar-month:hover,:host.dp-material .dp-calendar-day:hover {  background: #E0E0E0;}:host.dp-material .dp-selected {  background: #106CC8;  color: #FFFFFF;}:host.dp-material .dp-selected:hover {  background: #106CC8;}:host.dp-material .dp-current-day {  border: 1px solid #106CC8;}"],"providers":[{"__symbolic":"reference","module":"./day-calendar.service","name":"DayCalendarService"},{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"DayCalendarComponent"},"multi":true},{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALIDATORS"},"useExisting":{"__symbolic":"reference","name":"DayCalendarComponent"},"multi":true}]}]}],"members":{"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"displayDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"minDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onNavHeaderBtnClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./day-calendar.service","name":"DayCalendarService"},{"__symbolic":"reference","module":"../common/services/utils/utils.service","name":"UtilsService"}]}],"ngOnInit":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"isJalali":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"onChangeCallback":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"processOnChangeCallback":[{"__symbolic":"method"}],"initValidators":[{"__symbolic":"method"}],"isDisabledDay":[{"__symbolic":"method"}],"dayClicked":[{"__symbolic":"method"}],"getNavLabel":[{"__symbolic":"method"}],"getDayBtnText":[{"__symbolic":"method"}],"onLeftNav":[{"__symbolic":"method"}],"onRightNav":[{"__symbolic":"method"}],"shouldShowLeftNav":[{"__symbolic":"method"}],"shouldShowRightNav":[{"__symbolic":"method"}],"isNavHeaderBtnClickable":[{"__symbolic":"method"}],"toggleCalendar":[{"__symbolic":"method"}],"monthSelected":[{"__symbolic":"method"}],"moveCalendarsBy":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"DayCalendarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"dp-day-calendar","template":"<div class=\"dp-day-calendar-container\" [hidden]=\"currentCalendarType !==  CalendarType.Day\">   <dp-calendar-nav       [label]=\"getNavLabel()\"       [showLeftNav]=\"shouldShowLeftNav()\"       [showRightNav]=\"shouldShowRightNav()\"       [isLabelClickable]=\"isNavHeaderBtnClickable()\"       [theme]=\"theme\"       (onLeftNav)=\"onLeftNav()\"       (onRightNav)=\"onRightNav()\"       (onLabelClick)=\"toggleCalendar(CalendarType.Month)\">   </dp-calendar-nav>    <div class=\"dp-calendar-wrapper\"        [ngClass]=\"{'dp-hide-near-month': !componentConfig.showNearMonthDays,'rtl':isJalali()}\">     <div class=\"dp-weekdays\">       <span class=\"dp-calendar-weekday\" *ngFor=\"let weekday of weekdays\">{{weekday}}</span>     </div>     <div class=\"dp-calendar-week\" *ngFor=\"let week of weeks\">       <span *ngIf=\"componentConfig.showWeekNumbers\" class=\"dp-week-number\">{{week[0].date.isoWeek()}}</span>       <button type=\"button\"               class=\"dp-calendar-day\"               *ngFor=\"let day of week\"               (click)=\"dayClicked(day)\"               [disabled]=\"isDisabledDay(day)\"               [ngClass]=\"{               'dp-selected': day.selected,               'dp-current-month': day.currentMonth,               'dp-prev-month': day.prevMonth,               'dp-next-month': day.nextMonth,               'dp-current-day': day.currentDay             }\">         {{getDayBtnText(day)}}       </button>     </div>   </div>  </div>  <dp-month-calendar     *ngIf=\"currentCalendarType ===  CalendarType.Month\"     [config]=\"monthCalendarConfig\"     [displayDate]=\"currentDateView\"     [theme]=\"theme\"     (onSelect)=\"monthSelected($event)\"     (onNavHeaderBtnClick)=\"toggleCalendar(CalendarType.Day)\"> </dp-month-calendar> ","styles":[":host {  display: inline-block;}.dp-calendar-wrapper {  box-sizing: border-box;  border: 1px solid #000000;  background: #FFFFFF;}.dp-calendar-wrapper .dp-calendar-weekday:first-child {  border-left: none;}.dp-calendar-weekday {  box-sizing: border-box;  display: inline-block;  width: 30px;  text-align: center;  border-left: 1px solid #000000;  border-bottom: 1px solid #000000;}.dp-calendar-day {  box-sizing: border-box;  width: 30px;  height: 30px;  cursor: pointer;}.dp-selected {  background: #106CC8;  color: #FFFFFF;}.dp-prev-month,.dp-next-month {  opacity: 0.5;}.dp-hide-near-month .dp-prev-month,.dp-hide-near-month .dp-next-month {  visibility: hidden;}.dp-week-number {  position: absolute;  font-size: 9px;}:host.dp-material .dp-calendar-weekday {  height: 25px;  width: 30px;  line-height: 25px;  border: none;  font-size: 12px;  color: #E0E0E0;}:host.dp-material .dp-calendar-wrapper {  border: 1px solid #E0E0E0;}:host.dp-material .dp-calendar-wrapper.rtl {  direction: rtl;}:host.dp-material .dp-calendar-month,:host.dp-material .dp-calendar-day {  box-sizing: border-box;  background: #FFFFFF;  border-radius: 50%;  border: none;  outline: none;  padding: 0;}:host.dp-material .dp-calendar-month:hover,:host.dp-material .dp-calendar-day:hover {  background: #E0E0E0;}:host.dp-material .dp-selected {  background: #106CC8;  color: #FFFFFF;}:host.dp-material .dp-selected:hover {  background: #106CC8;}:host.dp-material .dp-current-day {  border: 1px solid #106CC8;}"],"providers":[{"__symbolic":"reference","module":"./day-calendar.service","name":"DayCalendarService"},{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"DayCalendarComponent"},"multi":true},{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALIDATORS"},"useExisting":{"__symbolic":"reference","name":"DayCalendarComponent"},"multi":true}]}]}],"members":{"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"displayDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"minDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onMonthSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onNavHeaderBtnClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./day-calendar.service","name":"DayCalendarService"},{"__symbolic":"reference","module":"../common/services/utils/utils.service","name":"UtilsService"}]}],"ngOnInit":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"isJalali":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"onChangeCallback":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"processOnChangeCallback":[{"__symbolic":"method"}],"initValidators":[{"__symbolic":"method"}],"isDisabledDay":[{"__symbolic":"method"}],"dayClicked":[{"__symbolic":"method"}],"getNavLabel":[{"__symbolic":"method"}],"getDayBtnText":[{"__symbolic":"method"}],"onLeftNav":[{"__symbolic":"method"}],"onRightNav":[{"__symbolic":"method"}],"shouldShowLeftNav":[{"__symbolic":"method"}],"shouldShowRightNav":[{"__symbolic":"method"}],"isNavHeaderBtnClickable":[{"__symbolic":"method"}],"toggleCalendar":[{"__symbolic":"method"}],"monthSelected":[{"__symbolic":"method"}],"moveCalendarsBy":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DayCalendarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"dp-day-calendar","template":"<div class=\"dp-day-calendar-container\" [hidden]=\"currentCalendarType !==  CalendarType.Day\">   <dp-calendar-nav       [label]=\"getNavLabel()\"       [showLeftNav]=\"shouldShowLeftNav()\"       [showRightNav]=\"shouldShowRightNav()\"       [isLabelClickable]=\"isNavHeaderBtnClickable()\"       [theme]=\"theme\"       (onLeftNav)=\"onLeftNav()\"       (onRightNav)=\"onRightNav()\"       (onLabelClick)=\"toggleCalendar(CalendarType.Month)\">   </dp-calendar-nav>    <div class=\"dp-calendar-wrapper\"        [ngClass]=\"{'dp-hide-near-month': !componentConfig.showNearMonthDays,'rtl':isJalali()}\">     <div class=\"dp-weekdays\">       <span class=\"dp-calendar-weekday\" *ngFor=\"let weekday of weekdays\">{{weekday}}</span>     </div>     <div class=\"dp-calendar-week\" *ngFor=\"let week of weeks\">       <span *ngIf=\"componentConfig.showWeekNumbers\" class=\"dp-week-number\">{{week[0].date.isoWeek()}}</span>       <button type=\"button\"               class=\"dp-calendar-day\"               *ngFor=\"let day of week\"               (click)=\"dayClicked(day)\"               [disabled]=\"isDisabledDay(day)\"               [ngClass]=\"{               'dp-selected': day.selected,               'dp-current-month': day.currentMonth,               'dp-prev-month': day.prevMonth,               'dp-next-month': day.nextMonth,               'dp-current-day': day.currentDay             }\">         {{getDayBtnText(day)}}       </button>     </div>   </div>  </div>  <dp-month-calendar     *ngIf=\"currentCalendarType ===  CalendarType.Month\"     [config]=\"monthCalendarConfig\"     [displayDate]=\"currentDateView\"     [theme]=\"theme\"     (onSelect)=\"monthSelected($event)\"     (onNavHeaderBtnClick)=\"toggleCalendar(CalendarType.Day)\"> </dp-month-calendar> ","styles":[":host {  display: inline-block;}.dp-calendar-wrapper {  box-sizing: border-box;  border: 1px solid #000000;  background: #FFFFFF;}.dp-calendar-wrapper .dp-calendar-weekday:first-child {  border-left: none;}.dp-calendar-weekday {  box-sizing: border-box;  display: inline-block;  width: 30px;  text-align: center;  border-left: 1px solid #000000;  border-bottom: 1px solid #000000;}.dp-calendar-day {  box-sizing: border-box;  width: 30px;  height: 30px;  cursor: pointer;}.dp-selected {  background: #106CC8;  color: #FFFFFF;}.dp-prev-month,.dp-next-month {  opacity: 0.5;}.dp-hide-near-month .dp-prev-month,.dp-hide-near-month .dp-next-month {  visibility: hidden;}.dp-week-number {  position: absolute;  font-size: 9px;}:host.dp-material .dp-calendar-weekday {  height: 25px;  width: 30px;  line-height: 25px;  border: none;  font-size: 12px;  color: #E0E0E0;}:host.dp-material .dp-calendar-wrapper {  border: 1px solid #E0E0E0;}:host.dp-material .dp-calendar-wrapper.rtl {  direction: rtl;}:host.dp-material .dp-calendar-month,:host.dp-material .dp-calendar-day {  box-sizing: border-box;  background: #FFFFFF;  border-radius: 50%;  border: none;  outline: none;  padding: 0;}:host.dp-material .dp-calendar-month:hover,:host.dp-material .dp-calendar-day:hover {  background: #E0E0E0;}:host.dp-material .dp-selected {  background: #106CC8;  color: #FFFFFF;}:host.dp-material .dp-selected:hover {  background: #106CC8;}:host.dp-material .dp-current-day {  border: 1px solid #106CC8;}"],"providers":[{"__symbolic":"reference","module":"./day-calendar.service","name":"DayCalendarService"},{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"DayCalendarComponent"},"multi":true},{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALIDATORS"},"useExisting":{"__symbolic":"reference","name":"DayCalendarComponent"},"multi":true}]}]}],"members":{"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"displayDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"minDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onMonthSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onNavHeaderBtnClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./day-calendar.service","name":"DayCalendarService"},{"__symbolic":"reference","module":"../common/services/utils/utils.service","name":"UtilsService"}]}],"ngOnInit":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"isJalali":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"onChangeCallback":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"processOnChangeCallback":[{"__symbolic":"method"}],"initValidators":[{"__symbolic":"method"}],"isDisabledDay":[{"__symbolic":"method"}],"dayClicked":[{"__symbolic":"method"}],"getNavLabel":[{"__symbolic":"method"}],"getDayBtnText":[{"__symbolic":"method"}],"onLeftNav":[{"__symbolic":"method"}],"onRightNav":[{"__symbolic":"method"}],"shouldShowLeftNav":[{"__symbolic":"method"}],"shouldShowRightNav":[{"__symbolic":"method"}],"isNavHeaderBtnClickable":[{"__symbolic":"method"}],"toggleCalendar":[{"__symbolic":"method"}],"monthSelected":[{"__symbolic":"method"}],"moveCalendarsBy":[{"__symbolic":"method"}]}}}}]

day-calendar/day-calendar.service.d.ts

@@ -25,8 +25,2 @@ import { Moment } from 'jalali-moment';
     isDateDisabled(day: IDay, config: IDayCalendarConfig): boolean;
-    createValidator({minDate, maxDate}: {
-        minDate: any;
-        maxDate: any;
-    }, dateFormat: string): (FormControl, string) => {
-        [key: string]: any;
-    };
     getHeaderLabel(config: IDayCalendarConfig, month: Moment): string;
@@ -33,0 +27,0 @@ shouldShowLeft(min: Moment, currentMonthView: Moment): boolean;

day-calendar/day-calendar.service.js

@@ -13,3 +13,3 @@ "use strict";
 var utils_service_1 = require("../common/services/utils/utils.service");
-var calendar_type_1 = require("../common/types/calendar-type");
+var calendar_type_enum_1 = require("../common/types/calendar-type-enum");
 var DayCalendarService = (function () {
@@ -62,3 +62,3 @@ function DayCalendarService(utilsService) {
         if (config === void 0) { config = this.DEFAULT_CONFIG; }
-        return (config.calendarSystem != calendar_type_1.ECalendarSystem.gregorian) ? "jMonth" : "month";
+        return (config.calendarSystem != calendar_type_enum_1.ECalendarSystem.gregorian) ? "jMonth" : "month";
     };
@@ -75,3 +75,3 @@ DayCalendarService.prototype.removeNearMonthWeeks = function (currentMonth, monthArray) {
     DayCalendarService.prototype.getConfig = function (config) {
-        this.DEFAULT_CONFIG = (!config || (config.calendarSystem != calendar_type_1.ECalendarSystem.gregorian)) ? this.JALALI_DEFAULT_CONFIG : this.GREGORIAN_DEFAULT_CONFIG;
+        this.DEFAULT_CONFIG = (!config || (config.calendarSystem != calendar_type_enum_1.ECalendarSystem.gregorian)) ? this.JALALI_DEFAULT_CONFIG : this.GREGORIAN_DEFAULT_CONFIG;
         return __assign({}, this.DEFAULT_CONFIG, this.utilsService.clearUndefined(config));
@@ -140,65 +140,2 @@ };
     };
-    DayCalendarService.prototype.createValidator = function (_a, dateFormat) {
-        var minDate = _a.minDate, maxDate = _a.maxDate;
-        var isValid;
-        var value;
-        var validators = [];
-        if (minDate) {
-            validators.push({
-                key: 'minDate',
-                isValid: function () {
-                    var _isValid = value.every(function (val) { return val.isSameOrAfter(minDate, 'day'); });
-                    isValid = isValid ? _isValid : false;
-                    return _isValid;
-                }
-            });
-        }
-        if (maxDate) {
-            validators.push({
-                key: 'maxDate',
-                isValid: function () {
-                    var _isValid = value.every(function (val) { return val.isSameOrBefore(maxDate, 'day'); });
-                    isValid = isValid ? _isValid : false;
-                    return _isValid;
-                }
-            });
-        }
-        return function validateInput(formControl, format) {
-            var _this = this;
-            isValid = true;
-            if (formControl.value) {
-                if (typeof formControl.value === 'string') {
-                    var dateStrings = formControl.value.split(',').map(function (date) { return date.trim(); });
-                    var validDateStrings = dateStrings
-                        .filter(function (date) { return _this.utilsService.isDateValid(date, format); });
-                    value = validDateStrings.map(function (dateString) { return moment(dateString, dateFormat); });
-                }
-                else if (!Array.isArray(formControl.value)) {
-                    value = [formControl.value];
-                }
-                else {
-                    value = formControl.value.map(function (val) { return _this.utilsService.convertToMoment(val, dateFormat); });
-                }
-            }
-            else {
-                return null;
-            }
-            if (!value.every(function (val) { return val.isValid(); })) {
-                return {
-                    format: {
-                        given: formControl.value
-                    }
-                };
-            }
-            var errors = validators.reduce(function (map, err) {
-                if (!err.isValid()) {
-                    map[err.key] = {
-                        given: value
-                    };
-                }
-                return map;
-            }, {});
-            return !isValid ? errors : null;
-        };
-    };
     // todo:: add unit tests
@@ -209,3 +146,3 @@ DayCalendarService.prototype.getHeaderLabel = function (config, month) {
         }
-        if (config.calendarSystem != calendar_type_1.ECalendarSystem.gregorian)
+        if (config.calendarSystem != calendar_type_enum_1.ECalendarSystem.gregorian)
             month.locale('fa');
@@ -212,0 +149,0 @@ return month.format(config.monthFormat);

day-calendar/day-calendar.service.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"DayCalendarService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../common/services/utils/utils.service","name":"UtilsService"}]}],"getMonthFormat":[{"__symbolic":"method"}],"removeNearMonthWeeks":[{"__symbolic":"method"}],"getConfig":[{"__symbolic":"method"}],"generateDaysMap":[{"__symbolic":"method"}],"generateMonthArray":[{"__symbolic":"method"}],"generateWeekdays":[{"__symbolic":"method"}],"isDateDisabled":[{"__symbolic":"method"}],"createValidator":[{"__symbolic":"method"}],"getHeaderLabel":[{"__symbolic":"method"}],"shouldShowLeft":[{"__symbolic":"method"}],"shouldShowRight":[{"__symbolic":"method"}],"generateDaysIndexMap":[{"__symbolic":"method"}],"getMonthCalendarConfig":[{"__symbolic":"method"}],"getDayBtnText":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DayCalendarService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../common/services/utils/utils.service","name":"UtilsService"}]}],"getMonthFormat":[{"__symbolic":"method"}],"removeNearMonthWeeks":[{"__symbolic":"method"}],"getConfig":[{"__symbolic":"method"}],"generateDaysMap":[{"__symbolic":"method"}],"generateMonthArray":[{"__symbolic":"method"}],"generateWeekdays":[{"__symbolic":"method"}],"isDateDisabled":[{"__symbolic":"method"}],"createValidator":[{"__symbolic":"method"}],"getHeaderLabel":[{"__symbolic":"method"}],"shouldShowLeft":[{"__symbolic":"method"}],"shouldShowRight":[{"__symbolic":"method"}],"generateDaysIndexMap":[{"__symbolic":"method"}],"getMonthCalendarConfig":[{"__symbolic":"method"}],"getDayBtnText":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"DayCalendarService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../common/services/utils/utils.service","name":"UtilsService"}]}],"getMonthFormat":[{"__symbolic":"method"}],"removeNearMonthWeeks":[{"__symbolic":"method"}],"getConfig":[{"__symbolic":"method"}],"generateDaysMap":[{"__symbolic":"method"}],"generateMonthArray":[{"__symbolic":"method"}],"generateWeekdays":[{"__symbolic":"method"}],"isDateDisabled":[{"__symbolic":"method"}],"getHeaderLabel":[{"__symbolic":"method"}],"shouldShowLeft":[{"__symbolic":"method"}],"shouldShowRight":[{"__symbolic":"method"}],"generateDaysIndexMap":[{"__symbolic":"method"}],"getMonthCalendarConfig":[{"__symbolic":"method"}],"getDayBtnText":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DayCalendarService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../common/services/utils/utils.service","name":"UtilsService"}]}],"getMonthFormat":[{"__symbolic":"method"}],"removeNearMonthWeeks":[{"__symbolic":"method"}],"getConfig":[{"__symbolic":"method"}],"generateDaysMap":[{"__symbolic":"method"}],"generateMonthArray":[{"__symbolic":"method"}],"generateWeekdays":[{"__symbolic":"method"}],"isDateDisabled":[{"__symbolic":"method"}],"getHeaderLabel":[{"__symbolic":"method"}],"shouldShowLeft":[{"__symbolic":"method"}],"shouldShowRight":[{"__symbolic":"method"}],"generateDaysIndexMap":[{"__symbolic":"method"}],"getMonthCalendarConfig":[{"__symbolic":"method"}],"getDayBtnText":[{"__symbolic":"method"}]}}}}]

day-calendar/day.model.d.ts

@@ -0,0 +0,0 @@ import { Moment } from 'jalali-moment';

day-calendar/day.model.js

 "use strict";
 //# sourceMappingURL=day.model.js.map

index.d.ts

 export { IDayCalendarConfig } from './day-calendar/day-calendar-config.model';
 export { IDayEvent } from './day-calendar/day.model';
 export { IDatePickerConfig } from './date-picker/date-picker-config.model';
+export { IDatePickerDirectiveConfig } from './date-picker/date-picker-directive-config.model';
 export { IMonthCalendarConfig } from './month-calendar/month-calendar-config';
 export * from './date-picker.module';

index.js

@@ -0,0 +0,0 @@ "use strict";

index.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{},"exports":[{"from":"./day-calendar/day-calendar-config.model","export":["IDayCalendarConfig"]},{"from":"./day-calendar/day.model","export":["IDayEvent"]},{"from":"./date-picker/date-picker-config.model","export":["IDatePickerConfig"]},{"from":"./month-calendar/month-calendar-config","export":["IMonthCalendarConfig"]},{"from":"./date-picker.module"}]},{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./day-calendar/day-calendar-config.model","export":["IDayCalendarConfig"]},{"from":"./day-calendar/day.model","export":["IDayEvent"]},{"from":"./date-picker/date-picker-config.model","export":["IDatePickerConfig"]},{"from":"./month-calendar/month-calendar-config","export":["IMonthCalendarConfig"]},{"from":"./date-picker.module"}]}]
+[{"__symbolic":"module","version":3,"metadata":{},"exports":[{"from":"./day-calendar/day-calendar-config.model","export":["IDayCalendarConfig"]},{"from":"./day-calendar/day.model","export":["IDayEvent"]},{"from":"./date-picker/date-picker-config.model","export":["IDatePickerConfig"]},{"from":"./date-picker/date-picker-directive-config.model","export":["IDatePickerDirectiveConfig"]},{"from":"./month-calendar/month-calendar-config","export":["IMonthCalendarConfig"]},{"from":"./date-picker.module"}]},{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./day-calendar/day-calendar-config.model","export":["IDayCalendarConfig"]},{"from":"./day-calendar/day.model","export":["IDayEvent"]},{"from":"./date-picker/date-picker-config.model","export":["IDatePickerConfig"]},{"from":"./date-picker/date-picker-directive-config.model","export":["IDatePickerDirectiveConfig"]},{"from":"./month-calendar/month-calendar-config","export":["IMonthCalendarConfig"]},{"from":"./date-picker.module"}]}]

month-calendar/month-calendar-config.d.ts

 import { Moment } from 'jalali-moment';
 import { ICalendar } from '../common/models/calendar.model';
-import { ECalendarSystem } from "../common/types/calendar-type";
+import { ECalendarSystem } from '../common/types/calendar-type-enum';
 export interface IMonthCalendarConfig extends ICalendar {
@@ -5,0 +5,0 @@ isMonthDisabledCallback?: (date: Moment) => boolean;

month-calendar/month-calendar-config.js

 "use strict";
 //# sourceMappingURL=month-calendar-config.js.map

month-calendar/month-calendar.component.d.ts

@@ -0,1 +1,2 @@
+import { ECalendarValue } from '../common/types/calendar-value-enum';
 import { OnInit, EventEmitter, SimpleChanges, OnChanges } from '@angular/core';
@@ -7,3 +8,3 @@ import { IMonth } from './month.model';
 import { ControlValueAccessor, Validator, FormControl, ValidationErrors } from '@angular/forms';
-import { CalendarValue, ECalendarValue } from '../common/types/calendar-value';
+import { CalendarValue } from '../common/types/calendar-value';
 import { UtilsService } from '../common/services/utils/utils.service';
@@ -27,3 +28,3 @@ export declare class MonthCalendarComponent implements OnInit, OnChanges, ControlValueAccessor, Validator {
     inputValueType: ECalendarValue;
-    validateFn: (FormControl, string) => {
+    validateFn: (inputVal: CalendarValue) => {
         [key: string]: any;
@@ -30,0 +31,0 @@ };

month-calendar/month-calendar.component.js

@@ -6,3 +6,3 @@ "use strict";
 var utils_service_1 = require("../common/services/utils/utils.service");
-var calendar_type_1 = require("../common/types/calendar-type");
+var calendar_type_enum_1 = require("../common/types/calendar-type-enum");
 var MonthCalendarComponent = (function () {
@@ -70,3 +70,3 @@ function MonthCalendarComponent(monthCalendarService, utilsService) {
         if (this.minDate || this.maxDate) {
-            return this.validateFn(formControl, this.componentConfig.format);
+            return this.validateFn(formControl.value);
         }
@@ -78,3 +78,3 @@ else {
     MonthCalendarComponent.prototype.isJalali = function () {
-        return this.componentConfig.calendarSystem != calendar_type_1.ECalendarSystem.gregorian;
+        return this.componentConfig.calendarSystem != calendar_type_enum_1.ECalendarSystem.gregorian;
     };
@@ -85,6 +85,3 @@ MonthCalendarComponent.prototype.processOnChangeCallback = function (value) {
     MonthCalendarComponent.prototype.initValidators = function () {
-        this.validateFn = this.monthCalendarService.createValidator({
-            minDate: this.utilsService.convertToMoment(this.minDate, this.componentConfig.format),
-            maxDate: this.utilsService.convertToMoment(this.maxDate, this.componentConfig.format)
-        }, this.componentConfig.format);
+        this.validateFn = this.validateFn = this.utilsService.createValidator({ minDate: this.minDate, maxDate: this.maxDate }, this.componentConfig.format, 'month');
         this.onChangeCallback(this.processOnChangeCallback(this.selected));
@@ -133,4 +130,4 @@ };
                 selector: 'dp-month-calendar',
-                template: '<dp-calendar-nav     [label]="getNavLabel()"     [showLeftNav]="shouldShowLeftNav()"     [showRightNav]="shouldShowRightNav()"     [isLabelClickable]="isNavHeaderBtnClickable()"     [theme]="theme"     (onLeftNav)="onLeftNav()"     (onRightNav)="onRightNav()"     (onLabelClick)="toggleCalendar()"> </dp-calendar-nav>  <div class="dp-calendar-wrapper" [ngClass]="{\'rtl\':isJalali()}">   <div class="dp-months-row" *ngFor="let monthRow of yearMonths">     <button class="dp-calendar-month"             *ngFor="let month of monthRow"             [disabled]="isDisabledMonth(month)"             [ngClass]="{\'dp-selected\': month.selected,\'dp-current-month\': month.currentMonth}"             (click)="monthClicked(month)">       {{getMonthBtnText(month)}}     </button>   </div> </div> ',
-                styles: [':host {  display: inline-block;}.dp-calendar-wrapper {  background: #FFFFFF;  border: 1px solid #000000;}.dp-calendar-wrapper.rtl {  direction: rtl;}.dp-calendar-month {  box-sizing: border-box;  width: 52.5px;  height: 52.5px;  cursor: pointer;}.dp-calendar-month.dp-selected {  background: #106CC8;  color: #FFFFFF;}:host.dp-material .dp-calendar-weekday {  height: 25px;  width: 30px;  line-height: 25px;  background: #E0E0E0;  border: 1px solid #E0E0E0;}:host.dp-material .dp-calendar-wrapper {  border: 1px solid #E0E0E0;}:host.dp-material .dp-calendar-month {  box-sizing: border-box;  background: #FFFFFF;  border-radius: 50%;  border: none;  outline: none;}:host.dp-material .dp-calendar-month:hover {  background: #E0E0E0;}:host.dp-material .dp-selected {  background: #106CC8;  color: #FFFFFF;}:host.dp-material .dp-selected:hover {  background: #106CC8;}:host.dp-material .dp-current-month {  border: 1px solid #106CC8;}'],
+                template: '<dp-calendar-nav     [label]="getNavLabel()"     [showLeftNav]="shouldShowLeftNav()"     [showRightNav]="shouldShowRightNav()"     [isLabelClickable]="isNavHeaderBtnClickable()"     [theme]="theme"     (onLeftNav)="onLeftNav()"     (onRightNav)="onRightNav()"     (onLabelClick)="toggleCalendar()"> </dp-calendar-nav>  <div class="dp-calendar-wrapper" [ngClass]="{\'rtl\':isJalali()}">   <div class="dp-months-row" *ngFor="let monthRow of yearMonths">     <button type="button"             class="dp-calendar-month"             *ngFor="let month of monthRow"             [disabled]="isDisabledMonth(month)"             [ngClass]="{\'dp-selected\': month.selected,\'dp-current-month\': month.currentMonth}"             (click)="monthClicked(month)">       {{getMonthBtnText(month)}}     </button>   </div> </div> ',
+                styles: [':host {  display: inline-block;}.dp-calendar-wrapper {  background: #FFFFFF;  border: 1px solid #000000;}.dp-calendar-wrapper.rtl {  direction: rtl;}.dp-calendar-month {  box-sizing: border-box;  width: 52.5px;  height: 52.5px;  cursor: pointer;}.dp-calendar-month.dp-selected {  background: #106CC8;  color: #FFFFFF;}:host.dp-material .dp-calendar-weekday {  height: 25px;  width: 30px;  line-height: 25px;  background: #E0E0E0;  border: 1px solid #E0E0E0;}:host.dp-material .dp-calendar-wrapper {  border: 1px solid #E0E0E0;}:host.dp-material .dp-calendar-month {  box-sizing: border-box;  background: #FFFFFF;  border-radius: 50%;  border: none;  outline: none;}:host.dp-material .dp-calendar-month:hover {  background: #E0E0E0;}:host.dp-material .dp-selected {  background: #106CC8;  color: #FFFFFF;}:host.dp-material .dp-selected:hover {  background: #106CC8;}:host.dp-material .dp-current-month {  border: 1px solid #106CC8;  padding: 0;}'],
                 providers: [
@@ -137,0 +134,0 @@ month_calendar_service_1.MonthCalendarService,

month-calendar/month-calendar.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"MonthCalendarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"dp-month-calendar","template":"<dp-calendar-nav     [label]=\"getNavLabel()\"     [showLeftNav]=\"shouldShowLeftNav()\"     [showRightNav]=\"shouldShowRightNav()\"     [isLabelClickable]=\"isNavHeaderBtnClickable()\"     [theme]=\"theme\"     (onLeftNav)=\"onLeftNav()\"     (onRightNav)=\"onRightNav()\"     (onLabelClick)=\"toggleCalendar()\"> </dp-calendar-nav>  <div class=\"dp-calendar-wrapper\" [ngClass]=\"{'rtl':isJalali()}\">   <div class=\"dp-months-row\" *ngFor=\"let monthRow of yearMonths\">     <button class=\"dp-calendar-month\"             *ngFor=\"let month of monthRow\"             [disabled]=\"isDisabledMonth(month)\"             [ngClass]=\"{'dp-selected': month.selected,'dp-current-month': month.currentMonth}\"             (click)=\"monthClicked(month)\">       {{getMonthBtnText(month)}}     </button>   </div> </div> ","styles":[":host {  display: inline-block;}.dp-calendar-wrapper {  background: #FFFFFF;  border: 1px solid #000000;}.dp-calendar-wrapper.rtl {  direction: rtl;}.dp-calendar-month {  box-sizing: border-box;  width: 52.5px;  height: 52.5px;  cursor: pointer;}.dp-calendar-month.dp-selected {  background: #106CC8;  color: #FFFFFF;}:host.dp-material .dp-calendar-weekday {  height: 25px;  width: 30px;  line-height: 25px;  background: #E0E0E0;  border: 1px solid #E0E0E0;}:host.dp-material .dp-calendar-wrapper {  border: 1px solid #E0E0E0;}:host.dp-material .dp-calendar-month {  box-sizing: border-box;  background: #FFFFFF;  border-radius: 50%;  border: none;  outline: none;}:host.dp-material .dp-calendar-month:hover {  background: #E0E0E0;}:host.dp-material .dp-selected {  background: #106CC8;  color: #FFFFFF;}:host.dp-material .dp-selected:hover {  background: #106CC8;}:host.dp-material .dp-current-month {  border: 1px solid #106CC8;}"],"providers":[{"__symbolic":"reference","module":"./month-calendar.service","name":"MonthCalendarService"},{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"MonthCalendarComponent"},"multi":true},{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALIDATORS"},"useExisting":{"__symbolic":"reference","name":"MonthCalendarComponent"},"multi":true}]}]}],"members":{"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"displayDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"minDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onNavHeaderBtnClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./month-calendar.service","name":"MonthCalendarService"},{"__symbolic":"reference","module":"../common/services/utils/utils.service","name":"UtilsService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"onChangeCallback":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"isJalali":[{"__symbolic":"method"}],"processOnChangeCallback":[{"__symbolic":"method"}],"initValidators":[{"__symbolic":"method"}],"isDisabledMonth":[{"__symbolic":"method"}],"monthClicked":[{"__symbolic":"method"}],"getNavLabel":[{"__symbolic":"method"}],"onLeftNav":[{"__symbolic":"method"}],"onRightNav":[{"__symbolic":"method"}],"shouldShowLeftNav":[{"__symbolic":"method"}],"shouldShowRightNav":[{"__symbolic":"method"}],"isNavHeaderBtnClickable":[{"__symbolic":"method"}],"toggleCalendar":[{"__symbolic":"method"}],"getMonthBtnText":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"MonthCalendarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"dp-month-calendar","template":"<dp-calendar-nav     [label]=\"getNavLabel()\"     [showLeftNav]=\"shouldShowLeftNav()\"     [showRightNav]=\"shouldShowRightNav()\"     [isLabelClickable]=\"isNavHeaderBtnClickable()\"     [theme]=\"theme\"     (onLeftNav)=\"onLeftNav()\"     (onRightNav)=\"onRightNav()\"     (onLabelClick)=\"toggleCalendar()\"> </dp-calendar-nav>  <div class=\"dp-calendar-wrapper\" [ngClass]=\"{'rtl':isJalali()}\">   <div class=\"dp-months-row\" *ngFor=\"let monthRow of yearMonths\">     <button class=\"dp-calendar-month\"             *ngFor=\"let month of monthRow\"             [disabled]=\"isDisabledMonth(month)\"             [ngClass]=\"{'dp-selected': month.selected,'dp-current-month': month.currentMonth}\"             (click)=\"monthClicked(month)\">       {{getMonthBtnText(month)}}     </button>   </div> </div> ","styles":[":host {  display: inline-block;}.dp-calendar-wrapper {  background: #FFFFFF;  border: 1px solid #000000;}.dp-calendar-wrapper.rtl {  direction: rtl;}.dp-calendar-month {  box-sizing: border-box;  width: 52.5px;  height: 52.5px;  cursor: pointer;}.dp-calendar-month.dp-selected {  background: #106CC8;  color: #FFFFFF;}:host.dp-material .dp-calendar-weekday {  height: 25px;  width: 30px;  line-height: 25px;  background: #E0E0E0;  border: 1px solid #E0E0E0;}:host.dp-material .dp-calendar-wrapper {  border: 1px solid #E0E0E0;}:host.dp-material .dp-calendar-month {  box-sizing: border-box;  background: #FFFFFF;  border-radius: 50%;  border: none;  outline: none;}:host.dp-material .dp-calendar-month:hover {  background: #E0E0E0;}:host.dp-material .dp-selected {  background: #106CC8;  color: #FFFFFF;}:host.dp-material .dp-selected:hover {  background: #106CC8;}:host.dp-material .dp-current-month {  border: 1px solid #106CC8;}"],"providers":[{"__symbolic":"reference","module":"./month-calendar.service","name":"MonthCalendarService"},{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"MonthCalendarComponent"},"multi":true},{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALIDATORS"},"useExisting":{"__symbolic":"reference","name":"MonthCalendarComponent"},"multi":true}]}]}],"members":{"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"displayDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"minDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onNavHeaderBtnClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./month-calendar.service","name":"MonthCalendarService"},{"__symbolic":"reference","module":"../common/services/utils/utils.service","name":"UtilsService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"onChangeCallback":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"isJalali":[{"__symbolic":"method"}],"processOnChangeCallback":[{"__symbolic":"method"}],"initValidators":[{"__symbolic":"method"}],"isDisabledMonth":[{"__symbolic":"method"}],"monthClicked":[{"__symbolic":"method"}],"getNavLabel":[{"__symbolic":"method"}],"onLeftNav":[{"__symbolic":"method"}],"onRightNav":[{"__symbolic":"method"}],"shouldShowLeftNav":[{"__symbolic":"method"}],"shouldShowRightNav":[{"__symbolic":"method"}],"isNavHeaderBtnClickable":[{"__symbolic":"method"}],"toggleCalendar":[{"__symbolic":"method"}],"getMonthBtnText":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"MonthCalendarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"dp-month-calendar","template":"<dp-calendar-nav     [label]=\"getNavLabel()\"     [showLeftNav]=\"shouldShowLeftNav()\"     [showRightNav]=\"shouldShowRightNav()\"     [isLabelClickable]=\"isNavHeaderBtnClickable()\"     [theme]=\"theme\"     (onLeftNav)=\"onLeftNav()\"     (onRightNav)=\"onRightNav()\"     (onLabelClick)=\"toggleCalendar()\"> </dp-calendar-nav>  <div class=\"dp-calendar-wrapper\" [ngClass]=\"{'rtl':isJalali()}\">   <div class=\"dp-months-row\" *ngFor=\"let monthRow of yearMonths\">     <button type=\"button\"             class=\"dp-calendar-month\"             *ngFor=\"let month of monthRow\"             [disabled]=\"isDisabledMonth(month)\"             [ngClass]=\"{'dp-selected': month.selected,'dp-current-month': month.currentMonth}\"             (click)=\"monthClicked(month)\">       {{getMonthBtnText(month)}}     </button>   </div> </div> ","styles":[":host {  display: inline-block;}.dp-calendar-wrapper {  background: #FFFFFF;  border: 1px solid #000000;}.dp-calendar-wrapper.rtl {  direction: rtl;}.dp-calendar-month {  box-sizing: border-box;  width: 52.5px;  height: 52.5px;  cursor: pointer;}.dp-calendar-month.dp-selected {  background: #106CC8;  color: #FFFFFF;}:host.dp-material .dp-calendar-weekday {  height: 25px;  width: 30px;  line-height: 25px;  background: #E0E0E0;  border: 1px solid #E0E0E0;}:host.dp-material .dp-calendar-wrapper {  border: 1px solid #E0E0E0;}:host.dp-material .dp-calendar-month {  box-sizing: border-box;  background: #FFFFFF;  border-radius: 50%;  border: none;  outline: none;}:host.dp-material .dp-calendar-month:hover {  background: #E0E0E0;}:host.dp-material .dp-selected {  background: #106CC8;  color: #FFFFFF;}:host.dp-material .dp-selected:hover {  background: #106CC8;}:host.dp-material .dp-current-month {  border: 1px solid #106CC8;  padding: 0;}"],"providers":[{"__symbolic":"reference","module":"./month-calendar.service","name":"MonthCalendarService"},{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"MonthCalendarComponent"},"multi":true},{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALIDATORS"},"useExisting":{"__symbolic":"reference","name":"MonthCalendarComponent"},"multi":true}]}]}],"members":{"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"displayDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"minDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onNavHeaderBtnClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./month-calendar.service","name":"MonthCalendarService"},{"__symbolic":"reference","module":"../common/services/utils/utils.service","name":"UtilsService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"onChangeCallback":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"isJalali":[{"__symbolic":"method"}],"processOnChangeCallback":[{"__symbolic":"method"}],"initValidators":[{"__symbolic":"method"}],"isDisabledMonth":[{"__symbolic":"method"}],"monthClicked":[{"__symbolic":"method"}],"getNavLabel":[{"__symbolic":"method"}],"onLeftNav":[{"__symbolic":"method"}],"onRightNav":[{"__symbolic":"method"}],"shouldShowLeftNav":[{"__symbolic":"method"}],"shouldShowRightNav":[{"__symbolic":"method"}],"isNavHeaderBtnClickable":[{"__symbolic":"method"}],"toggleCalendar":[{"__symbolic":"method"}],"getMonthBtnText":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"MonthCalendarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"dp-month-calendar","template":"<dp-calendar-nav     [label]=\"getNavLabel()\"     [showLeftNav]=\"shouldShowLeftNav()\"     [showRightNav]=\"shouldShowRightNav()\"     [isLabelClickable]=\"isNavHeaderBtnClickable()\"     [theme]=\"theme\"     (onLeftNav)=\"onLeftNav()\"     (onRightNav)=\"onRightNav()\"     (onLabelClick)=\"toggleCalendar()\"> </dp-calendar-nav>  <div class=\"dp-calendar-wrapper\" [ngClass]=\"{'rtl':isJalali()}\">   <div class=\"dp-months-row\" *ngFor=\"let monthRow of yearMonths\">     <button type=\"button\"             class=\"dp-calendar-month\"             *ngFor=\"let month of monthRow\"             [disabled]=\"isDisabledMonth(month)\"             [ngClass]=\"{'dp-selected': month.selected,'dp-current-month': month.currentMonth}\"             (click)=\"monthClicked(month)\">       {{getMonthBtnText(month)}}     </button>   </div> </div> ","styles":[":host {  display: inline-block;}.dp-calendar-wrapper {  background: #FFFFFF;  border: 1px solid #000000;}.dp-calendar-wrapper.rtl {  direction: rtl;}.dp-calendar-month {  box-sizing: border-box;  width: 52.5px;  height: 52.5px;  cursor: pointer;}.dp-calendar-month.dp-selected {  background: #106CC8;  color: #FFFFFF;}:host.dp-material .dp-calendar-weekday {  height: 25px;  width: 30px;  line-height: 25px;  background: #E0E0E0;  border: 1px solid #E0E0E0;}:host.dp-material .dp-calendar-wrapper {  border: 1px solid #E0E0E0;}:host.dp-material .dp-calendar-month {  box-sizing: border-box;  background: #FFFFFF;  border-radius: 50%;  border: none;  outline: none;}:host.dp-material .dp-calendar-month:hover {  background: #E0E0E0;}:host.dp-material .dp-selected {  background: #106CC8;  color: #FFFFFF;}:host.dp-material .dp-selected:hover {  background: #106CC8;}:host.dp-material .dp-current-month {  border: 1px solid #106CC8;  padding: 0;}"],"providers":[{"__symbolic":"reference","module":"./month-calendar.service","name":"MonthCalendarService"},{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"MonthCalendarComponent"},"multi":true},{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALIDATORS"},"useExisting":{"__symbolic":"reference","name":"MonthCalendarComponent"},"multi":true}]}]}],"members":{"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"displayDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"minDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onNavHeaderBtnClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./month-calendar.service","name":"MonthCalendarService"},{"__symbolic":"reference","module":"../common/services/utils/utils.service","name":"UtilsService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"onChangeCallback":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"isJalali":[{"__symbolic":"method"}],"processOnChangeCallback":[{"__symbolic":"method"}],"initValidators":[{"__symbolic":"method"}],"isDisabledMonth":[{"__symbolic":"method"}],"monthClicked":[{"__symbolic":"method"}],"getNavLabel":[{"__symbolic":"method"}],"onLeftNav":[{"__symbolic":"method"}],"onRightNav":[{"__symbolic":"method"}],"shouldShowLeftNav":[{"__symbolic":"method"}],"shouldShowRightNav":[{"__symbolic":"method"}],"isNavHeaderBtnClickable":[{"__symbolic":"method"}],"toggleCalendar":[{"__symbolic":"method"}],"getMonthBtnText":[{"__symbolic":"method"}]}}}}]

month-calendar/month-calendar.service.d.ts

@@ -0,0 +0,0 @@ import { Moment, unitOfTime } from 'jalali-moment';

month-calendar/month-calendar.service.js

@@ -13,3 +13,3 @@ "use strict";
 var utils_service_1 = require("../common/services/utils/utils.service");
-var calendar_type_1 = require("../common/types/calendar-type");
+var calendar_type_enum_1 = require("../common/types/calendar-type-enum");
 var MonthCalendarService = (function () {
@@ -36,10 +36,10 @@ function MonthCalendarService(utilsService) {
         if (config === void 0) { config = this.DEFAULT_CONFIG; }
-        return (config.calendarSystem != calendar_type_1.ECalendarSystem.gregorian) ? 'jMonth' : 'month';
+        return (config.calendarSystem != calendar_type_enum_1.ECalendarSystem.gregorian) ? 'jMonth' : 'month';
     };
     MonthCalendarService.prototype.getMomentYearFormat = function (config) {
         if (config === void 0) { config = this.DEFAULT_CONFIG; }
-        return (config.calendarSystem != calendar_type_1.ECalendarSystem.gregorian) ? 'jYear' : 'year';
+        return (config.calendarSystem != calendar_type_enum_1.ECalendarSystem.gregorian) ? 'jYear' : 'year';
     };
     MonthCalendarService.prototype.getConfig = function (config) {
-        this.DEFAULT_CONFIG = (config.calendarSystem != calendar_type_1.ECalendarSystem.gregorian) ? this.JALALI_DEFAULT_CONFIG : this.GREGORIAN_DEFAULT_CONFIG;
+        this.DEFAULT_CONFIG = (config.calendarSystem != calendar_type_enum_1.ECalendarSystem.gregorian) ? this.JALALI_DEFAULT_CONFIG : this.GREGORIAN_DEFAULT_CONFIG;
         return __assign({}, this.DEFAULT_CONFIG, this.utilsService.clearUndefined(config));
@@ -77,3 +77,2 @@ };
     MonthCalendarService.prototype.createValidator = function (_a, dateFormat) {
-        var _this = this;
         var minDate = _a.minDate, maxDate = _a.maxDate;
@@ -87,3 +86,3 @@ var isValid;
                 isValid: function () {
-                    var _isValid = value.every(function (val) { return val.isSameOrAfter(minDate, _this.getMomentMonthFormat()); });
+                    var _isValid = value.every(function (val) { return val.isSameOrAfter(minDate, 'month'); });
                     isValid = isValid ? _isValid : false;
@@ -98,3 +97,3 @@ return _isValid;
                 isValid: function () {
-                    var _isValid = value.every(function (val) { return val.isSameOrBefore(maxDate, _this.getMomentMonthFormat()); });
+                    var _isValid = value.every(function (val) { return val.isSameOrBefore(maxDate, 'month'); });
                     isValid = isValid ? _isValid : false;
@@ -101,0 +100,0 @@ return _isValid;

month-calendar/month.model.d.ts

@@ -0,0 +0,0 @@ import { IDate } from '../common/models/date.model';

month-calendar/month.model.js

 "use strict";
 //# sourceMappingURL=month.model.js.map

package.json

 {
   "name": "ng2-jalali-date-picker",
   "author": "Mojtaba Zarei",
-  "version": "1.3.4",
+  "version": "1.3.5",
   "license": "MIT",
@@ -26,3 +26,2 @@ "main": "index.js",
     "angular2",
-    "ng2-datepicker",
     "jalali",
@@ -35,2 +34,3 @@ "shamsi",
     "date-picker",
+    "ng2-datepicker",
     "ng-datepicker",
@@ -45,12 +45,11 @@ "angular",
   "devDependencies": {
-    "@angular/cli": "^1.0.0",
-    "@angular/common": "^4.0.1",
-    "@angular/compiler": "^4.0.1",
-    "@angular/compiler-cli": "^4.0.1",
-    "@angular/core": "^4.0.1",
-    "@angular/forms": "^4.0.1",
-    "@angular/http": "^4.0.1",
-    "@angular/platform-browser": "^4.0.1",
-    "@angular/platform-browser-dynamic": "^4.0.1",
-    "@angular/router": "^4.0.1",
+    "@angular/cli": "^1.0.1",
+    "@angular/common": "^4.0.3",
+    "@angular/compiler": "^4.0.3",
+    "@angular/compiler-cli": "^4.0.3",
+    "@angular/core": "^4.0.3",
+    "@angular/forms": "^4.0.3",
+    "@angular/platform-browser": "^4.0.3",
+    "@angular/platform-browser-dynamic": "^4.0.3",
+    "@angular/router": "^4.0.3",
     "@types/jasmine": "2.5.38",
@@ -57,0 +56,0 @@ "@types/node": "~6.0.60",

README.md

@@ -148,3 +148,3 @@ [![Build Status](https://travis-ci.org/fingerpich/jalali-angular-datepicker.svg?branch=master)](https://travis-ci.org/fingerpich/jalali-angular-datepicker)
 ```html
-<dp-date-picker [(ngModel)]="selectedDate" [config]="config"></dp-date-picker>
+<dp-day-calendar [(ngModel)]="selectedDate" [config]="config"></dp-day-calendar>
 ```
@@ -213,1 +213,42 @@ Here are the available configurations:
 | calendarSystem            | `ECalendarSystem`    | `ECalendarSystem.jalali`                                                            | If ngModel provided as `String` the format is required, this format also will be used as the input format style.                                                                                                                                                    |
+
+
+
+## Directive
+
+You can use the `[dpDayPicker]` directive to attach the picker to any component with an `ngModel` or a `FormControl` (using reactive forms).
+
+i.e.
+```html
+<input name="someName" [(ngModel)]="selectedDate" [dpDayPicker]="config" />
+```
+
+or using reactive forms:
+```html
+<input name="someName" formControlName="selectedDate" [dpDayPicker]="config" />
+<!-- OR -->
+<input name="someName" [formControl]="selectedDateFormControl" [dpDayPicker]="config" />
+```
+
+or with `@angular/material`:
+```html
+<md-input-container>
+  <input mdInput name="someName" [(ngModel)]="selectedDate" [dpDayPicker]="config" theme="dp-material" attachTo=".mat-input-wrapper" />
+</md-input-container>
+```
+
+### Attributes:  
+| Name                 | Type                | Default                                                                  | Description                                                                                                                                                                                                                                        |
+|----------------------|:-------------------:|:------------------------------------------------------------------------:|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| type                 | `'day'`\|`'month'`         | `'day'`                                                                    | the type of the calender which will be displayed in the picker                                                                                                                                                                                     |
+| attachTo             | `ElementRef`\|`string` | `undefined`                                                                | the element used to position the picker.  If `attachTo` is a `string`, it is used as a css selector to match any parent of the directive's host component.  If `attachTo` is `undefined`, the host component itself is used.                         |
+| theme                | `string       `       | `''`                                                                     | Theme is a class added to the popup container (and inner components) - this will allow styling of the calendar when it's appended to outer element (for example - body). There is a built in theme named dp-material, you can find it in the demo. | 
+| config               | `IDatePickerDirectiveConfig` | See Below                                                                | Configuration object - see description below.                                                                                                                                                                                                      | 
+
+### Configuration:  
+In order to provide configurations to the date-picker you need to pass it to the `[dpDayPicker]` directive:  
+```html
+<input [(ngModel)]="selectedDate" [dpDayPicker]="datePickerConfig" />
+```
+
+The `IDatePickerDirectiveConfig` is identical to [`IDatePickerConfig`](#configuration) above except that it lacks the `showGoToCurrent` property.

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

271868

increased by7.59%

Dev dependency count

31

decreased by-3.12%

Number of package files

113

increased by22.83%

Lines of code

2242

increased by8.41%

Number of lines in readme file

253

increased by19.34%

No dependency changes