| 1 | /**
|
| 2 | * @license
|
| 3 | * Copyright Akveo. All Rights Reserved.
|
| 4 | * Licensed under the MIT License. See License.txt in the project root for license information.
|
| 5 | */
|
| 6 | import { AfterViewInit, ComponentRef, ElementRef, OnChanges, OnDestroy, OnInit } from '@angular/core';
|
| 7 | import { Subject } from 'rxjs';
|
| 8 | import { NbDynamicOverlayController } from '../cdk/overlay/dynamic/dynamic-overlay';
|
| 9 | import { NbDynamicOverlayHandler } from '../cdk/overlay/dynamic/dynamic-overlay-handler';
|
| 10 | import { NbOverlayConfig, NbOverlayRef } from '../cdk/overlay/mapping';
|
| 11 | import { NbAdjustableConnectedPositionStrategy, NbAdjustment, NbPosition } from '../cdk/overlay/overlay-position';
|
| 12 | import { NbTrigger, NbTriggerValues } from '../cdk/overlay/overlay-trigger';
|
| 13 | import { NbMenuItem, NbMenuService } from '../menu/menu.service';
|
| 14 | import * as i0 from "@angular/core";
|
| 15 | export interface NbContextMenuContext {
|
| 16 | items: NbMenuItem[];
|
| 17 | tag: string;
|
| 18 | position: NbPosition;
|
| 19 | }
|
| 20 | /**
|
| 21 | * Full featured context menu directive.
|
| 22 | *
|
| 23 | * @stacked-example(Showcase, context-menu/context-menu-showcase.component)
|
| 24 | *
|
| 25 | * Just pass menu items array:
|
| 26 | *
|
| 27 | * ```html
|
| 28 | * <button [nbContextMenu]="items"></button>
|
| 29 | * ...
|
| 30 | * items = [{ title: 'Profile' }, { title: 'Log out' }];
|
| 31 | * ```
|
| 32 | * ### Installation
|
| 33 | *
|
| 34 | * Import `NbContextMenuModule` to your feature module.
|
| 35 | * ```ts
|
| 36 | * @NgModule({
|
| 37 | * imports: [
|
| 38 | * // ...
|
| 39 | * NbContextMenuModule,
|
| 40 | * ],
|
| 41 | * })
|
| 42 | * export class PageModule { }
|
| 43 | * ```
|
| 44 | * Also make sure `NbMenuModule` is imported to your `app.module`.
|
| 45 | * ```ts
|
| 46 | * @NgModule({
|
| 47 | * imports: [
|
| 48 | * // ...
|
| 49 | * NbMenuModule.forRoot(),
|
| 50 | * ],
|
| 51 | * })
|
| 52 | * export class AppModule { }
|
| 53 | * ```
|
| 54 | *
|
| 55 | * ### Usage
|
| 56 | *
|
| 57 | * If you want to handle context menu clicks you have to pass `nbContextMenuTag`
|
| 58 | * param and register to events using NbMenuService.
|
| 59 | * `NbContextMenu` renders plain `NbMenu` inside, so
|
| 60 | * you have to work with it just like with `NbMenu` component:
|
| 61 | *
|
| 62 | * @stacked-example(Menu item click, context-menu/context-menu-click.component)
|
| 63 | *
|
| 64 | * Context menu has different placements, such as: top, bottom, left and right
|
| 65 | * which can be used as following:
|
| 66 | *
|
| 67 | * ```html
|
| 68 | * <button [nbContextMenu]="items" nbContextMenuPlacement="right"></button>
|
| 69 | * ```
|
| 70 | *
|
| 71 | * ```ts
|
| 72 | * items = [{ title: 'Profile' }, { title: 'Log out' }];
|
| 73 | * ```
|
| 74 | *
|
| 75 | * By default context menu will try to adjust itself to maximally fit viewport
|
| 76 | * and provide the best user experience. It will try to change position of the context menu.
|
| 77 | * If you wanna disable this behaviour just set it falsy value.
|
| 78 | *
|
| 79 | * ```html
|
| 80 | * <button [nbContextMenu]="items" nbContextMenuAdjustment="counterclockwise"></button>
|
| 81 | * ```
|
| 82 | *
|
| 83 | * ```ts
|
| 84 | * items = [{ title: 'Profile' }, { title: 'Log out' }];
|
| 85 | * ```
|
| 86 | * Context menu has a number of triggers which provides an ability to show and hide the component in different ways:
|
| 87 | *
|
| 88 | * - Click mode shows the component when a user clicks on the host element and hides when the user clicks
|
| 89 | * somewhere on the document outside the component.
|
| 90 | * - Hint provides capability to show the component when the user hovers over the host element
|
| 91 | * and hide when the user hovers out of the host.
|
| 92 | * - Hover works like hint mode with one exception - when the user moves mouse from host element to
|
| 93 | * the container element the component remains open, so that it is possible to interact with it content.
|
| 94 | * - Focus mode is applied when user focuses the element.
|
| 95 | * - Noop mode - the component won't react to the user interaction.
|
| 96 | *
|
| 97 | * @stacked-example(Available Triggers, context-menu/context-menu-modes.component.html)
|
| 98 | *
|
| 99 | * Noop mode is especially useful when you need to control Popover programmatically, for example show/hide
|
| 100 | * as a result of some third-party action, like HTTP request or validation check:
|
| 101 | *
|
| 102 | * @stacked-example(Manual Control, context-menu/context-menu-noop.component)
|
| 103 | *
|
| 104 | * @stacked-example(Manual Control, context-menu/context-menu-right-click.component)
|
| 105 | * */
|
| 106 | export declare class NbContextMenuDirective implements NbDynamicOverlayController, OnChanges, AfterViewInit, OnDestroy, OnInit {
|
| 107 | private hostRef;
|
| 108 | private menuService;
|
| 109 | private dynamicOverlayHandler;
|
| 110 | contextMenuHost: boolean;
|
| 111 | /**
|
| 112 | * Position will be calculated relatively host element based on the position.
|
| 113 | * Can be top, right, bottom and left.
|
| 114 | * */
|
| 115 | get position(): NbPosition;
|
| 116 | set position(value: NbPosition);
|
| 117 | _position: NbPosition;
|
| 118 | /**
|
| 119 | * Container position will be changes automatically based on this strategy if container can't fit view port.
|
| 120 | * Set this property to any falsy value if you want to disable automatically adjustment.
|
| 121 | * Available values: clockwise, counterclockwise.
|
| 122 | * */
|
| 123 | adjustment: NbAdjustment;
|
| 124 | /**
|
| 125 | * Set NbMenu tag, which helps identify menu when working with NbMenuService.
|
| 126 | * */
|
| 127 | get tag(): string;
|
| 128 | set tag(value: string);
|
| 129 | _tag: string;
|
| 130 | /**
|
| 131 | * Basic menu items, will be passed to the internal NbMenuComponent.
|
| 132 | * */
|
| 133 | get items(): NbMenuItem[];
|
| 134 | set items(items: NbMenuItem[]);
|
| 135 | /**
|
| 136 | * Describes when the container will be shown.
|
| 137 | * Available options: `click`, `hover`, `hint`, `focus` and `noop`
|
| 138 | * */
|
| 139 | trigger: NbTrigger;
|
| 140 | static ngAcceptInputType_trigger: NbTriggerValues;
|
| 141 | get contextMenuClass(): string;
|
| 142 | set contextMenuClass(value: string);
|
| 143 | _contextMenuClass: string;
|
| 144 | protected ref: NbOverlayRef;
|
| 145 | protected container: ComponentRef<any>;
|
| 146 | protected positionStrategy: NbAdjustableConnectedPositionStrategy;
|
| 147 | protected overlayConfig: NbOverlayConfig;
|
| 148 | protected overlayContext: NbContextMenuContext;
|
| 149 | protected destroy$: Subject<void>;
|
| 150 | private _items;
|
| 151 | private dynamicOverlay;
|
| 152 | constructor(hostRef: ElementRef, menuService: NbMenuService, dynamicOverlayHandler: NbDynamicOverlayHandler);
|
| 153 | ngOnInit(): void;
|
| 154 | ngOnChanges(): void;
|
| 155 | ngAfterViewInit(): void;
|
| 156 | rebuild(): void;
|
| 157 | show(): void;
|
| 158 | hide(): void;
|
| 159 | toggle(): void;
|
| 160 | ngOnDestroy(): void;
|
| 161 | protected configureDynamicOverlay(): NbDynamicOverlayHandler;
|
| 162 | private validateItems;
|
| 163 | private subscribeOnItemClick;
|
| 164 | protected updateOverlayContext(): void;
|
| 165 | static ɵfac: i0.ɵɵFactoryDeclaration<NbContextMenuDirective, never>;
|
| 166 | static ɵdir: i0.ɵɵDirectiveDeclaration<NbContextMenuDirective, "[nbContextMenu]", never, { "position": { "alias": "nbContextMenuPlacement"; "required": false; }; "adjustment": { "alias": "nbContextMenuAdjustment"; "required": false; }; "tag": { "alias": "nbContextMenuTag"; "required": false; }; "items": { "alias": "nbContextMenu"; "required": false; }; "trigger": { "alias": "nbContextMenuTrigger"; "required": false; }; "contextMenuClass": { "alias": "nbContextMenuClass"; "required": false; }; }, {}, never, never, false, never>;
|
| 167 | }
|