@anglr/datetime 3.0.0-beta.20220328062817 → 3.0.0-beta.20220503131853

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

@@ -136,9 +136,9 @@ export class DateTimeRollerTimePickerComponent extends PickerImplBaseComponent {
     }
 }
 DateTimeRollerTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DateTimeRollerTimePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DateTimeRollerTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: DateTimeRollerTimePickerComponent, selector: "date-time-roller-time-picker", usesInheritance: true, ngImport: i0, template: "<div class=\"flex-row\" style=\"justify-content: center;\">\n     <div [class.clickable]=\"canGoUp\" (mousedown)=\"goUp($event)\">{{displayDate?.value | dateFormat: 'date'}}</div>\n</div>\n\n<div class=\"time-area\">\n    <div class=\"value-container\"\n         [clickOutside]=\"true\"\n         (clickOutsideChange)=\"hoursOpen = false\"\n         [clickOutsideElement]=\"hoursScroll\">\n        <div #hoursScroll\n             class=\"roller-scroll\"\n             [class.open]=\"hoursOpen\"\n             [loopScroll]=\"hour\"\n             [open]=\"hoursOpen\"\n             (loopScrollChange)=\"setHour(null, $event)\"\n             (click)=\"hoursOpen = !hoursOpen\" >\n            <div *ngFor=\"let hour of hours\"\n                 [loopScrollData]=\"hour?.data\"\n                 (click)=\"setHour($event, hour?.data)\">{{hour?.displayText}}</div>\n        </div>\n    </div>\n\n    <div class=\"minute-second-separator\">:</div>\n\n    <div class=\"value-container\"\n         [clickOutside]=\"true\"\n         (clickOutsideChange)=\"minutesOpen = false\"\n         [clickOutsideElement]=\"minutesScroll\">\n        <div #minutesScroll\n             class=\"roller-scroll\"\n             [class.open]=\"minutesOpen\"\n             [loopScroll]=\"minute\"\n             [open]=\"minutesOpen\"\n             (loopScrollChange)=\"setMinute(null, $event)\"\n             (click)=\"minutesOpen = !minutesOpen\">\n            <div *ngFor=\"let minute of minutes\"\n                 [loopScrollData]=\"minute?.data\"\n                 (click)=\"setMinute($event, minute?.data)\">{{minute?.displayText}}</div>\n        </div>\n    </div>\n</div>\n", styles: [".time-area\n{\n    display: flex;\n    flex-direction: row;\n    padding: 48px 64px;\n    font-size: 32px;\n}\n\n.value-container\n{\n    position: relative;\n    height: 1em;\n    width: 2ch;\n}\n\n.roller-scroll\n{\n    position: absolute;\n    line-height: 1em;\n    max-height: 1em;\n    overflow: scroll;\n    scrollbar-width: none;\n    top: 0;\n    background-color: #666666;\n    transition: all 250ms;\n    border-radius: 4px;\n}\n\n.roller-scroll.open\n{\n    max-height: 5em;\n    top: -2em;\n}\n\n.minute-second-separator\n{\n    margin-left: 12px;\n    margin-right: 12px;\n    line-height: 1em;\n}\n"], directives: [{ type: i1.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutside", "clickOutsideElement"], outputs: ["clickOutsideChange"] }, { type: i2.LoopScrollDirective, selector: "[loopScroll]", inputs: ["loopScroll", "open"], outputs: ["loopScrollChange"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.LoopScrollDataDirective, selector: "[loopScrollData]", inputs: ["loopScrollData"] }], pipes: { "dateFormat": i5.DateFormatPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DateTimeRollerTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: DateTimeRollerTimePickerComponent, selector: "date-time-roller-time-picker", usesInheritance: true, ngImport: i0, template: "<div class=\"flex-row\" style=\"justify-content: center;\">\n     <div [class.clickable]=\"canGoUp\" (mousedown)=\"goUp($event)\">{{displayDate?.value | dateFormat: 'date'}}</div>\n</div>\n\n<div class=\"time-area\">\n    <div class=\"value-container\"\n         [clickOutside]=\"true\"\n         (clickOutsideChange)=\"hoursOpen = false\"\n         [clickOutsideElement]=\"hoursScroll\">\n        <div #hoursScroll\n             class=\"roller-scroll\"\n             [class.open]=\"hoursOpen\"\n             [loopScroll]=\"hour\"\n             [open]=\"hoursOpen\"\n             (loopScrollChange)=\"setHour(null, $event)\"\n             (click)=\"hoursOpen = !hoursOpen\">\n            <div *ngFor=\"let hour of hours | slice: -9\"\n                 [loopScrollData]=\"hour?.data\"\n                 [clone]=\"true\"\n                 (click)=\"setHour($event, hour?.data)\">{{hour?.displayText}}</div>\n\n            <div *ngFor=\"let hour of hours\"\n                 [loopScrollData]=\"hour?.data\"\n                 (click)=\"setHour($event, hour?.data)\">{{hour?.displayText}}</div>\n\n            <div *ngFor=\"let hour of hours | slice: 0: 9\"\n                 [loopScrollData]=\"hour?.data\"\n                 [clone]=\"true\"\n                 (click)=\"setHour($event, hour?.data)\">{{hour?.displayText}}</div>\n        </div>\n    </div>\n\n    <div class=\"minute-second-separator\">:</div>\n\n    <div class=\"value-container\"\n         [clickOutside]=\"true\"\n         (clickOutsideChange)=\"minutesOpen = false\"\n         [clickOutsideElement]=\"minutesScroll\">\n        <div #minutesScroll\n             class=\"roller-scroll\"\n             [class.open]=\"minutesOpen\"\n             [loopScroll]=\"minute\"\n             [open]=\"minutesOpen\"\n             (loopScrollChange)=\"setMinute(null, $event)\"\n             (click)=\"minutesOpen = !minutesOpen\">\n            <div *ngFor=\"let minute of minutes | slice: -15\"\n                 [loopScrollData]=\"minute?.data\"\n                 [clone]=\"true\"\n                 (click)=\"setMinute($event, minute?.data)\">{{minute?.displayText}}</div>\n\n            <div *ngFor=\"let minute of minutes\"\n                 [loopScrollData]=\"minute?.data\"\n                 (click)=\"setMinute($event, minute?.data)\">{{minute?.displayText}}</div>\n\n            <div *ngFor=\"let minute of minutes | slice: 0: 15\"\n                 [loopScrollData]=\"minute?.data\"\n                 [clone]=\"true\"\n                 (click)=\"setMinute($event, minute?.data)\">{{minute?.displayText}}</div>\n        </div>\n    </div>\n</div>\n", styles: [".time-area\n{\n    display: flex;\n    flex-direction: row;\n    padding: 48px 64px;\n    font-size: 32px;\n}\n\n.value-container\n{\n    position: relative;\n    height: 1em;\n    width: 2ch;\n}\n\n.roller-scroll\n{\n    position: absolute;\n    line-height: 1em;\n    max-height: 1em;\n    overflow: scroll;\n    scrollbar-width: none;\n    top: 0;\n    background-color: #666666;\n    transition: all 250ms;\n    border-radius: 4px;\n    scroll-snap-type: y mandatory;\n    contain: content;\n}\n\n.roller-scroll::-webkit-scrollbar\n{\n    display: none;\n}\n\n.roller-scroll>div\n{\n    scroll-snap-align: start;\n}\n\n.roller-scroll.open\n{\n    max-height: 5em;\n    top: -2em;\n}\n\n.minute-second-separator\n{\n    margin-left: 12px;\n    margin-right: 12px;\n    line-height: 1em;\n}\n"], directives: [{ type: i1.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutside", "clickOutsideElement"], outputs: ["clickOutsideChange"] }, { type: i2.LoopScrollDirective, selector: "[loopScroll]", inputs: ["loopScroll", "open"], outputs: ["loopScrollChange"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.LoopScrollDataDirective, selector: "[loopScrollData]", inputs: ["loopScrollData", "clone"] }], pipes: { "dateFormat": i5.DateFormatPipe, "slice": i3.SlicePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DateTimeRollerTimePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'date-time-roller-time-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex-row\" style=\"justify-content: center;\">\n     <div [class.clickable]=\"canGoUp\" (mousedown)=\"goUp($event)\">{{displayDate?.value | dateFormat: 'date'}}</div>\n</div>\n\n<div class=\"time-area\">\n    <div class=\"value-container\"\n         [clickOutside]=\"true\"\n         (clickOutsideChange)=\"hoursOpen = false\"\n         [clickOutsideElement]=\"hoursScroll\">\n        <div #hoursScroll\n             class=\"roller-scroll\"\n             [class.open]=\"hoursOpen\"\n             [loopScroll]=\"hour\"\n             [open]=\"hoursOpen\"\n             (loopScrollChange)=\"setHour(null, $event)\"\n             (click)=\"hoursOpen = !hoursOpen\" >\n            <div *ngFor=\"let hour of hours\"\n                 [loopScrollData]=\"hour?.data\"\n                 (click)=\"setHour($event, hour?.data)\">{{hour?.displayText}}</div>\n        </div>\n    </div>\n\n    <div class=\"minute-second-separator\">:</div>\n\n    <div class=\"value-container\"\n         [clickOutside]=\"true\"\n         (clickOutsideChange)=\"minutesOpen = false\"\n         [clickOutsideElement]=\"minutesScroll\">\n        <div #minutesScroll\n             class=\"roller-scroll\"\n             [class.open]=\"minutesOpen\"\n             [loopScroll]=\"minute\"\n             [open]=\"minutesOpen\"\n             (loopScrollChange)=\"setMinute(null, $event)\"\n             (click)=\"minutesOpen = !minutesOpen\">\n            <div *ngFor=\"let minute of minutes\"\n                 [loopScrollData]=\"minute?.data\"\n                 (click)=\"setMinute($event, minute?.data)\">{{minute?.displayText}}</div>\n        </div>\n    </div>\n</div>\n", styles: [".time-area\n{\n    display: flex;\n    flex-direction: row;\n    padding: 48px 64px;\n    font-size: 32px;\n}\n\n.value-container\n{\n    position: relative;\n    height: 1em;\n    width: 2ch;\n}\n\n.roller-scroll\n{\n    position: absolute;\n    line-height: 1em;\n    max-height: 1em;\n    overflow: scroll;\n    scrollbar-width: none;\n    top: 0;\n    background-color: #666666;\n    transition: all 250ms;\n    border-radius: 4px;\n}\n\n.roller-scroll.open\n{\n    max-height: 5em;\n    top: -2em;\n}\n\n.minute-second-separator\n{\n    margin-left: 12px;\n    margin-right: 12px;\n    line-height: 1em;\n}\n"] }]
+            args: [{ selector: 'date-time-roller-time-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex-row\" style=\"justify-content: center;\">\n     <div [class.clickable]=\"canGoUp\" (mousedown)=\"goUp($event)\">{{displayDate?.value | dateFormat: 'date'}}</div>\n</div>\n\n<div class=\"time-area\">\n    <div class=\"value-container\"\n         [clickOutside]=\"true\"\n         (clickOutsideChange)=\"hoursOpen = false\"\n         [clickOutsideElement]=\"hoursScroll\">\n        <div #hoursScroll\n             class=\"roller-scroll\"\n             [class.open]=\"hoursOpen\"\n             [loopScroll]=\"hour\"\n             [open]=\"hoursOpen\"\n             (loopScrollChange)=\"setHour(null, $event)\"\n             (click)=\"hoursOpen = !hoursOpen\">\n            <div *ngFor=\"let hour of hours | slice: -9\"\n                 [loopScrollData]=\"hour?.data\"\n                 [clone]=\"true\"\n                 (click)=\"setHour($event, hour?.data)\">{{hour?.displayText}}</div>\n\n            <div *ngFor=\"let hour of hours\"\n                 [loopScrollData]=\"hour?.data\"\n                 (click)=\"setHour($event, hour?.data)\">{{hour?.displayText}}</div>\n\n            <div *ngFor=\"let hour of hours | slice: 0: 9\"\n                 [loopScrollData]=\"hour?.data\"\n                 [clone]=\"true\"\n                 (click)=\"setHour($event, hour?.data)\">{{hour?.displayText}}</div>\n        </div>\n    </div>\n\n    <div class=\"minute-second-separator\">:</div>\n\n    <div class=\"value-container\"\n         [clickOutside]=\"true\"\n         (clickOutsideChange)=\"minutesOpen = false\"\n         [clickOutsideElement]=\"minutesScroll\">\n        <div #minutesScroll\n             class=\"roller-scroll\"\n             [class.open]=\"minutesOpen\"\n             [loopScroll]=\"minute\"\n             [open]=\"minutesOpen\"\n             (loopScrollChange)=\"setMinute(null, $event)\"\n             (click)=\"minutesOpen = !minutesOpen\">\n            <div *ngFor=\"let minute of minutes | slice: -15\"\n                 [loopScrollData]=\"minute?.data\"\n                 [clone]=\"true\"\n                 (click)=\"setMinute($event, minute?.data)\">{{minute?.displayText}}</div>\n\n            <div *ngFor=\"let minute of minutes\"\n                 [loopScrollData]=\"minute?.data\"\n                 (click)=\"setMinute($event, minute?.data)\">{{minute?.displayText}}</div>\n\n            <div *ngFor=\"let minute of minutes | slice: 0: 15\"\n                 [loopScrollData]=\"minute?.data\"\n                 [clone]=\"true\"\n                 (click)=\"setMinute($event, minute?.data)\">{{minute?.displayText}}</div>\n        </div>\n    </div>\n</div>\n", styles: [".time-area\n{\n    display: flex;\n    flex-direction: row;\n    padding: 48px 64px;\n    font-size: 32px;\n}\n\n.value-container\n{\n    position: relative;\n    height: 1em;\n    width: 2ch;\n}\n\n.roller-scroll\n{\n    position: absolute;\n    line-height: 1em;\n    max-height: 1em;\n    overflow: scroll;\n    scrollbar-width: none;\n    top: 0;\n    background-color: #666666;\n    transition: all 250ms;\n    border-radius: 4px;\n    scroll-snap-type: y mandatory;\n    contain: content;\n}\n\n.roller-scroll::-webkit-scrollbar\n{\n    display: none;\n}\n\n.roller-scroll>div\n{\n    scroll-snap-align: start;\n}\n\n.roller-scroll.open\n{\n    max-height: 5em;\n    top: -2em;\n}\n\n.minute-second-separator\n{\n    margin-left: 12px;\n    margin-right: 12px;\n    line-height: 1em;\n}\n"] }]
         }] });
 //# sourceMappingURL=rollerTimePicker.component.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"rollerTimePicker.component.js","sourceRoot":"","sources":["../../../../../src/picker/components/rollerTimePicker/rollerTimePicker.component.ts","../../../../../src/picker/components/rollerTimePicker/rollerTimePicker.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy} from '@angular/core';\n\nimport {DateTimeValue} from '../../../misc/datetime.interface';\nimport {DateApiObject} from '../../../services';\nimport {LoopScrollData} from '../../directives';\nimport {DateTimePicker} from '../../interfaces';\nimport {PickerImplBaseComponent} from '../pickerImplBase.component';\nimport {hours, minutes} from './rollerTimePicker.data';\nimport {RollerTimePickerCssClasses} from './rollerTimePicker.interface';\n\n/**\n * Component used for rendering roller time picker\n */\n@Component(\n{\n    selector: 'date-time-roller-time-picker',\n    templateUrl: 'rollerTimePicker.component.html',\n    styleUrls: ['rollerTimePicker.component.css'],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DateTimeRollerTimePickerComponent<TDate = any> extends PickerImplBaseComponent<TDate, RollerTimePickerCssClasses> implements DateTimePicker<TDate, RollerTimePickerCssClasses>\n{\n    //######################### public properties - template bindings #########################\n\n    /**\n     * Array of available hours\n     */\n    public hours: LoopScrollData[] = hours;\n\n    /**\n     * Array of available minutes\n     */\n    public minutes: LoopScrollData[] = minutes;\n\n    /**\n     * Indication whether are minutes open\n     */\n    public minutesOpen: boolean = false;\n\n    /**\n     * Indication whether are hours open\n     */\n    public hoursOpen: boolean = false;\n\n    /**\n     * Current value of hour\n     */\n    public get hour(): number\n    {\n        return this.displayDate?.hour() ?? 0;\n    }\n    public set hour(value: number)\n    {\n        this.displayDate?.hour(value);\n    }\n\n    /**\n     * Current value of minute\n     */\n    public get minute(): number\n    {\n        return this.displayDate?.minute() ?? 0;\n    }\n    public set minute(value: number)\n    {\n        this.displayDate?.minute(value);\n    }\n\n    //######################### public methods - implementation of PickerBaseComponent #########################\n    \n    /**\n     * @inheritdoc\n     */\n    public display(value: DateApiObject<TDate>): void\n    {\n        this.displayDate = value;\n    }\n\n    /**\n     * @inheritdoc\n     */\n    public setMinValue(_value: TDate | null): void\n    {\n    }\n\n    /**\n     * @inheritdoc\n     */\n    public setMaxValue(_value: TDate | null): void\n    {\n    }\n\n    /**\n     * @inheritdoc\n     */\n    public setValue(_value: DateTimeValue<TDate> | null): void\n    {\n    }\n\n    //######################### public methods - template bindings #########################\n\n    /**\n     * Sets hour\n     * @param event - Mouse event that was triggered\n     * @param value - Value to be set as hour\n     * @returns \n     */\n    public setHour<TData = any>(event: MouseEvent|null, value: TData): void\n    {\n        if(!this.hoursOpen && event)\n        {\n            return;\n        }\n\n        event?.stopPropagation();\n        event?.preventDefault();\n\n        if(this.hour == value as unknown as number)\n        {\n            return;\n        }\n\n        this.hour = value as unknown as number;\n        \n        if(event)\n        {\n            this.hoursOpen = false;\n        }\n\n        if(this.displayDate)\n        {\n            this._value =\n            {\n                from: this.displayDate?.value,\n                to: this.displayDate?.value\n            };\n\n            this._valueChange.next();\n        }\n    }\n\n    /**\n     * Sets minute\n     * @param event - Mouse event that was triggered\n     * @param value - Value to be set as minute\n     * @returns \n     */\n    public setMinute<TData = any>(event: MouseEvent|null, value: TData): void\n    {\n        if(!this.minutesOpen && event)\n        {\n            return;\n        }\n\n        event?.stopPropagation();\n        event?.preventDefault();\n\n        if(this.minute == value as unknown as number)\n        {\n            return;\n        }\n\n        this.minute = value as unknown as number;\n        \n        if(event)\n        {\n            this.minutesOpen = false;\n        }\n\n        if(this.displayDate)\n        {\n            this._value =\n            {\n                from: this.displayDate?.value,\n                to: this.displayDate?.value\n            };\n\n            this._valueChange.next();\n        }\n    }\n}","<div class=\"flex-row\" style=\"justify-content: center;\">\n     <div [class.clickable]=\"canGoUp\" (mousedown)=\"goUp($event)\">{{displayDate?.value | dateFormat: 'date'}}</div>\n</div>\n\n<div class=\"time-area\">\n    <div class=\"value-container\"\n         [clickOutside]=\"true\"\n         (clickOutsideChange)=\"hoursOpen = false\"\n         [clickOutsideElement]=\"hoursScroll\">\n        <div #hoursScroll\n             class=\"roller-scroll\"\n             [class.open]=\"hoursOpen\"\n             [loopScroll]=\"hour\"\n             [open]=\"hoursOpen\"\n             (loopScrollChange)=\"setHour(null, $event)\"\n             (click)=\"hoursOpen = !hoursOpen\" >\n            <div *ngFor=\"let hour of hours\"\n                 [loopScrollData]=\"hour?.data\"\n                 (click)=\"setHour($event, hour?.data)\">{{hour?.displayText}}</div>\n        </div>\n    </div>\n\n    <div class=\"minute-second-separator\">:</div>\n\n    <div class=\"value-container\"\n         [clickOutside]=\"true\"\n         (clickOutsideChange)=\"minutesOpen = false\"\n         [clickOutsideElement]=\"minutesScroll\">\n        <div #minutesScroll\n             class=\"roller-scroll\"\n             [class.open]=\"minutesOpen\"\n             [loopScroll]=\"minute\"\n             [open]=\"minutesOpen\"\n             (loopScrollChange)=\"setMinute(null, $event)\"\n             (click)=\"minutesOpen = !minutesOpen\">\n            <div *ngFor=\"let minute of minutes\"\n                 [loopScrollData]=\"minute?.data\"\n                 (click)=\"setMinute($event, minute?.data)\">{{minute?.displayText}}</div>\n        </div>\n    </div>\n</div>\n"]}
