UNPKG

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