@ckeditor/ckeditor5-ui 40.0.0 → 40.1.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.
Files changed (165) hide show
  1. package/LICENSE.md +3 -3
  2. package/lang/translations/pt-br.po +1 -1
  3. package/lang/translations/ug.po +26 -26
  4. package/package.json +3 -3
  5. package/src/arialiveannouncer.d.ts +94 -0
  6. package/src/arialiveannouncer.js +113 -0
  7. package/src/augmentation.d.ts +86 -86
  8. package/src/augmentation.js +5 -5
  9. package/src/autocomplete/autocompleteview.d.ts +81 -81
  10. package/src/autocomplete/autocompleteview.js +153 -146
  11. package/src/bindings/addkeyboardhandlingforgrid.d.ts +27 -27
  12. package/src/bindings/addkeyboardhandlingforgrid.js +107 -107
  13. package/src/bindings/clickoutsidehandler.d.ts +28 -28
  14. package/src/bindings/clickoutsidehandler.js +36 -36
  15. package/src/bindings/csstransitiondisablermixin.d.ts +40 -40
  16. package/src/bindings/csstransitiondisablermixin.js +55 -55
  17. package/src/bindings/injectcsstransitiondisabler.d.ts +59 -59
  18. package/src/bindings/injectcsstransitiondisabler.js +71 -71
  19. package/src/bindings/preventdefault.d.ts +33 -33
  20. package/src/bindings/preventdefault.js +34 -34
  21. package/src/bindings/submithandler.d.ts +57 -57
  22. package/src/bindings/submithandler.js +47 -47
  23. package/src/button/button.d.ts +172 -178
  24. package/src/button/button.js +5 -5
  25. package/src/button/buttonlabel.d.ts +34 -34
  26. package/src/button/buttonlabel.js +5 -5
  27. package/src/button/buttonlabelview.d.ts +31 -31
  28. package/src/button/buttonlabelview.js +42 -42
  29. package/src/button/buttonview.d.ts +181 -185
  30. package/src/button/buttonview.js +217 -219
  31. package/src/button/switchbuttonview.d.ts +45 -45
  32. package/src/button/switchbuttonview.js +75 -75
  33. package/src/colorgrid/colorgridview.d.ts +132 -132
  34. package/src/colorgrid/colorgridview.js +124 -124
  35. package/src/colorgrid/colortileview.d.ts +28 -28
  36. package/src/colorgrid/colortileview.js +40 -40
  37. package/src/colorgrid/utils.d.ts +47 -47
  38. package/src/colorgrid/utils.js +84 -84
  39. package/src/colorpicker/colorpickerview.d.ts +137 -137
  40. package/src/colorpicker/colorpickerview.js +270 -270
  41. package/src/colorpicker/utils.d.ts +43 -43
  42. package/src/colorpicker/utils.js +99 -99
  43. package/src/colorselector/colorgridsfragmentview.d.ts +194 -194
  44. package/src/colorselector/colorgridsfragmentview.js +289 -289
  45. package/src/colorselector/colorpickerfragmentview.d.ts +128 -128
  46. package/src/colorselector/colorpickerfragmentview.js +205 -205
  47. package/src/colorselector/colorselectorview.d.ts +242 -242
  48. package/src/colorselector/colorselectorview.js +256 -256
  49. package/src/colorselector/documentcolorcollection.d.ts +70 -70
  50. package/src/colorselector/documentcolorcollection.js +42 -42
  51. package/src/componentfactory.d.ts +81 -81
  52. package/src/componentfactory.js +104 -104
  53. package/src/dropdown/button/dropdownbutton.d.ts +25 -25
  54. package/src/dropdown/button/dropdownbutton.js +5 -5
  55. package/src/dropdown/button/dropdownbuttonview.d.ts +48 -48
  56. package/src/dropdown/button/dropdownbuttonview.js +66 -66
  57. package/src/dropdown/button/splitbuttonview.d.ts +161 -161
  58. package/src/dropdown/button/splitbuttonview.js +152 -152
  59. package/src/dropdown/dropdownpanelfocusable.d.ts +21 -21
  60. package/src/dropdown/dropdownpanelfocusable.js +5 -5
  61. package/src/dropdown/dropdownpanelview.d.ts +62 -62
  62. package/src/dropdown/dropdownpanelview.js +97 -97
  63. package/src/dropdown/dropdownview.d.ts +315 -315
  64. package/src/dropdown/dropdownview.js +379 -379
  65. package/src/dropdown/utils.d.ts +235 -235
  66. package/src/dropdown/utils.js +463 -458
  67. package/src/editableui/editableuiview.d.ts +72 -72
  68. package/src/editableui/editableuiview.js +112 -112
  69. package/src/editableui/inline/inlineeditableuiview.d.ts +40 -40
  70. package/src/editableui/inline/inlineeditableuiview.js +48 -48
  71. package/src/editorui/bodycollection.d.ts +55 -55
  72. package/src/editorui/bodycollection.js +84 -84
  73. package/src/editorui/boxed/boxededitoruiview.d.ts +40 -40
  74. package/src/editorui/boxed/boxededitoruiview.js +81 -81
  75. package/src/editorui/editorui.d.ts +288 -282
  76. package/src/editorui/editorui.js +412 -410
  77. package/src/editorui/editoruiview.d.ts +39 -39
  78. package/src/editorui/editoruiview.js +38 -38
  79. package/src/editorui/poweredby.d.ts +71 -71
  80. package/src/editorui/poweredby.js +276 -276
  81. package/src/focuscycler.d.ts +226 -226
  82. package/src/focuscycler.js +245 -245
  83. package/src/formheader/formheaderview.d.ts +59 -59
  84. package/src/formheader/formheaderview.js +69 -69
  85. package/src/highlightedtext/highlightedtextview.d.ts +38 -38
  86. package/src/highlightedtext/highlightedtextview.js +102 -102
  87. package/src/icon/iconview.d.ts +85 -85
  88. package/src/icon/iconview.js +114 -114
  89. package/src/iframe/iframeview.d.ts +50 -50
  90. package/src/iframe/iframeview.js +63 -63
  91. package/src/index.d.ts +73 -73
  92. package/src/index.js +70 -70
  93. package/src/input/inputbase.d.ts +107 -107
  94. package/src/input/inputbase.js +110 -110
  95. package/src/input/inputview.d.ts +36 -36
  96. package/src/input/inputview.js +24 -24
  97. package/src/inputnumber/inputnumberview.d.ts +49 -49
  98. package/src/inputnumber/inputnumberview.js +40 -40
  99. package/src/inputtext/inputtextview.d.ts +18 -18
  100. package/src/inputtext/inputtextview.js +27 -27
  101. package/src/label/labelview.d.ts +36 -36
  102. package/src/label/labelview.js +41 -41
  103. package/src/labeledfield/labeledfieldview.d.ts +187 -187
  104. package/src/labeledfield/labeledfieldview.js +157 -157
  105. package/src/labeledfield/utils.d.ts +123 -123
  106. package/src/labeledfield/utils.js +176 -176
  107. package/src/labeledinput/labeledinputview.d.ts +125 -125
  108. package/src/labeledinput/labeledinputview.js +125 -125
  109. package/src/list/listitemgroupview.d.ts +59 -51
  110. package/src/list/listitemgroupview.js +63 -75
  111. package/src/list/listitemview.d.ts +36 -36
  112. package/src/list/listitemview.js +42 -42
  113. package/src/list/listseparatorview.d.ts +18 -18
  114. package/src/list/listseparatorview.js +28 -28
  115. package/src/list/listview.d.ts +122 -122
  116. package/src/list/listview.js +187 -187
  117. package/src/model.d.ts +22 -22
  118. package/src/model.js +31 -31
  119. package/src/notification/notification.d.ts +211 -211
  120. package/src/notification/notification.js +187 -187
  121. package/src/panel/balloon/balloonpanelview.d.ts +685 -685
  122. package/src/panel/balloon/balloonpanelview.js +1010 -1010
  123. package/src/panel/balloon/contextualballoon.d.ts +299 -299
  124. package/src/panel/balloon/contextualballoon.js +572 -572
  125. package/src/panel/sticky/stickypanelview.d.ts +156 -156
  126. package/src/panel/sticky/stickypanelview.js +234 -234
  127. package/src/search/filteredview.d.ts +31 -31
  128. package/src/search/filteredview.js +5 -5
  129. package/src/search/searchinfoview.d.ts +45 -45
  130. package/src/search/searchinfoview.js +59 -59
  131. package/src/search/searchresultsview.d.ts +54 -54
  132. package/src/search/searchresultsview.js +65 -65
  133. package/src/search/text/searchtextqueryview.d.ts +76 -76
  134. package/src/search/text/searchtextqueryview.js +75 -75
  135. package/src/search/text/searchtextview.d.ts +219 -219
  136. package/src/search/text/searchtextview.js +201 -201
  137. package/src/spinner/spinnerview.d.ts +25 -25
  138. package/src/spinner/spinnerview.js +38 -38
  139. package/src/template.d.ts +942 -942
  140. package/src/template.js +1294 -1294
  141. package/src/textarea/textareaview.d.ts +88 -88
  142. package/src/textarea/textareaview.js +142 -140
  143. package/src/toolbar/balloon/balloontoolbar.d.ts +122 -122
  144. package/src/toolbar/balloon/balloontoolbar.js +300 -300
  145. package/src/toolbar/block/blockbuttonview.d.ts +35 -35
  146. package/src/toolbar/block/blockbuttonview.js +41 -41
  147. package/src/toolbar/block/blocktoolbar.d.ts +161 -161
  148. package/src/toolbar/block/blocktoolbar.js +395 -395
  149. package/src/toolbar/normalizetoolbarconfig.d.ts +40 -40
  150. package/src/toolbar/normalizetoolbarconfig.js +52 -51
  151. package/src/toolbar/toolbarlinebreakview.d.ts +18 -18
  152. package/src/toolbar/toolbarlinebreakview.js +28 -28
  153. package/src/toolbar/toolbarseparatorview.d.ts +18 -18
  154. package/src/toolbar/toolbarseparatorview.js +28 -28
  155. package/src/toolbar/toolbarview.d.ts +266 -266
  156. package/src/toolbar/toolbarview.js +719 -719
  157. package/src/tooltipmanager.d.ts +180 -180
  158. package/src/tooltipmanager.js +353 -353
  159. package/src/view.d.ts +422 -422
  160. package/src/view.js +396 -396
  161. package/src/viewcollection.d.ts +139 -139
  162. package/src/viewcollection.js +206 -206
  163. package/theme/components/arialiveannouncer/arialiveannouncer.css +10 -0
  164. package/theme/components/button/button.css +9 -1
  165. package/theme/components/formheader/formheader.css +0 -4
