@nova-ui/bits
Version:
SolarWinds Nova Framework
92 lines • 12.4 kB
JavaScript
// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to
// deal in the Software without restriction, including without limitation the
// rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
// sell copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
import { Component, ElementRef, NgZone, ViewEncapsulation, } from "@angular/core";
import { take } from "rxjs/operators";
import { EdgeDetectionService } from "../../services/edge-detection.service";
import { PositionService } from "../../services/position.service";
import * as i0 from "@angular/core";
import * as i1 from "../../services/position.service";
import * as i2 from "../../services/edge-detection.service";
/**
* @ignore
* @deprecated in v11 - Use PopupComponent instead - Removal: NUI-5796
*/
export class PopupContainerComponent {
constructor(elRef, zone, positionService, edgeDetector) {
this.elRef = elRef;
this.zone = zone;
this.positionService = positionService;
this.edgeDetector = edgeDetector;
}
ngAfterViewInit() {
const position = this.setPosition(this.elRef.nativeElement, this.hostElement);
this.zone.onStable
.asObservable()
.pipe(take(1))
.subscribe(() => {
// To be sure, that change detection mechanism was invoked and placement was updated
this.zone.run(() => {
this.top = position.top;
this.left = position.left;
});
});
}
setPosition(popup, popupTrigger) {
// Element with dimensions
const popupArea = popup.querySelector(".nui-popup__area");
const placement = this.getValidPopupPlacement();
return this.positionService.getPosition(popupTrigger, popupArea, `${placement.vertical}-${placement.horizontal}`, true);
}
getValidPopupPlacement() {
const popupArea = this.elRef.nativeElement.querySelector(".nui-popup__area");
const canBe = this.edgeDetector.canBe(this.hostElement, popupArea);
return {
vertical: canBe?.placed.bottom ? "bottom" : "top",
horizontal: canBe?.aligned.right ? "right" : "left",
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PopupContainerComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.PositionService }, { token: i2.EdgeDetectionService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PopupContainerComponent, selector: "nui-popup-container", ngImport: i0, template: `
<div
class="nui-popup-container nui-popup--opened nui-popup--detached"
[style.left.px]="left"
[style.top.px]="top"
>
<ng-content></ng-content>
</div>
`, isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PopupContainerComponent, decorators: [{
type: Component,
args: [{
selector: "nui-popup-container",
template: `
<div
class="nui-popup-container nui-popup--opened nui-popup--detached"
[style.left.px]="left"
[style.top.px]="top"
>
<ng-content></ng-content>
</div>
`,
encapsulation: ViewEncapsulation.None,
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.PositionService }, { type: i2.EdgeDetectionService }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicG9wdXAtY29udGFpbmVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9saWIvcG9wdXAvcG9wdXAtY29udGFpbmVyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSx5REFBeUQ7QUFDekQsRUFBRTtBQUNGLCtFQUErRTtBQUMvRSw0RUFBNEU7QUFDNUUsOEVBQThFO0FBQzlFLCtFQUErRTtBQUMvRSw4RUFBOEU7QUFDOUUsNERBQTREO0FBQzVELEVBQUU7QUFDRiw2RUFBNkU7QUFDN0UsdURBQXVEO0FBQ3ZELEVBQUU7QUFDRiw2RUFBNkU7QUFDN0UsNEVBQTRFO0FBQzVFLCtFQUErRTtBQUMvRSwwRUFBMEU7QUFDMUUsaUZBQWlGO0FBQ2pGLDZFQUE2RTtBQUM3RSxpQkFBaUI7QUFFakIsT0FBTyxFQUVILFNBQVMsRUFDVCxVQUFVLEVBQ1YsTUFBTSxFQUNOLGlCQUFpQixHQUNwQixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFFdEMsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sdUNBQXVDLENBQUM7QUFDN0UsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLGlDQUFpQyxDQUFDOzs7O0FBRWxFOzs7R0FHRztBQWNILE1BQU0sT0FBTyx1QkFBdUI7SUFLaEMsWUFDWSxLQUFpQixFQUNqQixJQUFZLEVBQ1osZUFBZ0MsRUFDaEMsWUFBa0M7UUFIbEMsVUFBSyxHQUFMLEtBQUssQ0FBWTtRQUNqQixTQUFJLEdBQUosSUFBSSxDQUFRO1FBQ1osb0JBQWUsR0FBZixlQUFlLENBQWlCO1FBQ2hDLGlCQUFZLEdBQVosWUFBWSxDQUFzQjtJQUMzQyxDQUFDO0lBRUcsZUFBZTtRQUNsQixNQUFNLFFBQVEsR0FBRyxJQUFJLENBQUMsV0FBVyxDQUM3QixJQUFJLENBQUMsS0FBSyxDQUFDLGFBQWEsRUFDeEIsSUFBSSxDQUFDLFdBQVcsQ0FDbkIsQ0FBQztRQUNGLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUTthQUNiLFlBQVksRUFBRTthQUNkLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUM7YUFDYixTQUFTLENBQUMsR0FBRyxFQUFFO1lBQ1osb0ZBQW9GO1lBQ3BGLElBQUksQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLEdBQUcsRUFBRTtnQkFDZixJQUFJLENBQUMsR0FBRyxHQUFHLFFBQVEsQ0FBQyxHQUFHLENBQUM7Z0JBQ3hCLElBQUksQ0FBQyxJQUFJLEdBQUcsUUFBUSxDQUFDLElBQUksQ0FBQztZQUM5QixDQUFDLENBQUMsQ0FBQztRQUNQLENBQUMsQ0FBQyxDQUFDO0lBQ1gsQ0FBQztJQUVNLFdBQVcsQ0FDZCxLQUFrQixFQUNsQixZQUF5QjtRQUV6QiwwQkFBMEI7UUFDMUIsTUFBTSxTQUFTLEdBQWdCLEtBQUssQ0FBQyxhQUFhLENBQUMsa0JBQWtCLENBQUMsQ0FBQztRQUN2RSxNQUFNLFNBQVMsR0FBRyxJQUFJLENBQUMsc0JBQXNCLEVBQUUsQ0FBQztRQUNoRCxPQUFPLElBQUksQ0FBQyxlQUFlLENBQUMsV0FBVyxDQUNuQyxZQUFZLEVBQ1osU0FBUyxFQUNULEdBQUcsU0FBUyxDQUFDLFFBQVEsSUFBSSxTQUFTLENBQUMsVUFBVSxFQUFFLEVBQy9DLElBQUksQ0FDUCxDQUFDO0lBQ04sQ0FBQztJQUVPLHNCQUFzQjtRQUMxQixNQUFNLFNBQVMsR0FDWCxJQUFJLENBQUMsS0FBSyxDQUFDLGFBQWEsQ0FBQyxhQUFhLENBQUMsa0JBQWtCLENBQUMsQ0FBQztRQUMvRCxNQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsV0FBVyxFQUFFLFNBQVMsQ0FBQyxDQUFDO1FBQ25FLE9BQU87WUFDSCxRQUFRLEVBQUUsS0FBSyxFQUFFLE1BQU0sQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsS0FBSztZQUNqRCxVQUFVLEVBQUUsS0FBSyxFQUFFLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsTUFBTTtTQUN0RCxDQUFDO0lBQ04sQ0FBQzsrR0FwRFEsdUJBQXVCO21HQUF2Qix1QkFBdUIsMkRBWHRCOzs7Ozs7OztLQVFUOzs0RkFHUSx1QkFBdUI7a0JBYm5DLFNBQVM7bUJBQUM7b0JBQ1AsUUFBUSxFQUFFLHFCQUFxQjtvQkFDL0IsUUFBUSxFQUFFOzs7Ozs7OztLQVFUO29CQUNELGFBQWEsRUFBRSxpQkFBaUIsQ0FBQyxJQUFJO2lCQUN4QyIsInNvdXJjZXNDb250ZW50IjpbIi8vIMKpIDIwMjIgU29sYXJXaW5kcyBXb3JsZHdpZGUsIExMQy4gQWxsIHJpZ2h0cyByZXNlcnZlZC5cbi8vXG4vLyBQZXJtaXNzaW9uIGlzIGhlcmVieSBncmFudGVkLCBmcmVlIG9mIGNoYXJnZSwgdG8gYW55IHBlcnNvbiBvYnRhaW5pbmcgYSBjb3B5XG4vLyAgb2YgdGhpcyBzb2Z0d2FyZSBhbmQgYXNzb2NpYXRlZCBkb2N1bWVudGF0aW9uIGZpbGVzICh0aGUgXCJTb2Z0d2FyZVwiKSwgdG9cbi8vICBkZWFsIGluIHRoZSBTb2Z0d2FyZSB3aXRob3V0IHJlc3RyaWN0aW9uLCBpbmNsdWRpbmcgd2l0aG91dCBsaW1pdGF0aW9uIHRoZVxuLy8gIHJpZ2h0cyB0byB1c2UsIGNvcHksIG1vZGlmeSwgbWVyZ2UsIHB1Ymxpc2gsIGRpc3RyaWJ1dGUsIHN1YmxpY2Vuc2UsIGFuZC9vclxuLy8gIHNlbGwgY29waWVzIG9mIHRoZSBTb2Z0d2FyZSwgYW5kIHRvIHBlcm1pdCBwZXJzb25zIHRvIHdob20gdGhlIFNvZnR3YXJlIGlzXG4vLyAgZnVybmlzaGVkIHRvIGRvIHNvLCBzdWJqZWN0IHRvIHRoZSBmb2xsb3dpbmcgY29uZGl0aW9uczpcbi8vXG4vLyBUaGUgYWJvdmUgY29weXJpZ2h0IG5vdGljZSBhbmQgdGhpcyBwZXJtaXNzaW9uIG5vdGljZSBzaGFsbCBiZSBpbmNsdWRlZCBpblxuLy8gIGFsbCBjb3BpZXMgb3Igc3Vic3RhbnRpYWwgcG9ydGlvbnMgb2YgdGhlIFNvZnR3YXJlLlxuLy9cbi8vIFRIRSBTT0ZUV0FSRSBJUyBQUk9WSURFRCBcIkFTIElTXCIsIFdJVEhPVVQgV0FSUkFOVFkgT0YgQU5ZIEtJTkQsIEVYUFJFU1MgT1Jcbi8vICBJTVBMSUVELCBJTkNMVURJTkcgQlVUIE5PVCBMSU1JVEVEIFRPIFRIRSBXQVJSQU5USUVTIE9GIE1FUkNIQU5UQUJJTElUWSxcbi8vICBGSVRORVNTIEZPUiBBIFBBUlRJQ1VMQVIgUFVSUE9TRSBBTkQgTk9OSU5GUklOR0VNRU5ULiBJTiBOTyBFVkVOVCBTSEFMTCBUSEVcbi8vICBBVVRIT1JTIE9SIENPUFlSSUdIVCBIT0xERVJTIEJFIExJQUJMRSBGT1IgQU5ZIENMQUlNLCBEQU1BR0VTIE9SIE9USEVSXG4vLyAgTElBQklMSVRZLCBXSEVUSEVSIElOIEFOIEFDVElPTiBPRiBDT05UUkFDVCwgVE9SVCBPUiBPVEhFUldJU0UsIEFSSVNJTkcgRlJPTSxcbi8vICBPVVQgT0YgT1IgSU4gQ09OTkVDVElPTiBXSVRIIFRIRSBTT0ZUV0FSRSBPUiBUSEUgVVNFIE9SIE9USEVSIERFQUxJTkdTIElOXG4vLyAgVEhFIFNPRlRXQVJFLlxuXG5pbXBvcnQge1xuICAgIEFmdGVyVmlld0luaXQsXG4gICAgQ29tcG9uZW50LFxuICAgIEVsZW1lbnRSZWYsXG4gICAgTmdab25lLFxuICAgIFZpZXdFbmNhcHN1bGF0aW9uLFxufSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgdGFrZSB9IGZyb20gXCJyeGpzL29wZXJhdG9yc1wiO1xuXG5pbXBvcnQgeyBFZGdlRGV0ZWN0aW9uU2VydmljZSB9IGZyb20gXCIuLi8uLi9zZXJ2aWNlcy9lZGdlLWRldGVjdGlvbi5zZXJ2aWNlXCI7XG5pbXBvcnQgeyBQb3NpdGlvblNlcnZpY2UgfSBmcm9tIFwiLi4vLi4vc2VydmljZXMvcG9zaXRpb24uc2VydmljZVwiO1xuXG4vKipcbiAqIEBpZ25vcmVcbiAqIEBkZXByZWNhdGVkIGluIHYxMSAtIFVzZSBQb3B1cENvbXBvbmVudCBpbnN0ZWFkIC0gUmVtb3ZhbDogTlVJLTU3OTZcbiAqL1xuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6IFwibnVpLXBvcHVwLWNvbnRhaW5lclwiLFxuICAgIHRlbXBsYXRlOiBgXG4gICAgICAgIDxkaXZcbiAgICAgICAgICAgIGNsYXNzPVwibnVpLXBvcHVwLWNvbnRhaW5lciBudWktcG9wdXAtLW9wZW5lZCBudWktcG9wdXAtLWRldGFjaGVkXCJcbiAgICAgICAgICAgIFtzdHlsZS5sZWZ0LnB4XT1cImxlZnRcIlxuICAgICAgICAgICAgW3N0eWxlLnRvcC5weF09XCJ0b3BcIlxuICAgICAgICA+XG4gICAgICAgICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgICAgIDwvZGl2PlxuICAgIGAsXG4gICAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbn0pXG5leHBvcnQgY2xhc3MgUG9wdXBDb250YWluZXJDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0IHtcbiAgICBwdWJsaWMgaG9zdEVsZW1lbnQ6IEhUTUxFbGVtZW50O1xuICAgIHB1YmxpYyB0b3A6IG51bWJlcjtcbiAgICBwdWJsaWMgbGVmdDogbnVtYmVyO1xuXG4gICAgY29uc3RydWN0b3IoXG4gICAgICAgIHByaXZhdGUgZWxSZWY6IEVsZW1lbnRSZWYsXG4gICAgICAgIHByaXZhdGUgem9uZTogTmdab25lLFxuICAgICAgICBwcml2YXRlIHBvc2l0aW9uU2VydmljZTogUG9zaXRpb25TZXJ2aWNlLFxuICAgICAgICBwcml2YXRlIGVkZ2VEZXRlY3RvcjogRWRnZURldGVjdGlvblNlcnZpY2VcbiAgICApIHt9XG5cbiAgICBwdWJsaWMgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgICAgICBjb25zdCBwb3NpdGlvbiA9IHRoaXMuc2V0UG9zaXRpb24oXG4gICAgICAgICAgICB0aGlzLmVsUmVmLm5hdGl2ZUVsZW1lbnQsXG4gICAgICAgICAgICB0aGlzLmhvc3RFbGVtZW50XG4gICAgICAgICk7XG4gICAgICAgIHRoaXMuem9uZS5vblN0YWJsZVxuICAgICAgICAgICAgLmFzT2JzZXJ2YWJsZSgpXG4gICAgICAgICAgICAucGlwZSh0YWtlKDEpKVxuICAgICAgICAgICAgLnN1YnNjcmliZSgoKSA9PiB7XG4gICAgICAgICAgICAgICAgLy8gVG8gYmUgc3VyZSwgdGhhdCBjaGFuZ2UgZGV0ZWN0aW9uIG1lY2hhbmlzbSB3YXMgaW52b2tlZCBhbmQgcGxhY2VtZW50IHdhcyB1cGRhdGVkXG4gICAgICAgICAgICAgICAgdGhpcy56b25lLnJ1bigoKSA9PiB7XG4gICAgICAgICAgICAgICAgICAgIHRoaXMudG9wID0gcG9zaXRpb24udG9wO1xuICAgICAgICAgICAgICAgICAgICB0aGlzLmxlZnQgPSBwb3NpdGlvbi5sZWZ0O1xuICAgICAgICAgICAgICAgIH0pO1xuICAgICAgICAgICAgfSk7XG4gICAgfVxuXG4gICAgcHVibGljIHNldFBvc2l0aW9uKFxuICAgICAgICBwb3B1cDogSFRNTEVsZW1lbnQsXG4gICAgICAgIHBvcHVwVHJpZ2dlcjogSFRNTEVsZW1lbnRcbiAgICApOiB7IHRvcDogbnVtYmVyOyBsZWZ0OiBudW1iZXIgfSB7XG4gICAgICAgIC8vIEVsZW1lbnQgd2l0aCBkaW1lbnNpb25zXG4gICAgICAgIGNvbnN0IHBvcHVwQXJlYSA9IDxIVE1MRWxlbWVudD5wb3B1cC5xdWVyeVNlbGVjdG9yKFwiLm51aS1wb3B1cF9fYXJlYVwiKTtcbiAgICAgICAgY29uc3QgcGxhY2VtZW50ID0gdGhpcy5nZXRWYWxpZFBvcHVwUGxhY2VtZW50KCk7XG4gICAgICAgIHJldHVybiB0aGlzLnBvc2l0aW9uU2VydmljZS5nZXRQb3NpdGlvbihcbiAgICAgICAgICAgIHBvcHVwVHJpZ2dlcixcbiAgICAgICAgICAgIHBvcHVwQXJlYSxcbiAgICAgICAgICAgIGAke3BsYWNlbWVudC52ZXJ0aWNhbH0tJHtwbGFjZW1lbnQuaG9yaXpvbnRhbH1gLFxuICAgICAgICAgICAgdHJ1ZVxuICAgICAgICApO1xuICAgIH1cblxuICAgIHByaXZhdGUgZ2V0VmFsaWRQb3B1cFBsYWNlbWVudCgpIHtcbiAgICAgICAgY29uc3QgcG9wdXBBcmVhID1cbiAgICAgICAgICAgIHRoaXMuZWxSZWYubmF0aXZlRWxlbWVudC5xdWVyeVNlbGVjdG9yKFwiLm51aS1wb3B1cF9fYXJlYVwiKTtcbiAgICAgICAgY29uc3QgY2FuQmUgPSB0aGlzLmVkZ2VEZXRlY3Rvci5jYW5CZSh0aGlzLmhvc3RFbGVtZW50LCBwb3B1cEFyZWEpO1xuICAgICAgICByZXR1cm4ge1xuICAgICAgICAgICAgdmVydGljYWw6IGNhbkJlPy5wbGFjZWQuYm90dG9tID8gXCJib3R0b21cIiA6IFwidG9wXCIsXG4gICAgICAgICAgICBob3Jpem9udGFsOiBjYW5CZT8uYWxpZ25lZC5yaWdodCA/IFwicmlnaHRcIiA6IFwibGVmdFwiLFxuICAgICAgICB9O1xuICAgIH1cbn1cbiJdfQ==