@anglr/datetime 2.0.0-beta.20220221103100 → 2.0.1

package/{src/datetime.d.ts → es2015/src/index.js}

@@ -1,19 +1,19 @@
-export * from './misc/constants';
-export * from './misc/datetime.interface';
-export * from './misc/tokens';
-export * from './misc/validators';
-export * from './selector/interfaces';
-export * from './selector/types';
-export * from './selector/modules/basicSelector.module';
-export * from './selector/modules/selector.module';
-export * from './services';
-export * from './services/datePositionParser.service';
-export * from './services/dateTimeRelativeParser.service';
-export * from './services/dateValueProvider.service';
-export * from './picker/modules/picker.module';
-export * from './picker/interfaces';
-export * from './picker/types';
-export * from './pipes/dateConvert.pipe';
-export * from './pipes/dateFormat.pipe';
-export * from './modules/datePipes.module';
-//# sourceMappingURL=datetime.d.ts.map
+export * from './misc/constants';
+export * from './misc/datetime.interface';
+export * from './misc/tokens';
+export * from './misc/validators';
+export * from './selector/interfaces';
+export * from './selector/types';
+export * from './selector/modules/basicSelector.module';
+export * from './selector/modules/selector.module';
+export * from './services';
+export * from './services/datePositionParser.service';
+export * from './services/dateTimeRelativeParser.service';
+export * from './services/dateValueProvider.service';
+export * from './picker/modules/picker.module';
+export * from './picker/interfaces';
+export * from './picker/types';
+export * from './pipes/dateConvert.pipe';
+export * from './pipes/dateFormat.pipe';
+export * from './modules/datePipes.module';
+//# sourceMappingURL=index.js.map

package/es2015/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,yCAAyC,CAAC;AACxD,cAAc,oCAAoC,CAAC;AACnD,cAAc,YAAY,CAAC;AAC3B,cAAc,uCAAuC,CAAC;AACtD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './misc/constants';\nexport * from './misc/datetime.interface';\nexport * from './misc/tokens';\nexport * from './misc/validators';\nexport * from './selector/interfaces';\nexport * from './selector/types';\nexport * from './selector/modules/basicSelector.module';\nexport * from './selector/modules/selector.module';\nexport * from './services';\nexport * from './services/datePositionParser.service';\nexport * from './services/dateTimeRelativeParser.service';\nexport * from './services/dateValueProvider.service';\nexport * from './picker/modules/picker.module';\nexport * from './picker/interfaces';\nexport * from './picker/types';\nexport * from './pipes/dateConvert.pipe';\nexport * from './pipes/dateFormat.pipe';\nexport * from './modules/datePipes.module';"]}

package/es2015/src/misc/constants.js

@@ -0,0 +1,33 @@
+/**
+ * Represents minute component of datetime
+ */
+export const MINUTE = 'minute';
+/**
+ * Represents hour component of datetime
+ */
+export const HOUR = 'hour';
+/**
+ * Represents day component of datetime
+ */
+export const DAY = 'day';
+/**
+ * Represents week component of datetime
+ */
+export const WEEK = 'week';
+/**
+ * Represents month component of datetime
+ */
+export const MONTH = 'month';
+/**
+ * Represents quarter component of datetime
+ */
+export const QUARTER = 'quarter';
+/**
+ * Represents year component of datetime
+ */
+export const YEAR = 'year';
+/**
+ * Represents decade component of datetime
+ */
+export const DECADE = 'decade';
+//# sourceMappingURL=constants.js.map

package/es2015/src/misc/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/misc/constants.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC;AAE/B;;GAEG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC;AAE3B;;GAEG;AACH,MAAM,CAAC,MAAM,GAAG,GAAG,KAAK,CAAC;AAEzB;;GAEG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC;AAE3B;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,OAAO,CAAC;AAE7B;;GAEG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,SAAS,CAAC;AAEjC;;GAEG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC;AAE3B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC","sourcesContent":["/**\n * Represents minute component of datetime\n */\nexport const MINUTE = 'minute';\n\n/**\n * Represents hour component of datetime\n */\nexport const HOUR = 'hour';\n\n/**\n * Represents day component of datetime\n */\nexport const DAY = 'day';\n\n/**\n * Represents week component of datetime\n */\nexport const WEEK = 'week';\n\n/**\n * Represents month component of datetime\n */\nexport const MONTH = 'month';\n\n/**\n * Represents quarter component of datetime\n */\nexport const QUARTER = 'quarter';\n\n/**\n * Represents year component of datetime\n */\nexport const YEAR = 'year';\n\n/**\n * Represents decade component of datetime\n */\nexport const DECADE = 'decade';"]}

package/es2015/src/misc/datetime.interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=datetime.interface.js.map

package/es2015/src/misc/datetime.interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"datetime.interface.js","sourceRoot":"","sources":["../../../src/misc/datetime.interface.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Represents datetime value as period\n */\nexport interface DateTimeValue<TDate = any>\n{\n    /**\n     * Starting date and time of period\n     */\n    from: TDate;\n\n    /**\n     * Ending date and time of period\n     */\n    to: TDate;\n}\n\n/**\n * Represents object that holds data for indentification of validity of date time\n */\nexport interface DateTimeValueObject<TDate = any>\n{\n    /**\n     * Current value of datetime\n     */\n    readonly value: DateTimeValue<TDate>|null;\n\n    /**\n     * Indicaiton whether is current value valid, empty value is valid\n     */\n    readonly valid: boolean;\n\n    /**\n     * Minimal possible value, that can be\n     */\n    readonly minValue: TDate|null;\n\n    /**\n     * Maximal possible value, that can be\n     */\n    readonly maxValue: TDate|null;\n}"]}

package/es2015/src/misc/tokens.js

