{"_id":"@busacca/ngx-contextmenu","_rev":"1-db60cb5efd2f48feaa2df8f8846b6efb","name":"@busacca/ngx-contextmenu","dist-tags":{"latest":"5.2.1"},"versions":{"5.2.1":{"name":"@busacca/ngx-contextmenu","version":"5.2.1","description":"An Angular component to show a context menu on an arbitrary component","keywords":["angular2","contextmenu","angular2-contextmenu","ngx-contextmenu","ngx","ng2","ng2-contextmenu"],"author":{"name":"Isaac Mann","email":"isaacplmann@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+ssh://git@github.com/isaacplmann/ngx-contextmenu.git"},"peerDependencies":{"@angular/cdk":">=6.0.0 <9.0.0","@angular/common":">=6.0.0 <9.0.0","@angular/core":">=6.0.0 <9.0.0"},"main":"bundles/busacca-ngx-contextmenu.umd.js","module":"fesm5/busacca-ngx-contextmenu.js","es2015":"fesm2015/busacca-ngx-contextmenu.js","esm5":"esm5/busacca-ngx-contextmenu.js","esm2015":"esm2015/busacca-ngx-contextmenu.js","fesm5":"fesm5/busacca-ngx-contextmenu.js","fesm2015":"fesm2015/busacca-ngx-contextmenu.js","typings":"busacca-ngx-contextmenu.d.ts","metadata":"busacca-ngx-contextmenu.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.9.0"},"bugs":{"url":"https://github.com/isaacplmann/ngx-contextmenu/issues"},"homepage":"https://github.com/isaacplmann/ngx-contextmenu#readme","_id":"@busacca/ngx-contextmenu@5.2.1","_nodeVersion":"10.16.1","_npmVersion":"6.9.0","dist":{"integrity":"sha512-5Izvkb8fg/jSwTLnxAGiThOa6L7DE3UuG+fkkGcmbGh0wEOyRNs4wUt0dee24vjFEwzvOjIs2az549gEjyRFSA==","shasum":"31245273d42715ae0d742b802a13cd090cc6e44d","tarball":"https://registry.npmjs.org/@busacca/ngx-contextmenu/-/ngx-contextmenu-5.2.1.tgz","fileCount":54,"unpackedSize":1225373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxZGMCRA9TVsSAnZWagAAl9IQAJbEk6ahkgmUQipS5Jwh\nJYzoS2I3iraCeamFt3bhDIazhbr3n+Dg9BsO4J8GngzmPYCBDC3j9358QLpB\nupjtOqGMsEswLPssLDE0z8Q001wPnxyj0e6bAxTqLtWVXC743F6ikJBb3yq1\nHEvJFMBc5nPaOm0Zhj8Yg84rgXPIq7sk4qIqn/5XJ9xpu2Aw6pom1RQ+X+a3\nJ0WYwRWWMJE7XrlrcmgJitbUQivDfyiPChf9pwqCm0lWKw2FodguBR4KbcjT\np9+EqG7zT9kC7VSHkr9H5gE3yGFgZPdQt3EdnxdnxGs6QAZFa/YPV2v/JGLm\nkzyfFm6sqMp8SsQPoKm5LcrdUjLzLO2WjnIl6oynviYP/OAO8hYOzWvnJO3i\ncBUw0fQ3IkNLRFu3x0GzW8X9/SUbkIrDYCF7Zy81E7inWfHL4ecU772mjRKW\nak6B1IgKPAG0JYuR/HLRaSiVMRkZmsg39rOVuebKnf1+E+SptDw9H0jmBy3m\nPKcYKuVQ99uURXOCJyL+TdrJm29AV0kcw0jydQ+eSh8UEhcy8ecmVlXs5Chx\n1eLJmzuE685nQrTTOR4RbG81Xzbsp6Bch5NN1tZ4bj3ChMA5UHVQgaK6LaWC\naPxsO0qw7BV19IPl8oAMdMn81qF2NWsFYK8AVj8a1mqJUV5YZbSv9vREK+JX\nOo32\r\n=RU5N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCnJiCzcqGk1RftxmAXAAlx6IUgKI9sv2ReLQevhnOqkgIhAIorEqZh1fXtv0SXkTyLcxRdWuiH6iSmgJD6ujsBLzJ8"}]},"maintainers":[{"name":"diego.busacca","email":"diego.busacca@gmail.com"}],"_npmUser":{"name":"diego.busacca","email":"diego.busacca@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-contextmenu_5.2.1_1573228940283_0.9388247565725385"},"_hasShrinkwrap":false}},"time":{"created":"2019-11-08T16:02:20.078Z","5.2.1":"2019-11-08T16:02:20.502Z","modified":"2022-04-04T21:08:13.127Z"},"maintainers":[{"name":"diego.busacca","email":"diego.busacca@gmail.com"}],"description":"An Angular component to show a context menu on an arbitrary component","homepage":"https://github.com/isaacplmann/ngx-contextmenu#readme","keywords":["angular2","contextmenu","angular2-contextmenu","ngx-contextmenu","ngx","ng2","ng2-contextmenu"],"repository":{"type":"git","url":"git+ssh://git@github.com/isaacplmann/ngx-contextmenu.git"},"author":{"name":"Isaac Mann","email":"isaacplmann@gmail.com"},"bugs":{"url":"https://github.com/isaacplmann/ngx-contextmenu/issues"},"license":"MIT","readme":"# ngx-contextmenu\r\n\r\nA context menu built with Angular (6) inspired by [ui.bootstrap.contextMenu](https://github.com/Templarian/ui.bootstrap.contextMenu). Bootstrap classes are included in the markup, but there is no explicit dependency on Bootstrap. [Demo](https://isaacplmann.github.io/ngx-contextmenu/) [Stackblitz example](https://stackblitz.com/edit/ngx-contextmenu-example)\r\n\r\n## Installation\r\n\r\n- `npm install ngx-contextmenu @angular/cdk`\r\n- import ContextMenuModule.forRoot() into your app module\r\n- Make sure to include `` at the top of your `index.html`\r\n\r\n## Usage\r\n\r\n### Angular 5 support\r\n\r\nPlease use ngx-contextmenu@4.2.0 with Angular 5 projects.\r\n\r\n### Template\r\n\r\n```html\r\n
\r\n
Right Click: {{item?.name}}
\r\n
\r\n\r\n \r\n Say hi!\r\n \r\n \r\n \r\n Bye, {{item?.name}}\r\n \r\n \r\n Input something: \r\n \r\n\r\n```\r\n\r\n### Component Code\r\n\r\n```js\r\n@Component({\r\n ...\r\n})\r\nexport class MyContextMenuClass {\r\n public items = [\r\n { name: 'John', otherProperty: 'Foo' },\r\n { name: 'Joe', otherProperty: 'Bar' }\r\n ];\r\n @ViewChild(ContextMenuComponent) public basicMenu: ContextMenuComponent;\r\n}\r\n```\r\n\r\n## Context Menu Items\r\n\r\n- Each context menu item is a `` element with the `contextMenuItem` attribute directive applied.\r\n- If the `item` object is used in the context menu item template, the `let-item` attribute must be applied to the `` element. \r\n ** Note: ** Make sure to use the `item?.property` syntax in the template rather than `item.property` as the item will be initially `undefined`.\r\n- Every context menu item emits `execute` events. The `$event` object is of the form `{ event: MouseEvent, item: any }` where `event` is the mouse click event\r\n that triggered the execution and `item` is the current item.\r\n- The `divider` input parameter is optional. Items default to normal menu items. If `divider` is `true`, all the other inputs are ignored.\r\n- The `passive` input parameter is optional. If `passive` is `true`, the menu item will not emit execute events or close\r\n the context menu when clicked.\r\n- The `enabled` input parameter is optional. Items are enabled by default.\r\n This can be a boolean value or a function definition that takes an item and returns a boolean.\r\n- The `visible` input parameter is optional. Items are visible by default. This property enables you to show certain context menu items based on what the data item is.\r\n This can be a boolean value or a function definition that takes an item and returns a boolean.\r\n- Within the template, you have access to any components and variables available in the outer context.\r\n\r\n```html\r\n\r\n \r\n Say hi, {{item?.name}}! \r\n With access to the outside context: {{ outsideValue }}\r\n \r\n\r\n```\r\n```js\r\npublic outsideValue = \"something\";\r\npublic isMenuItemType1(item: any): boolean {\r\n return item.type === 'type1';\r\n}\r\n```\r\n\r\n## Sub-menus\r\n\r\nYou can specify sub-menus like this:\r\n\r\n```html\r\n
\r\n
Right Click: {{item?.name}}
\r\n
\r\n\r\n \r\n Say...\r\n \r\n \r\n \r\n ...hi!\r\n \r\n \r\n ...hola!\r\n \r\n \r\n ...salut!\r\n \r\n \r\n \r\n \r\n Bye, {{item?.name}}\r\n \r\n \r\n Input something: \r\n \r\n\r\n```\r\n\r\nNotes:\r\n1. The sub `` can not be placed inside the `` that references it.\r\n2. Sub-menus may be nested as deeply as you wish.\r\n\r\n## Upgrade from angular2-contextmenu 0.x\r\n\r\n1. Change `package.json` to reference `ngx-contextmenu` instead of `angular2-contextmenu`\r\n2. Upgrade to `@angular` 4.x\r\n3. Use `` instead of ``\r\n4. Update any styles that referenced `.angular2-contextmenu` to use `.ngx-contextmenu` instead\r\n\r\n**Note:** The imperative way of declaring context menu items has been removed. i.e. You can't pass an `actions` property to `contextMenuService.show.next()`.\r\n\r\n## Using `visible` and `enabled` functions\r\n\r\nIf you need access to properties in your component from within the `enabled` or `visible` functions, you can pass in an arrow function.\r\n\r\n```html\r\n\r\n```\r\n```js\r\npublic outsideValue = \"something\";\r\npublic isMenuItemOutsideValue = (item: any): boolean => {\r\n return item.type === this.outsideValue;\r\n}\r\n```\r\n\r\n## Multiple Context Menus\r\nYou can use multiple context menus in the same component if you would like.\r\n\r\n```html\r\n
\r\n
{{item?.name}}
\r\n
\r\n\r\n ...\r\n\r\n\r\n
\r\n
{{item?.name}}
\r\n
\r\n\r\n ...\r\n\r\n```\r\n\r\n```js\r\n@ViewChild('basicMenu') public basicMenu: ContextMenuComponent;\r\n@ViewChild('otherMenu') public otherMenu: ContextMenuComponent;\r\n```\r\n\r\n## Context Menu In a Different Component\r\nIf your `` component is in a different component from your list, you'll need to wire up the context menu event yourself.\r\n\r\n```html\r\n
\r\n
Right Click: {{item.name}}
\r\n
\r\n```\r\n\r\n```js\r\nimport { ContextMenuService } from 'ngx-contextmenu';\r\n\r\n@Component({\r\n ...\r\n})\r\nexport class MyContextMenuClass {\r\n public items = [\r\n { name: 'John', otherProperty: 'Foo' },\r\n { name: 'Joe', otherProperty: 'Bar' }\r\n ];\r\n\r\n // Optional\r\n @Input() contextMenu: ContextMenuComponent;\r\n\r\n constructor(private contextMenuService: ContextMenuService) {}\r\n\r\n public onContextMenu($event: MouseEvent, item: any): void {\r\n this.contextMenuService.show.next({\r\n // Optional - if unspecified, all context menu components will open\r\n contextMenu: this.contextMenu,\r\n event: $event,\r\n item: item,\r\n });\r\n $event.preventDefault();\r\n $event.stopPropagation();\r\n }\r\n}\r\n```\r\n\r\n## Triggering the Context Menu with a Different Event\r\nThe context menu can be triggered at any point using the method above. For instance, to trigger the context menu\r\nwith a left click instead of a right click, use this html:\r\n\r\n```html\r\n
\r\n
Left Click: {{item.name}}
\r\n
\r\n```\r\n\r\nThis could be `(keydown)`, `(mouseover)`, or `(myCustomEvent)` as well.\r\n\r\n## Positioning the Context Menu around an element\r\nIf you want to override the context menu positioning to be appended to an element instead of based on mouse position,\r\nprovide an `anchorElement` to the `contextMenuService`. This makes sense if you want to trigger the context menu with\r\na non-MouseEvent.\r\n\r\n```ts\r\npublic onContextMenu($event: KeyboardEvent, item: any): void {\r\n this.contextMenuService.show.next({\r\n anchorElement: $event.target,\r\n // Optional - if unspecified, all context menu components will open\r\n contextMenu: this.contextMenu,\r\n event: $event,\r\n item: item,\r\n });\r\n $event.preventDefault();\r\n $event.stopPropagation();\r\n}\r\n```\r\n\r\n## Custom Styles\r\n\r\nThe html that is generated for the context menu looks like this:\r\n\r\n```html\r\n
\r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n```\r\n\r\nYou can key off of the `ngx-contextmenu` class to create your own styles. Note that the `ul.dropdown-menu` will have inline styles applied for `position`, `display`, `left` and `top` so that it will be positioned at the cursor when you right-click.\r\n\r\n```css\r\n.ngx-contextmenu .dropdown-menu {\r\n border: solid 1px chartreuse;\r\n background-color: darkgreen;\r\n padding: 0;\r\n}\r\n.ngx-contextmenu li {\r\n display: block;\r\n border-top: solid 1px chartreuse;\r\n text-transform: uppercase;\r\n text-align: center;\r\n}\r\n.ngx-contextmenu li:first-child {\r\n border-top:none;\r\n}\r\n.ngx-contextmenu a {\r\n color:chartreuse;\r\n display: block;\r\n padding: 0.5em 1em;\r\n}\r\n.ngx-contextmenu a:hover {\r\n color:darkgreen;\r\n background-color:chartreuse;\r\n}\r\n```\r\n\r\n## Bootstrap 4\r\n\r\nIf you're using Bootstrap 4, you can specify a `useBootstrap4` property in the `forRoot` function of the `ContextMenuModule` in order to get the appropriate class names. Like this:\r\n\r\n```js\r\n@NgModule({\r\n import: [\r\n ContextMenuModule.forRoot({\r\n useBootstrap4: true,\r\n }),\r\n ],\r\n})\r\nexport class AppModule {}\r\n```\r\n\r\n**Or, if you want to repeat yourself,** you can add a `useBootstrap4` attribute to each `context-menu` component. Like this:\r\n\r\n```html\r\n\r\n```\r\n\r\n## Different styling on menus\r\n\r\nIf you want to style one menu differently than other menus, you can add a custom style to the menu.\r\n\r\n```html\r\n\r\n```\r\n\r\nPlease note that the style needs to be global to affect the menu, since the menu element is added to the page outside the component that triggers the menu.\r\n\r\n## AutoFocus\r\n\r\nYou can optionally set focus on the context menu whenever it opens. This enables a user to easily tab through the context menu items and press enter to select them.\r\n\r\n```js\r\n@NgModule({\r\n import: [\r\n ContextMenuModule.forRoot({\r\n autoFocus: true,\r\n }),\r\n ],\r\n})\r\nexport class AppModule {}\r\n```\r\n\r\n## Keyboard navigation\r\n\r\nYou can use the keyboard to manipulate the context menu. Note: Keyboard navigation should be used in conjunction with `autoFocus`, since key events are only captured when the context menu is focused.\r\n\r\n| Key | Action |\r\n|:--------------:|------------------------------------------------|\r\n| ArrowDown | Move to next menu item (wrapping) |\r\n| ArrowUp | Move to previous menu item (wrapping) |\r\n| ArrowRight | Open submenu of current menu item if present |\r\n| ArrowLeft | Close current menu unless already at root menu |\r\n| Enter \\| Space | Open submenu or execute current menu item |\r\n| Esc | Close current menu |\r\n\r\n## Disable Context Menu\r\n\r\nIf you need to disable the context menu, you can pass a `boolean` to the `[disabled]` input:\r\n\r\n```html\r\n\r\n```\r\n\r\n## Close event emitter\r\n\r\nThere is a `(close)` output EventEmitter that you can subscribe to for notifications when the context menu closes (either by clicking outside or choosing a menu item).\r\n\r\n```html\r\n\r\n```\r\n\r\n## Dynamic context menu\r\n\r\nThe items in the context menu are completely controlled by the `contextMenuActions` object.\r\n\r\n```html\r\n