@ckeditor/ckeditor5-ui 40.0.0 → 40.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (171) hide show
  1. package/CHANGELOG.md +26 -26
  2. package/LICENSE.md +3 -3
  3. package/lang/translations/gl.po +4 -4
  4. package/lang/translations/pt-br.po +1 -1
  5. package/lang/translations/sr-latn.po +6 -6
  6. package/lang/translations/ug.po +26 -26
  7. package/package.json +3 -3
  8. package/src/arialiveannouncer.d.ts +94 -0
  9. package/src/arialiveannouncer.js +113 -0
  10. package/src/augmentation.d.ts +86 -86
  11. package/src/augmentation.js +5 -5
  12. package/src/autocomplete/autocompleteview.d.ts +81 -81
  13. package/src/autocomplete/autocompleteview.js +153 -146
  14. package/src/bindings/addkeyboardhandlingforgrid.d.ts +27 -27
  15. package/src/bindings/addkeyboardhandlingforgrid.js +107 -107
  16. package/src/bindings/clickoutsidehandler.d.ts +28 -28
  17. package/src/bindings/clickoutsidehandler.js +36 -36
  18. package/src/bindings/csstransitiondisablermixin.d.ts +40 -40
  19. package/src/bindings/csstransitiondisablermixin.js +55 -55
  20. package/src/bindings/injectcsstransitiondisabler.d.ts +59 -59
  21. package/src/bindings/injectcsstransitiondisabler.js +71 -71
  22. package/src/bindings/preventdefault.d.ts +33 -33
  23. package/src/bindings/preventdefault.js +34 -34
  24. package/src/bindings/submithandler.d.ts +57 -57
  25. package/src/bindings/submithandler.js +47 -47
  26. package/src/button/button.d.ts +172 -178
  27. package/src/button/button.js +5 -5
  28. package/src/button/buttonlabel.d.ts +34 -34
  29. package/src/button/buttonlabel.js +5 -5
  30. package/src/button/buttonlabelview.d.ts +31 -31
  31. package/src/button/buttonlabelview.js +42 -42
  32. package/src/button/buttonview.d.ts +181 -185
  33. package/src/button/buttonview.js +217 -219
  34. package/src/button/switchbuttonview.d.ts +45 -45
  35. package/src/button/switchbuttonview.js +75 -75
  36. package/src/collapsible/collapsibleview.d.ts +69 -0
  37. package/src/collapsible/collapsibleview.js +95 -0
  38. package/src/colorgrid/colorgridview.d.ts +132 -132
  39. package/src/colorgrid/colorgridview.js +124 -124
  40. package/src/colorgrid/colortileview.d.ts +28 -28
  41. package/src/colorgrid/colortileview.js +40 -40
  42. package/src/colorgrid/utils.d.ts +47 -47
  43. package/src/colorgrid/utils.js +84 -84
  44. package/src/colorpicker/colorpickerview.d.ts +137 -137
  45. package/src/colorpicker/colorpickerview.js +270 -270
  46. package/src/colorpicker/utils.d.ts +43 -43
  47. package/src/colorpicker/utils.js +99 -99
  48. package/src/colorselector/colorgridsfragmentview.d.ts +194 -194
  49. package/src/colorselector/colorgridsfragmentview.js +289 -289
  50. package/src/colorselector/colorpickerfragmentview.d.ts +128 -128
  51. package/src/colorselector/colorpickerfragmentview.js +205 -205
  52. package/src/colorselector/colorselectorview.d.ts +242 -242
  53. package/src/colorselector/colorselectorview.js +256 -256
  54. package/src/colorselector/documentcolorcollection.d.ts +70 -70
  55. package/src/colorselector/documentcolorcollection.js +42 -42
  56. package/src/componentfactory.d.ts +81 -81
  57. package/src/componentfactory.js +104 -104
  58. package/src/dropdown/button/dropdownbutton.d.ts +25 -25
  59. package/src/dropdown/button/dropdownbutton.js +5 -5
  60. package/src/dropdown/button/dropdownbuttonview.d.ts +48 -48
  61. package/src/dropdown/button/dropdownbuttonview.js +66 -66
  62. package/src/dropdown/button/splitbuttonview.d.ts +162 -161
  63. package/src/dropdown/button/splitbuttonview.js +154 -152
  64. package/src/dropdown/dropdownpanelfocusable.d.ts +21 -21
  65. package/src/dropdown/dropdownpanelfocusable.js +5 -5
  66. package/src/dropdown/dropdownpanelview.d.ts +62 -62
  67. package/src/dropdown/dropdownpanelview.js +97 -97
  68. package/src/dropdown/dropdownview.d.ts +315 -315
  69. package/src/dropdown/dropdownview.js +379 -379
  70. package/src/dropdown/utils.d.ts +235 -235
  71. package/src/dropdown/utils.js +463 -458
  72. package/src/editableui/editableuiview.d.ts +72 -72
  73. package/src/editableui/editableuiview.js +112 -112
  74. package/src/editableui/inline/inlineeditableuiview.d.ts +40 -40
  75. package/src/editableui/inline/inlineeditableuiview.js +48 -48
  76. package/src/editorui/bodycollection.d.ts +55 -55
  77. package/src/editorui/bodycollection.js +84 -84
  78. package/src/editorui/boxed/boxededitoruiview.d.ts +40 -40
  79. package/src/editorui/boxed/boxededitoruiview.js +81 -81
  80. package/src/editorui/editorui.d.ts +288 -282
  81. package/src/editorui/editorui.js +412 -410
  82. package/src/editorui/editoruiview.d.ts +39 -39
  83. package/src/editorui/editoruiview.js +38 -38
  84. package/src/editorui/poweredby.d.ts +71 -71
  85. package/src/editorui/poweredby.js +276 -276
  86. package/src/focuscycler.d.ts +226 -226
  87. package/src/focuscycler.js +245 -245
  88. package/src/formheader/formheaderview.d.ts +59 -59
  89. package/src/formheader/formheaderview.js +69 -69
  90. package/src/highlightedtext/highlightedtextview.d.ts +38 -38
  91. package/src/highlightedtext/highlightedtextview.js +102 -102
  92. package/src/icon/iconview.d.ts +85 -85
  93. package/src/icon/iconview.js +114 -114
  94. package/src/iframe/iframeview.d.ts +50 -50
  95. package/src/iframe/iframeview.js +63 -63
  96. package/src/index.d.ts +74 -73
  97. package/src/index.js +71 -70
  98. package/src/input/inputbase.d.ts +107 -107
  99. package/src/input/inputbase.js +110 -110
  100. package/src/input/inputview.d.ts +36 -36
  101. package/src/input/inputview.js +24 -24
  102. package/src/inputnumber/inputnumberview.d.ts +49 -49
  103. package/src/inputnumber/inputnumberview.js +40 -40
  104. package/src/inputtext/inputtextview.d.ts +18 -18
  105. package/src/inputtext/inputtextview.js +27 -27
  106. package/src/label/labelview.d.ts +36 -36
  107. package/src/label/labelview.js +41 -41
  108. package/src/labeledfield/labeledfieldview.d.ts +187 -187
  109. package/src/labeledfield/labeledfieldview.js +157 -157
  110. package/src/labeledfield/utils.d.ts +123 -123
  111. package/src/labeledfield/utils.js +176 -176
  112. package/src/labeledinput/labeledinputview.d.ts +125 -125
  113. package/src/labeledinput/labeledinputview.js +125 -125
  114. package/src/list/listitemgroupview.d.ts +59 -51
  115. package/src/list/listitemgroupview.js +67 -75
  116. package/src/list/listitemview.d.ts +36 -36
  117. package/src/list/listitemview.js +42 -42
  118. package/src/list/listseparatorview.d.ts +18 -18
  119. package/src/list/listseparatorview.js +28 -28
  120. package/src/list/listview.d.ts +123 -122
  121. package/src/list/listview.js +188 -187
  122. package/src/model.d.ts +22 -22
  123. package/src/model.js +31 -31
  124. package/src/notification/notification.d.ts +211 -211
  125. package/src/notification/notification.js +187 -187
  126. package/src/panel/balloon/balloonpanelview.d.ts +685 -685
  127. package/src/panel/balloon/balloonpanelview.js +1010 -1010
  128. package/src/panel/balloon/contextualballoon.d.ts +299 -299
  129. package/src/panel/balloon/contextualballoon.js +572 -572
  130. package/src/panel/sticky/stickypanelview.d.ts +156 -156
  131. package/src/panel/sticky/stickypanelview.js +234 -234
  132. package/src/search/filteredview.d.ts +31 -31
  133. package/src/search/filteredview.js +5 -5
  134. package/src/search/searchinfoview.d.ts +45 -45
  135. package/src/search/searchinfoview.js +59 -59
  136. package/src/search/searchresultsview.d.ts +54 -54
  137. package/src/search/searchresultsview.js +65 -65
  138. package/src/search/text/searchtextqueryview.d.ts +76 -76
  139. package/src/search/text/searchtextqueryview.js +75 -75
  140. package/src/search/text/searchtextview.d.ts +219 -219
  141. package/src/search/text/searchtextview.js +201 -201
  142. package/src/spinner/spinnerview.d.ts +25 -25
  143. package/src/spinner/spinnerview.js +38 -38
  144. package/src/template.d.ts +942 -942
  145. package/src/template.js +1294 -1294
  146. package/src/textarea/textareaview.d.ts +88 -88
  147. package/src/textarea/textareaview.js +142 -140
  148. package/src/toolbar/balloon/balloontoolbar.d.ts +122 -122
  149. package/src/toolbar/balloon/balloontoolbar.js +300 -300
  150. package/src/toolbar/block/blockbuttonview.d.ts +35 -35
  151. package/src/toolbar/block/blockbuttonview.js +41 -41
  152. package/src/toolbar/block/blocktoolbar.d.ts +161 -161
  153. package/src/toolbar/block/blocktoolbar.js +395 -395
  154. package/src/toolbar/normalizetoolbarconfig.d.ts +40 -40
  155. package/src/toolbar/normalizetoolbarconfig.js +52 -51
  156. package/src/toolbar/toolbarlinebreakview.d.ts +18 -18
  157. package/src/toolbar/toolbarlinebreakview.js +28 -28
  158. package/src/toolbar/toolbarseparatorview.d.ts +18 -18
  159. package/src/toolbar/toolbarseparatorview.js +28 -28
  160. package/src/toolbar/toolbarview.d.ts +266 -266
  161. package/src/toolbar/toolbarview.js +719 -719
  162. package/src/tooltipmanager.d.ts +180 -180
  163. package/src/tooltipmanager.js +353 -353
  164. package/src/view.d.ts +422 -422
  165. package/src/view.js +396 -396
  166. package/src/viewcollection.d.ts +139 -139
  167. package/src/viewcollection.js +206 -206
  168. package/theme/components/arialiveannouncer/arialiveannouncer.css +10 -0
  169. package/theme/components/button/button.css +9 -1
  170. package/theme/components/collapsible/collapsible.css +10 -0
  171. package/theme/components/formheader/formheader.css +0 -4
