fundamental-ngx
Version:
SAP Fiori Fundamentals, implemented in Angular
155 lines • 12.7 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { HashService } from '../utils/hash.service';
import Popper from 'popper.js';
var PopoverComponent = /** @class */ (function () {
function PopoverComponent(hasher) {
this.hasher = hasher;
this.arrow = false;
this.disabled = false;
this.isDropdown = false;
this.triggers = ['click'];
this.btnType = '';
this.isOpen = false;
this.compact = false;
this.standard = false;
this.toolbar = false;
this.options = Popper.Defaults;
this.focusTrapped = true;
this.closeOnOutsideClick = true;
this.closeOnEscapeKey = true;
this.isOpenChange = new EventEmitter();
this.isSetup = false;
}
/**
* @return {?}
*/
PopoverComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.id = this.hasher.hash();
this.isSetup = true;
if (this.options.modifiers && this.options.modifiers.preventOverflow) {
this.options.modifiers.preventOverflow.escapeWithReference = true;
}
};
/**
* @return {?}
*/
PopoverComponent.prototype.toggle = /**
* @return {?}
*/
function () {
if (this.isOpen) {
this.close();
}
else {
this.open();
}
};
/**
* @return {?}
*/
PopoverComponent.prototype.close = /**
* @return {?}
*/
function () {
if (this.isOpen) {
this.isOpen = false;
this.isOpenChange.emit(this.isOpen);
}
};
/**
* @return {?}
*/
PopoverComponent.prototype.open = /**
* @return {?}
*/
function () {
if (!this.isOpen) {
this.isOpen = true;
this.isOpenChange.emit(this.isOpen);
}
};
PopoverComponent.decorators = [
{ type: Component, args: [{
selector: 'fd-popover',
template: "<div *ngIf=\"isDropdown\" class=\"fd-dropdown\"\n [ngClass]=\"{ 'fd-dropdown--compact': compact, 'fd-dropdown--toolbar': toolbar }\">\n <div class=\"fd-popover\" #popoverDropdownContainer>\n <div class=\"fd-popover__control\">\n <button\n fd-button\n class=\"fd-dropdown__control fd-button\"\n [ngClass]=\"\n (btnType ? ' fd-button--' + btnType : '') +\n (glyph ? ' sap-icon--' + glyph : '') +\n (compact ? ' fd-button--compact' : '') +\n (this.disabled ? ' is-disabled' : '') +\n (toolbar ? ' fd-button--standard': '')\n \"\n [attr.aria-expanded]=\"this.disabled ? false : isOpen\"\n [attr.aria-disabled]=\"this.disabled\"\n aria-haspopup=\"true\"\n [fdPopover]=\"popoverDropdownBody\"\n [(isOpen)]=\"isOpen\"\n [defaultArrow]=\"arrow\"\n [disabled]=\"disabled\"\n [triggers]=\"triggers\"\n [focusTrapped]=\"focusTrapped\"\n (isOpenChange)=\"isOpenChange.emit($event)\"\n [options]=\"options\"\n [appendTo]=\"(appendTo ? appendTo : popoverDropdownContainer)\">\n <ng-content></ng-content>\n </button>\n </div>\n <ng-template #popoverDropdownBody>\n <ng-container *ngTemplateOutlet=\"popoverBodyTpl\"></ng-container>\n </ng-template>\n </div>\n</div>\n<div *ngIf=\"!isDropdown\" class=\"fd-popover\" #popoverContainer>\n <div class=\"fd-popover__control\"\n [attr.aria-expanded]=\"this.disabled ? false : isOpen\"\n [attr.aria-disabled]=\"this.disabled\"\n aria-haspopup=\"true\"\n [fdPopover]=\"popoverBody\"\n [(isOpen)]=\"isOpen\"\n (isOpenChange)=\"isOpenChange.emit($event)\"\n [defaultArrow]=\"arrow\"\n [disabled]=\"disabled\"\n [triggers]=\"triggers\"\n [focusTrapped]=\"focusTrapped\"\n [options]=\"options\"\n [appendTo]=\"(appendTo ? appendTo : popoverContainer)\">\n <ng-content select=\"fd-popover-control\"></ng-content>\n </div>\n <ng-template #popoverBody>\n <ng-container *ngTemplateOutlet=\"popoverBodyTpl\"></ng-container>\n </ng-template>\n</div>\n\n<ng-template #popoverBodyTpl>\n <div [attr.aria-hidden]=\"disabled ? true : !isOpen\">\n <ng-content select=\"fd-popover-body\"></ng-content>\n </div>\n</ng-template>\n"
}] }
];
/** @nocollapse */
PopoverComponent.ctorParameters = function () { return [
{ type: HashService }
]; };
PopoverComponent.propDecorators = {
arrow: [{ type: Input }],
disabled: [{ type: Input }],
isDropdown: [{ type: Input }],
appendTo: [{ type: Input }],
triggers: [{ type: Input }],
glyph: [{ type: Input }],
btnType: [{ type: Input }],
isOpen: [{ type: Input }],
compact: [{ type: Input }],
standard: [{ type: Input }],
toolbar: [{ type: Input }],
options: [{ type: Input }],
focusTrapped: [{ type: Input }],
closeOnOutsideClick: [{ type: Input }],
closeOnEscapeKey: [{ type: Input }],
isOpenChange: [{ type: Output }]
};
return PopoverComponent;
}());
export { PopoverComponent };
if (false) {
/** @type {?} */
PopoverComponent.prototype.arrow;
/** @type {?} */
PopoverComponent.prototype.disabled;
/** @type {?} */
PopoverComponent.prototype.isDropdown;
/** @type {?} */
PopoverComponent.prototype.appendTo;
/** @type {?} */
PopoverComponent.prototype.triggers;
/** @type {?} */
PopoverComponent.prototype.glyph;
/** @type {?} */
PopoverComponent.prototype.btnType;
/** @type {?} */
PopoverComponent.prototype.isOpen;
/** @type {?} */
PopoverComponent.prototype.compact;
/** @type {?} */
PopoverComponent.prototype.standard;
/** @type {?} */
PopoverComponent.prototype.toolbar;
/** @type {?} */
PopoverComponent.prototype.options;
/** @type {?} */
PopoverComponent.prototype.focusTrapped;
/** @type {?} */
PopoverComponent.prototype.closeOnOutsideClick;
/** @type {?} */
PopoverComponent.prototype.closeOnEscapeKey;
/** @type {?} */
PopoverComponent.prototype.isOpenChange;
/** @type {?} */
PopoverComponent.prototype.id;
/**
* @type {?}
* @private
*/
PopoverComponent.prototype.isSetup;
/**
* @type {?}
* @private
*/
PopoverComponent.prototype.hasher;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicG9wb3Zlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9mdW5kYW1lbnRhbC1uZ3gvIiwic291cmNlcyI6WyJsaWIvcG9wb3Zlci9wb3BvdmVyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUNILFNBQVMsRUFDVCxLQUFLLEVBRUwsTUFBTSxFQUNOLFlBQVksRUFHZixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFDcEQsT0FBTyxNQUF5QixNQUFNLFdBQVcsQ0FBQztBQUdsRDtJQXlESSwwQkFBb0IsTUFBbUI7UUFBbkIsV0FBTSxHQUFOLE1BQU0sQ0FBYTtRQW5EdkMsVUFBSyxHQUFZLEtBQUssQ0FBQztRQUd2QixhQUFRLEdBQVksS0FBSyxDQUFDO1FBRzFCLGVBQVUsR0FBWSxLQUFLLENBQUM7UUFNNUIsYUFBUSxHQUFhLENBQUMsT0FBTyxDQUFDLENBQUM7UUFNL0IsWUFBTyxHQUFXLEVBQUUsQ0FBQztRQUdyQixXQUFNLEdBQVksS0FBSyxDQUFDO1FBR3hCLFlBQU8sR0FBWSxLQUFLLENBQUM7UUFHekIsYUFBUSxHQUFZLEtBQUssQ0FBQztRQUcxQixZQUFPLEdBQVksS0FBSyxDQUFDO1FBR3pCLFlBQU8sR0FBa0IsTUFBTSxDQUFDLFFBQVEsQ0FBQztRQUd6QyxpQkFBWSxHQUFZLElBQUksQ0FBQztRQUc3Qix3QkFBbUIsR0FBWSxJQUFJLENBQUM7UUFHcEMscUJBQWdCLEdBQVksSUFBSSxDQUFDO1FBR2pDLGlCQUFZLEdBQTBCLElBQUksWUFBWSxFQUFXLENBQUM7UUFJMUQsWUFBTyxHQUFZLEtBQUssQ0FBQztJQUVTLENBQUM7Ozs7SUFFM0MsbUNBQVE7OztJQUFSO1FBQ0ksSUFBSSxDQUFDLEVBQUUsR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQzdCLElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDO1FBRXBCLElBQUksSUFBSSxDQUFDLE9BQU8sQ0FBQyxTQUFTLElBQUksSUFBSSxDQUFDLE9BQU8sQ0FBQyxTQUFTLENBQUMsZUFBZSxFQUFFO1lBQ2xFLElBQUksQ0FBQyxPQUFPLENBQUMsU0FBUyxDQUFDLGVBQWUsQ0FBQyxtQkFBbUIsR0FBRyxJQUFJLENBQUM7U0FDckU7SUFDTCxDQUFDOzs7O0lBRU0saUNBQU07OztJQUFiO1FBQ0ksSUFBSSxJQUFJLENBQUMsTUFBTSxFQUFFO1lBQ2IsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO1NBQ2hCO2FBQU07WUFDSCxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7U0FDZjtJQUNMLENBQUM7Ozs7SUFFTSxnQ0FBSzs7O0lBQVo7UUFDSSxJQUFJLElBQUksQ0FBQyxNQUFNLEVBQUU7WUFDYixJQUFJLENBQUMsTUFBTSxHQUFHLEtBQUssQ0FBQztZQUNwQixJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7U0FDdkM7SUFDTCxDQUFDOzs7O0lBRU0sK0JBQUk7OztJQUFYO1FBQ0ksSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUU7WUFDZCxJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQztZQUNuQixJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7U0FDdkM7SUFDTCxDQUFDOztnQkF4RkosU0FBUyxTQUFDO29CQUNQLFFBQVEsRUFBRSxZQUFZO29CQUN0Qiw4aUZBQXVDO2lCQUMxQzs7OztnQkFQUSxXQUFXOzs7d0JBU2YsS0FBSzsyQkFHTCxLQUFLOzZCQUdMLEtBQUs7MkJBR0wsS0FBSzsyQkFHTCxLQUFLO3dCQUdMLEtBQUs7MEJBR0wsS0FBSzt5QkFHTCxLQUFLOzBCQUdMLEtBQUs7MkJBR0wsS0FBSzswQkFHTCxLQUFLOzBCQUdMLEtBQUs7K0JBR0wsS0FBSztzQ0FHTCxLQUFLO21DQUdMLEtBQUs7K0JBR0wsTUFBTTs7SUF3Q1gsdUJBQUM7Q0FBQSxBQTFGRCxJQTBGQztTQXRGWSxnQkFBZ0I7OztJQUN6QixpQ0FDdUI7O0lBRXZCLG9DQUMwQjs7SUFFMUIsc0NBQzRCOztJQUU1QixvQ0FDK0I7O0lBRS9CLG9DQUMrQjs7SUFFL0IsaUNBQ2M7O0lBRWQsbUNBQ3FCOztJQUVyQixrQ0FDd0I7O0lBRXhCLG1DQUN5Qjs7SUFFekIsb0NBQzBCOztJQUUxQixtQ0FDeUI7O0lBRXpCLG1DQUN5Qzs7SUFFekMsd0NBQzZCOztJQUU3QiwrQ0FDb0M7O0lBRXBDLDRDQUNpQzs7SUFFakMsd0NBQ2tFOztJQUVsRSw4QkFBVzs7Ozs7SUFFWCxtQ0FBaUM7Ozs7O0lBRXJCLGtDQUEyQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gICAgQ29tcG9uZW50LFxuICAgIElucHV0LFxuICAgIE9uSW5pdCxcbiAgICBPdXRwdXQsXG4gICAgRXZlbnRFbWl0dGVyLFxuICAgIENoYW5nZURldGVjdG9yUmVmLFxuICAgIFZpZXdDaGlsZFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEhhc2hTZXJ2aWNlIH0gZnJvbSAnLi4vdXRpbHMvaGFzaC5zZXJ2aWNlJztcbmltcG9ydCBQb3BwZXIsIHsgUG9wcGVyT3B0aW9ucyB9IGZyb20gJ3BvcHBlci5qcyc7XG5pbXBvcnQgeyBQb3BvdmVyRGlyZWN0aXZlIH0gZnJvbSAnLi9wb3BvdmVyLWRpcmVjdGl2ZS9wb3BvdmVyLmRpcmVjdGl2ZSc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnZmQtcG9wb3ZlcicsXG4gICAgdGVtcGxhdGVVcmw6ICcuL3BvcG92ZXIuY29tcG9uZW50Lmh0bWwnXG59KVxuZXhwb3J0IGNsYXNzIFBvcG92ZXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICAgIEBJbnB1dCgpXG4gICAgYXJyb3c6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAgIEBJbnB1dCgpXG4gICAgZGlzYWJsZWQ6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAgIEBJbnB1dCgpXG4gICAgaXNEcm9wZG93bjogYm9vbGVhbiA9IGZhbHNlO1xuXG4gICAgQElucHV0KClcbiAgICBhcHBlbmRUbzogSFRNTEVsZW1lbnQgfCAnYm9keSc7XG5cbiAgICBASW5wdXQoKVxuICAgIHRyaWdnZXJzOiBzdHJpbmdbXSA9IFsnY2xpY2snXTtcblxuICAgIEBJbnB1dCgpXG4gICAgZ2x5cGg6IHN0cmluZztcblxuICAgIEBJbnB1dCgpXG4gICAgYnRuVHlwZTogc3RyaW5nID0gJyc7XG5cbiAgICBASW5wdXQoKVxuICAgIGlzT3BlbjogYm9vbGVhbiA9IGZhbHNlO1xuXG4gICAgQElucHV0KClcbiAgICBjb21wYWN0OiBib29sZWFuID0gZmFsc2U7XG5cbiAgICBASW5wdXQoKVxuICAgIHN0YW5kYXJkOiBib29sZWFuID0gZmFsc2U7XG5cbiAgICBASW5wdXQoKVxuICAgIHRvb2xiYXI6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAgIEBJbnB1dCgpXG4gICAgb3B0aW9uczogUG9wcGVyT3B0aW9ucyA9IFBvcHBlci5EZWZhdWx0cztcblxuICAgIEBJbnB1dCgpXG4gICAgZm9jdXNUcmFwcGVkOiBib29sZWFuID0gdHJ1ZTtcblxuICAgIEBJbnB1dCgpXG4gICAgY2xvc2VPbk91dHNpZGVDbGljazogYm9vbGVhbiA9IHRydWU7XG5cbiAgICBASW5wdXQoKVxuICAgIGNsb3NlT25Fc2NhcGVLZXk6IGJvb2xlYW4gPSB0cnVlO1xuXG4gICAgQE91dHB1dCgpXG4gICAgaXNPcGVuQ2hhbmdlOiBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4gPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XG5cbiAgICBpZDogc3RyaW5nO1xuXG4gICAgcHJpdmF0ZSBpc1NldHVwOiBib29sZWFuID0gZmFsc2U7XG5cbiAgICBjb25zdHJ1Y3Rvcihwcml2YXRlIGhhc2hlcjogSGFzaFNlcnZpY2UpIHt9XG5cbiAgICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5pZCA9IHRoaXMuaGFzaGVyLmhhc2goKTtcbiAgICAgICAgdGhpcy5pc1NldHVwID0gdHJ1ZTtcblxuICAgICAgICBpZiAodGhpcy5vcHRpb25zLm1vZGlmaWVycyAmJiB0aGlzLm9wdGlvbnMubW9kaWZpZXJzLnByZXZlbnRPdmVyZmxvdykge1xuICAgICAgICAgICAgdGhpcy5vcHRpb25zLm1vZGlmaWVycy5wcmV2ZW50T3ZlcmZsb3cuZXNjYXBlV2l0aFJlZmVyZW5jZSA9IHRydWU7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBwdWJsaWMgdG9nZ2xlKCk6IHZvaWQge1xuICAgICAgICBpZiAodGhpcy5pc09wZW4pIHtcbiAgICAgICAgICAgIHRoaXMuY2xvc2UoKTtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgIHRoaXMub3BlbigpO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgcHVibGljIGNsb3NlKCk6IHZvaWQge1xuICAgICAgICBpZiAodGhpcy5pc09wZW4pIHtcbiAgICAgICAgICAgIHRoaXMuaXNPcGVuID0gZmFsc2U7XG4gICAgICAgICAgICB0aGlzLmlzT3BlbkNoYW5nZS5lbWl0KHRoaXMuaXNPcGVuKTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIHB1YmxpYyBvcGVuKCk6IHZvaWQge1xuICAgICAgICBpZiAoIXRoaXMuaXNPcGVuKSB7XG4gICAgICAgICAgICB0aGlzLmlzT3BlbiA9IHRydWU7XG4gICAgICAgICAgICB0aGlzLmlzT3BlbkNoYW5nZS5lbWl0KHRoaXMuaXNPcGVuKTtcbiAgICAgICAgfVxuICAgIH1cblxufVxuIl19