@@ -1,685 +1,685 @@
1
- /**
2
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
- */
5
- /**
6
- * @module ui/panel/balloon/balloonpanelview
7
- */
8
- import View from '../../view';
9
- import type ViewCollection from '../../viewcollection';
10
- import { type Locale, type PositionOptions, type PositioningFunction } from '@ckeditor/ckeditor5-utils';
11
- import '../../../theme/components/panel/balloonpanel.css';
12
- /**
13
- * The balloon panel view class.
14
- *
15
- * A floating container which can
16
- * {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView#pin pin} to any
17
- * {@link module:utils/dom/position~Options#target target} in the DOM and remain in that position
18
- * e.g. when the web page is scrolled.
19
- *
20
- * The balloon panel can be used to display contextual, non-blocking UI like forms, toolbars and
21
- * the like in its {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView#content} view
22
- * collection.
23
- *
24
- * There is a number of {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.defaultPositions}
25
- * that the balloon can use, automatically switching from one to another when the viewport space becomes
26
- * scarce to keep the balloon visible to the user as long as it is possible. The balloon will also
27
- * accept any custom position set provided by the user compatible with the
28
- * {@link module:utils/dom/position~Options options}.
29
- *
30
- * ```ts
31
- * const panel = new BalloonPanelView( locale );
32
- * const childView = new ChildView();
33
- * const positions = BalloonPanelView.defaultPositions;
34
- *
35
- * panel.render();
36
- *
37
- * // Add a child view to the panel's content collection.
38
- * panel.content.add( childView );
39
- *
40
- * // Start pinning the panel to an element with the "target" id DOM.
41
- * // The balloon will remain pinned until unpin() is called.
42
- * panel.pin( {
43
- * target: document.querySelector( '#target' ),
44
- * positions: [
45
- * positions.northArrowSouth,
46
- * positions.southArrowNorth
47
- * ]
48
- * } );
49
- * ```
50
- */
51
- export default class BalloonPanelView extends View {
52
- /**
53
- * A collection of the child views that creates the balloon panel contents.
54
- */
55
- readonly content: ViewCollection;
56
- /**
57
- * The absolute top position of the balloon panel in pixels.
58
- *
59
- * @observable
60
- * @default 0
61
- */
62
- top: number;
63
- /**
64
- * The absolute left position of the balloon panel in pixels.
65
- *
66
- * @observable
67
- * @default 0
68
- */
69
- left: number;
70
- /**
71
- * The balloon panel's current position. The position name is reflected in the CSS class set
72
- * to the balloon, i.e. `.ck-balloon-panel_arrow_nw` for the "arrow_nw" position. The class
73
- * controls the minor aspects of the balloon's visual appearance like the placement
74
- * of an {@link #withArrow arrow}. To support a new position, an additional CSS must be created.
75
- *
76
- * Default position names correspond with
77
- * {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.defaultPositions}.
78
- *
79
- * See the {@link #attachTo} and {@link #pin} methods to learn about custom balloon positions.
80
- *
81
- * @observable
82
- * @default 'arrow_nw'
83
- */
84
- position: 'arrow_nw' | 'arrow_ne' | 'arrow_sw' | 'arrow_se';
85
- /**
86
- * Controls whether the balloon panel is visible or not.
87
- *
88
- * @observable
89
- * @default false
90
- */
91
- isVisible: boolean;
92
- /**
93
- * Controls whether the balloon panel has an arrow. The presence of the arrow
94
- * is reflected in the `ck-balloon-panel_with-arrow` CSS class.
95
- *
96
- * @observable
97
- * @default true
98
- */
99
- withArrow: boolean;
100
- /**
101
- * An additional CSS class added to the {@link #element}.
102
- *
103
- * @observable
104
- */
105
- class: string | undefined;
106
- /**
107
- * A callback that starts pinning the panel when {@link #isVisible} gets
108
- * `true`. Used by {@link #pin}.
109
- *
110
- * @private
111
- */
112
- private _pinWhenIsVisibleCallback;
113
- /**
114
- * @inheritDoc
115
- */
116
- constructor(locale?: Locale);
117
- /**
118
- * Shows the panel.
119
- *
120
- * See {@link #isVisible}.
121
- */
122
- show(): void;
123
- /**
124
- * Hides the panel.
125
- *
126
- * See {@link #isVisible}.
127
- */
128
- hide(): void;
129
- /**
130
- * Attaches the panel to a specified {@link module:utils/dom/position~Options#target} with a
131
- * smart positioning heuristics that chooses from available positions to make sure the panel
132
- * is visible to the user i.e. within the limits of the viewport.
133
- *
134
- * This method accepts configuration {@link module:utils/dom/position~Options options}
135
- * to set the `target`, optional `limiter` and `positions` the balloon should choose from.
136
- *
137
- * ```ts
138
- * const panel = new BalloonPanelView( locale );
139
- * const positions = BalloonPanelView.defaultPositions;
140
- *
141
- * panel.render();
142
- *
143
- * // Attach the panel to an element with the "target" id DOM.
144
- * panel.attachTo( {
145
- * target: document.querySelector( '#target' ),
146
- * positions: [
147
- * positions.northArrowSouth,
148
- * positions.southArrowNorth
149
- * ]
150
- * } );
151
- * ```
152
- *
153
- * **Note**: Attaching the panel will also automatically {@link #show} it.
154
- *
155
- * **Note**: An attached panel will not follow its target when the window is scrolled or resized.
156
- * See the {@link #pin} method for a more permanent positioning strategy.
157
- *
158
- * @param options Positioning options compatible with {@link module:utils/dom/position~getOptimalPosition}.
159
- * Default `positions` array is {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.defaultPositions}.
160
- */
161
- attachTo(options: Partial<PositionOptions>): void;
162
- /**
163
- * Works the same way as the {@link #attachTo} method except that the position of the panel is
164
- * continuously updated when:
165
- *
166
- * * any ancestor of the {@link module:utils/dom/position~Options#target}
167
- * or {@link module:utils/dom/position~Options#limiter} is scrolled,
168
- * * the browser window gets resized or scrolled.
169
- *
170
- * Thanks to that, the panel always sticks to the {@link module:utils/dom/position~Options#target}
171
- * and is immune to the changing environment.
172
- *
173
- * ```ts
174
- * const panel = new BalloonPanelView( locale );
175
- * const positions = BalloonPanelView.defaultPositions;
176
- *
177
- * panel.render();
178
- *
179
- * // Pin the panel to an element with the "target" id DOM.
180
- * panel.pin( {
181
- * target: document.querySelector( '#target' ),
182
- * positions: [
183
- * positions.northArrowSouth,
184
- * positions.southArrowNorth
185
- * ]
186
- * } );
187
- * ```
188
- *
189
- * To leave the pinned state, use the {@link #unpin} method.
190
- *
191
- * **Note**: Pinning the panel will also automatically {@link #show} it.
192
- *
193
- * @param options Positioning options compatible with {@link module:utils/dom/position~getOptimalPosition}.
194
- * Default `positions` array is {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.defaultPositions}.
195
- */
196
- pin(options: Partial<PositionOptions>): void;
197
- /**
198
- * Stops pinning the panel, as set up by {@link #pin}.
199
- */
200
- unpin(): void;
201
- /**
202
- * Starts managing the pinned state of the panel. See {@link #pin}.
203
- *
204
- * @param options Positioning options compatible with {@link module:utils/dom/position~getOptimalPosition}.
205
- */
206
- private _startPinning;
207
- /**
208
- * Stops managing the pinned state of the panel. See {@link #pin}.
209
- */
210
- private _stopPinning;
211
- /**
212
- * A side offset of the arrow tip from the edge of the balloon. Controlled by CSS.
213
- *
214
- * ```
215
- * ┌───────────────────────┐
216
- * │ │
217
- * │ Balloon │
218
- * │ Content │
219
- * │ │
220
- * └──+ +───────────────┘
221
- * | \ /
222
- * | \/
223
- * >┼─────┼< ─────────────────────── side offset
224
- *
225
- * ```
226
- *
227
- * @default 25
228
- */
229
- static arrowSideOffset: number;
230
- /**
231
- * A height offset of the arrow from the edge of the balloon. Controlled by CSS.
232
- *
233
- * ```
234
- * ┌───────────────────────┐
235
- * │ │
236
- * │ Balloon │
237
- * │ Content │ ╱-- arrow height offset
238
- * │ │ V
239
- * └──+ +───────────────┘ --- ─┼───────
240
- * \ / │
241
- * \/ │
242
- * ────────────────────────────────┼───────
243
- * ^
244
- *
245
- *
246
- * >┼────┼< arrow height offset
247
- * │ │
248
- * │ ┌────────────────────────┐
249
- * │ │ │
250
- * │ ╱ │
251
- * │ ╱ Balloon │
252
- * │ ╲ Content │
253
- * │ ╲ │
254
- * │ │ │
255
- * │ └────────────────────────┘
256
- * ```
257
- *
258
- * @default 10
259
- */
260
- static arrowHeightOffset: number;
261
- /**
262
- * A vertical offset of the balloon panel from the edge of the viewport if sticky.
263
- * It helps in accessing toolbar buttons underneath the balloon panel.
264
- *
265
- * ```
266
- * ┌───────────────────────────────────────────────────┐
267
- * │ Target │
268
- * │ │
269
- * │ /── vertical offset │
270
- * ┌─────────────────────────────V─────────────────────────┐
271
- * │ Toolbar ┌─────────────┐ │
272
- * ├────────────────────│ Balloon │────────────────────┤
273
- * │ │ └─────────────┘ │ │
274
- * │ │ │ │
275
- * │ │ │ │
276
- * │ │ │ │
277
- * │ └───────────────────────────────────────────────────┘ │
278
- * │ Viewport │
279
- * └───────────────────────────────────────────────────────┘
280
- * ```
281
- *
282
- * @default 20
283
- */
284
- static stickyVerticalOffset: number;
285
- /**
286
- * Function used to calculate the optimal position for the balloon.
287
- */
288
- private static _getOptimalPosition;
289
- /**
290
- * A default set of positioning functions used by the balloon panel view
291
- * when attaching using the {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView#attachTo} method.
292
- *
293
- * The available positioning functions are as follows:
294
- *
295
- * **North west**
296
- *
297
- * * `northWestArrowSouthWest`
298
- *
299
- * ```
300
- * +-----------------+
301
- * | Balloon |
302
- * +-----------------+
303
- * V
304
- * [ Target ]
305
- * ```
306
- *
307
- * * `northWestArrowSouthMiddleWest`
308
- *
309
- * ```
310
- * +-----------------+
311
- * | Balloon |
312
- * +-----------------+
313
- * V
314
- * [ Target ]
315
- * ```
316
- *
317
- * * `northWestArrowSouth`
318
- *
319
- * ```
320
- * +-----------------+
321
- * | Balloon |
322
- * +-----------------+
323
- * V
324
- * [ Target ]
325
- * ```
326
- *
327
- * * `northWestArrowSouthMiddleEast`
328
- *
329
- * ```
330
- * +-----------------+
331
- * | Balloon |
332
- * +-----------------+
333
- * V
334
- * [ Target ]
335
- * ```
336
- *
337
- * * `northWestArrowSouthEast`
338
- *
339
- * ```
340
- * +-----------------+
341
- * | Balloon |
342
- * +-----------------+
343
- * V
344
- * [ Target ]
345
- * ```
346
- *
347
- * **North**
348
- *
349
- * * `northArrowSouthWest`
350
- *
351
- * ```
352
- * +-----------------+
353
- * | Balloon |
354
- * +-----------------+
355
- * V
356
- * [ Target ]
357
- * ```
358
- *
359
- * * `northArrowSouthMiddleWest`
360
- *
361
- * ```
362
- * +-----------------+
363
- * | Balloon |
364
- * +-----------------+
365
- * V
366
- * [ Target ]
367
- * ```
368
- * * `northArrowSouth`
369
- *
370
- * ```
371
- * +-----------------+
372
- * | Balloon |
373
- * +-----------------+
374
- * V
375
- * [ Target ]
376
- * ```
377
- *
378
- * * `northArrowSouthMiddleEast`
379
- *
380
- * ```
381
- * +-----------------+
382
- * | Balloon |
383
- * +-----------------+
384
- * V
385
- * [ Target ]
386
- * ```
387
- *
388
- * * `northArrowSouthEast`
389
- *
390
- * ```
391
- * +-----------------+
392
- * | Balloon |
393
- * +-----------------+
394
- * V
395
- * [ Target ]
396
- * ```
397
- *
398
- * **North east**
399
- *
400
- * * `northEastArrowSouthWest`
401
- *
402
- * ```
403
- * +-----------------+
404
- * | Balloon |
405
- * +-----------------+
406
- * V
407
- * [ Target ]
408
- * ```
409
- *
410
- * * `northEastArrowSouthMiddleWest`
411
- *
412
- * ```
413
- * +-----------------+
414
- * | Balloon |
415
- * +-----------------+
416
- * V
417
- * [ Target ]
418
- * ```
419
- *
420
- * * `northEastArrowSouth`
421
- *
422
- * ```
423
- * +-----------------+
424
- * | Balloon |
425
- * +-----------------+
426
- * V
427
- * [ Target ]
428
- * ```
429
- *
430
- * * `northEastArrowSouthMiddleEast`
431
- *
432
- * ```
433
- * +-----------------+
434
- * | Balloon |
435
- * +-----------------+
436
- * V
437
- * [ Target ]
438
- * ```
439
- *
440
- * * `northEastArrowSouthEast`
441
- *
442
- * ```
443
- * +-----------------+
444
- * | Balloon |
445
- * +-----------------+
446
- * V
447
- * [ Target ]
448
- * ```
449
- *
450
- * **South**
451
- *
452
- * * `southArrowNorthWest`
453
- *
454
- * ```
455
- * [ Target ]
456
- * ^
457
- * +-----------------+
458
- * | Balloon |
459
- * +-----------------+
460
- * ```
461
- *
462
- * * `southArrowNorthMiddleWest`
463
- *
464
- * ```
465
- * [ Target ]
466
- * ^
467
- * +-----------------+
468
- * | Balloon |
469
- * +-----------------+
470
- * ```
471
- *
472
- * * `southArrowNorth`
473
- *
474
- * ```
475
- * [ Target ]
476
- * ^
477
- * +-----------------+
478
- * | Balloon |
479
- * +-----------------+
480
- * ```
481
- *
482
- * * `southArrowNorthMiddleEast`
483
- *
484
- * ```
485
- * [ Target ]
486
- * ^
487
- * +-----------------+
488
- * | Balloon |
489
- * +-----------------+
490
- * ```
491
- *
492
- * * `southArrowNorthEast`
493
- *
494
- * ```
495
- * [ Target ]
496
- * ^
497
- * +-----------------+
498
- * | Balloon |
499
- * +-----------------+
500
- * ```
501
- *
502
- * **South west**
503
- *
504
- * * `southWestArrowNorthWest`
505
- *
506
- *
507
- * ```
508
- * [ Target ]
509
- * ^
510
- * +-----------------+
511
- * | Balloon |
512
- * +-----------------+
513
- * ```
514
- *
515
- * * `southWestArrowNorthMiddleWest`
516
- *
517
- * ```
518
- * [ Target ]
519
- * ^
520
- * +-----------------+
521
- * | Balloon |
522
- * +-----------------+
523
- * ```
524
- *
525
- * * `southWestArrowNorth`
526
- *
527
- * ```
528
- * [ Target ]
529
- * ^
530
- * +-----------------+
531
- * | Balloon |
532
- * +-----------------+
533
- * ```
534
- *
535
- * * `southWestArrowNorthMiddleEast`
536
- *
537
- * ```
538
- * [ Target ]
539
- * ^
540
- * +-----------------+
541
- * | Balloon |
542
- * +-----------------+
543
- * ```
544
- *
545
- * * `southWestArrowNorthEast`
546
- *
547
- * ```
548
- * [ Target ]
549
- * ^
550
- * +-----------------+
551
- * | Balloon |
552
- * +-----------------+
553
- * ```
554
- *
555
- * **South east**
556
- *
557
- * * `southEastArrowNorthWest`
558
- *
559
- * ```
560
- * [ Target ]
561
- * ^
562
- * +-----------------+
563
- * | Balloon |
564
- * +-----------------+
565
- * ```
566
- *
567
- * * `southEastArrowNorthMiddleWest`
568
- *
569
- * ```
570
- * [ Target ]
571
- * ^
572
- * +-----------------+
573
- * | Balloon |
574
- * +-----------------+
575
- * ```
576
- *
577
- * * `southEastArrowNorth`
578
- *
579
- * ```
580
- * [ Target ]
581
- * ^
582
- * +-----------------+
583
- * | Balloon |
584
- * +-----------------+
585
- * ```
586
- *
587
- * * `southEastArrowNorthMiddleEast`
588
- *
589
- * ```
590
- * [ Target ]
591
- * ^
592
- * +-----------------+
593
- * | Balloon |
594
- * +-----------------+
595
- * ```
596
- *
597
- * * `southEastArrowNorthEast`
598
- *
599
- * ```
600
- * [ Target ]
601
- * ^
602
- * +-----------------+
603
- * | Balloon |
604
- * +-----------------+
605
- * ```
606
- *
607
- * **West**
608
- *
609
- * * `westArrowEast`
610
- *
611
- * ```
612
- * +-----------------+
613
- * | Balloon |>[ Target ]
614
- * +-----------------+
615
- * ```
616
- *
617
- * **East**
618
- *
619
- * * `eastArrowWest`
620
- *
621
- * ```
622
- * +-----------------+
623
- * [ Target ]<| Balloon |
624
- * +-----------------+
625
- * ```
626
- *
627
- * **Sticky**
628
- *
629
- * * `viewportStickyNorth`
630
- *
631
- * ```
632
- * +---------------------------+
633
- * | [ Target ] |
634
- * | |
635
- * +-----------------------------------+
636
- * | | +-----------------+ | |
637
- * | | | Balloon | | |
638
- * | | +-----------------+ | |
639
- * | | | |
640
- * | | | |
641
- * | | | |
642
- * | | | |
643
- * | +---------------------------+ |
644
- * | Viewport |
645
- * +-----------------------------------+
646
- * ```
647
- *
648
- * See {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView#attachTo}.
649
- *
650
- * Positioning functions must be compatible with {@link module:utils/dom/position~Position}.
651
- *
652
- * Default positioning functions with customized offsets can be generated using
653
- * {@link module:ui/panel/balloon/balloonpanelview~generatePositions}.
654
- *
655
- * The name that the position function returns will be reflected in the balloon panel's class that
656
- * controls the placement of the "arrow". See {@link #position} to learn more.
657
- */
658
- static defaultPositions: Record<string, PositioningFunction>;
659
- }
660
- /**
661
- * Returns available {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView}
662
- * {@link module:utils/dom/position~PositioningFunction positioning functions} adjusted by the specific offsets.
663
- *
664
- * @internal
665
- * @param options Options to generate positions. If not specified, this helper will simply return
666
- * {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.defaultPositions}.
667
- * @param options.sideOffset A custom side offset (in pixels) of each position. If
668
- * not specified, {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.arrowSideOffset the default value}
669
- * will be used.
670
- * @param options.heightOffset A custom height offset (in pixels) of each position. If
671
- * not specified, {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.arrowHeightOffset the default value}
672
- * will be used.
673
- * @param options.stickyVerticalOffset A custom offset (in pixels) of the `viewportStickyNorth` positioning function.
674
- * If not specified, {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.stickyVerticalOffset the default value}
675
- * will be used.
676
- * @param options.config Additional configuration of the balloon balloon panel view.
677
- * Currently only {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView#withArrow} is supported. Learn more
678
- * about {@link module:utils/dom/position~PositioningFunction positioning functions}.
679
- */
680
- export declare function generatePositions(options?: {
681
- sideOffset?: number;
682
- heightOffset?: number;
683
- stickyVerticalOffset?: number;
684
- config?: object;
685
- }): Record<string, PositioningFunction>;
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ /**
6
+ * @module ui/panel/balloon/balloonpanelview
7
+ */
8
+ import View from '../../view';
9
+ import type ViewCollection from '../../viewcollection';
10
+ import { type Locale, type PositionOptions, type PositioningFunction } from '@ckeditor/ckeditor5-utils';
11
+ import '../../../theme/components/panel/balloonpanel.css';
12
+ /**
13
+ * The balloon panel view class.
14
+ *
15
+ * A floating container which can
16
+ * {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView#pin pin} to any
17
+ * {@link module:utils/dom/position~Options#target target} in the DOM and remain in that position
18
+ * e.g. when the web page is scrolled.
19
+ *
20
+ * The balloon panel can be used to display contextual, non-blocking UI like forms, toolbars and
21
+ * the like in its {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView#content} view
22
+ * collection.
23
+ *
24
+ * There is a number of {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.defaultPositions}
25
+ * that the balloon can use, automatically switching from one to another when the viewport space becomes
26
+ * scarce to keep the balloon visible to the user as long as it is possible. The balloon will also
27
+ * accept any custom position set provided by the user compatible with the
28
+ * {@link module:utils/dom/position~Options options}.
29
+ *
30
+ * ```ts
31
+ * const panel = new BalloonPanelView( locale );
32
+ * const childView = new ChildView();
33
+ * const positions = BalloonPanelView.defaultPositions;
34
+ *
35
+ * panel.render();
36
+ *
37
+ * // Add a child view to the panel's content collection.
38
+ * panel.content.add( childView );
39
+ *
40
+ * // Start pinning the panel to an element with the "target" id DOM.
41
+ * // The balloon will remain pinned until unpin() is called.
42
+ * panel.pin( {
43
+ * target: document.querySelector( '#target' ),
44
+ * positions: [
45
+ * positions.northArrowSouth,
46
+ * positions.southArrowNorth
47
+ * ]
48
+ * } );
49
+ * ```
50
+ */
51
+ export default class BalloonPanelView extends View {
52
+ /**
53
+ * A collection of the child views that creates the balloon panel contents.
54
+ */
55
+ readonly content: ViewCollection;
56
+ /**
57
+ * The absolute top position of the balloon panel in pixels.
58
+ *
59
+ * @observable
60
+ * @default 0
61
+ */
62
+ top: number;
63
+ /**
64
+ * The absolute left position of the balloon panel in pixels.
65
+ *
66
+ * @observable
67
+ * @default 0
68
+ */
69
+ left: number;
70
+ /**
71
+ * The balloon panel's current position. The position name is reflected in the CSS class set
72
+ * to the balloon, i.e. `.ck-balloon-panel_arrow_nw` for the "arrow_nw" position. The class
73
+ * controls the minor aspects of the balloon's visual appearance like the placement
74
+ * of an {@link #withArrow arrow}. To support a new position, an additional CSS must be created.
75
+ *
76
+ * Default position names correspond with
77
+ * {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.defaultPositions}.
78
+ *
79
+ * See the {@link #attachTo} and {@link #pin} methods to learn about custom balloon positions.
80
+ *
81
+ * @observable
82
+ * @default 'arrow_nw'
83
+ */
84
+ position: 'arrow_nw' | 'arrow_ne' | 'arrow_sw' | 'arrow_se';
85
+ /**
86
+ * Controls whether the balloon panel is visible or not.
87
+ *
88
+ * @observable
89
+ * @default false
90
+ */
91
+ isVisible: boolean;
92
+ /**
93
+ * Controls whether the balloon panel has an arrow. The presence of the arrow
94
+ * is reflected in the `ck-balloon-panel_with-arrow` CSS class.
95
+ *
96
+ * @observable
97
+ * @default true
98
+ */
99
+ withArrow: boolean;
100
+ /**
101
+ * An additional CSS class added to the {@link #element}.
102
+ *
103
+ * @observable
104
+ */
105
+ class: string | undefined;
106
+ /**
107
+ * A callback that starts pinning the panel when {@link #isVisible} gets
108
+ * `true`. Used by {@link #pin}.
109
+ *
110
+ * @private
111
+ */
112
+ private _pinWhenIsVisibleCallback;
113
+ /**
114
+ * @inheritDoc
115
+ */
116
+ constructor(locale?: Locale);
117
+ /**
118
+ * Shows the panel.
119
+ *
120
+ * See {@link #isVisible}.
121
+ */
122
+ show(): void;
123
+ /**
124
+ * Hides the panel.
125
+ *
126
+ * See {@link #isVisible}.
127
+ */
128
+ hide(): void;
129
+ /**
130
+ * Attaches the panel to a specified {@link module:utils/dom/position~Options#target} with a
131
+ * smart positioning heuristics that chooses from available positions to make sure the panel
132
+ * is visible to the user i.e. within the limits of the viewport.
133
+ *
134
+ * This method accepts configuration {@link module:utils/dom/position~Options options}
135
+ * to set the `target`, optional `limiter` and `positions` the balloon should choose from.
136
+ *
137
+ * ```ts
138
+ * const panel = new BalloonPanelView( locale );
139
+ * const positions = BalloonPanelView.defaultPositions;
140
+ *
141
+ * panel.render();
142
+ *
143
+ * // Attach the panel to an element with the "target" id DOM.
144
+ * panel.attachTo( {
145
+ * target: document.querySelector( '#target' ),
146
+ * positions: [
147
+ * positions.northArrowSouth,
148
+ * positions.southArrowNorth
149
+ * ]
150
+ * } );
151
+ * ```
152
+ *
153
+ * **Note**: Attaching the panel will also automatically {@link #show} it.
154
+ *
155
+ * **Note**: An attached panel will not follow its target when the window is scrolled or resized.
156
+ * See the {@link #pin} method for a more permanent positioning strategy.
157
+ *
158
+ * @param options Positioning options compatible with {@link module:utils/dom/position~getOptimalPosition}.
159
+ * Default `positions` array is {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.defaultPositions}.
160
+ */
161
+ attachTo(options: Partial<PositionOptions>): void;
162
+ /**
163
+ * Works the same way as the {@link #attachTo} method except that the position of the panel is
164
+ * continuously updated when:
165
+ *
166
+ * * any ancestor of the {@link module:utils/dom/position~Options#target}
167
+ * or {@link module:utils/dom/position~Options#limiter} is scrolled,
168
+ * * the browser window gets resized or scrolled.
169
+ *
170
+ * Thanks to that, the panel always sticks to the {@link module:utils/dom/position~Options#target}
171
+ * and is immune to the changing environment.
172
+ *
173
+ * ```ts
174
+ * const panel = new BalloonPanelView( locale );
175
+ * const positions = BalloonPanelView.defaultPositions;
176
+ *
177
+ * panel.render();
178
+ *
179
+ * // Pin the panel to an element with the "target" id DOM.
180
+ * panel.pin( {
181
+ * target: document.querySelector( '#target' ),
182
+ * positions: [
183
+ * positions.northArrowSouth,
184
+ * positions.southArrowNorth
185
+ * ]
186
+ * } );
187
+ * ```
188
+ *
189
+ * To leave the pinned state, use the {@link #unpin} method.
190
+ *
191
+ * **Note**: Pinning the panel will also automatically {@link #show} it.
192
+ *
193
+ * @param options Positioning options compatible with {@link module:utils/dom/position~getOptimalPosition}.
194
+ * Default `positions` array is {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.defaultPositions}.
195
+ */
196
+ pin(options: Partial<PositionOptions>): void;
197
+ /**
198
+ * Stops pinning the panel, as set up by {@link #pin}.
199
+ */
200
+ unpin(): void;
201
+ /**
202
+ * Starts managing the pinned state of the panel. See {@link #pin}.
203
+ *
204
+ * @param options Positioning options compatible with {@link module:utils/dom/position~getOptimalPosition}.
205
+ */
206
+ private _startPinning;
207
+ /**
208
+ * Stops managing the pinned state of the panel. See {@link #pin}.
209
+ */
210
+ private _stopPinning;
211
+ /**
212
+ * A side offset of the arrow tip from the edge of the balloon. Controlled by CSS.
213
+ *
214
+ * ```
215
+ * ┌───────────────────────┐
216
+ * │ │
217
+ * │ Balloon │
218
+ * │ Content │
219
+ * │ │
220
+ * └──+ +───────────────┘
221
+ * | \ /
222
+ * | \/
223
+ * >┼─────┼< ─────────────────────── side offset
224
+ *
225
+ * ```
226
+ *
227
+ * @default 25
228
+ */
229
+ static arrowSideOffset: number;
230
+ /**
231
+ * A height offset of the arrow from the edge of the balloon. Controlled by CSS.
232
+ *
233
+ * ```
234
+ * ┌───────────────────────┐
235
+ * │ │
236
+ * │ Balloon │
237
+ * │ Content │ ╱-- arrow height offset
238
+ * │ │ V
239
+ * └──+ +───────────────┘ --- ─┼───────
240
+ * \ / │
241
+ * \/ │
242
+ * ────────────────────────────────┼───────
243
+ * ^
244
+ *
245
+ *
246
+ * >┼────┼< arrow height offset
247
+ * │ │
248
+ * │ ┌────────────────────────┐
249
+ * │ │ │
250
+ * │ ╱ │
251
+ * │ ╱ Balloon │
252
+ * │ ╲ Content │
253
+ * │ ╲ │
254
+ * │ │ │
255
+ * │ └────────────────────────┘
256
+ * ```
257
+ *
258
+ * @default 10
259
+ */
260
+ static arrowHeightOffset: number;
261
+ /**
262
+ * A vertical offset of the balloon panel from the edge of the viewport if sticky.
263
+ * It helps in accessing toolbar buttons underneath the balloon panel.
264
+ *
265
+ * ```
266
+ * ┌───────────────────────────────────────────────────┐
267
+ * │ Target │
268
+ * │ │
269
+ * │ /── vertical offset │
270
+ * ┌─────────────────────────────V─────────────────────────┐
271
+ * │ Toolbar ┌─────────────┐ │
272
+ * ├────────────────────│ Balloon │────────────────────┤
273
+ * │ │ └─────────────┘ │ │
274
+ * │ │ │ │
275
+ * │ │ │ │
276
+ * │ │ │ │
277
+ * │ └───────────────────────────────────────────────────┘ │
278
+ * │ Viewport │
279
+ * └───────────────────────────────────────────────────────┘
280
+ * ```
281
+ *
282
+ * @default 20
283
+ */
284
+ static stickyVerticalOffset: number;
285
+ /**
286
+ * Function used to calculate the optimal position for the balloon.
287
+ */
288
+ private static _getOptimalPosition;
289
+ /**
290
+ * A default set of positioning functions used by the balloon panel view
291
+ * when attaching using the {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView#attachTo} method.
292
+ *
293
+ * The available positioning functions are as follows:
294
+ *
295
+ * **North west**
296
+ *
297
+ * * `northWestArrowSouthWest`
298
+ *
299
+ * ```
300
+ * +-----------------+
301
+ * | Balloon |
302
+ * +-----------------+
303
+ * V
304
+ * [ Target ]
305
+ * ```
306
+ *
307
+ * * `northWestArrowSouthMiddleWest`
308
+ *
309
+ * ```
310
+ * +-----------------+
311
+ * | Balloon |
312
+ * +-----------------+
313
+ * V
314
+ * [ Target ]
315
+ * ```
316
+ *
317
+ * * `northWestArrowSouth`
318
+ *
319
+ * ```
320
+ * +-----------------+
321
+ * | Balloon |
322
+ * +-----------------+
323
+ * V
324
+ * [ Target ]
325
+ * ```
326
+ *
327
+ * * `northWestArrowSouthMiddleEast`
328
+ *
329
+ * ```
330
+ * +-----------------+
331
+ * | Balloon |
332
+ * +-----------------+
333
+ * V
334
+ * [ Target ]
335
+ * ```
336
+ *
337
+ * * `northWestArrowSouthEast`
338
+ *
339
+ * ```
340
+ * +-----------------+
341
+ * | Balloon |
342
+ * +-----------------+
343
+ * V
344
+ * [ Target ]
345
+ * ```
346
+ *
347
+ * **North**
348
+ *
349
+ * * `northArrowSouthWest`
350
+ *
351
+ * ```
352
+ * +-----------------+
353
+ * | Balloon |
354
+ * +-----------------+
355
+ * V
356
+ * [ Target ]
357
+ * ```
358
+ *
359
+ * * `northArrowSouthMiddleWest`
360
+ *
361
+ * ```
362
+ * +-----------------+
363
+ * | Balloon |
364
+ * +-----------------+
365
+ * V
366
+ * [ Target ]
367
+ * ```
368
+ * * `northArrowSouth`
369
+ *
370
+ * ```
371
+ * +-----------------+
372
+ * | Balloon |
373
+ * +-----------------+
374
+ * V
375
+ * [ Target ]
376
+ * ```
377
+ *
378
+ * * `northArrowSouthMiddleEast`
379
+ *
380
+ * ```
381
+ * +-----------------+
382
+ * | Balloon |
383
+ * +-----------------+
384
+ * V
385
+ * [ Target ]
386
+ * ```
387
+ *
388
+ * * `northArrowSouthEast`
389
+ *
390
+ * ```
391
+ * +-----------------+
392
+ * | Balloon |
393
+ * +-----------------+
394
+ * V
395
+ * [ Target ]
396
+ * ```
397
+ *
398
+ * **North east**
399
+ *
400
+ * * `northEastArrowSouthWest`
401
+ *
402
+ * ```
403
+ * +-----------------+
404
+ * | Balloon |
405
+ * +-----------------+
406
+ * V
407
+ * [ Target ]
408
+ * ```
409
+ *
410
+ * * `northEastArrowSouthMiddleWest`
411
+ *
412
+ * ```
413
+ * +-----------------+
414
+ * | Balloon |
415
+ * +-----------------+
416
+ * V
417
+ * [ Target ]
418
+ * ```
419
+ *
420
+ * * `northEastArrowSouth`
421
+ *
422
+ * ```
423
+ * +-----------------+
424
+ * | Balloon |
425
+ * +-----------------+
426
+ * V
427
+ * [ Target ]
428
+ * ```
429
+ *
430
+ * * `northEastArrowSouthMiddleEast`
431
+ *
432
+ * ```
433
+ * +-----------------+
434
+ * | Balloon |
435
+ * +-----------------+
436
+ * V
437
+ * [ Target ]
438
+ * ```
439
+ *
440
+ * * `northEastArrowSouthEast`
441
+ *
442
+ * ```
443
+ * +-----------------+
444
+ * | Balloon |
445
+ * +-----------------+
446
+ * V
447
+ * [ Target ]
448
+ * ```
449
+ *
450
+ * **South**
451
+ *
452
+ * * `southArrowNorthWest`
453
+ *
454
+ * ```
455
+ * [ Target ]
456
+ * ^
457
+ * +-----------------+
458
+ * | Balloon |
459
+ * +-----------------+
460
+ * ```
461
+ *
462
+ * * `southArrowNorthMiddleWest`
463
+ *
464
+ * ```
465
+ * [ Target ]
466
+ * ^
467
+ * +-----------------+
468
+ * | Balloon |
469
+ * +-----------------+
470
+ * ```
471
+ *
472
+ * * `southArrowNorth`
473
+ *
474
+ * ```
475
+ * [ Target ]
476
+ * ^
477
+ * +-----------------+
478
+ * | Balloon |
479
+ * +-----------------+
480
+ * ```
481
+ *
482
+ * * `southArrowNorthMiddleEast`
483
+ *
484
+ * ```
485
+ * [ Target ]
486
+ * ^
487
+ * +-----------------+
488
+ * | Balloon |
489
+ * +-----------------+
490
+ * ```
491
+ *
492
+ * * `southArrowNorthEast`
493
+ *
494
+ * ```
495
+ * [ Target ]
496
+ * ^
497
+ * +-----------------+
498
+ * | Balloon |
499
+ * +-----------------+
500
+ * ```
501
+ *
502
+ * **South west**
503
+ *
504
+ * * `southWestArrowNorthWest`
505
+ *
506
+ *
507
+ * ```
508
+ * [ Target ]
509
+ * ^
510
+ * +-----------------+
511
+ * | Balloon |
512
+ * +-----------------+
513
+ * ```
514
+ *
515
+ * * `southWestArrowNorthMiddleWest`
516
+ *
517
+ * ```
518
+ * [ Target ]
519
+ * ^
520
+ * +-----------------+
521
+ * | Balloon |
522
+ * +-----------------+
523
+ * ```
524
+ *
525
+ * * `southWestArrowNorth`
526
+ *
527
+ * ```
528
+ * [ Target ]
529
+ * ^
530
+ * +-----------------+
531
+ * | Balloon |
532
+ * +-----------------+
533
+ * ```
534
+ *
535
+ * * `southWestArrowNorthMiddleEast`
536
+ *
537
+ * ```
538
+ * [ Target ]
539
+ * ^
540
+ * +-----------------+
541
+ * | Balloon |
542
+ * +-----------------+
543
+ * ```
544
+ *
545
+ * * `southWestArrowNorthEast`
546
+ *
547
+ * ```
548
+ * [ Target ]
549
+ * ^
550
+ * +-----------------+
551
+ * | Balloon |
552
+ * +-----------------+
553
+ * ```
554
+ *
555
+ * **South east**
556
+ *
557
+ * * `southEastArrowNorthWest`
558
+ *
559
+ * ```
560
+ * [ Target ]
561
+ * ^
562
+ * +-----------------+
563
+ * | Balloon |
564
+ * +-----------------+
565
+ * ```
566
+ *
567
+ * * `southEastArrowNorthMiddleWest`
568
+ *
569
+ * ```
570
+ * [ Target ]
571
+ * ^
572
+ * +-----------------+
573
+ * | Balloon |
574
+ * +-----------------+
575
+ * ```
576
+ *
577
+ * * `southEastArrowNorth`
578
+ *
579
+ * ```
580
+ * [ Target ]
581
+ * ^
582
+ * +-----------------+
583
+ * | Balloon |
584
+ * +-----------------+
585
+ * ```
586
+ *
587
+ * * `southEastArrowNorthMiddleEast`
588
+ *
589
+ * ```
590
+ * [ Target ]
591
+ * ^
592
+ * +-----------------+
593
+ * | Balloon |
594
+ * +-----------------+
595
+ * ```
596
+ *
597
+ * * `southEastArrowNorthEast`
598
+ *
599
+ * ```
600
+ * [ Target ]
601
+ * ^
602
+ * +-----------------+
603
+ * | Balloon |
604
+ * +-----------------+
605
+ * ```
606
+ *
607
+ * **West**
608
+ *
609
+ * * `westArrowEast`
610
+ *
611
+ * ```
612
+ * +-----------------+
613
+ * | Balloon |>[ Target ]
614
+ * +-----------------+
615
+ * ```
616
+ *
617
+ * **East**
618
+ *
619
+ * * `eastArrowWest`
620
+ *
621
+ * ```
622
+ * +-----------------+
623
+ * [ Target ]<| Balloon |
624
+ * +-----------------+
625
+ * ```
626
+ *
627
+ * **Sticky**
628
+ *
629
+ * * `viewportStickyNorth`
630
+ *
631
+ * ```
632
+ * +---------------------------+
633
+ * | [ Target ] |
634
+ * | |
635
+ * +-----------------------------------+
636
+ * | | +-----------------+ | |
637
+ * | | | Balloon | | |
638
+ * | | +-----------------+ | |
639
+ * | | | |
640
+ * | | | |
641
+ * | | | |
642
+ * | | | |
643
+ * | +---------------------------+ |
644
+ * | Viewport |
645
+ * +-----------------------------------+
646
+ * ```
647
+ *
648
+ * See {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView#attachTo}.
649
+ *
650
+ * Positioning functions must be compatible with {@link module:utils/dom/position~Position}.
651
+ *
652
+ * Default positioning functions with customized offsets can be generated using
653
+ * {@link module:ui/panel/balloon/balloonpanelview~generatePositions}.
654
+ *
655
+ * The name that the position function returns will be reflected in the balloon panel's class that
656
+ * controls the placement of the "arrow". See {@link #position} to learn more.
657
+ */
658
+ static defaultPositions: Record<string, PositioningFunction>;
659
+ }
660
+ /**
661
+ * Returns available {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView}
662
+ * {@link module:utils/dom/position~PositioningFunction positioning functions} adjusted by the specific offsets.
663
+ *
664
+ * @internal
665
+ * @param options Options to generate positions. If not specified, this helper will simply return
666
+ * {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.defaultPositions}.
667
+ * @param options.sideOffset A custom side offset (in pixels) of each position. If
668
+ * not specified, {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.arrowSideOffset the default value}
669
+ * will be used.
670
+ * @param options.heightOffset A custom height offset (in pixels) of each position. If
671
+ * not specified, {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.arrowHeightOffset the default value}
672
+ * will be used.
673
+ * @param options.stickyVerticalOffset A custom offset (in pixels) of the `viewportStickyNorth` positioning function.
674
+ * If not specified, {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.stickyVerticalOffset the default value}
675
+ * will be used.
676
+ * @param options.config Additional configuration of the balloon balloon panel view.
677
+ * Currently only {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView#withArrow} is supported. Learn more
678
+ * about {@link module:utils/dom/position~PositioningFunction positioning functions}.
679
+ */
680
+ export declare function generatePositions(options?: {
681
+ sideOffset?: number;
682
+ heightOffset?: number;
683
+ stickyVerticalOffset?: number;
684
+ config?: object;
685
+ }): Record<string, PositioningFunction>;