@progress/kendo-angular-popup 24.2.2 → 25.0.0-develop.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/progress-kendo-angular-popup.mjs +30 -30
- package/index.d.ts +681 -13
- package/package-metadata.mjs +2 -2
- package/package.json +8 -8
- package/directives.d.ts +0 -23
- package/models/align-element-settings.interface.d.ts +0 -19
- package/models/align.interface.d.ts +0 -28
- package/models/collision.interface.d.ts +0 -18
- package/models/collision.type.d.ts +0 -11
- package/models/margin.interface.d.ts +0 -18
- package/models/offset.interface.d.ts +0 -18
- package/models/popup-animation.interface.d.ts +0 -32
- package/models/popup-ref.d.ts +0 -44
- package/models/popup-settings.d.ts +0 -65
- package/models/position-element-settings.interface.d.ts +0 -21
- package/models/position-mode.d.ts +0 -8
- package/models/position.interface.d.ts +0 -13
- package/package-metadata.d.ts +0 -9
- package/popup.component.d.ts +0 -157
- package/popup.module.d.ts +0 -41
- package/popup.service.d.ts +0 -128
- package/scale.d.ts +0 -13
- package/services/align.service.d.ts +0 -22
- package/services/animation.service.d.ts +0 -25
- package/services/dom.service.d.ts +0 -39
- package/services/position.service.d.ts +0 -19
- package/services/resize.service.d.ts +0 -21
- package/services/scrollable.service.d.ts +0 -27
- package/util.d.ts +0 -53
package/index.d.ts
CHANGED
|
@@ -2,16 +2,684 @@
|
|
|
2
2
|
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
5
|
+
import { AlignStrategy, OffsetPosition, MarginSettings, ElementRect, ScrollInfo, AlignSettings, BoundingRect, PositionSettings, ViewPort, CollisionStrategy } from '@progress/kendo-popup-common';
|
|
6
|
+
import * as i0 from '@angular/core';
|
|
7
|
+
import { ElementRef, ViewContainerRef, TemplateRef, NgZone, OnDestroy, EventEmitter, AfterViewInit, OnInit, OnChanges, Renderer2, ComponentRef, InjectionToken, ApplicationRef, Injector } from '@angular/core';
|
|
8
|
+
import { AnimationBuilder } from '@angular/animations';
|
|
9
|
+
import * as i1 from '@progress/kendo-angular-common';
|
|
10
|
+
import { ResizeSensorComponent } from '@progress/kendo-angular-common';
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Specifies the horizontal and vertical align points for the component.
|
|
14
|
+
*/
|
|
15
|
+
interface Align extends AlignStrategy {
|
|
16
|
+
/**
|
|
17
|
+
* Specifies the horizontal point relative to the anchor or the Popup.
|
|
18
|
+
*
|
|
19
|
+
* The available options are:
|
|
20
|
+
* - `left`—Uses the leftmost point of the `anchor` element.
|
|
21
|
+
* - `center`—Uses the center point of the `anchor` element.
|
|
22
|
+
* - `right`—Uses the rightmost point of the `anchor` element.
|
|
23
|
+
*/
|
|
24
|
+
horizontal: 'left' | 'center' | 'right';
|
|
25
|
+
/**
|
|
26
|
+
* Specifies the vertical point relative to the anchor or the Popup.
|
|
27
|
+
*
|
|
28
|
+
* The available options are:
|
|
29
|
+
* - `top`—Uses the top point of the `anchor` element.
|
|
30
|
+
* - `center`—Uses the center point of the `anchor` element.
|
|
31
|
+
* - `bottom`—Uses the bottom point of the `anchor` element.
|
|
32
|
+
*/
|
|
33
|
+
vertical: 'top' | 'center' | 'bottom';
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
/**
|
|
37
|
+
* Defines the possible collision behavior when the Popup is not fully visible.
|
|
38
|
+
*
|
|
39
|
+
* - `fit`—Moves the Popup horizontally until it is fully displayed in the viewport.
|
|
40
|
+
* - `flip`—Flips the Popup position based on the origin and the position properties.
|
|
41
|
+
*/
|
|
42
|
+
type CollisionType = 'fit' | 'flip';
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* Defines the horizontal and vertical collision behavior for the component.
|
|
46
|
+
*/
|
|
47
|
+
interface Collision {
|
|
48
|
+
/**
|
|
49
|
+
* Sets the horizontal collision behavior for the component.
|
|
50
|
+
*/
|
|
51
|
+
horizontal: CollisionType;
|
|
52
|
+
/**
|
|
53
|
+
* Sets the vertical collision behavior for the component.
|
|
54
|
+
*/
|
|
55
|
+
vertical: CollisionType;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/**
|
|
59
|
+
* Defines the offset position of the Popup.
|
|
60
|
+
*/
|
|
61
|
+
interface Offset extends OffsetPosition {
|
|
62
|
+
/**
|
|
63
|
+
* Sets the top position of the Popup.
|
|
64
|
+
*/
|
|
65
|
+
top: number;
|
|
66
|
+
/**
|
|
67
|
+
* Sets the left position of the Popup.
|
|
68
|
+
*/
|
|
69
|
+
left: number;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/**
|
|
73
|
+
* Defines the horizontal and vertical margin offsets of the component.
|
|
74
|
+
*/
|
|
75
|
+
interface Margin extends MarginSettings {
|
|
76
|
+
/**
|
|
77
|
+
* Sets the horizontal margin value.
|
|
78
|
+
*/
|
|
79
|
+
horizontal: number;
|
|
80
|
+
/**
|
|
81
|
+
* Sets the vertical margin value.
|
|
82
|
+
*/
|
|
83
|
+
vertical: number;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/**
|
|
87
|
+
* Defines all possible values for the `positionMode` property of the Popup.
|
|
88
|
+
*/
|
|
89
|
+
type PositionMode = 'absolute' | 'fixed';
|
|
90
|
+
|
|
91
|
+
/**
|
|
92
|
+
* The animation settings for the Popup component.
|
|
93
|
+
*/
|
|
94
|
+
interface PopupAnimation {
|
|
95
|
+
/**
|
|
96
|
+
* Sets the type of the animation.
|
|
97
|
+
* @default 'slide'
|
|
98
|
+
*/
|
|
99
|
+
type?: AnimationType;
|
|
100
|
+
/**
|
|
101
|
+
* Sets the animation duration in milliseconds.
|
|
102
|
+
* @default 100
|
|
103
|
+
*/
|
|
104
|
+
duration: number;
|
|
105
|
+
/**
|
|
106
|
+
* Sets the animation direction. Applies if the type is `slide` or `expand`.
|
|
107
|
+
* @default 'down'
|
|
108
|
+
*/
|
|
109
|
+
direction: AnimationDirection;
|
|
110
|
+
}
|
|
111
|
+
/**
|
|
112
|
+
* Defines the possible animation types for the Popup.
|
|
113
|
+
*/
|
|
114
|
+
type AnimationType = 'slide' | 'expand' | 'zoom' | 'fade';
|
|
115
|
+
/**
|
|
116
|
+
* Defines the possible animation directions for the Popup.
|
|
117
|
+
*/
|
|
118
|
+
type AnimationDirection = 'down' | 'up' | 'left' | 'right';
|
|
119
|
+
|
|
120
|
+
/**
|
|
121
|
+
* Defines the settings for the Popup when you open it through `PopupService` ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/api/popupservice#open)).
|
|
122
|
+
*/
|
|
123
|
+
interface PopupSettings {
|
|
124
|
+
/**
|
|
125
|
+
* Controls the Popup animation. By default, the open and close animations are enabled ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/animations)).
|
|
126
|
+
*/
|
|
127
|
+
animate?: boolean | PopupAnimation;
|
|
128
|
+
/**
|
|
129
|
+
* Sets the element to use as an anchor. The Popup opens next to this element.
|
|
130
|
+
*/
|
|
131
|
+
anchor?: ElementRef | HTMLElement;
|
|
132
|
+
/**
|
|
133
|
+
* Sets the container to which the Popup appends.
|
|
134
|
+
*/
|
|
135
|
+
appendTo?: ViewContainerRef;
|
|
136
|
+
/**
|
|
137
|
+
* Sets the anchor pivot point ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning)).
|
|
138
|
+
*/
|
|
139
|
+
anchorAlign?: Align;
|
|
140
|
+
/**
|
|
141
|
+
* Sets the content of the Popup.
|
|
142
|
+
*/
|
|
143
|
+
content?: TemplateRef<any> | Function;
|
|
144
|
+
/**
|
|
145
|
+
* Sets the collision behavior of the Popup ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/viewport-boundary-detection)).
|
|
146
|
+
*/
|
|
147
|
+
collision?: Collision;
|
|
148
|
+
/**
|
|
149
|
+
* Sets the margin value in pixels. Adds blank space between the Popup and the anchor.
|
|
150
|
+
*/
|
|
151
|
+
margin?: Margin;
|
|
152
|
+
/**
|
|
153
|
+
* Sets the position mode of the component. By default, the Popup uses fixed positioning. To use absolute positioning, set this option to `absolute`.
|
|
154
|
+
*
|
|
155
|
+
* To support mobile browsers with the zoom option, use the `absolute` positioning of the Popup.
|
|
156
|
+
*/
|
|
157
|
+
positionMode?: PositionMode;
|
|
158
|
+
/**
|
|
159
|
+
* Sets the pivot point of the Popup ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning)).
|
|
160
|
+
*/
|
|
161
|
+
popupAlign?: Align;
|
|
162
|
+
/**
|
|
163
|
+
* Sets a list of CSS classes to add to the internal animated element ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/styling)).
|
|
164
|
+
*
|
|
165
|
+
* > To style the content of the Popup, use this property binding.
|
|
166
|
+
*/
|
|
167
|
+
popupClass?: string | Array<string> | object | Set<string>;
|
|
168
|
+
/**
|
|
169
|
+
* Sets the absolute position of the element ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#aligning-to-absolute-points)).
|
|
170
|
+
* The Popup opens next to this point. The pivot point of the Popup is defined by the `popupAlign` option. The boundary detection uses the window viewport.
|
|
171
|
+
*/
|
|
172
|
+
offset?: Offset;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
/**
|
|
176
|
+
* @hidden
|
|
177
|
+
*/
|
|
178
|
+
interface Position {
|
|
179
|
+
flipped: boolean;
|
|
180
|
+
flip: any;
|
|
181
|
+
offset: OffsetPosition;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
/**
|
|
185
|
+
* @hidden
|
|
186
|
+
*/
|
|
187
|
+
declare class DOMService {
|
|
188
|
+
private _dummy;
|
|
189
|
+
addOffset(current: OffsetPosition, addition: OffsetPosition): OffsetPosition;
|
|
190
|
+
addScroll(rect: ElementRect, scroll: ScrollInfo): ElementRect;
|
|
191
|
+
align(settings: AlignSettings): OffsetPosition;
|
|
192
|
+
boundingOffset(el: HTMLElement): BoundingRect;
|
|
193
|
+
getFontStyles(el: HTMLElement): any;
|
|
194
|
+
getWindow(): Window | null;
|
|
195
|
+
hasOffsetParent(el: ElementRef): boolean;
|
|
196
|
+
offset(el: HTMLElement): ElementRect | null;
|
|
197
|
+
offsetAtPoint(el: ElementRef, currentLocation: OffsetPosition): ElementRect | null;
|
|
198
|
+
nativeElement(el: any): HTMLElement | null;
|
|
199
|
+
position(element: HTMLElement, popup: ElementRef, scale?: number): ElementRect | null;
|
|
200
|
+
removeScroll(rect: ElementRect, scroll: ScrollInfo): ElementRect;
|
|
201
|
+
restrictToView(settings: PositionSettings): Position;
|
|
202
|
+
scrollPosition(el: ElementRef): ScrollInfo;
|
|
203
|
+
scrollableParents(el: HTMLElement): Array<HTMLElement>;
|
|
204
|
+
stackingElementOffset(el: ElementRef): ElementRect;
|
|
205
|
+
stackingElementScroll(el: ElementRef): ScrollInfo;
|
|
206
|
+
getRelativeContextElement(el: ElementRef): HTMLElement;
|
|
207
|
+
useRelativePosition(el: ElementRef): boolean;
|
|
208
|
+
windowViewPort(el: ElementRef): ViewPort;
|
|
209
|
+
zIndex(anchor: HTMLElement, container: ElementRef): number;
|
|
210
|
+
zoomLevel(): number;
|
|
211
|
+
isZoomed(): boolean;
|
|
212
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<DOMService, never>;
|
|
213
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<DOMService>;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
/**
|
|
217
|
+
* @hidden
|
|
218
|
+
*/
|
|
219
|
+
interface AlignElementSettings {
|
|
220
|
+
anchor?: HTMLElement;
|
|
221
|
+
anchorAlign: AlignStrategy;
|
|
222
|
+
element: ElementRef;
|
|
223
|
+
elementAlign: AlignStrategy;
|
|
224
|
+
margin?: MarginSettings;
|
|
225
|
+
offset?: OffsetPosition;
|
|
226
|
+
positionMode?: PositionMode;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
/**
|
|
230
|
+
* @hidden
|
|
231
|
+
*/
|
|
232
|
+
declare class AlignService {
|
|
233
|
+
private _dom;
|
|
234
|
+
private scale;
|
|
235
|
+
constructor(_dom: DOMService, scale?: number);
|
|
236
|
+
alignElement(settings: AlignElementSettings): OffsetPosition;
|
|
237
|
+
private absoluteRect;
|
|
238
|
+
private elementScrollPosition;
|
|
239
|
+
private relativeRect;
|
|
240
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<AlignService, [null, { optional: true; }]>;
|
|
241
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<AlignService>;
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
/**
|
|
245
|
+
* @hidden
|
|
246
|
+
*/
|
|
247
|
+
interface PositionElementSettings {
|
|
248
|
+
anchor?: HTMLElement;
|
|
249
|
+
anchorAlign: AlignStrategy;
|
|
250
|
+
collisions: CollisionStrategy;
|
|
251
|
+
currentLocation: OffsetPosition;
|
|
252
|
+
element: ElementRef;
|
|
253
|
+
elementAlign: AlignStrategy;
|
|
254
|
+
margin: MarginSettings;
|
|
255
|
+
positionMode?: PositionMode;
|
|
256
|
+
viewPort?: ViewPort;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
/**
|
|
260
|
+
* @hidden
|
|
261
|
+
*/
|
|
262
|
+
declare class PositionService {
|
|
263
|
+
private _dom;
|
|
264
|
+
private scale;
|
|
265
|
+
constructor(_dom: DOMService, scale?: number);
|
|
266
|
+
positionElement(settings: PositionElementSettings): Position;
|
|
267
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<PositionService, [null, { optional: true; }]>;
|
|
268
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<PositionService>;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
/**
|
|
272
|
+
* @hidden
|
|
273
|
+
*/
|
|
274
|
+
declare class ResizeService {
|
|
275
|
+
private _dom;
|
|
276
|
+
private _zone;
|
|
277
|
+
private subscription;
|
|
278
|
+
constructor(_dom: DOMService, _zone: NgZone);
|
|
279
|
+
subscribe(callback: () => void): void;
|
|
280
|
+
unsubscribe(): void;
|
|
281
|
+
isUnsubscribed(): boolean;
|
|
282
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ResizeService, never>;
|
|
283
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<ResizeService>;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
/**
|
|
287
|
+
* @hidden
|
|
288
|
+
*/
|
|
289
|
+
declare class ScrollableService {
|
|
290
|
+
private _dom;
|
|
291
|
+
private _zone;
|
|
292
|
+
private element;
|
|
293
|
+
private subscription;
|
|
294
|
+
constructor(_dom: DOMService, _zone: NgZone);
|
|
295
|
+
forElement(element: HTMLElement): ScrollableService;
|
|
296
|
+
subscribe(callback: (visible: boolean) => void): void;
|
|
297
|
+
unsubscribe(): void;
|
|
298
|
+
isVisible(elem: HTMLElement, container: any): boolean;
|
|
299
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ScrollableService, never>;
|
|
300
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<ScrollableService>;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
/**
|
|
304
|
+
* @hidden
|
|
305
|
+
*/
|
|
306
|
+
declare class AnimationService implements OnDestroy {
|
|
307
|
+
private animationBuilder;
|
|
308
|
+
start: EventEmitter<any>;
|
|
309
|
+
end: EventEmitter<any>;
|
|
310
|
+
private flip;
|
|
311
|
+
private player;
|
|
312
|
+
constructor(animationBuilder: AnimationBuilder);
|
|
313
|
+
play(element: any, options: any, flip: any): void;
|
|
314
|
+
ngOnDestroy(): void;
|
|
315
|
+
private playStates;
|
|
316
|
+
private getDirection;
|
|
317
|
+
private stopPlayer;
|
|
318
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<AnimationService, never>;
|
|
319
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<AnimationService>;
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
/**
|
|
323
|
+
* Represents the [Kendo UI Popup component for Angular](https://www.telerik.com/kendo-angular-ui/components/popup).
|
|
324
|
+
*
|
|
325
|
+
* @example
|
|
326
|
+
* ```html
|
|
327
|
+
* <button #anchor (click)="show = !show">Toggle</button>
|
|
328
|
+
* @if (show) {
|
|
329
|
+
* <kendo-popup [anchor]="anchor">
|
|
330
|
+
* <strong>Popup content!</strong>
|
|
331
|
+
* </kendo-popup>
|
|
332
|
+
* }
|
|
333
|
+
* ```
|
|
334
|
+
*/
|
|
335
|
+
declare class PopupComponent implements AfterViewInit, OnInit, OnChanges, OnDestroy {
|
|
336
|
+
container: ElementRef;
|
|
337
|
+
private _alignService;
|
|
338
|
+
domService: DOMService;
|
|
339
|
+
private _positionService;
|
|
340
|
+
private _resizeService;
|
|
341
|
+
private _scrollableService;
|
|
342
|
+
private animationService;
|
|
343
|
+
private _renderer;
|
|
344
|
+
private _zone;
|
|
345
|
+
/**
|
|
346
|
+
* Controls the Popup animation. By default, the opening and closing animations are enabled ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/animations)).
|
|
347
|
+
* @default true
|
|
348
|
+
*/
|
|
349
|
+
animate: boolean | PopupAnimation;
|
|
350
|
+
/**
|
|
351
|
+
* Sets the element to use as an anchor. The Popup opens next to this element. ([See example](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#aligning-to-components)).
|
|
352
|
+
*/
|
|
353
|
+
anchor: ElementRef | HTMLElement;
|
|
354
|
+
/**
|
|
355
|
+
* Sets the anchor pivot point ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#positioning)).
|
|
356
|
+
* @default '{ horizontal: "left", vertical: "bottom" }'
|
|
357
|
+
*/
|
|
358
|
+
anchorAlign: Align;
|
|
359
|
+
/**
|
|
360
|
+
* Sets the collision behavior of the Popup ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/viewport-boundary-detection)).
|
|
361
|
+
* @default '{ horizontal: "fit", vertical: "flip" }'
|
|
362
|
+
*/
|
|
363
|
+
collision: Collision;
|
|
364
|
+
/**
|
|
365
|
+
* Sets the pivot point of the Popup ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#positioning)).
|
|
366
|
+
* @default '{ horizontal: "left", vertical: "top" }'
|
|
367
|
+
*/
|
|
368
|
+
popupAlign: Align;
|
|
369
|
+
/**
|
|
370
|
+
* Controls whether the component copies the `anchor` font styles.
|
|
371
|
+
* @default false
|
|
372
|
+
*/
|
|
373
|
+
copyAnchorStyles: boolean;
|
|
374
|
+
/**
|
|
375
|
+
* Sets a list of CSS classes to add to the internal animated element ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/styling)).
|
|
376
|
+
*
|
|
377
|
+
* > To style the content of the Popup, use this property binding.
|
|
378
|
+
*/
|
|
379
|
+
popupClass: string | Array<string> | object | Set<string>;
|
|
380
|
+
/**
|
|
381
|
+
* Sets the position mode of the component. By default, the Popup uses fixed positioning. To use absolute positioning, set this option to `absolute`.
|
|
382
|
+
*
|
|
383
|
+
* To support mobile browsers with the zoom option, use the `absolute` positioning of the Popup.
|
|
384
|
+
* @default 'fixed'
|
|
385
|
+
*/
|
|
386
|
+
positionMode: PositionMode;
|
|
387
|
+
/**
|
|
388
|
+
* Sets the absolute position of the element ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#aligning-to-absolute-points)).
|
|
389
|
+
* The Popup opens next to this point. The Popup pivot point is defined by the `popupAlign` option. The boundary detection uses the window viewport.
|
|
390
|
+
* @default '{ left: -10000, top: 0 }'
|
|
391
|
+
*/
|
|
392
|
+
offset: Offset;
|
|
393
|
+
/**
|
|
394
|
+
* Sets the margin value in pixels. Adds blank space between the Popup and the anchor ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#adding-a-margin)).
|
|
395
|
+
*/
|
|
396
|
+
margin: Margin;
|
|
397
|
+
/**
|
|
398
|
+
* Fires when the anchor scrolls outside the screen boundaries. ([See example](https://www.telerik.com/kendo-angular-ui/components/popup/closing)).
|
|
399
|
+
*/
|
|
400
|
+
anchorViewportLeave: EventEmitter<any>;
|
|
401
|
+
/**
|
|
402
|
+
* Fires after the component closes.
|
|
403
|
+
*/
|
|
404
|
+
close: EventEmitter<any>;
|
|
405
|
+
/**
|
|
406
|
+
* Fires after the component opens and the opening animation ends.
|
|
407
|
+
*/
|
|
408
|
+
open: EventEmitter<any>;
|
|
409
|
+
/**
|
|
410
|
+
* Fires after the component is opened and the Popup is positioned.
|
|
411
|
+
*/
|
|
412
|
+
positionChange: EventEmitter<any>;
|
|
413
|
+
/**
|
|
414
|
+
* @hidden
|
|
415
|
+
*/
|
|
416
|
+
contentContainer?: ElementRef;
|
|
417
|
+
/**
|
|
418
|
+
* @hidden
|
|
419
|
+
*/
|
|
420
|
+
resizeSensor: ResizeSensorComponent;
|
|
421
|
+
/**
|
|
422
|
+
* @hidden
|
|
423
|
+
*/
|
|
424
|
+
content?: TemplateRef<any>;
|
|
425
|
+
/**
|
|
426
|
+
* @hidden
|
|
427
|
+
*/
|
|
428
|
+
renderDefaultClass: boolean;
|
|
429
|
+
private resolvedPromise;
|
|
430
|
+
private _currentOffset?;
|
|
431
|
+
private animationSubscriptions;
|
|
432
|
+
private repositionSubscription;
|
|
433
|
+
private initialCheck;
|
|
434
|
+
constructor(container: ElementRef, _alignService: AlignService, domService: DOMService, _positionService: PositionService, _resizeService: ResizeService, _scrollableService: ScrollableService, animationService: AnimationService, _renderer: Renderer2, _zone: NgZone);
|
|
435
|
+
ngOnInit(): void;
|
|
436
|
+
ngOnChanges(changes: any): void;
|
|
437
|
+
ngAfterViewInit(): void;
|
|
438
|
+
ngAfterViewChecked(): void;
|
|
439
|
+
ngOnDestroy(): void;
|
|
440
|
+
/**
|
|
441
|
+
* @hidden
|
|
442
|
+
*/
|
|
443
|
+
onResize(): void;
|
|
444
|
+
private onAnimationStart;
|
|
445
|
+
private onAnimationEnd;
|
|
446
|
+
private get currentOffset();
|
|
447
|
+
private set currentOffset(value);
|
|
448
|
+
private setZIndex;
|
|
449
|
+
private reposition;
|
|
450
|
+
private position;
|
|
451
|
+
private onScroll;
|
|
452
|
+
private copyFontStyles;
|
|
453
|
+
private updateFixedClass;
|
|
454
|
+
private setContainerStyle;
|
|
455
|
+
private unsubscribeReposition;
|
|
456
|
+
private get hasCustomOffset();
|
|
457
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<PopupComponent, never>;
|
|
458
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<PopupComponent, "kendo-popup", ["kendo-popup"], { "animate": { "alias": "animate"; "required": false; }; "anchor": { "alias": "anchor"; "required": false; }; "anchorAlign": { "alias": "anchorAlign"; "required": false; }; "collision": { "alias": "collision"; "required": false; }; "popupAlign": { "alias": "popupAlign"; "required": false; }; "copyAnchorStyles": { "alias": "copyAnchorStyles"; "required": false; }; "popupClass": { "alias": "popupClass"; "required": false; }; "positionMode": { "alias": "positionMode"; "required": false; }; "offset": { "alias": "offset"; "required": false; }; "margin": { "alias": "margin"; "required": false; }; }, { "anchorViewportLeave": "anchorViewportLeave"; "close": "close"; "open": "open"; "positionChange": "positionChange"; }, never, ["*"], true, never>;
|
|
459
|
+
}
|
|
460
|
+
|
|
461
|
+
/**
|
|
462
|
+
* Holds references to the object instance of the Popup.
|
|
463
|
+
* Controls Popups opened through `PopupService` ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/api/popupservice#open)).
|
|
464
|
+
*/
|
|
465
|
+
interface PopupRef {
|
|
466
|
+
/**
|
|
467
|
+
* Provides a reference to the Popup instance.
|
|
468
|
+
*/
|
|
469
|
+
popup: ComponentRef<PopupComponent>;
|
|
470
|
+
/**
|
|
471
|
+
* Provides a reference to the HTML element of the Popup.
|
|
472
|
+
*/
|
|
473
|
+
popupElement: HTMLElement;
|
|
474
|
+
/**
|
|
475
|
+
* Provides a reference to the child component of the Popup. Available when the Popup opens with [`content`](https://www.telerik.com/kendo-angular-ui/components/popup/service#using-components).
|
|
476
|
+
*/
|
|
477
|
+
content: ComponentRef<any>;
|
|
478
|
+
/**
|
|
479
|
+
* Closes and destroys the Popup.
|
|
480
|
+
*/
|
|
481
|
+
close: Function;
|
|
482
|
+
/**
|
|
483
|
+
* Fires when the anchor scrolls outside the screen boundaries ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/closing)).
|
|
484
|
+
*/
|
|
485
|
+
popupAnchorViewportLeave: EventEmitter<any>;
|
|
486
|
+
/**
|
|
487
|
+
* Fires after the component closes.
|
|
488
|
+
*/
|
|
489
|
+
popupClose: EventEmitter<any>;
|
|
490
|
+
/**
|
|
491
|
+
* Fires after the component opens and the opening animation ends.
|
|
492
|
+
*/
|
|
493
|
+
popupOpen: EventEmitter<any>;
|
|
494
|
+
/**
|
|
495
|
+
* Fires after the component opens and the Popup is positioned.
|
|
496
|
+
*/
|
|
497
|
+
popupPositionChange: EventEmitter<any>;
|
|
498
|
+
}
|
|
499
|
+
|
|
500
|
+
/**
|
|
501
|
+
* Injects the Popup container. If not set, uses the first root component of the application ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/rendering-container)).
|
|
502
|
+
*
|
|
503
|
+
* > Use `POPUP_CONTAINER` only with the `PopupService` class ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/service)).
|
|
504
|
+
*
|
|
505
|
+
* In standalone components:
|
|
506
|
+
*
|
|
507
|
+
* @example
|
|
508
|
+
* ```ts
|
|
509
|
+
* import { Component } from '@angular/core';
|
|
510
|
+
* import { KENDO_POPUP, PopupService } from '@progress/kendo-angular-popup';
|
|
511
|
+
*
|
|
512
|
+
* @Component({
|
|
513
|
+
* standalone: true,
|
|
514
|
+
* imports: [KENDO_POPUP],
|
|
515
|
+
* providers: [PopupService, {
|
|
516
|
+
* provide: POPUP_CONTAINER,
|
|
517
|
+
* useFactory: () => {
|
|
518
|
+
* //return the container ElementRef, where the popup will be injected
|
|
519
|
+
* return { nativeElement: document.body } as ElementRef;
|
|
520
|
+
* }
|
|
521
|
+
* }],
|
|
522
|
+
* selector: 'app-root',
|
|
523
|
+
* templateUrl: './app.component.html',
|
|
524
|
+
* })
|
|
525
|
+
* export class AppComponent {}
|
|
526
|
+
* ```
|
|
527
|
+
*
|
|
528
|
+
* In NgModule-based applications:
|
|
529
|
+
*
|
|
530
|
+
* @example
|
|
531
|
+
* ```ts
|
|
532
|
+
* import { PopupModule, POPUP_CONTAINER } from '@progress/kendo-angular-popup';
|
|
533
|
+
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
|
534
|
+
* import { ElementRef, NgModule } from '@angular/core';
|
|
535
|
+
* import { AppComponent } from './app.component';
|
|
536
|
+
*
|
|
537
|
+
* _@NgModule({
|
|
538
|
+
* declarations: [AppComponent],
|
|
539
|
+
* imports: [BrowserModule, PopupModule],
|
|
540
|
+
* bootstrap: [AppComponent],
|
|
541
|
+
* providers: [{
|
|
542
|
+
* provide: POPUP_CONTAINER,
|
|
543
|
+
* useFactory: () => {
|
|
544
|
+
* //return the container ElementRef, where the popup will be injected
|
|
545
|
+
* return { nativeElement: document.body } as ElementRef;
|
|
546
|
+
* }
|
|
547
|
+
* }]
|
|
548
|
+
* })
|
|
549
|
+
* export class AppModule {}
|
|
550
|
+
*
|
|
551
|
+
* platformBrowserDynamic().bootstrapModule(AppModule);
|
|
552
|
+
* ```
|
|
553
|
+
*/
|
|
554
|
+
declare const POPUP_CONTAINER: InjectionToken<ElementRef<any>>;
|
|
555
|
+
/**
|
|
556
|
+
* Provides a service for opening Popup components dynamically ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/angular-service)).
|
|
557
|
+
*
|
|
558
|
+
* @export
|
|
559
|
+
* @class PopupService
|
|
560
|
+
*/
|
|
561
|
+
declare class PopupService {
|
|
562
|
+
private applicationRef;
|
|
563
|
+
private injector;
|
|
564
|
+
private container;
|
|
565
|
+
/**
|
|
566
|
+
* Gets the root view container for injecting the component.
|
|
567
|
+
*
|
|
568
|
+
* @returns {ComponentRef<any>} The root view container reference.
|
|
569
|
+
*/
|
|
570
|
+
private get rootViewContainer();
|
|
571
|
+
/**
|
|
572
|
+
* Gets the HTML element of the root component container.
|
|
573
|
+
*
|
|
574
|
+
* @returns {HTMLElement} The root container HTML element.
|
|
575
|
+
*/
|
|
576
|
+
get rootViewContainerNode(): HTMLElement;
|
|
577
|
+
constructor(applicationRef: ApplicationRef, injector: Injector, container: ElementRef);
|
|
578
|
+
/**
|
|
579
|
+
* Opens a Popup component. The Popup mounts in the DOM under the root application component.
|
|
580
|
+
*
|
|
581
|
+
* @param {PopupSettings} options - The options for the Popup.
|
|
582
|
+
* @returns {ComponentRef<PopupComponent>} A reference to the Popup object.
|
|
583
|
+
*/
|
|
584
|
+
open(options?: PopupSettings): PopupRef;
|
|
585
|
+
private appendPopup;
|
|
586
|
+
/**
|
|
587
|
+
* Gets the HTML element for a component reference.
|
|
588
|
+
*
|
|
589
|
+
* @param {ComponentRef<any>} componentRef The component reference.
|
|
590
|
+
* @returns {HTMLElement} The root HTML element of the component.
|
|
591
|
+
*/
|
|
592
|
+
private getComponentRootNode;
|
|
593
|
+
/**
|
|
594
|
+
* Creates a component reference from a `Component` class.
|
|
595
|
+
*
|
|
596
|
+
* @param {*} componentClass The component class.
|
|
597
|
+
* @param {*} nodes The nodes to project.
|
|
598
|
+
* @param {ViewContainerRef} container The container to use.
|
|
599
|
+
* @returns {ComponentRef<any>} The created component reference.
|
|
600
|
+
*/
|
|
601
|
+
private createComponent;
|
|
602
|
+
/**
|
|
603
|
+
* Projects the input options onto the component instance.
|
|
604
|
+
*
|
|
605
|
+
* @param {ComponentRef<any>} component The component reference.
|
|
606
|
+
* @param {*} options The options to project.
|
|
607
|
+
* @returns {ComponentRef<any>} The updated component reference.
|
|
608
|
+
*/
|
|
609
|
+
private projectComponentInputs;
|
|
610
|
+
/**
|
|
611
|
+
* Gets the component and nodes to append from the `content` option.
|
|
612
|
+
*
|
|
613
|
+
* @param {*} content The content to use.
|
|
614
|
+
* @returns {any} The component and nodes for projection.
|
|
615
|
+
*/
|
|
616
|
+
private contentFrom;
|
|
617
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<PopupService, [null, null, { optional: true; }]>;
|
|
618
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<PopupService>;
|
|
619
|
+
}
|
|
620
|
+
|
|
621
|
+
/**
|
|
622
|
+
* Required for adding all Popup features in NgModule-based Angular applications.
|
|
623
|
+
*
|
|
624
|
+
* @example
|
|
625
|
+
* ```ts-no-run
|
|
626
|
+
* // Import the Popup module
|
|
627
|
+
* import { PopupModule } from '@progress/kendo-angular-popup';
|
|
628
|
+
*
|
|
629
|
+
* // The browser platform with a compiler
|
|
630
|
+
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
|
631
|
+
*
|
|
632
|
+
* import { NgModule } from '@angular/core';
|
|
633
|
+
*
|
|
634
|
+
* // Import the app component
|
|
635
|
+
* import { AppComponent } from './app.component';
|
|
636
|
+
*
|
|
637
|
+
* // Define the app module
|
|
638
|
+
* _@NgModule({
|
|
639
|
+
* declarations: [AppComponent], // declare app component
|
|
640
|
+
* imports: [BrowserModule, PopupModule], // import Popup module
|
|
641
|
+
* bootstrap: [AppComponent]
|
|
642
|
+
* })
|
|
643
|
+
* export class AppModule {}
|
|
644
|
+
*
|
|
645
|
+
* // Compile and launch the module
|
|
646
|
+
* platformBrowserDynamic().bootstrapModule(AppModule);
|
|
647
|
+
*
|
|
648
|
+
* ```
|
|
649
|
+
*/
|
|
650
|
+
declare class PopupModule {
|
|
651
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<PopupModule, never>;
|
|
652
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<PopupModule, never, [typeof i1.ResizeSensorComponent, typeof PopupComponent], [typeof PopupComponent]>;
|
|
653
|
+
static ɵinj: i0.ɵɵInjectorDeclaration<PopupModule>;
|
|
654
|
+
}
|
|
655
|
+
|
|
656
|
+
/**
|
|
657
|
+
* Use the `SCALE` injection token to set the document scale when you use a [scale transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale).
|
|
658
|
+
*
|
|
659
|
+
* The document or container scale is required to compute the popup position correctly. Set the value for `SCALE` to ensure correct positioning. See [Support for Document Scale](https://www.telerik.com/kendo-angular-ui/components/popup/document-scale).
|
|
660
|
+
*
|
|
661
|
+
* > You do not need to use this token for user-applied browser zoom.
|
|
662
|
+
*/
|
|
663
|
+
declare const SCALE: InjectionToken<number>;
|
|
664
|
+
|
|
665
|
+
/**
|
|
666
|
+
* Use this utility array to access all `@progress/kendo-angular-popup`-related components and directives in a standalone Angular component.
|
|
667
|
+
*
|
|
668
|
+
* @example
|
|
669
|
+
* ```typescript
|
|
670
|
+
* import { Component } from '@angular/core';
|
|
671
|
+
* import { KENDO_POPUP } from '@progress/kendo-angular-popup';
|
|
672
|
+
*
|
|
673
|
+
* @Component({
|
|
674
|
+
* selector: 'my-app',
|
|
675
|
+
* standalone: true,
|
|
676
|
+
* imports: [KENDO_POPUP],
|
|
677
|
+
* template: `<kendo-popup>Popup content.</kendo-popup>`
|
|
678
|
+
* })
|
|
679
|
+
* export class AppComponent {}
|
|
680
|
+
* ```
|
|
681
|
+
*/
|
|
682
|
+
declare const KENDO_POPUP: readonly [typeof PopupComponent];
|
|
683
|
+
|
|
684
|
+
export { KENDO_POPUP, POPUP_CONTAINER, PopupComponent, PopupModule, PopupService, SCALE };
|
|
685
|
+
export type { Align, AnimationDirection, AnimationType, Collision, Margin, Offset, PopupAnimation, PopupRef, PopupSettings, PositionMode };
|