@progress/kendo-angular-popup 17.0.0-develop.8 → 17.0.0
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/{esm2020 → esm2022}/package-metadata.mjs +2 -2
- package/{esm2020 → esm2022}/popup.component.mjs +193 -151
- package/{esm2020 → esm2022}/popup.module.mjs +8 -7
- package/{esm2020 → esm2022}/popup.service.mjs +13 -9
- package/{esm2020 → esm2022}/services/align.service.mjs +5 -3
- package/{esm2020 → esm2022}/services/animation.service.mjs +8 -5
- package/{esm2020 → esm2022}/services/dom.service.mjs +4 -3
- package/{esm2020 → esm2022}/services/position.service.mjs +5 -3
- package/{esm2020 → esm2022}/services/resize.service.mjs +6 -3
- package/{esm2020 → esm2022}/services/scrollable.service.mjs +7 -3
- package/{fesm2020 → fesm2022}/progress-kendo-angular-popup.mjs +250 -188
- package/models/collision.type.d.ts +1 -1
- package/models/popup-animation.interface.d.ts +2 -2
- package/models/position-mode.d.ts +1 -1
- package/package.json +11 -17
- package/popup.component.d.ts +1 -1
- package/fesm2015/progress-kendo-angular-popup.mjs +0 -1404
- /package/{esm2020 → esm2022}/directives.mjs +0 -0
- /package/{esm2020 → esm2022}/index.mjs +0 -0
- /package/{esm2020 → esm2022}/models/align-element-settings.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/models/align.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/models/collision.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/models/collision.type.mjs +0 -0
- /package/{esm2020 → esm2022}/models/margin.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/models/offset.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/models/popup-animation.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/models/popup-ref.mjs +0 -0
- /package/{esm2020 → esm2022}/models/popup-settings.mjs +0 -0
- /package/{esm2020 → esm2022}/models/position-element-settings.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/models/position-mode.mjs +0 -0
- /package/{esm2020 → esm2022}/models/position.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/progress-kendo-angular-popup.mjs +0 -0
- /package/{esm2020 → esm2022}/scale.mjs +0 -0
- /package/{esm2020 → esm2022}/util.mjs +0 -0
|
@@ -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:
|
|
13
|
-
version: '17.0.0
|
|
12
|
+
publishDate: 1731413861,
|
|
13
|
+
version: '17.0.0',
|
|
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
|
-
|
|
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
|
-
|
|
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',
|
|
@@ -3,11 +3,12 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { NgModule } from '@angular/core';
|
|
6
|
-
import {
|
|
6
|
+
import { KENDO_RESIZESENSOR, ResizeBatchService } from '@progress/kendo-angular-common';
|
|
7
7
|
import { PopupService } from './popup.service';
|
|
8
8
|
import { KENDO_POPUP } from './directives';
|
|
9
9
|
import * as i0 from "@angular/core";
|
|
10
|
-
import * as i1 from "
|
|
10
|
+
import * as i1 from "@progress/kendo-angular-common";
|
|
11
|
+
import * as i2 from "./popup.component";
|
|
11
12
|
//IMPORTANT: NgModule export kept for backwards compatibility
|
|
12
13
|
/**
|
|
13
14
|
* Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
|
|
@@ -41,15 +42,15 @@ import * as i1 from "./popup.component";
|
|
|
41
42
|
* ```
|
|
42
43
|
*/
|
|
43
44
|
export class PopupModule {
|
|
45
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
46
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: PopupModule, imports: [i1.ResizeSensorComponent, i2.PopupComponent], exports: [i2.PopupComponent] });
|
|
47
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopupModule, providers: [PopupService, ResizeBatchService], imports: [KENDO_RESIZESENSOR, KENDO_POPUP] });
|
|
44
48
|
}
|
|
45
|
-
|
|
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: [{
|
|
49
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopupModule, decorators: [{
|
|
49
50
|
type: NgModule,
|
|
50
51
|
args: [{
|
|
51
52
|
exports: [...KENDO_POPUP],
|
|
52
|
-
imports: [
|
|
53
|
+
imports: [...KENDO_RESIZESENSOR, ...KENDO_POPUP],
|
|
53
54
|
providers: [PopupService, ResizeBatchService]
|
|
54
55
|
}]
|
|
55
56
|
}] });
|
|
@@ -76,12 +76,10 @@ export const POPUP_CONTAINER = new InjectionToken('Popup Container');
|
|
|
76
76
|
* @class PopupService
|
|
77
77
|
*/
|
|
78
78
|
export class PopupService {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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 }]; } });
|
|
@@ -18,6 +18,10 @@ export const THRESHOLD_DIFF = 1;
|
|
|
18
18
|
* @hidden
|
|
19
19
|
*/
|
|
20
20
|
export class ScrollableService {
|
|
21
|
+
_dom;
|
|
22
|
+
_zone;
|
|
23
|
+
element;
|
|
24
|
+
subscription;
|
|
21
25
|
constructor(_dom, _zone) {
|
|
22
26
|
this._dom = _dom;
|
|
23
27
|
this._zone = _zone;
|
|
@@ -69,9 +73,9 @@ export class ScrollableService {
|
|
|
69
73
|
}
|
|
70
74
|
return true;
|
|
71
75
|
}
|
|
76
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollableService, deps: [{ token: i1.DOMService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
77
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollableService });
|
|
72
78
|
}
|
|
73
|
-
|
|
74
|
-
ScrollableService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollableService });
|
|
75
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollableService, decorators: [{
|
|
79
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollableService, decorators: [{
|
|
76
80
|
type: Injectable
|
|
77
81
|
}], ctorParameters: function () { return [{ type: i1.DOMService }, { type: i0.NgZone }]; } });
|