@@ -0,0 +1,19 @@
+import { InjectionToken } from '@angular/core';
+/**
+ * Injection token used for obtaining DateApi implementation
+ */
+export const DATE_API = new InjectionToken('DATE_API');
+/**
+ * Injection token used for obtaining FormatProvider implementation
+ */
+export const FORMAT_PROVIDER = new InjectionToken('FORMAT_PROVIDER', {
+    providedIn: 'root',
+    factory: () => {
+        return {
+            date: 'yyyy-MM-dd',
+            dateTime: 'yyyy-MM-dd HH:mm',
+            time: 'HH:mm'
+        };
+    }
+});
+//# sourceMappingURL=tokens.js.map

package/es2015/src/misc/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../../src/misc/tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,cAAc,EAAC,MAAM,eAAe,CAAC;AAI7C;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA4B,IAAI,cAAc,CAAU,UAAU,CAAC,CAAC;AAEzF;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAmC,IAAI,cAAc,CAAiB,iBAAiB,EACjB;IACI,UAAU,EAAE,MAAM;IAClB,OAAO,EAAE,GAAG,EAAE;QAEV,OAAO;YACH,IAAI,EAAE,YAAY;YAClB,QAAQ,EAAE,kBAAkB;YAC5B,IAAI,EAAE,OAAO;SAChB,CAAC;IACN,CAAC;CACJ,CAAC,CAAC","sourcesContent":["import {InjectionToken} from '@angular/core';\n\nimport {DateApi, FormatProvider} from '../services';\n\n/**\n * Injection token used for obtaining DateApi implementation\n */\nexport const DATE_API: InjectionToken<DateApi> = new InjectionToken<DateApi>('DATE_API');\n\n/**\n * Injection token used for obtaining FormatProvider implementation\n */\nexport const FORMAT_PROVIDER: InjectionToken<FormatProvider> = new InjectionToken<FormatProvider>('FORMAT_PROVIDER',\n                                                                                                  {\n                                                                                                      providedIn: 'root',\n                                                                                                      factory: () =>\n                                                                                                      {\n                                                                                                          return {\n                                                                                                              date: 'yyyy-MM-dd',\n                                                                                                              dateTime: 'yyyy-MM-dd HH:mm',\n                                                                                                              time: 'HH:mm'\n                                                                                                          };\n                                                                                                      }\n                                                                                                  });"]}

package/es2015/src/misc/validators.js

@@ -0,0 +1,58 @@
+/**
+ * Validations functions for datetime
+ */
+export class Validators {
+    /**
+     * Creates validator function that validates control if its value is valid datetime value
+     * @param datetime - Object storing information about datetime value
+     */
+    static datetime(datetime) {
+        return () => {
+            if (!datetime.valid) {
+                return {
+                    'datetime': true
+                };
+            }
+            return null;
+        };
+    }
+    /**
+     * Creates validator function that validates control if its value is withing range of minimal datetime value
+     * @param datetime - Object storing information about datetime value
+     * @param dateApi - Date api object
+     */
+    static minDatetime(datetime, dateApi) {
+        return (control) => {
+            if (!!control.value &&
+                datetime.valid &&
+                datetime.minValue &&
+                dateApi.getValue(control.value).isBefore(datetime.minValue)) {
+                return {
+                    'minDatetime': datetime.minValue,
+                    'actualValue': control.value
+                };
+            }
+            return null;
+        };
+    }
+    /**
+     * Creates validator function that validates control if its value is withing range of maximal datetime value
+     * @param datetime - Object storing information about datetime value
+     * @param dateApi - Date api object
+     */
+    static maxDatetime(datetime, dateApi) {
+        return (control) => {
+            if (!!control.value &&
+                datetime.valid &&
+                datetime.maxValue &&
+                dateApi.getValue(control.value).isAfter(datetime.maxValue)) {
+                return {
+                    'maxDatetime': datetime.maxValue,
+                    'actualValue': control.value
+                };
+            }
+            return null;
+        };
+    }
+}
+//# sourceMappingURL=validators.js.map