+{"version":3,"file":"rollerTimePicker.component.js","sourceRoot":"","sources":["../../../../../src/picker/components/rollerTimePicker/rollerTimePicker.component.ts","../../../../../src/picker/components/rollerTimePicker/rollerTimePicker.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy} from '@angular/core';\n\nimport {DateTimeValue} from '../../../misc/datetime.interface';\nimport {DateApiObject} from '../../../services';\nimport {LoopScrollData} from '../../directives';\nimport {DateTimePicker} from '../../interfaces';\nimport {PickerImplBaseComponent} from '../pickerImplBase.component';\nimport {hours, minutes} from './rollerTimePicker.data';\nimport {RollerTimePickerCssClasses} from './rollerTimePicker.interface';\n\n/**\n * Component used for rendering roller time picker\n */\n@Component(\n{\n    selector: 'date-time-roller-time-picker',\n    templateUrl: 'rollerTimePicker.component.html',\n    styleUrls: ['rollerTimePicker.component.css'],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DateTimeRollerTimePickerComponent<TDate = any> extends PickerImplBaseComponent<TDate, RollerTimePickerCssClasses> implements DateTimePicker<TDate, RollerTimePickerCssClasses>\n{\n    //######################### public properties - template bindings #########################\n\n    /**\n     * Array of available hours\n     */\n    public hours: LoopScrollData[] = hours;\n\n    /**\n     * Array of available minutes\n     */\n    public minutes: LoopScrollData[] = minutes;\n\n    /**\n     * Indication whether are minutes open\n     */\n    public minutesOpen: boolean = false;\n\n    /**\n     * Indication whether are hours open\n     */\n    public hoursOpen: boolean = false;\n\n    /**\n     * Current value of hour\n     */\n    public get hour(): number\n    {\n        return this.displayDate?.hour() ?? 0;\n    }\n    public set hour(value: number)\n    {\n        this.displayDate?.hour(value);\n    }\n\n    /**\n     * Current value of minute\n     */\n    public get minute(): number\n    {\n        return this.displayDate?.minute() ?? 0;\n    }\n    public set minute(value: number)\n    {\n        this.displayDate?.minute(value);\n    }\n\n    //######################### public methods - implementation of PickerBaseComponent #########################\n    \n    /**\n     * @inheritdoc\n     */\n    public display(value: DateApiObject<TDate>): void\n    {\n        this.displayDate = value;\n    }\n\n    /**\n     * @inheritdoc\n     */\n    public setMinValue(_value: TDate | null): void\n    {\n    }\n\n    /**\n     * @inheritdoc\n     */\n    public setMaxValue(_value: TDate | null): void\n    {\n    }\n\n    /**\n     * @inheritdoc\n     */\n    public setValue(_value: DateTimeValue<TDate> | null): void\n    {\n    }\n\n    //######################### public methods - template bindings #########################\n\n    /**\n     * Sets hour\n     * @param event - Mouse event that was triggered\n     * @param value - Value to be set as hour\n     * @returns \n     */\n    public setHour<TData = any>(event: MouseEvent|null, value: TData): void\n    {\n        if(!this.hoursOpen && event)\n        {\n            return;\n        }\n\n        event?.stopPropagation();\n        event?.preventDefault();\n\n        if(this.hour == value as unknown as number)\n        {\n            return;\n        }\n\n        this.hour = value as unknown as number;\n        \n        if(event)\n        {\n            this.hoursOpen = false;\n        }\n\n        if(this.displayDate)\n        {\n            this._value =\n            {\n                from: this.displayDate?.value,\n                to: this.displayDate?.value\n            };\n\n            this._valueChange.next();\n        }\n    }\n\n    /**\n     * Sets minute\n     * @param event - Mouse event that was triggered\n     * @param value - Value to be set as minute\n     * @returns \n     */\n    public setMinute<TData = any>(event: MouseEvent|null, value: TData): void\n    {\n        if(!this.minutesOpen && event)\n        {\n            return;\n        }\n\n        event?.stopPropagation();\n        event?.preventDefault();\n\n        if(this.minute == value as unknown as number)\n        {\n            return;\n        }\n\n        this.minute = value as unknown as number;\n        \n        if(event)\n        {\n            this.minutesOpen = false;\n        }\n\n        if(this.displayDate)\n        {\n            this._value =\n            {\n                from: this.displayDate?.value,\n                to: this.displayDate?.value\n            };\n\n            this._valueChange.next();\n        }\n    }\n}","<div class=\"flex-row\" style=\"justify-content: center;\">\n     <div [class.clickable]=\"canGoUp\" (mousedown)=\"goUp($event)\">{{displayDate?.value | dateFormat: 'date'}}</div>\n</div>\n\n<div class=\"time-area\">\n    <div class=\"value-container\"\n         [clickOutside]=\"true\"\n         (clickOutsideChange)=\"hoursOpen = false\"\n         [clickOutsideElement]=\"hoursScroll\">\n        <div #hoursScroll\n             class=\"roller-scroll\"\n             [class.open]=\"hoursOpen\"\n             [loopScroll]=\"hour\"\n             [open]=\"hoursOpen\"\n             (loopScrollChange)=\"setHour(null, $event)\"\n             (click)=\"hoursOpen = !hoursOpen\">\n            <div *ngFor=\"let hour of hours | slice: -9\"\n                 [loopScrollData]=\"hour?.data\"\n                 [clone]=\"true\"\n                 (click)=\"setHour($event, hour?.data)\">{{hour?.displayText}}</div>\n\n            <div *ngFor=\"let hour of hours\"\n                 [loopScrollData]=\"hour?.data\"\n                 (click)=\"setHour($event, hour?.data)\">{{hour?.displayText}}</div>\n\n            <div *ngFor=\"let hour of hours | slice: 0: 9\"\n                 [loopScrollData]=\"hour?.data\"\n                 [clone]=\"true\"\n                 (click)=\"setHour($event, hour?.data)\">{{hour?.displayText}}</div>\n        </div>\n    </div>\n\n    <div class=\"minute-second-separator\">:</div>\n\n    <div class=\"value-container\"\n         [clickOutside]=\"true\"\n         (clickOutsideChange)=\"minutesOpen = false\"\n         [clickOutsideElement]=\"minutesScroll\">\n        <div #minutesScroll\n             class=\"roller-scroll\"\n             [class.open]=\"minutesOpen\"\n             [loopScroll]=\"minute\"\n             [open]=\"minutesOpen\"\n             (loopScrollChange)=\"setMinute(null, $event)\"\n             (click)=\"minutesOpen = !minutesOpen\">\n            <div *ngFor=\"let minute of minutes | slice: -15\"\n                 [loopScrollData]=\"minute?.data\"\n                 [clone]=\"true\"\n                 (click)=\"setMinute($event, minute?.data)\">{{minute?.displayText}}</div>\n\n            <div *ngFor=\"let minute of minutes\"\n                 [loopScrollData]=\"minute?.data\"\n                 (click)=\"setMinute($event, minute?.data)\">{{minute?.displayText}}</div>\n\n            <div *ngFor=\"let minute of minutes | slice: 0: 15\"\n                 [loopScrollData]=\"minute?.data\"\n                 [clone]=\"true\"\n                 (click)=\"setMinute($event, minute?.data)\">{{minute?.displayText}}</div>\n        </div>\n    </div>\n</div>\n"]}

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

@@ -1,6 +1,6 @@
 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 { ContentChildren, Directive, ElementRef, EventEmitter, HostListener, Input, Output, QueryList } from '@angular/core';
+import { DebounceCall, isBlank, nameof } from '@jscrpt/common';
 import { LoopScrollDataDirective } from '../loopScrollData/loopScrollData.directive';
 import * as i0 from "@angular/core";
 /**
@@ -15,9 +15,9 @@ export class LoopScrollDirective {
          */
         this._initialized = false;
         /**
-         * Indication whether is opening active
+         * Count of cloned elements before or after
          */
-        this._opening = false;
+        this._clonedCount = 0;
         /**
          * Indication whether is currently selection scroll open
          */
@@ -39,23 +39,21 @@ export class LoopScrollDirective {
         }
         const itemHeight = (_a = this._itemHeight) !== null && _a !== void 0 ? _a : 1;
         if (nameof('open') in changes) {
-            let scrollOffset = this._scrollElement.nativeElement.scrollTop + (2 * itemHeight);
+            if (this.open) {
+                this._scrollElement.nativeElement.scrollTo({ top: this._scrollElement.nativeElement.scrollTop - (2 * itemHeight), behavior: 'auto' });
+                return;
+            }
             if (nameof('value') in changes) {
-                const selectedItem = (_b = this._items) === null || _b === void 0 ? void 0 : _b.find(itm => itm.data == this.value);
+                const selectedItem = (_b = this._dataItems) === null || _b === void 0 ? void 0 : _b.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' });
+                const selectedIndex = this._dataItems.indexOf(selectedItem);
+                this._scrollElement.nativeElement.scrollTo({ top: (selectedIndex + this._clonedCount) * itemHeight, behavior: 'auto' });
             }
             else {
-                this._scrollElement.nativeElement.scrollTo({ top: scrollOffset, behavior: 'auto' });
+                this._scrollElement.nativeElement.scrollTo({ top: this._scrollElement.nativeElement.scrollTop + (2 * itemHeight), behavior: 'auto' });
             }
-            setTimeout(() => this._opening = false, 300);
         }
     }
     //######################### public methods - implementation of AfterContentInit #########################
