xui
Version:
xUI Components for Angular
81 lines • 10.4 kB
JavaScript
import { ChangeDetectionStrategy, Component, ContentChildren, EventEmitter, HostListener, Input, Output, QueryList, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
import { ConnectionPositionPair, Overlay } from '@angular/cdk/overlay';
import { TemplatePortal } from '@angular/cdk/portal';
import { ButtonComponent } from '../button';
import { first } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "@angular/cdk/overlay";
import * as i2 from "@angular/cdk/a11y";
export class ContextMenuComponent {
constructor(overlay, viewContainerRef) {
this.overlay = overlay;
this.viewContainerRef = viewContainerRef;
this.afterClosed = new EventEmitter();
const config = {
scrollStrategy: this.overlay.scrollStrategies.reposition(),
hasBackdrop: true,
backdropClass: 'x-context-menu-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.templateRef, this.viewContainerRef);
this.overlayRef.attach(userProfilePortal);
for (const btn of this.buttons) {
btn.click.pipe(first()).subscribe(() => this.close());
}
}
calculatePositionStrategy(anchor) {
return this.overlay
.position()
.flexibleConnectedTo(anchor?.elementRef ?? anchor)
.withPositions([
new ConnectionPositionPair({ originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'top' })
])
.withPush(false);
}
close() {
this.overlayRef.detach();
this.afterClosed.emit();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ContextMenuComponent, 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: ContextMenuComponent, selector: "xui-context-menu", inputs: { anchor: "anchor" }, outputs: { afterClosed: "afterClosed" }, host: { listeners: { "document:keydown.esc": "close()" } }, queries: [{ propertyName: "buttons", predicate: ButtonComponent }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, static: true }], ngImport: i0, template: `
<ng-template #templateRef>
<div class="x-context-menu" cdkTrapFocus (click)="close()">
<ng-content></ng-content>
</div>
</ng-template>
`, isInline: true, dependencies: [{ kind: "directive", type: i2.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: ContextMenuComponent, decorators: [{
type: Component,
args: [{
selector: 'xui-context-menu',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<ng-template #templateRef>
<div class="x-context-menu" cdkTrapFocus (click)="close()">
<ng-content></ng-content>
</div>
</ng-template>
`
}]
}], ctorParameters: function () { return [{ type: i1.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { anchor: [{
type: Input
}], afterClosed: [{
type: Output
}], templateRef: [{
type: ViewChild,
args: ['templateRef', { static: true }]
}], buttons: [{
type: ContentChildren,
args: [ButtonComponent]
}], close: [{
type: HostListener,
args: ['document:keydown.esc']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29udGV4dC1tZW51LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2xpYnMveHVpL3NyYy9jb250ZXh0LW1lbnUvY29udGV4dC1tZW51LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxlQUFlLEVBQ2YsWUFBWSxFQUNaLFlBQVksRUFDWixLQUFLLEVBQ0wsTUFBTSxFQUNOLFNBQVMsRUFDVCxXQUFXLEVBQ1gsU0FBUyxFQUNULGdCQUFnQixFQUNqQixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsc0JBQXNCLEVBQUUsT0FBTyxFQUE2QixNQUFNLHNCQUFzQixDQUFDO0FBQ2xHLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUNyRCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sV0FBVyxDQUFDO0FBQzVDLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxNQUFNLENBQUM7Ozs7QUFjN0IsTUFBTSxPQUFPLG9CQUFvQjtJQVMvQixZQUFvQixPQUFnQixFQUFVLGdCQUFrQztRQUE1RCxZQUFPLEdBQVAsT0FBTyxDQUFTO1FBQVUscUJBQWdCLEdBQWhCLGdCQUFnQixDQUFrQjtRQUx0RSxnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFNekMsTUFBTSxNQUFNLEdBQWtCO1lBQzVCLGNBQWMsRUFBRSxJQUFJLENBQUMsT0FBTyxDQUFDLGdCQUFnQixDQUFDLFVBQVUsRUFBRTtZQUMxRCxXQUFXLEVBQUUsSUFBSTtZQUNqQixhQUFhLEVBQUUseUJBQXlCO1NBQ3pDLENBQUM7UUFFRixJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsTUFBTSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQzlDLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxFQUFFLENBQUMsU0FBUyxDQUFDLEdBQUcsRUFBRTtZQUM3QyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7UUFDZixDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRCxJQUFJLENBQUMsTUFBMEI7UUFDN0IsSUFBSSxDQUFDLFVBQVUsQ0FBQyxzQkFBc0IsQ0FBQyxJQUFJLENBQUMseUJBQXlCLENBQUMsTUFBTSxJQUFJLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDO1FBRTlGLE1BQU0saUJBQWlCLEdBQUcsSUFBSSxjQUFjLENBQUMsSUFBSSxDQUFDLFdBQVcsRUFBRSxJQUFJLENBQUMsZ0JBQWdCLENBQUMsQ0FBQztRQUN0RixJQUFJLENBQUMsVUFBVSxDQUFDLE1BQU0sQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDO1FBRTFDLEtBQUssTUFBTSxHQUFHLElBQUksSUFBSSxDQUFDLE9BQU8sRUFBRTtZQUM5QixHQUFHLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQztTQUN2RDtJQUNILENBQUM7SUFFTyx5QkFBeUIsQ0FBQyxNQUF5QjtRQUN6RCxPQUFPLElBQUksQ0FBQyxPQUFPO2FBQ2hCLFFBQVEsRUFBRTthQUNWLG1CQUFtQixDQUFFLE1BQWMsRUFBRSxVQUFVLElBQUksTUFBTSxDQUFDO2FBQzFELGFBQWEsQ0FBQztZQUNiLElBQUksc0JBQXNCLENBQUMsRUFBRSxPQUFPLEVBQUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxRQUFRLEVBQUUsRUFBRSxFQUFFLFFBQVEsRUFBRSxPQUFPLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRSxDQUFDO1NBQzVHLENBQUM7YUFDRCxRQUFRLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDckIsQ0FBQztJQUdELEtBQUs7UUFDSCxJQUFJLENBQUMsVUFBVSxDQUFDLE1BQU0sRUFBRSxDQUFDO1FBQ3pCLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDMUIsQ0FBQzs4R0EvQ1Usb0JBQW9CO2tHQUFwQixvQkFBb0IsbU5BT2QsZUFBZSx1SkFmdEI7Ozs7OztHQU1UOzsyRkFFVSxvQkFBb0I7a0JBWGhDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGtCQUFrQjtvQkFDNUIsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07b0JBQy9DLFFBQVEsRUFBRTs7Ozs7O0dBTVQ7aUJBQ0Y7NkhBSVUsTUFBTTtzQkFBZCxLQUFLO2dCQUNJLFdBQVc7c0JBQXBCLE1BQU07Z0JBRXFDLFdBQVc7c0JBQXRELFNBQVM7dUJBQUMsYUFBYSxFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRTtnQkFDUixPQUFPO3NCQUF4QyxlQUFlO3VCQUFDLGVBQWU7Z0JBcUNoQyxLQUFLO3NCQURKLFlBQVk7dUJBQUMsc0JBQXNCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgQ29udGVudENoaWxkcmVuLFxuICBFdmVudEVtaXR0ZXIsXG4gIEhvc3RMaXN0ZW5lcixcbiAgSW5wdXQsXG4gIE91dHB1dCxcbiAgUXVlcnlMaXN0LFxuICBUZW1wbGF0ZVJlZixcbiAgVmlld0NoaWxkLFxuICBWaWV3Q29udGFpbmVyUmVmXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29ubmVjdGlvblBvc2l0aW9uUGFpciwgT3ZlcmxheSwgT3ZlcmxheUNvbmZpZywgT3ZlcmxheVJlZiB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9vdmVybGF5JztcbmltcG9ydCB7IFRlbXBsYXRlUG9ydGFsIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL3BvcnRhbCc7XG5pbXBvcnQgeyBCdXR0b25Db21wb25lbnQgfSBmcm9tICcuLi9idXR0b24nO1xuaW1wb3J0IHsgZmlyc3QgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IENvbnRleHRNZW51QW5jaG9yIH0gZnJvbSAnLi9jb250ZXh0LW1lbnUudHlwZXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd4dWktY29udGV4dC1tZW51JyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHRlbXBsYXRlOiBgXG4gICAgPG5nLXRlbXBsYXRlICN0ZW1wbGF0ZVJlZj5cbiAgICAgIDxkaXYgY2xhc3M9XCJ4LWNvbnRleHQtbWVudVwiIGNka1RyYXBGb2N1cyAoY2xpY2spPVwiY2xvc2UoKVwiPlxuICAgICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgICA8L2Rpdj5cbiAgICA8L25nLXRlbXBsYXRlPlxuICBgXG59KVxuZXhwb3J0IGNsYXNzIENvbnRleHRNZW51Q29tcG9uZW50IHtcbiAgcHJpdmF0ZSBvdmVybGF5UmVmITogT3ZlcmxheVJlZjtcblxuICBASW5wdXQoKSBhbmNob3IhOiBDb250ZXh0TWVudUFuY2hvcjtcbiAgQE91dHB1dCgpIGFmdGVyQ2xvc2VkID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIEBWaWV3Q2hpbGQoJ3RlbXBsYXRlUmVmJywgeyBzdGF0aWM6IHRydWUgfSkgdGVtcGxhdGVSZWYhOiBUZW1wbGF0ZVJlZjx1bmtub3duPjtcbiAgQENvbnRlbnRDaGlsZHJlbihCdXR0b25Db21wb25lbnQpIGJ1dHRvbnMhOiBRdWVyeUxpc3Q8QnV0dG9uQ29tcG9uZW50PjtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIG92ZXJsYXk6IE92ZXJsYXksIHByaXZhdGUgdmlld0NvbnRhaW5lclJlZjogVmlld0NvbnRhaW5lclJlZikge1xuICAgIGNvbnN0IGNvbmZpZzogT3ZlcmxheUNvbmZpZyA9IHtcbiAgICAgIHNjcm9sbFN0cmF0ZWd5OiB0aGlzLm92ZXJsYXkuc2Nyb2xsU3RyYXRlZ2llcy5yZXBvc2l0aW9uKCksXG4gICAgICBoYXNCYWNrZHJvcDogdHJ1ZSxcbiAgICAgIGJhY2tkcm9wQ2xhc3M6ICd4LWNvbnRleHQtbWVudS1iYWNrZHJvcCdcbiAgICB9O1xuXG4gICAgdGhpcy5vdmVybGF5UmVmID0gdGhpcy5vdmVybGF5LmNyZWF0ZShjb25maWcpO1xuICAgIHRoaXMub3ZlcmxheVJlZi5iYWNrZHJvcENsaWNrKCkuc3Vic2NyaWJlKCgpID0+IHtcbiAgICAgIHRoaXMuY2xvc2UoKTtcbiAgICB9KTtcbiAgfVxuXG4gIG9wZW4oYW5jaG9yPzogQ29udGV4dE1lbnVBbmNob3IpIHtcbiAgICB0aGlzLm92ZXJsYXlSZWYudXBkYXRlUG9zaXRpb25TdHJhdGVneSh0aGlzLmNhbGN1bGF0ZVBvc2l0aW9uU3RyYXRlZ3koYW5jaG9yID8/IHRoaXMuYW5jaG9yKSk7XG5cbiAgICBjb25zdCB1c2VyUHJvZmlsZVBvcnRhbCA9IG5ldyBUZW1wbGF0ZVBvcnRhbCh0aGlzLnRlbXBsYXRlUmVmLCB0aGlzLnZpZXdDb250YWluZXJSZWYpO1xuICAgIHRoaXMub3ZlcmxheVJlZi5hdHRhY2godXNlclByb2ZpbGVQb3J0YWwpO1xuXG4gICAgZm9yIChjb25zdCBidG4gb2YgdGhpcy5idXR0b25zKSB7XG4gICAgICBidG4uY2xpY2sucGlwZShmaXJzdCgpKS5zdWJzY3JpYmUoKCkgPT4gdGhpcy5jbG9zZSgpKTtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIGNhbGN1bGF0ZVBvc2l0aW9uU3RyYXRlZ3koYW5jaG9yOiBDb250ZXh0TWVudUFuY2hvcikge1xuICAgIHJldHVybiB0aGlzLm92ZXJsYXlcbiAgICAgIC5wb3NpdGlvbigpXG4gICAgICAuZmxleGlibGVDb25uZWN0ZWRUbygoYW5jaG9yIGFzIGFueSk/LmVsZW1lbnRSZWYgPz8gYW5jaG9yKVxuICAgICAgLndpdGhQb3NpdGlvbnMoW1xuICAgICAgICBuZXcgQ29ubmVjdGlvblBvc2l0aW9uUGFpcih7IG9yaWdpblg6ICdzdGFydCcsIG9yaWdpblk6ICdib3R0b20nIH0sIHsgb3ZlcmxheVg6ICdzdGFydCcsIG92ZXJsYXlZOiAndG9wJyB9KVxuICAgICAgXSlcbiAgICAgIC53aXRoUHVzaChmYWxzZSk7XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdkb2N1bWVudDprZXlkb3duLmVzYycpXG4gIGNsb3NlKCkge1xuICAgIHRoaXMub3ZlcmxheVJlZi5kZXRhY2goKTtcbiAgICB0aGlzLmFmdGVyQ2xvc2VkLmVtaXQoKTtcbiAgfVxufVxuIl19