package/es2015/src/misc/validators.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validators.js","sourceRoot":"","sources":["../../../src/misc/validators.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,MAAM,OAAO,UAAU;IAEnB;;;OAGG;IACI,MAAM,CAAC,QAAQ,CAAc,QAAoC;QAEpE,OAAO,GAA0B,EAAE;YAE/B,IAAG,CAAC,QAAQ,CAAC,KAAK,EAClB;gBACI,OAAO;oBACH,UAAU,EAAE,IAAI;iBACnB,CAAC;aACL;YAED,OAAO,IAAI,CAAC;QAChB,CAAC,CAAC;IACN,CAAC;IAED;;;;OAIG;IACI,MAAM,CAAC,WAAW,CAAc,QAAoC,EAAE,OAAuB;QAEhG,OAAO,CAAC,OAAwB,EAAyB,EAAE;YAEvD,IAAG,CAAC,CAAC,OAAO,CAAC,KAAK;gBACf,QAAQ,CAAC,KAAK;gBACd,QAAQ,CAAC,QAAQ;gBACjB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAC9D;gBACI,OAAO;oBACH,aAAa,EAAE,QAAQ,CAAC,QAAQ;oBAChC,aAAa,EAAE,OAAO,CAAC,KAAK;iBAC/B,CAAC;aACL;YAED,OAAO,IAAI,CAAC;QAChB,CAAC,CAAC;IACN,CAAC;IAED;;;;OAIG;IACI,MAAM,CAAC,WAAW,CAAc,QAAoC,EAAE,OAAuB;QAEhG,OAAO,CAAC,OAAwB,EAAyB,EAAE;YAEvD,IAAG,CAAC,CAAC,OAAO,CAAC,KAAK;gBACf,QAAQ,CAAC,KAAK;gBACd,QAAQ,CAAC,QAAQ;gBACjB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAC7D;gBACI,OAAO;oBACH,aAAa,EAAE,QAAQ,CAAC,QAAQ;oBAChC,aAAa,EAAE,OAAO,CAAC,KAAK;iBAC/B,CAAC;aACL;YAED,OAAO,IAAI,CAAC;QAChB,CAAC,CAAC;IACN,CAAC;CACJ","sourcesContent":["import {AbstractControl, ValidationErrors, ValidatorFn} from '@angular/forms';\n\nimport {DateApi} from '../services';\nimport {DateTimeValueObject} from './datetime.interface';\n\n/**\n * Validations functions for datetime\n */\nexport class Validators\n{\n    /**\n     * Creates validator function that validates control if its value is valid datetime value\n     * @param datetime - Object storing information about datetime value\n     */\n    public static datetime<TDate = any>(datetime: DateTimeValueObject<TDate>): ValidatorFn\n    {\n        return (): ValidationErrors|null =>\n        {\n            if(!datetime.valid)\n            {\n                return {\n                    'datetime': true\n                };\n            }\n\n            return null;\n        };\n    }\n\n    /**\n     * Creates validator function that validates control if its value is withing range of minimal datetime value\n     * @param datetime - Object storing information about datetime value\n     * @param dateApi - Date api object\n     */\n    public static minDatetime<TDate = any>(datetime: DateTimeValueObject<TDate>, dateApi: DateApi<TDate>): ValidatorFn\n    {\n        return (control: AbstractControl): ValidationErrors|null =>\n        {\n            if(!!control.value &&\n               datetime.valid &&\n               datetime.minValue &&\n               dateApi.getValue(control.value).isBefore(datetime.minValue))\n            {\n                return {\n                    'minDatetime': datetime.minValue,\n                    'actualValue': control.value\n                };\n            }\n\n            return null;\n        };\n    }\n\n    /**\n     * Creates validator function that validates control if its value is withing range of maximal datetime value\n     * @param datetime - Object storing information about datetime value\n     * @param dateApi - Date api object\n     */\n    public static maxDatetime<TDate = any>(datetime: DateTimeValueObject<TDate>, dateApi: DateApi<TDate>): ValidatorFn\n    {\n        return (control: AbstractControl): ValidationErrors|null =>\n        {\n            if(!!control.value &&\n               datetime.valid &&\n               datetime.maxValue &&\n               dateApi.getValue(control.value).isAfter(datetime.maxValue))\n            {\n                return {\n                    'maxDatetime': datetime.maxValue,\n                    'actualValue': control.value\n                };\n            }\n\n            return null;\n        };\n    }\n}"]}

package/es2015/src/modules/datePipes.module.js

@@ -0,0 +1,33 @@
+import { NgModule } from '@angular/core';
+import { AsRequiredTypePipe } from '../pipes/asRequiredType';
+import { DateConvertPipe } from '../pipes/dateConvert.pipe';
+import { DateFormatPipe } from '../pipes/dateFormat.pipe';
+import * as i0 from "@angular/core";
+/**
+ * Module used for exporting date pipes
+ */
+export class DatePipesModule {
+}
+DatePipesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DatePipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DatePipesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DatePipesModule, declarations: [AsRequiredTypePipe,
+        DateFormatPipe,
+        DateConvertPipe], exports: [AsRequiredTypePipe,
+        DateFormatPipe,
+        DateConvertPipe] });
+DatePipesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DatePipesModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DatePipesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        AsRequiredTypePipe,
+                        DateFormatPipe,
+                        DateConvertPipe,
+                    ],
+                    exports: [
+                        AsRequiredTypePipe,
+                        DateFormatPipe,
+                        DateConvertPipe,
+                    ]
+                }]
+        }] });
+//# sourceMappingURL=datePipes.module.js.map

package/es2015/src/modules/datePipes.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"datePipes.module.js","sourceRoot":"","sources":["../../../src/modules/datePipes.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AAEvC,OAAO,EAAC,kBAAkB,EAAC,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAC,eAAe,EAAC,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAC,cAAc,EAAC,MAAM,0BAA0B,CAAC;;AAExD;;GAEG;AAgBH,MAAM,OAAO,eAAe;;4GAAf,eAAe;6GAAf,eAAe,iBAXpB,kBAAkB;QAClB,cAAc;QACd,eAAe,aAIf,kBAAkB;QAClB,cAAc;QACd,eAAe;6GAGV,eAAe;2FAAf,eAAe;kBAf3B,QAAQ;mBACT;oBACI,YAAY,EACZ;wBACI,kBAAkB;wBAClB,cAAc;wBACd,eAAe;qBAClB;oBACD,OAAO,EACP;wBACI,kBAAkB;wBAClB,cAAc;wBACd,eAAe;qBAClB;iBACJ","sourcesContent":["import {NgModule} from '@angular/core';\n\nimport {AsRequiredTypePipe} from '../pipes/asRequiredType';\nimport {DateConvertPipe} from '../pipes/dateConvert.pipe';\nimport {DateFormatPipe} from '../pipes/dateFormat.pipe';\n\n/**\n * Module used for exporting date pipes\n */\n@NgModule(\n{\n    declarations:\n    [\n        AsRequiredTypePipe,\n        DateFormatPipe,\n        DateConvertPipe,\n    ],\n    exports:\n    [\n        AsRequiredTypePipe,\n        DateFormatPipe,\n        DateConvertPipe,\n    ]\n})\nexport class DatePipesModule\n{\n}"]}

package/es2015/src/picker/components/dayPicker/dayPicker.component.js

