@progress/kendo-angular-popup 21.4.1-develop.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.
@@ -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
- }] } });
@@ -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';