Datetime changes for scroll (#392)

* Date time scroll issue resolved

* phone component changes also included

* date component alignment fixed

---------

Co-authored-by: tumms2021389 <[email protected]>

Author: SambhuPega

packages/angular-sdk-components/src/lib/_components/field/date-time/date-time.component.html

@@ -17,7 +17,7 @@
           [readonly]="bDisabled$"
         />
         <mat-datepicker-toggle matSuffix [owlDateTimeTrigger]="dtPicker"></mat-datepicker-toggle>
-        <owl-date-time #dtPicker [disabled]="bDisabled$"></owl-date-time>
+        <owl-date-time #dtPicker [disabled]="bDisabled$" [scrollStrategy]="scrollStrategy"></owl-date-time>
         <mat-error *ngIf="fieldControl?.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </div>

packages/angular-sdk-components/src/lib/_components/field/date-time/date-time.component.ts

@@ -1,9 +1,12 @@
-import { Component, OnInit, forwardRef, OnDestroy } from '@angular/core';
+import { Component, OnInit, forwardRef, OnDestroy, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
+
+import { ScrollStrategyOptions } from '@angular/cdk/overlay';
+
 import { OwlDateTimeModule, OwlNativeDateTimeModule } from '@danielmoncada/angular-datetime-picker';
 import dayjs from 'dayjs';
 
@@ -45,6 +48,9 @@ export class DateTimeComponent extends FieldBase implements OnInit, OnDestroy {
   timezone = PCore.getEnvironmentInfo()?.getTimeZone();
   override placeholder = `${this.theDateFormat.dateFormatStringLC}, hh:mm A`;
 
+  private sso = inject(ScrollStrategyOptions);
+  scrollStrategy = this.sso.reposition();
+
   override ngOnInit(): void {
     super.ngOnInit();
 

packages/angular-sdk-components/src/lib/_components/field/date/date.component.html

@@ -20,7 +20,7 @@
           (dateChange)="fieldOnDateChange($event)"
         />
         <mat-datepicker-toggle matSuffix [for]="pegadate" [disabled]="bDisabled$"></mat-datepicker-toggle>
-        <mat-datepicker #pegadate [startAt]="value$"></mat-datepicker>
+        <mat-datepicker #pegadate [startAt]="value$" xPosition="end"></mat-datepicker>
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </div>

packages/angular-sdk-components/src/lib/_components/field/phone/phone.component.scss

@@ -24,11 +24,6 @@
   font-size: 0.7rem;
 }
 
-::ng-deep .cdk-overlay-pane {
-  left: 32rem !important;
-  top: 20rem !important;
-}
-
 ::ng-deep .mat-mdc-menu-panel {
   max-width: 20rem;
 }