@@ -63,35 +61,32 @@ export class LoopScrollDirective {
      * Called when content was initialized
      */
     ngAfterContentInit() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         this._items = (_a = this.items) === null || _a === void 0 ? void 0 : _a.toArray();
-        if (!((_b = this._items) === null || _b === void 0 ? void 0 : _b.length)) {
-            (_c = this.items) === null || _c === void 0 ? void 0 : _c.changes.subscribe(() => {
-                var _a;
+        this._dataItems = (_b = this._items) === null || _b === void 0 ? void 0 : _b.filter(itm => !itm.clone);
+        if (!((_c = this._dataItems) === null || _c === void 0 ? void 0 : _c.length)) {
+            (_d = this.items) === null || _d === void 0 ? void 0 : _d.changes.subscribe(() => {
+                var _a, _b;
                 this._items = (_a = this.items) === null || _a === void 0 ? void 0 : _a.toArray();
+                this._dataItems = (_b = this._items) === null || _b === void 0 ? void 0 : _b.filter(itm => !itm.clone);
                 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() {
-        var _a;
-        if (!((_a = this._items) === null || _a === void 0 ? void 0 : _a.length)) {
+        var _a, _b, _c;
+        const cloned = (_b = (_a = this._items) === null || _a === void 0 ? void 0 : _a.filter(itm => itm.clone)) !== null && _b !== void 0 ? _b : [];
+        this._clonedCount = cloned.length / 2;
+        if (!((_c = this._dataItems) === null || _c === void 0 ? void 0 : _c.length)) {
             return;
         }
-        this._items.forEach(itm => {
+        this._dataItems.forEach(itm => {
             if (isBlank(this._itemHeight)) {
                 this._itemHeight = itm.element.nativeElement.offsetHeight;
                 return;
@@ -100,86 +95,49 @@ export class LoopScrollDirective {
                 throw new Error('All items inside of loop scroll should have same height');
             }
         });
-        this._centerActiveValue();
-        this._scrollElement.nativeElement.addEventListener('scroll', this._handleScroll);
+        this._scrollElement.nativeElement.scrollTo({ top: this._itemHeight * this._clonedCount });
         this._initialized = true;
     }
-    /**
-     * Reorders items to make number of items around scroll view equally sized
-     */
-    _reorderItems() {
-        var _a, _b, _c, _d, _e;
-        const scrollOffset = this._scrollElement.nativeElement.scrollTop;
-        const scrollHeight = this._scrollElement.nativeElement.scrollHeight;
-        const scrollableHeight = scrollHeight - (5 * ((_a = this._itemHeight) !== null && _a !== void 0 ? _a : 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 / ((_b = this._itemHeight) !== null && _b !== void 0 ? _b : 1));
-            const movedItems = (_c = this._items) === null || _c === void 0 ? void 0 : _c.splice(this._items.length - numberOfItems, numberOfItems);
-            movedItems === null || movedItems === void 0 ? void 0 : movedItems.reverse().forEach(itm => {
-                var _a;
-                this._scrollElement.nativeElement.prepend(itm.element.nativeElement);
-                (_a = this._items) === null || _a === void 0 ? void 0 : _a.unshift(itm);
-            });
-        }
-        //move start items to end
-        else {
-            const numberOfItems = Math.floor((reorderOffset * -1) / ((_d = this._itemHeight) !== null && _d !== void 0 ? _d : 1));
-            const movedItems = (_e = this._items) === null || _e === void 0 ? void 0 : _e.splice(0, numberOfItems);
-            movedItems === null || movedItems === void 0 ? void 0 : movedItems.forEach(itm => {
-                var _a;
-                this._scrollElement.nativeElement.append(itm.element.nativeElement);
-                (_a = this._items) === null || _a === void 0 ? void 0 : _a.push(itm);
-            });
-        }
-    }
     /**
      * Handles scroll event
      */
     _handleScroll() {
-        var _a, _b;
-        this._reorderItems();
-        const itemHeight = (_a = this._itemHeight) !== null && _a !== void 0 ? _a : 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((_b = this._items) === null || _b === void 0 ? void 0 : _b[this.open ? (index + 2) : index].data);
-        }
+        requestAnimationFrame(() => {
+            var _a, _b, _c;
+            if (!this._dataItems) {
+                return;
+            }
+            const index = this._scrollElement.nativeElement.scrollTop / ((_a = this._itemHeight) !== null && _a !== void 0 ? _a : 1);
+            const dataIndex = index + (this.open ? 2 : 0) - this._clonedCount;
+            const dataLength = ((_b = this._itemHeight) !== null && _b !== void 0 ? _b : 1) * this._dataItems.length;
+            if (dataIndex <= -1) {
+                this._updateScroll(dataLength, true, index);
+            }
+            else if (dataIndex >= ((_c = this._dataItems.length) !== null && _c !== void 0 ? _c : 0)) {
+                this._updateScroll(dataLength, false, index);
+            }
+        });
     }
     /**
-     * Centers active value
+     * Updates scroll to be at full value of item
+     * @param dataLength - Length of all data
+     * @param add - Indication whether add or subtract length
+     * @param index - Current index
      */
-    _centerActiveValue() {
+    _updateScroll(dataLength, add, index) {
         var _a;
-        const selectedItem = (_a = this._items) === null || _a === void 0 ? void 0 : _a.find(itm => itm.data == this.value);
-        if (!selectedItem) {
-            throw new Error('No item selected in loop scroll');
-        }
-        selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.element.nativeElement.scrollIntoView({ block: 'center' });
-        this._reorderItems();
-        selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.element.nativeElement.scrollIntoView({ block: 'center' });
+        this._scrollElement.nativeElement.scrollTo({ top: (Math.round(index) * ((_a = this._itemHeight) !== null && _a !== void 0 ? _a : 1)) + (add ? dataLength : (dataLength * -1)), behavior: 'auto' });
+        //TODO emit value change
     }
 }
 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 });
+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" }, host: { listeners: { "scroll": "_handleScroll()" } }, queries: [{ propertyName: "items", predicate: LoopScrollDataDirective }], usesOnChanges: true, ngImport: i0 });
 __decorate([
-    BindThis,
-    DebounceCall(40),
+    DebounceCall(18),
     __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
+    __metadata("design:paramtypes", [Number, Boolean, Number]),
     __metadata("design:returntype", void 0)
-], LoopScrollDirective.prototype, "_handleScroll", null);
+], LoopScrollDirective.prototype, "_updateScroll", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LoopScrollDirective, decorators: [{
             type: Directive,
             args: [{
@@ -196,5 +154,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
             }], items: [{
                 type: ContentChildren,
                 args: [LoopScrollDataDirective]
-            }], _handleScroll: [] } });
+            }], _handleScroll: [{
+                type: HostListener,
+                args: ['scroll']
+            }], _updateScroll: [] } });
 //# sourceMappingURL=loopScroll.directive.js.map

package/es2015/src/picker/directives/loopScroll/loopScroll.directive.js.map

@@ -1 +1 @@
-{"version":3,"file":"loopScroll.directive.js","sourceRoot":"","sources":["../../../../../src/picker/directives/loopScroll/loopScroll.directive.ts"],"names":[],"mappings":"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","sourcesContent":["import {AfterContentInit, ContentChildren, Directive, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, Output, QueryList, SimpleChanges} from '@angular/core';\nimport {BindThis, isBlank, DebounceCall, nameof} from '@jscrpt/common';\n\nimport {LoopScrollDataDirective} from '../loopScrollData/loopScrollData.directive';\n\n/**\n * Renders loop scroll for array of elements\n */\n@Directive(\n{\n    selector: '[loopScroll]'\n})\nexport class LoopScrollDirective<TData = any> implements OnChanges, AfterContentInit, OnDestroy\n{\n    //######################### protected fields #########################\n\n    /**\n     * Item height that obtained\n     */\n    protected _itemHeight?: number;\n\n    /**\n     * Array of elements and data for scrolled stuff\n     */\n    protected _items?: LoopScrollDataDirective[];\n\n    /**\n     * Indication whether is loop scroll initialized\n     */\n    protected _initialized: boolean = false;\n\n    /**\n     * Indication whether is opening active\n     */\n    protected _opening: boolean = false;\n\n    //######################### public properties - inputs #########################\n\n    /**\n     * Value that is being set in loop scroll\n     */\n    @Input('loopScroll')\n    public value?: TData;\n\n    /**\n     * Indication whether is currently selection scroll open\n     */\n    @Input()\n    public open: boolean = false;\n\n    //######################### public properties - outputs #########################\n\n    /**\n     * Occurs when current value of loop scroll changes\n     */\n    @Output('loopScrollChange')\n    public valueChange: EventEmitter<TData> = new EventEmitter<TData>();\n\n    //######################### public properties - children #########################\n\n    /**\n     * Array of items that are loop scrolled\n     */\n    @ContentChildren(LoopScrollDataDirective)\n    public items?: QueryList<LoopScrollDataDirective>;\n\n    //######################### constructor #########################\n    constructor(protected _scrollElement: ElementRef<HTMLElement>)\n    {\n    }\n\n    //######################### public methods - implementation of OnChanges #########################\n    \n    /**\n     * Called when input value changes\n     */\n    public ngOnChanges(changes: SimpleChanges): void\n    {\n        if(!this._initialized)\n        {\n            return;\n        }\n\n        const itemHeight = this._itemHeight ?? 1;\n\n        if(nameof<LoopScrollDirective>('open') in changes)\n        {\n            let scrollOffset = this._scrollElement.nativeElement.scrollTop + (2 * itemHeight);\n\n            if(nameof<LoopScrollDirective>('value') in changes)\n            {\n                const selectedItem = this._items?.find(itm => itm.data == this.value);\n\n                if(!selectedItem)\n                {\n                    throw new Error('No item selected in loop scroll');\n                }\n\n                const selectedIndex = this._items!.indexOf(selectedItem);\n                scrollOffset = selectedIndex * itemHeight;\n            }\n\n            if(this.open)\n            {\n                this._opening = true;\n\n                this._scrollElement.nativeElement.scrollTo({top: this._scrollElement.nativeElement.scrollTop - (2 * itemHeight), behavior: 'auto'});\n            }\n            else\n            {\n                this._scrollElement.nativeElement.scrollTo({top: scrollOffset, behavior: 'auto'});\n            }\n\n            setTimeout(() => this._opening = false, 300);\n        }\n    }\n\n    //######################### public methods - implementation of AfterContentInit #########################\n    \n    /**\n     * Called when content was initialized\n     */\n    public ngAfterContentInit(): void\n    {\n        this._items = this.items?.toArray();\n\n        if(!this._items?.length)\n        {\n            this.items?.changes.subscribe(() =>\n            {\n                this._items = this.items?.toArray();\n\n                this._initialize();\n            });\n\n            return;\n        }\n\n        this._initialize();\n    }\n\n    //######################### public methods - implementation of OnDestroy #########################\n    \n    /**\n     * Called when component is destroyed\n     */\n    public ngOnDestroy(): void\n    {\n        this._scrollElement.nativeElement.removeEventListener('scroll', this._handleScroll);\n    }\n\n    //######################### protected methods #########################\n\n    /**\n     * Intialize default value\n     */\n    protected _initialize(): void\n    {\n        if(!this._items?.length)\n        {\n            return;\n        }\n\n        this._items.forEach(itm =>\n        {\n            if(isBlank(this._itemHeight))\n            {\n                this._itemHeight = itm.element.nativeElement.offsetHeight;\n\n                return;\n            }\n\n            if(this._itemHeight != itm.element.nativeElement.offsetHeight)\n            {\n                throw new Error('All items inside of loop scroll should have same height');\n            }\n        });\n\n        this._centerActiveValue();\n        this._scrollElement.nativeElement.addEventListener('scroll', this._handleScroll);\n        this._initialized = true;\n    }\n\n    /**\n     * Reorders items to make number of items around scroll view equally sized\n     */\n    protected _reorderItems(): void\n    {\n        const scrollOffset = this._scrollElement.nativeElement.scrollTop;\n        const scrollHeight = this._scrollElement.nativeElement.scrollHeight;\n        const scrollableHeight = scrollHeight - (5 * (this._itemHeight ?? 0));\n        const scrollMid = scrollableHeight / 2;\n        const threshold = scrollableHeight * .25;\n        let reorderOffset: number|null = null;\n\n        //reorder items\n        if(scrollOffset <= scrollMid - threshold ||\n           scrollOffset >= scrollMid + threshold)\n        {\n            reorderOffset = scrollMid - scrollOffset;\n        }\n        else\n        {\n            return;\n        }\n\n        //move end items to start\n        if(reorderOffset >= 0)\n        {\n            const numberOfItems = Math.floor(reorderOffset / (this._itemHeight ?? 1));\n            const movedItems = this._items?.splice(this._items.length - numberOfItems, numberOfItems);\n\n            movedItems?.reverse().forEach(itm =>\n            {\n                this._scrollElement.nativeElement.prepend(itm.element.nativeElement);\n                this._items?.unshift(itm);\n            });\n        }\n        //move start items to end\n        else\n        {\n            const numberOfItems = Math.floor((reorderOffset * -1) / (this._itemHeight ?? 1));\n            const movedItems = this._items?.splice(0, numberOfItems);\n\n            movedItems?.forEach(itm =>\n            {\n                this._scrollElement.nativeElement.append(itm.element.nativeElement);\n                this._items?.push(itm);\n            });\n        }\n    }\n\n    /**\n     * Handles scroll event\n     */\n    @BindThis\n    @DebounceCall(40)\n    protected _handleScroll(): void\n    {\n        this._reorderItems();\n\n        const itemHeight = this._itemHeight ?? 1;\n        const index = Math.round(this._scrollElement.nativeElement.scrollTop / itemHeight);\n\n        this._scrollElement.nativeElement.scrollTo({top: index * itemHeight, behavior: 'auto'});\n\n        if(!this._opening)\n        {\n            this.valueChange.emit(this._items?.[this.open ? (index + 2) : index].data);\n        }\n    }\n\n    /**\n     * Centers active value\n     */\n    protected _centerActiveValue(): void\n    {\n        const selectedItem = this._items?.find(itm => itm.data == this.value);\n\n        if(!selectedItem)\n        {\n            throw new Error('No item selected in loop scroll');\n        }\n\n        selectedItem?.element.nativeElement.scrollIntoView({block: 'center'});\n        this._reorderItems();\n        selectedItem?.element.nativeElement.scrollIntoView({block: 'center'});\n    }\n}"]}
+{"version":3,"file":"loopScroll.directive.js","sourceRoot":"","sources":["../../../../../src/picker/directives/loopScroll/loopScroll.directive.ts"],"names":[],"mappings":";AAAA,OAAO,EAAmB,eAAe,EAAE,SAAS,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,KAAK,EAAa,MAAM,EAAE,SAAS,EAAgB,MAAM,eAAe,CAAC;AACvK,OAAO,EAAC,YAAY,EAAE,OAAO,EAAE,MAAM,EAAC,MAAM,gBAAgB,CAAC;AAE7D,OAAO,EAAC,uBAAuB,EAAC,MAAM,4CAA4C,CAAC;;AAEnF;;GAEG;AAKH,MAAM,OAAO,mBAAmB;IA2D5B,iEAAiE;IACjE,YAAsB,cAAuC;QAAvC,mBAAc,GAAd,cAAc,CAAyB;QAzC7D;;WAEG;QACO,iBAAY,GAAY,KAAK,CAAC;QAExC;;WAEG;QACO,iBAAY,GAAW,CAAC,CAAC;QAUnC;;WAEG;QAEI,SAAI,GAAY,KAAK,CAAC;QAE7B,iFAAiF;QAEjF;;WAEG;QAEI,gBAAW,GAAwB,IAAI,YAAY,EAAS,CAAC;IAapE,CAAC;IAED,kGAAkG;IAElG;;OAEG;IACI,WAAW,CAAC,OAAsB;;QAErC,IAAG,CAAC,IAAI,CAAC,YAAY,EACrB;YACI,OAAO;SACV;QAED,MAAM,UAAU,GAAG,MAAA,IAAI,CAAC,WAAW,mCAAI,CAAC,CAAC;QAEzC,IAAG,MAAM,CAAsB,MAAM,CAAC,IAAI,OAAO,EACjD;YACI,IAAG,IAAI,CAAC,IAAI,EACZ;gBACI,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAC,GAAG,EAAE,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAC,CAAC,CAAC;gBAEpI,OAAO;aACV;YAED,IAAG,MAAM,CAAsB,OAAO,CAAC,IAAI,OAAO,EAClD;gBACI,MAAM,YAAY,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;gBAE1E,IAAG,CAAC,YAAY,EAChB;oBACI,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;iBACtD;gBAED,MAAM,aAAa,GAAG,IAAI,CAAC,UAAW,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;gBAE7D,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAC,GAAG,EAAE,CAAC,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC,GAAG,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAC,CAAC,CAAC;aACzH;iBAED;gBACI,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAC,GAAG,EAAE,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAC,CAAC,CAAC;aACvI;SACJ;IACL,CAAC;IAED,yGAAyG;IAEzG;;OAEG;IACI,kBAAkB;;QAErB,IAAI,CAAC,MAAM,GAAG,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO,EAAE,CAAC;QACpC,IAAI,CAAC,UAAU,GAAG,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAEzD,IAAG,CAAC,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,MAAM,CAAA,EAC3B;YACI,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO,CAAC,SAAS,CAAC,GAAG,EAAE;;gBAE/B,IAAI,CAAC,MAAM,GAAG,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO,EAAE,CAAC;gBACpC,IAAI,CAAC,UAAU,GAAG,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;gBAEzD,IAAI,CAAC,WAAW,EAAE,CAAC;YACvB,CAAC,CAAC,CAAC;YAEH,OAAO;SACV;QAED,IAAI,CAAC,WAAW,EAAE,CAAC;IACvB,CAAC;IAED,uEAAuE;IAEvE;;OAEG;IACO,WAAW;;QAEjB,MAAM,MAAM,GAAG,MAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,mCAAI,EAAE,CAAC;QAC3D,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;QAEtC,IAAG,CAAC,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,MAAM,CAAA,EAC3B;YACI,OAAO;SACV;QAED,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YAE1B,IAAG,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,EAC5B;gBACI,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC,OAAO,CAAC,aAAa,CAAC,YAAY,CAAC;gBAE1D,OAAO;aACV;YAED,IAAG,IAAI,CAAC,WAAW,IAAI,GAAG,CAAC,OAAO,CAAC,aAAa,CAAC,YAAY,EAC7D;gBACI,MAAM,IAAI,KAAK,CAAC,yDAAyD,CAAC,CAAC;aAC9E;QACL,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAC,GAAG,EAAE,IAAI,CAAC,WAAY,GAAG,IAAI,CAAC,YAAY,EAAC,CAAC,CAAC;QACzF,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;IAC7B,CAAC;IAED;;OAEG;IAEO,aAAa;QAEnB,qBAAqB,CAAC,GAAG,EAAE;;YAEvB,IAAG,CAAC,IAAI,CAAC,UAAU,EACnB;gBACI,OAAO;aACV;YAED,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,SAAS,GAAG,CAAC,MAAA,IAAI,CAAC,WAAW,mCAAI,CAAC,CAAC,CAAC;YACpF,MAAM,SAAS,GAAG,KAAK,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC;YAClE,MAAM,UAAU,GAAG,CAAC,MAAA,IAAI,CAAC,WAAW,mCAAI,CAAC,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC;YAEpE,IAAG,SAAS,IAAI,CAAC,CAAC,EAClB;gBACI,IAAI,CAAC,aAAa,CAAC,UAAU,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;aAC/C;iBACI,IAAG,SAAS,IAAI,CAAC,MAAA,IAAI,CAAC,UAAU,CAAC,MAAM,mCAAI,CAAC,CAAC,EAClD;gBACI,IAAI,CAAC,aAAa,CAAC,UAAU,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;aAChD;QACL,CAAC,CAAC,CAAC;IACP,CAAC;IAED;;;;;OAKG;IAEO,aAAa,CAAC,UAAkB,EAAE,GAAY,EAAE,KAAa;;QAEnE,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,MAAA,IAAI,CAAC,WAAW,mCAAI,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAC,CAAC,CAAC;QAE5J,wBAAwB;IAC5B,CAAC;;gHA/MQ,mBAAmB;oGAAnB,mBAAmB,wOAwDX,uBAAuB;AAkJxC;IADC,YAAY,CAAC,EAAE,CAAC;;;;wDAMhB;2FA/MQ,mBAAmB;kBAJ/B,SAAS;mBACV;oBACI,QAAQ,EAAE,cAAc;iBAC3B;iGAoCU,KAAK;sBADX,KAAK;uBAAC,YAAY;gBAOZ,IAAI;sBADV,KAAK;gBASC,WAAW;sBADjB,MAAM;uBAAC,kBAAkB;gBAShB,KAAK;sBADd,eAAe;uBAAC,uBAAuB;gBAmH9B,aAAa;sBADtB,YAAY;uBAAC,QAAQ;gBAgCZ,aAAa","sourcesContent":["import {AfterContentInit, ContentChildren, Directive, ElementRef, EventEmitter, HostListener, Input, OnChanges, Output, QueryList, SimpleChanges} from '@angular/core';\nimport {DebounceCall, isBlank, nameof} from '@jscrpt/common';\n\nimport {LoopScrollDataDirective} from '../loopScrollData/loopScrollData.directive';\n\n/**\n * Renders loop scroll for array of elements\n */\n@Directive(\n{\n    selector: '[loopScroll]'\n})\nexport class LoopScrollDirective<TData = any> implements OnChanges, AfterContentInit\n{\n    //######################### protected fields #########################\n\n    /**\n     * Item height that obtained\n     */\n    protected _itemHeight?: number;\n\n    /**\n     * Array of elements for scrolled stuff\n     */\n    protected _items?: LoopScrollDataDirective[];\n\n    /**\n     * Array of elements and data for scrolled stuff\n     */ \n    protected _dataItems?: LoopScrollDataDirective[];\n\n    /**\n     * Indication whether is loop scroll initialized\n     */\n    protected _initialized: boolean = false;\n\n    /**\n     * Count of cloned elements before or after\n     */\n    protected _clonedCount: number = 0;\n\n    //######################### public properties - inputs #########################\n\n    /**\n     * Value that is being set in loop scroll\n     */\n    @Input('loopScroll')\n    public value?: TData;\n\n    /**\n     * Indication whether is currently selection scroll open\n     */\n    @Input()\n    public open: boolean = false;\n\n    //######################### public properties - outputs #########################\n\n    /**\n     * Occurs when current value of loop scroll changes\n     */\n    @Output('loopScrollChange')\n    public valueChange: EventEmitter<TData> = new EventEmitter<TData>();\n\n    //######################### protected properties - children #########################\n\n    /**\n     * Array of items that are loop scrolled\n     */\n    @ContentChildren(LoopScrollDataDirective)\n    protected items?: QueryList<LoopScrollDataDirective>;\n\n    //######################### constructor #########################\n    constructor(protected _scrollElement: ElementRef<HTMLElement>)\n    {\n    }\n\n    //######################### public methods - implementation of OnChanges #########################\n    \n    /**\n     * Called when input value changes\n     */\n    public ngOnChanges(changes: SimpleChanges): void\n    {\n        if(!this._initialized)\n        {\n            return;\n        }\n\n        const itemHeight = this._itemHeight ?? 1;\n\n        if(nameof<LoopScrollDirective>('open') in changes)\n        {\n            if(this.open)\n            {\n                this._scrollElement.nativeElement.scrollTo({top: this._scrollElement.nativeElement.scrollTop - (2 * itemHeight), behavior: 'auto'});\n\n                return;\n            }\n\n            if(nameof<LoopScrollDirective>('value') in changes)\n            {\n                const selectedItem = this._dataItems?.find(itm => itm.data == this.value);\n\n                if(!selectedItem)\n                {\n                    throw new Error('No item selected in loop scroll');\n                }\n\n                const selectedIndex = this._dataItems!.indexOf(selectedItem);\n\n                this._scrollElement.nativeElement.scrollTo({top: (selectedIndex + this._clonedCount) * itemHeight, behavior: 'auto'});\n            }\n            else\n            {\n                this._scrollElement.nativeElement.scrollTo({top: this._scrollElement.nativeElement.scrollTop + (2 * itemHeight), behavior: 'auto'});\n            }\n        }\n    }\n\n    //######################### public methods - implementation of AfterContentInit #########################\n    \n    /**\n     * Called when content was initialized\n     */\n    public ngAfterContentInit(): void\n    {\n        this._items = this.items?.toArray();\n        this._dataItems = this._items?.filter(itm => !itm.clone);\n\n        if(!this._dataItems?.length)\n        {\n            this.items?.changes.subscribe(() =>\n            {\n                this._items = this.items?.toArray();\n                this._dataItems = this._items?.filter(itm => !itm.clone);\n\n                this._initialize();\n            });\n\n            return;\n        }\n\n        this._initialize();\n    }\n\n    //######################### protected methods #########################\n\n    /**\n     * Intialize default value\n     */\n    protected _initialize(): void\n    {\n        const cloned = this._items?.filter(itm => itm.clone) ?? [];\n        this._clonedCount = cloned.length / 2;\n\n        if(!this._dataItems?.length)\n        {\n            return;\n        }\n\n        this._dataItems.forEach(itm =>\n        {\n            if(isBlank(this._itemHeight))\n            {\n                this._itemHeight = itm.element.nativeElement.offsetHeight;\n\n                return;\n            }\n\n            if(this._itemHeight != itm.element.nativeElement.offsetHeight)\n            {\n                throw new Error('All items inside of loop scroll should have same height');\n            }\n        });\n\n        this._scrollElement.nativeElement.scrollTo({top: this._itemHeight! * this._clonedCount});\n        this._initialized = true;\n    }\n\n    /**\n     * Handles scroll event\n     */\n    @HostListener('scroll')\n    protected _handleScroll(): void\n    {\n        requestAnimationFrame(() =>\n        {\n            if(!this._dataItems)\n            {\n                return;\n            }\n\n            const index = this._scrollElement.nativeElement.scrollTop / (this._itemHeight ?? 1);\n            const dataIndex = index + (this.open ? 2 : 0) - this._clonedCount;\n            const dataLength = (this._itemHeight ?? 1) * this._dataItems.length;\n\n            if(dataIndex <= -1)\n            {\n                this._updateScroll(dataLength, true, index);\n            }\n            else if(dataIndex >= (this._dataItems.length ?? 0))\n            {\n                this._updateScroll(dataLength, false, index);\n            }\n        });\n    }\n\n    /**\n     * Updates scroll to be at full value of item\n     * @param dataLength - Length of all data\n     * @param add - Indication whether add or subtract length\n     * @param index - Current index\n     */\n    @DebounceCall(18)\n    protected _updateScroll(dataLength: number, add: boolean, index: number): void\n    {\n        this._scrollElement.nativeElement.scrollTo({top: (Math.round(index) * (this._itemHeight ?? 1)) + (add ? dataLength : (dataLength * -1)), behavior: 'auto'});\n\n        //TODO emit value change\n    }\n}"]}

package/es2015/src/picker/directives/loopScrollData/loopScrollData.directive.js

@@ -7,10 +7,14 @@ export class LoopScrollDataDirective {
     //######################### constructor #########################
     constructor(element) {
         this.element = element;
+        /**
+         * Indication that this node is clone
+         */
+        this.clone = false;
     }
 }
 LoopScrollDataDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LoopScrollDataDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-LoopScrollDataDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: LoopScrollDataDirective, selector: "[loopScrollData]", inputs: { data: ["loopScrollData", "data"] }, ngImport: i0 });
+LoopScrollDataDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: LoopScrollDataDirective, selector: "[loopScrollData]", inputs: { data: ["loopScrollData", "data"], clone: "clone" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LoopScrollDataDirective, decorators: [{
             type: Directive,
             args: [{
@@ -19,5 +23,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { data: [{
                 type: Input,
                 args: ['loopScrollData']
+            }], clone: [{
+                type: Input
             }] } });
 //# sourceMappingURL=loopScrollData.directive.js.map

package/es2015/src/picker/directives/loopScrollData/loopScrollData.directive.js.map

@@ -1 +1 @@
-{"version":3,"file":"loopScrollData.directive.js","sourceRoot":"","sources":["../../../../../src/picker/directives/loopScrollData/loopScrollData.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,UAAU,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;;AAE3D;;GAEG;AAKH,MAAM,OAAO,uBAAuB;IAUhC,iEAAiE;IACjE,YAAmB,OAAgC;QAAhC,YAAO,GAAP,OAAO,CAAyB;IAEnD,CAAC;;oHAbQ,uBAAuB;wGAAvB,uBAAuB;2FAAvB,uBAAuB;kBAJnC,SAAS;mBACV;oBACI,QAAQ,EAAE,kBAAkB;iBAC/B;iGASU,IAAI;sBADV,KAAK;uBAAC,gBAAgB","sourcesContent":["import {Directive, ElementRef, Input} from '@angular/core';\n\n/**\n * Loop scroll data that are used inside LoopScrollDirective\n */\n@Directive(\n{\n    selector: '[loopScrollData]'\n})\nexport class LoopScrollDataDirective<TData = any>\n{\n    //######################### public properties - inputs #########################\n\n    /**\n     * Data for loop\n     */\n    @Input('loopScrollData')\n    public data!: TData;\n\n    //######################### constructor #########################\n    constructor(public element: ElementRef<HTMLElement>)\n    {\n    }\n}"]}
+{"version":3,"file":"loopScrollData.directive.js","sourceRoot":"","sources":["../../../../../src/picker/directives/loopScrollData/loopScrollData.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,UAAU,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;;AAE3D;;GAEG;AAKH,MAAM,OAAO,uBAAuB;IAgBhC,iEAAiE;IACjE,YAAmB,OAAgC;QAAhC,YAAO,GAAP,OAAO,CAAyB;QAPnD;;WAEG;QAEI,UAAK,GAAY,KAAK,CAAC;IAK9B,CAAC;;oHAnBQ,uBAAuB;wGAAvB,uBAAuB;2FAAvB,uBAAuB;kBAJnC,SAAS;mBACV;oBACI,QAAQ,EAAE,kBAAkB;iBAC/B;iGASU,IAAI;sBADV,KAAK;uBAAC,gBAAgB;gBAOhB,KAAK;sBADX,KAAK","sourcesContent":["import {Directive, ElementRef, Input} from '@angular/core';\n\n/**\n * Loop scroll data that are used inside LoopScrollDirective\n */\n@Directive(\n{\n    selector: '[loopScrollData]'\n})\nexport class LoopScrollDataDirective<TData = any>\n{\n    //######################### public properties - inputs #########################\n\n    /**\n     * Data for loop\n     */\n    @Input('loopScrollData')\n    public data!: TData;\n\n    /**\n     * Indication that this node is clone\n     */\n    @Input()\n    public clone: boolean = false;\n\n    //######################### constructor #########################\n    constructor(public element: ElementRef<HTMLElement>)\n    {\n    }\n}"]}

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

@@ -130,9 +130,9 @@ export class DateTimeRollerTimePickerComponent extends PickerImplBaseComponent {
     }
 }
 DateTimeRollerTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DateTimeRollerTimePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DateTimeRollerTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: DateTimeRollerTimePickerComponent, selector: "date-time-roller-time-picker", usesInheritance: true, ngImport: i0, template: "<div class=\"flex-row\" style=\"justify-content: center;\">\n     <div [class.clickable]=\"canGoUp\" (mousedown)=\"goUp($event)\">{{displayDate?.value | dateFormat: 'date'}}</div>\n</div>\n\n<div class=\"time-area\">\n    <div class=\"value-container\"\n         [clickOutside]=\"true\"\n         (clickOutsideChange)=\"hoursOpen = false\"\n         [clickOutsideElement]=\"hoursScroll\">\n        <div #hoursScroll\n             class=\"roller-scroll\"\n             [class.open]=\"hoursOpen\"\n             [loopScroll]=\"hour\"\n             [open]=\"hoursOpen\"\n             (loopScrollChange)=\"setHour(null, $event)\"\n             (click)=\"hoursOpen = !hoursOpen\" >\n            <div *ngFor=\"let hour of hours\"\n                 [loopScrollData]=\"hour?.data\"\n                 (click)=\"setHour($event, hour?.data)\">{{hour?.displayText}}</div>\n        </div>\n    </div>\n\n    <div class=\"minute-second-separator\">:</div>\n\n    <div class=\"value-container\"\n         [clickOutside]=\"true\"\n         (clickOutsideChange)=\"minutesOpen = false\"\n         [clickOutsideElement]=\"minutesScroll\">\n        <div #minutesScroll\n             class=\"roller-scroll\"\n             [class.open]=\"minutesOpen\"\n             [loopScroll]=\"minute\"\n             [open]=\"minutesOpen\"\n             (loopScrollChange)=\"setMinute(null, $event)\"\n             (click)=\"minutesOpen = !minutesOpen\">\n            <div *ngFor=\"let minute of minutes\"\n                 [loopScrollData]=\"minute?.data\"\n                 (click)=\"setMinute($event, minute?.data)\">{{minute?.displayText}}</div>\n        </div>\n    </div>\n</div>\n", styles: [".time-area\n{\n    display: flex;\n    flex-direction: row;\n    padding: 48px 64px;\n    font-size: 32px;\n}\n\n.value-container\n{\n    position: relative;\n    height: 1em;\n    width: 2ch;\n}\n\n.roller-scroll\n{\n    position: absolute;\n    line-height: 1em;\n    max-height: 1em;\n    overflow: scroll;\n    scrollbar-width: none;\n    top: 0;\n    background-color: #666666;\n    transition: all 250ms;\n    border-radius: 4px;\n}\n\n.roller-scroll.open\n{\n    max-height: 5em;\n    top: -2em;\n}\n\n.minute-second-separator\n{\n    margin-left: 12px;\n    margin-right: 12px;\n    line-height: 1em;\n}\n"], directives: [{ type: i1.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutside", "clickOutsideElement"], outputs: ["clickOutsideChange"] }, { type: i2.LoopScrollDirective, selector: "[loopScroll]", inputs: ["loopScroll", "open"], outputs: ["loopScrollChange"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.LoopScrollDataDirective, selector: "[loopScrollData]", inputs: ["loopScrollData"] }], pipes: { "dateFormat": i5.DateFormatPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DateTimeRollerTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: DateTimeRollerTimePickerComponent, selector: "date-time-roller-time-picker", usesInheritance: true, ngImport: i0, template: "<div class=\"flex-row\" style=\"justify-content: center;\">\n     <div [class.clickable]=\"canGoUp\" (mousedown)=\"goUp($event)\">{{displayDate?.value | dateFormat: 'date'}}</div>\n</div>\n\n<div class=\"time-area\">\n    <div class=\"value-container\"\n         [clickOutside]=\"true\"\n         (clickOutsideChange)=\"hoursOpen = false\"\n         [clickOutsideElement]=\"hoursScroll\">\n        <div #hoursScroll\n             class=\"roller-scroll\"\n             [class.open]=\"hoursOpen\"\n             [loopScroll]=\"hour\"\n             [open]=\"hoursOpen\"\n             (loopScrollChange)=\"setHour(null, $event)\"\n             (click)=\"hoursOpen = !hoursOpen\">\n            <div *ngFor=\"let hour of hours | slice: -9\"\n                 [loopScrollData]=\"hour?.data\"\n                 [clone]=\"true\"\n                 (click)=\"setHour($event, hour?.data)\">{{hour?.displayText}}</div>\n\n            <div *ngFor=\"let hour of hours\"\n                 [loopScrollData]=\"hour?.data\"\n                 (click)=\"setHour($event, hour?.data)\">{{hour?.displayText}}</div>\n\n            <div *ngFor=\"let hour of hours | slice: 0: 9\"\n                 [loopScrollData]=\"hour?.data\"\n                 [clone]=\"true\"\n                 (click)=\"setHour($event, hour?.data)\">{{hour?.displayText}}</div>\n        </div>\n    </div>\n\n    <div class=\"minute-second-separator\">:</div>\n\n    <div class=\"value-container\"\n         [clickOutside]=\"true\"\n         (clickOutsideChange)=\"minutesOpen = false\"\n         [clickOutsideElement]=\"minutesScroll\">\n        <div #minutesScroll\n             class=\"roller-scroll\"\n             [class.open]=\"minutesOpen\"\n             [loopScroll]=\"minute\"\n             [open]=\"minutesOpen\"\n             (loopScrollChange)=\"setMinute(null, $event)\"\n             (click)=\"minutesOpen = !minutesOpen\">\n            <div *ngFor=\"let minute of minutes | slice: -15\"\n                 [loopScrollData]=\"minute?.data\"\n                 [clone]=\"true\"\n                 (click)=\"setMinute($event, minute?.data)\">{{minute?.displayText}}</div>\n\n            <div *ngFor=\"let minute of minutes\"\n                 [loopScrollData]=\"minute?.data\"\n                 (click)=\"setMinute($event, minute?.data)\">{{minute?.displayText}}</div>\n\n            <div *ngFor=\"let minute of minutes | slice: 0: 15\"\n                 [loopScrollData]=\"minute?.data\"\n                 [clone]=\"true\"\n                 (click)=\"setMinute($event, minute?.data)\">{{minute?.displayText}}</div>\n        </div>\n    </div>\n</div>\n", styles: [".time-area\n{\n    display: flex;\n    flex-direction: row;\n    padding: 48px 64px;\n    font-size: 32px;\n}\n\n.value-container\n{\n    position: relative;\n    height: 1em;\n    width: 2ch;\n}\n\n.roller-scroll\n{\n    position: absolute;\n    line-height: 1em;\n    max-height: 1em;\n    overflow: scroll;\n    scrollbar-width: none;\n    top: 0;\n    background-color: #666666;\n    transition: all 250ms;\n    border-radius: 4px;\n    scroll-snap-type: y mandatory;\n    contain: content;\n}\n\n.roller-scroll::-webkit-scrollbar\n{\n    display: none;\n}\n\n.roller-scroll>div\n{\n    scroll-snap-align: start;\n}\n\n.roller-scroll.open\n{\n    max-height: 5em;\n    top: -2em;\n}\n\n.minute-second-separator\n{\n    margin-left: 12px;\n    margin-right: 12px;\n    line-height: 1em;\n}\n"], directives: [{ type: i1.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutside", "clickOutsideElement"], outputs: ["clickOutsideChange"] }, { type: i2.LoopScrollDirective, selector: "[loopScroll]", inputs: ["loopScroll", "open"], outputs: ["loopScrollChange"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.LoopScrollDataDirective, selector: "[loopScrollData]", inputs: ["loopScrollData", "clone"] }], pipes: { "dateFormat": i5.DateFormatPipe, "slice": i3.SlicePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DateTimeRollerTimePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'date-time-roller-time-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex-row\" style=\"justify-content: center;\">\n     <div [class.clickable]=\"canGoUp\" (mousedown)=\"goUp($event)\">{{displayDate?.value | dateFormat: 'date'}}</div>\n</div>\n\n<div class=\"time-area\">\n    <div class=\"value-container\"\n         [clickOutside]=\"true\"\n         (clickOutsideChange)=\"hoursOpen = false\"\n         [clickOutsideElement]=\"hoursScroll\">\n        <div #hoursScroll\n             class=\"roller-scroll\"\n             [class.open]=\"hoursOpen\"\n             [loopScroll]=\"hour\"\n             [open]=\"hoursOpen\"\n             (loopScrollChange)=\"setHour(null, $event)\"\n             (click)=\"hoursOpen = !hoursOpen\" >\n            <div *ngFor=\"let hour of hours\"\n                 [loopScrollData]=\"hour?.data\"\n                 (click)=\"setHour($event, hour?.data)\">{{hour?.displayText}}</div>\n        </div>\n    </div>\n\n    <div class=\"minute-second-separator\">:</div>\n\n    <div class=\"value-container\"\n         [clickOutside]=\"true\"\n         (clickOutsideChange)=\"minutesOpen = false\"\n         [clickOutsideElement]=\"minutesScroll\">\n        <div #minutesScroll\n             class=\"roller-scroll\"\n             [class.open]=\"minutesOpen\"\n             [loopScroll]=\"minute\"\n             [open]=\"minutesOpen\"\n             (loopScrollChange)=\"setMinute(null, $event)\"\n             (click)=\"minutesOpen = !minutesOpen\">\n            <div *ngFor=\"let minute of minutes\"\n                 [loopScrollData]=\"minute?.data\"\n                 (click)=\"setMinute($event, minute?.data)\">{{minute?.displayText}}</div>\n        </div>\n    </div>\n</div>\n", styles: [".time-area\n{\n    display: flex;\n    flex-direction: row;\n    padding: 48px 64px;\n    font-size: 32px;\n}\n\n.value-container\n{\n    position: relative;\n    height: 1em;\n    width: 2ch;\n}\n\n.roller-scroll\n{\n    position: absolute;\n    line-height: 1em;\n    max-height: 1em;\n    overflow: scroll;\n    scrollbar-width: none;\n    top: 0;\n    background-color: #666666;\n    transition: all 250ms;\n    border-radius: 4px;\n}\n\n.roller-scroll.open\n{\n    max-height: 5em;\n    top: -2em;\n}\n\n.minute-second-separator\n{\n    margin-left: 12px;\n    margin-right: 12px;\n    line-height: 1em;\n}\n"] }]
+            args: [{ selector: 'date-time-roller-time-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex-row\" style=\"justify-content: center;\">\n     <div [class.clickable]=\"canGoUp\" (mousedown)=\"goUp($event)\">{{displayDate?.value | dateFormat: 'date'}}</div>\n</div>\n\n<div class=\"time-area\">\n    <div class=\"value-container\"\n         [clickOutside]=\"true\"\n         (clickOutsideChange)=\"hoursOpen = false\"\n         [clickOutsideElement]=\"hoursScroll\">\n        <div #hoursScroll\n             class=\"roller-scroll\"\n             [class.open]=\"hoursOpen\"\n             [loopScroll]=\"hour\"\n             [open]=\"hoursOpen\"\n             (loopScrollChange)=\"setHour(null, $event)\"\n             (click)=\"hoursOpen = !hoursOpen\">\n            <div *ngFor=\"let hour of hours | slice: -9\"\n                 [loopScrollData]=\"hour?.data\"\n                 [clone]=\"true\"\n                 (click)=\"setHour($event, hour?.data)\">{{hour?.displayText}}</div>\n\n            <div *ngFor=\"let hour of hours\"\n                 [loopScrollData]=\"hour?.data\"\n                 (click)=\"setHour($event, hour?.data)\">{{hour?.displayText}}</div>\n\n            <div *ngFor=\"let hour of hours | slice: 0: 9\"\n                 [loopScrollData]=\"hour?.data\"\n                 [clone]=\"true\"\n                 (click)=\"setHour($event, hour?.data)\">{{hour?.displayText}}</div>\n        </div>\n    </div>\n\n    <div class=\"minute-second-separator\">:</div>\n\n    <div class=\"value-container\"\n         [clickOutside]=\"true\"\n         (clickOutsideChange)=\"minutesOpen = false\"\n         [clickOutsideElement]=\"minutesScroll\">\n        <div #minutesScroll\n             class=\"roller-scroll\"\n             [class.open]=\"minutesOpen\"\n             [loopScroll]=\"minute\"\n             [open]=\"minutesOpen\"\n             (loopScrollChange)=\"setMinute(null, $event)\"\n             (click)=\"minutesOpen = !minutesOpen\">\n            <div *ngFor=\"let minute of minutes | slice: -15\"\n                 [loopScrollData]=\"minute?.data\"\n                 [clone]=\"true\"\n                 (click)=\"setMinute($event, minute?.data)\">{{minute?.displayText}}</div>\n\n            <div *ngFor=\"let minute of minutes\"\n                 [loopScrollData]=\"minute?.data\"\n                 (click)=\"setMinute($event, minute?.data)\">{{minute?.displayText}}</div>\n\n            <div *ngFor=\"let minute of minutes | slice: 0: 15\"\n                 [loopScrollData]=\"minute?.data\"\n                 [clone]=\"true\"\n                 (click)=\"setMinute($event, minute?.data)\">{{minute?.displayText}}</div>\n        </div>\n    </div>\n</div>\n", styles: [".time-area\n{\n    display: flex;\n    flex-direction: row;\n    padding: 48px 64px;\n    font-size: 32px;\n}\n\n.value-container\n{\n    position: relative;\n    height: 1em;\n    width: 2ch;\n}\n\n.roller-scroll\n{\n    position: absolute;\n    line-height: 1em;\n    max-height: 1em;\n    overflow: scroll;\n    scrollbar-width: none;\n    top: 0;\n    background-color: #666666;\n    transition: all 250ms;\n    border-radius: 4px;\n    scroll-snap-type: y mandatory;\n    contain: content;\n}\n\n.roller-scroll::-webkit-scrollbar\n{\n    display: none;\n}\n\n.roller-scroll>div\n{\n    scroll-snap-align: start;\n}\n\n.roller-scroll.open\n{\n    max-height: 5em;\n    top: -2em;\n}\n\n.minute-second-separator\n{\n    margin-left: 12px;\n    margin-right: 12px;\n    line-height: 1em;\n}\n"] }]
         }] });
 //# sourceMappingURL=rollerTimePicker.component.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"rollerTimePicker.component.js","sourceRoot":"","sources":["../../../../../src/picker/components/rollerTimePicker/rollerTimePicker.component.ts","../../../../../src/picker/components/rollerTimePicker/rollerTimePicker.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy} from '@angular/core';\n\nimport {DateTimeValue} from '../../../misc/datetime.interface';\nimport {DateApiObject} from '../../../services';\nimport {LoopScrollData} from '../../directives';\nimport {DateTimePicker} from '../../interfaces';\nimport {PickerImplBaseComponent} from '../pickerImplBase.component';\nimport {hours, minutes} from './rollerTimePicker.data';\nimport {RollerTimePickerCssClasses} from './rollerTimePicker.interface';\n\n/**\n * Component used for rendering roller time picker\n */\n@Component(\n{\n    selector: 'date-time-roller-time-picker',\n    templateUrl: 'rollerTimePicker.component.html',\n    styleUrls: ['rollerTimePicker.component.css'],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DateTimeRollerTimePickerComponent<TDate = any> extends PickerImplBaseComponent<TDate, RollerTimePickerCssClasses> implements DateTimePicker<TDate, RollerTimePickerCssClasses>\n{\n    //######################### public properties - template bindings #########################\n\n    /**\n     * Array of available hours\n     */\n    public hours: LoopScrollData[] = hours;\n\n    /**\n     * Array of available minutes\n     */\n    public minutes: LoopScrollData[] = minutes;\n\n    /**\n     * Indication whether are minutes open\n     */\n    public minutesOpen: boolean = false;\n\n    /**\n     * Indication whether are hours open\n     */\n    public hoursOpen: boolean = false;\n\n    /**\n     * Current value of hour\n     */\n    public get hour(): number\n    {\n        return this.displayDate?.hour() ?? 0;\n    }\n    public set hour(value: number)\n    {\n        this.displayDate?.hour(value);\n    }\n\n    /**\n     * Current value of minute\n     */\n    public get minute(): number\n    {\n        return this.displayDate?.minute() ?? 0;\n    }\n    public set minute(value: number)\n    {\n        this.displayDate?.minute(value);\n    }\n\n    //######################### public methods - implementation of PickerBaseComponent #########################\n    \n    /**\n     * @inheritdoc\n     */\n    public display(value: DateApiObject<TDate>): void\n    {\n        this.displayDate = value;\n    }\n\n    /**\n     * @inheritdoc\n     */\n    public setMinValue(_value: TDate | null): void\n    {\n    }\n\n    /**\n     * @inheritdoc\n     */\n    public setMaxValue(_value: TDate | null): void\n    {\n    }\n\n    /**\n     * @inheritdoc\n     */\n    public setValue(_value: DateTimeValue<TDate> | null): void\n    {\n    }\n\n    //######################### public methods - template bindings #########################\n\n    /**\n     * Sets hour\n     * @param event - Mouse event that was triggered\n     * @param value - Value to be set as hour\n     * @returns \n     */\n    public setHour<TData = any>(event: MouseEvent|null, value: TData): void\n    {\n        if(!this.hoursOpen && event)\n        {\n            return;\n        }\n\n        event?.stopPropagation();\n        event?.preventDefault();\n\n        if(this.hour == value as unknown as number)\n        {\n            return;\n        }\n\n        this.hour = value as unknown as number;\n        \n        if(event)\n        {\n            this.hoursOpen = false;\n        }\n\n        if(this.displayDate)\n        {\n            this._value =\n            {\n                from: this.displayDate?.value,\n                to: this.displayDate?.value\n            };\n\n            this._valueChange.next();\n        }\n    }\n\n    /**\n     * Sets minute\n     * @param event - Mouse event that was triggered\n     * @param value - Value to be set as minute\n     * @returns \n     */\n    public setMinute<TData = any>(event: MouseEvent|null, value: TData): void\n    {\n        if(!this.minutesOpen && event)\n        {\n            return;\n        }\n\n        event?.stopPropagation();\n        event?.preventDefault();\n\n        if(this.minute == value as unknown as number)\n        {\n            return;\n        }\n\n        this.minute = value as unknown as number;\n        \n        if(event)\n        {\n            this.minutesOpen = false;\n        }\n\n        if(this.displayDate)\n        {\n            this._value =\n            {\n                from: this.displayDate?.value,\n                to: this.displayDate?.value\n            };\n\n            this._valueChange.next();\n        }\n    }\n}","<div class=\"flex-row\" style=\"justify-content: center;\">\n     <div [class.clickable]=\"canGoUp\" (mousedown)=\"goUp($event)\">{{displayDate?.value | dateFormat: 'date'}}</div>\n</div>\n\n<div class=\"time-area\">\n    <div class=\"value-container\"\n         [clickOutside]=\"true\"\n         (clickOutsideChange)=\"hoursOpen = false\"\n         [clickOutsideElement]=\"hoursScroll\">\n        <div #hoursScroll\n             class=\"roller-scroll\"\n             [class.open]=\"hoursOpen\"\n             [loopScroll]=\"hour\"\n             [open]=\"hoursOpen\"\n             (loopScrollChange)=\"setHour(null, $event)\"\n             (click)=\"hoursOpen = !hoursOpen\" >\n            <div *ngFor=\"let hour of hours\"\n                 [loopScrollData]=\"hour?.data\"\n                 (click)=\"setHour($event, hour?.data)\">{{hour?.displayText}}</div>\n        </div>\n    </div>\n\n    <div class=\"minute-second-separator\">:</div>\n\n    <div class=\"value-container\"\n         [clickOutside]=\"true\"\n         (clickOutsideChange)=\"minutesOpen = false\"\n         [clickOutsideElement]=\"minutesScroll\">\n        <div #minutesScroll\n             class=\"roller-scroll\"\n             [class.open]=\"minutesOpen\"\n             [loopScroll]=\"minute\"\n             [open]=\"minutesOpen\"\n             (loopScrollChange)=\"setMinute(null, $event)\"\n             (click)=\"minutesOpen = !minutesOpen\">\n            <div *ngFor=\"let minute of minutes\"\n                 [loopScrollData]=\"minute?.data\"\n                 (click)=\"setMinute($event, minute?.data)\">{{minute?.displayText}}</div>\n        </div>\n    </div>\n</div>\n"]}
+{"version":3,"file":"rollerTimePicker.component.js","sourceRoot":"","sources":["../../../../../src/picker/components/rollerTimePicker/rollerTimePicker.component.ts","../../../../../src/picker/components/rollerTimePicker/rollerTimePicker.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy} from '@angular/core';\n\nimport {DateTimeValue} from '../../../misc/datetime.interface';\nimport {DateApiObject} from '../../../services';\nimport {LoopScrollData} from '../../directives';\nimport {DateTimePicker} from '../../interfaces';\nimport {PickerImplBaseComponent} from '../pickerImplBase.component';\nimport {hours, minutes} from './rollerTimePicker.data';\nimport {RollerTimePickerCssClasses} from './rollerTimePicker.interface';\n\n/**\n * Component used for rendering roller time picker\n */\n@Component(\n{\n    selector: 'date-time-roller-time-picker',\n    templateUrl: 'rollerTimePicker.component.html',\n    styleUrls: ['rollerTimePicker.component.css'],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DateTimeRollerTimePickerComponent<TDate = any> extends PickerImplBaseComponent<TDate, RollerTimePickerCssClasses> implements DateTimePicker<TDate, RollerTimePickerCssClasses>\n{\n    //######################### public properties - template bindings #########################\n\n    /**\n     * Array of available hours\n     */\n    public hours: LoopScrollData[] = hours;\n\n    /**\n     * Array of available minutes\n     */\n    public minutes: LoopScrollData[] = minutes;\n\n    /**\n     * Indication whether are minutes open\n     */\n    public minutesOpen: boolean = false;\n\n    /**\n     * Indication whether are hours open\n     */\n    public hoursOpen: boolean = false;\n\n    /**\n     * Current value of hour\n     */\n    public get hour(): number\n    {\n        return this.displayDate?.hour() ?? 0;\n    }\n    public set hour(value: number)\n    {\n        this.displayDate?.hour(value);\n    }\n\n    /**\n     * Current value of minute\n     */\n    public get minute(): number\n    {\n        return this.displayDate?.minute() ?? 0;\n    }\n    public set minute(value: number)\n    {\n        this.displayDate?.minute(value);\n    }\n\n    //######################### public methods - implementation of PickerBaseComponent #########################\n    \n    /**\n     * @inheritdoc\n     */\n    public display(value: DateApiObject<TDate>): void\n    {\n        this.displayDate = value;\n    }\n\n    /**\n     * @inheritdoc\n     */\n    public setMinValue(_value: TDate | null): void\n    {\n    }\n\n    /**\n     * @inheritdoc\n     */\n    public setMaxValue(_value: TDate | null): void\n    {\n    }\n\n    /**\n     * @inheritdoc\n     */\n    public setValue(_value: DateTimeValue<TDate> | null): void\n    {\n    }\n\n    //######################### public methods - template bindings #########################\n\n    /**\n     * Sets hour\n     * @param event - Mouse event that was triggered\n     * @param value - Value to be set as hour\n     * @returns \n     */\n    public setHour<TData = any>(event: MouseEvent|null, value: TData): void\n    {\n        if(!this.hoursOpen && event)\n        {\n            return;\n        }\n\n        event?.stopPropagation();\n        event?.preventDefault();\n\n        if(this.hour == value as unknown as number)\n        {\n            return;\n        }\n\n        this.hour = value as unknown as number;\n        \n        if(event)\n        {\n            this.hoursOpen = false;\n        }\n\n        if(this.displayDate)\n        {\n            this._value =\n            {\n                from: this.displayDate?.value,\n                to: this.displayDate?.value\n            };\n\n            this._valueChange.next();\n        }\n    }\n\n    /**\n     * Sets minute\n     * @param event - Mouse event that was triggered\n     * @param value - Value to be set as minute\n     * @returns \n     */\n    public setMinute<TData = any>(event: MouseEvent|null, value: TData): void\n    {\n        if(!this.minutesOpen && event)\n        {\n            return;\n        }\n\n        event?.stopPropagation();\n        event?.preventDefault();\n\n        if(this.minute == value as unknown as number)\n        {\n            return;\n        }\n\n        this.minute = value as unknown as number;\n        \n        if(event)\n        {\n            this.minutesOpen = false;\n        }\n\n        if(this.displayDate)\n        {\n            this._value =\n            {\n                from: this.displayDate?.value,\n                to: this.displayDate?.value\n            };\n\n            this._valueChange.next();\n        }\n    }\n}","<div class=\"flex-row\" style=\"justify-content: center;\">\n     <div [class.clickable]=\"canGoUp\" (mousedown)=\"goUp($event)\">{{displayDate?.value | dateFormat: 'date'}}</div>\n</div>\n\n<div class=\"time-area\">\n    <div class=\"value-container\"\n         [clickOutside]=\"true\"\n         (clickOutsideChange)=\"hoursOpen = false\"\n         [clickOutsideElement]=\"hoursScroll\">\n        <div #hoursScroll\n             class=\"roller-scroll\"\n             [class.open]=\"hoursOpen\"\n             [loopScroll]=\"hour\"\n             [open]=\"hoursOpen\"\n             (loopScrollChange)=\"setHour(null, $event)\"\n             (click)=\"hoursOpen = !hoursOpen\">\n            <div *ngFor=\"let hour of hours | slice: -9\"\n                 [loopScrollData]=\"hour?.data\"\n                 [clone]=\"true\"\n                 (click)=\"setHour($event, hour?.data)\">{{hour?.displayText}}</div>\n\n            <div *ngFor=\"let hour of hours\"\n                 [loopScrollData]=\"hour?.data\"\n                 (click)=\"setHour($event, hour?.data)\">{{hour?.displayText}}</div>\n\n            <div *ngFor=\"let hour of hours | slice: 0: 9\"\n                 [loopScrollData]=\"hour?.data\"\n                 [clone]=\"true\"\n                 (click)=\"setHour($event, hour?.data)\">{{hour?.displayText}}</div>\n        </div>\n    </div>\n\n    <div class=\"minute-second-separator\">:</div>\n\n    <div class=\"value-container\"\n         [clickOutside]=\"true\"\n         (clickOutsideChange)=\"minutesOpen = false\"\n         [clickOutsideElement]=\"minutesScroll\">\n        <div #minutesScroll\n             class=\"roller-scroll\"\n             [class.open]=\"minutesOpen\"\n             [loopScroll]=\"minute\"\n             [open]=\"minutesOpen\"\n             (loopScrollChange)=\"setMinute(null, $event)\"\n             (click)=\"minutesOpen = !minutesOpen\">\n            <div *ngFor=\"let minute of minutes | slice: -15\"\n                 [loopScrollData]=\"minute?.data\"\n                 [clone]=\"true\"\n                 (click)=\"setMinute($event, minute?.data)\">{{minute?.displayText}}</div>\n\n            <div *ngFor=\"let minute of minutes\"\n                 [loopScrollData]=\"minute?.data\"\n                 (click)=\"setMinute($event, minute?.data)\">{{minute?.displayText}}</div>\n\n            <div *ngFor=\"let minute of minutes | slice: 0: 15\"\n                 [loopScrollData]=\"minute?.data\"\n                 [clone]=\"true\"\n                 (click)=\"setMinute($event, minute?.data)\">{{minute?.displayText}}</div>\n        </div>\n    </div>\n</div>\n"]}

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

@@ -1,6 +1,6 @@
 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 { ContentChildren, Directive, ElementRef, EventEmitter, HostListener, Input, Output, QueryList } from '@angular/core';
+import { DebounceCall, isBlank, nameof } from '@jscrpt/common';
 import { LoopScrollDataDirective } from '../loopScrollData/loopScrollData.directive';
 import * as i0 from "@angular/core";
 /**
@@ -15,9 +15,9 @@ export class LoopScrollDirective {
          */
         this._initialized = false;
         /**
-         * Indication whether is opening active
+         * Count of cloned elements before or after
          */
-        this._opening = false;
+        this._clonedCount = 0;
         /**
          * Indication whether is currently selection scroll open
          */
@@ -38,23 +38,21 @@ export class LoopScrollDirective {
         }
         const itemHeight = this._itemHeight ?? 1;
         if (nameof('open') in changes) {
-            let scrollOffset = this._scrollElement.nativeElement.scrollTop + (2 * itemHeight);
+            if (this.open) {
+                this._scrollElement.nativeElement.scrollTo({ top: this._scrollElement.nativeElement.scrollTop - (2 * itemHeight), behavior: 'auto' });
+                return;
+            }
             if (nameof('value') in changes) {
-                const selectedItem = this._items?.find(itm => itm.data == this.value);
+                const selectedItem = this._dataItems?.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' });
+                const selectedIndex = this._dataItems.indexOf(selectedItem);
+                this._scrollElement.nativeElement.scrollTo({ top: (selectedIndex + this._clonedCount) * itemHeight, behavior: 'auto' });
             }
             else {
-                this._scrollElement.nativeElement.scrollTo({ top: scrollOffset, behavior: 'auto' });
+                this._scrollElement.nativeElement.scrollTo({ top: this._scrollElement.nativeElement.scrollTop + (2 * itemHeight), behavior: 'auto' });
             }
-            setTimeout(() => this._opening = false, 300);
         }
     }
     //######################### public methods - implementation of AfterContentInit #########################
@@ -63,31 +61,28 @@ export class LoopScrollDirective {
      */
     ngAfterContentInit() {
         this._items = this.items?.toArray();
-        if (!this._items?.length) {
+        this._dataItems = this._items?.filter(itm => !itm.clone);
+        if (!this._dataItems?.length) {
             this.items?.changes.subscribe(() => {
                 this._items = this.items?.toArray();
+                this._dataItems = this._items?.filter(itm => !itm.clone);
                 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) {
+        const cloned = this._items?.filter(itm => itm.clone) ?? [];
+        this._clonedCount = cloned.length / 2;
+        if (!this._dataItems?.length) {
             return;
         }
-        this._items.forEach(itm => {
+        this._dataItems.forEach(itm => {
             if (isBlank(this._itemHeight)) {
                 this._itemHeight = itm.element.nativeElement.offsetHeight;
                 return;
@@ -96,81 +91,47 @@ export class LoopScrollDirective {
                 throw new Error('All items inside of loop scroll should have same height');
             }
         });
-        this._centerActiveValue();
-        this._scrollElement.nativeElement.addEventListener('scroll', this._handleScroll);
+        this._scrollElement.nativeElement.scrollTo({ top: this._itemHeight * this._clonedCount });
         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);
-        }
+        requestAnimationFrame(() => {
+            if (!this._dataItems) {
+                return;
+            }
+            const index = this._scrollElement.nativeElement.scrollTop / (this._itemHeight ?? 1);
+            const dataIndex = index + (this.open ? 2 : 0) - this._clonedCount;
+            const dataLength = (this._itemHeight ?? 1) * this._dataItems.length;
+            if (dataIndex <= -1) {
+                this._updateScroll(dataLength, true, index);
+            }
+            else if (dataIndex >= (this._dataItems.length ?? 0)) {
+                this._updateScroll(dataLength, false, index);
+            }
+        });
     }
     /**
-     * Centers active value
+     * Updates scroll to be at full value of item
+     * @param dataLength - Length of all data
+     * @param add - Indication whether add or subtract length
+     * @param index - Current index
      */
-    _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' });
+    _updateScroll(dataLength, add, index) {
+        this._scrollElement.nativeElement.scrollTo({ top: (Math.round(index) * (this._itemHeight ?? 1)) + (add ? dataLength : (dataLength * -1)), behavior: 'auto' });
+        //TODO emit value change
     }
 }
 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 });
+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" }, host: { listeners: { "scroll": "_handleScroll()" } }, queries: [{ propertyName: "items", predicate: LoopScrollDataDirective }], usesOnChanges: true, ngImport: i0 });
 __decorate([
-    BindThis,
-    DebounceCall(40),
+    DebounceCall(18),
     __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
+    __metadata("design:paramtypes", [Number, Boolean, Number]),
     __metadata("design:returntype", void 0)
-], LoopScrollDirective.prototype, "_handleScroll", null);
+], LoopScrollDirective.prototype, "_updateScroll", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LoopScrollDirective, decorators: [{
             type: Directive,
             args: [{
@@ -187,5 +148,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
             }], items: [{
                 type: ContentChildren,
                 args: [LoopScrollDataDirective]
-            }], _handleScroll: [] } });
+            }], _handleScroll: [{
+                type: HostListener,
+                args: ['scroll']
+            }], _updateScroll: [] } });
 //# sourceMappingURL=loopScroll.directive.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"loopScroll.directive.js","sourceRoot":"","sources":["../../../../../src/picker/directives/loopScroll/loopScroll.directive.ts"],"names":[],"mappings":";AAAA,OAAO,EAAmB,eAAe,EAAE,SAAS,EAAE,UAAU,EAAE,YAAY,EAAE,KAAK,EAAwB,MAAM,EAAE,SAAS,EAAgB,MAAM,eAAe,CAAC;AACpK,OAAO,EAAC,QAAQ,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,EAAC,MAAM,gBAAgB,CAAC;AAEvE,OAAO,EAAC,uBAAuB,EAAC,MAAM,4CAA4C,CAAC;;AAEnF;;GAEG;AAKH,MAAM,OAAO,mBAAmB;IAsD5B,iEAAiE;IACjE,YAAsB,cAAuC;QAAvC,mBAAc,GAAd,cAAc,CAAyB;QAzC7D;;WAEG;QACO,iBAAY,GAAY,KAAK,CAAC;QAExC;;WAEG;QACO,aAAQ,GAAY,KAAK,CAAC;QAUpC;;WAEG;QAEI,SAAI,GAAY,KAAK,CAAC;QAE7B,iFAAiF;QAEjF;;WAEG;QAEI,gBAAW,GAAwB,IAAI,YAAY,EAAS,CAAC;IAapE,CAAC;IAED,kGAAkG;IAElG;;OAEG;IACI,WAAW,CAAC,OAAsB;QAErC,IAAG,CAAC,IAAI,CAAC,YAAY,EACrB;YACI,OAAO;SACV;QAED,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC;QAEzC,IAAG,MAAM,CAAsB,MAAM,CAAC,IAAI,OAAO,EACjD;YACI,IAAI,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC;YAElF,IAAG,MAAM,CAAsB,OAAO,CAAC,IAAI,OAAO,EAClD;gBACI,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;gBAEtE,IAAG,CAAC,YAAY,EAChB;oBACI,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;iBACtD;gBAED,MAAM,aAAa,GAAG,IAAI,CAAC,MAAO,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;gBACzD,YAAY,GAAG,aAAa,GAAG,UAAU,CAAC;aAC7C;YAED,IAAG,IAAI,CAAC,IAAI,EACZ;gBACI,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;gBAErB,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAC,GAAG,EAAE,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAC,CAAC,CAAC;aACvI;iBAED;gBACI,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAC,GAAG,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,EAAC,CAAC,CAAC;aACrF;YAED,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,KAAK,EAAE,GAAG,CAAC,CAAC;SAChD;IACL,CAAC;IAED,yGAAyG;IAEzG;;OAEG;IACI,kBAAkB;QAErB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC;QAEpC,IAAG,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,EACvB;YACI,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,EAAE;gBAE/B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC;gBAEpC,IAAI,CAAC,WAAW,EAAE,CAAC;YACvB,CAAC,CAAC,CAAC;YAEH,OAAO;SACV;QAED,IAAI,CAAC,WAAW,EAAE,CAAC;IACvB,CAAC;IAED,kGAAkG;IAElG;;OAEG;IACI,WAAW;QAEd,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IACxF,CAAC;IAED,uEAAuE;IAEvE;;OAEG;IACO,WAAW;QAEjB,IAAG,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,EACvB;YACI,OAAO;SACV;QAED,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YAEtB,IAAG,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,EAC5B;gBACI,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC,OAAO,CAAC,aAAa,CAAC,YAAY,CAAC;gBAE1D,OAAO;aACV;YAED,IAAG,IAAI,CAAC,WAAW,IAAI,GAAG,CAAC,OAAO,CAAC,aAAa,CAAC,YAAY,EAC7D;gBACI,MAAM,IAAI,KAAK,CAAC,yDAAyD,CAAC,CAAC;aAC9E;QACL,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACjF,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;IAC7B,CAAC;IAED;;OAEG;IACO,aAAa;QAEnB,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,SAAS,CAAC;QACjE,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,YAAY,CAAC;QACpE,MAAM,gBAAgB,GAAG,YAAY,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,CAAC,CAAC;QACtE,MAAM,SAAS,GAAG,gBAAgB,GAAG,CAAC,CAAC;QACvC,MAAM,SAAS,GAAG,gBAAgB,GAAG,GAAG,CAAC;QACzC,IAAI,aAAa,GAAgB,IAAI,CAAC;QAEtC,eAAe;QACf,IAAG,YAAY,IAAI,SAAS,GAAG,SAAS;YACrC,YAAY,IAAI,SAAS,GAAG,SAAS,EACxC;YACI,aAAa,GAAG,SAAS,GAAG,YAAY,CAAC;SAC5C;aAED;YACI,OAAO;SACV;QAED,yBAAyB;QACzB,IAAG,aAAa,IAAI,CAAC,EACrB;YACI,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,CAAC,CAAC;YAC1E,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,aAAa,EAAE,aAAa,CAAC,CAAC;YAE1F,UAAU,EAAE,OAAO,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;gBAEhC,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;gBACrE,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC;YAC9B,CAAC,CAAC,CAAC;SACN;QACD,yBAAyB;aAEzB;YACI,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,CAAC,CAAC;YACjF,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC;YAEzD,UAAU,EAAE,OAAO,CAAC,GAAG,CAAC,EAAE;gBAEtB,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;gBACpE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;YAC3B,CAAC,CAAC,CAAC;SACN;IACL,CAAC;IAED;;OAEG;IAGO,aAAa;QAEnB,IAAI,CAAC,aAAa,EAAE,CAAC;QAErB,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC;QACzC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,SAAS,GAAG,UAAU,CAAC,CAAC;QAEnF,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAC,GAAG,EAAE,KAAK,GAAG,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAC,CAAC,CAAC;QAExF,IAAG,CAAC,IAAI,CAAC,QAAQ,EACjB;YACI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC;SAC9E;IACL,CAAC;IAED;;OAEG;IACO,kBAAkB;QAExB,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;QAEtE,IAAG,CAAC,YAAY,EAChB;YACI,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;SACtD;QAED,YAAY,EAAE,OAAO,CAAC,aAAa,CAAC,cAAc,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAC,CAAC,CAAC;QACtE,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,YAAY,EAAE,OAAO,CAAC,aAAa,CAAC,cAAc,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAC,CAAC,CAAC;IAC1E,CAAC;;gHA/PQ,mBAAmB;oGAAnB,mBAAmB,kLAmDX,uBAAuB;AA8KxC;IAFC,QAAQ;IACR,YAAY,CAAC,EAAE,CAAC;;;;wDAchB;2FA9OQ,mBAAmB;kBAJ/B,SAAS;mBACV;oBACI,QAAQ,EAAE,cAAc;iBAC3B;iGA+BU,KAAK;sBADX,KAAK;uBAAC,YAAY;gBAOZ,IAAI;sBADV,KAAK;gBASC,WAAW;sBADjB,MAAM;uBAAC,kBAAkB;gBASnB,KAAK;sBADX,eAAe;uBAAC,uBAAuB;gBA8K9B,aAAa","sourcesContent":["import {AfterContentInit, ContentChildren, Directive, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, Output, QueryList, SimpleChanges} from '@angular/core';\nimport {BindThis, isBlank, DebounceCall, nameof} from '@jscrpt/common';\n\nimport {LoopScrollDataDirective} from '../loopScrollData/loopScrollData.directive';\n\n/**\n * Renders loop scroll for array of elements\n */\n@Directive(\n{\n    selector: '[loopScroll]'\n})\nexport class LoopScrollDirective<TData = any> implements OnChanges, AfterContentInit, OnDestroy\n{\n    //######################### protected fields #########################\n\n    /**\n     * Item height that obtained\n     */\n    protected _itemHeight?: number;\n\n    /**\n     * Array of elements and data for scrolled stuff\n     */\n    protected _items?: LoopScrollDataDirective[];\n\n    /**\n     * Indication whether is loop scroll initialized\n     */\n    protected _initialized: boolean = false;\n\n    /**\n     * Indication whether is opening active\n     */\n    protected _opening: boolean = false;\n\n    //######################### public properties - inputs #########################\n\n    /**\n     * Value that is being set in loop scroll\n     */\n    @Input('loopScroll')\n    public value?: TData;\n\n    /**\n     * Indication whether is currently selection scroll open\n     */\n    @Input()\n    public open: boolean = false;\n\n    //######################### public properties - outputs #########################\n\n    /**\n     * Occurs when current value of loop scroll changes\n     */\n    @Output('loopScrollChange')\n    public valueChange: EventEmitter<TData> = new EventEmitter<TData>();\n\n    //######################### public properties - children #########################\n\n    /**\n     * Array of items that are loop scrolled\n     */\n    @ContentChildren(LoopScrollDataDirective)\n    public items?: QueryList<LoopScrollDataDirective>;\n\n    //######################### constructor #########################\n    constructor(protected _scrollElement: ElementRef<HTMLElement>)\n    {\n    }\n\n    //######################### public methods - implementation of OnChanges #########################\n    \n    /**\n     * Called when input value changes\n     */\n    public ngOnChanges(changes: SimpleChanges): void\n    {\n        if(!this._initialized)\n        {\n            return;\n        }\n\n        const itemHeight = this._itemHeight ?? 1;\n\n        if(nameof<LoopScrollDirective>('open') in changes)\n        {\n            let scrollOffset = this._scrollElement.nativeElement.scrollTop + (2 * itemHeight);\n\n            if(nameof<LoopScrollDirective>('value') in changes)\n            {\n                const selectedItem = this._items?.find(itm => itm.data == this.value);\n\n                if(!selectedItem)\n                {\n                    throw new Error('No item selected in loop scroll');\n                }\n\n                const selectedIndex = this._items!.indexOf(selectedItem);\n                scrollOffset = selectedIndex * itemHeight;\n            }\n\n            if(this.open)\n            {\n                this._opening = true;\n\n                this._scrollElement.nativeElement.scrollTo({top: this._scrollElement.nativeElement.scrollTop - (2 * itemHeight), behavior: 'auto'});\n            }\n            else\n            {\n                this._scrollElement.nativeElement.scrollTo({top: scrollOffset, behavior: 'auto'});\n            }\n\n            setTimeout(() => this._opening = false, 300);\n        }\n    }\n\n    //######################### public methods - implementation of AfterContentInit #########################\n    \n    /**\n     * Called when content was initialized\n     */\n    public ngAfterContentInit(): void\n    {\n        this._items = this.items?.toArray();\n\n        if(!this._items?.length)\n        {\n            this.items?.changes.subscribe(() =>\n            {\n                this._items = this.items?.toArray();\n\n                this._initialize();\n            });\n\n            return;\n        }\n\n        this._initialize();\n    }\n\n    //######################### public methods - implementation of OnDestroy #########################\n    \n    /**\n     * Called when component is destroyed\n     */\n    public ngOnDestroy(): void\n    {\n        this._scrollElement.nativeElement.removeEventListener('scroll', this._handleScroll);\n    }\n\n    //######################### protected methods #########################\n\n    /**\n     * Intialize default value\n     */\n    protected _initialize(): void\n    {\n        if(!this._items?.length)\n        {\n            return;\n        }\n\n        this._items.forEach(itm =>\n        {\n            if(isBlank(this._itemHeight))\n            {\n                this._itemHeight = itm.element.nativeElement.offsetHeight;\n\n                return;\n            }\n\n            if(this._itemHeight != itm.element.nativeElement.offsetHeight)\n            {\n                throw new Error('All items inside of loop scroll should have same height');\n            }\n        });\n\n        this._centerActiveValue();\n        this._scrollElement.nativeElement.addEventListener('scroll', this._handleScroll);\n        this._initialized = true;\n    }\n\n    /**\n     * Reorders items to make number of items around scroll view equally sized\n     */\n    protected _reorderItems(): void\n    {\n        const scrollOffset = this._scrollElement.nativeElement.scrollTop;\n        const scrollHeight = this._scrollElement.nativeElement.scrollHeight;\n        const scrollableHeight = scrollHeight - (5 * (this._itemHeight ?? 0));\n        const scrollMid = scrollableHeight / 2;\n        const threshold = scrollableHeight * .25;\n        let reorderOffset: number|null = null;\n\n        //reorder items\n        if(scrollOffset <= scrollMid - threshold ||\n           scrollOffset >= scrollMid + threshold)\n        {\n            reorderOffset = scrollMid - scrollOffset;\n        }\n        else\n        {\n            return;\n        }\n\n        //move end items to start\n        if(reorderOffset >= 0)\n        {\n            const numberOfItems = Math.floor(reorderOffset / (this._itemHeight ?? 1));\n            const movedItems = this._items?.splice(this._items.length - numberOfItems, numberOfItems);\n\n            movedItems?.reverse().forEach(itm =>\n            {\n                this._scrollElement.nativeElement.prepend(itm.element.nativeElement);\n                this._items?.unshift(itm);\n            });\n        }\n        //move start items to end\n        else\n        {\n            const numberOfItems = Math.floor((reorderOffset * -1) / (this._itemHeight ?? 1));\n            const movedItems = this._items?.splice(0, numberOfItems);\n\n            movedItems?.forEach(itm =>\n            {\n                this._scrollElement.nativeElement.append(itm.element.nativeElement);\n                this._items?.push(itm);\n            });\n        }\n    }\n\n    /**\n     * Handles scroll event\n     */\n    @BindThis\n    @DebounceCall(40)\n    protected _handleScroll(): void\n    {\n        this._reorderItems();\n\n        const itemHeight = this._itemHeight ?? 1;\n        const index = Math.round(this._scrollElement.nativeElement.scrollTop / itemHeight);\n\n        this._scrollElement.nativeElement.scrollTo({top: index * itemHeight, behavior: 'auto'});\n\n        if(!this._opening)\n        {\n            this.valueChange.emit(this._items?.[this.open ? (index + 2) : index].data);\n        }\n    }\n\n    /**\n     * Centers active value\n     */\n    protected _centerActiveValue(): void\n    {\n        const selectedItem = this._items?.find(itm => itm.data == this.value);\n\n        if(!selectedItem)\n        {\n            throw new Error('No item selected in loop scroll');\n        }\n\n        selectedItem?.element.nativeElement.scrollIntoView({block: 'center'});\n        this._reorderItems();\n        selectedItem?.element.nativeElement.scrollIntoView({block: 'center'});\n    }\n}"]}
