@ckeditor/ckeditor5-ui 41.2.0 → 41.3.0-alpha.1

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 (100) hide show
  1. package/dist/content-index.css +4 -0
  2. package/dist/editor-index.css +445 -0
  3. package/dist/index.css +844 -0
  4. package/dist/index.css.map +1 -0
  5. package/dist/index.js +13857 -0
  6. package/dist/index.js.map +1 -0
  7. package/dist/types/arialiveannouncer.d.ts +98 -0
  8. package/dist/types/augmentation.d.ts +88 -0
  9. package/dist/types/autocomplete/autocompleteview.d.ts +81 -0
  10. package/dist/types/bindings/addkeyboardhandlingforgrid.d.ts +27 -0
  11. package/dist/types/bindings/clickoutsidehandler.d.ts +28 -0
  12. package/dist/types/bindings/csstransitiondisablermixin.d.ts +40 -0
  13. package/dist/types/bindings/draggableviewmixin.d.ts +46 -0
  14. package/dist/types/bindings/injectcsstransitiondisabler.d.ts +59 -0
  15. package/dist/types/bindings/preventdefault.d.ts +33 -0
  16. package/dist/types/bindings/submithandler.d.ts +57 -0
  17. package/dist/types/button/button.d.ts +175 -0
  18. package/dist/types/button/buttonlabel.d.ts +34 -0
  19. package/dist/types/button/buttonlabelview.d.ts +31 -0
  20. package/dist/types/button/buttonview.d.ts +181 -0
  21. package/dist/types/button/switchbuttonview.d.ts +45 -0
  22. package/dist/types/collapsible/collapsibleview.d.ts +70 -0
  23. package/dist/types/colorgrid/colorgridview.d.ts +132 -0
  24. package/dist/types/colorgrid/colortileview.d.ts +28 -0
  25. package/dist/types/colorgrid/utils.d.ts +47 -0
  26. package/dist/types/colorpicker/colorpickerview.d.ts +142 -0
  27. package/dist/types/colorpicker/utils.d.ts +48 -0
  28. package/dist/types/colorselector/colorgridsfragmentview.d.ts +195 -0
  29. package/dist/types/colorselector/colorpickerfragmentview.d.ts +129 -0
  30. package/dist/types/colorselector/colorselectorview.d.ts +242 -0
  31. package/dist/types/colorselector/documentcolorcollection.d.ts +70 -0
  32. package/dist/types/componentfactory.d.ts +81 -0
  33. package/dist/types/dialog/dialog.d.ts +273 -0
  34. package/dist/types/dialog/dialogactionsview.d.ts +69 -0
  35. package/dist/types/dialog/dialogcontentview.d.ts +27 -0
  36. package/dist/types/dialog/dialogview.d.ts +256 -0
  37. package/dist/types/dropdown/button/dropdownbutton.d.ts +25 -0
  38. package/dist/types/dropdown/button/dropdownbuttonview.d.ts +48 -0
  39. package/dist/types/dropdown/button/splitbuttonview.d.ts +162 -0
  40. package/dist/types/dropdown/dropdownpanelfocusable.d.ts +21 -0
  41. package/dist/types/dropdown/dropdownpanelview.d.ts +62 -0
  42. package/dist/types/dropdown/dropdownview.d.ts +315 -0
  43. package/dist/types/dropdown/utils.d.ts +235 -0
  44. package/dist/types/editableui/editableuiview.d.ts +72 -0
  45. package/dist/types/editableui/inline/inlineeditableuiview.d.ts +40 -0
  46. package/dist/types/editorui/accessibilityhelp/accessibilityhelp.d.ts +47 -0
  47. package/dist/types/editorui/accessibilityhelp/accessibilityhelpcontentview.d.ts +35 -0
  48. package/dist/types/editorui/bodycollection.d.ts +55 -0
  49. package/dist/types/editorui/boxed/boxededitoruiview.d.ts +40 -0
  50. package/dist/types/editorui/editorui.d.ts +288 -0
  51. package/dist/types/editorui/editoruiview.d.ts +39 -0
  52. package/dist/types/editorui/poweredby.d.ts +71 -0
  53. package/dist/types/focuscycler.d.ts +245 -0
  54. package/dist/types/formheader/formheaderview.d.ts +59 -0
  55. package/dist/types/highlightedtext/highlightedtextview.d.ts +38 -0
  56. package/dist/types/icon/iconview.d.ts +88 -0
  57. package/dist/types/iframe/iframeview.d.ts +50 -0
  58. package/dist/types/index.d.ts +74 -0
  59. package/dist/types/input/inputbase.d.ts +107 -0
  60. package/dist/types/input/inputview.d.ts +36 -0
  61. package/dist/types/inputnumber/inputnumberview.d.ts +49 -0
  62. package/dist/types/inputtext/inputtextview.d.ts +18 -0
  63. package/dist/types/label/labelview.d.ts +36 -0
  64. package/dist/types/labeledfield/labeledfieldview.d.ts +187 -0
  65. package/dist/types/labeledfield/utils.d.ts +123 -0
  66. package/dist/types/labeledinput/labeledinputview.d.ts +125 -0
  67. package/dist/types/list/listitemgroupview.d.ts +59 -0
  68. package/dist/types/list/listitemview.d.ts +36 -0
  69. package/dist/types/list/listseparatorview.d.ts +18 -0
  70. package/dist/types/list/listview.d.ts +124 -0
  71. package/dist/types/model.d.ts +22 -0
  72. package/dist/types/notification/notification.d.ts +211 -0
  73. package/dist/types/panel/balloon/balloonpanelview.d.ts +685 -0
  74. package/dist/types/panel/balloon/contextualballoon.d.ts +299 -0
  75. package/dist/types/panel/sticky/stickypanelview.d.ts +156 -0
  76. package/dist/types/search/filteredview.d.ts +31 -0
  77. package/dist/types/search/searchinfoview.d.ts +45 -0
  78. package/dist/types/search/searchresultsview.d.ts +54 -0
  79. package/dist/types/search/text/searchtextqueryview.d.ts +76 -0
  80. package/dist/types/search/text/searchtextview.d.ts +219 -0
  81. package/dist/types/spinner/spinnerview.d.ts +25 -0
  82. package/dist/types/template.d.ts +942 -0
  83. package/dist/types/textarea/textareaview.d.ts +104 -0
  84. package/dist/types/toolbar/balloon/balloontoolbar.d.ts +117 -0
  85. package/dist/types/toolbar/block/blockbuttonview.d.ts +35 -0
  86. package/dist/types/toolbar/block/blocktoolbar.d.ts +153 -0
  87. package/dist/types/toolbar/normalizetoolbarconfig.d.ts +40 -0
  88. package/dist/types/toolbar/toolbarlinebreakview.d.ts +18 -0
  89. package/dist/types/toolbar/toolbarseparatorview.d.ts +18 -0
  90. package/dist/types/toolbar/toolbarview.d.ts +267 -0
  91. package/dist/types/tooltipmanager.d.ts +184 -0
  92. package/dist/types/view.d.ts +422 -0
  93. package/dist/types/viewcollection.d.ts +139 -0
  94. package/package.json +4 -3
  95. package/src/colorpicker/colorpickerview.js +0 -1
  96. package/src/index.d.ts +2 -2
  97. package/src/index.js +2 -1
  98. package/src/toolbar/toolbarview.js +2 -3
  99. package/theme/globals/globals.css +0 -1
  100. package/theme/globals/_reset.css +0 -13
