@ckeditor/ckeditor5-ui 40.0.0 → 40.2.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 (171) hide show
  1. package/CHANGELOG.md +26 -26
  2. package/LICENSE.md +3 -3
  3. package/lang/translations/gl.po +4 -4
  4. package/lang/translations/pt-br.po +1 -1
  5. package/lang/translations/sr-latn.po +6 -6
  6. package/lang/translations/ug.po +26 -26
  7. package/package.json +3 -3
  8. package/src/arialiveannouncer.d.ts +94 -0
  9. package/src/arialiveannouncer.js +113 -0
  10. package/src/augmentation.d.ts +86 -86
  11. package/src/augmentation.js +5 -5
  12. package/src/autocomplete/autocompleteview.d.ts +81 -81
  13. package/src/autocomplete/autocompleteview.js +153 -146
  14. package/src/bindings/addkeyboardhandlingforgrid.d.ts +27 -27
  15. package/src/bindings/addkeyboardhandlingforgrid.js +107 -107
  16. package/src/bindings/clickoutsidehandler.d.ts +28 -28
  17. package/src/bindings/clickoutsidehandler.js +36 -36
  18. package/src/bindings/csstransitiondisablermixin.d.ts +40 -40
  19. package/src/bindings/csstransitiondisablermixin.js +55 -55
  20. package/src/bindings/injectcsstransitiondisabler.d.ts +59 -59
  21. package/src/bindings/injectcsstransitiondisabler.js +71 -71
  22. package/src/bindings/preventdefault.d.ts +33 -33
  23. package/src/bindings/preventdefault.js +34 -34
  24. package/src/bindings/submithandler.d.ts +57 -57
  25. package/src/bindings/submithandler.js +47 -47
  26. package/src/button/button.d.ts +172 -178
  27. package/src/button/button.js +5 -5
  28. package/src/button/buttonlabel.d.ts +34 -34
  29. package/src/button/buttonlabel.js +5 -5
  30. package/src/button/buttonlabelview.d.ts +31 -31
  31. package/src/button/buttonlabelview.js +42 -42
  32. package/src/button/buttonview.d.ts +181 -185
  33. package/src/button/buttonview.js +217 -219
  34. package/src/button/switchbuttonview.d.ts +45 -45
  35. package/src/button/switchbuttonview.js +75 -75
  36. package/src/collapsible/collapsibleview.d.ts +69 -0
  37. package/src/collapsible/collapsibleview.js +95 -0
  38. package/src/colorgrid/colorgridview.d.ts +132 -132
  39. package/src/colorgrid/colorgridview.js +124 -124
  40. package/src/colorgrid/colortileview.d.ts +28 -28
  41. package/src/colorgrid/colortileview.js +40 -40
  42. package/src/colorgrid/utils.d.ts +47 -47
  43. package/src/colorgrid/utils.js +84 -84
  44. package/src/colorpicker/colorpickerview.d.ts +137 -137
  45. package/src/colorpicker/colorpickerview.js +270 -270
  46. package/src/colorpicker/utils.d.ts +43 -43
  47. package/src/colorpicker/utils.js +99 -99
  48. package/src/colorselector/colorgridsfragmentview.d.ts +194 -194
  49. package/src/colorselector/colorgridsfragmentview.js +289 -289
  50. package/src/colorselector/colorpickerfragmentview.d.ts +128 -128
  51. package/src/colorselector/colorpickerfragmentview.js +205 -205
  52. package/src/colorselector/colorselectorview.d.ts +242 -242
  53. package/src/colorselector/colorselectorview.js +256 -256
  54. package/src/colorselector/documentcolorcollection.d.ts +70 -70
  55. package/src/colorselector/documentcolorcollection.js +42 -42
  56. package/src/componentfactory.d.ts +81 -81
  57. package/src/componentfactory.js +104 -104
  58. package/src/dropdown/button/dropdownbutton.d.ts +25 -25
  59. package/src/dropdown/button/dropdownbutton.js +5 -5
  60. package/src/dropdown/button/dropdownbuttonview.d.ts +48 -48
  61. package/src/dropdown/button/dropdownbuttonview.js +66 -66
  62. package/src/dropdown/button/splitbuttonview.d.ts +162 -161
  63. package/src/dropdown/button/splitbuttonview.js +154 -152
  64. package/src/dropdown/dropdownpanelfocusable.d.ts +21 -21
  65. package/src/dropdown/dropdownpanelfocusable.js +5 -5
  66. package/src/dropdown/dropdownpanelview.d.ts +62 -62
  67. package/src/dropdown/dropdownpanelview.js +97 -97
  68. package/src/dropdown/dropdownview.d.ts +315 -315
  69. package/src/dropdown/dropdownview.js +379 -379
  70. package/src/dropdown/utils.d.ts +235 -235
  71. package/src/dropdown/utils.js +463 -458
  72. package/src/editableui/editableuiview.d.ts +72 -72
  73. package/src/editableui/editableuiview.js +112 -112
  74. package/src/editableui/inline/inlineeditableuiview.d.ts +40 -40
  75. package/src/editableui/inline/inlineeditableuiview.js +48 -48
  76. package/src/editorui/bodycollection.d.ts +55 -55
  77. package/src/editorui/bodycollection.js +84 -84
  78. package/src/editorui/boxed/boxededitoruiview.d.ts +40 -40
  79. package/src/editorui/boxed/boxededitoruiview.js +81 -81
  80. package/src/editorui/editorui.d.ts +288 -282
  81. package/src/editorui/editorui.js +412 -410
  82. package/src/editorui/editoruiview.d.ts +39 -39
  83. package/src/editorui/editoruiview.js +38 -38
  84. package/src/editorui/poweredby.d.ts +71 -71
  85. package/src/editorui/poweredby.js +276 -276
  86. package/src/focuscycler.d.ts +226 -226
  87. package/src/focuscycler.js +245 -245
  88. package/src/formheader/formheaderview.d.ts +59 -59
  89. package/src/formheader/formheaderview.js +69 -69
  90. package/src/highlightedtext/highlightedtextview.d.ts +38 -38
  91. package/src/highlightedtext/highlightedtextview.js +102 -102
  92. package/src/icon/iconview.d.ts +85 -85
  93. package/src/icon/iconview.js +114 -114
  94. package/src/iframe/iframeview.d.ts +50 -50
  95. package/src/iframe/iframeview.js +63 -63
  96. package/src/index.d.ts +74 -73
  97. package/src/index.js +71 -70
  98. package/src/input/inputbase.d.ts +107 -107
  99. package/src/input/inputbase.js +110 -110
  100. package/src/input/inputview.d.ts +36 -36
  101. package/src/input/inputview.js +24 -24
  102. package/src/inputnumber/inputnumberview.d.ts +49 -49
  103. package/src/inputnumber/inputnumberview.js +40 -40
  104. package/src/inputtext/inputtextview.d.ts +18 -18
  105. package/src/inputtext/inputtextview.js +27 -27
  106. package/src/label/labelview.d.ts +36 -36
  107. package/src/label/labelview.js +41 -41
  108. package/src/labeledfield/labeledfieldview.d.ts +187 -187
  109. package/src/labeledfield/labeledfieldview.js +157 -157
  110. package/src/labeledfield/utils.d.ts +123 -123
  111. package/src/labeledfield/utils.js +176 -176
  112. package/src/labeledinput/labeledinputview.d.ts +125 -125
  113. package/src/labeledinput/labeledinputview.js +125 -125
  114. package/src/list/listitemgroupview.d.ts +59 -51
  115. package/src/list/listitemgroupview.js +67 -75
  116. package/src/list/listitemview.d.ts +36 -36
  117. package/src/list/listitemview.js +42 -42
  118. package/src/list/listseparatorview.d.ts +18 -18
  119. package/src/list/listseparatorview.js +28 -28
  120. package/src/list/listview.d.ts +123 -122
  121. package/src/list/listview.js +188 -187
  122. package/src/model.d.ts +22 -22
  123. package/src/model.js +31 -31
  124. package/src/notification/notification.d.ts +211 -211
  125. package/src/notification/notification.js +187 -187
  126. package/src/panel/balloon/balloonpanelview.d.ts +685 -685
  127. package/src/panel/balloon/balloonpanelview.js +1010 -1010
  128. package/src/panel/balloon/contextualballoon.d.ts +299 -299
  129. package/src/panel/balloon/contextualballoon.js +572 -572
  130. package/src/panel/sticky/stickypanelview.d.ts +156 -156
  131. package/src/panel/sticky/stickypanelview.js +234 -234
  132. package/src/search/filteredview.d.ts +31 -31
  133. package/src/search/filteredview.js +5 -5
  134. package/src/search/searchinfoview.d.ts +45 -45
  135. package/src/search/searchinfoview.js +59 -59
  136. package/src/search/searchresultsview.d.ts +54 -54
  137. package/src/search/searchresultsview.js +65 -65
  138. package/src/search/text/searchtextqueryview.d.ts +76 -76
  139. package/src/search/text/searchtextqueryview.js +75 -75
  140. package/src/search/text/searchtextview.d.ts +219 -219
  141. package/src/search/text/searchtextview.js +201 -201
  142. package/src/spinner/spinnerview.d.ts +25 -25
  143. package/src/spinner/spinnerview.js +38 -38
  144. package/src/template.d.ts +942 -942
  145. package/src/template.js +1294 -1294
  146. package/src/textarea/textareaview.d.ts +88 -88
  147. package/src/textarea/textareaview.js +142 -140
  148. package/src/toolbar/balloon/balloontoolbar.d.ts +122 -122
  149. package/src/toolbar/balloon/balloontoolbar.js +300 -300
  150. package/src/toolbar/block/blockbuttonview.d.ts +35 -35
  151. package/src/toolbar/block/blockbuttonview.js +41 -41
  152. package/src/toolbar/block/blocktoolbar.d.ts +161 -161
  153. package/src/toolbar/block/blocktoolbar.js +395 -395
  154. package/src/toolbar/normalizetoolbarconfig.d.ts +40 -40
  155. package/src/toolbar/normalizetoolbarconfig.js +52 -51
  156. package/src/toolbar/toolbarlinebreakview.d.ts +18 -18
  157. package/src/toolbar/toolbarlinebreakview.js +28 -28
  158. package/src/toolbar/toolbarseparatorview.d.ts +18 -18
  159. package/src/toolbar/toolbarseparatorview.js +28 -28
  160. package/src/toolbar/toolbarview.d.ts +266 -266
  161. package/src/toolbar/toolbarview.js +719 -719
  162. package/src/tooltipmanager.d.ts +180 -180
  163. package/src/tooltipmanager.js +353 -353
  164. package/src/view.d.ts +422 -422
  165. package/src/view.js +396 -396
  166. package/src/viewcollection.d.ts +139 -139
  167. package/src/viewcollection.js +206 -206
  168. package/theme/components/arialiveannouncer/arialiveannouncer.css +10 -0
  169. package/theme/components/button/button.css +9 -1
  170. package/theme/components/collapsible/collapsible.css +10 -0
  171. 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>;