+{"version":3,"file":"loopScroll.directive.js","sourceRoot":"","sources":["../../../../../src/picker/directives/loopScroll/loopScroll.directive.ts"],"names":[],"mappings":"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","sourcesContent":["import {AfterContentInit, ContentChildren, Directive, ElementRef, EventEmitter, HostListener, Input, OnChanges, Output, QueryList, SimpleChanges} from '@angular/core';\nimport {DebounceCall, isBlank, nameof} from '@jscrpt/common';\n\nimport {LoopScrollDataDirective} from '../loopScrollData/loopScrollData.directive';\n\n/**\n * Renders loop scroll for array of elements\n */\n@Directive(\n{\n    selector: '[loopScroll]'\n})\nexport class LoopScrollDirective<TData = any> implements OnChanges, AfterContentInit\n{\n    //######################### protected fields #########################\n\n    /**\n     * Item height that obtained\n     */\n    protected _itemHeight?: number;\n\n    /**\n     * Array of elements for scrolled stuff\n     */\n    protected _items?: LoopScrollDataDirective[];\n\n    /**\n     * Array of elements and data for scrolled stuff\n     */ \n    protected _dataItems?: LoopScrollDataDirective[];\n\n    /**\n     * Indication whether is loop scroll initialized\n     */\n    protected _initialized: boolean = false;\n\n    /**\n     * Count of cloned elements before or after\n     */\n    protected _clonedCount: number = 0;\n\n    //######################### public properties - inputs #########################\n\n    /**\n     * Value that is being set in loop scroll\n     */\n    @Input('loopScroll')\n    public value?: TData;\n\n    /**\n     * Indication whether is currently selection scroll open\n     */\n    @Input()\n    public open: boolean = false;\n\n    //######################### public properties - outputs #########################\n\n    /**\n     * Occurs when current value of loop scroll changes\n     */\n    @Output('loopScrollChange')\n    public valueChange: EventEmitter<TData> = new EventEmitter<TData>();\n\n    //######################### protected properties - children #########################\n\n    /**\n     * Array of items that are loop scrolled\n     */\n    @ContentChildren(LoopScrollDataDirective)\n    protected items?: QueryList<LoopScrollDataDirective>;\n\n    //######################### constructor #########################\n    constructor(protected _scrollElement: ElementRef<HTMLElement>)\n    {\n    }\n\n    //######################### public methods - implementation of OnChanges #########################\n    \n    /**\n     * Called when input value changes\n     */\n    public ngOnChanges(changes: SimpleChanges): void\n    {\n        if(!this._initialized)\n        {\n            return;\n        }\n\n        const itemHeight = this._itemHeight ?? 1;\n\n        if(nameof<LoopScrollDirective>('open') in changes)\n        {\n            if(this.open)\n            {\n                this._scrollElement.nativeElement.scrollTo({top: this._scrollElement.nativeElement.scrollTop - (2 * itemHeight), behavior: 'auto'});\n\n                return;\n            }\n\n            if(nameof<LoopScrollDirective>('value') in changes)\n            {\n                const selectedItem = this._dataItems?.find(itm => itm.data == this.value);\n\n                if(!selectedItem)\n                {\n                    throw new Error('No item selected in loop scroll');\n                }\n\n                const selectedIndex = this._dataItems!.indexOf(selectedItem);\n\n                this._scrollElement.nativeElement.scrollTo({top: (selectedIndex + this._clonedCount) * itemHeight, behavior: 'auto'});\n            }\n            else\n            {\n                this._scrollElement.nativeElement.scrollTo({top: this._scrollElement.nativeElement.scrollTop + (2 * itemHeight), behavior: 'auto'});\n            }\n        }\n    }\n\n    //######################### public methods - implementation of AfterContentInit #########################\n    \n    /**\n     * Called when content was initialized\n     */\n    public ngAfterContentInit(): void\n    {\n        this._items = this.items?.toArray();\n        this._dataItems = this._items?.filter(itm => !itm.clone);\n\n        if(!this._dataItems?.length)\n        {\n            this.items?.changes.subscribe(() =>\n            {\n                this._items = this.items?.toArray();\n                this._dataItems = this._items?.filter(itm => !itm.clone);\n\n                this._initialize();\n            });\n\n            return;\n        }\n\n        this._initialize();\n    }\n\n    //######################### protected methods #########################\n\n    /**\n     * Intialize default value\n     */\n    protected _initialize(): void\n    {\n        const cloned = this._items?.filter(itm => itm.clone) ?? [];\n        this._clonedCount = cloned.length / 2;\n\n        if(!this._dataItems?.length)\n        {\n            return;\n        }\n\n        this._dataItems.forEach(itm =>\n        {\n            if(isBlank(this._itemHeight))\n            {\n                this._itemHeight = itm.element.nativeElement.offsetHeight;\n\n                return;\n            }\n\n            if(this._itemHeight != itm.element.nativeElement.offsetHeight)\n            {\n                throw new Error('All items inside of loop scroll should have same height');\n            }\n        });\n\n        this._scrollElement.nativeElement.scrollTo({top: this._itemHeight! * this._clonedCount});\n        this._initialized = true;\n    }\n\n    /**\n     * Handles scroll event\n     */\n    @HostListener('scroll')\n    protected _handleScroll(): void\n    {\n        requestAnimationFrame(() =>\n        {\n            if(!this._dataItems)\n            {\n                return;\n            }\n\n            const index = this._scrollElement.nativeElement.scrollTop / (this._itemHeight ?? 1);\n            const dataIndex = index + (this.open ? 2 : 0) - this._clonedCount;\n            const dataLength = (this._itemHeight ?? 1) * this._dataItems.length;\n\n            if(dataIndex <= -1)\n            {\n                this._updateScroll(dataLength, true, index);\n            }\n            else if(dataIndex >= (this._dataItems.length ?? 0))\n            {\n                this._updateScroll(dataLength, false, index);\n            }\n        });\n    }\n\n    /**\n     * Updates scroll to be at full value of item\n     * @param dataLength - Length of all data\n     * @param add - Indication whether add or subtract length\n     * @param index - Current index\n     */\n    @DebounceCall(18)\n    protected _updateScroll(dataLength: number, add: boolean, index: number): void\n    {\n        this._scrollElement.nativeElement.scrollTo({top: (Math.round(index) * (this._itemHeight ?? 1)) + (add ? dataLength : (dataLength * -1)), behavior: 'auto'});\n\n        //TODO emit value change\n    }\n}"]}

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

