@anglr/datetime 2.0.1-beta.20220222061608 → 3.0.0-beta.20220321133011

package/es2020/src/picker/components/rollerTimePicker/rollerTimePicker.data.js

@@ -0,0 +1,341 @@
+export const hours = [
+    {
+        displayText: '00',
+        data: 0
+    },
+    {
+        displayText: '01',
+        data: 1
+    },
+    {
+        displayText: '02',
+        data: 2
+    },
+    {
+        displayText: '03',
+        data: 3
+    },
+    {
+        displayText: '04',
+        data: 4
+    },
+    {
+        displayText: '05',
+        data: 5
+    },
+    {
+        displayText: '06',
+        data: 6
+    },
+    {
+        displayText: '07',
+        data: 7
+    },
+    {
+        displayText: '08',
+        data: 8
+    },
+    {
+        displayText: '09',
+        data: 9
+    },
+    {
+        displayText: '10',
+        data: 10
+    },
+    {
+        displayText: '11',
+        data: 11
+    },
+    {
+        displayText: '12',
+        data: 12
+    },
+    {
+        displayText: '13',
+        data: 13
+    },
+    {
+        displayText: '14',
+        data: 14
+    },
+    {
+        displayText: '15',
+        data: 15
+    },
+    {
+        displayText: '16',
+        data: 16
+    },
+    {
+        displayText: '17',
+        data: 17
+    },
+    {
+        displayText: '18',
+        data: 18
+    },
+    {
+        displayText: '19',
+        data: 19
+    },
+    {
+        displayText: '20',
+        data: 20
+    },
+    {
+        displayText: '21',
+        data: 21
+    },
+    {
+        displayText: '22',
+        data: 22
+    },
+    {
+        displayText: '23',
+        data: 23
+    }
+];
+export const minutes = [
+    {
+        displayText: '00',
+        data: 0
+    },
+    {
+        displayText: '01',
+        data: 1
+    },
+    {
+        displayText: '02',
+        data: 2
+    },
+    {
+        displayText: '03',
+        data: 3
+    },
+    {
+        displayText: '04',
+        data: 4
+    },
+    {
+        displayText: '05',
+        data: 5
+    },
+    {
+        displayText: '06',
+        data: 6
+    },
+    {
+        displayText: '07',
+        data: 7
+    },
+    {
+        displayText: '08',
+        data: 8
+    },
+    {
+        displayText: '09',
+        data: 9
+    },
+    {
+        displayText: '10',
+        data: 10
+    },
+    {
+        displayText: '11',
+        data: 11
+    },
+    {
+        displayText: '12',
+        data: 12
+    },
+    {
+        displayText: '13',
+        data: 13
+    },
+    {
+        displayText: '14',
+        data: 14
+    },
+    {
+        displayText: '15',
+        data: 15
+    },
+    {
+        displayText: '16',
+        data: 16
+    },
+    {
+        displayText: '17',
+        data: 17
+    },
+    {
+        displayText: '18',
+        data: 18
+    },
+    {
+        displayText: '19',
+        data: 19
+    },
+    {
+        displayText: '20',
+        data: 20
+    },
+    {
+        displayText: '21',
+        data: 21
+    },
+    {
+        displayText: '22',
+        data: 22
+    },
+    {
+        displayText: '23',
+        data: 23
+    },
+    {
+        displayText: '24',
+        data: 24
+    },
+    {
+        displayText: '25',
+        data: 25
+    },
+    {
+        displayText: '26',
+        data: 26
+    },
+    {
+        displayText: '27',
+        data: 27
+    },
+    {
+        displayText: '28',
+        data: 28
+    },
+    {
+        displayText: '29',
+        data: 29
+    },
+    {
+        displayText: '30',
+        data: 30
+    },
+    {
+        displayText: '31',
+        data: 31
+    },
+    {
+        displayText: '32',
+        data: 32
+    },
+    {
+        displayText: '33',
+        data: 33
+    },
+    {
+        displayText: '34',
+        data: 34
+    },
+    {
+        displayText: '35',
+        data: 35
+    },
+    {
+        displayText: '36',
+        data: 36
+    },
+    {
+        displayText: '37',
+        data: 37
+    },
+    {
+        displayText: '38',
+        data: 38
+    },
+    {
+        displayText: '39',
+        data: 39
+    },
+    {
+        displayText: '40',
+        data: 40
+    },
+    {
+        displayText: '41',
+        data: 41
+    },
+    {
+        displayText: '42',
+        data: 42
+    },
+    {
+        displayText: '43',
+        data: 43
+    },
+    {
+        displayText: '44',
+        data: 44
+    },
+    {
+        displayText: '45',
+        data: 45
+    },
+    {
+        displayText: '46',
+        data: 46
+    },
+    {
+        displayText: '47',
+        data: 47
+    },
+    {
+        displayText: '48',
+        data: 48
+    },
+    {
+        displayText: '49',
+        data: 49
+    },
+    {
+        displayText: '50',
+        data: 50
+    },
+    {
+        displayText: '51',
+        data: 51
+    },
+    {
+        displayText: '52',
+        data: 52
+    },
+    {
+        displayText: '53',
+        data: 53
+    },
+    {
+        displayText: '54',
+        data: 54
+    },
+    {
+        displayText: '55',
+        data: 55
+    },
+    {
+        displayText: '56',
+        data: 56
+    },
+    {
+        displayText: '57',
+        data: 57
+    },
+    {
+        displayText: '58',
+        data: 58
+    },
+    {
+        displayText: '59',
+        data: 59
+    },
+];
+//# sourceMappingURL=rollerTimePicker.data.js.map

