@progress/kendo-angular-popup 17.0.0-develop.3 → 17.0.0-develop.30

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.
Files changed (35) hide show
  1. package/README.md +23 -21
  2. package/{esm2020 → esm2022}/package-metadata.mjs +2 -2
  3. package/{esm2020 → esm2022}/popup.component.mjs +193 -151
  4. package/{esm2020 → esm2022}/popup.module.mjs +4 -4
  5. package/{esm2020 → esm2022}/popup.service.mjs +13 -9
  6. package/{esm2020 → esm2022}/services/align.service.mjs +5 -3
  7. package/{esm2020 → esm2022}/services/animation.service.mjs +8 -5
  8. package/{esm2020 → esm2022}/services/dom.service.mjs +4 -3
  9. package/{esm2020 → esm2022}/services/position.service.mjs +5 -3
  10. package/{esm2020 → esm2022}/services/resize.service.mjs +6 -3
  11. package/{esm2020 → esm2022}/services/scrollable.service.mjs +7 -3
  12. package/{fesm2020 → fesm2022}/progress-kendo-angular-popup.mjs +247 -186
  13. package/models/collision.type.d.ts +1 -1
  14. package/models/popup-animation.interface.d.ts +2 -2
  15. package/models/position-mode.d.ts +1 -1
  16. package/package.json +11 -17
  17. package/popup.component.d.ts +1 -1
  18. package/fesm2015/progress-kendo-angular-popup.mjs +0 -1404
  19. /package/{esm2020 → esm2022}/directives.mjs +0 -0
  20. /package/{esm2020 → esm2022}/index.mjs +0 -0
  21. /package/{esm2020 → esm2022}/models/align-element-settings.interface.mjs +0 -0
  22. /package/{esm2020 → esm2022}/models/align.interface.mjs +0 -0
  23. /package/{esm2020 → esm2022}/models/collision.interface.mjs +0 -0
  24. /package/{esm2020 → esm2022}/models/collision.type.mjs +0 -0
  25. /package/{esm2020 → esm2022}/models/margin.interface.mjs +0 -0
  26. /package/{esm2020 → esm2022}/models/offset.interface.mjs +0 -0
  27. /package/{esm2020 → esm2022}/models/popup-animation.interface.mjs +0 -0
  28. /package/{esm2020 → esm2022}/models/popup-ref.mjs +0 -0
  29. /package/{esm2020 → esm2022}/models/popup-settings.mjs +0 -0
  30. /package/{esm2020 → esm2022}/models/position-element-settings.interface.mjs +0 -0
  31. /package/{esm2020 → esm2022}/models/position-mode.mjs +0 -0
  32. /package/{esm2020 → esm2022}/models/position.interface.mjs +0 -0
  33. /package/{esm2020 → esm2022}/progress-kendo-angular-popup.mjs +0 -0
  34. /package/{esm2020 → esm2022}/scale.mjs +0 -0
  35. /package/{esm2020 → esm2022}/util.mjs +0 -0
package/README.md CHANGED
@@ -4,43 +4,45 @@
4
4
 
5
5
  ## Kendo UI for Angular Popup Component
6
6
 
