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

package/es2015/src/selector/components/selector/selector.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"selector.component.js","sourceRoot":"","sources":["../../../../../src/selector/components/selector/selector.component.ts","../../../../../src/selector/components/selector/selector.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy, Input, Inject, Optional, Type, OnInit, OnDestroy, OnChanges, SimpleChanges, ChangeDetectorRef, ElementRef} from '@angular/core';\nimport {PositionPlacement} from '@anglr/common';\nimport {extend, isBlank, isString, nameof} from '@jscrpt/common';\nimport {Observable, Subject, Subscription} from 'rxjs';\n\nimport {DateTimeValue} from '../../../misc/datetime.interface';\nimport {DATE_API, FORMAT_PROVIDER} from '../../../misc/tokens';\nimport {DateTimeDayPickerComponent} from '../../../picker/components/dayPicker/dayPicker.component';\nimport {DateTimeMonthPickerComponent} from '../../../picker/components/monthPicker/monthPicker.component';\nimport {DateTimeYearPickerComponent} from '../../../picker/components/yearPicker/yearPicker.component';\nimport {DateApi, FormatProvider} from '../../../services';\nimport {DateValueProvider} from '../../../services/dateValueProvider.service';\nimport {DateTimeSelector, DateTimeSelectorOptions} from '../../misc/datetimeSelector.interface';\nimport {DATE_TIME_SELECTOR_CONFIGURATION} from '../../misc/tokens';\nimport {InputDateTimeSelectorComponent} from '../inputDateTime/inputDateTime.component';\nimport {enterLeaveAnimateChildTrigger} from './selector.component.animations';\n\n//TODO - add support for body absolute picker\n\n/**\n * Default configuration for selector\n */\nconst defaultConfiguration: DateTimeSelectorOptions<DateTimeSelector> =\n{\n    selectorComponent: InputDateTimeSelectorComponent,\n    pickerCloseOnValueSelect: false,\n    pickerDisabled: false,\n    pickerAbsolute: true,\n    pickerAbsoluteContainer: 'body',\n    positionOptions:\n    {\n        flip: true,\n        placement: PositionPlacement.BottomStart,\n        autoUpdate: true\n    },\n    defaultPeriod: 'day',\n    pickerPeriodsOrder: null,\n    pickerPeriodsDefinition:\n    {\n        'day': DateTimeDayPickerComponent,\n        'month': DateTimeMonthPickerComponent,\n        'year': DateTimeYearPickerComponent\n    },\n    cssClasses:\n    {\n    }\n};\n\n/**\n * Component used for displaying and selecting date time\n */\n@Component(\n{\n    selector: 'date-time-selector',\n    templateUrl: 'selector.component.html',\n    styleUrls: ['selector.component.css'],\n    animations: [enterLeaveAnimateChildTrigger],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DateTimeSelectorComponent<TDate = any> implements OnInit, OnChanges ,OnDestroy\n{\n    //######################### protected fields #########################\n\n    /**\n     * Current value of datetime\n     */\n    protected _value: DateTimeValue<TDate>|null = null;\n\n    /**\n     * Occurs when selector is touched by user\n     */\n    protected _touched: Subject<void> = new Subject<void>();\n\n    /**\n     * Occurs when value changes\n     */\n    protected _valueChange: Subject<void> = new Subject<void>();\n\n    /**\n     * Indication whether is control disabled\n     */\n    protected _disabled: boolean = false;\n\n    /**\n     * Instance of active date time selector\n     */\n    protected _activeSelector?: DateTimeSelector<TDate>;\n\n    /**\n     * All subscriptions for active selector\n     */\n    protected _activeSelectorSubscriptions: Subscription = new Subscription();\n\n    /**\n     * Subscription for changes of min value selector\n     */\n    protected _minValueChangeSubscription: Subscription|null = null;\n\n    /**\n     * Subscription for changes of max value selector\n     */\n    protected _maxValueChangeSubscription: Subscription|null = null;\n\n    /**\n     * Current options used by selector\n     */\n    protected _options: DateTimeSelectorOptions<DateTimeSelector<TDate>>;\n\n    /**\n     * Placeholder that is displayed when there is no value selected\n     */\n    protected _placeholder?: string;\n\n    //######################### public properties #########################\n\n    /**\n     * Gets or sets current value of datetime\n     */\n    public get value(): DateTimeValue<TDate>|null\n    {\n        return this._value;\n    }\n    public set value(value: DateTimeValue<TDate>|null)\n    {\n        this._value = value;\n\n        this._activeSelector?.setValue(this._value);\n    }\n\n    /**\n     * Gets indication whether is current value valid\n     */\n    public get valid(): boolean\n    {\n        return this._activeSelector?.valid ?? true;\n    }\n\n    /**\n     * Gets or sets formatted value\n     */\n    public get formattedValue(): string|null\n    {\n        return this._activeSelector?.formattedValue ?? null;\n    }\n    public set formattedValue(value: string|null)\n    {\n        if(value)\n        {\n            const val = this._dateApi.getValue(value, this.format);\n            this.value = this._valueProvider.getValue(val.value, this.format);\n        }\n        else\n        {\n            this.value = null;\n        }\n    }\n\n    /**\n     * Occurs when selector is touched by user\n     */\n    public get touched(): Observable<void>\n    {\n        return this._touched.asObservable();\n    }\n\n    /**\n     * Occurs when value changes\n     */\n    public get valueChange(): Observable<void>\n    {\n        return this._valueChange.asObservable();\n    }\n\n    //######################### public properties - template bindings #########################\n\n    /**\n     * Currently active date time selector component type\n     * @internal\n     */\n    public activeSelectorComponent!: Type<DateTimeSelector<TDate>>;\n\n    /**\n     * Indication whether is picker visible or not\n     * @internal\n     */\n    public pickerVisible: boolean = false;\n\n    /**\n     * Gets or sets minimal possible value for picker, that can be picked\n     */\n    public min: TDate|null = null;\n\n    /**\n     * Gets or sets maximal possible value for picker, that can be picked\n     */\n    public max: TDate|null = null;\n\n    //######################### public properties - inputs #########################\n\n    /**\n     * Format of displayed\n     */\n    @Input()\n    public format: string;\n\n    /**\n     * Gets or sets placeholder that is displayed when there is no value selected\n     */\n    @Input()\n    public get placeholder(): string|undefined\n    {\n        return this._placeholder;\n    }\n    public set placeholder(value: string|undefined)\n    {\n        this._placeholder = value;\n\n        if(this._activeSelector)\n        {\n            this._activeSelector.placeholder = this._placeholder ?? null;\n\n            this._activeSelector.invalidateVisuals();\n        }\n    }\n\n    /**\n     * Current options used by selector\n     */\n    @Input()\n    public get options(): Partial<DateTimeSelectorOptions<DateTimeSelector<TDate>>>\n    {\n        return this._options;\n    }\n    public set options(value: Partial<DateTimeSelectorOptions<DateTimeSelector<TDate>>>)\n    {\n        this._options = extend(true, this._options, value);\n        // without deep-copy for this attribute\n        if (value?.pickerPeriodsDefinition)\n        {\n            this._options.pickerPeriodsDefinition = value.pickerPeriodsDefinition;\n        }\n    }\n\n    /**\n     * Gets or sets minimal possible value for picker, that can be picked\n     */\n    @Input()\n    public get minValue(): TDate|string|null|DateTimeSelectorComponent<TDate>\n    {\n        return this.min;\n    }\n    public set minValue(value: TDate|string|null|DateTimeSelectorComponent<TDate>)\n    {\n        this._minValueChangeSubscription?.unsubscribe();\n        this._minValueChangeSubscription = null;\n\n        if(isBlank(value))\n        {\n            this.min = null;\n        }\n        else if(isString(value))\n        {\n            const date = this._dateApi.getValue(value);\n\n            if(date.isValid())\n            {\n                this.min = date.value;\n            }\n        }\n        else if(value instanceof DateTimeSelectorComponent)\n        {\n            this.min = value.valueOf();\n\n            this._minValueChangeSubscription = value.valueChange.subscribe(() =>\n            {\n                this.min = value.valueOf();\n                this._activeSelector?.setMinValue(this.min);\n\n                this._changeDetector.detectChanges();\n            });\n        }\n        else\n        {\n            this.min = value;\n        }\n\n        this._activeSelector?.setMinValue(this.min);\n    }\n\n    /**\n     * Gets or sets maximal possible value for picker, that can be picked\n     */\n    @Input()\n    public get maxValue(): TDate|string|null|DateTimeSelectorComponent<TDate>\n    {\n        return this.max;\n    }\n    public set maxValue(value: TDate|string|null|DateTimeSelectorComponent<TDate>)\n    {\n        this._maxValueChangeSubscription?.unsubscribe();\n        this._maxValueChangeSubscription = null;\n\n        if(isBlank(value))\n        {\n            this.max = null;\n        }\n        else if(isString(value))\n        {\n            const date = this._dateApi.getValue(value);\n\n            if(date.isValid())\n            {\n                this.max = date.value;\n            }\n        }\n        else if(value instanceof DateTimeSelectorComponent)\n        {\n            this.max = value.valueOf();\n\n            this._maxValueChangeSubscription = value.valueChange.subscribe(() =>\n            {\n                this.max = value.valueOf();\n                this._activeSelector?.setMaxValue(this.max);\n\n                this._changeDetector.detectChanges();\n            });\n        }\n        else\n        {\n            this.max = value;\n        }\n\n        this._activeSelector?.setMaxValue(this.max);\n    }\n\n    //######################### constructor #########################\n    constructor(@Optional() @Inject(DATE_TIME_SELECTOR_CONFIGURATION) configuration: Partial<DateTimeSelectorOptions<DateTimeSelector<TDate>>>,\n                protected _valueProvider: DateValueProvider<TDate>,\n                protected _changeDetector: ChangeDetectorRef,\n                public element: ElementRef<HTMLElement>,\n                @Inject(DATE_API) protected _dateApi: DateApi<TDate>,\n                @Inject(FORMAT_PROVIDER) formatProvider: FormatProvider)\n    {\n        this.format = formatProvider.date;\n        this._options = extend(true, {}, defaultConfiguration, configuration);\n        // without deep-copy for this attribute\n        if (configuration?.pickerPeriodsDefinition)\n        {\n            this._options.pickerPeriodsDefinition = configuration.pickerPeriodsDefinition;\n        }\n    }\n\n    //######################### public methods - implementation of OnInit #########################\n\n    /**\n     * Initialize component\n     */\n    public ngOnInit(): void\n    {\n        this.activeSelectorComponent = this._options.selectorComponent;\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(nameof<DateTimeSelectorComponent>('format') in changes && this._activeSelector)\n        {\n            this._activeSelector.format = this.format;\n            this._activeSelector.invalidateVisuals();\n        }\n    }\n\n    //######################### public methods - implementation of OnDestroy #########################\n\n    /**\n     * Called when component is destroyed\n     */\n    public ngOnDestroy(): void\n    {\n        this._activeSelectorSubscriptions.unsubscribe();\n\n        this._minValueChangeSubscription?.unsubscribe();\n        this._minValueChangeSubscription = null;\n\n        this._maxValueChangeSubscription?.unsubscribe();\n        this._maxValueChangeSubscription = null;\n    }\n\n    //######################### public methods - template bindings #########################\n\n    /**\n     * Handles created or destroyed date time selector instance\n     * @param selector - Instance of selector or null\n     * @internal\n     */\n    public selectorCreated(selector: DateTimeSelector<TDate>): void\n    {\n        this._activeSelector = selector;\n\n        this._activeSelectorSubscriptions.unsubscribe();\n        this._activeSelectorSubscriptions = new Subscription();\n\n        this._activeSelectorSubscriptions.add(selector.touched.subscribe(() => this._touched.next()));\n        this._activeSelectorSubscriptions.add(selector.pickerRequest.subscribe(visible => this.pickerVisible = visible));\n\n        this._activeSelectorSubscriptions.add(selector.valueChange.subscribe(() =>\n        {\n            this._value = selector.value;\n            this._valueChange.next();\n        }));\n\n        selector.format = this.format;\n        selector.setMaxValue(this.max);\n        selector.setMinValue(this.min);\n        selector.setValue(this._value);\n        selector.setDisabled(this._disabled);\n        selector.placeholder = this._placeholder ?? null;\n\n        selector.invalidateVisuals();\n    }\n\n    /**\n     * Handles changed value by picker\n     * @param value - Value that was changed\n     * @internal\n     */\n    public pickerChangedValue(value: DateTimeValue<TDate>): void\n    {\n        this._activeSelector?.setValue(value);\n        this._value = value;\n        this._valueChange.next();\n\n        if(this._options.pickerCloseOnValueSelect)\n        {\n            this.pickerVisible = false;\n        }\n    }\n\n    //######################### public methods #########################\n\n    /**\n     * Sets as 'control' disabled\n     * @param disabled - Indication whether sets value as disabled, if omitted it is same as disabled set to true\n     */\n    public setDisabled(disabled: boolean = true): void\n    {\n        this._disabled = disabled;\n        this._activeSelector?.setDisabled(disabled);\n    }\n\n    /**\n     * Gets simple value of selector\n     */\n    public valueOf(): TDate|null\n    {\n        if(!this._value)\n        {\n            return null;\n        }\n\n        return this._value.from;\n    }\n}\n","<ng-template [ngComponentOutletEx]=\"activeSelectorComponent\" (ngComponentOutletExCreated)=\"selectorCreated($event)\"></ng-template>\r\n\r\n<ng-template [ngIf]=\"!options?.pickerDisabled && pickerVisible\">\r\n    <ng-template [dateTimePicker]=\"value\"\r\n                 [minValue]=\"min\"\r\n                 [maxValue]=\"max\"\r\n                 [options]=\"options\"\r\n                 [selectorElement]=\"element\"\r\n                 (valueChange)=\"pickerChangedValue($event)\"></ng-template>\r\n</ng-template>"]}
+{"version":3,"file":"selector.component.js","sourceRoot":"","sources":["../../../../../src/selector/components/selector/selector.component.ts","../../../../../src/selector/components/selector/selector.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy, Input, Inject, Optional, Type, OnInit, OnDestroy, OnChanges, SimpleChanges, ChangeDetectorRef, ElementRef} from '@angular/core';\nimport {PositionPlacement} from '@anglr/common';\nimport {extend, isBlank, isString, nameof} from '@jscrpt/common';\nimport {Observable, Subject, Subscription} from 'rxjs';\n\nimport {DateTimeValue} from '../../../misc/datetime.interface';\nimport {DATE_API, FORMAT_PROVIDER} from '../../../misc/tokens';\nimport {DateTimeDayPickerComponent} from '../../../picker/components/dayPicker/dayPicker.component';\nimport {DateTimeMonthPickerComponent} from '../../../picker/components/monthPicker/monthPicker.component';\nimport {DateTimeYearPickerComponent} from '../../../picker/components/yearPicker/yearPicker.component';\nimport {DateApi, FormatProvider} from '../../../services';\nimport {DateValueProvider} from '../../../services/dateValueProvider.service';\nimport {DateTimeSelector, DateTimeSelectorOptions} from '../../misc/datetimeSelector.interface';\nimport {DATE_TIME_SELECTOR_CONFIGURATION} from '../../misc/tokens';\nimport {InputDateTimeSelectorComponent} from '../inputDateTime/inputDateTime.component';\nimport {enterLeaveAnimateChildTrigger} from './selector.component.animations';\n\n//TODO - add support for body absolute picker\n\n/**\n * Default configuration for selector\n */\nconst defaultConfiguration: DateTimeSelectorOptions<DateTimeSelector> =\n{\n    selectorComponent: InputDateTimeSelectorComponent,\n    pickerCloseOnValueSelect: false,\n    pickerDisabled: false,\n    pickerAbsolute: true,\n    pickerAbsoluteContainer: 'body',\n    positionOptions:\n    {\n        flip: true,\n        placement: PositionPlacement.BottomStart,\n        autoUpdate: true\n    },\n    defaultPeriod: 'day',\n    pickerPeriodsOrder: null,\n    pickerPeriodsDefinition:\n    {\n        'day': DateTimeDayPickerComponent,\n        'month': DateTimeMonthPickerComponent,\n        'year': DateTimeYearPickerComponent\n    },\n    cssClasses:\n    {\n    }\n};\n\n/**\n * Component used for displaying and selecting date time\n */\n@Component(\n{\n    selector: 'date-time-selector',\n    templateUrl: 'selector.component.html',\n    styleUrls: ['selector.component.css'],\n    animations: [enterLeaveAnimateChildTrigger],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DateTimeSelectorComponent<TDate = any> implements OnInit, OnChanges ,OnDestroy\n{\n    //######################### protected fields #########################\n\n    /**\n     * Current value of datetime\n     */\n    protected _value: DateTimeValue<TDate>|null = null;\n\n    /**\n     * Occurs when selector is touched by user\n     */\n    protected _touched: Subject<void> = new Subject<void>();\n\n    /**\n     * Occurs when value changes\n     */\n    protected _valueChange: Subject<void> = new Subject<void>();\n\n    /**\n     * Indication whether is control disabled\n     */\n    protected _disabled: boolean = false;\n\n    /**\n     * Instance of active date time selector\n     */\n    protected _activeSelector?: DateTimeSelector<TDate>;\n\n    /**\n     * All subscriptions for active selector\n     */\n    protected _activeSelectorSubscriptions: Subscription = new Subscription();\n\n    /**\n     * Subscription for changes of min value selector\n     */\n    protected _minValueChangeSubscription: Subscription|null = null;\n\n    /**\n     * Subscription for changes of max value selector\n     */\n    protected _maxValueChangeSubscription: Subscription|null = null;\n\n    /**\n     * Current options used by selector\n     */\n    protected _options: DateTimeSelectorOptions<DateTimeSelector<TDate>>;\n\n    /**\n     * Placeholder that is displayed when there is no value selected\n     */\n    protected _placeholder?: string;\n\n    //######################### public properties #########################\n\n    /**\n     * Gets or sets current value of datetime\n     */\n    public get value(): DateTimeValue<TDate>|null\n    {\n        return this._value;\n    }\n    public set value(value: DateTimeValue<TDate>|null)\n    {\n        this._value = value;\n\n        this._activeSelector?.setValue(this._value);\n    }\n\n    /**\n     * Gets indication whether is current value valid\n     */\n    public get valid(): boolean\n    {\n        return this._activeSelector?.valid ?? true;\n    }\n\n    /**\n     * Gets or sets formatted value\n     */\n    public get formattedValue(): string|null\n    {\n        return this._activeSelector?.formattedValue ?? null;\n    }\n    public set formattedValue(value: string|null)\n    {\n        if(value)\n        {\n            const val = this._dateApi.getValue(value, this.format);\n            this.value = this._valueProvider.getValue(val.value, this.format);\n        }\n        else\n        {\n            this.value = null;\n        }\n    }\n\n    /**\n     * Occurs when selector is touched by user\n     */\n    public get touched(): Observable<void>\n    {\n        return this._touched.asObservable();\n    }\n\n    /**\n     * Occurs when value changes\n     */\n    public get valueChange(): Observable<void>\n    {\n        return this._valueChange.asObservable();\n    }\n\n    //######################### public properties - template bindings #########################\n\n    /**\n     * Currently active date time selector component type\n     * @internal\n     */\n    public activeSelectorComponent!: Type<DateTimeSelector<TDate>>;\n\n    /**\n     * Indication whether is picker visible or not\n     * @internal\n     */\n    public pickerVisible: boolean = false;\n\n    /**\n     * Gets or sets minimal possible value for picker, that can be picked\n     */\n    public min: TDate|null = null;\n\n    /**\n     * Gets or sets maximal possible value for picker, that can be picked\n     */\n    public max: TDate|null = null;\n\n    //######################### public properties - inputs #########################\n\n    /**\n     * Format of displayed\n     */\n    @Input()\n    public format: string;\n\n    /**\n     * Gets or sets placeholder that is displayed when there is no value selected\n     */\n    @Input()\n    public get placeholder(): string|undefined\n    {\n        return this._placeholder;\n    }\n    public set placeholder(value: string|undefined)\n    {\n        this._placeholder = value;\n\n        if(this._activeSelector)\n        {\n            this._activeSelector.placeholder = this._placeholder ?? null;\n\n            this._activeSelector.invalidateVisuals();\n        }\n    }\n\n    /**\n     * Current options used by selector\n     */\n    @Input()\n    public get options(): Partial<DateTimeSelectorOptions<DateTimeSelector<TDate>>>\n    {\n        return this._options;\n    }\n    public set options(value: Partial<DateTimeSelectorOptions<DateTimeSelector<TDate>>>)\n    {\n        this._options = extend(true, this._options, value);\n        // without deep-copy for this attribute\n        if (value?.pickerPeriodsDefinition)\n        {\n            this._options.pickerPeriodsDefinition = value.pickerPeriodsDefinition;\n        }\n    }\n\n    /**\n     * Gets or sets minimal possible value for picker, that can be picked\n     */\n    @Input()\n    public get minValue(): TDate|string|null|DateTimeSelectorComponent<TDate>\n    {\n        return this.min;\n    }\n    public set minValue(value: TDate|string|null|DateTimeSelectorComponent<TDate>)\n    {\n        this._minValueChangeSubscription?.unsubscribe();\n        this._minValueChangeSubscription = null;\n\n        if(isBlank(value))\n        {\n            this.min = null;\n        }\n        else if(isString(value))\n        {\n            const date = this._dateApi.getValue(value);\n\n            if(date.isValid())\n            {\n                this.min = date.value;\n            }\n        }\n        else if(value instanceof DateTimeSelectorComponent)\n        {\n            this.min = value.valueOf();\n\n            this._minValueChangeSubscription = value.valueChange.subscribe(() =>\n            {\n                this.min = value.valueOf();\n                this._activeSelector?.setMinValue(this.min);\n\n                this._changeDetector.detectChanges();\n            });\n        }\n        else\n        {\n            this.min = value;\n        }\n\n        this._activeSelector?.setMinValue(this.min);\n    }\n\n    /**\n     * Gets or sets maximal possible value for picker, that can be picked\n     */\n    @Input()\n    public get maxValue(): TDate|string|null|DateTimeSelectorComponent<TDate>\n    {\n        return this.max;\n    }\n    public set maxValue(value: TDate|string|null|DateTimeSelectorComponent<TDate>)\n    {\n        this._maxValueChangeSubscription?.unsubscribe();\n        this._maxValueChangeSubscription = null;\n\n        if(isBlank(value))\n        {\n            this.max = null;\n        }\n        else if(isString(value))\n        {\n            const date = this._dateApi.getValue(value);\n\n            if(date.isValid())\n            {\n                this.max = date.value;\n            }\n        }\n        else if(value instanceof DateTimeSelectorComponent)\n        {\n            this.max = value.valueOf();\n\n            this._maxValueChangeSubscription = value.valueChange.subscribe(() =>\n            {\n                this.max = value.valueOf();\n                this._activeSelector?.setMaxValue(this.max);\n\n                this._changeDetector.detectChanges();\n            });\n        }\n        else\n        {\n            this.max = value;\n        }\n\n        this._activeSelector?.setMaxValue(this.max);\n    }\n\n    //######################### constructor #########################\n    constructor(@Optional() @Inject(DATE_TIME_SELECTOR_CONFIGURATION) configuration: Partial<DateTimeSelectorOptions<DateTimeSelector<TDate>>>,\n                protected _valueProvider: DateValueProvider<TDate>,\n                protected _changeDetector: ChangeDetectorRef,\n                public element: ElementRef<HTMLElement>,\n                @Inject(DATE_API) protected _dateApi: DateApi<TDate>,\n                @Inject(FORMAT_PROVIDER) formatProvider: FormatProvider)\n    {\n        this.format = formatProvider.date;\n        this._options = extend(true, {}, defaultConfiguration, configuration);\n        // without deep-copy for this attribute\n        if (configuration?.pickerPeriodsDefinition)\n        {\n            this._options.pickerPeriodsDefinition = configuration.pickerPeriodsDefinition;\n        }\n    }\n\n    //######################### public methods - implementation of OnInit #########################\n\n    /**\n     * Initialize component\n     */\n    public ngOnInit(): void\n    {\n        this.activeSelectorComponent = this._options.selectorComponent;\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(nameof<DateTimeSelectorComponent>('format') in changes && this._activeSelector)\n        {\n            this._activeSelector.format = this.format;\n            this._activeSelector.invalidateVisuals();\n        }\n    }\n\n    //######################### public methods - implementation of OnDestroy #########################\n\n    /**\n     * Called when component is destroyed\n     */\n    public ngOnDestroy(): void\n    {\n        this._activeSelectorSubscriptions.unsubscribe();\n\n        this._minValueChangeSubscription?.unsubscribe();\n        this._minValueChangeSubscription = null;\n\n        this._maxValueChangeSubscription?.unsubscribe();\n        this._maxValueChangeSubscription = null;\n    }\n\n    //######################### public methods - template bindings #########################\n\n    /**\n     * Handles created or destroyed date time selector instance\n     * @param selector - Instance of selector or null\n     * @internal\n     */\n    public selectorCreated(selector: DateTimeSelector<TDate>): void\n    {\n        this._activeSelector = selector;\n\n        this._activeSelectorSubscriptions.unsubscribe();\n        this._activeSelectorSubscriptions = new Subscription();\n\n        this._activeSelectorSubscriptions.add(selector.touched.subscribe(() => this._touched.next()));\n        this._activeSelectorSubscriptions.add(selector.pickerRequest.subscribe(visible => this.pickerVisible = visible));\n\n        this._activeSelectorSubscriptions.add(selector.valueChange.subscribe(() =>\n        {\n            this._value = selector.value;\n            this._valueChange.next();\n        }));\n\n        selector.format = this.format;\n        selector.setMaxValue(this.max);\n        selector.setMinValue(this.min);\n        selector.setValue(this._value);\n        selector.setDisabled(this._disabled);\n        selector.placeholder = this._placeholder ?? null;\n\n        selector.invalidateVisuals();\n    }\n\n    /**\n     * Handles changed value by picker\n     * @param value - Value that was changed\n     * @internal\n     */\n    public pickerChangedValue(value: DateTimeValue<TDate>): void\n    {\n        this._activeSelector?.setValue(value);\n        this._value = value;\n        this._valueChange.next();\n\n        if(this._options.pickerCloseOnValueSelect)\n        {\n            this.pickerVisible = false;\n        }\n    }\n\n    //######################### public methods #########################\n\n    /**\n     * Sets as 'control' disabled\n     * @param disabled - Indication whether sets value as disabled, if omitted it is same as disabled set to true\n     */\n    public setDisabled(disabled: boolean = true): void\n    {\n        this._disabled = disabled;\n        this._activeSelector?.setDisabled(disabled);\n        this._activeSelector?.invalidateVisuals();\n    }\n\n    /**\n     * Gets simple value of selector\n     */\n    public valueOf(): TDate|null\n    {\n        if(!this._value)\n        {\n            return null;\n        }\n\n        return this._value.from;\n    }\n}\n","<ng-template [ngComponentOutletEx]=\"activeSelectorComponent\" (ngComponentOutletExCreated)=\"selectorCreated($event)\"></ng-template>\r\n\r\n<ng-template [ngIf]=\"!options?.pickerDisabled && pickerVisible\">\r\n    <ng-template [dateTimePicker]=\"value\"\r\n                 [minValue]=\"min\"\r\n                 [maxValue]=\"max\"\r\n                 [options]=\"options\"\r\n                 [selectorElement]=\"element\"\r\n                 (valueChange)=\"pickerChangedValue($event)\"></ng-template>\r\n</ng-template>"]}

