fundamental-ngx
Version:
SAP Fiori Fundamentals, implemented in Angular
145 lines • 13.3 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostListener, Output, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
import focusTrap from 'focus-trap';
export class PopoverContainer {
/**
* @param {?} elRef
* @param {?} cdRef
*/
constructor(elRef, cdRef) {
this.elRef = elRef;
this.cdRef = cdRef;
this.isSetup = new EventEmitter();
this.defaultArrow = false;
}
/**
* @return {?}
*/
ngAfterViewInit() {
if (this.content instanceof TemplateRef) {
this.loadFromTemplate(this.content);
}
else {
this.contentString = this.content;
}
this.setupFocusTrap();
this.isSetup.emit();
this.cdRef.detectChanges();
}
/**
* @return {?}
*/
ngOnDestroy() {
if (this.focusTrap) {
this.focusTrap.deactivate();
}
}
/**
* @private
* @param {?} content
* @return {?}
*/
loadFromTemplate(content) {
this.containerRef.clear();
/** @type {?} */
const context = {
$implicit: this.context
};
this.componentRef = this.containerRef.createEmbeddedView(content, context);
}
/**
* @private
* @return {?}
*/
setupFocusTrap() {
if (this.focusTrapped) {
try {
this.focusTrap = focusTrap(this.elRef.nativeElement, {
clickOutsideDeactivates: true,
escapeDeactivates: false,
initialFocus: this.elRef.nativeElement
});
this.focusTrap.activate();
}
catch (e) {
console.warn('Attempted to focus trap the popover, but no tabbable elements were found.');
}
}
}
/**
* @return {?}
*/
escapeHandler() {
if (this.containerRef && this.context.isOpen && this.closeOnEscapeKey) {
this.context.close();
}
}
}
PopoverContainer.decorators = [
{ type: Component, args: [{
selector: 'fd-popover-container',
template: `
<div class="fd-popover-default-arrow" *ngIf="defaultArrow" x-arrow></div>
<ng-container #vc>
{{contentString}}
</ng-container>
`,
host: {
class: 'fd-popover__body fd-popover__body--no-arrow',
'tabindex': '-1'
},
styles: [":host{z-index:1000;transition:none;background-color:#fff}:host:focus{outline:0}:host .fd-popover-default-arrow{position:absolute;width:0;height:0;display:flex;justify-content:center;align-items:center}:host[x-out-of-boundaries]{display:none}:host[x-placement^=bottom]{margin-top:8px}:host[x-placement^=bottom] .fd-popover-default-arrow{width:13px}:host[x-placement^=bottom] ::before{height:0;width:0;border-style:solid;border-width:0 6.5px 8px;border-bottom-color:var(--fd-color-background-2);border-left-color:transparent;border-right-color:transparent;content:\"\";position:absolute;top:-8px;z-index:4}:host[x-placement^=bottom] ::after{height:0;width:0;border-style:solid;border-width:0 6.5px 8px;border-bottom-color:var(--fd-color-neutral-4);border-left-color:transparent;border-right-color:transparent;content:\"\";position:absolute;top:-9px;z-index:3}:host[x-placement^=left]{margin-right:8px}:host[x-placement^=left] .fd-popover-default-arrow{left:100%;height:13px}:host[x-placement^=left] ::before{height:0;width:0;border-style:solid;border-width:6.5px 0 6.5px 8px;border-left-color:var(--fd-color-background-2);border-bottom-color:transparent;border-top-color:transparent;content:\"\";position:absolute;right:-8px;z-index:4}:host[x-placement^=left] ::after{height:0;width:0;border-style:solid;border-width:6.5px 0 6.5px 8px;border-left-color:var(--fd-color-neutral-4);border-bottom-color:transparent;border-top-color:transparent;content:\"\";position:absolute;right:-9px;z-index:3}:host[x-placement^=top]{margin-bottom:8px}:host[x-placement^=top] .fd-popover-default-arrow{top:100%;width:13px}:host[x-placement^=top] ::before{height:0;width:0;border-style:solid;border-width:8px 6.5px 0;border-color:var(--fd-color-background-2);border-bottom-color:transparent;border-right-color:transparent;border-left-color:transparent;content:\"\";position:absolute;bottom:-8px;z-index:4}:host[x-placement^=top] ::after{height:0;width:0;border-style:solid;border-width:8px 6.5px 0;border-color:var(--fd-color-neutral-4);border-bottom-color:transparent;border-right-color:transparent;border-left-color:transparent;content:\"\";position:absolute;bottom:-9px;z-index:3}:host[x-placement^=right]{margin-left:8px}:host[x-placement^=right] .fd-popover-default-arrow{height:13px}:host[x-placement^=right] ::before{height:0;width:0;border-style:solid;border-width:6.5px 8px 6.5px 0;border-color:var(--fd-color-background-2);border-bottom-color:transparent;border-left-color:transparent;border-top-color:transparent;content:\"\";position:absolute;left:-8px;z-index:4}:host[x-placement^=right] ::after{height:0;width:0;border-style:solid;border-width:6.5px 8px 6.5px 0;border-color:var(--fd-color-neutral-4);border-bottom-color:transparent;border-left-color:transparent;border-top-color:transparent;content:\"\";position:absolute;left:-9px;z-index:3}"]
}] }
];
/** @nocollapse */
PopoverContainer.ctorParameters = () => [
{ type: ElementRef },
{ type: ChangeDetectorRef }
];
PopoverContainer.propDecorators = {
containerRef: [{ type: ViewChild, args: ['vc', { read: ViewContainerRef },] }],
isSetup: [{ type: Output }],
escapeHandler: [{ type: HostListener, args: ['keydown.escape',] }]
};
if (false) {
/** @type {?} */
PopoverContainer.prototype.containerRef;
/** @type {?} */
PopoverContainer.prototype.isSetup;
/** @type {?} */
PopoverContainer.prototype.content;
/** @type {?} */
PopoverContainer.prototype.contentString;
/** @type {?} */
PopoverContainer.prototype.context;
/** @type {?} */
PopoverContainer.prototype.focusTrapped;
/** @type {?} */
PopoverContainer.prototype.defaultArrow;
/** @type {?} */
PopoverContainer.prototype.closeOnEscapeKey;
/**
* @type {?}
* @private
*/
PopoverContainer.prototype.componentRef;
/**
* @type {?}
* @private
*/
PopoverContainer.prototype.focusTrap;
/**
* @type {?}
* @private
*/
PopoverContainer.prototype.elRef;
/**
* @type {?}
* @private
*/
PopoverContainer.prototype.cdRef;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicG9wb3Zlci1jb250YWluZXIuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9mdW5kYW1lbnRhbC1uZ3gvIiwic291cmNlcyI6WyJsaWIvcG9wb3Zlci9wb3BvdmVyLWRpcmVjdGl2ZS9wb3BvdmVyLWNvbnRhaW5lci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUVILGlCQUFpQixFQUNqQixTQUFTLEVBQUUsVUFBVSxFQUNyQixZQUFZLEVBQ1osWUFBWSxFQUNaLE1BQU0sRUFDTixXQUFXLEVBQ1gsU0FBUyxFQUNULGdCQUFnQixFQUNuQixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLFNBQVMsTUFBTSxZQUFZLENBQUM7QUFnQm5DLE1BQU0sT0FBTyxnQkFBZ0I7Ozs7O0lBdUJ6QixZQUFvQixLQUFpQixFQUNqQixLQUF3QjtRQUR4QixVQUFLLEdBQUwsS0FBSyxDQUFZO1FBQ2pCLFVBQUssR0FBTCxLQUFLLENBQW1CO1FBbEI1QyxZQUFPLEdBQUcsSUFBSSxZQUFZLEVBQWEsQ0FBQztRQVV4QyxpQkFBWSxHQUFZLEtBQUssQ0FBQztJQVM5QixDQUFDOzs7O0lBRUQsZUFBZTtRQUNYLElBQUksSUFBSSxDQUFDLE9BQU8sWUFBWSxXQUFXLEVBQUU7WUFDckMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztTQUN2QzthQUFNO1lBQ0gsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDO1NBQ3JDO1FBQ0QsSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDO1FBQ3RCLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDcEIsSUFBSSxDQUFDLEtBQUssQ0FBQyxhQUFhLEVBQUUsQ0FBQztJQUMvQixDQUFDOzs7O0lBRUQsV0FBVztRQUNQLElBQUksSUFBSSxDQUFDLFNBQVMsRUFBRTtZQUNoQixJQUFJLENBQUMsU0FBUyxDQUFDLFVBQVUsRUFBRSxDQUFDO1NBQy9CO0lBQ0wsQ0FBQzs7Ozs7O0lBRU8sZ0JBQWdCLENBQUMsT0FBeUI7UUFDOUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxLQUFLLEVBQUUsQ0FBQzs7Y0FDcEIsT0FBTyxHQUFHO1lBQ1osU0FBUyxFQUFFLElBQUksQ0FBQyxPQUFPO1NBQzFCO1FBQ0QsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDLGtCQUFrQixDQUFDLE9BQU8sRUFBRSxPQUFPLENBQUMsQ0FBQztJQUMvRSxDQUFDOzs7OztJQUVPLGNBQWM7UUFDbEIsSUFBSSxJQUFJLENBQUMsWUFBWSxFQUFFO1lBQ25CLElBQUk7Z0JBQ0EsSUFBSSxDQUFDLFNBQVMsR0FBRyxTQUFTLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxhQUFhLEVBQUU7b0JBQ2pELHVCQUF1QixFQUFFLElBQUk7b0JBQzdCLGlCQUFpQixFQUFFLEtBQUs7b0JBQ3hCLFlBQVksRUFBRSxJQUFJLENBQUMsS0FBSyxDQUFDLGFBQWE7aUJBQ3pDLENBQUMsQ0FBQztnQkFDSCxJQUFJLENBQUMsU0FBUyxDQUFDLFFBQVEsRUFBRSxDQUFDO2FBQzdCO1lBQUMsT0FBTyxDQUFDLEVBQUU7Z0JBQ1IsT0FBTyxDQUFDLElBQUksQ0FBQywyRUFBMkUsQ0FBQyxDQUFDO2FBQzdGO1NBQ0o7SUFDTCxDQUFDOzs7O0lBR0QsYUFBYTtRQUNULElBQUksSUFBSSxDQUFDLFlBQVksSUFBSSxJQUFJLENBQUMsT0FBTyxDQUFDLE1BQU0sSUFBSSxJQUFJLENBQUMsZ0JBQWdCLEVBQUU7WUFDbkUsSUFBSSxDQUFDLE9BQU8sQ0FBQyxLQUFLLEVBQUUsQ0FBQztTQUN4QjtJQUNMLENBQUM7OztZQXRGSixTQUFTLFNBQUM7Z0JBQ1AsUUFBUSxFQUFFLHNCQUFzQjtnQkFDaEMsUUFBUSxFQUFFOzs7OztLQUtUO2dCQUVELElBQUksRUFBRTtvQkFDRixLQUFLLEVBQUUsNkNBQTZDO29CQUNwRCxVQUFVLEVBQUUsSUFBSTtpQkFDbkI7O2FBQ0o7Ozs7WUF2QmMsVUFBVTtZQURyQixpQkFBaUI7OzsyQkEyQmhCLFNBQVMsU0FBQyxJQUFJLEVBQUUsRUFBRSxJQUFJLEVBQUUsZ0JBQWdCLEVBQUU7c0JBRzFDLE1BQU07NEJBOEROLFlBQVksU0FBQyxnQkFBZ0I7Ozs7SUFqRTlCLHdDQUMrQjs7SUFFL0IsbUNBQ3dDOztJQUV4QyxtQ0FBbUM7O0lBRW5DLHlDQUFzQjs7SUFFdEIsbUNBQWE7O0lBRWIsd0NBQXNCOztJQUV0Qix3Q0FBOEI7O0lBRTlCLDRDQUEwQjs7Ozs7SUFFMUIsd0NBQTJDOzs7OztJQUMzQyxxQ0FBdUI7Ozs7O0lBRVgsaUNBQXlCOzs7OztJQUN6QixpQ0FBZ0MiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgIEFmdGVyVmlld0luaXQsXG4gICAgQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gICAgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBFbWJlZGRlZFZpZXdSZWYsXG4gICAgRXZlbnRFbWl0dGVyLFxuICAgIEhvc3RMaXN0ZW5lciwgT25EZXN0cm95LFxuICAgIE91dHB1dCxcbiAgICBUZW1wbGF0ZVJlZixcbiAgICBWaWV3Q2hpbGQsXG4gICAgVmlld0NvbnRhaW5lclJlZlxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCBmb2N1c1RyYXAgZnJvbSAnZm9jdXMtdHJhcCc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnZmQtcG9wb3Zlci1jb250YWluZXInLFxuICAgIHRlbXBsYXRlOiBgXG4gICAgICAgIDxkaXYgY2xhc3M9XCJmZC1wb3BvdmVyLWRlZmF1bHQtYXJyb3dcIiAqbmdJZj1cImRlZmF1bHRBcnJvd1wiIHgtYXJyb3c+PC9kaXY+XG4gICAgICAgIDxuZy1jb250YWluZXIgI3ZjPlxuICAgICAgICAgICAge3tjb250ZW50U3RyaW5nfX1cbiAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgYCxcbiAgICBzdHlsZVVybHM6IFsnLi9wb3BvdmVyLWNvbnRhaW5lci5zY3NzJ10sXG4gICAgaG9zdDoge1xuICAgICAgICBjbGFzczogJ2ZkLXBvcG92ZXJfX2JvZHkgZmQtcG9wb3Zlcl9fYm9keS0tbm8tYXJyb3cnLFxuICAgICAgICAndGFiaW5kZXgnOiAnLTEnXG4gICAgfVxufSlcbmV4cG9ydCBjbGFzcyBQb3BvdmVyQ29udGFpbmVyIGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCwgT25EZXN0cm95IHtcblxuICAgIEBWaWV3Q2hpbGQoJ3ZjJywgeyByZWFkOiBWaWV3Q29udGFpbmVyUmVmIH0pXG4gICAgY29udGFpbmVyUmVmOiBWaWV3Q29udGFpbmVyUmVmO1xuXG4gICAgQE91dHB1dCgpXG4gICAgaXNTZXR1cCA9IG5ldyBFdmVudEVtaXR0ZXI8dW5kZWZpbmVkPigpO1xuXG4gICAgY29udGVudDogVGVtcGxhdGVSZWY8YW55PiB8IHN0cmluZztcblxuICAgIGNvbnRlbnRTdHJpbmc6IHN0cmluZztcblxuICAgIGNvbnRleHQ6IGFueTtcblxuICAgIGZvY3VzVHJhcHBlZDogYm9vbGVhbjtcblxuICAgIGRlZmF1bHRBcnJvdzogYm9vbGVhbiA9IGZhbHNlO1xuXG4gICAgY2xvc2VPbkVzY2FwZUtleTogYm9vbGVhbjtcblxuICAgIHByaXZhdGUgY29tcG9uZW50UmVmOiBFbWJlZGRlZFZpZXdSZWY8YW55PjtcbiAgICBwcml2YXRlIGZvY3VzVHJhcDogYW55O1xuXG4gICAgY29uc3RydWN0b3IocHJpdmF0ZSBlbFJlZjogRWxlbWVudFJlZixcbiAgICAgICAgICAgICAgICBwcml2YXRlIGNkUmVmOiBDaGFuZ2VEZXRlY3RvclJlZikge1xuICAgIH1cblxuICAgIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcbiAgICAgICAgaWYgKHRoaXMuY29udGVudCBpbnN0YW5jZW9mIFRlbXBsYXRlUmVmKSB7XG4gICAgICAgICAgICB0aGlzLmxvYWRGcm9tVGVtcGxhdGUodGhpcy5jb250ZW50KTtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgIHRoaXMuY29udGVudFN0cmluZyA9IHRoaXMuY29udGVudDtcbiAgICAgICAgfVxuICAgICAgICB0aGlzLnNldHVwRm9jdXNUcmFwKCk7XG4gICAgICAgIHRoaXMuaXNTZXR1cC5lbWl0KCk7XG4gICAgICAgIHRoaXMuY2RSZWYuZGV0ZWN0Q2hhbmdlcygpO1xuICAgIH1cblxuICAgIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgICAgICBpZiAodGhpcy5mb2N1c1RyYXApIHtcbiAgICAgICAgICAgIHRoaXMuZm9jdXNUcmFwLmRlYWN0aXZhdGUoKTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIHByaXZhdGUgbG9hZEZyb21UZW1wbGF0ZShjb250ZW50OiBUZW1wbGF0ZVJlZjxhbnk+KTogdm9pZCB7XG4gICAgICAgIHRoaXMuY29udGFpbmVyUmVmLmNsZWFyKCk7XG4gICAgICAgIGNvbnN0IGNvbnRleHQgPSB7XG4gICAgICAgICAgICAkaW1wbGljaXQ6IHRoaXMuY29udGV4dFxuICAgICAgICB9O1xuICAgICAgICB0aGlzLmNvbXBvbmVudFJlZiA9IHRoaXMuY29udGFpbmVyUmVmLmNyZWF0ZUVtYmVkZGVkVmlldyhjb250ZW50LCBjb250ZXh0KTtcbiAgICB9XG5cbiAgICBwcml2YXRlIHNldHVwRm9jdXNUcmFwKCk6IHZvaWQge1xuICAgICAgICBpZiAodGhpcy5mb2N1c1RyYXBwZWQpIHtcbiAgICAgICAgICAgIHRyeSB7XG4gICAgICAgICAgICAgICAgdGhpcy5mb2N1c1RyYXAgPSBmb2N1c1RyYXAodGhpcy5lbFJlZi5uYXRpdmVFbGVtZW50LCB7XG4gICAgICAgICAgICAgICAgICAgIGNsaWNrT3V0c2lkZURlYWN0aXZhdGVzOiB0cnVlLFxuICAgICAgICAgICAgICAgICAgICBlc2NhcGVEZWFjdGl2YXRlczogZmFsc2UsXG4gICAgICAgICAgICAgICAgICAgIGluaXRpYWxGb2N1czogdGhpcy5lbFJlZi5uYXRpdmVFbGVtZW50XG4gICAgICAgICAgICAgICAgfSk7XG4gICAgICAgICAgICAgICAgdGhpcy5mb2N1c1RyYXAuYWN0aXZhdGUoKTtcbiAgICAgICAgICAgIH0gY2F0Y2ggKGUpIHtcbiAgICAgICAgICAgICAgICBjb25zb2xlLndhcm4oJ0F0dGVtcHRlZCB0byBmb2N1cyB0cmFwIHRoZSBwb3BvdmVyLCBidXQgbm8gdGFiYmFibGUgZWxlbWVudHMgd2VyZSBmb3VuZC4nKTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgIH1cblxuICAgIEBIb3N0TGlzdGVuZXIoJ2tleWRvd24uZXNjYXBlJylcbiAgICBlc2NhcGVIYW5kbGVyKCk6IHZvaWQge1xuICAgICAgICBpZiAodGhpcy5jb250YWluZXJSZWYgJiYgdGhpcy5jb250ZXh0LmlzT3BlbiAmJiB0aGlzLmNsb3NlT25Fc2NhcGVLZXkpIHtcbiAgICAgICAgICAgIHRoaXMuY29udGV4dC5jbG9zZSgpO1xuICAgICAgICB9XG4gICAgfVxufVxuIl19