package/es2020/src/picker/components/rollerTimePicker/rollerTimePicker.data.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rollerTimePicker.data.js","sourceRoot":"","sources":["../../../../../src/picker/components/rollerTimePicker/rollerTimePicker.data.ts"],"names":[],"mappings":"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AI,EAAE,EAAE;KACX;IACD;QACI,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,EAAE;KACX;IACD;QACI,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,EAAE;KACX;IACD;QACI,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,EAAE;KACX;IACD;QACI,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,EAAE;KACX;IACD;QACI,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,EAAE;KACX;IACD;QACI,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,EAAE;KACX;IACD;QACI,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,EAAE;KACX;IACD;QACI,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,EAAE;KACX;IACD;QACI,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,EAAE;KACX;IACD;QACI,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,EAAE;KACX;IACD;QACI,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,EAAE;KACX;IACD;QACI,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,EAAE;KACX;IACD;QACI,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,EAAE;KACX;IACD;QACI,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,EAAE;KACX;IACD;QACI,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,EAAE;KACX;IACD;QACI,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,EAAE;KACX;IACD;QACI,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,EAAE;KACX;IACD;QACI,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,EAAE;KACX;IACD;QACI,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,EAAE;KACX;IACD;QACI,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,EAAE;KACX;IACD;QACI,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,EAAE;KACX;IACD;QACI,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,EAAE;KACX;IACD;QACI,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,EAAE;KACX;IACD;QACI,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,EAAE;KACX;IACD;QACI,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,EAAE;KACX;IACD;QACI,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,EAAE;KACX;IACD;QACI,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,EAAE;KACX;IACD;QACI,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,EAAE;KACX;IACD;QACI,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,EAAE;KACX;IACD;QACI,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,EAAE;KACX;IACD;QACI,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,EAAE;KACX;IACD;QACI,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,EAAE;KACX;IACD;QACI,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,EAAE;KACX;IACD;QACI,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,EAAE;KACX;IACD;QACI,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,EAAE;KACX;IACD;QACI,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,EAAE;KACX;IACD;QACI,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,EAAE;KACX;IACD;QACI,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,EAAE;KACX;CACJ,CAAC","sourcesContent":["import {LoopScrollData} from '../../directives';\n\nexport const hours: LoopScrollData[] =\n[\n    {\n        displayText: '00',\n        data: 0\n    },\n    {\n        displayText: '01',\n        data: 1\n    },\n    {\n        displayText: '02',\n        data: 2\n    },\n    {\n        displayText: '03',\n        data: 3\n    },\n    {\n        displayText: '04',\n        data: 4\n    },\n    {\n        displayText: '05',\n        data: 5\n    },\n    {\n        displayText: '06',\n        data: 6\n    },\n    {\n        displayText: '07',\n        data: 7\n    },\n    {\n        displayText: '08',\n        data: 8\n    },\n    {\n        displayText: '09',\n        data: 9\n    },\n    {\n        displayText: '10',\n        data: 10\n    },\n    {\n        displayText: '11',\n        data: 11\n    },\n    {\n        displayText: '12',\n        data: 12\n    },\n    {\n        displayText: '13',\n        data: 13\n    },\n    {\n        displayText: '14',\n        data: 14\n    },\n    {\n        displayText: '15',\n        data: 15\n    },\n    {\n        displayText: '16',\n        data: 16\n    },\n    {\n        displayText: '17',\n        data: 17\n    },\n    {\n        displayText: '18',\n        data: 18\n    },\n    {\n        displayText: '19',\n        data: 19\n    },\n    {\n        displayText: '20',\n        data: 20\n    },\n    {\n        displayText: '21',\n        data: 21\n    },\n    {\n        displayText: '22',\n        data: 22\n    },\n    {\n        displayText: '23',\n        data: 23\n    }\n];\n\nexport const minutes: LoopScrollData[] =\n[\n    {\n        displayText: '00',\n        data: 0\n    },\n    {\n        displayText: '01',\n        data: 1\n    },\n    {\n        displayText: '02',\n        data: 2\n    },\n    {\n        displayText: '03',\n        data: 3\n    },\n    {\n        displayText: '04',\n        data: 4\n    },\n    {\n        displayText: '05',\n        data: 5\n    },\n    {\n        displayText: '06',\n        data: 6\n    },\n    {\n        displayText: '07',\n        data: 7\n    },\n    {\n        displayText: '08',\n        data: 8\n    },\n    {\n        displayText: '09',\n        data: 9\n    },\n    {\n        displayText: '10',\n        data: 10\n    },\n    {\n        displayText: '11',\n        data: 11\n    },\n    {\n        displayText: '12',\n        data: 12\n    },\n    {\n        displayText: '13',\n        data: 13\n    },\n    {\n        displayText: '14',\n        data: 14\n    },\n    {\n        displayText: '15',\n        data: 15\n    },\n    {\n        displayText: '16',\n        data: 16\n    },\n    {\n        displayText: '17',\n        data: 17\n    },\n    {\n        displayText: '18',\n        data: 18\n    },\n    {\n        displayText: '19',\n        data: 19\n    },\n    {\n        displayText: '20',\n        data: 20\n    },\n    {\n        displayText: '21',\n        data: 21\n    },\n    {\n        displayText: '22',\n        data: 22\n    },\n    {\n        displayText: '23',\n        data: 23\n    },\n    {\n        displayText: '24',\n        data: 24\n    },\n    {\n        displayText: '25',\n        data: 25\n    },\n    {\n        displayText: '26',\n        data: 26\n    },\n    {\n        displayText: '27',\n        data: 27\n    },\n    {\n        displayText: '28',\n        data: 28\n    },\n    {\n        displayText: '29',\n        data: 29\n    },\n    {\n        displayText: '30',\n        data: 30\n    },\n    {\n        displayText: '31',\n        data: 31\n    },\n    {\n        displayText: '32',\n        data: 32\n    },\n    {\n        displayText: '33',\n        data: 33\n    },\n    {\n        displayText: '34',\n        data: 34\n    },\n    {\n        displayText: '35',\n        data: 35\n    },\n    {\n        displayText: '36',\n        data: 36\n    },\n    {\n        displayText: '37',\n        data: 37\n    },\n    {\n        displayText: '38',\n        data: 38\n    },\n    {\n        displayText: '39',\n        data: 39\n    },\n    {\n        displayText: '40',\n        data: 40\n    },\n    {\n        displayText: '41',\n        data: 41\n    },\n    {\n        displayText: '42',\n        data: 42\n    },\n    {\n        displayText: '43',\n        data: 43\n    },\n    {\n        displayText: '44',\n        data: 44\n    },\n    {\n        displayText: '45',\n        data: 45\n    },\n    {\n        displayText: '46',\n        data: 46\n    },\n    {\n        displayText: '47',\n        data: 47\n    },\n    {\n        displayText: '48',\n        data: 48\n    },\n    {\n        displayText: '49',\n        data: 49\n    },\n    {\n        displayText: '50',\n        data: 50\n    },\n    {\n        displayText: '51',\n        data: 51\n    },\n    {\n        displayText: '52',\n        data: 52\n    },\n    {\n        displayText: '53',\n        data: 53\n    },\n    {\n        displayText: '54',\n        data: 54\n    },\n    {\n        displayText: '55',\n        data: 55\n    },\n    {\n        displayText: '56',\n        data: 56\n    },\n    {\n        displayText: '57',\n        data: 57\n    },\n    {\n        displayText: '58',\n        data: 58\n    },\n    {\n        displayText: '59',\n        data: 59\n    },\n];"]}