package/es2015/src/selector/types.js

@@ -6,5 +6,6 @@ export * from './directives/datetimeMaxValidator/datetimeMaxValidator.directive'
 export * from './directives/datetimeMinValidator/datetimeMinValidator.directive';
 export * from './directives/datetimeValidator/datetimeValidator.directive';
 export * from './directives/selectorControlValueAccessor/selectorControlValueAccessor.directive';
+export * from './directives/dateTimePickerRenderer/dateTimePickerRenderer.directive';
 export * from './misc/tokens';
 //# sourceMappingURL=types.js.map

package/es2015/src/selector/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/selector/types.ts"],"names":[],"mappings":"AAAA,cAAc,oDAAoD,CAAC;AACnE,cAAc,0CAA0C,CAAC;AACzD,cAAc,qDAAqD,CAAC;AACpE,cAAc,gEAAgE,CAAC;AAC/E,cAAc,kEAAkE,CAAC;AACjF,cAAc,kEAAkE,CAAC;AACjF,cAAc,4DAA4D,CAAC;AAC3E,cAAc,kFAAkF,CAAC;AACjG,cAAc,eAAe,CAAC","sourcesContent":["export * from './components/inputDateTime/inputDateTime.component';\nexport * from './components/selector/selector.component';\nexport * from './components/selector/selector.component.animations';\nexport * from './components/simpleInputDateTime/simpleInputDateTime.component';\nexport * from './directives/datetimeMaxValidator/datetimeMaxValidator.directive';\nexport * from './directives/datetimeMinValidator/datetimeMinValidator.directive';\nexport * from './directives/datetimeValidator/datetimeValidator.directive';\nexport * from './directives/selectorControlValueAccessor/selectorControlValueAccessor.directive';\nexport * from './misc/tokens';"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/selector/types.ts"],"names":[],"mappings":"AAAA,cAAc,oDAAoD,CAAC;AACnE,cAAc,0CAA0C,CAAC;AACzD,cAAc,qDAAqD,CAAC;AACpE,cAAc,gEAAgE,CAAC;AAC/E,cAAc,kEAAkE,CAAC;AACjF,cAAc,kEAAkE,CAAC;AACjF,cAAc,4DAA4D,CAAC;AAC3E,cAAc,kFAAkF,CAAC;AACjG,cAAc,sEAAsE,CAAC;AACrF,cAAc,eAAe,CAAC","sourcesContent":["export * from './components/inputDateTime/inputDateTime.component';\nexport * from './components/selector/selector.component';\nexport * from './components/selector/selector.component.animations';\nexport * from './components/simpleInputDateTime/simpleInputDateTime.component';\nexport * from './directives/datetimeMaxValidator/datetimeMaxValidator.directive';\nexport * from './directives/datetimeMinValidator/datetimeMinValidator.directive';\nexport * from './directives/datetimeValidator/datetimeValidator.directive';\nexport * from './directives/selectorControlValueAccessor/selectorControlValueAccessor.directive';\nexport * from './directives/dateTimePickerRenderer/dateTimePickerRenderer.directive';\nexport * from './misc/tokens';"]}

