UNPKG

6.24 kBTypeScriptView Raw
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 */
6import { AfterViewInit, ElementRef, OnChanges, OnDestroy, OnInit, EventEmitter } from '@angular/core';
7import { NbDynamicOverlay, NbDynamicOverlayController } from '../cdk/overlay/dynamic/dynamic-overlay';
8import { NbDynamicOverlayHandler } from '../cdk/overlay/dynamic/dynamic-overlay-handler';
9import { NbAdjustment, NbPosition, NbPositionValues, NbAdjustmentValues } from '../cdk/overlay/overlay-position';
10import { NbOverlayContent } from '../cdk/overlay/overlay-service';
11import { NbTrigger, NbTriggerValues } from '../cdk/overlay/overlay-trigger';
12import { NbOverlayConfig } from '../cdk/overlay/mapping';
13import { NbPopoverComponent } from './popover.component';
14import { 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 * */
99export 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}