@progress/kendo-angular-popup 21.4.1 → 22.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 +32 -32
- package/package.json +8 -16
- package/esm2022/directives.mjs +0 -25
- package/esm2022/index.mjs +0 -9
- package/esm2022/models/align-element-settings.interface.mjs +0 -5
- package/esm2022/models/align.interface.mjs +0 -5
- package/esm2022/models/collision.interface.mjs +0 -5
- package/esm2022/models/collision.type.mjs +0 -5
- package/esm2022/models/margin.interface.mjs +0 -5
- package/esm2022/models/offset.interface.mjs +0 -5
- package/esm2022/models/popup-animation.interface.mjs +0 -5
- package/esm2022/models/popup-ref.mjs +0 -5
- package/esm2022/models/popup-settings.mjs +0 -5
- package/esm2022/models/position-element-settings.interface.mjs +0 -5
- package/esm2022/models/position-mode.mjs +0 -8
- package/esm2022/models/position.interface.mjs +0 -5
- package/esm2022/package-metadata.mjs +0 -16
- package/esm2022/popup.component.mjs +0 -370
- package/esm2022/popup.module.mjs +0 -54
- package/esm2022/popup.service.mjs +0 -241
- package/esm2022/progress-kendo-angular-popup.mjs +0 -8
- package/esm2022/scale.mjs +0 -13
- package/esm2022/services/align.service.mjs +0 -69
- package/esm2022/services/animation.service.mjs +0 -138
- package/esm2022/services/dom.service.mjs +0 -155
- package/esm2022/services/position.service.mjs +0 -58
- package/esm2022/services/resize.service.mjs +0 -48
- package/esm2022/services/scrollable.service.mjs +0 -81
- package/esm2022/util.mjs +0 -163
|
@@ -1,370 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { Component, ElementRef, EventEmitter, Input, Output, NgZone, Renderer2, ViewChild } from '@angular/core';
|
|
6
|
-
import { AlignService } from './services/align.service';
|
|
7
|
-
import { DOMService } from './services/dom.service';
|
|
8
|
-
import { PositionService } from './services/position.service';
|
|
9
|
-
import { ResizeService } from './services/resize.service';
|
|
10
|
-
import { ScrollableService } from './services/scrollable.service';
|
|
11
|
-
import { AnimationService } from './services/animation.service';
|
|
12
|
-
import { isDifferentOffset } from './util';
|
|
13
|
-
import { hasObservers, isDocumentAvailable, ResizeSensorComponent } from '@progress/kendo-angular-common';
|
|
14
|
-
import { from } from 'rxjs';
|
|
15
|
-
import { validatePackage } from '@progress/kendo-licensing';
|
|
16
|
-
import { packageMetadata } from './package-metadata';
|
|
17
|
-
import { NgClass, NgTemplateOutlet } from '@angular/common';
|
|
18
|
-
import * as i0 from "@angular/core";
|
|
19
|
-
import * as i1 from "./services/align.service";
|
|
20
|
-
import * as i2 from "./services/dom.service";
|
|
21
|
-
import * as i3 from "./services/position.service";
|
|
22
|
-
import * as i4 from "./services/resize.service";
|
|
23
|
-
import * as i5 from "./services/scrollable.service";
|
|
24
|
-
import * as i6 from "./services/animation.service";
|
|
25
|
-
const DEFAULT_OFFSET = { left: -10000, top: 0 };
|
|
26
|
-
const ANIMATION_CONTAINER = 'k-animation-container';
|
|
27
|
-
const ANIMATION_CONTAINER_FIXED = 'k-animation-container-fixed';
|
|
28
|
-
/**
|
|
29
|
-
* Represents the [Kendo UI Popup component for Angular]({% slug overview_popup %}).
|
|
30
|
-
*
|
|
31
|
-
* @example
|
|
32
|
-
* ```html
|
|
33
|
-
* <button #anchor (click)="show = !show">Toggle</button>
|
|
34
|
-
* @if (show) {
|
|
35
|
-
* <kendo-popup [anchor]="anchor">
|
|
36
|
-
* <strong>Popup content!</strong>
|
|
37
|
-
* </kendo-popup>
|
|
38
|
-
* }
|
|
39
|
-
* ```
|
|
40
|
-
*/
|
|
41
|
-
export class PopupComponent {
|
|
42
|
-
container;
|
|
43
|
-
_alignService;
|
|
44
|
-
domService;
|
|
45
|
-
_positionService;
|
|
46
|
-
_resizeService;
|
|
47
|
-
_scrollableService;
|
|
48
|
-
animationService;
|
|
49
|
-
_renderer;
|
|
50
|
-
_zone;
|
|
51
|
-
/**
|
|
52
|
-
* Controls the Popup animation. By default, the opening and closing animations are enabled ([see example]({% slug animations_popup %})).
|
|
53
|
-
* @default true
|
|
54
|
-
*/
|
|
55
|
-
animate = true;
|
|
56
|
-
/**
|
|
57
|
-
* Sets the element to use as an anchor. The Popup opens next to this element. ([See example]({% slug alignmentpositioning_popup %}#toc-aligning-to-components)).
|
|
58
|
-
*/
|
|
59
|
-
anchor;
|
|
60
|
-
/**
|
|
61
|
-
* Sets the anchor pivot point ([see example]({% slug alignmentpositioning_popup %}#toc-positioning)).
|
|
62
|
-
* @default '{ horizontal: "left", vertical: "bottom" }'
|
|
63
|
-
*/
|
|
64
|
-
anchorAlign = { horizontal: 'left', vertical: 'bottom' };
|
|
65
|
-
/**
|
|
66
|
-
* Sets the collision behavior of the Popup ([see example]({% slug viewportboundarydetection_popup %})).
|
|
67
|
-
* @default '{ horizontal: "fit", vertical: "flip" }'
|
|
68
|
-
*/
|
|
69
|
-
collision = { horizontal: 'fit', vertical: 'flip' };
|
|
70
|
-
/**
|
|
71
|
-
* Sets the pivot point of the Popup ([see example]({% slug alignmentpositioning_popup %}#toc-positioning)).
|
|
72
|
-
* @default '{ horizontal: "left", vertical: "top" }'
|
|
73
|
-
*/
|
|
74
|
-
popupAlign = { horizontal: 'left', vertical: 'top' };
|
|
75
|
-
/**
|
|
76
|
-
* Controls whether the component copies the `anchor` font styles.
|
|
77
|
-
* @default false
|
|
78
|
-
*/
|
|
79
|
-
copyAnchorStyles = false;
|
|
80
|
-
/**
|
|
81
|
-
* Sets a list of CSS classes to add to the internal animated element ([see example]({% slug appearance_popup %})).
|
|
82
|
-
*
|
|
83
|
-
* > To style the content of the Popup, use this property binding.
|
|
84
|
-
*/
|
|
85
|
-
popupClass;
|
|
86
|
-
/**
|
|
87
|
-
* Sets the position mode of the component. By default, the Popup uses fixed positioning. To use absolute positioning, set this option to `absolute`.
|
|
88
|
-
*
|
|
89
|
-
* To support mobile browsers with the zoom option, use the `absolute` positioning of the Popup.
|
|
90
|
-
* @default 'fixed'
|
|
91
|
-
*/
|
|
92
|
-
positionMode = 'fixed';
|
|
93
|
-
/**
|
|
94
|
-
* Sets the absolute position of the element ([see example]({% slug alignmentpositioning_popup %}#toc-aligning-to-absolute-points)).
|
|
95
|
-
* The Popup opens next to this point. The Popup pivot point is defined by the `popupAlign` option. The boundary detection uses the window viewport.
|
|
96
|
-
* @default '{ left: -10000, top: 0 }'
|
|
97
|
-
*/
|
|
98
|
-
offset = DEFAULT_OFFSET;
|
|
99
|
-
/**
|
|
100
|
-
* Sets the margin value in pixels. Adds blank space between the Popup and the anchor ([see example]({% slug alignmentpositioning_popup %}#toc-adding-a-margin)).
|
|
101
|
-
*/
|
|
102
|
-
margin;
|
|
103
|
-
/**
|
|
104
|
-
* Fires when the anchor scrolls outside the screen boundaries. ([See example]({% slug closing_popup %}#toc-after-leaving-the-viewport)).
|
|
105
|
-
*/
|
|
106
|
-
anchorViewportLeave = new EventEmitter();
|
|
107
|
-
/**
|
|
108
|
-
* Fires after the component closes.
|
|
109
|
-
*/
|
|
110
|
-
close = new EventEmitter();
|
|
111
|
-
/**
|
|
112
|
-
* Fires after the component opens and the opening animation ends.
|
|
113
|
-
*/
|
|
114
|
-
open = new EventEmitter();
|
|
115
|
-
/**
|
|
116
|
-
* Fires after the component is opened and the Popup is positioned.
|
|
117
|
-
*/
|
|
118
|
-
positionChange = new EventEmitter();
|
|
119
|
-
/**
|
|
120
|
-
* @hidden
|
|
121
|
-
*/
|
|
122
|
-
contentContainer;
|
|
123
|
-
/**
|
|
124
|
-
* @hidden
|
|
125
|
-
*/
|
|
126
|
-
resizeSensor;
|
|
127
|
-
/**
|
|
128
|
-
* @hidden
|
|
129
|
-
*/
|
|
130
|
-
content;
|
|
131
|
-
/**
|
|
132
|
-
* @hidden
|
|
133
|
-
*/
|
|
134
|
-
renderDefaultClass = true;
|
|
135
|
-
resolvedPromise = Promise.resolve(null);
|
|
136
|
-
_currentOffset;
|
|
137
|
-
animationSubscriptions;
|
|
138
|
-
repositionSubscription;
|
|
139
|
-
initialCheck = true;
|
|
140
|
-
constructor(container, _alignService, domService, _positionService, _resizeService, _scrollableService, animationService, _renderer, _zone) {
|
|
141
|
-
this.container = container;
|
|
142
|
-
this._alignService = _alignService;
|
|
143
|
-
this.domService = domService;
|
|
144
|
-
this._positionService = _positionService;
|
|
145
|
-
this._resizeService = _resizeService;
|
|
146
|
-
this._scrollableService = _scrollableService;
|
|
147
|
-
this.animationService = animationService;
|
|
148
|
-
this._renderer = _renderer;
|
|
149
|
-
this._zone = _zone;
|
|
150
|
-
validatePackage(packageMetadata);
|
|
151
|
-
this._renderer.addClass(container.nativeElement, ANIMATION_CONTAINER);
|
|
152
|
-
this.updateFixedClass();
|
|
153
|
-
}
|
|
154
|
-
ngOnInit() {
|
|
155
|
-
this.reposition = this.reposition.bind(this);
|
|
156
|
-
this._resizeService.subscribe(this.reposition);
|
|
157
|
-
this.animationSubscriptions = this.animationService.start.subscribe(this.onAnimationStart.bind(this));
|
|
158
|
-
this.animationSubscriptions.add(this.animationService.end.subscribe(this.onAnimationEnd.bind(this)));
|
|
159
|
-
this._scrollableService.forElement(this.domService.nativeElement(this.anchor) || this.container.nativeElement).subscribe(this.onScroll.bind(this));
|
|
160
|
-
this.currentOffset = DEFAULT_OFFSET;
|
|
161
|
-
// we intentionally set the zIndex here as an exception to the rule that it should come from the themes
|
|
162
|
-
// to be removed once https://github.com/telerik/kendo-angular-private/issues/5413 is addressed
|
|
163
|
-
this.setZIndex();
|
|
164
|
-
this.copyFontStyles();
|
|
165
|
-
this.updateFixedClass();
|
|
166
|
-
this.reposition();
|
|
167
|
-
}
|
|
168
|
-
ngOnChanges(changes) {
|
|
169
|
-
if (changes.copyAnchorStyles) {
|
|
170
|
-
this.copyFontStyles();
|
|
171
|
-
}
|
|
172
|
-
if (changes.positionMode) {
|
|
173
|
-
this.updateFixedClass();
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
ngAfterViewInit() {
|
|
177
|
-
if (!this.animate) {
|
|
178
|
-
this.resolvedPromise.then(() => {
|
|
179
|
-
this.onAnimationEnd();
|
|
180
|
-
});
|
|
181
|
-
}
|
|
182
|
-
this.reposition();
|
|
183
|
-
}
|
|
184
|
-
ngAfterViewChecked() {
|
|
185
|
-
if (this.initialCheck) {
|
|
186
|
-
this.initialCheck = false;
|
|
187
|
-
return;
|
|
188
|
-
}
|
|
189
|
-
this._zone.runOutsideAngular(() => {
|
|
190
|
-
// workarounds https://github.com/angular/angular/issues/19094
|
|
191
|
-
// uses promise because it is executed synchronously after the content is updated
|
|
192
|
-
// does not use onStable in case the current zone is not the angular one.
|
|
193
|
-
this.unsubscribeReposition();
|
|
194
|
-
this.repositionSubscription = from(this.resolvedPromise)
|
|
195
|
-
.subscribe(this.reposition);
|
|
196
|
-
});
|
|
197
|
-
}
|
|
198
|
-
ngOnDestroy() {
|
|
199
|
-
this.anchorViewportLeave.complete();
|
|
200
|
-
this.positionChange.complete();
|
|
201
|
-
this.close.emit();
|
|
202
|
-
this.close.complete();
|
|
203
|
-
this._resizeService.unsubscribe();
|
|
204
|
-
this._scrollableService.unsubscribe();
|
|
205
|
-
this.animationSubscriptions.unsubscribe();
|
|
206
|
-
this.unsubscribeReposition();
|
|
207
|
-
}
|
|
208
|
-
/**
|
|
209
|
-
* @hidden
|
|
210
|
-
*/
|
|
211
|
-
onResize() {
|
|
212
|
-
this.reposition();
|
|
213
|
-
}
|
|
214
|
-
onAnimationStart() {
|
|
215
|
-
this._renderer.removeClass(this.container.nativeElement, 'k-animation-container-shown');
|
|
216
|
-
}
|
|
217
|
-
onAnimationEnd() {
|
|
218
|
-
this._renderer.addClass(this.container.nativeElement, 'k-animation-container-shown');
|
|
219
|
-
this.open.emit();
|
|
220
|
-
this.open.complete();
|
|
221
|
-
}
|
|
222
|
-
get currentOffset() {
|
|
223
|
-
return this._currentOffset;
|
|
224
|
-
}
|
|
225
|
-
set currentOffset(offset) {
|
|
226
|
-
this.setContainerStyle('left', `${offset.left}px`);
|
|
227
|
-
this.setContainerStyle('top', `${offset.top}px`);
|
|
228
|
-
this._currentOffset = offset;
|
|
229
|
-
}
|
|
230
|
-
setZIndex() {
|
|
231
|
-
if (this.anchor) {
|
|
232
|
-
this.setContainerStyle('z-index', String(this.domService.zIndex(this.domService.nativeElement(this.anchor), this.container)));
|
|
233
|
-
}
|
|
234
|
-
}
|
|
235
|
-
reposition() {
|
|
236
|
-
if (!isDocumentAvailable()) {
|
|
237
|
-
return;
|
|
238
|
-
}
|
|
239
|
-
const { flip, offset } = this.position();
|
|
240
|
-
if (!this.currentOffset || isDifferentOffset(this.currentOffset, offset)) {
|
|
241
|
-
this.currentOffset = offset;
|
|
242
|
-
if (hasObservers(this.positionChange)) {
|
|
243
|
-
this._zone.run(() => this.positionChange.emit({ offset, flip }));
|
|
244
|
-
}
|
|
245
|
-
}
|
|
246
|
-
if (this.animate) {
|
|
247
|
-
this.animationService.play(this.contentContainer.nativeElement, this.animate, flip);
|
|
248
|
-
}
|
|
249
|
-
this.resizeSensor.acceptSize();
|
|
250
|
-
}
|
|
251
|
-
position() {
|
|
252
|
-
const alignedOffset = this._alignService.alignElement({
|
|
253
|
-
anchor: this.domService.nativeElement(this.anchor),
|
|
254
|
-
anchorAlign: this.anchorAlign,
|
|
255
|
-
element: this.container,
|
|
256
|
-
elementAlign: this.popupAlign,
|
|
257
|
-
margin: this.margin,
|
|
258
|
-
offset: this.offset,
|
|
259
|
-
positionMode: this.positionMode
|
|
260
|
-
});
|
|
261
|
-
return this._positionService.positionElement({
|
|
262
|
-
anchor: this.domService.nativeElement(this.anchor),
|
|
263
|
-
anchorAlign: this.anchorAlign,
|
|
264
|
-
collisions: this.collision,
|
|
265
|
-
currentLocation: alignedOffset,
|
|
266
|
-
element: this.container,
|
|
267
|
-
elementAlign: this.popupAlign,
|
|
268
|
-
margin: this.margin
|
|
269
|
-
});
|
|
270
|
-
}
|
|
271
|
-
onScroll(isInViewPort) {
|
|
272
|
-
const hasLeaveObservers = hasObservers(this.anchorViewportLeave);
|
|
273
|
-
if (isInViewPort || !hasLeaveObservers) {
|
|
274
|
-
this.reposition();
|
|
275
|
-
}
|
|
276
|
-
else if (hasLeaveObservers) {
|
|
277
|
-
this._zone.run(() => {
|
|
278
|
-
this.anchorViewportLeave.emit();
|
|
279
|
-
});
|
|
280
|
-
}
|
|
281
|
-
}
|
|
282
|
-
copyFontStyles() {
|
|
283
|
-
if (!this.anchor || !this.copyAnchorStyles) {
|
|
284
|
-
return;
|
|
285
|
-
}
|
|
286
|
-
this.domService.getFontStyles(this.domService.nativeElement(this.anchor))
|
|
287
|
-
.forEach((s) => this.setContainerStyle(s.key, s.value));
|
|
288
|
-
}
|
|
289
|
-
updateFixedClass() {
|
|
290
|
-
const action = this.positionMode === 'fixed' ? 'addClass' : 'removeClass';
|
|
291
|
-
this._renderer[action](this.container.nativeElement, ANIMATION_CONTAINER_FIXED);
|
|
292
|
-
}
|
|
293
|
-
setContainerStyle(name, value) {
|
|
294
|
-
this._renderer.setStyle(this.container.nativeElement, name, value);
|
|
295
|
-
}
|
|
296
|
-
unsubscribeReposition() {
|
|
297
|
-
if (this.repositionSubscription) {
|
|
298
|
-
this.repositionSubscription.unsubscribe();
|
|
299
|
-
}
|
|
300
|
-
}
|
|
301
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopupComponent, deps: [{ token: i0.ElementRef }, { token: i1.AlignService }, { token: i2.DOMService }, { token: i3.PositionService }, { token: i4.ResizeService }, { token: i5.ScrollableService }, { token: i6.AnimationService }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
302
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PopupComponent, isStandalone: true, selector: "kendo-popup", inputs: { animate: "animate", anchor: "anchor", anchorAlign: "anchorAlign", collision: "collision", popupAlign: "popupAlign", copyAnchorStyles: "copyAnchorStyles", popupClass: "popupClass", positionMode: "positionMode", offset: "offset", margin: "margin" }, outputs: { anchorViewportLeave: "anchorViewportLeave", close: "close", open: "open", positionChange: "positionChange" }, providers: [AlignService, AnimationService, DOMService, PositionService, ResizeService, ScrollableService], viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "resizeSensor", first: true, predicate: ResizeSensorComponent, descendants: true, static: true }], exportAs: ["kendo-popup"], usesOnChanges: true, ngImport: i0, template: `
|
|
303
|
-
<div class="k-child-animation-container">
|
|
304
|
-
<div [class.k-popup]="renderDefaultClass" [ngClass]="popupClass" #container>
|
|
305
|
-
<ng-content></ng-content>
|
|
306
|
-
@if (content) {
|
|
307
|
-
<ng-template [ngTemplateOutlet]="content"></ng-template>
|
|
308
|
-
}
|
|
309
|
-
<kendo-resize-sensor [rateLimit]="100" (resize)="onResize()">
|
|
310
|
-
</kendo-resize-sensor>
|
|
311
|
-
</div>
|
|
312
|
-
</div>
|
|
313
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
|
|
314
|
-
}
|
|
315
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopupComponent, decorators: [{
|
|
316
|
-
type: Component,
|
|
317
|
-
args: [{
|
|
318
|
-
exportAs: 'kendo-popup',
|
|
319
|
-
providers: [AlignService, AnimationService, DOMService, PositionService, ResizeService, ScrollableService],
|
|
320
|
-
selector: 'kendo-popup',
|
|
321
|
-
template: `
|
|
322
|
-
<div class="k-child-animation-container">
|
|
323
|
-
<div [class.k-popup]="renderDefaultClass" [ngClass]="popupClass" #container>
|
|
324
|
-
<ng-content></ng-content>
|
|
325
|
-
@if (content) {
|
|
326
|
-
<ng-template [ngTemplateOutlet]="content"></ng-template>
|
|
327
|
-
}
|
|
328
|
-
<kendo-resize-sensor [rateLimit]="100" (resize)="onResize()">
|
|
329
|
-
</kendo-resize-sensor>
|
|
330
|
-
</div>
|
|
331
|
-
</div>
|
|
332
|
-
`,
|
|
333
|
-
standalone: true,
|
|
334
|
-
imports: [NgClass, NgTemplateOutlet, ResizeSensorComponent]
|
|
335
|
-
}]
|
|
336
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.AlignService }, { type: i2.DOMService }, { type: i3.PositionService }, { type: i4.ResizeService }, { type: i5.ScrollableService }, { type: i6.AnimationService }, { type: i0.Renderer2 }, { type: i0.NgZone }], propDecorators: { animate: [{
|
|
337
|
-
type: Input
|
|
338
|
-
}], anchor: [{
|
|
339
|
-
type: Input
|
|
340
|
-
}], anchorAlign: [{
|
|
341
|
-
type: Input
|
|
342
|
-
}], collision: [{
|
|
343
|
-
type: Input
|
|
344
|
-
}], popupAlign: [{
|
|
345
|
-
type: Input
|
|
346
|
-
}], copyAnchorStyles: [{
|
|
347
|
-
type: Input
|
|
348
|
-
}], popupClass: [{
|
|
349
|
-
type: Input
|
|
350
|
-
}], positionMode: [{
|
|
351
|
-
type: Input
|
|
352
|
-
}], offset: [{
|
|
353
|
-
type: Input
|
|
354
|
-
}], margin: [{
|
|
355
|
-
type: Input
|
|
356
|
-
}], anchorViewportLeave: [{
|
|
357
|
-
type: Output
|
|
358
|
-
}], close: [{
|
|
359
|
-
type: Output
|
|
360
|
-
}], open: [{
|
|
361
|
-
type: Output
|
|
362
|
-
}], positionChange: [{
|
|
363
|
-
type: Output
|
|
364
|
-
}], contentContainer: [{
|
|
365
|
-
type: ViewChild,
|
|
366
|
-
args: ['container', { static: true }]
|
|
367
|
-
}], resizeSensor: [{
|
|
368
|
-
type: ViewChild,
|
|
369
|
-
args: [ResizeSensorComponent, { static: true }]
|
|
370
|
-
}] } });
|
package/esm2022/popup.module.mjs
DELETED
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { NgModule } from '@angular/core';
|
|
6
|
-
import { KENDO_RESIZESENSOR, ResizeBatchService } from '@progress/kendo-angular-common';
|
|
7
|
-
import { PopupService } from './popup.service';
|
|
8
|
-
import { KENDO_POPUP } from './directives';
|
|
9
|
-
import * as i0 from "@angular/core";
|
|
10
|
-
import * as i1 from "@progress/kendo-angular-common";
|
|
11
|
-
import * as i2 from "./popup.component";
|
|
12
|
-
//IMPORTANT: NgModule export kept for backwards compatibility
|
|
13
|
-
/**
|
|
14
|
-
* Required for adding all Popup features in NgModule-based Angular applications.
|
|
15
|
-
*
|
|
16
|
-
* @example
|
|
17
|
-
* ```ts-no-run
|
|
18
|
-
* // Import the Popup module
|
|
19
|
-
* import { PopupModule } from '@progress/kendo-angular-popup';
|
|
20
|
-
*
|
|
21
|
-
* // The browser platform with a compiler
|
|
22
|
-
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
|
23
|
-
*
|
|
24
|
-
* import { NgModule } from '@angular/core';
|
|
25
|
-
*
|
|
26
|
-
* // Import the app component
|
|
27
|
-
* import { AppComponent } from './app.component';
|
|
28
|
-
*
|
|
29
|
-
* // Define the app module
|
|
30
|
-
* _@NgModule({
|
|
31
|
-
* declarations: [AppComponent], // declare app component
|
|
32
|
-
* imports: [BrowserModule, PopupModule], // import Popup module
|
|
33
|
-
* bootstrap: [AppComponent]
|
|
34
|
-
* })
|
|
35
|
-
* export class AppModule {}
|
|
36
|
-
*
|
|
37
|
-
* // Compile and launch the module
|
|
38
|
-
* platformBrowserDynamic().bootstrapModule(AppModule);
|
|
39
|
-
*
|
|
40
|
-
* ```
|
|
41
|
-
*/
|
|
42
|
-
export class PopupModule {
|
|
43
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
44
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: PopupModule, imports: [i1.ResizeSensorComponent, i2.PopupComponent], exports: [i2.PopupComponent] });
|
|
45
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopupModule, providers: [PopupService, ResizeBatchService], imports: [KENDO_RESIZESENSOR, KENDO_POPUP] });
|
|
46
|
-
}
|
|
47
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopupModule, decorators: [{
|
|
48
|
-
type: NgModule,
|
|
49
|
-
args: [{
|
|
50
|
-
exports: [...KENDO_POPUP],
|
|
51
|
-
imports: [...KENDO_RESIZESENSOR, ...KENDO_POPUP],
|
|
52
|
-
providers: [PopupService, ResizeBatchService]
|
|
53
|
-
}]
|
|
54
|
-
}] });
|
|
@@ -1,241 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { ApplicationRef, ComponentFactoryResolver, ElementRef, InjectionToken, Injectable, Injector, Inject, Optional, TemplateRef } from '@angular/core';
|
|
6
|
-
import { PopupComponent } from './popup.component';
|
|
7
|
-
import * as i0 from "@angular/core";
|
|
8
|
-
const removeElement = (element) => {
|
|
9
|
-
if (element && element.parentNode) {
|
|
10
|
-
element.parentNode.removeChild(element);
|
|
11
|
-
}
|
|
12
|
-
};
|
|
13
|
-
/**
|
|
14
|
-
* Injects the Popup container. If not set, uses the first root component of the application.
|
|
15
|
-
*
|
|
16
|
-
* > Use `POPUP_CONTAINER` only with the `PopupService` class ([see example](slug:service_popup)).
|
|
17
|
-
*
|
|
18
|
-
* In standalone components:
|
|
19
|
-
*
|
|
20
|
-
* @example
|
|
21
|
-
* ```ts
|
|
22
|
-
* import { Component } from '@angular/core';
|
|
23
|
-
* import { KENDO_POPUP, PopupService } from '@progress/kendo-angular-popup';
|
|
24
|
-
*
|
|
25
|
-
* @Component({
|
|
26
|
-
* standalone: true,
|
|
27
|
-
* imports: [KENDO_POPUP],
|
|
28
|
-
* providers: [PopupService, {
|
|
29
|
-
* provide: POPUP_CONTAINER,
|
|
30
|
-
* useFactory: () => {
|
|
31
|
-
* //return the container ElementRef, where the popup will be injected
|
|
32
|
-
* return { nativeElement: document.body } as ElementRef;
|
|
33
|
-
* }
|
|
34
|
-
* }],
|
|
35
|
-
* selector: 'app-root',
|
|
36
|
-
* templateUrl: './app.component.html',
|
|
37
|
-
* })
|
|
38
|
-
* export class AppComponent {}
|
|
39
|
-
* ```
|
|
40
|
-
*
|
|
41
|
-
* In NgModule-based applications:
|
|
42
|
-
*
|
|
43
|
-
* @example
|
|
44
|
-
* ```ts
|
|
45
|
-
* import { PopupModule, POPUP_CONTAINER } from '@progress/kendo-angular-popup';
|
|
46
|
-
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
|
47
|
-
* import { ElementRef, NgModule } from '@angular/core';
|
|
48
|
-
* import { AppComponent } from './app.component';
|
|
49
|
-
*
|
|
50
|
-
* _@NgModule({
|
|
51
|
-
* declarations: [AppComponent],
|
|
52
|
-
* imports: [BrowserModule, PopupModule],
|
|
53
|
-
* bootstrap: [AppComponent],
|
|
54
|
-
* providers: [{
|
|
55
|
-
* provide: POPUP_CONTAINER,
|
|
56
|
-
* useFactory: () => {
|
|
57
|
-
* //return the container ElementRef, where the popup will be injected
|
|
58
|
-
* return { nativeElement: document.body } as ElementRef;
|
|
59
|
-
* }
|
|
60
|
-
* }]
|
|
61
|
-
* })
|
|
62
|
-
* export class AppModule {}
|
|
63
|
-
*
|
|
64
|
-
* platformBrowserDynamic().bootstrapModule(AppModule);
|
|
65
|
-
* ```
|
|
66
|
-
*/
|
|
67
|
-
export const POPUP_CONTAINER = new InjectionToken('Popup Container');
|
|
68
|
-
/**
|
|
69
|
-
* Provides a service for opening Popup components dynamically ([see example]({% slug service_popup %})).
|
|
70
|
-
*
|
|
71
|
-
* @export
|
|
72
|
-
* @class PopupService
|
|
73
|
-
*/
|
|
74
|
-
export class PopupService {
|
|
75
|
-
applicationRef;
|
|
76
|
-
componentFactoryResolver;
|
|
77
|
-
injector;
|
|
78
|
-
container;
|
|
79
|
-
/**
|
|
80
|
-
* Gets the root view container for injecting the component.
|
|
81
|
-
*
|
|
82
|
-
* @returns {ComponentRef<any>} The root view container reference.
|
|
83
|
-
*/
|
|
84
|
-
get rootViewContainer() {
|
|
85
|
-
// https://github.com/angular/angular/blob/4.0.x/packages/core/src/application_ref.ts#L571
|
|
86
|
-
const rootComponents = this.applicationRef.components || [];
|
|
87
|
-
if (rootComponents[0]) {
|
|
88
|
-
return rootComponents[0];
|
|
89
|
-
}
|
|
90
|
-
throw new Error(`
|
|
91
|
-
View Container not found! Inject the POPUP_CONTAINER or define a specific ViewContainerRef via the appendTo option.
|
|
92
|
-
See https://www.telerik.com/kendo-angular-ui/components/popup/api/POPUP_CONTAINER/ for more details.
|
|
93
|
-
`);
|
|
94
|
-
}
|
|
95
|
-
/**
|
|
96
|
-
* Gets the HTML element of the root component container.
|
|
97
|
-
*
|
|
98
|
-
* @returns {HTMLElement} The root container HTML element.
|
|
99
|
-
*/
|
|
100
|
-
get rootViewContainerNode() {
|
|
101
|
-
return this.container ? this.container.nativeElement : this.getComponentRootNode(this.rootViewContainer);
|
|
102
|
-
}
|
|
103
|
-
constructor(applicationRef, componentFactoryResolver, injector, container) {
|
|
104
|
-
this.applicationRef = applicationRef;
|
|
105
|
-
this.componentFactoryResolver = componentFactoryResolver;
|
|
106
|
-
this.injector = injector;
|
|
107
|
-
this.container = container;
|
|
108
|
-
}
|
|
109
|
-
/**
|
|
110
|
-
* Opens a Popup component. The Popup mounts in the DOM under the root application component.
|
|
111
|
-
*
|
|
112
|
-
* @param {PopupSettings} options - The options for the Popup.
|
|
113
|
-
* @returns {ComponentRef<PopupComponent>} A reference to the Popup object.
|
|
114
|
-
*/
|
|
115
|
-
open(options = {}) {
|
|
116
|
-
const { component, nodes } = this.contentFrom(options.content);
|
|
117
|
-
const popupComponentRef = this.appendPopup(nodes, options.appendTo);
|
|
118
|
-
const popupInstance = popupComponentRef.instance;
|
|
119
|
-
this.projectComponentInputs(popupComponentRef, options);
|
|
120
|
-
popupComponentRef.changeDetectorRef.detectChanges();
|
|
121
|
-
if (component) {
|
|
122
|
-
component.changeDetectorRef.detectChanges();
|
|
123
|
-
}
|
|
124
|
-
const popupElement = this.getComponentRootNode(popupComponentRef);
|
|
125
|
-
return {
|
|
126
|
-
close: () => {
|
|
127
|
-
if (component) {
|
|
128
|
-
component.destroy();
|
|
129
|
-
}
|
|
130
|
-
popupComponentRef.destroy();
|
|
131
|
-
// Issue in Chrome causes https://github.com/telerik/kendo-angular/issues/4434
|
|
132
|
-
// To be fixed in Chrome, remove try..catch afterwards
|
|
133
|
-
// https://chromestatus.com/feature/5128696823545856
|
|
134
|
-
// https://issues.chromium.org/issues/41484175
|
|
135
|
-
try {
|
|
136
|
-
// Angular will not remove the element unless the change detection is triggered
|
|
137
|
-
removeElement(popupElement);
|
|
138
|
-
}
|
|
139
|
-
catch { /* noop */ }
|
|
140
|
-
},
|
|
141
|
-
content: component,
|
|
142
|
-
popup: popupComponentRef,
|
|
143
|
-
popupAnchorViewportLeave: popupInstance.anchorViewportLeave,
|
|
144
|
-
popupClose: popupInstance.close,
|
|
145
|
-
popupElement: popupElement,
|
|
146
|
-
popupOpen: popupInstance.open,
|
|
147
|
-
popupPositionChange: popupInstance.positionChange
|
|
148
|
-
};
|
|
149
|
-
}
|
|
150
|
-
appendPopup(nodes, container) {
|
|
151
|
-
const popupComponentRef = this.createComponent(PopupComponent, nodes, container);
|
|
152
|
-
if (!container) {
|
|
153
|
-
this.rootViewContainerNode.appendChild(this.getComponentRootNode(popupComponentRef));
|
|
154
|
-
}
|
|
155
|
-
return popupComponentRef;
|
|
156
|
-
}
|
|
157
|
-
/**
|
|
158
|
-
* Gets the HTML element for a component reference.
|
|
159
|
-
*
|
|
160
|
-
* @param {ComponentRef<any>} componentRef The component reference.
|
|
161
|
-
* @returns {HTMLElement} The root HTML element of the component.
|
|
162
|
-
*/
|
|
163
|
-
getComponentRootNode(componentRef) {
|
|
164
|
-
return componentRef.location.nativeElement;
|
|
165
|
-
}
|
|
166
|
-
/**
|
|
167
|
-
* Gets the `ComponentFactory` instance by type.
|
|
168
|
-
*
|
|
169
|
-
* @param {*} componentClass The component class.
|
|
170
|
-
* @returns {ComponentFactory<any>} The component factory instance.
|
|
171
|
-
*/
|
|
172
|
-
getComponentFactory(componentClass) {
|
|
173
|
-
return this.componentFactoryResolver.resolveComponentFactory(componentClass);
|
|
174
|
-
}
|
|
175
|
-
/**
|
|
176
|
-
* Creates a component reference from a `Component` class.
|
|
177
|
-
*
|
|
178
|
-
* @param {*} componentClass The component class.
|
|
179
|
-
* @param {*} nodes The nodes to project.
|
|
180
|
-
* @param {ViewContainerRef} container The container to use.
|
|
181
|
-
* @returns {ComponentRef<any>} The created component reference.
|
|
182
|
-
*/
|
|
183
|
-
createComponent(componentClass, nodes, container) {
|
|
184
|
-
const factory = this.getComponentFactory(componentClass);
|
|
185
|
-
if (container) {
|
|
186
|
-
return container.createComponent(factory, undefined, this.injector, nodes);
|
|
187
|
-
}
|
|
188
|
-
else {
|
|
189
|
-
const component = factory.create(this.injector, nodes);
|
|
190
|
-
this.applicationRef.attachView(component.hostView);
|
|
191
|
-
return component;
|
|
192
|
-
}
|
|
193
|
-
}
|
|
194
|
-
/**
|
|
195
|
-
* Projects the input options onto the component instance.
|
|
196
|
-
*
|
|
197
|
-
* @param {ComponentRef<any>} component The component reference.
|
|
198
|
-
* @param {*} options The options to project.
|
|
199
|
-
* @returns {ComponentRef<any>} The updated component reference.
|
|
200
|
-
*/
|
|
201
|
-
projectComponentInputs(component, options) {
|
|
202
|
-
Object.getOwnPropertyNames(options)
|
|
203
|
-
.filter(prop => prop !== 'content' || options.content instanceof TemplateRef)
|
|
204
|
-
.forEach((prop) => {
|
|
205
|
-
component.instance[prop] = options[prop];
|
|
206
|
-
});
|
|
207
|
-
return component;
|
|
208
|
-
}
|
|
209
|
-
/**
|
|
210
|
-
* Gets the component and nodes to append from the `content` option.
|
|
211
|
-
*
|
|
212
|
-
* @param {*} content The content to use.
|
|
213
|
-
* @returns {any} The component and nodes for projection.
|
|
214
|
-
*/
|
|
215
|
-
contentFrom(content) {
|
|
216
|
-
if (!content || content instanceof TemplateRef) {
|
|
217
|
-
return { component: null, nodes: [[]] };
|
|
218
|
-
}
|
|
219
|
-
const component = this.createComponent(content);
|
|
220
|
-
const nodes = component ? [component.location.nativeElement] : [];
|
|
221
|
-
return {
|
|
222
|
-
component: component,
|
|
223
|
-
nodes: [
|
|
224
|
-
nodes // <ng-content>
|
|
225
|
-
]
|
|
226
|
-
};
|
|
227
|
-
}
|
|
228
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopupService, deps: [{ token: i0.ApplicationRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: POPUP_CONTAINER, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
229
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopupService, providedIn: 'root' });
|
|
230
|
-
}
|
|
231
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopupService, decorators: [{
|
|
232
|
-
type: Injectable,
|
|
233
|
-
args: [{
|
|
234
|
-
providedIn: 'root'
|
|
235
|
-
}]
|
|
236
|
-
}], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: i0.ElementRef, decorators: [{
|
|
237
|
-
type: Inject,
|
|
238
|
-
args: [POPUP_CONTAINER]
|
|
239
|
-
}, {
|
|
240
|
-
type: Optional
|
|
241
|
-
}] }] });
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
/**
|
|
6
|
-
* Generated bundle index. Do not edit.
|
|
7
|
-
*/
|
|
8
|
-
export * from './index';
|