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