@@ -0,0 +1,172 @@
+import { Component, ChangeDetectionStrategy, Inject, ChangeDetectorRef } from '@angular/core';
+import { extend } from '@jscrpt/common';
+import { DATE_API } from '../../../misc/tokens';
+import { PickerBaseComponent } from '../pickerBase.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "../../../pipes/asRequiredType";
+/**
+ * Default styles for picker
+ */
+const defaultStyles = {
+    periodSelection: 'period',
+    previousPeriod: 'fas fa-angle-left clickable',
+    nextPeriod: 'fas fa-angle-right clickable',
+    periodValue: 'period-value',
+    periodData: 'period-data',
+    periodDatum: 'period-datum clickable',
+    weekdayName: 'weekday'
+};
+/**
+ * Component used for displaying day picker
+ */
+export class DateTimeDayPickerComponent extends PickerBaseComponent {
+    //######################### constructor #########################
+    constructor(dateApi, changeDetector) {
+        super(dateApi, changeDetector);
+        //######################### protected fields #########################
+        /**
+         * Stored this picker month data
+         */
+        this._thisMonthData = [];
+        //######################### public properties - template bindings #########################
+        /**
+         * Names of days
+         * @internal
+         */
+        this.weekdays = [];
+        this.cssClasses = extend(true, {}, defaultStyles);
+        this.weekdays = this._dateApi.weekdaysShort();
+    }
+    //######################### public methods - template bindings #########################
+    /**
+     * Changes displayed month to next month
+     * @param event - Event that occured
+     * @internal
+     */
+    nextMonth(event) {
+        event.preventDefault();
+        this.displayDate.addMonths(1);
+        this.display(this.displayDate);
+    }
+    /**
+     * Changes displayed month to previous month
+     * @param event - Event that occured
+     * @internal
+     */
+    previousMonth(event) {
+        event.preventDefault();
+        this.displayDate.subtractMonths(1);
+        this.display(this.displayDate);
+    }
+    /**
+     * Selects day
+     * @param event - Event that occured
+     * @param day - Selects day
+     * @internal
+     */
+    select(event, day) {
+        event.preventDefault();
+        if (day.disabled) {
+            return;
+        }
+        //handle selection of value
+        if (!this.canGoDown) {
+            this._setPeriod(day);
+            this._value =
+                {
+                    from: day.date,
+                    to: this._endOfPeriod(day)
+                };
+            this._valueChange.next();
+            if (day.otherMonth) {
+                this.display(this._dateApi.getValue(day.date));
+            }
+            return;
+        }
+        this._scaleDown.next(day.date);
+    }
+    //######################### public methods - implementation of DateTimePicker #########################
+    /**
+     * Set displays date to be displayed
+     * @param value - Value that identifies period that is going to be displayed
+     */
+    display(value) {
+        this.displayDate = value;
+        this.periodData = [];
+        this._thisMonthData = [];
+        const currentMonthDate = this.displayDate.value;
+        const today = this._dateApi.now().value;
+        this.displayDate
+            .startOfMonth()
+            .updateOriginal()
+            .startOfWeek();
+        do {
+            for (let x = 0; x < 7; x++) {
+                const day = this.displayDate.dayOfMonth();
+                const otherMonth = !this.displayDate.isSameMonth(currentMonthDate);
+                const data = {
+                    active: false,
+                    disabled: false,
+                    betweenActive: false,
+                    date: this.displayDate.value,
+                    otherMonth: otherMonth,
+                    today: this.displayDate.isSameDay(today),
+                    weekend: this.displayDate.isWeekend(),
+                    day: day
+                };
+                this.periodData.push(data);
+                if (!otherMonth) {
+                    this._thisMonthData.push(data);
+                }
+                this.displayDate.addDays(1);
+            }
+        } while (this.displayDate.isSameMonth(currentMonthDate));
+        this.displayDate.resetOriginal();
+        this._updateMinMax();
+        //set value if exists
+        if (this._value && (this.displayDate.isSameMonth(this._value.from) || this.displayDate.isSameMonth(this._value.to))) {
+            this.setValue(this._value);
+        }
+    }
+    //######################### protected methods #########################
+    /**
+     * Obtains end of period
+     * @param period - Period for which should be end obtained
+     */
+    _endOfPeriod(period) {
+        return this._dateApi.getValue(period.date).endOfDay().value;
+    }
+    /**
+     * Tests whether provided value is in same period as displayed picker
+     * @param val - Tested value for same period as displayed picker
+     */
+    _isSamePeriodAsDisplayed(val) {
+        return val.isSameMonth(this.displayDate.value);
+    }
+    /**
+     * Tests whether provided value is in same period target value
+     * @param val - Tested value
+     * @param target - Target value to be tested against
+     */
+    _isSamePeriod(val, target) {
+        return val.isSameDay(target);
+    }
+    /**
+     * Gets period data for specified value
+     * @param val - Value for which is period data obtained
+     */
+    _getPeriodData(val) {
+        return this._thisMonthData[val.dayOfMonth() - 1];
+    }
+}
+DateTimeDayPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DateTimeDayPickerComponent, deps: [{ token: DATE_API }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+DateTimeDayPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: DateTimeDayPickerComponent, selector: "date-time-day-picker", usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"cssClasses?.periodSelection | asRequiredType\">\r\n    <div [ngClass]=\"cssClasses?.previousPeriod | asRequiredType\" (mousedown)=\"previousMonth($event)\"></div>\r\n    <div [ngClass]=\"cssClasses?.periodValue | asRequiredType\" [class.clickable]=\"canGoUp\" (mousedown)=\"goUp($event)\">{{displayDate?.format('MMMM yyyy')}}</div>\r\n    <div [ngClass]=\"cssClasses?.nextPeriod | asRequiredType\" (mousedown)=\"nextMonth($event)\"></div>\r\n</div>\r\n\r\n<div [ngClass]=\"cssClasses?.periodData | asRequiredType\">\r\n    <div [ngClass]=\"cssClasses?.weekdayName | asRequiredType\" *ngFor=\"let weekday of weekdays\">{{weekday}}</div>\r\n    <div *ngFor=\"let day of periodData\"\r\n         [ngClass]=\"cssClasses?.periodDatum | asRequiredType\"\r\n         [class.other-month]=\"day.otherMonth\"\r\n         [class.today]=\"day.today\"\r\n         [class.weekend]=\"day.weekend\"\r\n         [class.active]=\"day.active\"\r\n         [class.disabled]=\"day.disabled\"\r\n         (mousedown)=\"select($event, day)\">{{day.day}}</div>\r\n</div>", styles: [".period-data\r\n{\r\n    grid-template-columns: repeat(7, 1fr);\r\n}\r\n\r\n.weekday\r\n{\r\n    text-align: center;\r\n    font-weight: bold;\r\n    opacity: 0.7;\r\n    margin-bottom: 6px;\r\n}\r\n\r\n.period-datum:not(.other-month)\r\n{\r\n    font-weight: bold;\r\n}\r\n\r\n.other-month\r\n{\r\n    opacity: 0.5;\r\n}"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "asRequiredType": i2.AsRequiredTypePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DateTimeDayPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'date-time-day-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"cssClasses?.periodSelection | asRequiredType\">\r\n    <div [ngClass]=\"cssClasses?.previousPeriod | asRequiredType\" (mousedown)=\"previousMonth($event)\"></div>\r\n    <div [ngClass]=\"cssClasses?.periodValue | asRequiredType\" [class.clickable]=\"canGoUp\" (mousedown)=\"goUp($event)\">{{displayDate?.format('MMMM yyyy')}}</div>\r\n    <div [ngClass]=\"cssClasses?.nextPeriod | asRequiredType\" (mousedown)=\"nextMonth($event)\"></div>\r\n</div>\r\n\r\n<div [ngClass]=\"cssClasses?.periodData | asRequiredType\">\r\n    <div [ngClass]=\"cssClasses?.weekdayName | asRequiredType\" *ngFor=\"let weekday of weekdays\">{{weekday}}</div>\r\n    <div *ngFor=\"let day of periodData\"\r\n         [ngClass]=\"cssClasses?.periodDatum | asRequiredType\"\r\n         [class.other-month]=\"day.otherMonth\"\r\n         [class.today]=\"day.today\"\r\n         [class.weekend]=\"day.weekend\"\r\n         [class.active]=\"day.active\"\r\n         [class.disabled]=\"day.disabled\"\r\n         (mousedown)=\"select($event, day)\">{{day.day}}</div>\r\n</div>", styles: [".period-data\r\n{\r\n    grid-template-columns: repeat(7, 1fr);\r\n}\r\n\r\n.weekday\r\n{\r\n    text-align: center;\r\n    font-weight: bold;\r\n    opacity: 0.7;\r\n    margin-bottom: 6px;\r\n}\r\n\r\n.period-datum:not(.other-month)\r\n{\r\n    font-weight: bold;\r\n}\r\n\r\n.other-month\r\n{\r\n    opacity: 0.5;\r\n}"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DATE_API]
+                }] }, { type: i0.ChangeDetectorRef }]; } });
+//# sourceMappingURL=dayPicker.component.js.map

