@xui/components
Version:
xUI Components for Angular
72 lines • 12.8 kB
JavaScript
import { ChangeDetectionStrategy, Component, computed, EventEmitter, 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 XuiPopover {
constructor(overlay, viewContainerRef) {
this.overlay = overlay;
this.viewContainerRef = viewContainerRef;
this.anchor = input();
this.position = input('right');
this.afterClosed = new EventEmitter();
this._styles = computed(() => {
const ret = {
'x-popover': true
};
ret[`x-popover-${this.position()}`] = true;
return ret;
});
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: "18.0.1", ngImport: i0, type: XuiPopover, deps: [{ token: i1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XuiPopover, selector: "xui-popover", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { afterClosed: "afterClosed" }, host: { listeners: { "document:keydown.escape": "_close()" } }, viewQueries: [{ propertyName: "popoverTemplate", first: true, predicate: ["popoverTemplate"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #popoverTemplate>\n <div [ngClass]=\"_styles()\" cdkTrapFocus cdkTrapFocusAutoCapture>\n <div class=\"x-popover-arrow\"></div>\n <div class=\"x-popover-content\">\n <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: "18.0.1", ngImport: i0, type: XuiPopover, decorators: [{
type: Component,
args: [{ selector: 'xui-popover', changeDetection: ChangeDetectionStrategy.OnPush, host: {
'(document:keydown.escape)': '_close()'
}, template: "<ng-template #popoverTemplate>\n <div [ngClass]=\"_styles()\" cdkTrapFocus cdkTrapFocusAutoCapture>\n <div class=\"x-popover-arrow\"></div>\n <div class=\"x-popover-content\">\n <ng-content />\n </div>\n </div>\n</ng-template>\n" }]
}], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.ViewContainerRef }], propDecorators: { afterClosed: [{
type: Output
}], popoverTemplate: [{
type: ViewChild,
args: ['popoverTemplate', { static: true }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicG9wb3Zlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2xpYnMveHVpL3NyYy9wb3BvdmVyL3BvcG92ZXIudHMiLCIuLi8uLi8uLi8uLi8uLi9saWJzL3h1aS9zcmMvcG9wb3Zlci9wb3BvdmVyLmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsUUFBUSxFQUNSLFlBQVksRUFDWixLQUFLLEVBQ0wsTUFBTSxFQUNOLFdBQVcsRUFDWCxTQUFTLEVBQ1QsZ0JBQWdCLEVBQ2pCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxPQUFPLEVBQTZCLE1BQU0sc0JBQXNCLENBQUM7QUFDbEcsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLHFCQUFxQixDQUFDOzs7OztBQVdyRCxNQUFNLE9BQU8sVUFBVTtJQWtCckIsWUFDVSxPQUFnQixFQUNoQixnQkFBa0M7UUFEbEMsWUFBTyxHQUFQLE9BQU8sQ0FBUztRQUNoQixxQkFBZ0IsR0FBaEIsZ0JBQWdCLENBQWtCO1FBakI1QyxXQUFNLEdBQUcsS0FBSyxFQUFpQixDQUFDO1FBQ2hDLGFBQVEsR0FBRyxLQUFLLENBQWtCLE9BQU8sQ0FBQyxDQUFDO1FBRWpDLGdCQUFXLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUczQyxZQUFPLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRTtZQUN0QixNQUFNLEdBQUcsR0FBaUM7Z0JBQ3hDLFdBQVcsRUFBRSxJQUFJO2FBQ2xCLENBQUM7WUFFRixHQUFHLENBQUMsYUFBYSxJQUFJLENBQUMsUUFBUSxFQUFFLEVBQUUsQ0FBQyxHQUFHLElBQUksQ0FBQztZQUMzQyxPQUFPLEdBQUcsQ0FBQztRQUNiLENBQUMsQ0FBQyxDQUFDO1FBTUQsTUFBTSxNQUFNLEdBQWtCO1lBQzVCLGNBQWMsRUFBRSxJQUFJLENBQUMsT0FBTyxDQUFDLGdCQUFnQixDQUFDLFVBQVUsRUFBRTtZQUMxRCxXQUFXLEVBQUUsSUFBSTtZQUNqQixhQUFhLEVBQUUsb0JBQW9CO1NBQ3BDLENBQUM7UUFFRixJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsTUFBTSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQzlDLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxFQUFFLENBQUMsU0FBUyxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQyxDQUFDO0lBQ2pFLENBQUM7SUFFRCxJQUFJLENBQUMsTUFBc0I7UUFDekIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxzQkFBc0IsQ0FBQyxJQUFJLENBQUMseUJBQXlCLENBQUMsTUFBTSxJQUFJLElBQUksQ0FBQyxNQUFNLEVBQUcsQ0FBQyxDQUFDLENBQUM7UUFFakcsTUFBTSxpQkFBaUIsR0FBRyxJQUFJLGNBQWMsQ0FBQyxJQUFJLENBQUMsZUFBZSxFQUFFLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO1FBQzFGLElBQUksQ0FBQyxVQUFVLENBQUMsTUFBTSxDQUFDLGlCQUFpQixDQUFDLENBQUM7SUFDNUMsQ0FBQztJQUVELE1BQU07UUFDSixJQUFJLENBQUMsVUFBVSxDQUFDLE1BQU0sRUFBRSxDQUFDO1FBQ3pCLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDMUIsQ0FBQztJQUVPLHlCQUF5QixDQUFDLE1BQXFCO1FBQ3JELE9BQU8sSUFBSSxDQUFDLE9BQU87YUFDaEIsUUFBUSxFQUFFO2FBQ1YsbUJBQW1CLENBQUUsTUFBYyxFQUFFLFVBQVUsSUFBSSxNQUFNLENBQUM7YUFDMUQsYUFBYSxDQUFDLENBQUMsSUFBSSxDQUFDLG1CQUFtQixFQUFFLENBQUMsQ0FBQzthQUMzQyxRQUFRLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDckIsQ0FBQztJQUVPLG1CQUFtQjtRQUN6QixRQUFRLElBQUksQ0FBQyxRQUFRLEVBQUUsRUFBRSxDQUFDO1lBQ3hCLEtBQUssT0FBTztnQkFDVixPQUFPLElBQUksc0JBQXNCLENBQy9CLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxPQUFPLEVBQUUsUUFBUSxFQUFFLEVBQ3JDLEVBQUUsUUFBUSxFQUFFLE9BQU8sRUFBRSxRQUFRLEVBQUUsS0FBSyxFQUFFLENBQ3ZDLENBQUM7WUFDSixLQUFLLE1BQU07Z0JBQ1QsT0FBTyxJQUFJLHNCQUFzQixDQUMvQixFQUFFLE9BQU8sRUFBRSxPQUFPLEVBQUUsT0FBTyxFQUFFLFFBQVEsRUFBRSxFQUN2QyxFQUFFLFFBQVEsRUFBRSxLQUFLLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRSxDQUNyQyxDQUFDO1lBQ0osS0FBSyxLQUFLO2dCQUNSLE9BQU8sSUFBSSxzQkFBc0IsQ0FDL0IsRUFBRSxPQUFPLEVBQUUsUUFBUSxFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQUUsRUFDckMsRUFBRSxRQUFRLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxRQUFRLEVBQUUsQ0FDM0MsQ0FBQztZQUNKLEtBQUssUUFBUTtnQkFDWCxPQUFPLElBQUksc0JBQXNCLENBQy9CLEVBQUUsT0FBTyxFQUFFLFFBQVEsRUFBRSxPQUFPLEVBQUUsUUFBUSxFQUFFLEVBQ3hDLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxRQUFRLEVBQUUsS0FBSyxFQUFFLENBQ3hDLENBQUM7UUFDTixDQUFDO0lBQ0gsQ0FBQzs4R0EzRVUsVUFBVTtrR0FBVixVQUFVLHNpQkN2QnZCLHNQQVFBOzsyRkRlYSxVQUFVO2tCQVJ0QixTQUFTOytCQUNFLGFBQWEsbUJBQ04sdUJBQXVCLENBQUMsTUFBTSxRQUV6Qzt3QkFDSiwyQkFBMkIsRUFBRSxVQUFVO3FCQUN4QzsyR0FRUyxXQUFXO3NCQUFwQixNQUFNO2dCQUNpRCxlQUFlO3NCQUF0RSxTQUFTO3VCQUFDLGlCQUFpQixFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIGNvbXB1dGVkLFxuICBFdmVudEVtaXR0ZXIsXG4gIGlucHV0LFxuICBPdXRwdXQsXG4gIFRlbXBsYXRlUmVmLFxuICBWaWV3Q2hpbGQsXG4gIFZpZXdDb250YWluZXJSZWZcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb25uZWN0aW9uUG9zaXRpb25QYWlyLCBPdmVybGF5LCBPdmVybGF5Q29uZmlnLCBPdmVybGF5UmVmIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL292ZXJsYXknO1xuaW1wb3J0IHsgVGVtcGxhdGVQb3J0YWwgfSBmcm9tICdAYW5ndWxhci9jZGsvcG9ydGFsJztcbmltcG9ydCB7IFBvcG92ZXJBbmNob3IsIFBvcG92ZXJQb3NpdGlvbiB9IGZyb20gJy4vcG9wb3Zlci50eXBlcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3h1aS1wb3BvdmVyJyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHRlbXBsYXRlVXJsOiAncG9wb3Zlci5odG1sJyxcbiAgaG9zdDoge1xuICAgICcoZG9jdW1lbnQ6a2V5ZG93bi5lc2NhcGUpJzogJ19jbG9zZSgpJ1xuICB9XG59KVxuZXhwb3J0IGNsYXNzIFh1aVBvcG92ZXIge1xuICBwcml2YXRlIG92ZXJsYXlSZWYhOiBPdmVybGF5UmVmO1xuXG4gIGFuY2hvciA9IGlucHV0PFBvcG92ZXJBbmNob3I+KCk7XG4gIHBvc2l0aW9uID0gaW5wdXQ8UG9wb3ZlclBvc2l0aW9uPigncmlnaHQnKTtcblxuICBAT3V0cHV0KCkgYWZ0ZXJDbG9zZWQgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG4gIEBWaWV3Q2hpbGQoJ3BvcG92ZXJUZW1wbGF0ZScsIHsgc3RhdGljOiB0cnVlIH0pIHByaXZhdGUgcG9wb3ZlclRlbXBsYXRlITogVGVtcGxhdGVSZWY8dW5rbm93bj47XG5cbiAgX3N0eWxlcyA9IGNvbXB1dGVkKCgpID0+IHtcbiAgICBjb25zdCByZXQ6IHsgW2tsYXNzOiBzdHJpbmddOiBib29sZWFuIH0gPSB7XG4gICAgICAneC1wb3BvdmVyJzogdHJ1ZVxuICAgIH07XG5cbiAgICByZXRbYHgtcG9wb3Zlci0ke3RoaXMucG9zaXRpb24oKX1gXSA9IHRydWU7XG4gICAgcmV0dXJuIHJldDtcbiAgfSk7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBvdmVybGF5OiBPdmVybGF5LFxuICAgIHByaXZhdGUgdmlld0NvbnRhaW5lclJlZjogVmlld0NvbnRhaW5lclJlZlxuICApIHtcbiAgICBjb25zdCBjb25maWc6IE92ZXJsYXlDb25maWcgPSB7XG4gICAgICBzY3JvbGxTdHJhdGVneTogdGhpcy5vdmVybGF5LnNjcm9sbFN0cmF0ZWdpZXMucmVwb3NpdGlvbigpLFxuICAgICAgaGFzQmFja2Ryb3A6IHRydWUsXG4gICAgICBiYWNrZHJvcENsYXNzOiAneC1wb3BvdmVyLWJhY2tkcm9wJ1xuICAgIH07XG5cbiAgICB0aGlzLm92ZXJsYXlSZWYgPSB0aGlzLm92ZXJsYXkuY3JlYXRlKGNvbmZpZyk7XG4gICAgdGhpcy5vdmVybGF5UmVmLmJhY2tkcm9wQ2xpY2soKS5zdWJzY3JpYmUoKCkgPT4gdGhpcy5fY2xvc2UoKSk7XG4gIH1cblxuICBvcGVuKGFuY2hvcj86IFBvcG92ZXJBbmNob3IpIHtcbiAgICB0aGlzLm92ZXJsYXlSZWYudXBkYXRlUG9zaXRpb25TdHJhdGVneSh0aGlzLmNhbGN1bGF0ZVBvc2l0aW9uU3RyYXRlZ3koYW5jaG9yID8/IHRoaXMuYW5jaG9yKCkhKSk7XG5cbiAgICBjb25zdCB1c2VyUHJvZmlsZVBvcnRhbCA9IG5ldyBUZW1wbGF0ZVBvcnRhbCh0aGlzLnBvcG92ZXJUZW1wbGF0ZSwgdGhpcy52aWV3Q29udGFpbmVyUmVmKTtcbiAgICB0aGlzLm92ZXJsYXlSZWYuYXR0YWNoKHVzZXJQcm9maWxlUG9ydGFsKTtcbiAgfVxuXG4gIF9jbG9zZSgpIHtcbiAgICB0aGlzLm92ZXJsYXlSZWYuZGV0YWNoKCk7XG4gICAgdGhpcy5hZnRlckNsb3NlZC5lbWl0KCk7XG4gIH1cblxuICBwcml2YXRlIGNhbGN1bGF0ZVBvc2l0aW9uU3RyYXRlZ3koYW5jaG9yOiBQb3BvdmVyQW5jaG9yKSB7XG4gICAgcmV0dXJuIHRoaXMub3ZlcmxheVxuICAgICAgLnBvc2l0aW9uKClcbiAgICAgIC5mbGV4aWJsZUNvbm5lY3RlZFRvKChhbmNob3IgYXMgYW55KT8uZWxlbWVudFJlZiA/PyBhbmNob3IpXG4gICAgICAud2l0aFBvc2l0aW9ucyhbdGhpcy5nZXRQb3NpdGlvblN0cmF0ZWd5KCldKVxuICAgICAgLndpdGhQdXNoKGZhbHNlKTtcbiAgfVxuXG4gIHByaXZhdGUgZ2V0UG9zaXRpb25TdHJhdGVneSgpOiBDb25uZWN0aW9uUG9zaXRpb25QYWlyIHtcbiAgICBzd2l0Y2ggKHRoaXMucG9zaXRpb24oKSkge1xuICAgICAgY2FzZSAncmlnaHQnOlxuICAgICAgICByZXR1cm4gbmV3IENvbm5lY3Rpb25Qb3NpdGlvblBhaXIoXG4gICAgICAgICAgeyBvcmlnaW5YOiAnZW5kJywgb3JpZ2luWTogJ2NlbnRlcicgfSxcbiAgICAgICAgICB7IG92ZXJsYXlYOiAnc3RhcnQnLCBvdmVybGF5WTogJ3RvcCcgfVxuICAgICAgICApO1xuICAgICAgY2FzZSAnbGVmdCc6XG4gICAgICAgIHJldHVybiBuZXcgQ29ubmVjdGlvblBvc2l0aW9uUGFpcihcbiAgICAgICAgICB7IG9yaWdpblg6ICdzdGFydCcsIG9yaWdpblk6ICdjZW50ZXInIH0sXG4gICAgICAgICAgeyBvdmVybGF5WDogJ2VuZCcsIG92ZXJsYXlZOiAndG9wJyB9XG4gICAgICAgICk7XG4gICAgICBjYXNlICd0b3AnOlxuICAgICAgICByZXR1cm4gbmV3IENvbm5lY3Rpb25Qb3NpdGlvblBhaXIoXG4gICAgICAgICAgeyBvcmlnaW5YOiAnY2VudGVyJywgb3JpZ2luWTogJ3RvcCcgfSxcbiAgICAgICAgICB7IG92ZXJsYXlYOiAnY2VudGVyJywgb3ZlcmxheVk6ICdib3R0b20nIH1cbiAgICAgICAgKTtcbiAgICAgIGNhc2UgJ2JvdHRvbSc6XG4gICAgICAgIHJldHVybiBuZXcgQ29ubmVjdGlvblBvc2l0aW9uUGFpcihcbiAgICAgICAgICB7IG9yaWdpblg6ICdjZW50ZXInLCBvcmlnaW5ZOiAnYm90dG9tJyB9LFxuICAgICAgICAgIHsgb3ZlcmxheVg6ICdjZW50ZXInLCBvdmVybGF5WTogJ3RvcCcgfVxuICAgICAgICApO1xuICAgIH1cbiAgfVxufVxuIiwiPG5nLXRlbXBsYXRlICNwb3BvdmVyVGVtcGxhdGU+XG4gIDxkaXYgW25nQ2xhc3NdPVwiX3N0eWxlcygpXCIgY2RrVHJhcEZvY3VzIGNka1RyYXBGb2N1c0F1dG9DYXB0dXJlPlxuICAgIDxkaXYgY2xhc3M9XCJ4LXBvcG92ZXItYXJyb3dcIj48L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwieC1wb3BvdmVyLWNvbnRlbnRcIj5cbiAgICAgIDxuZy1jb250ZW50IC8+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9uZy10ZW1wbGF0ZT5cbiJdfQ==