@microsoft/windows-admin-center-sdk
Version:
Microsoft - Windows Admin Center Shell
109 lines • 12.6 kB
JavaScript
import { __decorate, __metadata } from "tslib";
import { ElementRef, EventEmitter, Injector, Input, Output } from '@angular/core';
import { Component } from '@angular/core';
import { Debounce } from '@microsoft/windows-admin-center-sdk/core/base/decorators/debounce.decorators';
import { Dom } from '@microsoft/windows-admin-center-sdk/core/dom/dom';
import { CoreBaseComponent } from '../common/base.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../actions/containers/action-menu/action-menu.component";
import * as i3 from "../dropdown/dropdown.component";
function ContextMenuComponent_sme_dropdown_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "sme-dropdown", 1)(1, "div", 2);
i0.ɵɵprojection(2);
i0.ɵɵelement(3, "sme-action-menu", 3, 4);
i0.ɵɵelementEnd()();
} if (rf & 2) {
const ctx_r0 = i0.ɵɵnextContext();
i0.ɵɵproperty("isContextMenu", true)("ngStyle", ctx_r0.getMenuPosition());
i0.ɵɵadvance(3);
i0.ɵɵproperty("actions", ctx_r0.contextMenuItems)("target", ctx_r0.target);
} }
const _c0 = ["*"];
/**
*
* @smeDoc {@label Context-Menu @id sme-context-menu}
*
* @overview
* @file {@filepath ./examples/context-menu-overview.md}
*
* @example {@label Basic Usage @id sme-dev-guide-controls-context-menu}
* @file {@filename component.html @filepath ./examples/context-menu-example.component.html}
* @file {@filename component.ts @filepath ./examples/context-menu-example.component.ts}
*
* @example {@label Nested Actions Usage @id sme-nested-actions-guide}
* @file {@filename component.html @filepath ./examples/nested-context-menu-example.component.html}
* @file {@filename component.ts @filepath ./examples/context-menu-example.component.ts}
*/
export class ContextMenuComponent extends CoreBaseComponent {
constructor(injector, element) {
super(injector);
this.element = element;
/**
* Gets the items to display in the contextmenu -they should of type actionItem
*/
this.contextMenuItems = [];
/**
*Takes in a function that is executed once an actionItem is clicked
*/
this.contextMenuItemClick = new EventEmitter();
/**
* Value that toggles the contextmenu
*/
this.isOpen = false;
}
/**
* The source name to use for logging
*/
get logSourceName() {
return 'ContextMenuComponent';
}
/**
* Function that does the positioning of the contextmenu depending on the right-click
*/
getMenuPosition() {
if (this.mouseEventData) {
return {
top: `${this.mouseEventData.clientY}px`,
left: `${this.mouseEventData.clientX}px`
};
}
}
/**
* Function that adds focus to the element when using the keyboard
*/
autoFocus() {
if (this.element.nativeElement) {
const firstFocusable = Dom.getFirstFocusableDescendent(this.element.nativeElement);
if (firstFocusable) {
firstFocusable.focus();
}
}
}
}
/** @nocollapse */ ContextMenuComponent.ɵfac = function ContextMenuComponent_Factory(t) { return new (t || ContextMenuComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.ElementRef)); };
/** @nocollapse */ ContextMenuComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: ContextMenuComponent, selectors: [["sme-context-menu"]], inputs: { contextMenuItems: "contextMenuItems", mouseEventData: "mouseEventData", target: "target" }, outputs: { contextMenuItemClick: "contextMenuItemClick" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0, decls: 1, vars: 1, consts: [["class", "sme-layout-fixed sme-layer-dialog sme-focus-zone", 3, "isContextMenu", "ngStyle", 4, "ngIf"], [1, "sme-layout-fixed", "sme-layer-dialog", "sme-focus-zone", 3, "isContextMenu", "ngStyle"], ["role", "menu", 1, "sme-dropdown-content"], ["role", "menu", 3, "actions", "target"], ["actionBar", ""]], template: function ContextMenuComponent_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵprojectionDef();
i0.ɵɵtemplate(0, ContextMenuComponent_sme_dropdown_0_Template, 5, 4, "sme-dropdown", 0);
} if (rf & 2) {
i0.ɵɵproperty("ngIf", ctx.isOpen);
} }, dependencies: [i1.NgIf, i1.NgStyle, i2.ActionMenuComponent, i3.DropdownComponent], encapsulation: 2 });
__decorate([
Debounce(1),
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], ContextMenuComponent.prototype, "autoFocus", null);
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContextMenuComponent, [{
type: Component,
args: [{ selector: 'sme-context-menu', template: " <sme-dropdown *ngIf=\"isOpen\" [isContextMenu]=\"true\" class=\"sme-layout-fixed sme-layer-dialog sme-focus-zone\" [ngStyle]=\"getMenuPosition()\">\r\n <div role=\"menu\" class=\"sme-dropdown-content\">\r\n <ng-content></ng-content>\r\n <sme-action-menu #actionBar [actions]=\"contextMenuItems\" [target]=\"target\" role=\"menu\"></sme-action-menu>\r\n </div>\r\n</sme-dropdown>\r\n" }]
}], function () { return [{ type: i0.Injector }, { type: i0.ElementRef }]; }, { contextMenuItems: [{
type: Input
}], mouseEventData: [{
type: Input
}], target: [{
type: Input
}], contextMenuItemClick: [{
type: Output
}], autoFocus: [] }); })();
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29udGV4dC1tZW51LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2FuZ3VsYXIvc3JjL2NvbnRyb2xzL2NvbnRleHQtbWVudS9jb250ZXh0LW1lbnUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vYW5ndWxhci9zcmMvY29udHJvbHMvY29udGV4dC1tZW51L2NvbnRleHQtbWVudS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFVBQVUsRUFBRSxZQUFZLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDbEYsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMxQyxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sOEVBQThFLENBQUM7QUFDeEcsT0FBTyxFQUFFLEdBQUcsRUFBRSxNQUFNLGtEQUFrRCxDQUFDO0FBRXZFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLDBCQUEwQixDQUFDOzs7Ozs7SUNMM0QsdUNBQTZJLGFBQUE7SUFFeEksa0JBQXlCO0lBQ3pCLHdDQUF5RztJQUM1RyxpQkFBTSxFQUFBOzs7SUFKc0Isb0NBQXNCLHFDQUFBO0lBR25CLGVBQTRCO0lBQTVCLGlEQUE0Qix5QkFBQTs7O0FESS9EOzs7Ozs7Ozs7Ozs7OztHQWNHO0FBT0gsTUFBTSxPQUFPLG9CQUFxQixTQUFRLGlCQUFpQjtJQXVDekQsWUFBWSxRQUFrQixFQUFVLE9BQW1CO1FBQ3pELEtBQUssQ0FBQyxRQUFRLENBQUMsQ0FBQztRQURzQixZQUFPLEdBQVAsT0FBTyxDQUFZO1FBOUIzRDs7VUFFRTtRQUVLLHFCQUFnQixHQUFpQixFQUFFLENBQUM7UUFlM0M7O1VBRUU7UUFFSyx5QkFBb0IsR0FBc0IsSUFBSSxZQUFZLEVBQU8sQ0FBQztRQUV6RTs7VUFFRTtRQUNLLFdBQU0sR0FBRyxLQUFLLENBQUM7SUFJdEIsQ0FBQztJQXZDRDs7T0FFRztJQUNILElBQWMsYUFBYTtRQUN6QixPQUFPLHNCQUFzQixDQUFDO0lBQ2hDLENBQUM7SUFvQ0Q7O01BRUU7SUFDSyxlQUFlO1FBQ3BCLElBQUksSUFBSSxDQUFDLGNBQWMsRUFBRTtZQUN2QixPQUFPO2dCQUNMLEdBQUcsRUFBRSxHQUFHLElBQUksQ0FBQyxjQUFjLENBQUMsT0FBTyxJQUFJO2dCQUN2QyxJQUFJLEVBQUUsR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDLE9BQU8sSUFBSTthQUN6QyxDQUFDO1NBQ0g7SUFDSCxDQUFDO0lBRUQ7O01BRUU7SUFFSyxTQUFTO1FBQ2QsSUFBSSxJQUFJLENBQUMsT0FBTyxDQUFDLGFBQWEsRUFBRTtZQUM5QixNQUFNLGNBQWMsR0FBRyxHQUFHLENBQUMsMkJBQTJCLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxhQUFhLENBQUMsQ0FBQztZQUNuRixJQUFJLGNBQWMsRUFBRTtnQkFDbEIsY0FBYyxDQUFDLEtBQUssRUFBRSxDQUFDO2FBQ3hCO1NBQ0Y7SUFDSCxDQUFDOzsyR0FsRVUsb0JBQW9CO3NHQUFwQixvQkFBb0I7O1FDNUIvQix1RkFLYTs7UUFMRSxpQ0FBWTs7QURzRjNCO0lBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQzs7OztxREFRWDt1RkFsRVUsb0JBQW9CO2NBTGhDLFNBQVM7MkJBQ0Usa0JBQWtCO29GQWlCckIsZ0JBQWdCO2tCQUR0QixLQUFLO1lBT0MsY0FBYztrQkFEcEIsS0FBSztZQVFDLE1BQU07a0JBRFosS0FBSztZQU9DLG9CQUFvQjtrQkFEMUIsTUFBTTtZQTRCQSxTQUFTIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRWxlbWVudFJlZiwgRXZlbnRFbWl0dGVyLCBJbmplY3RvciwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBDb21wb25lbnQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgRGVib3VuY2UgfSBmcm9tICdAbWljcm9zb2Z0L3dpbmRvd3MtYWRtaW4tY2VudGVyLXNkay9jb3JlL2Jhc2UvZGVjb3JhdG9ycy9kZWJvdW5jZS5kZWNvcmF0b3JzJztcclxuaW1wb3J0IHsgRG9tIH0gZnJvbSAnQG1pY3Jvc29mdC93aW5kb3dzLWFkbWluLWNlbnRlci1zZGsvY29yZS9kb20vZG9tJztcclxuaW1wb3J0IHsgQWN0aW9uSXRlbSB9IGZyb20gJy4uL2FjdGlvbnMnO1xyXG5pbXBvcnQgeyBDb3JlQmFzZUNvbXBvbmVudCB9IGZyb20gJy4uL2NvbW1vbi9iYXNlLmNvbXBvbmVudCc7XHJcblxyXG4vKipcclxuICpcclxuICogQHNtZURvYyB7QGxhYmVsIENvbnRleHQtTWVudSBAaWQgc21lLWNvbnRleHQtbWVudX1cclxuICpcclxuICogQG92ZXJ2aWV3XHJcbiAqIEBmaWxlIHtAZmlsZXBhdGggLi9leGFtcGxlcy9jb250ZXh0LW1lbnUtb3ZlcnZpZXcubWR9XHJcbiAqXHJcbiAqIEBleGFtcGxlIHtAbGFiZWwgQmFzaWMgVXNhZ2UgQGlkIHNtZS1kZXYtZ3VpZGUtY29udHJvbHMtY29udGV4dC1tZW51fVxyXG4gKiBAZmlsZSB7QGZpbGVuYW1lIGNvbXBvbmVudC5odG1sIEBmaWxlcGF0aCAuL2V4YW1wbGVzL2NvbnRleHQtbWVudS1leGFtcGxlLmNvbXBvbmVudC5odG1sfVxyXG4gKiBAZmlsZSB7QGZpbGVuYW1lIGNvbXBvbmVudC50cyBAZmlsZXBhdGggLi9leGFtcGxlcy9jb250ZXh0LW1lbnUtZXhhbXBsZS5jb21wb25lbnQudHN9XHJcbiAqXHJcbiAqIEBleGFtcGxlIHtAbGFiZWwgTmVzdGVkIEFjdGlvbnMgVXNhZ2UgQGlkIHNtZS1uZXN0ZWQtYWN0aW9ucy1ndWlkZX1cclxuICogQGZpbGUge0BmaWxlbmFtZSBjb21wb25lbnQuaHRtbCBAZmlsZXBhdGggLi9leGFtcGxlcy9uZXN0ZWQtY29udGV4dC1tZW51LWV4YW1wbGUuY29tcG9uZW50Lmh0bWx9XHJcbiAqIEBmaWxlIHtAZmlsZW5hbWUgY29tcG9uZW50LnRzIEBmaWxlcGF0aCAuL2V4YW1wbGVzL2NvbnRleHQtbWVudS1leGFtcGxlLmNvbXBvbmVudC50c31cclxuICovXHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3NtZS1jb250ZXh0LW1lbnUnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9jb250ZXh0LW1lbnUuY29tcG9uZW50Lmh0bWwnXHJcbn0pXHJcblxyXG5leHBvcnQgY2xhc3MgQ29udGV4dE1lbnVDb21wb25lbnQgZXh0ZW5kcyBDb3JlQmFzZUNvbXBvbmVudCB7XHJcblxyXG4gIC8qKlxyXG4gICAqIFRoZSBzb3VyY2UgbmFtZSB0byB1c2UgZm9yIGxvZ2dpbmdcclxuICAgKi9cclxuICBwcm90ZWN0ZWQgZ2V0IGxvZ1NvdXJjZU5hbWUoKSB7XHJcbiAgICByZXR1cm4gJ0NvbnRleHRNZW51Q29tcG9uZW50JztcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIEdldHMgdGhlIGl0ZW1zIHRvIGRpc3BsYXkgaW4gdGhlIGNvbnRleHRtZW51IC10aGV5IHNob3VsZCBvZiB0eXBlIGFjdGlvbkl0ZW1cclxuICAqL1xyXG4gIEBJbnB1dCgpXHJcbiAgcHVibGljIGNvbnRleHRNZW51SXRlbXM6IEFjdGlvbkl0ZW1bXSA9IFtdO1xyXG5cclxuICAvKipcclxuICAgKiBHZXRzIHRoZSBtb3VzZSByaWdodC1jbGljayBldmVudCBmb3IgcG9zaXRpb25pbmdcclxuICAqL1xyXG4gIEBJbnB1dCgpXHJcbiAgcHVibGljIG1vdXNlRXZlbnREYXRhOiBNb3VzZUV2ZW50O1xyXG5cclxuICAvKipcclxuICAgKiBUYXJnZXQgZGF0YSBtb2RlbCBmb3IgYXBwIGJhciBwYXNzZWQgdG8gYWxsIGNvbnRhaW5lZCBhY3Rpb25zIHdoZW4gYW55IGFjdGlvbiBleGVjdXRlcyBvciBhcHAgYmFyIGNoYW5nZXMgc3RhdGVzXHJcbiAgICogKGUuZy4gb24gZW5hYmxlZC9kaXNhYmxlZClcclxuICAgKi9cclxuICBASW5wdXQoKVxyXG4gIHB1YmxpYyB0YXJnZXQ6IGFueTtcclxuXHJcbiAgLyoqXHJcbiAgICpUYWtlcyBpbiBhIGZ1bmN0aW9uIHRoYXQgaXMgZXhlY3V0ZWQgb25jZSBhbiBhY3Rpb25JdGVtIGlzIGNsaWNrZWRcclxuICAqL1xyXG4gIEBPdXRwdXQoKVxyXG4gIHB1YmxpYyBjb250ZXh0TWVudUl0ZW1DbGljazogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcclxuXHJcbiAgLyoqXHJcbiAgICogVmFsdWUgdGhhdCB0b2dnbGVzIHRoZSBjb250ZXh0bWVudVxyXG4gICovXHJcbiAgcHVibGljIGlzT3BlbiA9IGZhbHNlO1xyXG5cclxuICBjb25zdHJ1Y3RvcihpbmplY3RvcjogSW5qZWN0b3IsIHByaXZhdGUgZWxlbWVudDogRWxlbWVudFJlZikge1xyXG4gICAgc3VwZXIoaW5qZWN0b3IpO1xyXG4gIH1cclxuXHJcbiAgLyoqXHJcbiAgICogRnVuY3Rpb24gdGhhdCBkb2VzIHRoZSBwb3NpdGlvbmluZyBvZiB0aGUgY29udGV4dG1lbnUgZGVwZW5kaW5nIG9uIHRoZSByaWdodC1jbGlja1xyXG4gICovXHJcbiAgcHVibGljIGdldE1lbnVQb3NpdGlvbigpIHtcclxuICAgIGlmICh0aGlzLm1vdXNlRXZlbnREYXRhKSB7XHJcbiAgICAgIHJldHVybiB7XHJcbiAgICAgICAgdG9wOiBgJHt0aGlzLm1vdXNlRXZlbnREYXRhLmNsaWVudFl9cHhgLFxyXG4gICAgICAgIGxlZnQ6IGAke3RoaXMubW91c2VFdmVudERhdGEuY2xpZW50WH1weGBcclxuICAgICAgfTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIEZ1bmN0aW9uIHRoYXQgYWRkcyBmb2N1cyB0byB0aGUgZWxlbWVudCB3aGVuIHVzaW5nIHRoZSBrZXlib2FyZFxyXG4gICovXHJcbiAgQERlYm91bmNlKDEpXHJcbiAgcHVibGljIGF1dG9Gb2N1cygpIHtcclxuICAgIGlmICh0aGlzLmVsZW1lbnQubmF0aXZlRWxlbWVudCkge1xyXG4gICAgICBjb25zdCBmaXJzdEZvY3VzYWJsZSA9IERvbS5nZXRGaXJzdEZvY3VzYWJsZURlc2NlbmRlbnQodGhpcy5lbGVtZW50Lm5hdGl2ZUVsZW1lbnQpO1xyXG4gICAgICBpZiAoZmlyc3RGb2N1c2FibGUpIHtcclxuICAgICAgICBmaXJzdEZvY3VzYWJsZS5mb2N1cygpO1xyXG4gICAgICB9XHJcbiAgICB9XHJcbiAgfVxyXG59XHJcbiIsIiAgPHNtZS1kcm9wZG93biAqbmdJZj1cImlzT3BlblwiICBbaXNDb250ZXh0TWVudV09XCJ0cnVlXCIgY2xhc3M9XCJzbWUtbGF5b3V0LWZpeGVkIHNtZS1sYXllci1kaWFsb2cgc21lLWZvY3VzLXpvbmVcIiAgW25nU3R5bGVdPVwiZ2V0TWVudVBvc2l0aW9uKClcIj5cclxuICAgIDxkaXYgcm9sZT1cIm1lbnVcIiBjbGFzcz1cInNtZS1kcm9wZG93bi1jb250ZW50XCI+XHJcbiAgICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XHJcbiAgICAgICA8c21lLWFjdGlvbi1tZW51ICNhY3Rpb25CYXIgW2FjdGlvbnNdPVwiY29udGV4dE1lbnVJdGVtc1wiIFt0YXJnZXRdPVwidGFyZ2V0XCIgcm9sZT1cIm1lbnVcIj48L3NtZS1hY3Rpb24tbWVudT5cclxuICAgIDwvZGl2PlxyXG48L3NtZS1kcm9wZG93bj5cclxuIl19