@anglr/datetime 5.0.0-beta.20221020182702 → 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

@@ -5,8 +5,9 @@
         display: block;
         position: absolute;
 
-        background-color: #FFFFFF;
-        border: 1px solid #333333;
+        background-color: var(--datetime-date-time-picker-background);
+        border: 1px solid var(--datetime-date-time-picker-border);
+        color: var(--datetime-date-time-picker-foreground);
         border-radius: 6px;
         z-index: 123;
         padding: 4px 8px;
@@ -43,12 +44,13 @@
                 border-radius: 4px;
                 border-width: 1px;
                 border-style: solid;
-                border-color: transparent;
+                border-color: var(--datetime-date-time-picker-period-datum-border);
             }
 
             .active
             {
-                border-color: transparent;
+                border-color: var(--datetime-date-time-picker-active-border);
+                background-color: var(--datetime-date-time-picker-active-background);
             }
 
             .fas
@@ -63,43 +65,34 @@
             .clickable
             {
                 transition: all 200ms;
-            }
 
-            .clickable:hover
-            {
-                border-color: transparent;
-                cursor: pointer;
+                &:hover
+                {
+                    border-color: var(--datetime-date-time-picker-clickable-hover-border);
+                    cursor: pointer;
+                    background-color: var(--datetime-date-time-picker-clickable-hover-background);
+                }
             }
 
             .disabled
             {
                 opacity: 0.4;
                 border-radius: 0;
-            }
-
-            .disabled:hover
-            {
-                cursor: not-allowed;
-            }
 
-            .today
-            {
-                border-color: #0077ff;
-            }
-
-            .active
-            {
-                background-color: #00c3ff;
-            }
+                &:hover
+                {
+                    cursor: not-allowed;
+                }
 
-            .clickable:hover
-            {
-                background-color: #00e7ff;
+                &:not(.active)
+                {
+                    background-color: var(--datetime-date-time-picker-disabled-background);
+                }
             }
 
-            .disabled:not(.active)
+            .today
             {
-                background-color: #CFCFCF;
+                border-color: var(--datetime-date-time-picker-today-border);
             }
         }
 
@@ -146,8 +139,91 @@
 
             .weekend
             {
-                color: #850000;
+                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/styles/core/_mixins.scss

@@ -6,6 +6,20 @@
 
 @mixin buildThemeColors($theme)
 {
+    @if $theme 
+    {
+        --datetime-date-time-picker-background: #{map.get(map.get($theme, 'dateTimePicker'), 'background')};
+        --datetime-date-time-picker-border: #{map.get(map.get($theme, 'dateTimePicker'), 'border')};
+        --datetime-date-time-picker-foreground: #{map.get(map.get($theme, 'dateTimePicker'), 'foreground')};
+        --datetime-date-time-picker-period-datum-border: #{map.get(map.get(map.get($theme, 'dateTimePicker'), 'periodDatum'), 'border')};
+        --datetime-date-time-picker-active-border: #{map.get(map.get(map.get($theme, 'dateTimePicker'), 'active'), 'border')};
+        --datetime-date-time-picker-active-background: #{map.get(map.get(map.get($theme, 'dateTimePicker'), 'active'), 'background')};
+        --datetime-date-time-picker-clickable-hover-background: #{map.get(map.get(map.get(map.get($theme, 'dateTimePicker'), 'clickable'), 'hover'), 'background')};
+        --datetime-date-time-picker-clickable-hover-border: #{map.get(map.get(map.get(map.get($theme, 'dateTimePicker'), 'clickable'), 'hover'), 'border')};
+        --datetime-date-time-picker-disabled-background: #{map.get(map.get(map.get($theme, 'dateTimePicker'), 'disabled'), 'background')};
+        --datetime-date-time-picker-today-border: #{map.get(map.get(map.get($theme, 'dateTimePicker'), 'today'), 'border')};
+        --datetime-day-picker-weekend-foreground: #{map.get(map.get(map.get($theme, 'dayPicker'), 'weekend'), 'foreground')};
+    }
 }
 
 @mixin buildThemeCss

package/styles/core/_theme.scss

@@ -1,3 +1,41 @@
 $defaultTheme:
 (
+    dateTimePicker:
+    (
+        background: #FFFFFF,
+        border: #333333,
+        foreground: #111111,
+        periodDatum:
+        (
+            border: transparent,
+        ),
+        active:
+        (
+            border: transparent,
+            background: #00c3ff,
+        ),
+        clickable:
+        (
+            hover:
+            (
+                background: #00e7ff,
+                border: transparent,
+            ),
+        ),
+        disabled:
+        (
+            background: #CFCFCF,
+        ),
+        today:
+        (
+            border: #0077ff,
+        ),
+    ),
+    dayPicker:
+    (
+        weekend:
+        (
+            foreground: #850000,
+        ),
+    ),
 );

package/styles/themes/dark.scss

@@ -4,6 +4,16 @@
 
 $_darkDefaultTheme:
 (
+    dateTimePicker:
+    (
+        background: #111111,
+        border: #EAEAEA,
+        foreground: #FAFAFA,
+        disabled:
+        (
+            background: #5B5B5B,
+        ),
+    ),
 );
 
 @function defineTheme($colors: (), $font: 'Inter')

package/version.bak

@@ -1 +1 @@
-5.0.0-beta.20221020182702 
+5.0.0-beta.20221021035527