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

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/styles/components/_date-time-picker.scss

@@ -141,6 +141,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.20221021035527