@anglr/datetime 5.0.0-beta.20221020191430 → 5.0.0-beta.20221021074029

package/src/modules/dateTimePicker/components/index.d.ts

@@ -3,5 +3,7 @@ export * from './dateTimePicker/dateTimePicker.component';
 export * from './dateTimePicker/dateTimePicker.interface';
 export * from './dayPicker/dayPicker.component';
 export * from './monthPicker/monthPicker.component';
+export * from './rollerTimePicker/rollerTimePicker.component';
+export * from './rollerTimePicker/rollerTimePicker.data';
 export * from './yearPicker/yearPicker.component';
 //# sourceMappingURL=index.d.ts.map

package/src/modules/dateTimePicker/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,iCAAiC,CAAC;AAChD,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,iCAAiC,CAAC;AAChD,cAAc,qCAAqC,CAAC;AACpD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,0CAA0C,CAAC;AACzD,cAAc,mCAAmC,CAAC"}

package/src/modules/dateTimePicker/components/rollerTimePicker/rollerTimePicker.component.d.ts

@@ -0,0 +1,61 @@
+import { DateTimePicker } from '../../interfaces';
+import { DateTimePeriodPickerBase } from '../dateTimePeriodPickerBase';
+import { PeriodData } from '../../../../legacy/picker/interfaces';
+import { LoopScrollData } from '../../../../legacy/picker/directives';
+import * as i0 from "@angular/core";
+/**
+ * Component used for rendering roller time picker
+ */
+export declare class RollerTimePickerSAComponent<TDate = any> extends DateTimePeriodPickerBase<PeriodData<TDate>, TDate> implements DateTimePicker<TDate> {
+    /**
+     * Array of available hours
+     */
+    protected hours: LoopScrollData[];
+    /**
+     * Array of available minutes
+     */
+    protected minutes: LoopScrollData[];
+    /**
+     * Indication whether are minutes open
+     */
+    protected minutesOpen: boolean;
+    /**
+     * Indication whether are hours open
+     */
+    protected hoursOpen: boolean;
+    /**
+     * Current value of hour
+     */
+    protected get hour(): number;
+    protected set hour(value: number);
+    /**
+     * Current value of minute
+     */
+    protected get minute(): number;
+    protected set minute(value: number);
+    /**
+     * Sets hour
+     * @param event - Mouse event that was triggered
+     * @param value - Value to be set as hour
+     * @returns
+     */
+    protected 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
+     */
+    protected setMinute<TData = any>(event: MouseEvent | null, value: TData): void;
+    /**
+     * @inheritdoc
+     */
+    protected onRender(): void;
+    /**
+     * Tests whether provided value is in same period target value
+     */
+    protected isSamePeriod(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RollerTimePickerSAComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RollerTimePickerSAComponent<any>, "roller-time-picker", never, {}, {}, never, never, true>;
+}
+//# sourceMappingURL=rollerTimePicker.component.d.ts.map

package/src/modules/dateTimePicker/components/rollerTimePicker/rollerTimePicker.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rollerTimePicker.component.d.ts","sourceRoot":"","sources":["rollerTimePicker.component.ts"],"names":[],"mappings":"AAMA,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAC,wBAAwB,EAAC,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAC,UAAU,EAAC,MAAM,sCAAsC,CAAC;AAChE,OAAO,EAAC,cAAc,EAAC,MAAM,sCAAsC,CAAC;;AAGpE;;GAEG;AACH,qBAkBa,2BAA2B,CAAC,KAAK,GAAG,GAAG,CAAE,SAAQ,wBAAwB,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,KAAK,CAAG,YAAW,cAAc,CAAC,KAAK,CAAC;IAI9I;;OAEG;IACH,SAAS,CAAC,KAAK,EAAE,cAAc,EAAE,CAAS;IAE1C;;OAEG;IACH,SAAS,CAAC,OAAO,EAAE,cAAc,EAAE,CAAW;IAE9C;;OAEG;IACH,SAAS,CAAC,WAAW,EAAE,OAAO,CAAS;IAEvC;;OAEG;IACH,SAAS,CAAC,SAAS,EAAE,OAAO,CAAS;IAErC;;OAEG;IACH,SAAS,KAAK,IAAI,IAAI,MAAM,CAG3B;IACD,SAAS,KAAK,IAAI,CAAC,KAAK,EAAE,MAAM,EAS/B;IAED;;OAEG;IACH,SAAS,KAAK,MAAM,IAAI,MAAM,CAG7B;IACD,SAAS,KAAK,MAAM,CAAC,KAAK,EAAE,MAAM,EASjC;IAID;;;;;OAKG;IACH,SAAS,CAAC,OAAO,CAAC,KAAK,GAAG,GAAG,EAAE,KAAK,EAAE,UAAU,GAAC,IAAI,EAAE,KAAK,EAAE,KAAK,GAAG,IAAI;IAyB1E;;;;;OAKG;IACH,SAAS,CAAC,SAAS,CAAC,KAAK,GAAG,GAAG,EAAE,KAAK,EAAE,UAAU,GAAC,IAAI,EAAE,KAAK,EAAE,KAAK,GAAG,IAAI;IAyB5E;;OAEG;IACH,SAAS,CAAC,QAAQ,IAAI,IAAI;IAI1B;;OAEG;IACH,SAAS,CAAC,YAAY,IAAI,OAAO;yCAtIxB,2BAA2B;2CAA3B,2BAA2B;CA0IvC"}

package/src/modules/dateTimePicker/components/rollerTimePicker/rollerTimePicker.component.html

@@ -0,0 +1,67 @@
+<div class="flex-row" style="justify-content: center;">
+     <div [class.clickable]="canScaleUp" (mousedown)="displayDate && canScaleUp ? scaleUpSubject.next(displayDate.value) : undefined">{{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)"
+             (mousedown)="hoursOpen = !hoursOpen">
+            <div *ngFor="let hour of hours | slice: -14"
+                 [loopScrollData]="hour?.data"
+                 [clone]="true"
+                 class="roller-item"
+                 (mousedown)="setHour($event, hour?.data)">{{hour?.displayText}}</div>
+
+            <div *ngFor="let hour of hours"
+                 [loopScrollData]="hour?.data"
+                 class="roller-item"
+                 (mousedown)="setHour($event, hour?.data)">{{hour?.displayText}}</div>
+
+            <div *ngFor="let hour of hours | slice: 0: 14"
+                 [loopScrollData]="hour?.data"
+                 [clone]="true"
+                 class="roller-item"
+                 (mousedown)="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)"
+             (mousedown)="minutesOpen = !minutesOpen">
+            <div *ngFor="let minute of minutes | slice: -14"
+                 [loopScrollData]="minute?.data"
+                 [clone]="true"
+                 class="roller-item"
+                 (mousedown)="setMinute($event, minute?.data)">{{minute?.displayText}}</div>
+
+            <div *ngFor="let minute of minutes"
+                 [loopScrollData]="minute?.data"
+                 class="roller-item"
+                 (mousedown)="setMinute($event, minute?.data)">{{minute?.displayText}}</div>
+
+            <div *ngFor="let minute of minutes | slice: 0: 14"
+                 [loopScrollData]="minute?.data"
+                 [clone]="true"
+                 class="roller-item"
+                 (mousedown)="setMinute($event, minute?.data)">{{minute?.displayText}}</div>
+        </div>
+    </div>
+</div>

package/src/modules/dateTimePicker/components/rollerTimePicker/rollerTimePicker.data.d.ts

@@ -0,0 +1,10 @@
+import { LoopScrollData } from '../../../../legacy/picker/directives/loopScroll/loopScroll.interface';
+/**
+ * Loop scroll hours data
+ */
+export declare const hours: LoopScrollData[];
+/**
+ * Loop scroll minutes data
+ */
+export declare const minutes: LoopScrollData[];
+//# sourceMappingURL=rollerTimePicker.data.d.ts.map

package/src/modules/dateTimePicker/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,sEAAsE,CAAC;AAEpG;;GAEG;AACH,eAAO,MAAM,KAAK,EAAE,cAAc,EAkGjC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,cAAc,EAkPnC,CAAC"}

package/src/modules/dateTimePicker/directives/dateTimePicker/dateTimePicker.directive.d.ts

@@ -1,6 +1,6 @@
 import { ComponentRef, ElementRef, OnDestroy, OnInit, ViewContainerRef } from '@angular/core';
-import { Position } from '@anglr/common';
-import { Subscription } from 'rxjs';
+import { Position, PositionResult } from '@anglr/common';
+import { Observable, Subscription } from 'rxjs';
 import { DateTimeInput } from '../../../../interfaces';
 import { DateTimePickerComponent } from '../../components';
 import { DateTimePickerOptions } from '../../components/dateTimePicker/dateTimePicker.interface';
@@ -37,9 +37,9 @@ export declare class DateTimePickerDirective<TDate = unknown> extends DateTimeBa
      */
     protected componentElement: HTMLElement | undefined | null;
     /**
-     * Subscription for value changes in picker
+     * Subscription for changes in picker
      */
-    protected valueChangeSubscription: Subscription | undefined | null;
+    protected pickerChangesSubscription: Subscription | undefined | null;
     /**
      * Gets or sets options for date time picker directive
      */
@@ -80,6 +80,12 @@ export declare class DateTimePickerDirective<TDate = unknown> extends DateTimeBa
      * @param event - Event that occured
      */
     protected handleClickInside(event: MouseEvent): void;
+    /**
+     * Runs placement of picker component
+     * @param componentElement - Element to be positioned
+     * @param watch - Indication whether watch for changes and update position
+     */
+    protected positionPicker(componentElement: HTMLElement, watch: boolean): Observable<PositionResult<HTMLElement>>;
     /**
      * @inheritdoc
      */

package/src/modules/dateTimePicker/directives/dateTimePicker/dateTimePicker.directive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dateTimePicker.directive.d.ts","sourceRoot":"","sources":["dateTimePicker.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAa,UAAU,EAAkC,SAAS,EAAE,MAAM,EAAY,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAEjJ,OAAO,EAAC,QAAQ,EAAmD,MAAM,eAAe,CAAC;AAEzF,OAAO,EAAgB,YAAY,EAAC,MAAM,MAAM,CAAC;AAEjD,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAErD,OAAO,EAAC,uBAAuB,EAAC,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAC,qBAAqB,EAAC,MAAM,0DAA0D,CAAC;AAC/F,OAAO,EAAC,8BAA8B,EAAC,MAAM,4BAA4B,CAAC;AAE1E,OAAO,EAAC,YAAY,EAAC,MAAM,8BAA8B,CAAC;;AAiB1D;;GAEG;AACH,qBAKa,uBAAuB,CAAC,KAAK,GAAG,OAAO,CAAE,SAAQ,YAAY,CAAC,KAAK,CAAE,YAAW,MAAM,EAAE,SAAS;IAwD9F,SAAS,CAAC,aAAa,EAAE,gBAAgB;IACzC,SAAS,CAAC,OAAO,EAAE,UAAU,CAAC,WAAW,CAAC;IACjB,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC;IAC5C,SAAS,CAAC,QAAQ,EAAE,QAAQ;IAC5B,SAAS,CAAC,QAAQ,EAAE,QAAQ;IAxD1D;;OAEG;IACH,SAAS,CAAC,mBAAmB,EAAE,OAAO,CAAS;IAE/C;;OAEG;IACH,SAAS,CAAC,kBAAkB,EAAE,8BAA8B,CAAC;IAE7D;;OAEG;IACH,SAAS,CAAC,YAAY,EAAE,YAAY,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAC,GAAC,SAAS,GAAC,IAAI,CAAC;IAEpF;;OAEG;IACH,SAAS,CAAC,SAAS,EAAE,uBAAuB,CAAC,KAAK,CAAC,GAAC,SAAS,GAAC,IAAI,CAAC;IAEnE;;OAEG;IACH,SAAS,CAAC,gBAAgB,EAAE,WAAW,GAAC,SAAS,GAAC,IAAI,CAAC;IAEvD;;OAEG;IACH,SAAS,CAAC,uBAAuB,EAAE,YAAY,GAAC,SAAS,GAAC,IAAI,CAAC;IAI/D;;OAEG;IACH,IACW,iBAAiB,IAAI,OAAO,CAAC,8BAA8B,CAAC,CAGtE;IACD,IAAW,iBAAiB,CAAC,KAAK,EAAE,OAAO,CAAC,8BAA8B,CAAC,EAG1E;IAED;;OAEG;IAEI,aAAa,EAAE,OAAO,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,GAAC,SAAS,GAAC,IAAI,CAAC;gBAGrD,aAAa,EAAE,gBAAgB,EAC/B,OAAO,EAAE,UAAU,CAAC,WAAW,CAAC,EACP,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,EAClC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAEU,OAAO,CAAC,EAAE,8BAA8B;IAS5G;;OAEG;IACU,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IAgCtC;;OAEG;IACa,WAAW,IAAI,IAAI;IAUnC;;OAEG;IACU,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IAwDxC;;OAEG;IACI,UAAU,IAAI,IAAI;IAyBzB;;OAEG;IACH,SAAS,CAAC,cAAc,IAAI,IAAI;IAahC;;;OAGG;IAEH,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAgBrD;;;OAGG;IAEH,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAQpD;;OAEG;cACgB,mBAAmB,IAAI,IAAI;IAW9C;;OAEG;cACgB,mBAAmB,IAAI,IAAI;yCAjRrC,uBAAuB;2CAAvB,uBAAuB;CA2RnC"}
+{"version":3,"file":"dateTimePicker.directive.d.ts","sourceRoot":"","sources":["dateTimePicker.directive.ts"],"names":[],"mappings":"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"}

package/styles/components/_date-time-picker.scss

@@ -2,8 +2,7 @@
 {
     date-time-picker
     {
-        display: block;
-        position: absolute;
+        display: inline-block;
 
         background-color: var(--datetime-date-time-picker-background);
         border: 1px solid var(--datetime-date-time-picker-border);
@@ -141,6 +140,89 @@
             {
                 color: var(--datetime-day-picker-weekend-foreground);
             }
+
+            .go-down-button
+            {
+                display: flex;
+                flex-direction: row;
+                justify-content: center;
+                margin-top: 2px;
+
+                .clickable
+                {
+                    padding: 2px 4px;
+                    border-radius: 4px;
+                }
+            }
+        }
+
+        roller-time-picker
+        {
+            .time-area
+            {
+                display: flex;
+                flex-direction: row;
+                padding: 64px 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;
+                transition: all 250ms;
+                border-radius: 4px;
+                scroll-snap-type: y mandatory;
+                contain: content;
+            }
+
+            .roller-scroll::-webkit-scrollbar
+            {
+                display: none;
+            }
+
+            .roller-scroll>div
+            {
+                scroll-snap-align: start;
+            }
+
+            .roller-item
+            {
+                opacity: 0.6;
+                transition: all 100ms;
+                font-weight: 300;
+            }
+
+            .roller-item.selected
+            {
+                opacity: 1;
+                font-weight: bold;
+            }
+
+            .roller-scroll.open
+            {
+                max-height: 5em;
+                top: -2em;
+            }
+
+            .minute-second-separator
+            {
+                margin-left: 12px;
+                margin-right: 12px;
+                line-height: 1em;
+            }
+
         }
     }
 }

package/version.bak

@@ -1 +1 @@
-5.0.0-beta.20221020191430 
+5.0.0-beta.20221021074029