package/es2020/src/index.js

@@ -15,5 +15,6 @@ export * from './picker/interfaces';
 export * from './picker/types';
 export * from './pipes/dateConvert.pipe';
 export * from './pipes/dateFormat.pipe';
+export * from './picker/directives';
 export * from './modules/datePipes.module';
 //# sourceMappingURL=index.js.map

package/es2020/src/index.js.map

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

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

@@ -197,10 +197,10 @@ export class DateTimeDayPickerComponent extends PickerBaseComponent {
     }
 }
 DateTimeDayPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DateTimeDayPickerComponent, deps: [{ token: DATE_API }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DateTimeDayPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: DateTimeDayPickerComponent, selector: "date-time-day-picker", usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"cssClasses?.periodSelection | asRequired\">\r\n    <div [ngClass]=\"cssClasses?.previousPeriod | asRequired\" (mousedown)=\"previousMonth($event)\"></div>\r\n    <div [ngClass]=\"cssClasses?.periodValue | asRequired | mergeCssClasses: [{'clickable': canGoUp}]\" (mousedown)=\"goUp($event)\">{{displayDate?.format('MMMM yyyy')}}</div>\r\n    <div [ngClass]=\"cssClasses?.nextPeriod | asRequired\" (mousedown)=\"nextMonth($event)\"></div>\r\n</div>\r\n\r\n<div [ngClass]=\"cssClasses?.periodData | asRequired\">\r\n    <div [ngClass]=\"cssClasses?.weekdayName | asRequired\" *ngFor=\"let weekday of weekdays\">{{weekday}}</div>\r\n    <div *ngFor=\"let day of periodData\"\r\n         [ngClass]=\"cssClasses?.periodDatum | asRequired\"\r\n         [class.other-month]=\"day.otherMonth\"\r\n         [class.today]=\"day.today\"\r\n         [class.weekend]=\"day.weekend\"\r\n         [class.active]=\"day.active\"\r\n         [class.disabled]=\"day.disabled\"\r\n         (mousedown)=\"select($event, day)\">{{day.day}}</div>\r\n</div>\r\n\r\n<div class=\"flex-row\" style=\"justify-content: center; border-top: 1px solid #FFF;\">\r\n    <div [class.clickable]=\"canGoDown\" (mousedown)=\"goDown($event)\">{{displayDate?.value | dateFormat: 'time'}}</div>\r\n</div>", styles: [".period-data\r\n{\r\n    grid-template-columns: repeat(7, 1fr);\r\n}\r\n\r\n.weekday\r\n{\r\n    text-align: center;\r\n    font-weight: bold;\r\n    opacity: 0.7;\r\n    margin-bottom: 6px;\r\n}\r\n\r\n.period-datum:not(.other-month)\r\n{\r\n    font-weight: bold;\r\n}\r\n\r\n.other-month\r\n{\r\n    opacity: 0.5;\r\n}"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "asRequired": i2.AsRequiredTypePipe, "mergeCssClasses": i2.MergeCssClassesPipe, "dateFormat": i3.DateFormatPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DateTimeDayPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: DateTimeDayPickerComponent, selector: "date-time-day-picker", usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"cssClasses?.periodSelection | asRequired\">\r\n    <div [ngClass]=\"cssClasses?.previousPeriod | asRequired\" (mousedown)=\"previousMonth($event)\"></div>\r\n    <div [ngClass]=\"cssClasses?.periodValue | asRequired | mergeCssClasses: [{'clickable': canGoUp}]\" (mousedown)=\"goUp($event)\">{{displayDate?.format('MMMM yyyy')}}</div>\r\n    <div [ngClass]=\"cssClasses?.nextPeriod | asRequired\" (mousedown)=\"nextMonth($event)\"></div>\r\n</div>\r\n\r\n<div [ngClass]=\"cssClasses?.periodData | asRequired\">\r\n    <div [ngClass]=\"cssClasses?.weekdayName | asRequired\" *ngFor=\"let weekday of weekdays\">{{weekday}}</div>\r\n    <div *ngFor=\"let day of periodData\"\r\n         [ngClass]=\"cssClasses?.periodDatum | asRequired\"\r\n         [class.other-month]=\"day.otherMonth\"\r\n         [class.today]=\"day.today\"\r\n         [class.weekend]=\"day.weekend\"\r\n         [class.active]=\"day.active\"\r\n         [class.disabled]=\"day.disabled\"\r\n         (mousedown)=\"select($event, day)\">{{day.day}}</div>\r\n</div>\r\n\r\n<div class=\"flex-row\" style=\"justify-content: center; border-top: 1px solid #FFF;\" *ngIf=\"canGoDown\">\r\n    <div [class.clickable]=\"canGoDown\" (mousedown)=\"goDown($event)\">{{displayDate?.value | dateFormat: 'time'}}</div>\r\n</div>", styles: [".period-data\r\n{\r\n    grid-template-columns: repeat(7, 1fr);\r\n}\r\n\r\n.weekday\r\n{\r\n    text-align: center;\r\n    font-weight: bold;\r\n    opacity: 0.7;\r\n    margin-bottom: 6px;\r\n}\r\n\r\n.period-datum:not(.other-month)\r\n{\r\n    font-weight: bold;\r\n}\r\n\r\n.other-month\r\n{\r\n    opacity: 0.5;\r\n}"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "asRequired": i2.AsRequiredTypePipe, "mergeCssClasses": i2.MergeCssClassesPipe, "dateFormat": i3.DateFormatPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DateTimeDayPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'date-time-day-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"cssClasses?.periodSelection | asRequired\">\r\n    <div [ngClass]=\"cssClasses?.previousPeriod | asRequired\" (mousedown)=\"previousMonth($event)\"></div>\r\n    <div [ngClass]=\"cssClasses?.periodValue | asRequired | mergeCssClasses: [{'clickable': canGoUp}]\" (mousedown)=\"goUp($event)\">{{displayDate?.format('MMMM yyyy')}}</div>\r\n    <div [ngClass]=\"cssClasses?.nextPeriod | asRequired\" (mousedown)=\"nextMonth($event)\"></div>\r\n</div>\r\n\r\n<div [ngClass]=\"cssClasses?.periodData | asRequired\">\r\n    <div [ngClass]=\"cssClasses?.weekdayName | asRequired\" *ngFor=\"let weekday of weekdays\">{{weekday}}</div>\r\n    <div *ngFor=\"let day of periodData\"\r\n         [ngClass]=\"cssClasses?.periodDatum | asRequired\"\r\n         [class.other-month]=\"day.otherMonth\"\r\n         [class.today]=\"day.today\"\r\n         [class.weekend]=\"day.weekend\"\r\n         [class.active]=\"day.active\"\r\n         [class.disabled]=\"day.disabled\"\r\n         (mousedown)=\"select($event, day)\">{{day.day}}</div>\r\n</div>\r\n\r\n<div class=\"flex-row\" style=\"justify-content: center; border-top: 1px solid #FFF;\">\r\n    <div [class.clickable]=\"canGoDown\" (mousedown)=\"goDown($event)\">{{displayDate?.value | dateFormat: 'time'}}</div>\r\n</div>", styles: [".period-data\r\n{\r\n    grid-template-columns: repeat(7, 1fr);\r\n}\r\n\r\n.weekday\r\n{\r\n    text-align: center;\r\n    font-weight: bold;\r\n    opacity: 0.7;\r\n    margin-bottom: 6px;\r\n}\r\n\r\n.period-datum:not(.other-month)\r\n{\r\n    font-weight: bold;\r\n}\r\n\r\n.other-month\r\n{\r\n    opacity: 0.5;\r\n}"] }]
+            args: [{ selector: 'date-time-day-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"cssClasses?.periodSelection | asRequired\">\r\n    <div [ngClass]=\"cssClasses?.previousPeriod | asRequired\" (mousedown)=\"previousMonth($event)\"></div>\r\n    <div [ngClass]=\"cssClasses?.periodValue | asRequired | mergeCssClasses: [{'clickable': canGoUp}]\" (mousedown)=\"goUp($event)\">{{displayDate?.format('MMMM yyyy')}}</div>\r\n    <div [ngClass]=\"cssClasses?.nextPeriod | asRequired\" (mousedown)=\"nextMonth($event)\"></div>\r\n</div>\r\n\r\n<div [ngClass]=\"cssClasses?.periodData | asRequired\">\r\n    <div [ngClass]=\"cssClasses?.weekdayName | asRequired\" *ngFor=\"let weekday of weekdays\">{{weekday}}</div>\r\n    <div *ngFor=\"let day of periodData\"\r\n         [ngClass]=\"cssClasses?.periodDatum | asRequired\"\r\n         [class.other-month]=\"day.otherMonth\"\r\n         [class.today]=\"day.today\"\r\n         [class.weekend]=\"day.weekend\"\r\n         [class.active]=\"day.active\"\r\n         [class.disabled]=\"day.disabled\"\r\n         (mousedown)=\"select($event, day)\">{{day.day}}</div>\r\n</div>\r\n\r\n<div class=\"flex-row\" style=\"justify-content: center; border-top: 1px solid #FFF;\" *ngIf=\"canGoDown\">\r\n    <div [class.clickable]=\"canGoDown\" (mousedown)=\"goDown($event)\">{{displayDate?.value | dateFormat: 'time'}}</div>\r\n</div>", styles: [".period-data\r\n{\r\n    grid-template-columns: repeat(7, 1fr);\r\n}\r\n\r\n.weekday\r\n{\r\n    text-align: center;\r\n    font-weight: bold;\r\n    opacity: 0.7;\r\n    margin-bottom: 6px;\r\n}\r\n\r\n.period-datum:not(.other-month)\r\n{\r\n    font-weight: bold;\r\n}\r\n\r\n.other-month\r\n{\r\n    opacity: 0.5;\r\n}"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [DATE_API]

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

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

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