@igor2017/sat-popover
Version:
Popover component for Angular
68 lines • 7.86 kB
JavaScript
import { Directive, HostListener, Input } from '@angular/core';
import { coerceNumberProperty } from '@angular/cdk/coercion';
import { of, Subject } from 'rxjs';
import { delay, switchMap, takeUntil } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "./popover.component";
class SatPopoverHoverDirective {
anchor;
/**
* Amount of time to delay (ms) after hovering starts before
* the popover opens. Defaults to 0ms.
*/
get satPopoverHover() {
return this._satPopoverHover;
}
set satPopoverHover(val) {
this._satPopoverHover = coerceNumberProperty(val);
}
_satPopoverHover = 0;
/** Emits when the directive is destroyed. */
_onDestroy = new Subject();
/** Emits when the user's mouse enters the element. */
_onMouseEnter = new Subject();
/** Emits when the user's mouse leaves the element. */
_onMouseLeave = new Subject();
constructor(anchor) {
this.anchor = anchor;
}
ngAfterViewInit() {
// Whenever the user hovers this host element, delay the configured
// amount of time and open the popover. Terminate if the mouse leaves
// the host element before the delay is complete.
this._onMouseEnter
.pipe(switchMap(() => {
return of(null).pipe(delay(this._satPopoverHover || 0), takeUntil(this._onMouseLeave));
}), takeUntil(this._onDestroy))
.subscribe(() => this.anchor.popover.open());
}
ngOnDestroy() {
this._onDestroy.next();
this._onDestroy.complete();
}
showPopover() {
this._onMouseEnter.next();
}
closePopover() {
this._onMouseLeave.next();
this.anchor.popover.close();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SatPopoverHoverDirective, deps: [{ token: i1.SatPopoverAnchor }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: SatPopoverHoverDirective, selector: "[satPopoverHover]", inputs: { satPopoverHover: "satPopoverHover" }, host: { listeners: { "mouseenter": "showPopover()", "mouseleave": "closePopover()" } }, ngImport: i0 });
}
export { SatPopoverHoverDirective };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SatPopoverHoverDirective, decorators: [{
type: Directive,
args: [{
selector: '[satPopoverHover]'
}]
}], ctorParameters: function () { return [{ type: i1.SatPopoverAnchor }]; }, propDecorators: { satPopoverHover: [{
type: Input
}], showPopover: [{
type: HostListener,
args: ['mouseenter']
}], closePopover: [{
type: HostListener,
args: ['mouseleave']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicG9wb3Zlci1ob3Zlci5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvbGliL3BvcG92ZXIvcG9wb3Zlci1ob3Zlci5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFpQixTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBYSxNQUFNLGVBQWUsQ0FBQztBQUN6RixPQUFPLEVBQUUsb0JBQW9CLEVBQWUsTUFBTSx1QkFBdUIsQ0FBQztBQUMxRSxPQUFPLEVBQUUsRUFBRSxFQUFFLE9BQU8sRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUNuQyxPQUFPLEVBQUUsS0FBSyxFQUFFLFNBQVMsRUFBRSxTQUFTLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7O0FBSTdELE1BR2Esd0JBQXdCO0lBdUJoQjtJQXRCbkI7OztPQUdHO0lBQ0gsSUFDSSxlQUFlO1FBQ2pCLE9BQU8sSUFBSSxDQUFDLGdCQUFnQixDQUFDO0lBQy9CLENBQUM7SUFDRCxJQUFJLGVBQWUsQ0FBQyxHQUFnQjtRQUNsQyxJQUFJLENBQUMsZ0JBQWdCLEdBQUcsb0JBQW9CLENBQUMsR0FBRyxDQUFDLENBQUM7SUFDcEQsQ0FBQztJQUNPLGdCQUFnQixHQUFHLENBQUMsQ0FBQztJQUU3Qiw2Q0FBNkM7SUFDckMsVUFBVSxHQUFHLElBQUksT0FBTyxFQUFRLENBQUM7SUFFekMsc0RBQXNEO0lBQzlDLGFBQWEsR0FBRyxJQUFJLE9BQU8sRUFBUSxDQUFDO0lBRTVDLHNEQUFzRDtJQUM5QyxhQUFhLEdBQUcsSUFBSSxPQUFPLEVBQVEsQ0FBQztJQUU1QyxZQUFtQixNQUF3QjtRQUF4QixXQUFNLEdBQU4sTUFBTSxDQUFrQjtJQUFHLENBQUM7SUFFL0MsZUFBZTtRQUNiLG1FQUFtRTtRQUNuRSxxRUFBcUU7UUFDckUsaURBQWlEO1FBQ2pELElBQUksQ0FBQyxhQUFhO2FBQ2YsSUFBSSxDQUNILFNBQVMsQ0FBQyxHQUFHLEVBQUU7WUFDYixPQUFPLEVBQUUsQ0FBQyxJQUFJLENBQUMsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxnQkFBZ0IsSUFBSSxDQUFDLENBQUMsRUFBRSxTQUFTLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDLENBQUM7UUFDekYsQ0FBQyxDQUFDLEVBQ0YsU0FBUyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FDM0I7YUFDQSxTQUFTLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxPQUFPLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQztJQUNqRCxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDdkIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUM3QixDQUFDO0lBR0QsV0FBVztRQUNULElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDNUIsQ0FBQztJQUdELFlBQVk7UUFDVixJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQzFCLElBQUksQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLEtBQUssRUFBRSxDQUFDO0lBQzlCLENBQUM7dUdBckRVLHdCQUF3QjsyRkFBeEIsd0JBQXdCOztTQUF4Qix3QkFBd0I7MkZBQXhCLHdCQUF3QjtrQkFIcEMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsbUJBQW1CO2lCQUM5Qjt1R0FPSyxlQUFlO3NCQURsQixLQUFLO2dCQXdDTixXQUFXO3NCQURWLFlBQVk7dUJBQUMsWUFBWTtnQkFNMUIsWUFBWTtzQkFEWCxZQUFZO3VCQUFDLFlBQVkiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBZnRlclZpZXdJbml0LCBEaXJlY3RpdmUsIEhvc3RMaXN0ZW5lciwgSW5wdXQsIE9uRGVzdHJveSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgY29lcmNlTnVtYmVyUHJvcGVydHksIE51bWJlcklucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY2RrL2NvZXJjaW9uJztcbmltcG9ydCB7IG9mLCBTdWJqZWN0IH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBkZWxheSwgc3dpdGNoTWFwLCB0YWtlVW50aWwgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5cbmltcG9ydCB7IFNhdFBvcG92ZXJBbmNob3IgfSBmcm9tICcuL3BvcG92ZXIuY29tcG9uZW50JztcblxuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW3NhdFBvcG92ZXJIb3Zlcl0nXG59KVxuZXhwb3J0IGNsYXNzIFNhdFBvcG92ZXJIb3ZlckRpcmVjdGl2ZSBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQsIE9uRGVzdHJveSB7XG4gIC8qKlxuICAgKiBBbW91bnQgb2YgdGltZSB0byBkZWxheSAobXMpIGFmdGVyIGhvdmVyaW5nIHN0YXJ0cyBiZWZvcmVcbiAgICogdGhlIHBvcG92ZXIgb3BlbnMuIERlZmF1bHRzIHRvIDBtcy5cbiAgICovXG4gIEBJbnB1dCgpXG4gIGdldCBzYXRQb3BvdmVySG92ZXIoKSB7XG4gICAgcmV0dXJuIHRoaXMuX3NhdFBvcG92ZXJIb3ZlcjtcbiAgfVxuICBzZXQgc2F0UG9wb3ZlckhvdmVyKHZhbDogTnVtYmVySW5wdXQpIHtcbiAgICB0aGlzLl9zYXRQb3BvdmVySG92ZXIgPSBjb2VyY2VOdW1iZXJQcm9wZXJ0eSh2YWwpO1xuICB9XG4gIHByaXZhdGUgX3NhdFBvcG92ZXJIb3ZlciA9IDA7XG5cbiAgLyoqIEVtaXRzIHdoZW4gdGhlIGRpcmVjdGl2ZSBpcyBkZXN0cm95ZWQuICovXG4gIHByaXZhdGUgX29uRGVzdHJveSA9IG5ldyBTdWJqZWN0PHZvaWQ+KCk7XG5cbiAgLyoqIEVtaXRzIHdoZW4gdGhlIHVzZXIncyBtb3VzZSBlbnRlcnMgdGhlIGVsZW1lbnQuICovXG4gIHByaXZhdGUgX29uTW91c2VFbnRlciA9IG5ldyBTdWJqZWN0PHZvaWQ+KCk7XG5cbiAgLyoqIEVtaXRzIHdoZW4gdGhlIHVzZXIncyBtb3VzZSBsZWF2ZXMgdGhlIGVsZW1lbnQuICovXG4gIHByaXZhdGUgX29uTW91c2VMZWF2ZSA9IG5ldyBTdWJqZWN0PHZvaWQ+KCk7XG5cbiAgY29uc3RydWN0b3IocHVibGljIGFuY2hvcjogU2F0UG9wb3ZlckFuY2hvcikge31cblxuICBuZ0FmdGVyVmlld0luaXQoKSB7XG4gICAgLy8gV2hlbmV2ZXIgdGhlIHVzZXIgaG92ZXJzIHRoaXMgaG9zdCBlbGVtZW50LCBkZWxheSB0aGUgY29uZmlndXJlZFxuICAgIC8vIGFtb3VudCBvZiB0aW1lIGFuZCBvcGVuIHRoZSBwb3BvdmVyLiBUZXJtaW5hdGUgaWYgdGhlIG1vdXNlIGxlYXZlc1xuICAgIC8vIHRoZSBob3N0IGVsZW1lbnQgYmVmb3JlIHRoZSBkZWxheSBpcyBjb21wbGV0ZS5cbiAgICB0aGlzLl9vbk1vdXNlRW50ZXJcbiAgICAgIC5waXBlKFxuICAgICAgICBzd2l0Y2hNYXAoKCkgPT4ge1xuICAgICAgICAgIHJldHVybiBvZihudWxsKS5waXBlKGRlbGF5KHRoaXMuX3NhdFBvcG92ZXJIb3ZlciB8fCAwKSwgdGFrZVVudGlsKHRoaXMuX29uTW91c2VMZWF2ZSkpO1xuICAgICAgICB9KSxcbiAgICAgICAgdGFrZVVudGlsKHRoaXMuX29uRGVzdHJveSlcbiAgICAgIClcbiAgICAgIC5zdWJzY3JpYmUoKCkgPT4gdGhpcy5hbmNob3IucG9wb3Zlci5vcGVuKCkpO1xuICB9XG5cbiAgbmdPbkRlc3Ryb3koKSB7XG4gICAgdGhpcy5fb25EZXN0cm95Lm5leHQoKTtcbiAgICB0aGlzLl9vbkRlc3Ryb3kuY29tcGxldGUoKTtcbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ21vdXNlZW50ZXInKVxuICBzaG93UG9wb3ZlcigpIHtcbiAgICB0aGlzLl9vbk1vdXNlRW50ZXIubmV4dCgpO1xuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignbW91c2VsZWF2ZScpXG4gIGNsb3NlUG9wb3ZlcigpIHtcbiAgICB0aGlzLl9vbk1vdXNlTGVhdmUubmV4dCgpO1xuICAgIHRoaXMuYW5jaG9yLnBvcG92ZXIuY2xvc2UoKTtcbiAgfVxufVxuIl19