carbon-components-angular
Version:
Next generation components
99 lines • 11.7 kB
JavaScript
import { Component, Optional } from "@angular/core";
import { position } from "@carbon/utils-position";
import { closestAttr } from "carbon-components-angular/utils";
import { CloseReasons } from "../dialog-config.interface";
import { Dialog } from "../dialog.component";
import * as i0 from "@angular/core";
import * as i1 from "carbon-components-angular/i18n";
import * as i2 from "carbon-components-angular/utils";
import * as i3 from "@angular/common";
/**
* @deprecated as of v5
* Use Toggletip or Popover components instead
*/
export class OverflowMenuCustomPane extends Dialog {
constructor(elementRef, i18n, animationFrameService = null,
// mark `elementService` as optional since making it mandatory would be a breaking change
elementService = null) {
super(elementRef, elementService, animationFrameService);
this.elementRef = elementRef;
this.i18n = i18n;
this.animationFrameService = animationFrameService;
this.elementService = elementService;
}
onClick(event) {
this.doClose({
reason: CloseReasons.interaction,
target: event.target
});
}
onDialogInit() {
const positionOverflowMenu = pos => {
let offset;
/*
* 20 is half the width of the overflow menu trigger element.
* we also move the element by half of it's own width, since
* position service will try and center everything
*/
const closestRel = closestAttr("position", ["relative", "fixed", "absolute"], this.elementRef.nativeElement);
const topFix = closestRel ? closestRel.getBoundingClientRect().top * -1 : 0;
const leftFix = closestRel ? closestRel.getBoundingClientRect().left * -1 : 0;
offset = Math.round(this.dialog.nativeElement.offsetWidth / 2) - 20;
if (this.dialogConfig.flip) {
return position.addOffset(pos, topFix, (-offset + leftFix));
}
return position.addOffset(pos, topFix, (offset + leftFix));
};
this.addGap["bottom"] = positionOverflowMenu;
this.addGap["top"] = positionOverflowMenu;
if (!this.dialogConfig.menuLabel) {
this.dialogConfig.menuLabel = this.i18n.get().OVERFLOW_MENU.OVERFLOW;
}
}
}
OverflowMenuCustomPane.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OverflowMenuCustomPane, deps: [{ token: i0.ElementRef }, { token: i1.I18n }, { token: i2.AnimationFrameService, optional: true }, { token: i2.ElementService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
OverflowMenuCustomPane.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OverflowMenuCustomPane, selector: "cds-overflow-custom-menu-pane, ibm-overflow-custom-menu-pane", usesInheritance: true, ngImport: i0, template: `
<div
[attr.id]="dialogConfig.compID"
[attr.aria-label]="dialogConfig.menuLabel"
[attr.data-floating-menu-direction]="placement ? placement : null"
[ngClass]="{'cds--overflow-menu--flip': dialogConfig.flip}"
class="cds--overflow-menu-options cds--overflow-menu-options--open"
role="menu"
(click)="onClick($event)"
#dialog
[attr.aria-label]="dialogConfig.menuLabel">
<ng-template
[ngTemplateOutlet]="dialogConfig.content"
[ngTemplateOutletContext]="{overflowMenu: this}">
</ng-template>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OverflowMenuCustomPane, decorators: [{
type: Component,
args: [{
selector: "cds-overflow-custom-menu-pane, ibm-overflow-custom-menu-pane",
template: `
<div
[attr.id]="dialogConfig.compID"
[attr.aria-label]="dialogConfig.menuLabel"
[attr.data-floating-menu-direction]="placement ? placement : null"
[ngClass]="{'cds--overflow-menu--flip': dialogConfig.flip}"
class="cds--overflow-menu-options cds--overflow-menu-options--open"
role="menu"
(click)="onClick($event)"
#dialog
[attr.aria-label]="dialogConfig.menuLabel">
<ng-template
[ngTemplateOutlet]="dialogConfig.content"
[ngTemplateOutletContext]="{overflowMenu: this}">
</ng-template>
</div>
`
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.I18n }, { type: i2.AnimationFrameService, decorators: [{
type: Optional
}] }, { type: i2.ElementService, decorators: [{
type: Optional
}] }]; } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3ZlcmZsb3ctbWVudS1jdXN0b20tcGFuZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvZGlhbG9nL292ZXJmbG93LW1lbnUvb3ZlcmZsb3ctbWVudS1jdXN0b20tcGFuZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFpQixTQUFTLEVBQWMsUUFBUSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQy9FLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUdsRCxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFDOUQsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQzFELE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQzs7Ozs7QUFFN0M7OztHQUdHO0FBcUJILE1BQU0sT0FBTyxzQkFBdUIsU0FBUSxNQUFNO0lBQ2pELFlBQ1csVUFBc0IsRUFDdEIsSUFBVSxFQUNFLHdCQUErQyxJQUFJO0lBQ3pFLHlGQUF5RjtJQUNuRSxpQkFBaUMsSUFBSTtRQUUzRCxLQUFLLENBQUMsVUFBVSxFQUFFLGNBQWMsRUFBRSxxQkFBcUIsQ0FBQyxDQUFDO1FBTi9DLGVBQVUsR0FBVixVQUFVLENBQVk7UUFDdEIsU0FBSSxHQUFKLElBQUksQ0FBTTtRQUNFLDBCQUFxQixHQUFyQixxQkFBcUIsQ0FBOEI7UUFFbkQsbUJBQWMsR0FBZCxjQUFjLENBQXVCO0lBRzVELENBQUM7SUFFRCxPQUFPLENBQUMsS0FBSztRQUNaLElBQUksQ0FBQyxPQUFPLENBQUM7WUFDWixNQUFNLEVBQUUsWUFBWSxDQUFDLFdBQVc7WUFDaEMsTUFBTSxFQUFFLEtBQUssQ0FBQyxNQUFNO1NBQ3BCLENBQUMsQ0FBQztJQUNKLENBQUM7SUFFRCxZQUFZO1FBQ1gsTUFBTSxvQkFBb0IsR0FBRyxHQUFHLENBQUMsRUFBRTtZQUNsQyxJQUFJLE1BQU0sQ0FBQztZQUNYOzs7O2NBSUU7WUFDRixNQUFNLFVBQVUsR0FBRyxXQUFXLENBQUMsVUFBVSxFQUFFLENBQUMsVUFBVSxFQUFFLE9BQU8sRUFBRSxVQUFVLENBQUMsRUFBRSxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1lBQzdHLE1BQU0sTUFBTSxHQUFHLFVBQVUsQ0FBQyxDQUFDLENBQUMsVUFBVSxDQUFDLHFCQUFxQixFQUFFLENBQUMsR0FBRyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7WUFDNUUsTUFBTSxPQUFPLEdBQUcsVUFBVSxDQUFDLENBQUMsQ0FBQyxVQUFVLENBQUMscUJBQXFCLEVBQUUsQ0FBQyxJQUFJLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztZQUU5RSxNQUFNLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLGFBQWEsQ0FBQyxXQUFXLEdBQUcsQ0FBQyxDQUFDLEdBQUcsRUFBRSxDQUFDO1lBQ3BFLElBQUksSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLEVBQUU7Z0JBQzNCLE9BQU8sUUFBUSxDQUFDLFNBQVMsQ0FBQyxHQUFHLEVBQUUsTUFBTSxFQUFFLENBQUMsQ0FBQyxNQUFNLEdBQUcsT0FBTyxDQUFDLENBQUMsQ0FBQzthQUM1RDtZQUNELE9BQU8sUUFBUSxDQUFDLFNBQVMsQ0FBQyxHQUFHLEVBQUUsTUFBTSxFQUFFLENBQUMsTUFBTSxHQUFHLE9BQU8sQ0FBQyxDQUFDLENBQUM7UUFDNUQsQ0FBQyxDQUFDO1FBRUYsSUFBSSxDQUFDLE1BQU0sQ0FBQyxRQUFRLENBQUMsR0FBRyxvQkFBb0IsQ0FBQztRQUU3QyxJQUFJLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxHQUFHLG9CQUFvQixDQUFDO1FBRTFDLElBQUksQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLFNBQVMsRUFBRTtZQUNqQyxJQUFJLENBQUMsWUFBWSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLEdBQUcsRUFBRSxDQUFDLGFBQWEsQ0FBQyxRQUFRLENBQUM7U0FDckU7SUFDRixDQUFDOzttSEE1Q1csc0JBQXNCO3VHQUF0QixzQkFBc0IsMkhBbEJ4Qjs7Ozs7Ozs7Ozs7Ozs7OztFQWdCVDsyRkFFVyxzQkFBc0I7a0JBcEJsQyxTQUFTO21CQUFDO29CQUNWLFFBQVEsRUFBRSw4REFBOEQ7b0JBQ3hFLFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7OztFQWdCVDtpQkFDRDs7MEJBS0UsUUFBUTs7MEJBRVIsUUFBUSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFmdGVyVmlld0luaXQsIENvbXBvbmVudCwgRWxlbWVudFJlZiwgT3B0aW9uYWwgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgcG9zaXRpb24gfSBmcm9tIFwiQGNhcmJvbi91dGlscy1wb3NpdGlvblwiO1xuaW1wb3J0IHsgSTE4biB9IGZyb20gXCJjYXJib24tY29tcG9uZW50cy1hbmd1bGFyL2kxOG5cIjtcbmltcG9ydCB7IEFuaW1hdGlvbkZyYW1lU2VydmljZSwgRWxlbWVudFNlcnZpY2UgfSBmcm9tIFwiY2FyYm9uLWNvbXBvbmVudHMtYW5ndWxhci91dGlsc1wiO1xuaW1wb3J0IHsgY2xvc2VzdEF0dHIgfSBmcm9tIFwiY2FyYm9uLWNvbXBvbmVudHMtYW5ndWxhci91dGlsc1wiO1xuaW1wb3J0IHsgQ2xvc2VSZWFzb25zIH0gZnJvbSBcIi4uL2RpYWxvZy1jb25maWcuaW50ZXJmYWNlXCI7XG5pbXBvcnQgeyBEaWFsb2cgfSBmcm9tIFwiLi4vZGlhbG9nLmNvbXBvbmVudFwiO1xuXG4vKipcbiAqIEBkZXByZWNhdGVkIGFzIG9mIHY1XG4gKiBVc2UgVG9nZ2xldGlwIG9yIFBvcG92ZXIgY29tcG9uZW50cyBpbnN0ZWFkXG4gKi9cbkBDb21wb25lbnQoe1xuXHRzZWxlY3RvcjogXCJjZHMtb3ZlcmZsb3ctY3VzdG9tLW1lbnUtcGFuZSwgaWJtLW92ZXJmbG93LWN1c3RvbS1tZW51LXBhbmVcIixcblx0dGVtcGxhdGU6IGBcblx0XHQ8ZGl2XG5cdFx0XHRbYXR0ci5pZF09XCJkaWFsb2dDb25maWcuY29tcElEXCJcblx0XHRcdFthdHRyLmFyaWEtbGFiZWxdPVwiZGlhbG9nQ29uZmlnLm1lbnVMYWJlbFwiXG5cdFx0XHRbYXR0ci5kYXRhLWZsb2F0aW5nLW1lbnUtZGlyZWN0aW9uXT1cInBsYWNlbWVudCA/IHBsYWNlbWVudCA6IG51bGxcIlxuXHRcdFx0W25nQ2xhc3NdPVwieydjZHMtLW92ZXJmbG93LW1lbnUtLWZsaXAnOiBkaWFsb2dDb25maWcuZmxpcH1cIlxuXHRcdFx0Y2xhc3M9XCJjZHMtLW92ZXJmbG93LW1lbnUtb3B0aW9ucyBjZHMtLW92ZXJmbG93LW1lbnUtb3B0aW9ucy0tb3BlblwiXG5cdFx0XHRyb2xlPVwibWVudVwiXG5cdFx0XHQoY2xpY2spPVwib25DbGljaygkZXZlbnQpXCJcblx0XHRcdCNkaWFsb2dcblx0XHRcdFthdHRyLmFyaWEtbGFiZWxdPVwiZGlhbG9nQ29uZmlnLm1lbnVMYWJlbFwiPlxuXHRcdFx0PG5nLXRlbXBsYXRlXG5cdFx0XHRcdFtuZ1RlbXBsYXRlT3V0bGV0XT1cImRpYWxvZ0NvbmZpZy5jb250ZW50XCJcblx0XHRcdFx0W25nVGVtcGxhdGVPdXRsZXRDb250ZXh0XT1cIntvdmVyZmxvd01lbnU6IHRoaXN9XCI+XG5cdFx0XHQ8L25nLXRlbXBsYXRlPlxuXHRcdDwvZGl2PlxuXHRgXG59KVxuZXhwb3J0IGNsYXNzIE92ZXJmbG93TWVudUN1c3RvbVBhbmUgZXh0ZW5kcyBEaWFsb2cgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0IHtcblx0Y29uc3RydWN0b3IoXG5cdFx0cHJvdGVjdGVkIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWYsXG5cdFx0cHJvdGVjdGVkIGkxOG46IEkxOG4sXG5cdFx0QE9wdGlvbmFsKCkgcHJvdGVjdGVkIGFuaW1hdGlvbkZyYW1lU2VydmljZTogQW5pbWF0aW9uRnJhbWVTZXJ2aWNlID0gbnVsbCxcblx0XHQvLyBtYXJrIGBlbGVtZW50U2VydmljZWAgYXMgb3B0aW9uYWwgc2luY2UgbWFraW5nIGl0IG1hbmRhdG9yeSB3b3VsZCBiZSBhIGJyZWFraW5nIGNoYW5nZVxuXHRcdEBPcHRpb25hbCgpIHByb3RlY3RlZCBlbGVtZW50U2VydmljZTogRWxlbWVudFNlcnZpY2UgPSBudWxsXG5cdCkge1xuXHRcdHN1cGVyKGVsZW1lbnRSZWYsIGVsZW1lbnRTZXJ2aWNlLCBhbmltYXRpb25GcmFtZVNlcnZpY2UpO1xuXHR9XG5cblx0b25DbGljayhldmVudCkge1xuXHRcdHRoaXMuZG9DbG9zZSh7XG5cdFx0XHRyZWFzb246IENsb3NlUmVhc29ucy5pbnRlcmFjdGlvbixcblx0XHRcdHRhcmdldDogZXZlbnQudGFyZ2V0XG5cdFx0fSk7XG5cdH1cblxuXHRvbkRpYWxvZ0luaXQoKSB7XG5cdFx0Y29uc3QgcG9zaXRpb25PdmVyZmxvd01lbnUgPSBwb3MgPT4ge1xuXHRcdFx0bGV0IG9mZnNldDtcblx0XHRcdC8qXG5cdFx0XHQqIDIwIGlzIGhhbGYgdGhlIHdpZHRoIG9mIHRoZSBvdmVyZmxvdyBtZW51IHRyaWdnZXIgZWxlbWVudC5cblx0XHRcdCogd2UgYWxzbyBtb3ZlIHRoZSBlbGVtZW50IGJ5IGhhbGYgb2YgaXQncyBvd24gd2lkdGgsIHNpbmNlXG5cdFx0XHQqIHBvc2l0aW9uIHNlcnZpY2Ugd2lsbCB0cnkgYW5kIGNlbnRlciBldmVyeXRoaW5nXG5cdFx0XHQqL1xuXHRcdFx0Y29uc3QgY2xvc2VzdFJlbCA9IGNsb3Nlc3RBdHRyKFwicG9zaXRpb25cIiwgW1wicmVsYXRpdmVcIiwgXCJmaXhlZFwiLCBcImFic29sdXRlXCJdLCB0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudCk7XG5cdFx0XHRjb25zdCB0b3BGaXggPSBjbG9zZXN0UmVsID8gY2xvc2VzdFJlbC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKS50b3AgKiAtMSA6IDA7XG5cdFx0XHRjb25zdCBsZWZ0Rml4ID0gY2xvc2VzdFJlbCA/IGNsb3Nlc3RSZWwuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCkubGVmdCAqIC0xIDogMDtcblxuXHRcdFx0b2Zmc2V0ID0gTWF0aC5yb3VuZCh0aGlzLmRpYWxvZy5uYXRpdmVFbGVtZW50Lm9mZnNldFdpZHRoIC8gMikgLSAyMDtcblx0XHRcdGlmICh0aGlzLmRpYWxvZ0NvbmZpZy5mbGlwKSB7XG5cdFx0XHRcdHJldHVybiBwb3NpdGlvbi5hZGRPZmZzZXQocG9zLCB0b3BGaXgsICgtb2Zmc2V0ICsgbGVmdEZpeCkpO1xuXHRcdFx0fVxuXHRcdFx0cmV0dXJuIHBvc2l0aW9uLmFkZE9mZnNldChwb3MsIHRvcEZpeCwgKG9mZnNldCArIGxlZnRGaXgpKTtcblx0XHR9O1xuXG5cdFx0dGhpcy5hZGRHYXBbXCJib3R0b21cIl0gPSBwb3NpdGlvbk92ZXJmbG93TWVudTtcblxuXHRcdHRoaXMuYWRkR2FwW1widG9wXCJdID0gcG9zaXRpb25PdmVyZmxvd01lbnU7XG5cblx0XHRpZiAoIXRoaXMuZGlhbG9nQ29uZmlnLm1lbnVMYWJlbCkge1xuXHRcdFx0dGhpcy5kaWFsb2dDb25maWcubWVudUxhYmVsID0gdGhpcy5pMThuLmdldCgpLk9WRVJGTE9XX01FTlUuT1ZFUkZMT1c7XG5cdFx0fVxuXHR9XG59XG4iXX0=