From 2604dc19a143dcf16419122dca332bff3ffd8e52 Mon Sep 17 00:00:00 2001 From: michael Date: Mon, 28 Aug 2023 13:43:14 +0200 Subject: [PATCH 1/2] Implemented beforeOpen event --- README.md | 19 +++++++++-------- package-lock.json | 6 +++--- package.json | 7 ++++--- .../date-time-picker-container.component.ts | 15 ++++++++++++- .../date-time/date-time-picker.component.ts | 21 +++++++++++++++++++ .../picker/src/lib/dialog/dialog-ref.class.ts | 16 ++++++++++++++ .../picker/src/lib/dialog/dialog.service.ts | 9 ++++++++ 7 files changed, 77 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index d8094549..f4253010 100755 --- a/README.md +++ b/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]` ------- diff --git a/package-lock.json b/package-lock.json index 7bb7b132..bc9581aa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -52,9 +52,9 @@ "typescript": "~4.5.4" }, "peerDependencies": { - "@angular/cdk": "^13.1.1", - "@angular/common": "^13.1.2", - "@angular/core": "^13.1.2" + "@angular/cdk": "^13.0.3 || ^14.0.0 || ^15.0.0 || ^16.0.0", + "@angular/common": "^13.0.3 || ^14.0.0 || ^15.0.0 || ^16.0.0", + "@angular/core": "^13.0.3 || ^14.0.0 || ^15.0.0 || ^16.0.0" } }, "node_modules/@ampproject/remapping": { diff --git a/package.json b/package.json index 03c86351..3b9dd75a 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/projects/picker/src/lib/date-time/date-time-picker-container.component.ts b/projects/picker/src/lib/date-time/date-time-picker-container.component.ts index 22d62d40..2278c33c 100644 --- a/projects/picker/src/lib/date-time/date-time-picker-container.component.ts +++ b/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 // 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 return this.confirmSelected$.asObservable(); } + private beforePickerOpened$ = new Subject(); + + get beforePickerOpenedStream(): Observable { + return this.beforePickerOpened$.asObservable(); + } + private pickerOpened$ = new Subject(); get pickerOpenedStream(): Observable { @@ -226,6 +233,12 @@ export class OwlDateTimeContainerComponent 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') { diff --git a/projects/picker/src/lib/date-time/date-time-picker.component.ts b/projects/picker/src/lib/date-time/date-time-picker.component.ts index ca1100d5..5354b821 100644 --- a/projects/picker/src/lib/date-time/date-time-picker.component.ts +++ b/projects/picker/src/lib/date-time/date-time-picker.component.ts @@ -225,6 +225,12 @@ export class OwlDateTimeComponent extends OwlDateTime @Output() afterPickerClosed = new EventEmitter(); + /** + * Callback before the picker is open + * */ + @Output() + beforePickerOpen = new EventEmitter(); + /** * Callback when the picker is open * */ @@ -271,6 +277,7 @@ export class OwlDateTimeComponent extends OwlDateTime 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 extends OwlDateTime 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 extends OwlDateTime ); 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 extends OwlDateTime 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)) diff --git a/projects/picker/src/lib/dialog/dialog-ref.class.ts b/projects/picker/src/lib/dialog/dialog-ref.class.ts index 2c552d51..74f135bc 100644 --- a/projects/picker/src/lib/dialog/dialog-ref.class.ts +++ b/projects/picker/src/lib/dialog/dialog-ref.class.ts @@ -16,6 +16,8 @@ export class OwlDialogRef { private _beforeClose$ = new Subject(); + private _beforeOpen$ = new Subject(); + private _afterOpen$ = new Subject(); private _afterClosed$ = new Subject(); @@ -36,6 +38,16 @@ export class OwlDialogRef { 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 { return this.container.isAnimating; } + public beforeOpen(): Observable { + return this._beforeOpen$.asObservable(); + } + public afterOpen(): Observable { return this._afterOpen$.asObservable(); } diff --git a/projects/picker/src/lib/dialog/dialog.service.ts b/projects/picker/src/lib/dialog/dialog.service.ts index 97b76f24..25f721a1 100644 --- a/projects/picker/src/lib/dialog/dialog.service.ts +++ b/projects/picker/src/lib/dialog/dialog.service.ts @@ -67,6 +67,7 @@ export class OwlDialogService { private ariaHiddenElements = new Map(); private _openDialogsAtThisLevel: OwlDialogRef[] = []; + private _beforeOpenAtThisLevel = new Subject>(); private _afterOpenAtThisLevel = new Subject>(); private _afterAllClosedAtThisLevel = new Subject(); @@ -77,6 +78,13 @@ export class OwlDialogService { : this._openDialogsAtThisLevel; } + /** Stream that emits when a dialog has been opened. */ + get beforeOpen(): Subject> { + return this.parentDialog + ? this.parentDialog.beforeOpen + : this._beforeOpenAtThisLevel; + } + /** Stream that emits when a dialog has been opened. */ get afterOpen(): Subject> { 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; } From 7bbbb91aeb4370331d2c0941cd022b138e5b391f Mon Sep 17 00:00:00 2001 From: Daniel Moncada Date: Mon, 27 Nov 2023 08:49:55 -0800 Subject: [PATCH 2/2] update version --- package-lock.json | 4 ++-- package.json | 2 +- projects/picker/package.json | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index bc9581aa..3ab0d736 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@danielmoncada/angular-datetime-picker", - "version": "16.0.1", + "version": "16.1.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@danielmoncada/angular-datetime-picker", - "version": "16.0.1", + "version": "16.1.0", "license": "MIT", "dependencies": { "@angular/animations": "^13.3.5", diff --git a/package.json b/package.json index 3b9dd75a..046ee2c6 100644 --- a/package.json +++ b/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", diff --git a/projects/picker/package.json b/projects/picker/package.json index 8e38e637..a5cc95ba 100644 --- a/projects/picker/package.json +++ b/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",