From 0588afc5bead7a1c2a8e372b3705f6342e1cfd10 Mon Sep 17 00:00:00 2001
From: sumeyye <sum.the.developer@gmail.com>
Date: Tue, 1 Jul 2025 11:25:27 +0300
Subject: [PATCH] update: add `placement` attr input for the date picker

---
 .../extensible-date-time-picker.component.ts  | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/date-time-picker/extensible-date-time-picker.component.ts b/npm/ng-packs/packages/components/extensible/src/lib/components/date-time-picker/extensible-date-time-picker.component.ts
index a9902c8bae..9f4455b1c2 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/date-time-picker/extensible-date-time-picker.component.ts
+++ b/npm/ng-packs/packages/components/extensible/src/lib/components/date-time-picker/extensible-date-time-picker.component.ts
@@ -3,7 +3,7 @@ import {
   ChangeDetectorRef,
   Component,
   inject,
-  Input,
+  input,
   Optional,
   SkipSelf,
   ViewChild,
@@ -17,6 +17,7 @@ import {
   NgbTimeAdapter,
   NgbTimepicker,
   NgbTimepickerModule,
+  Placement,
 } from '@ng-bootstrap/ng-bootstrap';
 import { NgxValidateCoreModule } from '@ngx-validate/core';
 import { DateTimeAdapter } from '@abp/ng.theme.shared';
@@ -35,8 +36,8 @@ import { selfFactory } from '../../utils/factory.util';
   selector: 'abp-extensible-date-time-picker',
   template: `
     <input
-      [id]="prop.id"
-      [formControlName]="prop.name"
+      [id]="prop().id"
+      [formControlName]="prop().name"
       (ngModelChange)="setTime($event)"
       (click)="datepicker.open()"
       (keyup.space)="datepicker.open()"
@@ -44,13 +45,14 @@ import { selfFactory } from '../../utils/factory.util';
       #datepicker="ngbDatepicker"
       type="text"
       class="form-control"
+      [placement]="placement()"
     />
     <ngb-timepicker
       #timepicker
-      [formControlName]="prop.name"
+      [formControlName]="prop().name"
       (ngModelChange)="setDate($event)"
-      [meridian]="meridian"
-    ></ngb-timepicker>
+      [meridian]="meridian()"
+    />
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   viewProviders: [
@@ -72,8 +74,9 @@ import { selfFactory } from '../../utils/factory.util';
 export class ExtensibleDateTimePickerComponent {
   public readonly cdRef = inject(ChangeDetectorRef);
 
-  @Input() prop!: FormProp;
-  @Input() meridian = false;
+  prop = input<FormProp>();
+  meridian = input<boolean>(false);
+  placement = input<Placement>('bottom-left');
 
   @ViewChild(NgbInputDatepicker) date!: NgbInputDatepicker;
   @ViewChild(NgbTimepicker) time!: NgbTimepicker;