@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
60 lines • 11.2 kB
JavaScript
import { ViewportRuler } from '@angular/cdk/scrolling';
import { ElementRef, inject, Injectable } from '@angular/core';
import { BehaviorSubject, fromEvent, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { ResizeService } from '../../directives/resize/index';
import * as i0 from "@angular/core";
export class PopoverOrientationService {
constructor() {
this._resizeService = inject(ResizeService);
this._viewportRuler = inject(ViewportRuler);
}
createPopoverOrientationListener(element, parentElement) {
const nativeElement = element instanceof ElementRef ? element.nativeElement : element;
const nativeElementParent = parentElement instanceof ElementRef ? parentElement.nativeElement : element;
return new PopoverOrientationListener(nativeElement, nativeElementParent, this._resizeService, this._viewportRuler);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: PopoverOrientationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: PopoverOrientationService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: PopoverOrientationService, decorators: [{
type: Injectable
}] });
export class PopoverOrientationListener {
constructor(_element, _elementParent, _resizeService, _viewportRuler) {
this._element = _element;
this._elementParent = _elementParent;
this._resizeService = _resizeService;
this._viewportRuler = _viewportRuler;
/** Allow subscribing to state changes */
this.orientation$ = new BehaviorSubject(1);
/** Max value the height of the dropdown can be */
this.maxHeight = 250;
this._onDestroy = new Subject();
// watch for changes to the typeahead size
this._resizeService.addResizeListener(this._element).pipe(takeUntil(this._onDestroy))
.subscribe(() => {
this.onScrollOrResize();
});
// watch for changes to the typeahead position when scrolling or resizing
fromEvent(window, 'scroll', { passive: true }).pipe(takeUntil(this._onDestroy))
.subscribe(() => this.onScrollOrResize());
fromEvent(window, 'resize', { passive: true }).pipe(takeUntil(this._onDestroy))
.subscribe(() => this.onScrollOrResize());
}
destroy() {
this.orientation$.complete();
this._onDestroy.next();
this._onDestroy.complete();
this._resizeService.removeResizeListener(this._element);
}
onScrollOrResize() {
this._rect = this._elementParent ? this._elementParent.parentElement.getBoundingClientRect() : this._element.parentElement.getBoundingClientRect();
// use the maxHeight input value if the element does not exist yet to prevent the direction from immediately changing when opened
const itemHeight = this._element.offsetHeight || this.maxHeight;
const viewportSize = this._viewportRuler.getViewportSize();
const bottomSpaceAvailable = viewportSize.height - this._rect.bottom - itemHeight;
this.orientation$.next(bottomSpaceAvailable <= 0 ? 0 /* PopoverOrientation.Up */ : 1 /* PopoverOrientation.Down */);
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicG9wb3Zlci1vcmllbnRhdGlvbi5zZXJ2aWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL3NlcnZpY2VzL3BvcG92ZXItb3JpZW50YXRpb24vcG9wb3Zlci1vcmllbnRhdGlvbi5zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUN2RCxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sRUFBRSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDL0QsT0FBTyxFQUFFLGVBQWUsRUFBRSxTQUFTLEVBQUUsT0FBTyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQzNELE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUMzQyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sK0JBQStCLENBQUM7O0FBRzlELE1BQU0sT0FBTyx5QkFBeUI7SUFEdEM7UUFFcUIsbUJBQWMsR0FBRyxNQUFNLENBQUMsYUFBYSxDQUFDLENBQUM7UUFFdkMsbUJBQWMsR0FBRyxNQUFNLENBQUMsYUFBYSxDQUFDLENBQUM7S0FhM0Q7SUFYVSxnQ0FBZ0MsQ0FDbkMsT0FBaUMsRUFDakMsYUFBd0M7UUFFeEMsTUFBTSxhQUFhLEdBQUcsT0FBTyxZQUFZLFVBQVUsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLGFBQWEsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDO1FBRXRGLE1BQU0sbUJBQW1CLEdBQUcsYUFBYSxZQUFZLFVBQVUsQ0FBQyxDQUFDLENBQUMsYUFBYSxDQUFDLGFBQWEsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDO1FBRXhHLE9BQU8sSUFBSSwwQkFBMEIsQ0FBQyxhQUFhLEVBQUUsbUJBQW1CLEVBQUUsSUFBSSxDQUFDLGNBQWMsRUFBRSxJQUFJLENBQUMsY0FBYyxDQUFDLENBQUM7SUFDeEgsQ0FBQzsrR0FkUSx5QkFBeUI7bUhBQXpCLHlCQUF5Qjs7NEZBQXpCLHlCQUF5QjtrQkFEckMsVUFBVTs7QUFtQlgsTUFBTSxPQUFPLDBCQUEwQjtJQWFuQyxZQUE2QixRQUFxQixFQUNyQixjQUEyQixFQUMzQixjQUE2QixFQUM3QixjQUE2QjtRQUg3QixhQUFRLEdBQVIsUUFBUSxDQUFhO1FBQ3JCLG1CQUFjLEdBQWQsY0FBYyxDQUFhO1FBQzNCLG1CQUFjLEdBQWQsY0FBYyxDQUFlO1FBQzdCLG1CQUFjLEdBQWQsY0FBYyxDQUFlO1FBZDFELHlDQUF5QztRQUN6QyxpQkFBWSxHQUFHLElBQUksZUFBZSxDQUFxQixDQUFDLENBQUMsQ0FBQztRQUUxRCxrREFBa0Q7UUFDbEQsY0FBUyxHQUFXLEdBQUcsQ0FBQztRQUtQLGVBQVUsR0FBRyxJQUFJLE9BQU8sRUFBUSxDQUFDO1FBTzlDLDBDQUEwQztRQUMxQyxJQUFJLENBQUMsY0FBYyxDQUFDLGlCQUFpQixDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQzthQUNoRixTQUFTLENBQUMsR0FBRyxFQUFFO1lBQ1osSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7UUFDNUIsQ0FBQyxDQUFDLENBQUM7UUFFUCx5RUFBeUU7UUFDekUsU0FBUyxDQUFDLE1BQU0sRUFBRSxRQUFRLEVBQUUsRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQzthQUMxRSxTQUFTLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUMsQ0FBQztRQUM5QyxTQUFTLENBQUMsTUFBTSxFQUFFLFFBQVEsRUFBRSxFQUFFLE9BQU8sRUFBRSxJQUFJLEVBQUUsQ0FBQyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDO2FBQzFFLFNBQVMsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsZ0JBQWdCLEVBQUUsQ0FBQyxDQUFDO0lBRWxELENBQUM7SUFFRCxPQUFPO1FBQ0gsSUFBSSxDQUFDLFlBQVksQ0FBQyxRQUFRLEVBQUUsQ0FBQztRQUM3QixJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ3ZCLElBQUksQ0FBQyxVQUFVLENBQUMsUUFBUSxFQUFFLENBQUM7UUFDM0IsSUFBSSxDQUFDLGNBQWMsQ0FBQyxvQkFBb0IsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDNUQsQ0FBQztJQUVPLGdCQUFnQjtRQUNwQixJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxjQUFjLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxjQUFjLENBQUMsYUFBYSxDQUFDLHFCQUFxQixFQUFFLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsYUFBYSxDQUFDLHFCQUFxQixFQUFFLENBQUM7UUFDbkosaUlBQWlJO1FBQ2pJLE1BQU0sVUFBVSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsWUFBWSxJQUFJLElBQUksQ0FBQyxTQUFTLENBQUM7UUFDaEUsTUFBTSxZQUFZLEdBQUcsSUFBSSxDQUFDLGNBQWMsQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUMzRCxNQUFNLG9CQUFvQixHQUFHLFlBQVksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLEdBQUcsVUFBVSxDQUFDO1FBRWxGLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLG9CQUFvQixJQUFJLENBQUMsQ0FBQyxDQUFDLCtCQUF1QixDQUFDLGdDQUF3QixDQUFDLENBQUM7SUFDeEcsQ0FBQztDQUNKIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgVmlld3BvcnRSdWxlciB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9zY3JvbGxpbmcnO1xuaW1wb3J0IHsgRWxlbWVudFJlZiwgaW5qZWN0LCBJbmplY3RhYmxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBCZWhhdmlvclN1YmplY3QsIGZyb21FdmVudCwgU3ViamVjdCB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgdGFrZVVudGlsIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuaW1wb3J0IHsgUmVzaXplU2VydmljZSB9IGZyb20gJy4uLy4uL2RpcmVjdGl2ZXMvcmVzaXplL2luZGV4JztcblxuQEluamVjdGFibGUoKVxuZXhwb3J0IGNsYXNzIFBvcG92ZXJPcmllbnRhdGlvblNlcnZpY2Uge1xuICAgIHByaXZhdGUgcmVhZG9ubHkgX3Jlc2l6ZVNlcnZpY2UgPSBpbmplY3QoUmVzaXplU2VydmljZSk7XG5cbiAgICBwcml2YXRlIHJlYWRvbmx5IF92aWV3cG9ydFJ1bGVyID0gaW5qZWN0KFZpZXdwb3J0UnVsZXIpO1xuXG4gICAgcHVibGljIGNyZWF0ZVBvcG92ZXJPcmllbnRhdGlvbkxpc3RlbmVyKFxuICAgICAgICBlbGVtZW50OiBFbGVtZW50UmVmIHwgSFRNTEVsZW1lbnQsXG4gICAgICAgIHBhcmVudEVsZW1lbnQ/OiBFbGVtZW50UmVmIHwgSFRNTEVsZW1lbnQpOiBQb3BvdmVyT3JpZW50YXRpb25MaXN0ZW5lciB7XG5cbiAgICAgICAgY29uc3QgbmF0aXZlRWxlbWVudCA9IGVsZW1lbnQgaW5zdGFuY2VvZiBFbGVtZW50UmVmID8gZWxlbWVudC5uYXRpdmVFbGVtZW50IDogZWxlbWVudDtcblxuICAgICAgICBjb25zdCBuYXRpdmVFbGVtZW50UGFyZW50ID0gcGFyZW50RWxlbWVudCBpbnN0YW5jZW9mIEVsZW1lbnRSZWYgPyBwYXJlbnRFbGVtZW50Lm5hdGl2ZUVsZW1lbnQgOiBlbGVtZW50O1xuXG4gICAgICAgIHJldHVybiBuZXcgUG9wb3Zlck9yaWVudGF0aW9uTGlzdGVuZXIobmF0aXZlRWxlbWVudCwgbmF0aXZlRWxlbWVudFBhcmVudCwgdGhpcy5fcmVzaXplU2VydmljZSwgdGhpcy5fdmlld3BvcnRSdWxlcik7XG4gICAgfVxuXG59XG5cbmV4cG9ydCBjbGFzcyBQb3BvdmVyT3JpZW50YXRpb25MaXN0ZW5lciB7XG5cbiAgICAvKiogQWxsb3cgc3Vic2NyaWJpbmcgdG8gc3RhdGUgY2hhbmdlcyAqL1xuICAgIG9yaWVudGF0aW9uJCA9IG5ldyBCZWhhdmlvclN1YmplY3Q8UG9wb3Zlck9yaWVudGF0aW9uPigxKTtcblxuICAgIC8qKiBNYXggdmFsdWUgdGhlIGhlaWdodCBvZiB0aGUgZHJvcGRvd24gY2FuIGJlICovXG4gICAgbWF4SGVpZ2h0OiBudW1iZXIgPSAyNTA7XG5cbiAgICAvKiogU3RvcmUgdGhlIGxhc3Qga25vd24gcG9zaXRpb24gYW5kIHNpemUgKi9cbiAgICBwcml2YXRlIF9yZWN0OiBDbGllbnRSZWN0O1xuXG4gICAgcHJpdmF0ZSByZWFkb25seSBfb25EZXN0cm95ID0gbmV3IFN1YmplY3Q8dm9pZD4oKTtcblxuICAgIGNvbnN0cnVjdG9yKHByaXZhdGUgcmVhZG9ubHkgX2VsZW1lbnQ6IEhUTUxFbGVtZW50LFxuICAgICAgICAgICAgICAgIHByaXZhdGUgcmVhZG9ubHkgX2VsZW1lbnRQYXJlbnQ6IEhUTUxFbGVtZW50LFxuICAgICAgICAgICAgICAgIHByaXZhdGUgcmVhZG9ubHkgX3Jlc2l6ZVNlcnZpY2U6IFJlc2l6ZVNlcnZpY2UsXG4gICAgICAgICAgICAgICAgcHJpdmF0ZSByZWFkb25seSBfdmlld3BvcnRSdWxlcjogVmlld3BvcnRSdWxlcikge1xuXG4gICAgICAgIC8vIHdhdGNoIGZvciBjaGFuZ2VzIHRvIHRoZSB0eXBlYWhlYWQgc2l6ZVxuICAgICAgICB0aGlzLl9yZXNpemVTZXJ2aWNlLmFkZFJlc2l6ZUxpc3RlbmVyKHRoaXMuX2VsZW1lbnQpLnBpcGUodGFrZVVudGlsKHRoaXMuX29uRGVzdHJveSkpXG4gICAgICAgICAgICAuc3Vic2NyaWJlKCgpID0+IHtcbiAgICAgICAgICAgICAgICB0aGlzLm9uU2Nyb2xsT3JSZXNpemUoKTtcbiAgICAgICAgICAgIH0pO1xuXG4gICAgICAgIC8vIHdhdGNoIGZvciBjaGFuZ2VzIHRvIHRoZSB0eXBlYWhlYWQgcG9zaXRpb24gd2hlbiBzY3JvbGxpbmcgb3IgcmVzaXppbmdcbiAgICAgICAgZnJvbUV2ZW50KHdpbmRvdywgJ3Njcm9sbCcsIHsgcGFzc2l2ZTogdHJ1ZSB9KS5waXBlKHRha2VVbnRpbCh0aGlzLl9vbkRlc3Ryb3kpKVxuICAgICAgICAgICAgLnN1YnNjcmliZSgoKSA9PiB0aGlzLm9uU2Nyb2xsT3JSZXNpemUoKSk7XG4gICAgICAgIGZyb21FdmVudCh3aW5kb3csICdyZXNpemUnLCB7IHBhc3NpdmU6IHRydWUgfSkucGlwZSh0YWtlVW50aWwodGhpcy5fb25EZXN0cm95KSlcbiAgICAgICAgICAgIC5zdWJzY3JpYmUoKCkgPT4gdGhpcy5vblNjcm9sbE9yUmVzaXplKCkpO1xuXG4gICAgfVxuXG4gICAgZGVzdHJveSgpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5vcmllbnRhdGlvbiQuY29tcGxldGUoKTtcbiAgICAgICAgdGhpcy5fb25EZXN0cm95Lm5leHQoKTtcbiAgICAgICAgdGhpcy5fb25EZXN0cm95LmNvbXBsZXRlKCk7XG4gICAgICAgIHRoaXMuX3Jlc2l6ZVNlcnZpY2UucmVtb3ZlUmVzaXplTGlzdGVuZXIodGhpcy5fZWxlbWVudCk7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBvblNjcm9sbE9yUmVzaXplKCkge1xuICAgICAgICB0aGlzLl9yZWN0ID0gdGhpcy5fZWxlbWVudFBhcmVudCA/IHRoaXMuX2VsZW1lbnRQYXJlbnQucGFyZW50RWxlbWVudC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKSA6IHRoaXMuX2VsZW1lbnQucGFyZW50RWxlbWVudC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKTtcbiAgICAgICAgLy8gdXNlIHRoZSBtYXhIZWlnaHQgaW5wdXQgdmFsdWUgaWYgdGhlIGVsZW1lbnQgZG9lcyBub3QgZXhpc3QgeWV0IHRvIHByZXZlbnQgdGhlIGRpcmVjdGlvbiBmcm9tIGltbWVkaWF0ZWx5IGNoYW5naW5nIHdoZW4gb3BlbmVkXG4gICAgICAgIGNvbnN0IGl0ZW1IZWlnaHQgPSB0aGlzLl9lbGVtZW50Lm9mZnNldEhlaWdodCB8fCB0aGlzLm1heEhlaWdodDtcbiAgICAgICAgY29uc3Qgdmlld3BvcnRTaXplID0gdGhpcy5fdmlld3BvcnRSdWxlci5nZXRWaWV3cG9ydFNpemUoKTtcbiAgICAgICAgY29uc3QgYm90dG9tU3BhY2VBdmFpbGFibGUgPSB2aWV3cG9ydFNpemUuaGVpZ2h0IC0gdGhpcy5fcmVjdC5ib3R0b20gLSBpdGVtSGVpZ2h0O1xuXG4gICAgICAgIHRoaXMub3JpZW50YXRpb24kLm5leHQoYm90dG9tU3BhY2VBdmFpbGFibGUgPD0gMCA/IFBvcG92ZXJPcmllbnRhdGlvbi5VcCA6IFBvcG92ZXJPcmllbnRhdGlvbi5Eb3duKTtcbiAgICB9XG59XG5cbmV4cG9ydCBjb25zdCBlbnVtIFBvcG92ZXJPcmllbnRhdGlvbiB7XG4gICAgVXAsXG4gICAgRG93blxufVxuIl19