@ckeditor/ckeditor5-ui 39.0.2 → 40.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (226) hide show
  1. package/lang/contexts.json +5 -1
  2. package/lang/translations/ar.po +16 -0
  3. package/lang/translations/ast.po +16 -0
  4. package/lang/translations/az.po +16 -0
  5. package/lang/translations/bg.po +16 -0
  6. package/lang/translations/bn.po +16 -0
  7. package/lang/translations/ca.po +16 -0
  8. package/lang/translations/cs.po +16 -0
  9. package/lang/translations/da.po +16 -0
  10. package/lang/translations/de-ch.po +16 -0
  11. package/lang/translations/de.po +16 -0
  12. package/lang/translations/el.po +16 -0
  13. package/lang/translations/en-au.po +16 -0
  14. package/lang/translations/en-gb.po +16 -0
  15. package/lang/translations/en.po +16 -0
  16. package/lang/translations/eo.po +16 -0
  17. package/lang/translations/es.po +16 -0
  18. package/lang/translations/et.po +16 -0
  19. package/lang/translations/eu.po +16 -0
  20. package/lang/translations/fa.po +16 -0
  21. package/lang/translations/fi.po +16 -0
  22. package/lang/translations/fr.po +16 -0
  23. package/lang/translations/gl.po +16 -0
  24. package/lang/translations/he.po +16 -0
  25. package/lang/translations/hi.po +16 -0
  26. package/lang/translations/hr.po +16 -0
  27. package/lang/translations/hu.po +16 -0
  28. package/lang/translations/id.po +16 -0
  29. package/lang/translations/it.po +16 -0
  30. package/lang/translations/ja.po +16 -0
  31. package/lang/translations/km.po +16 -0
  32. package/lang/translations/kn.po +16 -0
  33. package/lang/translations/ko.po +16 -0
  34. package/lang/translations/ku.po +16 -0
  35. package/lang/translations/lt.po +16 -0
  36. package/lang/translations/lv.po +16 -0
  37. package/lang/translations/ms.po +16 -0
  38. package/lang/translations/nb.po +16 -0
  39. package/lang/translations/ne.po +16 -0
  40. package/lang/translations/nl.po +16 -0
  41. package/lang/translations/no.po +16 -0
  42. package/lang/translations/pl.po +16 -0
  43. package/lang/translations/pt-br.po +16 -0
  44. package/lang/translations/pt.po +16 -0
  45. package/lang/translations/ro.po +16 -0
  46. package/lang/translations/ru.po +16 -0
  47. package/lang/translations/sk.po +16 -0
  48. package/lang/translations/sl.po +16 -0
  49. package/lang/translations/sq.po +16 -0
  50. package/lang/translations/sr-latn.po +16 -0
  51. package/lang/translations/sr.po +16 -0
  52. package/lang/translations/sv.po +16 -0
  53. package/lang/translations/th.po +16 -0
  54. package/lang/translations/tk.po +16 -0
  55. package/lang/translations/tr.po +16 -0
  56. package/lang/translations/tt.po +16 -0
  57. package/lang/translations/ug.po +16 -0
  58. package/lang/translations/uk.po +16 -0
  59. package/lang/translations/ur.po +16 -0
  60. package/lang/translations/uz.po +16 -0
  61. package/lang/translations/vi.po +16 -0
  62. package/lang/translations/zh-cn.po +16 -0
  63. package/lang/translations/zh.po +16 -0
  64. package/package.json +3 -3
  65. package/src/augmentation.d.ts +86 -86
  66. package/src/augmentation.js +5 -5
  67. package/src/autocomplete/autocompleteview.d.ts +81 -0
  68. package/src/autocomplete/autocompleteview.js +146 -0
  69. package/src/bindings/addkeyboardhandlingforgrid.d.ts +27 -27
  70. package/src/bindings/addkeyboardhandlingforgrid.js +107 -107
  71. package/src/bindings/clickoutsidehandler.d.ts +28 -28
  72. package/src/bindings/clickoutsidehandler.js +36 -36
  73. package/src/bindings/csstransitiondisablermixin.d.ts +40 -40
  74. package/src/bindings/csstransitiondisablermixin.js +55 -55
  75. package/src/bindings/injectcsstransitiondisabler.d.ts +59 -59
  76. package/src/bindings/injectcsstransitiondisabler.js +71 -71
  77. package/src/bindings/preventdefault.d.ts +33 -33
  78. package/src/bindings/preventdefault.js +34 -34
  79. package/src/bindings/submithandler.d.ts +57 -57
  80. package/src/bindings/submithandler.js +47 -47
  81. package/src/button/button.d.ts +178 -178
  82. package/src/button/button.js +5 -5
  83. package/src/button/buttonlabel.d.ts +34 -0
  84. package/src/button/buttonlabel.js +5 -0
  85. package/src/button/buttonlabelview.d.ts +31 -0
  86. package/src/button/buttonlabelview.js +42 -0
  87. package/src/button/buttonview.d.ts +185 -177
  88. package/src/button/buttonview.js +219 -231
  89. package/src/button/switchbuttonview.d.ts +45 -45
  90. package/src/button/switchbuttonview.js +75 -75
  91. package/src/colorgrid/colorgridview.d.ts +132 -132
  92. package/src/colorgrid/colorgridview.js +124 -124
  93. package/src/colorgrid/colortileview.d.ts +28 -28
  94. package/src/colorgrid/colortileview.js +40 -40
  95. package/src/colorgrid/utils.d.ts +47 -47
  96. package/src/colorgrid/utils.js +84 -84
  97. package/src/colorpicker/colorpickerview.d.ts +137 -137
  98. package/src/colorpicker/colorpickerview.js +270 -270
  99. package/src/colorpicker/utils.d.ts +43 -43
  100. package/src/colorpicker/utils.js +99 -99
  101. package/src/colorselector/colorgridsfragmentview.d.ts +194 -194
  102. package/src/colorselector/colorgridsfragmentview.js +289 -289
  103. package/src/colorselector/colorpickerfragmentview.d.ts +128 -128
  104. package/src/colorselector/colorpickerfragmentview.js +205 -205
  105. package/src/colorselector/colorselectorview.d.ts +242 -242
  106. package/src/colorselector/colorselectorview.js +256 -256
  107. package/src/colorselector/documentcolorcollection.d.ts +70 -70
  108. package/src/colorselector/documentcolorcollection.js +42 -42
  109. package/src/componentfactory.d.ts +81 -81
  110. package/src/componentfactory.js +104 -104
  111. package/src/dropdown/button/dropdownbutton.d.ts +25 -25
  112. package/src/dropdown/button/dropdownbutton.js +5 -5
  113. package/src/dropdown/button/dropdownbuttonview.d.ts +48 -48
  114. package/src/dropdown/button/dropdownbuttonview.js +66 -66
  115. package/src/dropdown/button/splitbuttonview.d.ts +161 -161
  116. package/src/dropdown/button/splitbuttonview.js +152 -152
  117. package/src/dropdown/dropdownpanelfocusable.d.ts +21 -21
  118. package/src/dropdown/dropdownpanelfocusable.js +5 -5
  119. package/src/dropdown/dropdownpanelview.d.ts +62 -62
  120. package/src/dropdown/dropdownpanelview.js +97 -97
  121. package/src/dropdown/dropdownview.d.ts +315 -315
  122. package/src/dropdown/dropdownview.js +379 -378
  123. package/src/dropdown/utils.d.ts +235 -221
  124. package/src/dropdown/utils.js +458 -437
  125. package/src/editableui/editableuiview.d.ts +72 -72
  126. package/src/editableui/editableuiview.js +112 -112
  127. package/src/editableui/inline/inlineeditableuiview.d.ts +40 -40
  128. package/src/editableui/inline/inlineeditableuiview.js +48 -48
  129. package/src/editorui/bodycollection.d.ts +55 -55
  130. package/src/editorui/bodycollection.js +84 -84
  131. package/src/editorui/boxed/boxededitoruiview.d.ts +40 -40
  132. package/src/editorui/boxed/boxededitoruiview.js +81 -81
  133. package/src/editorui/editorui.d.ts +282 -282
  134. package/src/editorui/editorui.js +410 -410
  135. package/src/editorui/editoruiview.d.ts +39 -39
  136. package/src/editorui/editoruiview.js +38 -38
  137. package/src/editorui/poweredby.d.ts +71 -71
  138. package/src/editorui/poweredby.js +276 -299
  139. package/src/focuscycler.d.ts +226 -183
  140. package/src/focuscycler.js +245 -220
  141. package/src/formheader/formheaderview.d.ts +59 -53
  142. package/src/formheader/formheaderview.js +69 -63
  143. package/src/highlightedtext/highlightedtextview.d.ts +38 -0
  144. package/src/highlightedtext/highlightedtextview.js +102 -0
  145. package/src/icon/iconview.d.ts +85 -78
  146. package/src/icon/iconview.js +114 -112
  147. package/src/iframe/iframeview.d.ts +50 -50
  148. package/src/iframe/iframeview.js +63 -63
  149. package/src/index.d.ts +73 -63
  150. package/src/index.js +70 -62
  151. package/src/input/inputbase.d.ts +107 -0
  152. package/src/input/inputbase.js +110 -0
  153. package/src/input/inputview.d.ts +36 -121
  154. package/src/input/inputview.js +24 -106
  155. package/src/inputnumber/inputnumberview.d.ts +49 -49
  156. package/src/inputnumber/inputnumberview.js +40 -40
  157. package/src/inputtext/inputtextview.d.ts +18 -18
  158. package/src/inputtext/inputtextview.js +27 -27
  159. package/src/label/labelview.d.ts +36 -36
  160. package/src/label/labelview.js +41 -41
  161. package/src/labeledfield/labeledfieldview.d.ts +187 -182
  162. package/src/labeledfield/labeledfieldview.js +157 -157
  163. package/src/labeledfield/utils.d.ts +123 -93
  164. package/src/labeledfield/utils.js +176 -131
  165. package/src/labeledinput/labeledinputview.d.ts +125 -125
  166. package/src/labeledinput/labeledinputview.js +125 -125
  167. package/src/list/listitemgroupview.d.ts +51 -0
  168. package/src/list/listitemgroupview.js +75 -0
  169. package/src/list/listitemview.d.ts +36 -35
  170. package/src/list/listitemview.js +42 -40
  171. package/src/list/listseparatorview.d.ts +18 -18
  172. package/src/list/listseparatorview.js +28 -28
  173. package/src/list/listview.d.ts +122 -65
  174. package/src/list/listview.js +187 -90
  175. package/src/model.d.ts +22 -22
  176. package/src/model.js +31 -31
  177. package/src/notification/notification.d.ts +211 -211
  178. package/src/notification/notification.js +187 -187
  179. package/src/panel/balloon/balloonpanelview.d.ts +685 -685
  180. package/src/panel/balloon/balloonpanelview.js +1010 -988
  181. package/src/panel/balloon/contextualballoon.d.ts +299 -299
  182. package/src/panel/balloon/contextualballoon.js +572 -572
  183. package/src/panel/sticky/stickypanelview.d.ts +156 -158
  184. package/src/panel/sticky/stickypanelview.js +234 -231
  185. package/src/search/filteredview.d.ts +31 -0
  186. package/src/search/filteredview.js +5 -0
  187. package/src/search/searchinfoview.d.ts +45 -0
  188. package/src/search/searchinfoview.js +59 -0
  189. package/src/search/searchresultsview.d.ts +54 -0
  190. package/src/search/searchresultsview.js +65 -0
  191. package/src/search/text/searchtextqueryview.d.ts +76 -0
  192. package/src/search/text/searchtextqueryview.js +75 -0
  193. package/src/search/text/searchtextview.d.ts +219 -0
  194. package/src/search/text/searchtextview.js +201 -0
  195. package/src/spinner/spinnerview.d.ts +25 -0
  196. package/src/spinner/spinnerview.js +38 -0
  197. package/src/template.d.ts +942 -942
  198. package/src/template.js +1294 -1294
  199. package/src/textarea/textareaview.d.ts +88 -0
  200. package/src/textarea/textareaview.js +140 -0
  201. package/src/toolbar/balloon/balloontoolbar.d.ts +122 -122
  202. package/src/toolbar/balloon/balloontoolbar.js +300 -300
  203. package/src/toolbar/block/blockbuttonview.d.ts +35 -35
  204. package/src/toolbar/block/blockbuttonview.js +41 -41
  205. package/src/toolbar/block/blocktoolbar.d.ts +161 -161
  206. package/src/toolbar/block/blocktoolbar.js +395 -391
  207. package/src/toolbar/normalizetoolbarconfig.d.ts +40 -39
  208. package/src/toolbar/normalizetoolbarconfig.js +51 -51
  209. package/src/toolbar/toolbarlinebreakview.d.ts +18 -18
  210. package/src/toolbar/toolbarlinebreakview.js +28 -28
  211. package/src/toolbar/toolbarseparatorview.d.ts +18 -18
  212. package/src/toolbar/toolbarseparatorview.js +28 -28
  213. package/src/toolbar/toolbarview.d.ts +266 -265
  214. package/src/toolbar/toolbarview.js +719 -717
  215. package/src/tooltipmanager.d.ts +180 -180
  216. package/src/tooltipmanager.js +353 -353
  217. package/src/view.d.ts +422 -422
  218. package/src/view.js +396 -396
  219. package/src/viewcollection.d.ts +139 -139
  220. package/src/viewcollection.js +206 -206
  221. package/theme/components/autocomplete/autocomplete.css +22 -0
  222. package/theme/components/formheader/formheader.css +8 -0
  223. package/theme/components/highlightedtext/highlightedtext.css +12 -0
  224. package/theme/components/search/search.css +43 -0
  225. package/theme/components/spinner/spinner.css +23 -0
  226. package/theme/components/textarea/textarea.css +10 -0
@@ -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>;