package/es2015/src/picker/components/dayPicker/dayPicker.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dayPicker.component.js","sourceRoot":"","sources":["../../../../../src/picker/components/dayPicker/dayPicker.component.ts","../../../../../src/picker/components/dayPicker/dayPicker.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy, Inject, ChangeDetectorRef} from '@angular/core';\nimport {extend} from '@jscrpt/common';\n\nimport {DATE_API} from '../../../misc/tokens';\nimport {DateApi, DateApiObject} from '../../../services/dateApi.interface';\nimport {DateTimePicker, DayData, PeriodData} from '../../misc/datetimePicker.interface';\nimport {PickerBaseComponent} from '../pickerBase.component';\nimport {DayPickerCssClasses} from './dayPicker.interfaces';\n\n/**\n * Default styles for picker\n */\nconst defaultStyles: DayPickerCssClasses =\n{\n    periodSelection: 'period',\n    previousPeriod: 'fas fa-angle-left clickable',\n    nextPeriod: 'fas fa-angle-right clickable',\n    periodValue: 'period-value',\n    periodData: 'period-data',\n    periodDatum: 'period-datum clickable',\n    weekdayName: 'weekday'\n};\n\n/**\n * Component used for displaying day picker\n */\n@Component(\n{\n    selector: 'date-time-day-picker',\n    templateUrl: 'dayPicker.component.html',\n    styleUrls: ['dayPicker.component.css'],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DateTimeDayPickerComponent<TDate = any> extends PickerBaseComponent<TDate, DayData<TDate>, DayPickerCssClasses> implements DateTimePicker<TDate, DayPickerCssClasses>\n{\n    //######################### protected fields #########################\n\n    /**\n     * Stored this picker month data\n     */\n    protected _thisMonthData: DayData<TDate>[] = [];\n\n    //######################### public properties - template bindings #########################\n\n    /**\n     * Names of days\n     * @internal\n     */\n    public weekdays: string[] = [];\n\n    //######################### constructor #########################\n    constructor(@Inject(DATE_API) dateApi: DateApi<TDate>,\n                changeDetector: ChangeDetectorRef)\n    {\n        super(dateApi, changeDetector);\n\n        this.cssClasses = extend(true, {}, defaultStyles);\n        this.weekdays = this._dateApi.weekdaysShort();\n    }\n\n    //######################### public methods - template bindings #########################\n\n    /**\n     * Changes displayed month to next month\n     * @param event - Event that occured\n     * @internal\n     */\n    public nextMonth(event: Event)\n    {\n        event.preventDefault();\n        this.displayDate!.addMonths(1);\n\n        this.display(this.displayDate!);\n    }\n\n    /**\n     * Changes displayed month to previous month\n     * @param event - Event that occured\n     * @internal\n     */\n    public previousMonth(event: Event)\n    {\n        event.preventDefault();\n        this.displayDate!.subtractMonths(1);\n\n        this.display(this.displayDate!);\n    }\n\n    /**\n     * Selects day\n     * @param event - Event that occured\n     * @param day - Selects day \n     * @internal\n     */\n    public override select(event: Event, day: DayData<TDate>)\n    {\n        event.preventDefault();\n\n        if(day.disabled)\n        {\n            return;\n        }\n\n        //handle selection of value\n        if(!this.canGoDown)\n        {\n            this._setPeriod(day);\n\n            this._value =\n            {\n                from: day.date,\n                to: this._endOfPeriod(day)\n            };\n            \n            this._valueChange.next();\n\n            if(day.otherMonth)\n            {\n                this.display(this._dateApi.getValue(day.date));\n            }\n\n            return;\n        }\n\n        this._scaleDown.next(day.date);\n    }\n\n    //######################### public methods - implementation of DateTimePicker #########################\n\n    /**\n     * Set displays date to be displayed\n     * @param value - Value that identifies period that is going to be displayed\n     */\n    public display(value: DateApiObject<TDate>): void\n    {\n        this.displayDate = value;\n        this.periodData = [];\n        this._thisMonthData = [];\n        const currentMonthDate = this.displayDate.value;\n        const today = this._dateApi.now().value;\n\n        this.displayDate\n            .startOfMonth()\n            .updateOriginal()\n            .startOfWeek();\n\n        do\n        {\n            for(let x = 0; x < 7; x++)\n            {\n                const day = this.displayDate.dayOfMonth();\n                const otherMonth = !this.displayDate.isSameMonth(currentMonthDate);\n                const data = \n                {\n                    active: false,\n                    disabled: false,\n                    betweenActive: false,\n                    date: this.displayDate.value,\n                    otherMonth: otherMonth,\n                    today: this.displayDate.isSameDay(today),\n                    weekend: this.displayDate.isWeekend(),\n                    day: day\n                };\n\n                this.periodData.push(data);\n\n                if(!otherMonth)\n                {\n                    this._thisMonthData.push(data);\n                }\n\n                this.displayDate.addDays(1);\n            }\n        }\n        while(this.displayDate.isSameMonth(currentMonthDate));\n\n        this.displayDate.resetOriginal();\n        this._updateMinMax();\n\n        //set value if exists\n        if(this._value && (this.displayDate.isSameMonth(this._value.from) || this.displayDate.isSameMonth(this._value.to)))\n        {\n            this.setValue(this._value);\n        }\n    }\n\n    //######################### protected methods #########################\n\n    /**\n     * Obtains end of period\n     * @param period - Period for which should be end obtained\n     */\n    protected _endOfPeriod(period: PeriodData<TDate>): TDate\n    {\n        return this._dateApi.getValue(period.date).endOfDay().value;\n    }\n\n    /**\n     * Tests whether provided value is in same period as displayed picker\n     * @param val - Tested value for same period as displayed picker\n     */\n    protected _isSamePeriodAsDisplayed(val: DateApiObject<TDate>): boolean\n    {\n        return val.isSameMonth(this.displayDate!.value);\n    }\n\n    /**\n     * Tests whether provided value is in same period target value\n     * @param val - Tested value\n     * @param target - Target value to be tested against\n     */\n    protected _isSamePeriod(val: DateApiObject<TDate>, target: TDate): boolean\n    {\n        return val.isSameDay(target);\n    }\n\n    /**\n     * Gets period data for specified value\n     * @param val - Value for which is period data obtained\n     */\n    protected _getPeriodData(val: DateApiObject<TDate>): PeriodData<TDate>\n    {\n        return this._thisMonthData[val.dayOfMonth() - 1];\n    }\n}","<div [ngClass]=\"cssClasses?.periodSelection | asRequiredType\">\r\n    <div [ngClass]=\"cssClasses?.previousPeriod | asRequiredType\" (mousedown)=\"previousMonth($event)\"></div>\r\n    <div [ngClass]=\"cssClasses?.periodValue | asRequiredType\" [class.clickable]=\"canGoUp\" (mousedown)=\"goUp($event)\">{{displayDate?.format('MMMM yyyy')}}</div>\r\n    <div [ngClass]=\"cssClasses?.nextPeriod | asRequiredType\" (mousedown)=\"nextMonth($event)\"></div>\r\n</div>\r\n\r\n<div [ngClass]=\"cssClasses?.periodData | asRequiredType\">\r\n    <div [ngClass]=\"cssClasses?.weekdayName | asRequiredType\" *ngFor=\"let weekday of weekdays\">{{weekday}}</div>\r\n    <div *ngFor=\"let day of periodData\"\r\n         [ngClass]=\"cssClasses?.periodDatum | asRequiredType\"\r\n         [class.other-month]=\"day.otherMonth\"\r\n         [class.today]=\"day.today\"\r\n         [class.weekend]=\"day.weekend\"\r\n         [class.active]=\"day.active\"\r\n         [class.disabled]=\"day.disabled\"\r\n         (mousedown)=\"select($event, day)\">{{day.day}}</div>\r\n</div>"]}

package/es2015/src/picker/components/dayPicker/dayPicker.interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=dayPicker.interfaces.js.map

package/es2015/src/picker/components/dayPicker/dayPicker.interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dayPicker.interfaces.js","sourceRoot":"","sources":["../../../../../src/picker/components/dayPicker/dayPicker.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["import {CommonPickerCssClasses} from '../../misc/datetimePicker.interface';\n\n/**\n * Specific css classes for day picker\n */\nexport interface DayPickerCssClasses extends CommonPickerCssClasses\n{\n    /**\n     * Element displaying weekday name\n     */\n    weekdayName?: string;\n}"]}

package/es2015/src/picker/components/monthPicker/monthPicker.component.js

@@ -0,0 +1,114 @@
+import { Component, ChangeDetectionStrategy, Inject, ChangeDetectorRef } from '@angular/core';
+import { extend } from '@jscrpt/common';
+import { DATE_API } from '../../../misc/tokens';
+import { PickerBaseComponent } from '../pickerBase.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "../../../pipes/asRequiredType";
+/**
+ * Default styles for picker
+ */
+const defaultStyles = {
+    periodSelection: 'period',
+    previousPeriod: 'fas fa-angle-left clickable',
+    nextPeriod: 'fas fa-angle-right clickable',
+    periodValue: 'period-value',
+    periodData: 'period-data',
+    periodDatum: 'period-datum clickable'
+};
+/**
+ * Component used for displaying month picker
+ */
+export class DateTimeMonthPickerComponent extends PickerBaseComponent {
+    //######################### constructor #########################
+    constructor(dateApi, changeDetector) {
+        super(dateApi, changeDetector);
+        this.cssClasses = extend(true, {}, defaultStyles);
+    }
+    //######################### public methods - template bindings #########################
+    /**
+     * Changes displayed year to next year
+     * @param event - Event that occured
+     * @internal
+     */
+    nextYear(event) {
+        event.preventDefault();
+        this.displayDate.addYears(1);
+        this.display(this.displayDate);
+    }
+    /**
+     * Changes displayed year to previous year
+     * @param event - Event that occured
+     * @internal
+     */
+    previousYear(event) {
+        event.preventDefault();
+        this.displayDate.subtractYears(1);
+        this.display(this.displayDate);
+    }
+    //######################### public methods - implementation of DateTimePicker #########################
+    /**
+     * Set displays date to be displayed
+     * @param value - Value that identifies period that is going to be displayed
+     */
+    display(value) {
+        this.displayDate = value;
+        const monthOfYear = this.displayDate.startOfYear().updateOriginal();
+        this.periodData = [];
+        for (let x = 0; x < 12; x++) {
+            this.periodData.push({
+                active: false,
+                disabled: false,
+                date: monthOfYear.value,
+                name: monthOfYear.format('MMM')
+            });
+            monthOfYear.addMonths(1);
+        }
+        this.displayDate.resetOriginal();
+        this._updateMinMax();
+        //set value if exists
+        if (this._value && (this.displayDate.isSameYear(this._value.from) || this.displayDate.isSameYear(this._value.to))) {
+            this.setValue(this._value);
+        }
+    }
+    //######################### protected methods #########################
+    /**
+     * Obtains end of period
+     * @param period - Period for which should be end obtained
+     */
+    _endOfPeriod(period) {
+        return this._dateApi.getValue(period.date).endOfMonth().value;
+    }
+    /**
+     * Tests whether provided value is in same period as displayed picker
+     * @param val - Tested value for same period as displayed picker
+     */
+    _isSamePeriodAsDisplayed(val) {
+        return val.isSameYear(this.displayDate.value);
+    }
+    /**
+     * Tests whether provided value is in same period target value
+     * @param val - Tested value
+     * @param target - Target value to be tested against
+     */
+    _isSamePeriod(val, target) {
+        return val.isSameMonth(target);
+    }
+    /**
+     * Gets period data for specified value
+     * @param val - Value for which is period data obtained
+     */
+    _getPeriodData(val) {
+        return this.periodData[val.month()];
+    }
+}
+DateTimeMonthPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DateTimeMonthPickerComponent, deps: [{ token: DATE_API }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+DateTimeMonthPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: DateTimeMonthPickerComponent, selector: "date-time-month-picker", usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"cssClasses?.periodSelection | asRequiredType\">\r\n    <div [ngClass]=\"cssClasses?.previousPeriod | asRequiredType\" (mousedown)=\"previousYear($event)\"></div>\r\n    <div [ngClass]=\"cssClasses?.periodValue | asRequiredType\" [class.clickable]=\"canGoUp\" (mousedown)=\"goUp($event)\">{{displayDate?.format('yyyy')}}</div>\r\n    <div [ngClass]=\"cssClasses?.nextPeriod | asRequiredType\" (mousedown)=\"nextYear($event)\"></div>\r\n</div>\r\n\r\n<div [ngClass]=\"cssClasses?.periodData | asRequiredType\">\r\n    <div *ngFor=\"let month of periodData\"\r\n         [ngClass]=\"cssClasses?.periodDatum | asRequiredType\"\r\n         [class.active]=\"month.active\"\r\n         [class.disabled]=\"month.disabled\"\r\n         (mousedown)=\"select($event, month)\">{{month.name}}</div>\r\n</div>", styles: [".period-data\r\n{\r\n    grid-template-columns: repeat(4, 1fr);\r\n}"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "asRequiredType": i2.AsRequiredTypePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DateTimeMonthPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'date-time-month-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"cssClasses?.periodSelection | asRequiredType\">\r\n    <div [ngClass]=\"cssClasses?.previousPeriod | asRequiredType\" (mousedown)=\"previousYear($event)\"></div>\r\n    <div [ngClass]=\"cssClasses?.periodValue | asRequiredType\" [class.clickable]=\"canGoUp\" (mousedown)=\"goUp($event)\">{{displayDate?.format('yyyy')}}</div>\r\n    <div [ngClass]=\"cssClasses?.nextPeriod | asRequiredType\" (mousedown)=\"nextYear($event)\"></div>\r\n</div>\r\n\r\n<div [ngClass]=\"cssClasses?.periodData | asRequiredType\">\r\n    <div *ngFor=\"let month of periodData\"\r\n         [ngClass]=\"cssClasses?.periodDatum | asRequiredType\"\r\n         [class.active]=\"month.active\"\r\n         [class.disabled]=\"month.disabled\"\r\n         (mousedown)=\"select($event, month)\">{{month.name}}</div>\r\n</div>", styles: [".period-data\r\n{\r\n    grid-template-columns: repeat(4, 1fr);\r\n}"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DATE_API]
+                }] }, { type: i0.ChangeDetectorRef }]; } });
+//# sourceMappingURL=monthPicker.component.js.map

