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

package/src/picker/components/pickerImplBase.component.d.ts

@@ -0,0 +1,128 @@
+import { ChangeDetectorRef } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+import { DateTimeValue } from '../../misc/datetime.interface';
+import { DateApi, DateApiObject } from '../../services/dateApi.interface';
+import { DateTimePicker } from '../misc/datetimePicker.interface';
+import * as i0 from "@angular/core";
+/**
+ * Base class used as base for picker as base implementation of DateTimePicker interface
+ */
+export declare abstract class PickerImplBaseComponent<TDate = any, TCssClasses = any> implements DateTimePicker<TDate, TCssClasses> {
+    protected _dateApi: DateApi<TDate>;
+    protected _changeDetector: ChangeDetectorRef;
+    /**
+     * Current value of datetime
+     */
+    protected _value: DateTimeValue<TDate> | null;
+    /**
+     * Occurs when value changes
+     */
+    protected _valueChange: Subject<void>;
+    /**
+     * Occurs when user scales up
+     */
+    protected _scaleUp: Subject<TDate>;
+    /**
+     * Occurs when user scales down
+     */
+    protected _scaleDown: Subject<TDate>;
+    /**
+     * Minimal possible value that can be picked
+     */
+    protected _minValue: TDate | null;
+    /**
+     * Maximal possible value that can be picked
+     */
+    protected _maxValue: TDate | null;
+    /**
+     * Gets current value of datetime
+     */
+    get value(): DateTimeValue<TDate> | null;
+    /**
+     * Occurs when value changes
+     */
+    get valueChange(): Observable<void>;
+    /**
+     * Occurs when user scales up
+     */
+    get scaleUp(): Observable<TDate>;
+    /**
+     * Occurs when user scales down
+     */
+    get scaleDown(): Observable<TDate>;
+    /**
+     * Date api instance for displayed date
+     * @internal
+     */
+    displayDate: DateApiObject<TDate> | null;
+    /**
+     * Indication whether can go up in period
+     * @internal
+     */
+    canGoUp: boolean;
+    /**
+     * Indication whether can go down in period
+     * @internal
+     */
+    canGoDown: boolean;
+    /**
+     * Css classes that are used within picker
+     * @internal
+     */
+    cssClasses: TCssClasses;
+    constructor(_dateApi: DateApi<TDate>, _changeDetector: ChangeDetectorRef);
+    /**
+     * Changes displayed period to "higher" period
+     * @param event - Event that occured
+     * @internal
+     */
+    goUp(event: Event): void;
+    /**
+     * Sets css classes for picker, allowing to override defaults
+     * @param cssClasses - Css classes to be set for picker
+     */
+    setCssClasses(cssClasses: TCssClasses): void;
+    /**
+     * Sets minimal possible value for picker, that can be picked
+     * @param value - Minimal possible value that can be picked
+     */
+    abstract setMinValue(value: TDate | null): void;
+    /**
+     * Sets maximal possible value for picker, that can be picked
+     * @param value - Maximal possible value that can be picked
+     */
+    abstract setMaxValue(value: TDate | null): void;
+    /**
+     * Sets value of datetime picker
+     * @param value - Value to be set to this picker
+     */
+    abstract setValue(value: DateTimeValue<TDate> | null): void;
+    /**
+     * Set displays date to be displayed
+     * @param value - Value that identifies period that is going to be displayed
+     */
+    abstract display(value: DateApiObject<TDate>): void;
+    /**
+     * Sets indication whether can go down
+     * @param value - Indication whether can go down in period
+     */
+    setCanGoDown(value: boolean): void;
+    /**
+     * Sets indication whether can go up
+     * @param value - Indication whether can go up in period
+     */
+    setCanGoUp(value: boolean): void;
+    /**
+     * Explicitly runs invalidation of content (change detection)
+     */
+    invalidateVisuals(): void;
+    /**
+     * Handles click anyway in picker, that blocks blur
+     * @param event - Event that occured
+     * @internal
+     */
+    handleClick(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PickerImplBaseComponent<any, any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PickerImplBaseComponent<any, any>, never, never, {}, {}, never>;
+}
+//# sourceMappingURL=pickerImplBase.component.d.ts.map

package/src/picker/components/pickerImplBase.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pickerImplBase.component.d.ts","sourceRoot":"","sources":["pickerImplBase.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAkC,MAAM,eAAe,CAAC;AAEjF,OAAO,EAAC,UAAU,EAAE,OAAO,EAAC,MAAM,MAAM,CAAC;AAEzC,OAAO,EAAC,aAAa,EAAC,MAAM,+BAA+B,CAAC;AAE5D,OAAO,EAAC,OAAO,EAAE,aAAa,EAAC,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;;AAEhE;;GAEG;AACH,8BACsB,uBAAuB,CAAC,KAAK,GAAG,GAAG,EAAE,WAAW,GAAG,GAAG,CAAE,YAAW,cAAc,CAAC,KAAK,EAAE,WAAW,CAAC;IA+FzF,SAAS,CAAC,QAAQ,EAAE,OAAO,CAAC,KAAK,CAAC;IACpD,SAAS,CAAC,eAAe,EAAE,iBAAiB;IA5FxD;;OAEG;IACH,SAAS,CAAC,MAAM,EAAE,aAAa,CAAC,KAAK,CAAC,GAAC,IAAI,CAAQ;IAEnD;;OAEG;IACH,SAAS,CAAC,YAAY,EAAE,OAAO,CAAC,IAAI,CAAC,CAAuB;IAE5D;;OAEG;IACH,SAAS,CAAC,QAAQ,EAAE,OAAO,CAAC,KAAK,CAAC,CAAwB;IAE1D;;OAEG;IACH,SAAS,CAAC,UAAU,EAAE,OAAO,CAAC,KAAK,CAAC,CAAwB;IAE5D;;OAEG;IACH,SAAS,CAAC,SAAS,EAAE,KAAK,GAAC,IAAI,CAAQ;IAEvC;;OAEG;IACH,SAAS,CAAC,SAAS,EAAE,KAAK,GAAC,IAAI,CAAQ;IAIvC;;OAEG;IACH,IAAW,KAAK,IAAI,aAAa,CAAC,KAAK,CAAC,GAAC,IAAI,CAG5C;IAED;;OAEG;IACH,IAAW,WAAW,IAAI,UAAU,CAAC,IAAI,CAAC,CAGzC;IAED;;OAEG;IACH,IAAW,OAAO,IAAI,UAAU,CAAC,KAAK,CAAC,CAGtC;IAED;;OAEG;IACH,IAAW,SAAS,IAAI,UAAU,CAAC,KAAK,CAAC,CAGxC;IAID;;;OAGG;IACI,WAAW,EAAE,aAAa,CAAC,KAAK,CAAC,GAAC,IAAI,CAAQ;IAErD;;;OAGG;IACI,OAAO,EAAE,OAAO,CAAS;IAEhC;;;OAGG;IACI,SAAS,EAAE,OAAO,CAAS;IAElC;;;OAGG;IACI,UAAU,EAAG,WAAW,CAAC;gBAGQ,QAAQ,EAAE,OAAO,CAAC,KAAK,CAAC,EAC1C,eAAe,EAAE,iBAAiB;IAMxD;;;;OAIG;IACI,IAAI,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAiB/B;;;OAGG;IACI,aAAa,CAAC,UAAU,EAAE,WAAW,GAAG,IAAI;IAKnD;;;OAGG;aACa,WAAW,CAAC,KAAK,EAAE,KAAK,GAAC,IAAI,GAAG,IAAI;IAEpD;;;OAGG;aACa,WAAW,CAAC,KAAK,EAAE,KAAK,GAAC,IAAI,GAAG,IAAI;IAEpD;;;OAGG;aACa,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,GAAC,IAAI,GAAG,IAAI;IAEhE;;;OAGG;aACa,OAAO,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,GAAG,IAAI;IAE1D;;;OAGG;IACI,YAAY,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKzC;;;OAGG;IACI,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKvC;;OAEG;IACI,iBAAiB,IAAI,IAAI;IAOhC;;;;OAIG;IAEI,WAAW,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;yCA/LpB,uBAAuB;2CAAvB,uBAAuB;CAmM5C"}

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

@@ -0,0 +1,40 @@
+.time-area
+{
+    display: flex;
+    flex-direction: row;
+    padding: 48px 64px;
+    font-size: 32px;
+}
+
+.value-container
+{
+    position: relative;
+    height: 1em;
+    width: 2ch;
+}
+
+.roller-scroll
+{
+    position: absolute;
+    line-height: 1em;
+    max-height: 1em;
+    overflow: scroll;
+    scrollbar-width: none;
+    top: 0;
+    background-color: #666666;
+    transition: all 250ms;
+    border-radius: 4px;
+}
+
+.roller-scroll.open
+{
+    max-height: 5em;
+    top: -2em;
+}
+
+.minute-second-separator
+{
+    margin-left: 12px;
+    margin-right: 12px;
+    line-height: 1em;
+}

package/src/picker/components/rollerTimePicker/rollerTimePicker.component.d.ts

@@ -0,0 +1,71 @@
+import { DateTimeValue } from '../../../misc/datetime.interface';
+import { DateApiObject } from '../../../services';
+import { LoopScrollData } from '../../directives';
+import { DateTimePicker } from '../../interfaces';
+import { PickerImplBaseComponent } from '../pickerImplBase.component';
+import { RollerTimePickerCssClasses } from './rollerTimePicker.interface';
+import * as i0 from "@angular/core";
+/**
+ * Component used for rendering roller time picker
+ */
+export declare class DateTimeRollerTimePickerComponent<TDate = any> extends PickerImplBaseComponent<TDate, RollerTimePickerCssClasses> implements DateTimePicker<TDate, RollerTimePickerCssClasses> {
+    /**
+     * Array of available hours
+     */
+    hours: LoopScrollData[];
+    /**
+     * Array of available minutes
+     */
+    minutes: LoopScrollData[];
+    /**
+     * Indication whether are minutes open
+     */
+    minutesOpen: boolean;
+    /**
+     * Indication whether are hours open
+     */
+    hoursOpen: boolean;
+    /**
+     * Current value of hour
+     */
+    get hour(): number;
+    set hour(value: number);
+    /**
+     * Current value of minute
+     */
+    get minute(): number;
+    set minute(value: number);
+    /**
+     * @inheritdoc
+     */
+    display(value: DateApiObject<TDate>): void;
+    /**
+     * @inheritdoc
+     */
+    setMinValue(_value: TDate | null): void;
+    /**
+     * @inheritdoc
+     */
+    setMaxValue(_value: TDate | null): void;
+    /**
+     * @inheritdoc
+     */
+    setValue(_value: DateTimeValue<TDate> | null): void;
+    /**
+     * Sets hour
+     * @param event - Mouse event that was triggered
+     * @param value - Value to be set as hour
+     * @returns
+     */
+    setHour<TData = any>(event: MouseEvent | null, value: TData): void;
+    /**
+     * Sets minute
+     * @param event - Mouse event that was triggered
+     * @param value - Value to be set as minute
+     * @returns
+     */
+    setMinute<TData = any>(event: MouseEvent | null, value: TData): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DateTimeRollerTimePickerComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DateTimeRollerTimePickerComponent<any>, "date-time-roller-time-picker", never, {}, {}, never, never>;
+}
+//# sourceMappingURL=rollerTimePicker.component.d.ts.map

package/src/picker/components/rollerTimePicker/rollerTimePicker.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rollerTimePicker.component.d.ts","sourceRoot":"","sources":["rollerTimePicker.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAC,uBAAuB,EAAC,MAAM,6BAA6B,CAAC;AAEpE,OAAO,EAAC,0BAA0B,EAAC,MAAM,8BAA8B,CAAC;;AAExE;;GAEG;AACH,qBAOa,iCAAiC,CAAC,KAAK,GAAG,GAAG,CAAE,SAAQ,uBAAuB,CAAC,KAAK,EAAE,0BAA0B,CAAE,YAAW,cAAc,CAAC,KAAK,EAAE,0BAA0B,CAAC;IAIvL;;OAEG;IACI,KAAK,EAAE,cAAc,EAAE,CAAS;IAEvC;;OAEG;IACI,OAAO,EAAE,cAAc,EAAE,CAAW;IAE3C;;OAEG;IACI,WAAW,EAAE,OAAO,CAAS;IAEpC;;OAEG;IACI,SAAS,EAAE,OAAO,CAAS;IAElC;;OAEG;IACH,IAAW,IAAI,IAAI,MAAM,CAGxB;IACD,IAAW,IAAI,CAAC,KAAK,EAAE,MAAM,EAG5B;IAED;;OAEG;IACH,IAAW,MAAM,IAAI,MAAM,CAG1B;IACD,IAAW,MAAM,CAAC,KAAK,EAAE,MAAM,EAG9B;IAID;;OAEG;IACI,OAAO,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,GAAG,IAAI;IAKjD;;OAEG;IACI,WAAW,CAAC,MAAM,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI;IAI9C;;OAEG;IACI,WAAW,CAAC,MAAM,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI;IAI9C;;OAEG;IACI,QAAQ,CAAC,MAAM,EAAE,aAAa,CAAC,KAAK,CAAC,GAAG,IAAI,GAAG,IAAI;IAM1D;;;;;OAKG;IACI,OAAO,CAAC,KAAK,GAAG,GAAG,EAAE,KAAK,EAAE,UAAU,GAAC,IAAI,EAAE,KAAK,EAAE,KAAK,GAAG,IAAI;IAkCvE;;;;;OAKG;IACI,SAAS,CAAC,KAAK,GAAG,GAAG,EAAE,KAAK,EAAE,UAAU,GAAC,IAAI,EAAE,KAAK,EAAE,KAAK,GAAG,IAAI;yCA/HhE,iCAAiC;2CAAjC,iCAAiC;CAgK7C"}

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

@@ -0,0 +1,41 @@
+<div class="flex-row" style="justify-content: center;">
+     <div [class.clickable]="canGoUp" (mousedown)="goUp($event)">{{displayDate?.value | dateFormat: 'date'}}</div>
+</div>
+
+<div class="time-area">
+    <div class="value-container"
+         [clickOutside]="true"
+         (clickOutsideChange)="hoursOpen = false"
+         [clickOutsideElement]="hoursScroll">
+        <div #hoursScroll
+             class="roller-scroll"
+             [class.open]="hoursOpen"
+             [loopScroll]="hour"
+             [open]="hoursOpen"
+             (loopScrollChange)="setHour(null, $event)"
+             (click)="hoursOpen = !hoursOpen" >
+            <div *ngFor="let hour of hours"
+                 [loopScrollData]="hour?.data"
+                 (click)="setHour($event, hour?.data)">{{hour?.displayText}}</div>
+        </div>
+    </div>
+
+    <div class="minute-second-separator">:</div>
+
+    <div class="value-container"
+         [clickOutside]="true"
+         (clickOutsideChange)="minutesOpen = false"
+         [clickOutsideElement]="minutesScroll">
+        <div #minutesScroll
+             class="roller-scroll"
+             [class.open]="minutesOpen"
+             [loopScroll]="minute"
+             [open]="minutesOpen"
+             (loopScrollChange)="setMinute(null, $event)"
+             (click)="minutesOpen = !minutesOpen">
+            <div *ngFor="let minute of minutes"
+                 [loopScrollData]="minute?.data"
+                 (click)="setMinute($event, minute?.data)">{{minute?.displayText}}</div>
+        </div>
+    </div>
+</div>

package/src/picker/components/rollerTimePicker/rollerTimePicker.data.d.ts

@@ -0,0 +1,4 @@
+import { LoopScrollData } from '../../directives';
+export declare const hours: LoopScrollData[];
+export declare const minutes: LoopScrollData[];
+//# sourceMappingURL=rollerTimePicker.data.d.ts.map

package/src/picker/components/rollerTimePicker/rollerTimePicker.data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rollerTimePicker.data.d.ts","sourceRoot":"","sources":["rollerTimePicker.data.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAEhD,eAAO,MAAM,KAAK,EAAE,cAAc,EAkGjC,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,cAAc,EAkPnC,CAAC"}

package/src/picker/components/rollerTimePicker/rollerTimePicker.interface.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Specific css classes for roller time picker
+ */
+export interface RollerTimePickerCssClasses {
+}
+//# sourceMappingURL=rollerTimePicker.interface.d.ts.map

package/src/picker/components/rollerTimePicker/rollerTimePicker.interface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rollerTimePicker.interface.d.ts","sourceRoot":"","sources":["rollerTimePicker.interface.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,0BAA0B;CAE1C"}

package/src/picker/components/yearPicker/yearPicker.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"yearPicker.component.d.ts","sourceRoot":"","sources":["yearPicker.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA6C,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAI5F,OAAO,EAAC,OAAO,EAAE,aAAa,EAAC,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAC,cAAc,EAAE,UAAU,EAAE,QAAQ,EAAC,MAAM,qCAAqC,CAAC;AACzF,OAAO,EAAC,mBAAmB,EAAC,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAC,oBAAoB,EAAC,MAAM,yBAAyB,CAAC;;AAe7D;;GAEG;AACH,qBAOa,2BAA2B,CAAC,KAAK,GAAG,GAAG,CAAE,SAAQ,mBAAmB,CAAC,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,EAAE,oBAAoB,CAAE,YAAW,cAAc,CAAC,KAAK,EAAE,oBAAoB,CAAC;IAIlL;;;OAGG;IACI,MAAM,EAAE,MAAM,CAAM;gBAGG,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,EACzC,cAAc,EAAE,iBAAiB;IAS7C;;;;OAIG;IACI,UAAU,CAAC,KAAK,EAAE,KAAK;IAQ9B;;;;OAIG;IACI,cAAc,CAAC,KAAK,EAAE,KAAK;IAUlC;;;OAGG;IACI,OAAO,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,GAAG,IAAI;IA0CjD;;;OAGG;IACH,SAAS,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC,GAAG,KAAK;IAKxD;;;OAGG;IACH,SAAS,CAAC,wBAAwB,CAAC,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,GAAG,OAAO;IAKtE;;;;OAIG;IACH,SAAS,CAAC,aAAa,CAAC,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,KAAK,GAAG,OAAO;IAK1E;;;OAGG;IACH,SAAS,CAAC,cAAc,CAAC,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC;yCA/H7D,2BAA2B;2CAA3B,2BAA2B;CAmIvC"}
+{"version":3,"file":"yearPicker.component.d.ts","sourceRoot":"","sources":["yearPicker.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA6C,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAI5F,OAAO,EAAC,OAAO,EAAE,aAAa,EAAC,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAC,cAAc,EAAE,UAAU,EAAE,QAAQ,EAAC,MAAM,qCAAqC,CAAC;AACzF,OAAO,EAAC,mBAAmB,EAAC,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAC,oBAAoB,EAAC,MAAM,yBAAyB,CAAC;;AAgB7D;;GAEG;AACH,qBAOa,2BAA2B,CAAC,KAAK,GAAG,GAAG,CAAE,SAAQ,mBAAmB,CAAC,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,EAAE,oBAAoB,CAAE,YAAW,cAAc,CAAC,KAAK,EAAE,oBAAoB,CAAC;IAIlL;;;OAGG;IACI,MAAM,EAAE,MAAM,CAAM;gBAGG,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,EACzC,cAAc,EAAE,iBAAiB;IAS7C;;;;OAIG;IACI,UAAU,CAAC,KAAK,EAAE,KAAK;IAQ9B;;;;OAIG;IACI,cAAc,CAAC,KAAK,EAAE,KAAK;IAUlC;;;OAGG;IACI,OAAO,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,GAAG,IAAI;IA0CjD;;;OAGG;IACH,SAAS,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC,GAAG,KAAK;IAKxD;;;OAGG;IACH,SAAS,CAAC,wBAAwB,CAAC,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,GAAG,OAAO;IAKtE;;;;OAIG;IACH,SAAS,CAAC,aAAa,CAAC,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,KAAK,GAAG,OAAO;IAK1E;;;OAGG;IACH,SAAS,CAAC,cAAc,CAAC,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC;yCA/H7D,2BAA2B;2CAA3B,2BAA2B;CAmIvC"}

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

@@ -1,12 +1,12 @@
-<div [ngClass]="cssClasses?.periodSelection | asRequiredType">
-    <div [ngClass]="cssClasses?.previousPeriod | asRequiredType" (mousedown)="previousDecade($event)"></div>
-    <div [ngClass]="cssClasses?.periodValue | asRequiredType" [class.clickable]="canGoUp" (mousedown)="goUp($event)">{{period}}</div>
-    <div [ngClass]="cssClasses?.nextPeriod | asRequiredType" (mousedown)="nextDecade($event)"></div>
+<div [ngClass]="cssClasses?.periodSelection | asRequired">
+    <div [ngClass]="cssClasses?.previousPeriod | asRequired" (mousedown)="previousDecade($event)"></div>
+    <div [ngClass]="cssClasses?.periodValue | asRequired" [class.clickable]="canGoUp" (mousedown)="goUp($event)">{{period}}</div>
+    <div [ngClass]="cssClasses?.nextPeriod | asRequired" (mousedown)="nextDecade($event)"></div>
 </div>
 
-<div [ngClass]="cssClasses?.periodData | asRequiredType">
+<div [ngClass]="cssClasses?.periodData | asRequired">
     <div *ngFor="let year of periodData"
-         [ngClass]="cssClasses?.periodDatum | asRequiredType"
+         [ngClass]="cssClasses?.periodDatum | asRequired"
          [class.active]="year.active"
          [class.disabled]="year.disabled"
          (mousedown)="select($event, year)">{{year.value}}</div>

package/src/picker/directives/index.d.ts

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

package/src/picker/directives/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAC;AAClD,cAAc,mCAAmC,CAAC;AAClD,cAAc,2CAA2C,CAAC"}

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

@@ -0,0 +1,73 @@
+import { AfterContentInit, ElementRef, EventEmitter, OnChanges, OnDestroy, QueryList, SimpleChanges } from '@angular/core';
+import { LoopScrollDataDirective } from '../loopScrollData/loopScrollData.directive';
+import * as i0 from "@angular/core";
+/**
+ * Renders loop scroll for array of elements
+ */
+export declare class LoopScrollDirective<TData = any> implements OnChanges, AfterContentInit, OnDestroy {
+    protected _scrollElement: ElementRef<HTMLElement>;
+    /**
+     * Item height that obtained
+     */
+    protected _itemHeight?: number;
+    /**
+     * Array of elements and data for scrolled stuff
+     */
+    protected _items?: LoopScrollDataDirective[];
+    /**
+     * Indication whether is loop scroll initialized
+     */
+    protected _initialized: boolean;
+    /**
+     * Indication whether is opening active
+     */
+    protected _opening: boolean;
+    /**
+     * Value that is being set in loop scroll
+     */
+    value?: TData;
+    /**
+     * Indication whether is currently selection scroll open
+     */
+    open: boolean;
+    /**
+     * Occurs when current value of loop scroll changes
+     */
+    valueChange: EventEmitter<TData>;
+    /**
+     * Array of items that are loop scrolled
+     */
+    items?: QueryList<LoopScrollDataDirective>;
+    constructor(_scrollElement: ElementRef<HTMLElement>);
+    /**
+     * Called when input value changes
+     */
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Called when content was initialized
+     */
+    ngAfterContentInit(): void;
+    /**
+     * Called when component is destroyed
+     */
+    ngOnDestroy(): void;
+    /**
+     * Intialize default value
+     */
+    protected _initialize(): void;
+    /**
+     * Reorders items to make number of items around scroll view equally sized
+     */
+    protected _reorderItems(): void;
+    /**
+     * Handles scroll event
+     */
+    protected _handleScroll(): void;
+    /**
+     * Centers active value
+     */
+    protected _centerActiveValue(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LoopScrollDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<LoopScrollDirective<any>, "[loopScroll]", never, { "value": "loopScroll"; "open": "open"; }, { "valueChange": "loopScrollChange"; }, ["items"]>;
+}
+//# sourceMappingURL=loopScroll.directive.d.ts.map

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

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

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

@@ -0,0 +1,14 @@
+/**
+ * Represents data for LoopScrollDirective
+ */
+export interface LoopScrollData<TData = any> {
+    /**
+     * Text to be displayed for item
+     */
+    displayText?: string;
+    /**
+     * Data that are stored per value
+     */
+    data?: TData;
+}
+//# sourceMappingURL=loopScroll.interface.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"loopScroll.interface.d.ts","sourceRoot":"","sources":["loopScroll.interface.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,WAAW,cAAc,CAAC,KAAK,GAAG,GAAG;IAEvC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC;CAChB"}

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

@@ -0,0 +1,16 @@
+import { ElementRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Loop scroll data that are used inside LoopScrollDirective
+ */
+export declare class LoopScrollDataDirective<TData = any> {
+    element: ElementRef<HTMLElement>;
+    /**
+     * Data for loop
+     */
+    data: TData;
+    constructor(element: ElementRef<HTMLElement>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<LoopScrollDataDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<LoopScrollDataDirective<any>, "[loopScrollData]", never, { "data": "loopScrollData"; }, {}, never>;
+}
+//# sourceMappingURL=loopScrollData.directive.d.ts.map

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

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

package/src/picker/misc/datetimePicker.interface.d.ts

@@ -10,27 +10,31 @@ export interface CommonPickerCssClasses {
     /**
      * Period selection element wrapping displayed period and previous, next buttons
      */
-    periodSelection?: string;
+    periodSelection: string;
     /**
      * Element used for switching period to previous one
      */
-    previousPeriod?: string;
+    previousPeriod: string;
     /**
      * Element used for switching period to next one
      */
-    nextPeriod?: string;
+    nextPeriod: string;
     /**
      * Element representing currently displayed period
      */
-    periodValue?: string;
+    periodValue: string;
     /**
      * Element wrapping displayed period data
      */
-    periodData?: string;
+    periodData: string;
     /**
      * Element representing single datum for period item
      */
-    periodDatum?: string;
+    periodDatum: string;
+    /**
+     * Name of css class that represents clickable items in picker
+     */
+    clickable: string;
 }
 /**
  * Css classes applied to datetime picker
@@ -52,19 +56,19 @@ export interface DateTimePickerOptions<TPicker = any> {
     /**
      * Order of pickers, it's possible use less pickers as is defined in pickerPeriodsDefinition for example 'month,year'
      */
-    pickerPeriodsOrder?: string[] | string;
+    pickerPeriodsOrder: string[] | string | null;
     /**
      * Definition of types for each period type for picker
      */
-    pickerPeriodsDefinition?: Dictionary<Type<TPicker>>;
+    pickerPeriodsDefinition: Dictionary<Type<TPicker>>;
     /**
      * Name of default period for picker that is displayed
      */
-    defaultPeriod?: string;
+    defaultPeriod: string;
     /**
      * Css classes for date time picker
      */
-    cssClasses?: DateTimePickerCssClasses;
+    cssClasses: DateTimePickerCssClasses;
 }
 /**
  * Describes datetime picker component used for displaying and selecting value

package/src/picker/misc/datetimePicker.interface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"datetimePicker.interface.d.ts","sourceRoot":"","sources":["datetimePicker.interface.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"datetimePicker.interface.d.ts","sourceRoot":"","sources":["datetimePicker.interface.ts"],"names":[],"mappings":"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"}

package/src/picker/modules/picker.module.d.ts

@@ -1,17 +1,20 @@
 import * as i0 from "@angular/core";
 import * as i1 from "../components/picker/picker.component";
-import * as i2 from "../components/dayPicker/dayPicker.component";
-import * as i3 from "../components/monthPicker/monthPicker.component";
-import * as i4 from "../components/yearPicker/yearPicker.component";
-import * as i5 from "@angular/common";
-import * as i6 from "@anglr/common";
-import * as i7 from "../../modules/datePipes.module";
+import * as i2 from "../components/rollerTimePicker/rollerTimePicker.component";
+import * as i3 from "../components/dayPicker/dayPicker.component";
+import * as i4 from "../components/monthPicker/monthPicker.component";
+import * as i5 from "../components/yearPicker/yearPicker.component";
+import * as i6 from "../directives/loopScrollData/loopScrollData.directive";
+import * as i7 from "../directives/loopScroll/loopScroll.directive";
+import * as i8 from "@angular/common";
+import * as i9 from "@anglr/common";
+import * as i10 from "../../modules/datePipes.module";
 /**
  * Angular module for date time picker components
  */
 export declare class DateTimePickerModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DateTimePickerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DateTimePickerModule, [typeof i1.DateTimePickerComponent, typeof i2.DateTimeDayPickerComponent, typeof i3.DateTimeMonthPickerComponent, typeof i4.DateTimeYearPickerComponent], [typeof i5.CommonModule, typeof i6.CommonDynamicModule, typeof i7.DatePipesModule], [typeof i1.DateTimePickerComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DateTimePickerModule, [typeof i1.DateTimePickerComponent, typeof i2.DateTimeRollerTimePickerComponent, typeof i3.DateTimeDayPickerComponent, typeof i4.DateTimeMonthPickerComponent, typeof i5.DateTimeYearPickerComponent, typeof i6.LoopScrollDataDirective, typeof i7.LoopScrollDirective], [typeof i8.CommonModule, typeof i9.CommonDynamicModule, typeof i9.CommonUtilsModule, typeof i10.DatePipesModule, typeof i9.CastPipesModule, typeof i9.ClickOutsideModule], [typeof i1.DateTimePickerComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DateTimePickerModule>;
 }
 //# sourceMappingURL=picker.module.d.ts.map

package/src/picker/modules/picker.module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"picker.module.d.ts","sourceRoot":"","sources":["picker.module.ts"],"names":[],"mappings":";;;;;;;;AAUA;;GAEG;AACH,qBAoBa,oBAAoB;yCAApB,oBAAoB;0CAApB,oBAAoB;0CAApB,oBAAoB;CAEhC"}
+{"version":3,"file":"picker.module.d.ts","sourceRoot":"","sources":["picker.module.ts"],"names":[],"mappings":";;;;;;;;;;;AAYA;;GAEG;AACH,qBA0Ba,oBAAoB;yCAApB,oBAAoB;0CAApB,oBAAoB;0CAApB,oBAAoB;CAEhC"}

package/src/selector/components/inputDateTime/inputDateTime.component.d.ts

@@ -58,7 +58,7 @@ export declare class InputDateTimeSelectorComponent<TDate = any> implements Date
     /**
      * Gets or sets placeholder that is displayed when there is no value selected
      */
-    placeholder: string | undefined;
+    placeholder: string | null;
     /**
      * Gets current value of datetime
      */
@@ -92,7 +92,7 @@ export declare class InputDateTimeSelectorComponent<TDate = any> implements Date
      * Instance of html input element
      * @internal
      */
-    inputElement?: ElementRef<HTMLInputElement>;
+    inputElement: ElementRef<HTMLInputElement>;
     /**
      * Gets or sets string representation current of value
      */

package/src/selector/components/inputDateTime/inputDateTime.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inputDateTime.component.d.ts","sourceRoot":"","sources":["inputDateTime.component.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"inputDateTime.component.d.ts","sourceRoot":"","sources":["inputDateTime.component.ts"],"names":[],"mappings":"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"}

package/src/selector/components/inputDateTime/inputDateTime.component.html

@@ -7,4 +7,4 @@
        (select)="handleSelect()"
        (keydown)="handleKeyboard($any($event))"
        [disabled]="disabled"
-       [placeholder]="placeholder">
+       [placeholder]="placeholder ?? ''">