@@ -1,266 +1,266 @@
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/toolbar/toolbarview
7
- */
8
- import View from '../view';
9
- import type ComponentFactory from '../componentfactory';
10
- import type ViewCollection from '../viewcollection';
11
- import type DropdownPanelFocusable from '../dropdown/dropdownpanelfocusable';
12
- import { FocusTracker, KeystrokeHandler, type Locale } from '@ckeditor/ckeditor5-utils';
13
- import { type ToolbarConfig } from '@ckeditor/ckeditor5-core';
14
- import '../../theme/components/toolbar/toolbar.css';
15
- export declare const NESTED_TOOLBAR_ICONS: Record<string, string | undefined>;
16
- /**
17
- * The toolbar view class.
18
- */
19
- export default class ToolbarView extends View implements DropdownPanelFocusable {
20
- /**
21
- * A reference to the options object passed to the constructor.
22
- */
23
- readonly options: ToolbarOptions;
24
- /**
25
- * A collection of toolbar items (buttons, dropdowns, etc.).
26
- */
27
- readonly items: ViewCollection;
28
- /**
29
- * Tracks information about the DOM focus in the toolbar.
30
- */
31
- readonly focusTracker: FocusTracker;
32
- /**
33
- * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}
34
- * to handle keyboard navigation in the toolbar.
35
- */
36
- readonly keystrokes: KeystrokeHandler;
37
- /**
38
- * A (child) view containing {@link #items toolbar items}.
39
- */
40
- readonly itemsView: ItemsView;
41
- /**
42
- * A top–level collection aggregating building blocks of the toolbar.
43
- *
44
- * ┌───────────────── ToolbarView ─────────────────┐
45
- * | ┌──────────────── #children ────────────────┐ |
46
- * | | ┌──────────── #itemsView ───────────┐ | |
47
- * | | | [ item1 ] [ item2 ] ... [ itemN ] | | |
48
- * | | └──────────────────────────────────-┘ | |
49
- * | └───────────────────────────────────────────┘ |
50
- * └───────────────────────────────────────────────┘
51
- *
52
- * By default, it contains the {@link #itemsView} but it can be extended with additional
53
- * UI elements when necessary.
54
- */
55
- readonly children: ViewCollection;
56
- /**
57
- * A collection of {@link #items} that take part in the focus cycling
58
- * (i.e. navigation using the keyboard). Usually, it contains a subset of {@link #items} with
59
- * some optional UI elements that also belong to the toolbar and should be focusable
60
- * by the user.
61
- */
62
- readonly focusables: ViewCollection;
63
- locale: Locale;
64
- /**
65
- * Label used by assistive technologies to describe this toolbar element.
66
- *
67
- * @observable
68
- * @default 'Editor toolbar'
69
- */
70
- ariaLabel: string;
71
- /**
72
- * The maximum width of the toolbar element.
73
- *
74
- * **Note**: When set to a specific value (e.g. `'200px'`), the value will affect the behavior of the
75
- * {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull}
76
- * option by changing the number of {@link #items} that will be displayed in the toolbar at a time.
77
- *
78
- * @observable
79
- * @default 'auto'
80
- */
81
- maxWidth: string;
82
- /**
83
- * An additional CSS class added to the {@link #element}.
84
- *
85
- * @observable
86
- * @member {String} #class
87
- */
88
- class: string | undefined;
89
- /**
90
- * When set true, makes the toolbar look compact with {@link #element}.
91
- *
92
- * @observable
93
- * @default false
94
- */
95
- isCompact: boolean;
96
- /**
97
- * Controls the orientation of toolbar items. Only available when
98
- * {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull dynamic items grouping}
99
- * is **disabled**.
100
- *
101
- * @observable
102
- */
103
- isVertical: boolean;
104
- /**
105
- * Helps cycling over {@link #focusables focusable items} in the toolbar.
106
- */
107
- private readonly _focusCycler;
108
- /**
109
- * An instance of the active toolbar behavior that shapes its look and functionality.
110
- *
111
- * See {@link module:ui/toolbar/toolbarview~ToolbarBehavior} to learn more.
112
- */
113
- private readonly _behavior;
114
- /**
115
- * Creates an instance of the {@link module:ui/toolbar/toolbarview~ToolbarView} class.
116
- *
117
- * Also see {@link #render}.
118
- *
119
- * @param locale The localization services instance.
120
- * @param options Configuration options of the toolbar.
121
- */
122
- constructor(locale: Locale, options?: ToolbarOptions);
123
- /**
124
- * @inheritDoc
125
- */
126
- render(): void;
127
- /**
128
- * @inheritDoc
129
- */
130
- destroy(): void;
131
- /**
132
- * Focuses the first focusable in {@link #focusables}.
133
- */
134
- focus(): void;
135
- /**
136
- * Focuses the last focusable in {@link #focusables}.
137
- */
138
- focusLast(): void;
139
- /**
140
- * A utility that expands the plain toolbar configuration into
141
- * {@link module:ui/toolbar/toolbarview~ToolbarView#items} using a given component factory.
142
- *
143
- * @param itemsOrConfig The toolbar items or the entire toolbar configuration object.
144
- * @param factory A factory producing toolbar items.
145
- * @param removeItems An array of items names to be removed from the configuration. When present, applies
146
- * to this toolbar and all nested ones as well.
147
- */
148
- fillFromConfig(itemsOrConfig: ToolbarConfig | undefined, factory: ComponentFactory, removeItems?: Array<string>): void;
149
- /**
150
- * A utility that expands the plain toolbar configuration into a list of view items using a given component factory.
151
- *
152
- * @param itemsOrConfig The toolbar items or the entire toolbar configuration object.
153
- * @param factory A factory producing toolbar items.
154
- * @param removeItems An array of items names to be removed from the configuration. When present, applies
155
- * to this toolbar and all nested ones as well.
156
- */
157
- private _buildItemsFromConfig;
158
- /**
159
- * Cleans up the {@link module:ui/toolbar/toolbarview~ToolbarView#items} of the toolbar by removing unwanted items and
160
- * duplicated (obsolete) separators or line breaks.
161
- *
162
- * @param items The toolbar items configuration.
163
- * @param factory A factory producing toolbar items.
164
- * @param removeItems An array of items names to be removed from the configuration.
165
- * @returns Items after the clean-up.
166
- */
167
- private _cleanItemsConfiguration;
168
- /**
169
- * Remove leading, trailing, and duplicated separators (`-` and `|`).
170
- *
171
- * @returns Toolbar items after the separator and line break clean-up.
172
- */
173
- private _cleanSeparatorsAndLineBreaks;
174
- /**
175
- * Creates a user-defined dropdown containing a toolbar with items.
176
- *
177
- * @param definition A definition of the nested toolbar dropdown.
178
- * @param definition.label A label of the dropdown.
179
- * @param definition.icon An icon of the drop-down. One of 'bold', 'plus', 'text', 'importExport', 'alignLeft',
180
- * 'paragraph' or an SVG string. When `false` is passed, no icon will be used.
181
- * @param definition.withText When set `true`, the label of the dropdown will be visible. See
182
- * {@link module:ui/button/buttonview~ButtonView#withText} to learn more.
183
- * @param definition.tooltip A tooltip of the dropdown button. See
184
- * {@link module:ui/button/buttonview~ButtonView#tooltip} to learn more. Defaults to `true`.
185
- * @param componentFactory Component factory used to create items
186
- * of the nested toolbar.
187
- */
188
- private _createNestedToolbarDropdown;
189
- }
190
- /**
191
- * Fired when some toolbar {@link ~ToolbarView#items} were grouped or ungrouped as a result of some change
192
- * in the toolbar geometry.
193
- *
194
- * **Note**: This event is always fired **once** regardless of the number of items that were be
195
- * grouped or ungrouped at a time.
196
- *
197
- * **Note**: This event is fired only if the items grouping functionality was enabled in
198
- * the first place (see {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull}).
199
- *
200
- * @eventName ~ToolbarView#groupedItemsUpdate
201
- */
202
- export type ToolbarViewGroupedItemsUpdateEvent = {
203
- name: 'groupedItemsUpdate';
204
- args: [];
205
- };
206
- /**
207
- * An inner block of the {@link module:ui/toolbar/toolbarview~ToolbarView} hosting its
208
- * {@link module:ui/toolbar/toolbarview~ToolbarView#items}.
209
- */
210
- declare class ItemsView extends View {
211
- /**
212
- * A collection of items (buttons, dropdowns, etc.).
213
- */
214
- readonly children: ViewCollection;
215
- /**
216
- * @inheritDoc
217
- */
218
- constructor(locale?: Locale);
219
- }
220
- /**
221
- * Options passed to the {@link module:ui/toolbar/toolbarview~ToolbarView#constructor} of the toolbar.
222
- */
223
- export interface ToolbarOptions {
224
- /**
225
- * When set to `true`, the toolbar will automatically group {@link module:ui/toolbar/toolbarview~ToolbarView#items} that
226
- * would normally wrap to the next line when there is not enough space to display them in a single row, for
227
- * instance, if the parent container of the toolbar is narrow. For toolbars in absolutely positioned containers
228
- * without width restrictions also the {@link module:ui/toolbar/toolbarview~ToolbarOptions#isFloating} option is required to be `true`.
229
- *
230
- * See also: {@link module:ui/toolbar/toolbarview~ToolbarView#maxWidth}.
231
- */
232
- shouldGroupWhenFull?: boolean;
233
- /**
234
- * This option should be enabled for toolbars in absolutely positioned containers without width restrictions
235
- * to enable automatic {@link module:ui/toolbar/toolbarview~ToolbarView#items} grouping.
236
- * When this option is set to `true`, the items will stop wrapping to the next line
237
- * and together with {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull},
238
- * this will allow grouping them when there is not enough space in a single row.
239
- */
240
- isFloating?: boolean;
241
- }
242
- /**
243
- * A class interface defining the behavior of the {@link module:ui/toolbar/toolbarview~ToolbarView}.
244
- *
245
- * Toolbar behaviors extend its look and functionality and have an impact on the
246
- * {@link module:ui/toolbar/toolbarview~ToolbarView#element} template or
247
- * {@link module:ui/toolbar/toolbarview~ToolbarView#render rendering}. They can be enabled
248
- * conditionally, e.g. depending on the configuration of the toolbar.
249
- */
250
- export interface ToolbarBehavior {
251
- /**
252
- * A method called after the toolbar has been {@link module:ui/toolbar/toolbarview~ToolbarView#render rendered}.
253
- * It can be used to, for example, customize the behavior of the toolbar when its
254
- * {@link module:ui/toolbar/toolbarview~ToolbarView#element} is available.
255
- *
256
- * @param view An instance of the toolbar being rendered.
257
- */
258
- render(view: ToolbarView): void;
259
- /**
260
- * A method called after the toolbar has been {@link module:ui/toolbar/toolbarview~ToolbarView#destroy destroyed}.
261
- * It allows cleaning up after the toolbar behavior, for instance, this is the right place to detach
262
- * event listeners, free up references, etc.
263
- */
264
- destroy(): void;
265
- }
266
- export {};
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/toolbar/toolbarview
7
+ */
8
+ import View from '../view';
9
+ import type ComponentFactory from '../componentfactory';
10
+ import type ViewCollection from '../viewcollection';
11
+ import type DropdownPanelFocusable from '../dropdown/dropdownpanelfocusable';
12
+ import { FocusTracker, KeystrokeHandler, type Locale } from '@ckeditor/ckeditor5-utils';
13
+ import { type ToolbarConfig } from '@ckeditor/ckeditor5-core';
14
+ import '../../theme/components/toolbar/toolbar.css';
15
+ export declare const NESTED_TOOLBAR_ICONS: Record<string, string | undefined>;
16
+ /**
17
+ * The toolbar view class.
18
+ */
19
+ export default class ToolbarView extends View implements DropdownPanelFocusable {
20
+ /**
21
+ * A reference to the options object passed to the constructor.
22
+ */
23
+ readonly options: ToolbarOptions;
24
+ /**
25
+ * A collection of toolbar items (buttons, dropdowns, etc.).
26
+ */
27
+ readonly items: ViewCollection;
28
+ /**
29
+ * Tracks information about the DOM focus in the toolbar.
30
+ */
31
+ readonly focusTracker: FocusTracker;
32
+ /**
33
+ * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}
34
+ * to handle keyboard navigation in the toolbar.
35
+ */
36
+ readonly keystrokes: KeystrokeHandler;
37
+ /**
38
+ * A (child) view containing {@link #items toolbar items}.
39
+ */
40
+ readonly itemsView: ItemsView;
41
+ /**
42
+ * A top–level collection aggregating building blocks of the toolbar.
43
+ *
44
+ * ┌───────────────── ToolbarView ─────────────────┐
45
+ * | ┌──────────────── #children ────────────────┐ |
46
+ * | | ┌──────────── #itemsView ───────────┐ | |
47
+ * | | | [ item1 ] [ item2 ] ... [ itemN ] | | |
48
+ * | | └──────────────────────────────────-┘ | |
49
+ * | └───────────────────────────────────────────┘ |
50
+ * └───────────────────────────────────────────────┘
51
+ *
52
+ * By default, it contains the {@link #itemsView} but it can be extended with additional
53
+ * UI elements when necessary.
54
+ */
55
+ readonly children: ViewCollection;
56
+ /**
57
+ * A collection of {@link #items} that take part in the focus cycling
58
+ * (i.e. navigation using the keyboard). Usually, it contains a subset of {@link #items} with
59
+ * some optional UI elements that also belong to the toolbar and should be focusable
60
+ * by the user.
61
+ */
62
+ readonly focusables: ViewCollection;
63
+ locale: Locale;
64
+ /**
65
+ * Label used by assistive technologies to describe this toolbar element.
66
+ *
67
+ * @observable
68
+ * @default 'Editor toolbar'
69
+ */
70
+ ariaLabel: string;
71
+ /**
72
+ * The maximum width of the toolbar element.
73
+ *
74
+ * **Note**: When set to a specific value (e.g. `'200px'`), the value will affect the behavior of the
75
+ * {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull}
76
+ * option by changing the number of {@link #items} that will be displayed in the toolbar at a time.
77
+ *
78
+ * @observable
79
+ * @default 'auto'
80
+ */
81
+ maxWidth: string;
82
+ /**
83
+ * An additional CSS class added to the {@link #element}.
84
+ *
85
+ * @observable
86
+ * @member {String} #class
87
+ */
88
+ class: string | undefined;
89
+ /**
90
+ * When set true, makes the toolbar look compact with {@link #element}.
91
+ *
92
+ * @observable
93
+ * @default false
94
+ */
95
+ isCompact: boolean;
96
+ /**
97
+ * Controls the orientation of toolbar items. Only available when
98
+ * {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull dynamic items grouping}
99
+ * is **disabled**.
100
+ *
101
+ * @observable
102
+ */
103
+ isVertical: boolean;
104
+ /**
105
+ * Helps cycling over {@link #focusables focusable items} in the toolbar.
106
+ */
107
+ private readonly _focusCycler;
108
+ /**
109
+ * An instance of the active toolbar behavior that shapes its look and functionality.
110
+ *
111
+ * See {@link module:ui/toolbar/toolbarview~ToolbarBehavior} to learn more.
112
+ */
113
+ private readonly _behavior;
114
+ /**
115
+ * Creates an instance of the {@link module:ui/toolbar/toolbarview~ToolbarView} class.
116
+ *
117
+ * Also see {@link #render}.
118
+ *
119
+ * @param locale The localization services instance.
120
+ * @param options Configuration options of the toolbar.
121
+ */
122
+ constructor(locale: Locale, options?: ToolbarOptions);
123
+ /**
124
+ * @inheritDoc
125
+ */
126
+ render(): void;
127
+ /**
128
+ * @inheritDoc
129
+ */
130
+ destroy(): void;
131
+ /**
132
+ * Focuses the first focusable in {@link #focusables}.
133
+ */
134
+ focus(): void;
135
+ /**
136
+ * Focuses the last focusable in {@link #focusables}.
137
+ */
138
+ focusLast(): void;
139
+ /**
140
+ * A utility that expands the plain toolbar configuration into
141
+ * {@link module:ui/toolbar/toolbarview~ToolbarView#items} using a given component factory.
142
+ *
143
+ * @param itemsOrConfig The toolbar items or the entire toolbar configuration object.
144
+ * @param factory A factory producing toolbar items.
145
+ * @param removeItems An array of items names to be removed from the configuration. When present, applies
146
+ * to this toolbar and all nested ones as well.
147
+ */
148
+ fillFromConfig(itemsOrConfig: ToolbarConfig | undefined, factory: ComponentFactory, removeItems?: Array<string>): void;
149
+ /**
150
+ * A utility that expands the plain toolbar configuration into a list of view items using a given component factory.
151
+ *
152
+ * @param itemsOrConfig The toolbar items or the entire toolbar configuration object.
153
+ * @param factory A factory producing toolbar items.
154
+ * @param removeItems An array of items names to be removed from the configuration. When present, applies
155
+ * to this toolbar and all nested ones as well.
156
+ */
157
+ private _buildItemsFromConfig;
158
+ /**
159
+ * Cleans up the {@link module:ui/toolbar/toolbarview~ToolbarView#items} of the toolbar by removing unwanted items and
160
+ * duplicated (obsolete) separators or line breaks.
161
+ *
162
+ * @param items The toolbar items configuration.
163
+ * @param factory A factory producing toolbar items.
164
+ * @param removeItems An array of items names to be removed from the configuration.
165
+ * @returns Items after the clean-up.
166
+ */
167
+ private _cleanItemsConfiguration;
168
+ /**
169
+ * Remove leading, trailing, and duplicated separators (`-` and `|`).
170
+ *
171
+ * @returns Toolbar items after the separator and line break clean-up.
172
+ */
173
+ private _cleanSeparatorsAndLineBreaks;
174
+ /**
175
+ * Creates a user-defined dropdown containing a toolbar with items.
176
+ *
177
+ * @param definition A definition of the nested toolbar dropdown.
178
+ * @param definition.label A label of the dropdown.
179
+ * @param definition.icon An icon of the drop-down. One of 'bold', 'plus', 'text', 'importExport', 'alignLeft',
180
+ * 'paragraph' or an SVG string. When `false` is passed, no icon will be used.
181
+ * @param definition.withText When set `true`, the label of the dropdown will be visible. See
182
+ * {@link module:ui/button/buttonview~ButtonView#withText} to learn more.
183
+ * @param definition.tooltip A tooltip of the dropdown button. See
184
+ * {@link module:ui/button/buttonview~ButtonView#tooltip} to learn more. Defaults to `true`.
185
+ * @param componentFactory Component factory used to create items
186
+ * of the nested toolbar.
187
+ */
188
+ private _createNestedToolbarDropdown;
189
+ }
190
+ /**
191
+ * Fired when some toolbar {@link ~ToolbarView#items} were grouped or ungrouped as a result of some change
192
+ * in the toolbar geometry.
193
+ *
194
+ * **Note**: This event is always fired **once** regardless of the number of items that were be
195
+ * grouped or ungrouped at a time.
196
+ *
197
+ * **Note**: This event is fired only if the items grouping functionality was enabled in
198
+ * the first place (see {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull}).
199
+ *
200
+ * @eventName ~ToolbarView#groupedItemsUpdate
201
+ */
202
+ export type ToolbarViewGroupedItemsUpdateEvent = {
203
+ name: 'groupedItemsUpdate';
204
+ args: [];
205
+ };
206
+ /**
207
+ * An inner block of the {@link module:ui/toolbar/toolbarview~ToolbarView} hosting its
208
+ * {@link module:ui/toolbar/toolbarview~ToolbarView#items}.
209
+ */
210
+ declare class ItemsView extends View {
211
+ /**
212
+ * A collection of items (buttons, dropdowns, etc.).
213
+ */
214
+ readonly children: ViewCollection;
215
+ /**
216
+ * @inheritDoc
217
+ */
218
+ constructor(locale?: Locale);
219
+ }
220
+ /**
221
+ * Options passed to the {@link module:ui/toolbar/toolbarview~ToolbarView#constructor} of the toolbar.
222
+ */
223
+ export interface ToolbarOptions {
224
+ /**
225
+ * When set to `true`, the toolbar will automatically group {@link module:ui/toolbar/toolbarview~ToolbarView#items} that
226
+ * would normally wrap to the next line when there is not enough space to display them in a single row, for
227
+ * instance, if the parent container of the toolbar is narrow. For toolbars in absolutely positioned containers
228
+ * without width restrictions also the {@link module:ui/toolbar/toolbarview~ToolbarOptions#isFloating} option is required to be `true`.
229
+ *
230
+ * See also: {@link module:ui/toolbar/toolbarview~ToolbarView#maxWidth}.
231
+ */
232
+ shouldGroupWhenFull?: boolean;
233
+ /**
234
+ * This option should be enabled for toolbars in absolutely positioned containers without width restrictions
235
+ * to enable automatic {@link module:ui/toolbar/toolbarview~ToolbarView#items} grouping.
236
+ * When this option is set to `true`, the items will stop wrapping to the next line
237
+ * and together with {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull},
238
+ * this will allow grouping them when there is not enough space in a single row.
239
+ */
240
+ isFloating?: boolean;
241
+ }
242
+ /**
243
+ * A class interface defining the behavior of the {@link module:ui/toolbar/toolbarview~ToolbarView}.
244
+ *
245
+ * Toolbar behaviors extend its look and functionality and have an impact on the
246
+ * {@link module:ui/toolbar/toolbarview~ToolbarView#element} template or
247
+ * {@link module:ui/toolbar/toolbarview~ToolbarView#render rendering}. They can be enabled
248
+ * conditionally, e.g. depending on the configuration of the toolbar.
249
+ */
250
+ export interface ToolbarBehavior {
251
+ /**
252
+ * A method called after the toolbar has been {@link module:ui/toolbar/toolbarview~ToolbarView#render rendered}.
253
+ * It can be used to, for example, customize the behavior of the toolbar when its
254
+ * {@link module:ui/toolbar/toolbarview~ToolbarView#element} is available.
255
+ *
256
+ * @param view An instance of the toolbar being rendered.
257
+ */
258
+ render(view: ToolbarView): void;
259
+ /**
260
+ * A method called after the toolbar has been {@link module:ui/toolbar/toolbarview~ToolbarView#destroy destroyed}.
261
+ * It allows cleaning up after the toolbar behavior, for instance, this is the right place to detach
262
+ * event listeners, free up references, etc.
263
+ */
264
+ destroy(): void;
265
+ }
266
+ export {};