@@ -7,10 +7,14 @@ export class LoopScrollDataDirective {
     //######################### constructor #########################
     constructor(element) {
         this.element = element;
+        /**
+         * Indication that this node is clone
+         */
+        this.clone = false;
     }
 }
 LoopScrollDataDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LoopScrollDataDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-LoopScrollDataDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: LoopScrollDataDirective, selector: "[loopScrollData]", inputs: { data: ["loopScrollData", "data"] }, ngImport: i0 });
+LoopScrollDataDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: LoopScrollDataDirective, selector: "[loopScrollData]", inputs: { data: ["loopScrollData", "data"], clone: "clone" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LoopScrollDataDirective, decorators: [{
             type: Directive,
             args: [{
@@ -19,5 +23,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { data: [{
                 type: Input,
                 args: ['loopScrollData']
+            }], clone: [{
+                type: Input
             }] } });
 //# sourceMappingURL=loopScrollData.directive.js.map

package/es2020/src/picker/directives/loopScrollData/loopScrollData.directive.js.map

@@ -1 +1 @@
-{"version":3,"file":"loopScrollData.directive.js","sourceRoot":"","sources":["../../../../../src/picker/directives/loopScrollData/loopScrollData.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,UAAU,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;;AAE3D;;GAEG;AAKH,MAAM,OAAO,uBAAuB;IAUhC,iEAAiE;IACjE,YAAmB,OAAgC;QAAhC,YAAO,GAAP,OAAO,CAAyB;IAEnD,CAAC;;oHAbQ,uBAAuB;wGAAvB,uBAAuB;2FAAvB,uBAAuB;kBAJnC,SAAS;mBACV;oBACI,QAAQ,EAAE,kBAAkB;iBAC/B;iGASU,IAAI;sBADV,KAAK;uBAAC,gBAAgB","sourcesContent":["import {Directive, ElementRef, Input} from '@angular/core';\n\n/**\n * Loop scroll data that are used inside LoopScrollDirective\n */\n@Directive(\n{\n    selector: '[loopScrollData]'\n})\nexport class LoopScrollDataDirective<TData = any>\n{\n    //######################### public properties - inputs #########################\n\n    /**\n     * Data for loop\n     */\n    @Input('loopScrollData')\n    public data!: TData;\n\n    //######################### constructor #########################\n    constructor(public element: ElementRef<HTMLElement>)\n    {\n    }\n}"]}
+{"version":3,"file":"loopScrollData.directive.js","sourceRoot":"","sources":["../../../../../src/picker/directives/loopScrollData/loopScrollData.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,UAAU,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;;AAE3D;;GAEG;AAKH,MAAM,OAAO,uBAAuB;IAgBhC,iEAAiE;IACjE,YAAmB,OAAgC;QAAhC,YAAO,GAAP,OAAO,CAAyB;QAPnD;;WAEG;QAEI,UAAK,GAAY,KAAK,CAAC;IAK9B,CAAC;;oHAnBQ,uBAAuB;wGAAvB,uBAAuB;2FAAvB,uBAAuB;kBAJnC,SAAS;mBACV;oBACI,QAAQ,EAAE,kBAAkB;iBAC/B;iGASU,IAAI;sBADV,KAAK;uBAAC,gBAAgB;gBAOhB,KAAK;sBADX,KAAK","sourcesContent":["import {Directive, ElementRef, Input} from '@angular/core';\n\n/**\n * Loop scroll data that are used inside LoopScrollDirective\n */\n@Directive(\n{\n    selector: '[loopScrollData]'\n})\nexport class LoopScrollDataDirective<TData = any>\n{\n    //######################### public properties - inputs #########################\n\n    /**\n     * Data for loop\n     */\n    @Input('loopScrollData')\n    public data!: TData;\n\n    /**\n     * Indication that this node is clone\n     */\n    @Input()\n    public clone: boolean = false;\n\n    //######################### constructor #########################\n    constructor(public element: ElementRef<HTMLElement>)\n    {\n    }\n}"]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@anglr/datetime",
-    "version": "3.0.0-beta.20220328062817",
+    "version": "3.0.0-beta.20220503131853",
     "description": "Angular library for datetime manipulation components",
     "type": "module",
     "sideEffects": false,

package/src/picker/components/rollerTimePicker/rollerTimePicker.component.css

@@ -24,6 +24,18 @@
     background-color: #666666;
     transition: all 250ms;
     border-radius: 4px;
+    scroll-snap-type: y mandatory;
+    contain: content;
+}
+
+.roller-scroll::-webkit-scrollbar
+{
+    display: none;
+}
+
+.roller-scroll>div
+{
+    scroll-snap-align: start;
 }
 
 .roller-scroll.open

package/src/picker/components/rollerTimePicker/rollerTimePicker.component.html

@@ -13,10 +13,20 @@
              [loopScroll]="hour"
              [open]="hoursOpen"
              (loopScrollChange)="setHour(null, $event)"
-             (click)="hoursOpen = !hoursOpen" >
+             (click)="hoursOpen = !hoursOpen">
+            <div *ngFor="let hour of hours | slice: -9"
+                 [loopScrollData]="hour?.data"
+                 [clone]="true"
+                 (click)="setHour($event, hour?.data)">{{hour?.displayText}}</div>
+
             <div *ngFor="let hour of hours"
                  [loopScrollData]="hour?.data"
                  (click)="setHour($event, hour?.data)">{{hour?.displayText}}</div>
+
+            <div *ngFor="let hour of hours | slice: 0: 9"
+                 [loopScrollData]="hour?.data"
+                 [clone]="true"
+                 (click)="setHour($event, hour?.data)">{{hour?.displayText}}</div>
         </div>
     </div>
 
@@ -33,9 +43,19 @@
              [open]="minutesOpen"
              (loopScrollChange)="setMinute(null, $event)"
              (click)="minutesOpen = !minutesOpen">
+            <div *ngFor="let minute of minutes | slice: -15"
+                 [loopScrollData]="minute?.data"
+                 [clone]="true"
+                 (click)="setMinute($event, minute?.data)">{{minute?.displayText}}</div>
+
             <div *ngFor="let minute of minutes"
                  [loopScrollData]="minute?.data"
                  (click)="setMinute($event, minute?.data)">{{minute?.displayText}}</div>
+
+            <div *ngFor="let minute of minutes | slice: 0: 15"
+                 [loopScrollData]="minute?.data"
+                 [clone]="true"
+                 (click)="setMinute($event, minute?.data)">{{minute?.displayText}}</div>
         </div>
     </div>
 </div>

package/src/picker/directives/loopScroll/loopScroll.directive.d.ts

@@ -1,27 +1,31 @@
-import { AfterContentInit, ElementRef, EventEmitter, OnChanges, OnDestroy, QueryList, SimpleChanges } from '@angular/core';
+import { AfterContentInit, ElementRef, EventEmitter, OnChanges, QueryList, SimpleChanges } from '@angular/core';
 import { LoopScrollDataDirective } from '../loopScrollData/loopScrollData.directive';
 import * as i0 from "@angular/core";
 /**
  * Renders loop scroll for array of elements
  */
-export declare class LoopScrollDirective<TData = any> implements OnChanges, AfterContentInit, OnDestroy {
+export declare class LoopScrollDirective<TData = any> implements OnChanges, AfterContentInit {
     protected _scrollElement: ElementRef<HTMLElement>;
     /**
      * Item height that obtained
      */
     protected _itemHeight?: number;
     /**
-     * Array of elements and data for scrolled stuff
+     * Array of elements for scrolled stuff
      */
     protected _items?: LoopScrollDataDirective[];
+    /**
+     * Array of elements and data for scrolled stuff
+     */
+    protected _dataItems?: LoopScrollDataDirective[];
     /**
      * Indication whether is loop scroll initialized
      */
     protected _initialized: boolean;
     /**
-     * Indication whether is opening active
+     * Count of cloned elements before or after
      */
-    protected _opening: boolean;
+    protected _clonedCount: number;
     /**
      * Value that is being set in loop scroll
      */
@@ -37,7 +41,7 @@ export declare class LoopScrollDirective<TData = any> implements OnChanges, Afte
     /**
      * Array of items that are loop scrolled
      */
-    items?: QueryList<LoopScrollDataDirective>;
+    protected items?: QueryList<LoopScrollDataDirective>;
     constructor(_scrollElement: ElementRef<HTMLElement>);
     /**
      * Called when input value changes
@@ -47,26 +51,21 @@ export declare class LoopScrollDirective<TData = any> implements OnChanges, Afte
      * Called when content was initialized
      */
     ngAfterContentInit(): void;
-    /**
-     * Called when component is destroyed
-     */
-    ngOnDestroy(): void;
     /**
      * Intialize default value
      */
     protected _initialize(): void;
-    /**
-     * Reorders items to make number of items around scroll view equally sized
-     */
-    protected _reorderItems(): void;
     /**
      * Handles scroll event
      */
     protected _handleScroll(): void;
     /**
-     * Centers active value
+     * Updates scroll to be at full value of item
+     * @param dataLength - Length of all data
+     * @param add - Indication whether add or subtract length
+     * @param index - Current index
      */
-    protected _centerActiveValue(): void;
+    protected _updateScroll(dataLength: number, add: boolean, index: number): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LoopScrollDirective<any>, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<LoopScrollDirective<any>, "[loopScroll]", never, { "value": "loopScroll"; "open": "open"; }, { "valueChange": "loopScrollChange"; }, ["items"]>;
 }

package/src/picker/directives/loopScroll/loopScroll.directive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loopScroll.directive.d.ts","sourceRoot":"","sources":["loopScroll.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAA8B,UAAU,EAAE,YAAY,EAAS,SAAS,EAAE,SAAS,EAAU,SAAS,EAAE,aAAa,EAAC,MAAM,eAAe,CAAC;AAGpK,OAAO,EAAC,uBAAuB,EAAC,MAAM,4CAA4C,CAAC;;AAEnF;;GAEG;AACH,qBAIa,mBAAmB,CAAC,KAAK,GAAG,GAAG,CAAE,YAAW,SAAS,EAAE,gBAAgB,EAAE,SAAS;IAuD/E,SAAS,CAAC,cAAc,EAAE,UAAU,CAAC,WAAW,CAAC;IAnD7D;;OAEG;IACH,SAAS,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAE/B;;OAEG;IACH,SAAS,CAAC,MAAM,CAAC,EAAE,uBAAuB,EAAE,CAAC;IAE7C;;OAEG;IACH,SAAS,CAAC,YAAY,EAAE,OAAO,CAAS;IAExC;;OAEG;IACH,SAAS,CAAC,QAAQ,EAAE,OAAO,CAAS;IAIpC;;OAEG;IAEI,KAAK,CAAC,EAAE,KAAK,CAAC;IAErB;;OAEG;IAEI,IAAI,EAAE,OAAO,CAAS;IAI7B;;OAEG;IAEI,WAAW,EAAE,YAAY,CAAC,KAAK,CAAC,CAA6B;IAIpE;;OAEG;IAEI,KAAK,CAAC,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAC;gBAG5B,cAAc,EAAE,UAAU,CAAC,WAAW,CAAC;IAM7D;;OAEG;IACI,WAAW,CAAC,OAAO,EAAE,aAAa,GAAG,IAAI;IA2ChD;;OAEG;IACI,kBAAkB,IAAI,IAAI;IAqBjC;;OAEG;IACI,WAAW,IAAI,IAAI;IAO1B;;OAEG;IACH,SAAS,CAAC,WAAW,IAAI,IAAI;IA2B7B;;OAEG;IACH,SAAS,CAAC,aAAa,IAAI,IAAI;IA8C/B;;OAEG;IAGH,SAAS,CAAC,aAAa,IAAI,IAAI;IAe/B;;OAEG;IACH,SAAS,CAAC,kBAAkB,IAAI,IAAI;yCAnP3B,mBAAmB;2CAAnB,mBAAmB;CAgQ/B"}
+{"version":3,"file":"loopScroll.directive.d.ts","sourceRoot":"","sources":["loopScroll.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAA8B,UAAU,EAAE,YAAY,EAAuB,SAAS,EAAU,SAAS,EAAE,aAAa,EAAC,MAAM,eAAe,CAAC;AAGvK,OAAO,EAAC,uBAAuB,EAAC,MAAM,4CAA4C,CAAC;;AAEnF;;GAEG;AACH,qBAIa,mBAAmB,CAAC,KAAK,GAAG,GAAG,CAAE,YAAW,SAAS,EAAE,gBAAgB;IA4DpE,SAAS,CAAC,cAAc,EAAE,UAAU,CAAC,WAAW,CAAC;IAxD7D;;OAEG;IACH,SAAS,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAE/B;;OAEG;IACH,SAAS,CAAC,MAAM,CAAC,EAAE,uBAAuB,EAAE,CAAC;IAE7C;;OAEG;IACH,SAAS,CAAC,UAAU,CAAC,EAAE,uBAAuB,EAAE,CAAC;IAEjD;;OAEG;IACH,SAAS,CAAC,YAAY,EAAE,OAAO,CAAS;IAExC;;OAEG;IACH,SAAS,CAAC,YAAY,EAAE,MAAM,CAAK;IAInC;;OAEG;IAEI,KAAK,CAAC,EAAE,KAAK,CAAC;IAErB;;OAEG;IAEI,IAAI,EAAE,OAAO,CAAS;IAI7B;;OAEG;IAEI,WAAW,EAAE,YAAY,CAAC,KAAK,CAAC,CAA6B;IAIpE;;OAEG;IAEH,SAAS,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAC;gBAG/B,cAAc,EAAE,UAAU,CAAC,WAAW,CAAC;IAM7D;;OAEG;IACI,WAAW,CAAC,OAAO,EAAE,aAAa,GAAG,IAAI;IAwChD;;OAEG;IACI,kBAAkB,IAAI,IAAI;IAuBjC;;OAEG;IACH,SAAS,CAAC,WAAW,IAAI,IAAI;IA6B7B;;OAEG;IAEH,SAAS,CAAC,aAAa,IAAI,IAAI;IAwB/B;;;;;OAKG;IAEH,SAAS,CAAC,aAAa,CAAC,UAAU,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;yCA1MrE,mBAAmB;2CAAnB,mBAAmB;CAgN/B"}

package/src/picker/directives/loopScrollData/loopScrollData.directive.d.ts

@@ -9,8 +9,12 @@ export declare class LoopScrollDataDirective<TData = any> {
      * Data for loop
      */
     data: TData;
+    /**
+     * Indication that this node is clone
+     */
+    clone: boolean;
     constructor(element: ElementRef<HTMLElement>);
     static ɵfac: i0.ɵɵFactoryDeclaration<LoopScrollDataDirective<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<LoopScrollDataDirective<any>, "[loopScrollData]", never, { "data": "loopScrollData"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<LoopScrollDataDirective<any>, "[loopScrollData]", never, { "data": "loopScrollData"; "clone": "clone"; }, {}, never>;
 }
 //# sourceMappingURL=loopScrollData.directive.d.ts.map

package/src/picker/directives/loopScrollData/loopScrollData.directive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loopScrollData.directive.d.ts","sourceRoot":"","sources":["loopScrollData.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,UAAU,EAAQ,MAAM,eAAe,CAAC;;AAE3D;;GAEG;AACH,qBAIa,uBAAuB,CAAC,KAAK,GAAG,GAAG;IAWzB,OAAO,EAAE,UAAU,CAAC,WAAW,CAAC;IAPnD;;OAEG;IAEI,IAAI,EAAG,KAAK,CAAC;gBAGD,OAAO,EAAE,UAAU,CAAC,WAAW,CAAC;yCAX1C,uBAAuB;2CAAvB,uBAAuB;CAcnC"}
+{"version":3,"file":"loopScrollData.directive.d.ts","sourceRoot":"","sources":["loopScrollData.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,UAAU,EAAQ,MAAM,eAAe,CAAC;;AAE3D;;GAEG;AACH,qBAIa,uBAAuB,CAAC,KAAK,GAAG,GAAG;IAiBzB,OAAO,EAAE,UAAU,CAAC,WAAW,CAAC;IAbnD;;OAEG;IAEI,IAAI,EAAG,KAAK,CAAC;IAEpB;;OAEG;IAEI,KAAK,EAAE,OAAO,CAAS;gBAGX,OAAO,EAAE,UAAU,CAAC,WAAW,CAAC;yCAjB1C,uBAAuB;2CAAvB,uBAAuB;CAoBnC"}

package/version.bak

@@ -1 +1 @@
-3.0.0-beta.20220328062817 
+3.0.0-beta.20220503131853