Implemented beforePickerOpen event

README.md

@@ -127,15 +127,16 @@ Properties for `owl-date-time`
 
 Events for `owl-date-time`
 -------
-|Events|Parameter|Description|
-|:--- |:--- |:--- |
-|`afterPickerOpen`|null|Callback to invoke when the picker is opened|
-|`afterPickerClosed`|null|Callback to invoke when the picker is closed.|
-|`yearSelected`|T|Callback to invoke when the year is selected.This doesn't imply a change on the selected date.|
-|`monthSelected`|T|Callback to invoke when the month is selected.This doesn't imply a change on the selected date.|
-|`dateClicked`|T|Callback when the selected data changes.|
-|`selectedChanged`|T|Callback when the currently selected data changes.|
-|`userSelection`|null|Callback when any date is selected.|
+| Events              |Parameter| Description                                                                                     |
+|:--------------------|:--- |:------------------------------------------------------------------------------------------------|
+| `beforePickerOpen`    |null| Callback to invoke before the picker is opened                                                    |
+| `afterPickerOpen`   |null| Callback to invoke when the picker is opened                                                    |
+| `afterPickerClosed` |null| Callback to invoke when the picker is closed.                                                   |
+| `yearSelected`      |T| Callback to invoke when the year is selected.This doesn't imply a change on the selected date.  |
+| `monthSelected`     |T| Callback to invoke when the month is selected.This doesn't imply a change on the selected date. |
+| `dateClicked`       |T| Callback when the selected data changes.                                                        |
+| `selectedChanged`   |T| Callback when the currently selected data changes.                                              |
+| `userSelection`     |null| Callback when any date is selected.                                                             |
 
 Properties for `input[owlDateTime]`
 -------

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danielmoncada/angular-datetime-picker",
-  "version": "16.0.1",
+  "version": "16.1.0",
   "description": "Angular Date Time Picker",
   "keywords": [
     "Angular",
@@ -23,12 +23,13 @@
     "test-with-coverage": "ng test --watch=false --no-progress --browsers=ChromeHeadlessNoSandbox --code-coverage=true picker",
     "lint": "ng lint",
     "e2e": "ng e2e",
-    "build_lib": "ng build picker --configuration production && cp README.md dist/picker",
+    "build_lib_onWindows": "ng build picker --configuration production && copy \"README.md\" \"dist/picker\"",
+    "build_lib_onLinux": "ng build picker --configuration production && cp README.md dist/picker",
     "build_css_onWindows": "mkdir \"dist/picker/assets/style\" && node-sass --output-style=compressed projects/picker/src/sass/picker.scss > dist/picker/assets/style/picker.min.css",
     "build_css_onLinux": "mkdir -p dist/picker/assets/style && node-sass --output-style=compressed projects/picker/src/sass/picker.scss > dist/picker/assets/style/picker.min.css",
     "npm_pack": "cd dist/picker && npm pack",
-    "package_windows": "npm run build_lib && npm run build_css_onWindows && npm run npm_pack",
-    "package_linux": "npm run build_lib && npm run build_css_onLinux && npm run npm_pack"
+    "package_windows": "npm run build_lib_onWindows && npm run build_css_onWindows && npm run npm_pack",
+    "package_linux": "npm run build_lib_onLinux && npm run build_css_onLinux && npm run npm_pack"
   },
   "repository": {
     "type": "git",

projects/picker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danielmoncada/angular-datetime-picker",
-  "version": "16.0.1",
+  "version": "16.1.0",
   "description": "Angular Date Time Picker",
   "keywords": [
     "Angular",

projects/picker/src/lib/date-time/date-time-picker-container.component.ts

@@ -41,6 +41,7 @@ import {
         owlDateTimePickerAnimations.fadeInPicker
     ],
     host: {
+        '(@transformPicker.start)': 'handleContainerAnimationStart($event)',
         '(@transformPicker.done)': 'handleContainerAnimationDone($event)',
         '[class.owl-dt-container]': 'owlDTContainerClass',
         '[class.owl-dt-popup-container]': 'owlDTPopupContainerClass',
@@ -64,7 +65,7 @@ export class OwlDateTimeContainerComponent<T>
     // retain start and end time
     private retainStartTime: T;
     private retainEndTime: T;
-    
+
     /**
      * Stream emits when try to hide picker
      * */
@@ -83,6 +84,12 @@ export class OwlDateTimeContainerComponent<T>
         return this.confirmSelected$.asObservable();
     }
 
+    private beforePickerOpened$ = new Subject<any>();
+
+    get beforePickerOpenedStream(): Observable<any> {
+        return this.beforePickerOpened$.asObservable();
+    }
+
     private pickerOpened$ = new Subject<any>();
 
     get pickerOpenedStream(): Observable<any> {
@@ -226,6 +233,12 @@ export class OwlDateTimeContainerComponent<T>
         this.focusPicker();
     }
 
+    public handleContainerAnimationStart(event: AnimationEvent): void {
+        const toState = event.toState;
+        if (toState === 'enter') {
+            this.beforePickerOpened$.next();
+        }
+    }
     public handleContainerAnimationDone(event: AnimationEvent): void {
         const toState = event.toState;
         if (toState === 'enter') {

projects/picker/src/lib/date-time/date-time-picker.component.ts

@@ -225,6 +225,12 @@ export class OwlDateTimeComponent<T> extends OwlDateTime<T>
     @Output()
     afterPickerClosed = new EventEmitter<any>();
 
+    /**
+     * Callback before the picker is open
+     * */
+    @Output()
+    beforePickerOpen = new EventEmitter<any>();
+
     /**
      * Callback when the picker is open
      * */
@@ -271,6 +277,7 @@ export class OwlDateTimeComponent<T> extends OwlDateTime<T>
     private hidePickerStreamSub = Subscription.EMPTY;
     private confirmSelectedStreamSub = Subscription.EMPTY;
     private pickerOpenedStreamSub = Subscription.EMPTY;
+    private pickerBeforeOpenedStreamSub = Subscription.EMPTY;
 
     /** The element that was focused before the date time picker was opened. */
     private focusedElementBeforeOpen: HTMLElement | null = null;
@@ -515,6 +522,11 @@ export class OwlDateTimeComponent<T> extends OwlDateTime<T>
             this.confirmSelectedStreamSub = null;
         }
 
+        if (this.pickerBeforeOpenedStreamSub) {
+            this.pickerBeforeOpenedStreamSub.unsubscribe();
+            this.pickerBeforeOpenedStreamSub = null;
+        }
+
         if (this.pickerOpenedStreamSub) {
             this.pickerOpenedStreamSub.unsubscribe();
             this.pickerOpenedStreamSub = null;
@@ -586,6 +598,9 @@ export class OwlDateTimeComponent<T> extends OwlDateTime<T>
         );
         this.pickerContainer = this.dialogRef.componentInstance;
 
+        this.dialogRef.beforeOpen().subscribe(() => {
+            this.beforePickerOpen.emit(null);
+        });
         this.dialogRef.afterOpen().subscribe(() => {
             this.afterPickerOpen.emit(null);
             this._opened = true;
@@ -621,6 +636,12 @@ export class OwlDateTimeComponent<T> extends OwlDateTime<T>
                     this.popupRef.updatePosition();
                 });
 
+            this.pickerBeforeOpenedStreamSub = this.pickerContainer.beforePickerOpenedStream
+                .pipe(take(1))
+                .subscribe(() => {
+                    this.beforePickerOpen.emit(null);
+                });
+
             // emit open stream
             this.pickerOpenedStreamSub = this.pickerContainer.pickerOpenedStream
                 .pipe(take(1))

projects/picker/src/lib/dialog/dialog-ref.class.ts

@@ -16,6 +16,8 @@ export class OwlDialogRef<T> {
 
     private _beforeClose$ = new Subject<any>();
 
+    private _beforeOpen$ = new Subject<any>();
+
     private _afterOpen$ = new Subject<any>();
 
     private _afterClosed$ = new Subject<any>();
@@ -36,6 +38,16 @@ export class OwlDialogRef<T> {
                  public readonly id: string,
                  location?: Location ) {
 
+        this.container.animationStateChanged
+            .pipe(
+                filter(( event: AnimationEvent ) => event.phaseName === 'start' && event.toState === 'enter'),
+                take(1)
+            )
+            .subscribe(() => {
+                this._beforeOpen$.next();
+                this._beforeOpen$.complete();
+            });
+
         this.container.animationStateChanged
             .pipe(
                 filter(( event: AnimationEvent ) => event.phaseName === 'done' && event.toState === 'enter'),
@@ -142,6 +154,10 @@ export class OwlDialogRef<T> {
         return this.container.isAnimating;
     }
 
+    public beforeOpen(): Observable<any> {
+        return this._beforeOpen$.asObservable();
+    }
+
     public afterOpen(): Observable<any> {
         return this._afterOpen$.asObservable();
     }

projects/picker/src/lib/dialog/dialog.service.ts

@@ -67,6 +67,7 @@ export class OwlDialogService {
     private ariaHiddenElements = new Map<Element, string | null>();
 
     private _openDialogsAtThisLevel: OwlDialogRef<any>[] = [];
+    private _beforeOpenAtThisLevel = new Subject<OwlDialogRef<any>>();
     private _afterOpenAtThisLevel = new Subject<OwlDialogRef<any>>();
     private _afterAllClosedAtThisLevel = new Subject<void>();
 
@@ -77,6 +78,13 @@ export class OwlDialogService {
             : this._openDialogsAtThisLevel;
     }
 
+    /** Stream that emits when a dialog has been opened. */
+    get beforeOpen(): Subject<OwlDialogRef<any>> {
+        return this.parentDialog
+            ? this.parentDialog.beforeOpen
+            : this._beforeOpenAtThisLevel;
+    }
+
     /** Stream that emits when a dialog has been opened. */
     get afterOpen(): Subject<OwlDialogRef<any>> {
         return this.parentDialog
@@ -155,6 +163,7 @@ export class OwlDialogService {
         dialogRef
             .afterClosed()
             .subscribe(() => this.removeOpenDialog(dialogRef));
+        this.beforeOpen.next(dialogRef);
         this.afterOpen.next(dialogRef);
         return dialogRef;
     }