xui
Version:
xUI Components for Angular
78 lines • 12.6 kB
JavaScript
import { ChangeDetectionStrategy, Component, EventEmitter, HostListener, Input, Output, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
import { ConnectionPositionPair, Overlay } from '@angular/cdk/overlay';
import { TemplatePortal } from '@angular/cdk/portal';
import * as i0 from "@angular/core";
import * as i1 from "@angular/cdk/overlay";
import * as i2 from "@angular/common";
import * as i3 from "@angular/cdk/a11y";
export class PopoverComponent {
get styles() {
const ret = {
'x-popover': true
};
ret[`x-popover-${this.position}`] = true;
return ret;
}
constructor(overlay, viewContainerRef) {
this.overlay = overlay;
this.viewContainerRef = viewContainerRef;
this.position = 'right';
this.afterClosed = new EventEmitter();
const config = {
scrollStrategy: this.overlay.scrollStrategies.reposition(),
hasBackdrop: true,
backdropClass: 'x-popover-backdrop'
};
this.overlayRef = this.overlay.create(config);
this.overlayRef.backdropClick().subscribe(() => {
this.close();
});
}
open(anchor) {
this.overlayRef.updatePositionStrategy(this.calculatePositionStrategy(anchor ?? this.anchor));
const userProfilePortal = new TemplatePortal(this.popoverTemplate, this.viewContainerRef);
this.overlayRef.attach(userProfilePortal);
}
close() {
this.overlayRef.detach();
this.afterClosed.emit();
}
calculatePositionStrategy(anchor) {
return this.overlay
.position()
.flexibleConnectedTo(anchor?.elementRef ?? anchor)
.withPositions([this.getPositionStrategy()])
.withPush(false);
}
getPositionStrategy() {
switch (this.position) {
case 'right':
return new ConnectionPositionPair({ originX: 'end', originY: 'center' }, { overlayX: 'start', overlayY: 'top' });
case 'left':
return new ConnectionPositionPair({ originX: 'start', originY: 'center' }, { overlayX: 'end', overlayY: 'top' });
case 'top':
return new ConnectionPositionPair({ originX: 'center', originY: 'top' }, { overlayX: 'center', overlayY: 'bottom' });
case 'bottom':
return new ConnectionPositionPair({ originX: 'center', originY: 'bottom' }, { overlayX: 'center', overlayY: 'top' });
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: PopoverComponent, deps: [{ token: i1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: PopoverComponent, selector: "xui-popover", inputs: { anchor: "anchor", position: "position" }, outputs: { afterClosed: "afterClosed" }, host: { listeners: { "document:keydown.esc": "close()" } }, viewQueries: [{ propertyName: "popoverTemplate", first: true, predicate: ["popoverTemplate"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #popoverTemplate>\n <div [ngClass]=\"styles\" cdkTrapFocus>\n <div class=\"x-popover-arrow\"></div>\n <div class=\"x-popover-content\">\n <ng-content></ng-content>\n </div>\n </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: PopoverComponent, decorators: [{
type: Component,
args: [{ selector: 'xui-popover', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #popoverTemplate>\n <div [ngClass]=\"styles\" cdkTrapFocus>\n <div class=\"x-popover-arrow\"></div>\n <div class=\"x-popover-content\">\n <ng-content></ng-content>\n </div>\n </div>\n</ng-template>\n" }]
}], ctorParameters: function () { return [{ type: i1.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { anchor: [{
type: Input
}], position: [{
type: Input
}], afterClosed: [{
type: Output
}], popoverTemplate: [{
type: ViewChild,
args: ['popoverTemplate', { static: true }]
}], close: [{
type: HostListener,
args: ['document:keydown.esc']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicG9wb3Zlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzL3h1aS9zcmMvcG9wb3Zlci9wb3BvdmVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL2xpYnMveHVpL3NyYy9wb3BvdmVyL3BvcG92ZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsWUFBWSxFQUNaLFlBQVksRUFDWixLQUFLLEVBQ0wsTUFBTSxFQUNOLFdBQVcsRUFDWCxTQUFTLEVBQ1QsZ0JBQWdCLEVBQ2pCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxPQUFPLEVBQTZCLE1BQU0sc0JBQXNCLENBQUM7QUFDbEcsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLHFCQUFxQixDQUFDOzs7OztBQVFyRCxNQUFNLE9BQU8sZ0JBQWdCO0lBUzNCLElBQUksTUFBTTtRQUNSLE1BQU0sR0FBRyxHQUFpQztZQUN4QyxXQUFXLEVBQUUsSUFBSTtTQUNsQixDQUFDO1FBRUYsR0FBRyxDQUFDLGFBQWEsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDLEdBQUcsSUFBSSxDQUFDO1FBQ3pDLE9BQU8sR0FBRyxDQUFDO0lBQ2IsQ0FBQztJQUVELFlBQW9CLE9BQWdCLEVBQVUsZ0JBQWtDO1FBQTVELFlBQU8sR0FBUCxPQUFPLENBQVM7UUFBVSxxQkFBZ0IsR0FBaEIsZ0JBQWdCLENBQWtCO1FBZHZFLGFBQVEsR0FBb0IsT0FBTyxDQUFDO1FBRW5DLGdCQUFXLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQWF6QyxNQUFNLE1BQU0sR0FBa0I7WUFDNUIsY0FBYyxFQUFFLElBQUksQ0FBQyxPQUFPLENBQUMsZ0JBQWdCLENBQUMsVUFBVSxFQUFFO1lBQzFELFdBQVcsRUFBRSxJQUFJO1lBQ2pCLGFBQWEsRUFBRSxvQkFBb0I7U0FDcEMsQ0FBQztRQUVGLElBQUksQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDOUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLEVBQUUsQ0FBQyxTQUFTLENBQUMsR0FBRyxFQUFFO1lBQzdDLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztRQUNmLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVELElBQUksQ0FBQyxNQUFzQjtRQUN6QixJQUFJLENBQUMsVUFBVSxDQUFDLHNCQUFzQixDQUFDLElBQUksQ0FBQyx5QkFBeUIsQ0FBQyxNQUFNLElBQUksSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUM7UUFFOUYsTUFBTSxpQkFBaUIsR0FBRyxJQUFJLGNBQWMsQ0FBQyxJQUFJLENBQUMsZUFBZSxFQUFFLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO1FBQzFGLElBQUksQ0FBQyxVQUFVLENBQUMsTUFBTSxDQUFDLGlCQUFpQixDQUFDLENBQUM7SUFDNUMsQ0FBQztJQUdELEtBQUs7UUFDSCxJQUFJLENBQUMsVUFBVSxDQUFDLE1BQU0sRUFBRSxDQUFDO1FBQ3pCLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDMUIsQ0FBQztJQUVPLHlCQUF5QixDQUFDLE1BQXFCO1FBQ3JELE9BQU8sSUFBSSxDQUFDLE9BQU87YUFDaEIsUUFBUSxFQUFFO2FBQ1YsbUJBQW1CLENBQUUsTUFBYyxFQUFFLFVBQVUsSUFBSSxNQUFNLENBQUM7YUFDMUQsYUFBYSxDQUFDLENBQUMsSUFBSSxDQUFDLG1CQUFtQixFQUFFLENBQUMsQ0FBQzthQUMzQyxRQUFRLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDckIsQ0FBQztJQUVPLG1CQUFtQjtRQUN6QixRQUFRLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDckIsS0FBSyxPQUFPO2dCQUNWLE9BQU8sSUFBSSxzQkFBc0IsQ0FDL0IsRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLE9BQU8sRUFBRSxRQUFRLEVBQUUsRUFDckMsRUFBRSxRQUFRLEVBQUUsT0FBTyxFQUFFLFFBQVEsRUFBRSxLQUFLLEVBQUUsQ0FDdkMsQ0FBQztZQUNKLEtBQUssTUFBTTtnQkFDVCxPQUFPLElBQUksc0JBQXNCLENBQy9CLEVBQUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxPQUFPLEVBQUUsUUFBUSxFQUFFLEVBQ3ZDLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUUsS0FBSyxFQUFFLENBQ3JDLENBQUM7WUFDSixLQUFLLEtBQUs7Z0JBQ1IsT0FBTyxJQUFJLHNCQUFzQixDQUMvQixFQUFFLE9BQU8sRUFBRSxRQUFRLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxFQUNyQyxFQUFFLFFBQVEsRUFBRSxRQUFRLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxDQUMzQyxDQUFDO1lBQ0osS0FBSyxRQUFRO2dCQUNYLE9BQU8sSUFBSSxzQkFBc0IsQ0FDL0IsRUFBRSxPQUFPLEVBQUUsUUFBUSxFQUFFLE9BQU8sRUFBRSxRQUFRLEVBQUUsRUFDeEMsRUFBRSxRQUFRLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxLQUFLLEVBQUUsQ0FDeEMsQ0FBQztTQUNMO0lBQ0gsQ0FBQzs4R0EzRVUsZ0JBQWdCO2tHQUFoQixnQkFBZ0IsOFVDcEI3QixzT0FRQTs7MkZEWWEsZ0JBQWdCO2tCQUw1QixTQUFTOytCQUNFLGFBQWEsbUJBQ04sdUJBQXVCLENBQUMsTUFBTTs2SEFNdEMsTUFBTTtzQkFBZCxLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBRUksV0FBVztzQkFBcEIsTUFBTTtnQkFDeUMsZUFBZTtzQkFBOUQsU0FBUzt1QkFBQyxpQkFBaUIsRUFBRSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUU7Z0JBZ0M5QyxLQUFLO3NCQURKLFlBQVk7dUJBQUMsc0JBQXNCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRXZlbnRFbWl0dGVyLFxuICBIb3N0TGlzdGVuZXIsXG4gIElucHV0LFxuICBPdXRwdXQsXG4gIFRlbXBsYXRlUmVmLFxuICBWaWV3Q2hpbGQsXG4gIFZpZXdDb250YWluZXJSZWZcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb25uZWN0aW9uUG9zaXRpb25QYWlyLCBPdmVybGF5LCBPdmVybGF5Q29uZmlnLCBPdmVybGF5UmVmIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL292ZXJsYXknO1xuaW1wb3J0IHsgVGVtcGxhdGVQb3J0YWwgfSBmcm9tICdAYW5ndWxhci9jZGsvcG9ydGFsJztcbmltcG9ydCB7IFBvcG92ZXJBbmNob3IsIFBvcG92ZXJQb3NpdGlvbiB9IGZyb20gJy4vcG9wb3Zlci50eXBlcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3h1aS1wb3BvdmVyJyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHRlbXBsYXRlVXJsOiAnLi9wb3BvdmVyLmNvbXBvbmVudC5odG1sJ1xufSlcbmV4cG9ydCBjbGFzcyBQb3BvdmVyQ29tcG9uZW50IHtcbiAgcHJpdmF0ZSBvdmVybGF5UmVmITogT3ZlcmxheVJlZjtcblxuICBASW5wdXQoKSBhbmNob3IhOiBQb3BvdmVyQW5jaG9yO1xuICBASW5wdXQoKSBwb3NpdGlvbjogUG9wb3ZlclBvc2l0aW9uID0gJ3JpZ2h0JztcblxuICBAT3V0cHV0KCkgYWZ0ZXJDbG9zZWQgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG4gIEBWaWV3Q2hpbGQoJ3BvcG92ZXJUZW1wbGF0ZScsIHsgc3RhdGljOiB0cnVlIH0pIHBvcG92ZXJUZW1wbGF0ZSE6IFRlbXBsYXRlUmVmPHVua25vd24+O1xuXG4gIGdldCBzdHlsZXMoKSB7XG4gICAgY29uc3QgcmV0OiB7IFtrbGFzczogc3RyaW5nXTogYm9vbGVhbiB9ID0ge1xuICAgICAgJ3gtcG9wb3Zlcic6IHRydWVcbiAgICB9O1xuXG4gICAgcmV0W2B4LXBvcG92ZXItJHt0aGlzLnBvc2l0aW9ufWBdID0gdHJ1ZTtcbiAgICByZXR1cm4gcmV0O1xuICB9XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBvdmVybGF5OiBPdmVybGF5LCBwcml2YXRlIHZpZXdDb250YWluZXJSZWY6IFZpZXdDb250YWluZXJSZWYpIHtcbiAgICBjb25zdCBjb25maWc6IE92ZXJsYXlDb25maWcgPSB7XG4gICAgICBzY3JvbGxTdHJhdGVneTogdGhpcy5vdmVybGF5LnNjcm9sbFN0cmF0ZWdpZXMucmVwb3NpdGlvbigpLFxuICAgICAgaGFzQmFja2Ryb3A6IHRydWUsXG4gICAgICBiYWNrZHJvcENsYXNzOiAneC1wb3BvdmVyLWJhY2tkcm9wJ1xuICAgIH07XG5cbiAgICB0aGlzLm92ZXJsYXlSZWYgPSB0aGlzLm92ZXJsYXkuY3JlYXRlKGNvbmZpZyk7XG4gICAgdGhpcy5vdmVybGF5UmVmLmJhY2tkcm9wQ2xpY2soKS5zdWJzY3JpYmUoKCkgPT4ge1xuICAgICAgdGhpcy5jbG9zZSgpO1xuICAgIH0pO1xuICB9XG5cbiAgb3BlbihhbmNob3I/OiBQb3BvdmVyQW5jaG9yKSB7XG4gICAgdGhpcy5vdmVybGF5UmVmLnVwZGF0ZVBvc2l0aW9uU3RyYXRlZ3kodGhpcy5jYWxjdWxhdGVQb3NpdGlvblN0cmF0ZWd5KGFuY2hvciA/PyB0aGlzLmFuY2hvcikpO1xuXG4gICAgY29uc3QgdXNlclByb2ZpbGVQb3J0YWwgPSBuZXcgVGVtcGxhdGVQb3J0YWwodGhpcy5wb3BvdmVyVGVtcGxhdGUsIHRoaXMudmlld0NvbnRhaW5lclJlZik7XG4gICAgdGhpcy5vdmVybGF5UmVmLmF0dGFjaCh1c2VyUHJvZmlsZVBvcnRhbCk7XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdkb2N1bWVudDprZXlkb3duLmVzYycpXG4gIGNsb3NlKCkge1xuICAgIHRoaXMub3ZlcmxheVJlZi5kZXRhY2goKTtcbiAgICB0aGlzLmFmdGVyQ2xvc2VkLmVtaXQoKTtcbiAgfVxuXG4gIHByaXZhdGUgY2FsY3VsYXRlUG9zaXRpb25TdHJhdGVneShhbmNob3I6IFBvcG92ZXJBbmNob3IpIHtcbiAgICByZXR1cm4gdGhpcy5vdmVybGF5XG4gICAgICAucG9zaXRpb24oKVxuICAgICAgLmZsZXhpYmxlQ29ubmVjdGVkVG8oKGFuY2hvciBhcyBhbnkpPy5lbGVtZW50UmVmID8/IGFuY2hvcilcbiAgICAgIC53aXRoUG9zaXRpb25zKFt0aGlzLmdldFBvc2l0aW9uU3RyYXRlZ3koKV0pXG4gICAgICAud2l0aFB1c2goZmFsc2UpO1xuICB9XG5cbiAgcHJpdmF0ZSBnZXRQb3NpdGlvblN0cmF0ZWd5KCk6IENvbm5lY3Rpb25Qb3NpdGlvblBhaXIge1xuICAgIHN3aXRjaCAodGhpcy5wb3NpdGlvbikge1xuICAgICAgY2FzZSAncmlnaHQnOlxuICAgICAgICByZXR1cm4gbmV3IENvbm5lY3Rpb25Qb3NpdGlvblBhaXIoXG4gICAgICAgICAgeyBvcmlnaW5YOiAnZW5kJywgb3JpZ2luWTogJ2NlbnRlcicgfSxcbiAgICAgICAgICB7IG92ZXJsYXlYOiAnc3RhcnQnLCBvdmVybGF5WTogJ3RvcCcgfVxuICAgICAgICApO1xuICAgICAgY2FzZSAnbGVmdCc6XG4gICAgICAgIHJldHVybiBuZXcgQ29ubmVjdGlvblBvc2l0aW9uUGFpcihcbiAgICAgICAgICB7IG9yaWdpblg6ICdzdGFydCcsIG9yaWdpblk6ICdjZW50ZXInIH0sXG4gICAgICAgICAgeyBvdmVybGF5WDogJ2VuZCcsIG92ZXJsYXlZOiAndG9wJyB9XG4gICAgICAgICk7XG4gICAgICBjYXNlICd0b3AnOlxuICAgICAgICByZXR1cm4gbmV3IENvbm5lY3Rpb25Qb3NpdGlvblBhaXIoXG4gICAgICAgICAgeyBvcmlnaW5YOiAnY2VudGVyJywgb3JpZ2luWTogJ3RvcCcgfSxcbiAgICAgICAgICB7IG92ZXJsYXlYOiAnY2VudGVyJywgb3ZlcmxheVk6ICdib3R0b20nIH1cbiAgICAgICAgKTtcbiAgICAgIGNhc2UgJ2JvdHRvbSc6XG4gICAgICAgIHJldHVybiBuZXcgQ29ubmVjdGlvblBvc2l0aW9uUGFpcihcbiAgICAgICAgICB7IG9yaWdpblg6ICdjZW50ZXInLCBvcmlnaW5ZOiAnYm90dG9tJyB9LFxuICAgICAgICAgIHsgb3ZlcmxheVg6ICdjZW50ZXInLCBvdmVybGF5WTogJ3RvcCcgfVxuICAgICAgICApO1xuICAgIH1cbiAgfVxufVxuIiwiPG5nLXRlbXBsYXRlICNwb3BvdmVyVGVtcGxhdGU+XG4gIDxkaXYgW25nQ2xhc3NdPVwic3R5bGVzXCIgY2RrVHJhcEZvY3VzPlxuICAgIDxkaXYgY2xhc3M9XCJ4LXBvcG92ZXItYXJyb3dcIj48L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwieC1wb3BvdmVyLWNvbnRlbnRcIj5cbiAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG48L25nLXRlbXBsYXRlPlxuIl19