package/es2015/src/picker/components/monthPicker/monthPicker.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"monthPicker.component.js","sourceRoot":"","sources":["../../../../../src/picker/components/monthPicker/monthPicker.component.ts","../../../../../src/picker/components/monthPicker/monthPicker.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy, Inject, ChangeDetectorRef} from '@angular/core';\nimport {extend} from '@jscrpt/common';\n\nimport {DATE_API} from '../../../misc/tokens';\nimport {DateApi, DateApiObject} from '../../../services/dateApi.interface';\nimport {DateTimePicker, MonthData, PeriodData} from '../../misc/datetimePicker.interface';\nimport {PickerBaseComponent} from '../pickerBase.component';\nimport {MonthPickerCssClasses} from './monthPicker.interfaces';\n\n/**\n * Default styles for picker\n */\nconst defaultStyles: MonthPickerCssClasses =\n{\n    periodSelection: 'period',\n    previousPeriod: 'fas fa-angle-left clickable',\n    nextPeriod: 'fas fa-angle-right clickable',\n    periodValue: 'period-value',\n    periodData: 'period-data',\n    periodDatum: 'period-datum clickable'\n};\n\n/**\n * Component used for displaying month picker\n */\n@Component(\n{\n    selector: 'date-time-month-picker',\n    templateUrl: 'monthPicker.component.html',\n    styleUrls: ['monthPicker.component.css'],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DateTimeMonthPickerComponent<TDate = any> extends PickerBaseComponent<TDate, MonthData<TDate>, MonthPickerCssClasses> implements DateTimePicker<TDate, MonthPickerCssClasses>\n{\n    //######################### constructor #########################\n    constructor(@Inject(DATE_API) dateApi: DateApi<TDate>,\n                changeDetector: ChangeDetectorRef)\n    {\n        super(dateApi, changeDetector);\n\n        this.cssClasses = extend(true, {}, defaultStyles);\n    }\n\n    //######################### public methods - template bindings #########################\n\n    /**\n     * Changes displayed year to next year\n     * @param event - Event that occured\n     * @internal\n     */\n    public nextYear(event: Event)\n    {\n        event.preventDefault();\n        this.displayDate!.addYears(1);\n\n        this.display(this.displayDate!);\n    }\n\n    /**\n     * Changes displayed year to previous year\n     * @param event - Event that occured\n     * @internal\n     */\n    public previousYear(event: Event)\n    {\n        event.preventDefault();\n        this.displayDate!.subtractYears(1);\n\n        this.display(this.displayDate!);\n    }\n\n    //######################### public methods - implementation of DateTimePicker #########################\n\n    /**\n     * Set displays date to be displayed\n     * @param value - Value that identifies period that is going to be displayed\n     */\n    public display(value: DateApiObject<TDate>): void\n    {\n        this.displayDate = value;\n\n        const monthOfYear = this.displayDate.startOfYear().updateOriginal();\n        this.periodData = [];\n\n        for(let x = 0; x < 12; x++)\n        {\n            this.periodData.push(\n            {\n                active: false,\n                disabled: false,\n                date: monthOfYear.value,\n                name: monthOfYear.format('MMM')\n            });\n\n            monthOfYear.addMonths(1);\n        }\n\n        this.displayDate.resetOriginal();\n        this._updateMinMax();\n\n        //set value if exists\n        if(this._value && (this.displayDate.isSameYear(this._value.from) || this.displayDate.isSameYear(this._value.to)))\n        {\n            this.setValue(this._value);\n        }\n    }\n\n    //######################### protected methods #########################\n\n    /**\n     * Obtains end of period\n     * @param period - Period for which should be end obtained\n     */\n    protected _endOfPeriod(period: PeriodData<TDate>): TDate\n    {\n        return this._dateApi.getValue(period.date).endOfMonth().value;\n    }\n\n    /**\n     * Tests whether provided value is in same period as displayed picker\n     * @param val - Tested value for same period as displayed picker\n     */\n    protected _isSamePeriodAsDisplayed(val: DateApiObject<TDate>): boolean\n    {\n        return val.isSameYear(this.displayDate!.value);\n    }\n\n    /**\n     * Tests whether provided value is in same period target value\n     * @param val - Tested value\n     * @param target - Target value to be tested against\n     */\n    protected _isSamePeriod(val: DateApiObject<TDate>, target: TDate): boolean\n    {\n        return val.isSameMonth(target);\n    }\n\n    /**\n     * Gets period data for specified value\n     * @param val - Value for which is period data obtained\n     */\n    protected _getPeriodData(val: DateApiObject<TDate>): PeriodData<TDate>\n    {\n        return this.periodData[val.month()];\n    }\n}","<div [ngClass]=\"cssClasses?.periodSelection | asRequiredType\">\r\n    <div [ngClass]=\"cssClasses?.previousPeriod | asRequiredType\" (mousedown)=\"previousYear($event)\"></div>\r\n    <div [ngClass]=\"cssClasses?.periodValue | asRequiredType\" [class.clickable]=\"canGoUp\" (mousedown)=\"goUp($event)\">{{displayDate?.format('yyyy')}}</div>\r\n    <div [ngClass]=\"cssClasses?.nextPeriod | asRequiredType\" (mousedown)=\"nextYear($event)\"></div>\r\n</div>\r\n\r\n<div [ngClass]=\"cssClasses?.periodData | asRequiredType\">\r\n    <div *ngFor=\"let month of periodData\"\r\n         [ngClass]=\"cssClasses?.periodDatum | asRequiredType\"\r\n         [class.active]=\"month.active\"\r\n         [class.disabled]=\"month.disabled\"\r\n         (mousedown)=\"select($event, month)\">{{month.name}}</div>\r\n</div>"]}

package/es2015/src/picker/components/monthPicker/monthPicker.interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=monthPicker.interfaces.js.map

package/es2015/src/picker/components/monthPicker/monthPicker.interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"monthPicker.interfaces.js","sourceRoot":"","sources":["../../../../../src/picker/components/monthPicker/monthPicker.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["import {CommonPickerCssClasses} from '../../misc/datetimePicker.interface';\n\n/**\n * Specific css classes for month picker\n */\nexport interface MonthPickerCssClasses extends CommonPickerCssClasses\n{\n}"]}