@@ -0,0 +1,36 @@
1
+ /**
2
+ * @license Copyright (c) 2003-2024, 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/input/inputview
7
+ */
8
+ import { type Locale } from '@ckeditor/ckeditor5-utils';
9
+ import InputBase from './inputbase.js';
10
+ import '../../theme/components/input/input.css';
11
+ /**
12
+ * The input view class.
13
+ */
14
+ export default class InputView extends InputBase {
15
+ /**
16
+ * Corresponds to the `inputmode` DOM attribute. Can be `text`, `numeric`, `decimal`, etc.
17
+ *
18
+ * @observable
19
+ * @default 'text'
20
+ */
21
+ inputMode: string;
22
+ /**
23
+ * @inheritDoc
24
+ */
25
+ constructor(locale?: Locale);
26
+ }
27
+ /**
28
+ * Fired when the user types in the input. Corresponds to the native
29
+ * DOM `input` event.
30
+ *
31
+ * @eventName ~InputView#input
32
+ */
33
+ export type InputViewInputEvent = {
34
+ name: 'input';
35
+ args: [InputEvent];
36
+ };
@@ -0,0 +1,49 @@
1
+ /**
2
+ * @license Copyright (c) 2003-2024, 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/inputnumber/inputnumberview
7
+ */
8
+ import InputView from '../input/inputview.js';
9
+ import type { Locale } from '@ckeditor/ckeditor5-utils';
10
+ /**
11
+ * The number input view class.
12
+ */
13
+ export default class InputNumberView extends InputView {
14
+ /**
15
+ * The value of the `min` DOM attribute (the lowest accepted value) set on the {@link #element}.
16
+ *
17
+ * @observable
18
+ * @default undefined
19
+ */
20
+ min: number | undefined;
21
+ /**
22
+ * The value of the `max` DOM attribute (the highest accepted value) set on the {@link #element}.
23
+ *
24
+ * @observable
25
+ * @default undefined
26
+ */
27
+ max: number | undefined;
28
+ /**
29
+ * The value of the `step` DOM attribute set on the {@link #element}.
30
+ *
31
+ * @observable
32
+ * @default undefined
33
+ */
34
+ step: number | undefined;
35
+ /**
36
+ * Creates an instance of the input number view.
37
+ *
38
+ * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
39
+ * @param options The options of the input.
40
+ * @param options.min The value of the `min` DOM attribute (the lowest accepted value).
41
+ * @param options.max The value of the `max` DOM attribute (the highest accepted value).
42
+ * @param options.step The value of the `step` DOM attribute.
43
+ */
44
+ constructor(locale?: Locale, { min, max, step }?: {
45
+ min?: number;
46
+ max?: number;
47
+ step?: number;
48
+ });
49
+ }
@@ -0,0 +1,18 @@
1
+ /**
2
+ * @license Copyright (c) 2003-2024, 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/inputtext/inputtextview
7
+ */
8
+ import InputView from '../input/inputview.js';
9
+ import type { Locale } from '@ckeditor/ckeditor5-utils';
10
+ /**
11
+ * The text input view class.
12
+ */
13
+ export default class InputTextView extends InputView {
14
+ /**
15
+ * @inheritDoc
16
+ */
17
+ constructor(locale?: Locale);
18
+ }
@@ -0,0 +1,36 @@
1
+ /**
2
+ * @license Copyright (c) 2003-2024, 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/label/labelview
7
+ */
8
+ import View from '../view.js';
9
+ import { type Locale } from '@ckeditor/ckeditor5-utils';
10
+ import '../../theme/components/label/label.css';
11
+ /**
12
+ * The label view class.
13
+ */
14
+ export default class LabelView extends View {
15
+ /**
16
+ * An unique id of the label. It can be used by other UI components to reference
17
+ * the label, for instance, using the `aria-describedby` DOM attribute.
18
+ */
19
+ readonly id: string;
20
+ /**
21
+ * The text of the label.
22
+ *
23
+ * @observable
24
+ */
25
+ text: string | undefined;
26
+ /**
27
+ * The `for` attribute of the label (i.e. to pair with an `<input>` element).
28
+ *
29
+ * @observable
30
+ */
31
+ for: string | undefined;
32
+ /**
33
+ * @inheritDoc
34
+ */
35
+ constructor(locale?: Locale);
36
+ }
@@ -0,0 +1,187 @@
1
+ /**
2
+ * @license Copyright (c) 2003-2024, 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/labeledfield/labeledfieldview
7
+ */
8
+ import View from '../view.js';
9
+ import LabelView from '../label/labelview.js';
10
+ import type { FocusableView } from '../focuscycler.js';
11
+ import type ViewCollection from '../viewcollection.js';
12
+ import { type Locale } from '@ckeditor/ckeditor5-utils';
13
+ import '../../theme/components/labeledfield/labeledfieldview.css';
14
+ /**
15
+ * The labeled field view class. It can be used to enhance any view with the following features:
16
+ *
17
+ * * a label,
18
+ * * (optional) an error message,
19
+ * * (optional) an info (status) text,
20
+ *
21
+ * all bound logically by proper DOM attributes for UX and accessibility. It also provides an interface
22
+ * (e.g. observable properties) that allows controlling those additional features.
23
+ *
24
+ * The constructor of this class requires a callback that returns a view to be labeled. The callback
25
+ * is called with unique ids that allow binding of DOM properties:
26
+ *
27
+ * ```ts
28
+ * const labeledInputView = new LabeledFieldView( locale, ( labeledFieldView, viewUid, statusUid ) => {
29
+ * const inputView = new InputTextView( labeledFieldView.locale );
30
+ *
31
+ * inputView.set( {
32
+ * id: viewUid,
33
+ * ariaDescribedById: statusUid
34
+ * } );
35
+ *
36
+ * inputView.bind( 'isReadOnly' ).to( labeledFieldView, 'isEnabled', value => !value );
37
+ * inputView.bind( 'hasError' ).to( labeledFieldView, 'errorText', value => !!value );
38
+ *
39
+ * return inputView;
40
+ * } );
41
+ *
42
+ * labeledInputView.label = 'User name';
43
+ * labeledInputView.infoText = 'Full name like for instance, John Doe.';
44
+ * labeledInputView.render();
45
+ *
46
+ * document.body.append( labeledInputView.element );
47
+ * ```
48
+ *
49
+ * See {@link module:ui/labeledfield/utils} to discover ready–to–use labeled input helpers for common
50
+ * UI components.
51
+ */
52
+ export default class LabeledFieldView<TFieldView extends FocusableView = FocusableView> extends View {
53
+ /**
54
+ * The field view that gets labeled.
55
+ */
56
+ readonly fieldView: TFieldView;
57
+ /**
58
+ * The label view instance that describes the entire view.
59
+ */
60
+ readonly labelView: LabelView;
61
+ /**
62
+ * The status view for the {@link #fieldView}. It displays {@link #errorText} and
63
+ * {@link #infoText}.
64
+ */
65
+ readonly statusView: View;
66
+ /**
67
+ * A collection of children of the internal wrapper element. Allows inserting additional DOM elements (views) next to
68
+ * the {@link #fieldView} for easy styling (e.g. positioning).
69
+ *
70
+ * By default, the collection contains {@link #fieldView} and {@link #labelView}.
71
+ */
72
+ readonly fieldWrapperChildren: ViewCollection;
73
+ /**
74
+ * The text of the label.
75
+ *
76
+ * @observable
77
+ */
78
+ label: string | undefined;
79
+ /**
80
+ * Controls whether the component is in read-only mode.
81
+ *
82
+ * @observable
83
+ */
84
+ isEnabled: boolean;
85
+ /**
86
+ * An observable flag set to `true` when {@link #fieldView} is empty (`false` otherwise).
87
+ *
88
+ * @readonly
89
+ * @observable
90
+ * @default true
91
+ */
92
+ isEmpty: boolean;
93
+ /**
94
+ * An observable flag set to `true` when {@link #fieldView} is currently focused by
95
+ * the user (`false` otherwise).
96
+ *
97
+ * @readonly
98
+ * @observable
99
+ * @default false
100
+ */
101
+ isFocused: boolean;
102
+ /**
103
+ * The validation error text. When set, it will be displayed
104
+ * next to the {@link #fieldView} as a typical validation error message.
105
+ * Set it to `null` to hide the message.
106
+ *
107
+ * **Note:** Setting this property to anything but `null` will automatically
108
+ * make the `hasError` of the {@link #fieldView} `true`.
109
+ *
110
+ * @observable
111
+ */
112
+ errorText: string | null;
113
+ /**
114
+ * The additional information text displayed next to the {@link #fieldView} which can
115
+ * be used to inform the user about its purpose, provide help or hints.
116
+ *
117
+ * Set it to `null` to hide the message.
118
+ *
119
+ * **Note:** This text will be displayed in the same place as {@link #errorText} but the
120
+ * latter always takes precedence: if the {@link #errorText} is set, it replaces
121
+ * {@link #infoText}.
122
+ *
123
+ * @observable
124
+ * @default null
125
+ */
126
+ infoText: string | null;
127
+ /**
128
+ * (Optional) The additional CSS class set on the dropdown {@link #element}.
129
+ *
130
+ * @observable
131
+ */
132
+ class: string | undefined;
133
+ /**
134
+ * The content of the `placeholder` attribute of the {@link #fieldView}.
135
+ *
136
+ * @observable
137
+ */
138
+ placeholder: string | undefined;
139
+ /**
140
+ * The combined status text made of {@link #errorText} and {@link #infoText}.
141
+ * Note that when present, {@link #errorText} always takes precedence in the
142
+ * status.
143
+ *
144
+ * @see #errorText
145
+ * @see #infoText
146
+ * @see #statusView
147
+ * @private
148
+ * @observable
149
+ */
150
+ _statusText: string | null;
151
+ /**
152
+ * Creates an instance of the labeled field view class using a provided creator function
153
+ * that provides the view to be labeled.
154
+ *
155
+ * @param locale The locale instance.
156
+ * @param viewCreator A function that returns a {@link module:ui/view~View}
157
+ * that will be labeled. The following arguments are passed to the creator function:
158
+ *
159
+ * * an instance of the `LabeledFieldView` to allow binding observable properties,
160
+ * * an UID string that connects the {@link #labelView label} and the labeled field view in DOM,
161
+ * * an UID string that connects the {@link #statusView status} and the labeled field view in DOM.
162
+ */
163
+ constructor(locale: Locale | undefined, viewCreator: LabeledFieldViewCreator<TFieldView>);
164
+ /**
165
+ * Creates label view class instance and bind with view.
166
+ *
167
+ * @param id Unique id to set as labelView#for attribute.
168
+ */
169
+ private _createLabelView;
170
+ /**
171
+ * Creates the status view instance. It displays {@link #errorText} and {@link #infoText}
172
+ * next to the {@link #fieldView}. See {@link #_statusText}.
173
+ *
174
+ * @param statusUid Unique id of the status, shared with the {@link #fieldView view's}
175
+ * `aria-describedby` attribute.
176
+ */
177
+ private _createStatusView;
178
+ /**
179
+ * Focuses the {@link #fieldView}.
180
+ */
181
+ focus(direction?: 1 | -1): void;
182
+ }
183
+ /**
184
+ * A creator function that returns a focusable view to be labeled by a {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView}
185
+ * instance.
186
+ */
187
+ export type LabeledFieldViewCreator<TFieldView extends FocusableView> = (labeledFieldView: LabeledFieldView, viewUid: string, statusUid: string) => TFieldView;
@@ -0,0 +1,123 @@
1
+ /**
2
+ * @license Copyright (c) 2003-2024, 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/labeledfield/utils
7
+ */
8
+ import InputTextView from '../inputtext/inputtextview.js';
9
+ import InputNumberView from '../inputnumber/inputnumberview.js';
10
+ import TextareaView from '../textarea/textareaview.js';
11
+ import type DropdownView from '../dropdown/dropdownview.js';
12
+ import type { LabeledFieldViewCreator } from './labeledfieldview.js';
13
+ /**
14
+ * A helper for creating labeled inputs.
15
+ *
16
+ * It creates an instance of a {@link module:ui/inputtext/inputtextview~InputTextView input text} that is
17
+ * logically related to a {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView labeled view} in DOM.
18
+ *
19
+ * The helper does the following:
20
+ *
21
+ * * It sets input's `id` and `ariaDescribedById` attributes.
22
+ * * It binds input's `isReadOnly` to the labeled view.
23
+ * * It binds input's `hasError` to the labeled view.
24
+ * * It enables a logic that cleans up the error when user starts typing in the input.
25
+ *
26
+ * Usage:
27
+ *
28
+ * ```ts
29
+ * const labeledInputView = new LabeledFieldView( locale, createLabeledInputText );
30
+ * console.log( labeledInputView.fieldView ); // A text input instance.
31
+ * ```
32
+ *
33
+ * @param labeledFieldView The instance of the labeled field view.
34
+ * @param viewUid A UID string that allows DOM logical connection between the
35
+ * {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#labelView labeled view's label} and the input.
36
+ * @param statusUid A UID string that allows DOM logical connection between the
37
+ * {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#statusView labeled view's status} and the input.
38
+ * @returns The input text view instance.
39
+ */
40
+ declare const createLabeledInputText: LabeledFieldViewCreator<InputTextView>;
41
+ /**
42
+ * A helper for creating labeled number inputs.
43
+ *
44
+ * It creates an instance of a {@link module:ui/inputnumber/inputnumberview~InputNumberView input number} that is
45
+ * logically related to a {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView labeled view} in DOM.
46
+ *
47
+ * The helper does the following:
48
+ *
49
+ * * It sets input's `id` and `ariaDescribedById` attributes.
50
+ * * It binds input's `isReadOnly` to the labeled view.
51
+ * * It binds input's `hasError` to the labeled view.
52
+ * * It enables a logic that cleans up the error when user starts typing in the input.
53
+ *
54
+ * Usage:
55
+ *
56
+ * ```ts
57
+ * const labeledInputView = new LabeledFieldView( locale, createLabeledInputNumber );
58
+ * console.log( labeledInputView.fieldView ); // A number input instance.
59
+ * ```
60
+ *
61
+ * @param labeledFieldView The instance of the labeled field view.
62
+ * @param viewUid A UID string that allows DOM logical connection between the
63
+ * {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#labelView labeled view's label} and the input.
64
+ * @param statusUid A UID string that allows DOM logical connection between the
65
+ * {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#statusView labeled view's status} and the input.
66
+ * @returns The input number view instance.
67
+ */
68
+ declare const createLabeledInputNumber: LabeledFieldViewCreator<InputNumberView>;
69
+ /**
70
+ * A helper for creating labeled textarea.
71
+ *
72
+ * It creates an instance of a {@link module:ui/textarea/textareaview~TextareaView textarea} that is
73
+ * logically related to a {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView labeled view} in DOM.
74
+ *
75
+ * The helper does the following:
76
+ *
77
+ * * It sets textarea's `id` and `ariaDescribedById` attributes.
78
+ * * It binds textarea's `isReadOnly` to the labeled view.
79
+ * * It binds textarea's `hasError` to the labeled view.
80
+ * * It enables a logic that cleans up the error when user starts typing in the textarea.
81
+ *
82
+ * Usage:
83
+ *
84
+ * ```ts
85
+ * const labeledTextarea = new LabeledFieldView( locale, createLabeledTextarea );
86
+ * console.log( labeledTextarea.fieldView ); // A textarea instance.
87
+ * ```
88
+ *
89
+ * @param labeledFieldView The instance of the labeled field view.
90
+ * @param viewUid A UID string that allows DOM logical connection between the
91
+ * {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#labelView labeled view's label} and the textarea.
92
+ * @param statusUid A UID string that allows DOM logical connection between the
93
+ * {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#statusView labeled view's status} and the textarea.
94
+ * @returns The textarea view instance.
95
+ */
96
+ declare const createLabeledTextarea: LabeledFieldViewCreator<TextareaView>;
97
+ /**
98
+ * A helper for creating labeled dropdowns.
99
+ *
100
+ * It creates an instance of a {@link module:ui/dropdown/dropdownview~DropdownView dropdown} that is
101
+ * logically related to a {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView labeled field view}.
102
+ *
103
+ * The helper does the following:
104
+ *
105
+ * * It sets dropdown's `id` and `ariaDescribedById` attributes.
106
+ * * It binds input's `isEnabled` to the labeled view.
107
+ *
108
+ * Usage:
109
+ *
110
+ * ```ts
111
+ * const labeledInputView = new LabeledFieldView( locale, createLabeledDropdown );
112
+ * console.log( labeledInputView.fieldView ); // A dropdown instance.
113
+ * ```
114
+ *
115
+ * @param labeledFieldView The instance of the labeled field view.
116
+ * @param viewUid A UID string that allows DOM logical connection between the
117
+ * {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#labelView labeled view label} and the dropdown.
118
+ * @param statusUid A UID string that allows DOM logical connection between the
119
+ * {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#statusView labeled view status} and the dropdown.
120
+ * @returns The dropdown view instance.
121
+ */
122
+ declare const createLabeledDropdown: LabeledFieldViewCreator<DropdownView>;
123
+ export { createLabeledInputNumber, createLabeledInputText, createLabeledTextarea, createLabeledDropdown };
@@ -0,0 +1,125 @@
1
+ /**
2
+ * @license Copyright (c) 2003-2024, 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/labeledinput/labeledinputview
7
+ */
8
+ import View from '../view.js';
9
+ import LabelView from '../label/labelview.js';
10
+ import type { default as InputView } from '../input/inputview.js';
11
+ import { type Locale } from '@ckeditor/ckeditor5-utils';
12
+ import '../../theme/components/labeledinput/labeledinput.css';
13
+ /**
14
+ * The labeled input view class.
15
+ */
16
+ export default class LabeledInputView extends View {
17
+ /**
18
+ * The label view.
19
+ */
20
+ readonly labelView: LabelView;
21
+ /**
22
+ * The input view.
23
+ */
24
+ readonly inputView: InputView;
25
+ /**
26
+ * The status view for the {@link #inputView}. It displays {@link #errorText} and
27
+ * {@link #infoText}.
28
+ */
29
+ readonly statusView: View;
30
+ /**
31
+ * The text of the label.
32
+ *
33
+ * @observable
34
+ */
35
+ label: string | undefined;
36
+ /**
37
+ * The value of the input.
38
+ *
39
+ * @observable
40
+ */
41
+ value: string | undefined;
42
+ /**
43
+ * Controls whether the component is in read-only mode.
44
+ *
45
+ * @observable
46
+ */
47
+ isReadOnly: boolean;
48
+ /**
49
+ * The validation error text. When set, it will be displayed
50
+ * next to the {@link #inputView} as a typical validation error message.
51
+ * Set it to `null` to hide the message.
52
+ *
53
+ * **Note:** Setting this property to anything but `null` will automatically
54
+ * make the {@link module:ui/inputtext/inputtextview~InputTextView#hasError `hasError`}
55
+ * of the {@link #inputView} `true`.
56
+ *
57
+ * **Note:** Typing in the {@link #inputView} which fires the
58
+ * {@link module:ui/inputtext/inputtextview~InputTextView#event:input `input` event}
59
+ * resets this property back to `null`, indicating that the input field can be re–validated.
60
+ *
61
+ * @observable
62
+ */
63
+ errorText: string | null;
64
+ /**
65
+ * The additional information text displayed next to the {@link #inputView} which can
66
+ * be used to inform the user about the purpose of the input, provide help or hints.
67
+ *
68
+ * Set it to `null` to hide the message.
69
+ *
70
+ * **Note:** This text will be displayed in the same place as {@link #errorText} but the
71
+ * latter always takes precedence: if the {@link #errorText} is set, it replaces
72
+ * {@link #errorText} for as long as the value of the input is invalid.
73
+ *
74
+ * @observable
75
+ */
76
+ infoText: string | null;
77
+ /**
78
+ * The combined status text made of {@link #errorText} and {@link #infoText}.
79
+ * Note that when present, {@link #errorText} always takes precedence in the
80
+ * status.
81
+ *
82
+ * @see #errorText
83
+ * @see #infoText
84
+ * @see #statusView
85
+ * @private
86
+ * @observable
87
+ */
88
+ _statusText: string | null;
89
+ /**
90
+ * Creates an instance of the labeled input view class.
91
+ *
92
+ * @param locale The locale instance.
93
+ * @param InputView Constructor of the input view.
94
+ */
95
+ constructor(locale: Locale | undefined, InputView: new (locale: Locale | undefined, statusUid: string) => InputView);
96
+ /**
97
+ * Creates label view class instance and bind with view.
98
+ *
99
+ * @param id Unique id to set as labelView#for attribute.
100
+ */
101
+ private _createLabelView;
102
+ /**
103
+ * Creates input view class instance and bind with view.
104
+ *
105
+ * @param InputView Input view constructor.
106
+ * @param inputUid Unique id to set as inputView#id attribute.
107
+ * @param statusUid Unique id of the status for the input's `aria-describedby` attribute.
108
+ */
109
+ private _createInputView;
110
+ /**
111
+ * Creates the status view instance. It displays {@link #errorText} and {@link #infoText}
112
+ * next to the {@link #inputView}. See {@link #_statusText}.
113
+ *
114
+ * @param statusUid Unique id of the status, shared with the input's `aria-describedby` attribute.
115
+ */
116
+ private _createStatusView;
117
+ /**
118
+ * Moves the focus to the input and selects the value.
119
+ */
120
+ select(): void;
121
+ /**
122
+ * Focuses the input.
123
+ */
124
+ focus(): void;
125
+ }
@@ -0,0 +1,59 @@
1
+ /**
2
+ * @license Copyright (c) 2003-2024, 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/list/listitemgroupview
7
+ */
8
+ import View from '../view.js';
9
+ import type ViewCollection from '../viewcollection.js';
10
+ import ListView from './listview.js';
11
+ import LabelView from '../label/labelview.js';
12
+ import { type Locale } from '@ckeditor/ckeditor5-utils';
13
+ /**
14
+ * The list item group view class.
15
+ */
16
+ export default class ListItemGroupView extends View {
17
+ /**
18
+ * The visible label of the group.
19
+ *
20
+ * @observable
21
+ * @default ''
22
+ */
23
+ label: string;
24
+ /**
25
+ * Label of the group view. Its text is configurable using the {@link #label label attribute}.
26
+ *
27
+ * If a custom label view is not passed in `ListItemGroupView` constructor, the label is an instance
28
+ * of {@link module:ui/label/labelview~LabelView}.
29
+ */
30
+ readonly labelView: LabelView;
31
+ /**
32
+ * Collection of the child list items inside this group.
33
+ */
34
+ readonly items: ListView['items'];
35
+ /**
36
+ * Collection of the child elements of the group.
37
+ */
38
+ readonly children: ViewCollection;
39
+ /**
40
+ * Controls whether the item view is visible. Visible by default, list items are hidden
41
+ * using a CSS class.
42
+ *
43
+ * @observable
44
+ * @default true
45
+ */
46
+ isVisible: boolean;
47
+ /**
48
+ * Creates an instance of the list item group view class.
49
+ *
50
+ * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
51
+ * @param labelView The instance of the group's label. If not provided, an instance of
52
+ * {@link module:ui/label/labelview~LabelView} is used.
53
+ */
54
+ constructor(locale?: Locale, labelView?: LabelView);
55
+ /**
56
+ * Focuses the list item (which is not a separator).
57
+ */
58
+ focus(): void;
59
+ }
@@ -0,0 +1,36 @@
1
+ /**
2
+ * @license Copyright (c) 2003-2024, 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/list/listitemview
7
+ */
8
+ import View from '../view.js';
9
+ import type { FocusableView } from '../focuscycler.js';
10
+ import type ViewCollection from '../viewcollection.js';
11
+ import type { Locale } from '@ckeditor/ckeditor5-utils';
12
+ /**
13
+ * The list item view class.
14
+ */
15
+ export default class ListItemView extends View {
16
+ /**
17
+ * Collection of the child views inside of the list item {@link #element}.
18
+ */
19
+ readonly children: ViewCollection<FocusableView>;
20
+ /**
21
+ * Controls whether the item view is visible. Visible by default, list items are hidden
22
+ * using a CSS class.
23
+ *
24
+ * @observable
25
+ * @default true
26
+ */
27
+ isVisible: boolean;
28
+ /**
29
+ * @inheritDoc
30
+ */
31
+ constructor(locale?: Locale);
32
+ /**
33
+ * Focuses the list item.
34
+ */
35
+ focus(): void;
36
+ }
@@ -0,0 +1,18 @@
1
+ /**
2
+ * @license Copyright (c) 2003-2024, 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/list/listseparatorview
7
+ */
8
+ import View from '../view.js';
9
+ import type { Locale } from '@ckeditor/ckeditor5-utils';
10
+ /**
11
+ * The list separator view class.
12
+ */
13
+ export default class ListSeparatorView extends View {
14
+ /**
15
+ * @inheritDoc
16
+ */
17
+ constructor(locale?: Locale);
18
+ }