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, ElementRef, OnChanges, OnDestroy, OnInit, EventEmitter } from '@angular/core';
|
7 | import { NbDynamicOverlay, NbDynamicOverlayController } from '../cdk/overlay/dynamic/dynamic-overlay';
|
8 | import { NbDynamicOverlayHandler } from '../cdk/overlay/dynamic/dynamic-overlay-handler';
|
9 | import { NbAdjustment, NbPosition, NbPositionValues, NbAdjustmentValues } from '../cdk/overlay/overlay-position';
|
10 | import { NbOverlayContent } from '../cdk/overlay/overlay-service';
|
11 | import { NbTrigger, NbTriggerValues } from '../cdk/overlay/overlay-trigger';
|
12 | import { NbOverlayConfig } from '../cdk/overlay/mapping';
|
13 | import { NbPopoverComponent } from './popover.component';
|
14 | import { Subject } from 'rxjs';
|
15 | /**
|
16 | * Powerful popover directive, which provides the best UX for your users.
|
17 | *
|
18 | * @stacked-example(Showcase, popover/popover-showcase.component)
|
19 | *
|
20 | * Popover can accept different content such as:
|
21 | * TemplateRef
|
22 | *
|
23 | * ```html
|
24 | * <button [nbPopover]="templateRef"></button>
|
25 | * <ng-template #templateRef>
|
26 | * <span>Hello, Popover!</span>
|
27 | * </ng-template>
|
28 | * ```
|
29 | * ### Installation
|
30 | *
|
31 | * Import `NbPopoverModule` to your feature module.
|
32 | * ```ts
|
33 | * @NgModule({
|
34 | * imports: [
|
35 | * // ...
|
36 | * NbPopoverModule,
|
37 | * ],
|
38 | * })
|
39 | * export class PageModule { }
|
40 | * ```
|
41 | * ### Usage
|
42 | *
|
43 | * Custom components
|
44 | *
|
45 | * ```html
|
46 | * <button [nbPopover]="MyPopoverComponent"></button>
|
47 | * ```
|
48 | *
|
49 | * Both custom components and templateRef popovers can receive *contentContext* property
|
50 | * that will be passed to the content props.
|
51 | *
|
52 | * Primitive types
|
53 | *
|
54 | * ```html
|
55 | * <button nbPopover="Hello, Popover!"></button>
|
56 | * ```
|
57 | *
|
58 | * Popover has different placements, such as: top, bottom, left, right, start and end
|
59 | * which can be used as following:
|
60 | *
|
61 | * @stacked-example(Placements, popover/popover-placements.component)
|
62 | *
|
63 | * By default popover will try to adjust itself to maximally fit viewport
|
64 | * and provide the best user experience. It will try to change position of the popover container.
|
65 | * If you want to disable this behaviour set it `noop`.
|
66 | *
|
67 | * ```html
|
68 | * <button nbPopover="Hello, Popover!" nbPopoverAdjustment="noop"></button>
|
69 | * ```
|
70 | *
|
71 | * Popover has a number of triggers which provides an ability to show and hide the component in different ways:
|
72 | *
|
73 | * - Click mode shows the component when a user clicks on the host element and hides when the user clicks
|
74 | * somewhere on the document outside the component.
|
75 | * - Hint provides capability to show the component when the user hovers over the host element
|
76 | * and hide when the user hovers out of the host.
|
77 | * - Hover works like hint mode with one exception - when the user moves mouse from host element to
|
78 | * the container element the component remains open, so that it is possible to interact with it content.
|
79 | * - Focus mode is applied when user focuses the element.
|
80 | * - Noop mode - the component won't react to the user interaction.
|
81 | *
|
82 | * @stacked-example(Available Triggers, popover/popover-modes.component.html)
|
83 | *
|
84 | * Noop mode is especially useful when you need to control Popover programmatically, for example show/hide
|
85 | * as a result of some third-party action, like HTTP request or validation check:
|
86 | *
|
87 | * @stacked-example(Manual Control, popover/popover-noop.component)
|
88 | *
|
89 | * Below are examples for manual popover settings control, both via template binding and code.
|
90 | * @stacked-example(Popover Settings, popover/popover-dynamic.component)
|
91 | *
|
92 | * Please note, while manipulating Popover setting via code, you need to call `rebuild()` method to apply the settings
|
93 | * changed.
|
94 | * @stacked-example(Popover Settings Code, popover/popover-dynamic-code.component)
|
95 | *
|
96 | * @additional-example(Template Ref, popover/popover-template-ref.component)
|
97 | * @additional-example(Custom Component, popover/popover-custom-component.component)
|
98 | * */
|
99 | export declare class NbPopoverDirective implements NbDynamicOverlayController, OnChanges, AfterViewInit, OnDestroy, OnInit {
|
100 | protected hostRef: ElementRef;
|
101 | protected dynamicOverlayHandler: NbDynamicOverlayHandler;
|
102 | protected popoverComponent: typeof NbPopoverComponent;
|
103 | protected dynamicOverlay: NbDynamicOverlay;
|
104 | protected destroy$: Subject<void>;
|
105 | /**
|
106 | * Popover content which will be rendered in NbArrowedOverlayContainerComponent.
|
107 | * Available content: template ref, component and any primitive.
|
108 | * */
|
109 | content: NbOverlayContent;
|
110 | /**
|
111 | * Container content context. Will be applied to the rendered component.
|
112 | * */
|
113 | context: Object;
|
114 | /**
|
115 | * Position will be calculated relatively host element based on the position.
|
116 | * Can be top, right, bottom, left, start or end.
|
117 | * */
|
118 | position: NbPosition;
|
119 | static ngAcceptInputType_position: NbPositionValues;
|
120 | /**
|
121 | * Container position will be changes automatically based on this strategy if container can't fit view port.
|
122 | * Set this property to `noop` value if you want to disable automatically adjustment.
|
123 | * Available values: `clockwise` (default), `counterclockwise`, `vertical`, `horizontal`, `noop`.
|
124 | * */
|
125 | get adjustment(): NbAdjustment;
|
126 | set adjustment(value: NbAdjustment);
|
127 | protected _adjustment: NbAdjustment;
|
128 | static ngAcceptInputType_adjustment: NbAdjustmentValues;
|
129 | /**
|
130 | * Describes when the container will be shown.
|
131 | * Available options: `click`, `hover`, `hint`, `focus` and `noop`
|
132 | * */
|
133 | trigger: NbTrigger;
|
134 | static ngAcceptInputType_trigger: NbTriggerValues;
|
135 | /**
|
136 | * Sets popover offset
|
137 | * */
|
138 | offset: number;
|
139 | get popoverClass(): string;
|
140 | set popoverClass(value: string);
|
141 | _popoverClass: string;
|
142 | nbPopoverShowStateChange: EventEmitter<{
|
143 | isShown: boolean;
|
144 | }>;
|
145 | protected overlayConfig: NbOverlayConfig;
|
146 | get isShown(): boolean;
|
147 | constructor(hostRef: ElementRef, dynamicOverlayHandler: NbDynamicOverlayHandler);
|
148 | ngOnInit(): void;
|
149 | ngOnChanges(): void;
|
150 | ngAfterViewInit(): void;
|
151 | rebuild(): void;
|
152 | show(): void;
|
153 | hide(): void;
|
154 | toggle(): void;
|
155 | ngOnDestroy(): void;
|
156 | protected configureDynamicOverlay(): NbDynamicOverlayHandler;
|
157 | }
|