package/es2020/src/picker/components/rollerTimePicker/rollerTimePicker.interface.js

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

package/es2020/src/picker/components/rollerTimePicker/rollerTimePicker.interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rollerTimePicker.interface.js","sourceRoot":"","sources":["../../../../../src/picker/components/rollerTimePicker/rollerTimePicker.interface.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Specific css classes for roller time picker\n */\nexport interface RollerTimePickerCssClasses\n{\n}"]}

package/es2020/src/picker/components/yearPicker/yearPicker.component.js

@@ -4,7 +4,7 @@ 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";
+import * as i2 from "@anglr/common";
 /**
  * Default styles for picker
  */
@@ -14,7 +14,8 @@ const defaultStyles = {
     nextPeriod: 'fas fa-angle-right clickable',
     periodValue: 'period-value',
     periodData: 'period-data',
-    periodDatum: 'period-datum clickable'
+    periodDatum: 'period-datum clickable',
+    clickable: 'clickable'
 };
 /**
  * Component used for displaying year picker
@@ -115,10 +116,10 @@ export class DateTimeYearPickerComponent extends PickerBaseComponent {
     }
 }
 DateTimeYearPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DateTimeYearPickerComponent, deps: [{ token: DATE_API }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DateTimeYearPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: DateTimeYearPickerComponent, selector: "date-time-year-picker", usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"cssClasses?.periodSelection | asRequiredType\">\r\n    <div [ngClass]=\"cssClasses?.previousPeriod | asRequiredType\" (mousedown)=\"previousDecade($event)\"></div>\r\n    <div [ngClass]=\"cssClasses?.periodValue | asRequiredType\" [class.clickable]=\"canGoUp\" (mousedown)=\"goUp($event)\">{{period}}</div>\r\n    <div [ngClass]=\"cssClasses?.nextPeriod | asRequiredType\" (mousedown)=\"nextDecade($event)\"></div>\r\n</div>\r\n\r\n<div [ngClass]=\"cssClasses?.periodData | asRequiredType\">\r\n    <div *ngFor=\"let year of periodData\"\r\n         [ngClass]=\"cssClasses?.periodDatum | asRequiredType\"\r\n         [class.active]=\"year.active\"\r\n         [class.disabled]=\"year.disabled\"\r\n         (mousedown)=\"select($event, year)\">{{year.value}}</div>\r\n</div>", styles: [".period-data\r\n{\r\n    grid-template-columns: repeat(5, 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 });
+DateTimeYearPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: DateTimeYearPickerComponent, selector: "date-time-year-picker", usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"cssClasses?.periodSelection | asRequired\">\r\n    <div [ngClass]=\"cssClasses?.previousPeriod | asRequired\" (mousedown)=\"previousDecade($event)\"></div>\r\n    <div [ngClass]=\"cssClasses?.periodValue | asRequired\" [class.clickable]=\"canGoUp\" (mousedown)=\"goUp($event)\">{{period}}</div>\r\n    <div [ngClass]=\"cssClasses?.nextPeriod | asRequired\" (mousedown)=\"nextDecade($event)\"></div>\r\n</div>\r\n\r\n<div [ngClass]=\"cssClasses?.periodData | asRequired\">\r\n    <div *ngFor=\"let year of periodData\"\r\n         [ngClass]=\"cssClasses?.periodDatum | asRequired\"\r\n         [class.active]=\"year.active\"\r\n         [class.disabled]=\"year.disabled\"\r\n         (mousedown)=\"select($event, year)\">{{year.value}}</div>\r\n</div>", styles: [".period-data\r\n{\r\n    grid-template-columns: repeat(5, 1fr);\r\n}"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "asRequired": i2.AsRequiredTypePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DateTimeYearPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'date-time-year-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"cssClasses?.periodSelection | asRequiredType\">\r\n    <div [ngClass]=\"cssClasses?.previousPeriod | asRequiredType\" (mousedown)=\"previousDecade($event)\"></div>\r\n    <div [ngClass]=\"cssClasses?.periodValue | asRequiredType\" [class.clickable]=\"canGoUp\" (mousedown)=\"goUp($event)\">{{period}}</div>\r\n    <div [ngClass]=\"cssClasses?.nextPeriod | asRequiredType\" (mousedown)=\"nextDecade($event)\"></div>\r\n</div>\r\n\r\n<div [ngClass]=\"cssClasses?.periodData | asRequiredType\">\r\n    <div *ngFor=\"let year of periodData\"\r\n         [ngClass]=\"cssClasses?.periodDatum | asRequiredType\"\r\n         [class.active]=\"year.active\"\r\n         [class.disabled]=\"year.disabled\"\r\n         (mousedown)=\"select($event, year)\">{{year.value}}</div>\r\n</div>", styles: [".period-data\r\n{\r\n    grid-template-columns: repeat(5, 1fr);\r\n}"] }]
+            args: [{ selector: 'date-time-year-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"cssClasses?.periodSelection | asRequired\">\r\n    <div [ngClass]=\"cssClasses?.previousPeriod | asRequired\" (mousedown)=\"previousDecade($event)\"></div>\r\n    <div [ngClass]=\"cssClasses?.periodValue | asRequired\" [class.clickable]=\"canGoUp\" (mousedown)=\"goUp($event)\">{{period}}</div>\r\n    <div [ngClass]=\"cssClasses?.nextPeriod | asRequired\" (mousedown)=\"nextDecade($event)\"></div>\r\n</div>\r\n\r\n<div [ngClass]=\"cssClasses?.periodData | asRequired\">\r\n    <div *ngFor=\"let year of periodData\"\r\n         [ngClass]=\"cssClasses?.periodDatum | asRequired\"\r\n         [class.active]=\"year.active\"\r\n         [class.disabled]=\"year.disabled\"\r\n         (mousedown)=\"select($event, year)\">{{year.value}}</div>\r\n</div>", styles: [".period-data\r\n{\r\n    grid-template-columns: repeat(5, 1fr);\r\n}"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [DATE_API]

package/es2020/src/picker/components/yearPicker/yearPicker.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"yearPicker.component.js","sourceRoot":"","sources":["../../../../../src/picker/components/yearPicker/yearPicker.component.ts","../../../../../src/picker/components/yearPicker/yearPicker.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, PeriodData, YearData} from '../../misc/datetimePicker.interface';\nimport {PickerBaseComponent} from '../pickerBase.component';\nimport {YearPickerCssClasses} from './yearPicker.interfaces';\n\n/**\n * Default styles for picker\n */\nconst defaultStyles: YearPickerCssClasses =\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 year picker\n */\n@Component(\n{\n    selector: 'date-time-year-picker',\n    templateUrl: 'yearPicker.component.html',\n    styleUrls: ['yearPicker.component.css'],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DateTimeYearPickerComponent<TDate = any> extends PickerBaseComponent<TDate, YearData<TDate>, YearPickerCssClasses> implements DateTimePicker<TDate, YearPickerCssClasses>\n{\n    //######################### public properties - template bindings #########################\n\n    /**\n     * Displayed decade period\n     * @internal\n     */\n    public period: 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    }\n\n    //######################### public methods - template bindings #########################\n\n    /**\n     * Changes displayed decade to next decade\n     * @param event - Event that occured\n     * @internal\n     */\n    public nextDecade(event: Event)\n    {\n        event.preventDefault();\n        this.displayDate!.addYears(10);\n\n        this.display(this.displayDate!);\n    }\n\n    /**\n     * Changes displayed decade to previous decade\n     * @param event - Event that occured\n     * @internal\n     */\n    public previousDecade(event: Event)\n    {\n        event.preventDefault();\n        this.displayDate!.subtractYears(10);\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        let year = this.displayDate.startOfYear().year();\n\n        while(year % 10 !== 0)\n        {\n            year--;\n        }\n\n        this.displayDate.year(year).updateOriginal();\n\n        this.periodData = [];\n\n        for(let x = 0; x < 10; x++)\n        {\n            this.periodData.push(\n            {\n                active: false,\n                disabled: false,\n                date: this.displayDate.value,\n                value: year\n            });\n\n            year++;\n            this.displayDate.addYears(1);\n        }\n\n        this.displayDate.resetOriginal();\n        this._updateMinMax();\n        this.period = `${this.displayDate.year()} - ${this.displayDate.year() + 10}`;\n\n        //set value if exists\n        if(this._value && (this.displayDate.isSameDecade(this._value.from) || this.displayDate.isSameDecade(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).endOfYear().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.isSameDecade(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.isSameYear(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.year() % 10];\n    }\n}","<div [ngClass]=\"cssClasses?.periodSelection | asRequiredType\">\r\n    <div [ngClass]=\"cssClasses?.previousPeriod | asRequiredType\" (mousedown)=\"previousDecade($event)\"></div>\r\n    <div [ngClass]=\"cssClasses?.periodValue | asRequiredType\" [class.clickable]=\"canGoUp\" (mousedown)=\"goUp($event)\">{{period}}</div>\r\n    <div [ngClass]=\"cssClasses?.nextPeriod | asRequiredType\" (mousedown)=\"nextDecade($event)\"></div>\r\n</div>\r\n\r\n<div [ngClass]=\"cssClasses?.periodData | asRequiredType\">\r\n    <div *ngFor=\"let year of periodData\"\r\n         [ngClass]=\"cssClasses?.periodDatum | asRequiredType\"\r\n         [class.active]=\"year.active\"\r\n         [class.disabled]=\"year.disabled\"\r\n         (mousedown)=\"select($event, year)\">{{year.value}}</div>\r\n</div>"]}
+{"version":3,"file":"yearPicker.component.js","sourceRoot":"","sources":["../../../../../src/picker/components/yearPicker/yearPicker.component.ts","../../../../../src/picker/components/yearPicker/yearPicker.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, PeriodData, YearData} from '../../misc/datetimePicker.interface';\nimport {PickerBaseComponent} from '../pickerBase.component';\nimport {YearPickerCssClasses} from './yearPicker.interfaces';\n\n/**\n * Default styles for picker\n */\nconst defaultStyles: YearPickerCssClasses =\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    clickable: 'clickable'\n};\n\n/**\n * Component used for displaying year picker\n */\n@Component(\n{\n    selector: 'date-time-year-picker',\n    templateUrl: 'yearPicker.component.html',\n    styleUrls: ['yearPicker.component.css'],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DateTimeYearPickerComponent<TDate = any> extends PickerBaseComponent<TDate, YearData<TDate>, YearPickerCssClasses> implements DateTimePicker<TDate, YearPickerCssClasses>\n{\n    //######################### public properties - template bindings #########################\n\n    /**\n     * Displayed decade period\n     * @internal\n     */\n    public period: 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    }\n\n    //######################### public methods - template bindings #########################\n\n    /**\n     * Changes displayed decade to next decade\n     * @param event - Event that occured\n     * @internal\n     */\n    public nextDecade(event: Event)\n    {\n        event.preventDefault();\n        this.displayDate!.addYears(10);\n\n        this.display(this.displayDate!);\n    }\n\n    /**\n     * Changes displayed decade to previous decade\n     * @param event - Event that occured\n     * @internal\n     */\n    public previousDecade(event: Event)\n    {\n        event.preventDefault();\n        this.displayDate!.subtractYears(10);\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        let year = this.displayDate.startOfYear().year();\n\n        while(year % 10 !== 0)\n        {\n            year--;\n        }\n\n        this.displayDate.year(year).updateOriginal();\n\n        this.periodData = [];\n\n        for(let x = 0; x < 10; x++)\n        {\n            this.periodData.push(\n            {\n                active: false,\n                disabled: false,\n                date: this.displayDate.value,\n                value: year\n            });\n\n            year++;\n            this.displayDate.addYears(1);\n        }\n\n        this.displayDate.resetOriginal();\n        this._updateMinMax();\n        this.period = `${this.displayDate.year()} - ${this.displayDate.year() + 10}`;\n\n        //set value if exists\n        if(this._value && (this.displayDate.isSameDecade(this._value.from) || this.displayDate.isSameDecade(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).endOfYear().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.isSameDecade(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.isSameYear(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.year() % 10];\n    }\n}","<div [ngClass]=\"cssClasses?.periodSelection | asRequired\">\r\n    <div [ngClass]=\"cssClasses?.previousPeriod | asRequired\" (mousedown)=\"previousDecade($event)\"></div>\r\n    <div [ngClass]=\"cssClasses?.periodValue | asRequired\" [class.clickable]=\"canGoUp\" (mousedown)=\"goUp($event)\">{{period}}</div>\r\n    <div [ngClass]=\"cssClasses?.nextPeriod | asRequired\" (mousedown)=\"nextDecade($event)\"></div>\r\n</div>\r\n\r\n<div [ngClass]=\"cssClasses?.periodData | asRequired\">\r\n    <div *ngFor=\"let year of periodData\"\r\n         [ngClass]=\"cssClasses?.periodDatum | asRequired\"\r\n         [class.active]=\"year.active\"\r\n         [class.disabled]=\"year.disabled\"\r\n         (mousedown)=\"select($event, year)\">{{year.value}}</div>\r\n</div>"]}

package/es2020/src/picker/directives/index.js

@@ -0,0 +1,4 @@
+export * from './loopScroll/loopScroll.directive';
+export * from './loopScroll/loopScroll.interface';
+export * from './loopScrollData/loopScrollData.directive';
+//# sourceMappingURL=index.js.map

package/es2020/src/picker/directives/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/picker/directives/index.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAC;AAClD,cAAc,mCAAmC,CAAC;AAClD,cAAc,2CAA2C,CAAC","sourcesContent":["export * from './loopScroll/loopScroll.directive';\nexport * from './loopScroll/loopScroll.interface';\nexport * from './loopScrollData/loopScrollData.directive';\n"]}

package/es2020/src/picker/directives/loopScroll/loopScroll.directive.js

@@ -0,0 +1,191 @@
+import { __decorate, __metadata } from "tslib";
+import { ContentChildren, Directive, ElementRef, EventEmitter, Input, Output, QueryList } from '@angular/core';
+import { BindThis, isBlank, DebounceCall, nameof } from '@jscrpt/common';
+import { LoopScrollDataDirective } from '../loopScrollData/loopScrollData.directive';
+import * as i0 from "@angular/core";
+/**
+ * Renders loop scroll for array of elements
+ */
+export class LoopScrollDirective {
+    //######################### constructor #########################
+    constructor(_scrollElement) {
+        this._scrollElement = _scrollElement;
+        /**
+         * Indication whether is loop scroll initialized
+         */
+        this._initialized = false;
+        /**
+         * Indication whether is opening active
+         */
+        this._opening = false;
+        /**
+         * Indication whether is currently selection scroll open
+         */
+        this.open = false;
+        //######################### public properties - outputs #########################
+        /**
+         * Occurs when current value of loop scroll changes
+         */
+        this.valueChange = new EventEmitter();
+    }
+    //######################### public methods - implementation of OnChanges #########################
+    /**
+     * Called when input value changes
+     */
+    ngOnChanges(changes) {
+        if (!this._initialized) {
+            return;
+        }
+        const itemHeight = this._itemHeight ?? 1;
+        if (nameof('open') in changes) {
+            let scrollOffset = this._scrollElement.nativeElement.scrollTop + (2 * itemHeight);
+            if (nameof('value') in changes) {
+                const selectedItem = this._items?.find(itm => itm.data == this.value);
+                if (!selectedItem) {
+                    throw new Error('No item selected in loop scroll');
+                }
+                const selectedIndex = this._items.indexOf(selectedItem);
+                scrollOffset = selectedIndex * itemHeight;
+            }
+            if (this.open) {
+                this._opening = true;
+                this._scrollElement.nativeElement.scrollTo({ top: this._scrollElement.nativeElement.scrollTop - (2 * itemHeight), behavior: 'auto' });
+            }
+            else {
+                this._scrollElement.nativeElement.scrollTo({ top: scrollOffset, behavior: 'auto' });
+            }
+            setTimeout(() => this._opening = false, 300);
+        }
+    }
+    //######################### public methods - implementation of AfterContentInit #########################
+    /**
+     * Called when content was initialized
+     */
+    ngAfterContentInit() {
+        this._items = this.items?.toArray();
+        if (!this._items?.length) {
+            this.items?.changes.subscribe(() => {
+                this._items = this.items?.toArray();
+                this._initialize();
+            });
+            return;
+        }
+        this._initialize();
+    }
+    //######################### public methods - implementation of OnDestroy #########################
+    /**
+     * Called when component is destroyed
+     */
+    ngOnDestroy() {
+        this._scrollElement.nativeElement.removeEventListener('scroll', this._handleScroll);
+    }
+    //######################### protected methods #########################
+    /**
+     * Intialize default value
+     */
+    _initialize() {
+        if (!this._items?.length) {
+            return;
+        }
+        this._items.forEach(itm => {
+            if (isBlank(this._itemHeight)) {
+                this._itemHeight = itm.element.nativeElement.offsetHeight;
+                return;
+            }
+            if (this._itemHeight != itm.element.nativeElement.offsetHeight) {
+                throw new Error('All items inside of loop scroll should have same height');
+            }
+        });
+        this._centerActiveValue();
+        this._scrollElement.nativeElement.addEventListener('scroll', this._handleScroll);
+        this._initialized = true;
+    }
+    /**
+     * Reorders items to make number of items around scroll view equally sized
+     */
+    _reorderItems() {
+        const scrollOffset = this._scrollElement.nativeElement.scrollTop;
+        const scrollHeight = this._scrollElement.nativeElement.scrollHeight;
+        const scrollableHeight = scrollHeight - (5 * (this._itemHeight ?? 0));
+        const scrollMid = scrollableHeight / 2;
+        const threshold = scrollableHeight * .25;
+        let reorderOffset = null;
+        //reorder items
+        if (scrollOffset <= scrollMid - threshold ||
+            scrollOffset >= scrollMid + threshold) {
+            reorderOffset = scrollMid - scrollOffset;
+        }
+        else {
+            return;
+        }
+        //move end items to start
+        if (reorderOffset >= 0) {
+            const numberOfItems = Math.floor(reorderOffset / (this._itemHeight ?? 1));
+            const movedItems = this._items?.splice(this._items.length - numberOfItems, numberOfItems);
+            movedItems?.reverse().forEach(itm => {
+                this._scrollElement.nativeElement.prepend(itm.element.nativeElement);
+                this._items?.unshift(itm);
+            });
+        }
+        //move start items to end
+        else {
+            const numberOfItems = Math.floor((reorderOffset * -1) / (this._itemHeight ?? 1));
+            const movedItems = this._items?.splice(0, numberOfItems);
+            movedItems?.forEach(itm => {
+                this._scrollElement.nativeElement.append(itm.element.nativeElement);
+                this._items?.push(itm);
+            });
+        }
+    }
+    /**
+     * Handles scroll event
+     */
+    _handleScroll() {
+        this._reorderItems();
+        const itemHeight = this._itemHeight ?? 1;
+        const index = Math.round(this._scrollElement.nativeElement.scrollTop / itemHeight);
+        this._scrollElement.nativeElement.scrollTo({ top: index * itemHeight, behavior: 'auto' });
+        if (!this._opening) {
+            this.valueChange.emit(this._items?.[this.open ? (index + 2) : index].data);
+        }
+    }
+    /**
+     * Centers active value
+     */
+    _centerActiveValue() {
+        const selectedItem = this._items?.find(itm => itm.data == this.value);
+        if (!selectedItem) {
+            throw new Error('No item selected in loop scroll');
+        }
+        selectedItem?.element.nativeElement.scrollIntoView({ block: 'center' });
+        this._reorderItems();
+        selectedItem?.element.nativeElement.scrollIntoView({ block: 'center' });
+    }
+}
+LoopScrollDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LoopScrollDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+LoopScrollDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: LoopScrollDirective, selector: "[loopScroll]", inputs: { value: ["loopScroll", "value"], open: "open" }, outputs: { valueChange: "loopScrollChange" }, queries: [{ propertyName: "items", predicate: LoopScrollDataDirective }], usesOnChanges: true, ngImport: i0 });
+__decorate([
+    BindThis,
+    DebounceCall(40),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], LoopScrollDirective.prototype, "_handleScroll", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LoopScrollDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[loopScroll]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { value: [{
+                type: Input,
+                args: ['loopScroll']
+            }], open: [{
+                type: Input
+            }], valueChange: [{
+                type: Output,
+                args: ['loopScrollChange']
+            }], items: [{
+                type: ContentChildren,
+                args: [LoopScrollDataDirective]
+            }], _handleScroll: [] } });
+//# sourceMappingURL=loopScroll.directive.js.map