7
- > **Important**
8
- > * This package is part of [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-popup)—a commercial library designed and built for developing business applications with Angular. Every UI component in the Kendo UI for Angular suite has been built from the ground-up specifically for Angular.
9
- > * You will need to install a license key when adding the package to your project. For more information, please refer to the [Kendo UI for Angular My License page](https://www.telerik.com/kendo-angular-ui/my-license?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-popup).
10
- > * To receive a license key, you need to either [purchase a license](https://www.telerik.com/purchase/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-popup) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-popup). Doing so indicates that you [accept the Kendo UI for Angular License Agreement](https://www.telerik.com/purchase/license-agreement/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-popup).
7
+ > * This package is part of [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui)—a commercial library designed and built for developing business applications with Angular. Every UI component in the Kendo UI for Angular suite has been built from the ground-up specifically for Angular.
8
+ > * You must [install a license key](https://www.telerik.com/kendo-angular-ui/my-license) when adding the package to your project. To receive a license key, either [purchase a license](https://www.telerik.com/purchase/kendo-ui) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui).
11
9
  > * The 30-day free trial gives you access to all the Kendo UI for Angular components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI for Angular dev team!
12
10
  >
13
- > [Start using Kendo UI for Angular](https://www.telerik.com/download-login-v2-kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-popup) and speed up your development process!
11
+ > [Start using Kendo UI for Angular](https://www.telerik.com/download-login-v2-kendo-angular-ui) and speed up your development process!
14
12
 
15
13
  ## Angular Popup Component
16
14
 
17
- The Kendo UI for Angular Popup ovelays content next to a specific anchor HTML element. This Angular Popup component is build natively for Angular so you get the best possible performance and integration with other Angular components.
15
+ The [Kendo UI for Angular Popup](https://www.telerik.com/kendo-angular-ui/components/pdfviewer) component overlays content next to a specific anchor HTML element. The Angular Popup component is build natively for Angular so you get the best possible performance and integration with other Angular components.
18
16
 
19
17
  <img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/component-pages/angular/angular-popup-animations.gif" alt="Angular PopupExample">
20
18
 
21
19
  ### Key Features
22
20
 
23
- * [Animations](https://www.telerik.com/kendo-angular-ui/components/popup/animations/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-popup)&mdash;Customize the animation of the Popup and change its direction, type, and duration, or disable it.
24
- * [Aligning and Positioning](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-popup)&mdash;Align the Popup components to other components and absolute points as well as to control its position and render a margin according to a specific elements.
25
- * [Document Scale](https://www.telerik.com/kendo-angular-ui/components/popup/document-scale/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-popup)&mdash;The Angular Popup provides configuration options for declaring the document scale so that it gets properly positioned.
26
- * [Styling](https://www.telerik.com/kendo-angular-ui/components/popup/styling/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-popup)&mdash;Customize the appearance of the host Popup element and the elements that hold its content as well as copy the anchor font styles of the content-holding element.
27
- * [Viewport Boundary Detection](https://www.telerik.com/kendo-angular-ui/components/popup/viewport-boundary/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-popup)&mdash;Set the compponent's boundary detection functionality so that when it does not fit in the viewport, it will automatically change its position.
28
- * [Angular Service](https://www.telerik.com/kendo-angular-ui/components/popup/service/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-popup)&mdash;Create Popup instances from TypeScript based on user interactions and without the need to define the component in a template.
21
+ * [Animations](https://www.telerik.com/kendo-angular-ui/components/popup/animations/)&mdash;Customize the animation of the Popup and change its direction, type, and duration, or disable it.
22
+ * [Aligning and Positioning](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning/)&mdash;Align the Popup components to other components and absolute points as well as to control its position and render a margin according to a specific elements.
23
+ * [Document Scale](https://www.telerik.com/kendo-angular-ui/components/popup/document-scale/)&mdash;The Angular Popup provides configuration options for declaring the document scale so that it gets properly positioned.
24
+ * [Styling](https://www.telerik.com/kendo-angular-ui/components/popup/styling/)&mdash;Customize the appearance of the host Popup element and the elements that hold its content as well as copy the anchor font styles of the content-holding element.
25
+ * [Viewport Boundary Detection](https://www.telerik.com/kendo-angular-ui/components/popup/viewport-boundary/)&mdash;Set the compponent's boundary detection functionality so that when it does not fit in the viewport, it will automatically change its position.
26
+ * [Angular Service](https://www.telerik.com/kendo-angular-ui/components/popup/service/)&mdash;Create Popup instances from TypeScript based on user interactions and without the need to define the component in a template.
27
+
28
+ ## Support Options
29
+
30
+ For any issues you might encounter while working with the Kendo UI for Angular Popup, you have the following support channels available:
31
+
32
+ * Industry-leading technical support&mdash;Kendo UI for Angular paid license holders and users with an active (free) trial license can take advantage of our outstanding customer support. To submit a ticket, use the [dedicated Kendo UI for Angular support system](https://www.telerik.com/account/support-tickets).
33
+ * Product forums&mdash;The [Kendo UI for Angular forums](https://www.telerik.com/forums/kendo-angular-ui) are part of the free support you can get from the community and from the Kendo UI for Angular team.
34
+ * Feedback portal&mdash;The [Kendo UI for Angular feedback portal](https://feedback.telerik.com/kendo-angular-ui) is where you can request and vote for new features to be added.
29
35
 
30
36
  ## Resources
31
37
 
32
- * [Get Started with Kendo UI for Angular (requires trial registration)](https://www.telerik.com/kendo-angular-ui/getting-started)
33
- * [Demos, documentation, and component reference](https://www.telerik.com/kendo-angular-ui/components)
38
+ * [Getting Started with Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/getting-started)
39
+ * [Getting Started with the Kendo UI for Angular Popup](https://www.telerik.com/kendo-angular-ui/components/popup/installation/getting-started)
40
+ * [PDFViewer Overview page](https://www.telerik.com/kendo-angular-ui/components/pdfviewer) and [PDFViewer API reference](https://www.telerik.com/kendo-angular-ui/components/pdfviewer/api)
41
+ * [Kendo UI for Angular roadmap](https://www.telerik.com/kendo-angular-ui/roadmap)
34
42
  * [Blogs](http://www.telerik.com/blogs/kendo-ui)
43
+ * [Demos, documentation, and component reference](https://www.telerik.com/kendo-angular-ui/components)
35
44
  * [Kendo UI for Angular pricing and licensing](https://www.telerik.com/purchase/kendo-ui)
36
45
 
37
- ## Questions and Feedback
38
-
39
- * [Official Forums](https://www.telerik.com/forums/kendo-angular-ui)
40
- * [GitHub Issues](https://github.com/telerik/kendo-angular/issues)
41
- * [Feedback Portal](https://feedback.telerik.com/kendo-angular-ui)
42
- * [StackOverflow](https://stackoverflow.com/questions/tagged/kendo-ui-angular2)
43
-
44
46
  *Copyright © 2024 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.*
45
47
 
46
48
  *Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries.*
@@ -9,7 +9,7 @@ export const packageMetadata = {
9
9
  name: '@progress/kendo-angular-popup',
10
10
  productName: 'Kendo UI for Angular',
11
11
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
12
- publishDate: 1728917093,
13
- version: '17.0.0-develop.3',
12
+ publishDate: 1730388811,
13
+ version: '17.0.0-develop.30',
14
14
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
15
15
  };
@@ -45,6 +45,195 @@ const ANIMATION_CONTAINER_FIXED = 'k-animation-container-fixed';
45
45
  * ```
46
46
  */
47
47
  export class PopupComponent {
48
+ container;
49
+ _alignService;
50
+ domService;
51
+ _positionService;
52
+ _resizeService;
53
+ _scrollableService;
54
+ animationService;
55
+ _renderer;
56
+ _zone;
57
+ /**
58
+ * Controls the Popup animation. By default, the opening and closing animations
59
+ * are enabled ([see example]({% slug animations_popup %})).
60
+ */
61
+ animate = true;
62
+ /**
63
+ * Specifies the element that will be used as an anchor. The Popup opens next to that element.
64
+ * ([see example]({% slug alignmentpositioning_popup %}#toc-aligning-to-components)).
65
+ */
66
+ anchor;
67
+ /**
68
+ * Specifies the anchor pivot point
69
+ * ([see example]({% slug alignmentpositioning_popup %}#toc-positioning)).
70
+ */
71
+ anchorAlign = { horizontal: 'left', vertical: 'bottom' };
72
+ /**
73
+ * Configures the collision behavior of the Popup
74
+ * ([see example]({% slug viewportboundarydetection_popup %})).
75
+ */
76
+ collision = { horizontal: 'fit', vertical: 'flip' };
77
+ /**
78
+ * Specifies the pivot point of the Popup
79
+ * ([see example]({% slug alignmentpositioning_popup %}#toc-positioning)).
80
+ */
81
+ popupAlign = { horizontal: 'left', vertical: 'top' };
82
+ /**
83
+ * Controls whether the component will copy the `anchor` font styles.
84
+ */
85
+ copyAnchorStyles = false;
86
+ /**
87
+ * Specifies a list of CSS classes that will be added to the internal
88
+ * animated element ([see example]({% slug appearance_popup %})).
89
+ *
90
+ * > To style the content of the Popup, use this property binding.
91
+ */
92
+ // eslint-disable-next-line @typescript-eslint/ban-types
93
+ popupClass;
94
+ /**
95
+ * Specifies the position mode of the component. By default, the Popup uses fixed positioning.
96
+ * To make the Popup acquire absolute positioning, set this option to `absolute`.
97
+ *
98
+ * > If you need to support mobile browsers with the zoom option,
99
+ * use the `absolute` positioning of the Popup.
100
+ *
101
+ * @example
102
+ * ```html
103
+ * <style>
104
+ * .parent-content {
105
+ * position: relative;
106
+ * width: 200px;
107
+ * height: 200px;
108
+ * overflow: auto;
109
+ * margin: 200px auto;
110
+ * border: 1px solid red;
111
+ * }
112
+ * .content {
113
+ * position: relative;
114
+ * width: 100px;
115
+ * height: 100px;
116
+ * overflow: auto;
117
+ * margin: 300px;
118
+ * border: 1px solid blue;
119
+ * }
120
+ * .anchor {
121
+ * position: absolute;
122
+ * top: 200px;
123
+ * left: 200px;
124
+ * }
125
+ * </style>
126
+ * ```
127
+ * ```ts
128
+ * _@Component({
129
+ * selector: 'my-app',
130
+ * template: `
131
+ * <div class="example-config">
132
+ * Position mode:
133
+ * <label><input type="radio" value="fixed" [(ngModel)]="mode" /> Fixed</label>
134
+ * <label><input type="radio" value="absolute" [(ngModel)]="mode" /> Absolute</label>
135
+ * </div>
136
+ * <div class="example-config">
137
+ * Append to
138
+ * <label>
139
+ * <input type="radio" name="place" [value]="1" [(ngModel)]="checked" />
140
+ * Root component
141
+ * </label>
142
+ * <label>
143
+ * <input type="radio" name="place" [value]="2" [(ngModel)]="checked" />
144
+ * <span [style.color]="'red'">Red Container</span>
145
+ * </label>
146
+ * <label>
147
+ * <input type="radio" name="place" [value]="3" [(ngModel)]="checked" />
148
+ * <span [style.color]="'blue'">Blue Container</span>
149
+ * </label>
150
+ * </div>
151
+ * <div class="example">
152
+ * <div class="parent-content" [scrollLeft]="250" [scrollTop]="230">
153
+ * <div class="content" [scrollLeft]="170" [scrollTop]="165">
154
+ * <button #anchor class="anchor" (click)="show = !show">Toggle</button>
155
+ * <kendo-popup [positionMode]="mode" [anchor]="anchor" (anchorViewportLeave)="show=false" *ngIf="show && checked === 3">
156
+ * <ul>
157
+ * <li>Item1</li>
158
+ * <li>Item2</li>
159
+ * <li>Item3</li>
160
+ * </ul>
161
+ * </kendo-popup>
162
+ * <span [style.position]="'absolute'" [style.top.px]="400" [style.left.px]="400">Bottom/Right</span>
163
+ * </div>
164
+ * <kendo-popup [positionMode]="mode" [anchor]="anchor" (anchorViewportLeave)="show=false" *ngIf="show && checked === 2">
165
+ * <ul>
166
+ * <li>Item1</li>
167
+ * <li>Item2</li>
168
+ * <li>Item3</li>
169
+ * </ul>
170
+ * </kendo-popup>
171
+ * <span [style.position]="'absolute'" [style.top.px]="600" [style.left.px]="600">Bottom/Right</span>
172
+ * </div>
173
+ * <kendo-popup [positionMode]="mode" [anchor]="anchor" (anchorViewportLeave)="show=false" *ngIf="show && checked === 1">
174
+ * <ul>
175
+ * <li>Item1</li>
176
+ * <li>Item2</li>
177
+ * <li>Item3</li>
178
+ * </ul>
179
+ * </kendo-popup>
180
+ * </div>
181
+ * `
182
+ * })
183
+ * class AppComponent {
184
+ * public checked: number = 3;
185
+ * public mode: string = 'absolute';
186
+ * public show: boolean = true;
187
+ * }
188
+ * ```
189
+ */
190
+ positionMode = 'fixed';
191
+ /**
192
+ * Specifies the absolute position of the element
193
+ * ([see example]({% slug alignmentpositioning_popup %}#toc-aligning-to-absolute-points)).
194
+ * The Popup opens next to that point. The Popup pivot point is defined by the `popupAlign` configuration option.
195
+ * The boundary detection is applied by using the window viewport.
196
+ */
197
+ offset = DEFAULT_OFFSET;
198
+ /**
199
+ * Specifies the margin value that will be added to the popup dimensions in pixels and leaves a blank space
200
+ * between the popup and the anchor ([see example]({% slug alignmentpositioning_popup %}#toc-adding-a-margin)).
201
+ */
202
+ margin;
203
+ /**
204
+ * Fires when the anchor is scrolled outside the screen boundaries.
205
+ * ([see example]({% slug closing_popup %}#toc-after-leaving-the-viewport)).
206
+ */
207
+ anchorViewportLeave = new EventEmitter();
208
+ /**
209
+ * Fires after the component is closed.
210
+ */
211
+ close = new EventEmitter();
212
+ /**
213
+ * Fires after the component is opened and the opening animation ends.
214
+ */
215
+ open = new EventEmitter();
216
+ /**
217
+ * Fires after the component is opened and the Popup is positioned.
218
+ */
219
+ positionChange = new EventEmitter();
220
+ /**
221
+ * @hidden
222
+ */
223
+ contentContainer;
224
+ /**
225
+ * @hidden
226
+ */
227
+ resizeSensor;
228
+ /**
229
+ * @hidden
230
+ */
231
+ content;
232
+ resolvedPromise = Promise.resolve(null);
233
+ _currentOffset;
234
+ animationSubscriptions;
235
+ repositionSubscription;
236
+ initialCheck = true;
48
237
  constructor(container, _alignService, domService, _positionService, _resizeService, _scrollableService, animationService, _renderer, _zone) {
49
238
  this.container = container;
50
239
  this._alignService = _alignService;
@@ -55,153 +244,6 @@ export class PopupComponent {
55
244
  this.animationService = animationService;
56
245
  this._renderer = _renderer;
57
246
  this._zone = _zone;
58
- /**
59
- * Controls the Popup animation. By default, the opening and closing animations
60
- * are enabled ([see example]({% slug animations_popup %})).
61
- */
62
- this.animate = true;
63
- /**
64
- * Specifies the anchor pivot point
65
- * ([see example]({% slug alignmentpositioning_popup %}#toc-positioning)).
66
- */
67
- this.anchorAlign = { horizontal: 'left', vertical: 'bottom' };
68
- /**
69
- * Configures the collision behavior of the Popup
70
- * ([see example]({% slug viewportboundarydetection_popup %})).
71
- */
72
- this.collision = { horizontal: 'fit', vertical: 'flip' };
73
- /**
74
- * Specifies the pivot point of the Popup
75
- * ([see example]({% slug alignmentpositioning_popup %}#toc-positioning)).
76
- */
77
- this.popupAlign = { horizontal: 'left', vertical: 'top' };
78
- /**
79
- * Controls whether the component will copy the `anchor` font styles.
80
- */
81
- this.copyAnchorStyles = false;
82
- /**
83
- * Specifies the position mode of the component. By default, the Popup uses fixed positioning.
84
- * To make the Popup acquire absolute positioning, set this option to `absolute`.
85
- *
86
- * > If you need to support mobile browsers with the zoom option,
87
- * use the `absolute` positioning of the Popup.
88
- *
89
- * @example
90
- * ```html
91
- * <style>
92
- * .parent-content {
93
- * position: relative;
94
- * width: 200px;
95
- * height: 200px;
96
- * overflow: auto;
97
- * margin: 200px auto;
98
- * border: 1px solid red;
99
- * }
100
- * .content {
101
- * position: relative;
102
- * width: 100px;
103
- * height: 100px;
104
- * overflow: auto;
105
- * margin: 300px;
106
- * border: 1px solid blue;
107
- * }
108
- * .anchor {
109
- * position: absolute;
110
- * top: 200px;
111
- * left: 200px;
112
- * }
113
- * </style>
114
- * ```
115
- * ```ts
116
- * _@Component({
117
- * selector: 'my-app',
118
- * template: `
119
- * <div class="example-config">
120
- * Position mode:
121
- * <label><input type="radio" value="fixed" [(ngModel)]="mode" /> Fixed</label>
122
- * <label><input type="radio" value="absolute" [(ngModel)]="mode" /> Absolute</label>
123
- * </div>
124
- * <div class="example-config">
125
- * Append to
126
- * <label>
127
- * <input type="radio" name="place" [value]="1" [(ngModel)]="checked" />
128
- * Root component
129
- * </label>
130
- * <label>
131
- * <input type="radio" name="place" [value]="2" [(ngModel)]="checked" />
132
- * <span [style.color]="'red'">Red Container</span>
133
- * </label>
134
- * <label>
135
- * <input type="radio" name="place" [value]="3" [(ngModel)]="checked" />
136
- * <span [style.color]="'blue'">Blue Container</span>
137
- * </label>
138
- * </div>
139
- * <div class="example">
140
- * <div class="parent-content" [scrollLeft]="250" [scrollTop]="230">
141
- * <div class="content" [scrollLeft]="170" [scrollTop]="165">
142
- * <button #anchor class="anchor" (click)="show = !show">Toggle</button>
143
- * <kendo-popup [positionMode]="mode" [anchor]="anchor" (anchorViewportLeave)="show=false" *ngIf="show && checked === 3">
144
- * <ul>
145
- * <li>Item1</li>
146
- * <li>Item2</li>
147
- * <li>Item3</li>
148
- * </ul>
149
- * </kendo-popup>
150
- * <span [style.position]="'absolute'" [style.top.px]="400" [style.left.px]="400">Bottom/Right</span>
151
- * </div>
152
- * <kendo-popup [positionMode]="mode" [anchor]="anchor" (anchorViewportLeave)="show=false" *ngIf="show && checked === 2">
153
- * <ul>
154
- * <li>Item1</li>
155
- * <li>Item2</li>
156
- * <li>Item3</li>
157
- * </ul>
158
- * </kendo-popup>
159
- * <span [style.position]="'absolute'" [style.top.px]="600" [style.left.px]="600">Bottom/Right</span>
160
- * </div>
161
- * <kendo-popup [positionMode]="mode" [anchor]="anchor" (anchorViewportLeave)="show=false" *ngIf="show && checked === 1">
162
- * <ul>
163
- * <li>Item1</li>
164
- * <li>Item2</li>
165
- * <li>Item3</li>
166
- * </ul>
167
- * </kendo-popup>
168
- * </div>
169
- * `
170
- * })
171
- * class AppComponent {
172
- * public checked: number = 3;
173
- * public mode: string = 'absolute';
174
- * public show: boolean = true;
175
- * }
176
- * ```
177
- */
178
- this.positionMode = 'fixed';
179
- /**
180
- * Specifies the absolute position of the element
181
- * ([see example]({% slug alignmentpositioning_popup %}#toc-aligning-to-absolute-points)).
182
- * The Popup opens next to that point. The Popup pivot point is defined by the `popupAlign` configuration option.
183
- * The boundary detection is applied by using the window viewport.
184
- */
185
- this.offset = DEFAULT_OFFSET;
186
- /**
187
- * Fires when the anchor is scrolled outside the screen boundaries.
188
- * ([see example]({% slug closing_popup %}#toc-after-leaving-the-viewport)).
189
- */
190
- this.anchorViewportLeave = new EventEmitter();
191
- /**
192
- * Fires after the component is closed.
193
- */
194
- this.close = new EventEmitter();
195
- /**
196
- * Fires after the component is opened and the opening animation ends.
197
- */
198
- this.open = new EventEmitter();
199
- /**
200
- * Fires after the component is opened and the Popup is positioned.
201
- */
202
- this.positionChange = new EventEmitter();
203
- this.resolvedPromise = Promise.resolve(null);
204
- this.initialCheck = true;
205
247
  validatePackage(packageMetadata);
206
248
  this._renderer.addClass(container.nativeElement, ANIMATION_CONTAINER);
207
249
  this.updateFixedClass();
@@ -351,9 +393,8 @@ export class PopupComponent {
351
393
  this.repositionSubscription.unsubscribe();
352
394
  }
353
395
  }
354
- }
355
- PopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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 });
356
- PopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: `
396
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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 });
397
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: `
357
398
  <div class="k-child-animation-container">
358
399
  <div class="k-popup" [ngClass]="popupClass" #container>
359
400
  <ng-content></ng-content>
@@ -363,7 +404,8 @@ PopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version
363
404
  </div>
364
405
  </div>
365
406
  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
366
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopupComponent, decorators: [{
407
+ }
408
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopupComponent, decorators: [{
367
409
  type: Component,
368
410
  args: [{
369
411
  exportAs: 'kendo-popup',
@@ -41,11 +41,11 @@ import * as i1 from "./popup.component";
41
41
  * ```
42
42
  */
43
43
  export class PopupModule {
44
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
45
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: PopupModule, imports: [ResizeSensorComponent, i1.PopupComponent], exports: [i1.PopupComponent] });
46
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopupModule, providers: [PopupService, ResizeBatchService], imports: [ResizeSensorComponent, KENDO_POPUP] });
44
47
  }
45
- PopupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
46
- PopupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: PopupModule, imports: [ResizeSensorComponent, i1.PopupComponent], exports: [i1.PopupComponent] });
47
- PopupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopupModule, providers: [PopupService, ResizeBatchService], imports: [ResizeSensorComponent, KENDO_POPUP] });
48
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopupModule, decorators: [{
48
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopupModule, decorators: [{
49
49
  type: NgModule,
50
50
  args: [{
51
51
  exports: [...KENDO_POPUP],
@@ -76,12 +76,10 @@ export const POPUP_CONTAINER = new InjectionToken('Popup Container');
76
76
  * @class PopupService
77
77
  */
78
78
  export class PopupService {
79
- constructor(applicationRef, componentFactoryResolver, injector, container) {
80
- this.applicationRef = applicationRef;
81
- this.componentFactoryResolver = componentFactoryResolver;
82
- this.injector = injector;
83
- this.container = container;
84
- }
79
+ applicationRef;
80
+ componentFactoryResolver;
81
+ injector;
82
+ container;
85
83
  /**
86
84
  * Gets the root view container into which the component will be injected.
87
85
  *
@@ -106,6 +104,12 @@ export class PopupService {
106
104
  get rootViewContainerNode() {
107
105
  return this.container ? this.container.nativeElement : this.getComponentRootNode(this.rootViewContainer);
108
106
  }
107
+ constructor(applicationRef, componentFactoryResolver, injector, container) {
108
+ this.applicationRef = applicationRef;
109
+ this.componentFactoryResolver = componentFactoryResolver;
110
+ this.injector = injector;
111
+ this.container = container;
112
+ }
109
113
  /**
110
114
  * Opens a Popup component. Created Popups are mounted
111
115
  * in the DOM directly in the root application component.
@@ -251,10 +255,10 @@ export class PopupService {
251
255
  ]
252
256
  };
253
257
  }
258
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopupService, deps: [{ token: i0.ApplicationRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: POPUP_CONTAINER, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
259
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopupService, providedIn: 'root' });
254
260
  }
255
- PopupService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopupService, deps: [{ token: i0.ApplicationRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: POPUP_CONTAINER, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
256
- PopupService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopupService, providedIn: 'root' });
257
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopupService, decorators: [{
261
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopupService, decorators: [{
258
262
  type: Injectable,
259
263
  args: [{
260
264
  providedIn: 'root'
@@ -12,6 +12,8 @@ import * as i1 from "./dom.service";
12
12
  * @hidden
13
13
  */
14
14
  export class AlignService {
15
+ _dom;
16
+ scale;
15
17
  constructor(_dom, scale = 1) {
16
18
  this._dom = _dom;
17
19
  this.scale = scale;
@@ -54,10 +56,10 @@ export class AlignService {
54
56
  const rect = eitherRect(this._dom.position(anchor, element, scale), offset);
55
57
  return scaleRect(rect, scale);
56
58
  }
59
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AlignService, deps: [{ token: i1.DOMService }, { token: SCALE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
60
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AlignService });
57
61
  }
58
- AlignService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AlignService, deps: [{ token: i1.DOMService }, { token: SCALE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
59
- AlignService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AlignService });
60
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AlignService, decorators: [{
62
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AlignService, decorators: [{
61
63
  type: Injectable
62
64
  }], ctorParameters: function () { return [{ type: i1.DOMService }, { type: undefined, decorators: [{
63
65
  type: Inject,
@@ -62,10 +62,13 @@ animationTypes.zoom = () => {
62
62
  * @hidden
63
63
  */
64
64
  export class AnimationService {
65
+ animationBuilder;
66
+ start = new EventEmitter();
67
+ end = new EventEmitter();
68
+ flip;
69
+ player;
65
70
  constructor(animationBuilder) {
66
71
  this.animationBuilder = animationBuilder;
67
- this.start = new EventEmitter();
68
- this.end = new EventEmitter();
69
72
  }
70
73
  play(element, options, flip) {
71
74
  if (!this.flip || this.flip.horizontal !== flip.horizontal ||
@@ -127,9 +130,9 @@ export class AnimationService {
127
130
  this.player = null;
128
131
  }
129
132
  }
133
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AnimationService, deps: [{ token: i1.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Injectable });
134
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AnimationService });
130
135
  }
131
- AnimationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AnimationService, deps: [{ token: i1.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Injectable });
132
- AnimationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AnimationService });
133
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AnimationService, decorators: [{
136
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AnimationService, decorators: [{
134
137
  type: Injectable
135
138
  }], ctorParameters: function () { return [{ type: i1.AnimationBuilder }]; } });
@@ -19,6 +19,7 @@ const STYLES = [
19
19
  * @hidden
20
20
  */
21
21
  export class DOMService {
22
+ _dummy;
22
23
  addOffset(current, addition) {
23
24
  return {
24
25
  left: current.left + addition.left,
@@ -146,9 +147,9 @@ export class DOMService {
146
147
  isZoomed() {
147
148
  return this.zoomLevel() > 1;
148
149
  }
150
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DOMService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
151
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DOMService });
149
152
  }
150
- DOMService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DOMService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
151
- DOMService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DOMService });
152
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DOMService, decorators: [{
153
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DOMService, decorators: [{
153
154
  type: Injectable
154
155
  }] });
@@ -12,6 +12,8 @@ import * as i1 from "./dom.service";
12
12
  * @hidden
13
13
  */
14
14
  export class PositionService {
15
+ _dom;
16
+ scale;
15
17
  constructor(_dom, scale = 1) {
16
18
  this._dom = _dom;
17
19
  this.scale = scale;
@@ -43,10 +45,10 @@ export class PositionService {
43
45
  offset: offset
44
46
  };
45
47
  }
48
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PositionService, deps: [{ token: i1.DOMService }, { token: SCALE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
49
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PositionService });
46
50
  }
47
- PositionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PositionService, deps: [{ token: i1.DOMService }, { token: SCALE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
48
- PositionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PositionService });
49
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PositionService, decorators: [{
51
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PositionService, decorators: [{
50
52
  type: Injectable
51
53
  }], ctorParameters: function () { return [{ type: i1.DOMService }, { type: undefined, decorators: [{
52
54
  type: Inject,
@@ -14,6 +14,9 @@ import * as i1 from "./dom.service";
14
14
  * @hidden
15
15
  */
16
16
  export class ResizeService {
17
+ _dom;
18
+ _zone;
19
+ subscription;
17
20
  constructor(_dom, _zone) {
18
21
  this._dom = _dom;
19
22
  this._zone = _zone;
@@ -37,9 +40,9 @@ export class ResizeService {
37
40
  isUnsubscribed() {
38
41
  return this.subscription && this.subscription.closed;
39
42
  }
43
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResizeService, deps: [{ token: i1.DOMService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
44
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResizeService });
40
45
  }
41
- ResizeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ResizeService, deps: [{ token: i1.DOMService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
42
- ResizeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ResizeService });
43
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ResizeService, decorators: [{
46
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResizeService, decorators: [{
44
47
  type: Injectable
45
48
  }], ctorParameters: function () { return [{ type: i1.DOMService }, { type: i0.NgZone }]; } });