@ckeditor/ckeditor5-ui 38.0.1 → 38.1.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.
- package/lang/translations/it.po +1 -1
- package/package.json +3 -32
- package/src/augmentation.d.ts +86 -86
- package/src/augmentation.js +5 -5
- package/src/bindings/addkeyboardhandlingforgrid.d.ts +27 -27
- package/src/bindings/addkeyboardhandlingforgrid.js +107 -107
- package/src/bindings/clickoutsidehandler.d.ts +28 -28
- package/src/bindings/clickoutsidehandler.js +36 -36
- package/src/bindings/csstransitiondisablermixin.d.ts +40 -40
- package/src/bindings/csstransitiondisablermixin.js +55 -55
- package/src/bindings/injectcsstransitiondisabler.d.ts +59 -59
- package/src/bindings/injectcsstransitiondisabler.js +71 -71
- package/src/bindings/preventdefault.d.ts +33 -33
- package/src/bindings/preventdefault.js +34 -34
- package/src/bindings/submithandler.d.ts +57 -57
- package/src/bindings/submithandler.js +47 -47
- package/src/button/button.d.ts +178 -178
- package/src/button/button.js +5 -5
- package/src/button/buttonview.d.ts +177 -177
- package/src/button/buttonview.js +231 -231
- package/src/button/switchbuttonview.d.ts +45 -45
- package/src/button/switchbuttonview.js +75 -75
- package/src/colorgrid/colorgridview.d.ts +132 -132
- package/src/colorgrid/colorgridview.js +124 -124
- package/src/colorgrid/colortileview.d.ts +28 -28
- package/src/colorgrid/colortileview.js +40 -40
- package/src/colorgrid/utils.d.ts +47 -47
- package/src/colorgrid/utils.js +84 -84
- package/src/colorpicker/colorpickerview.d.ts +110 -110
- package/src/colorpicker/colorpickerview.js +253 -250
- package/src/colorpicker/utils.d.ts +35 -35
- package/src/colorpicker/utils.js +99 -99
- package/src/componentfactory.d.ts +81 -81
- package/src/componentfactory.js +104 -104
- package/src/dropdown/button/dropdownbutton.d.ts +25 -25
- package/src/dropdown/button/dropdownbutton.js +5 -5
- package/src/dropdown/button/dropdownbuttonview.d.ts +48 -48
- package/src/dropdown/button/dropdownbuttonview.js +66 -66
- package/src/dropdown/button/splitbuttonview.d.ts +161 -161
- package/src/dropdown/button/splitbuttonview.js +152 -152
- package/src/dropdown/dropdownpanelfocusable.d.ts +21 -21
- package/src/dropdown/dropdownpanelfocusable.js +5 -5
- package/src/dropdown/dropdownpanelview.d.ts +62 -62
- package/src/dropdown/dropdownpanelview.js +96 -96
- package/src/dropdown/dropdownview.d.ts +315 -315
- package/src/dropdown/dropdownview.js +378 -378
- package/src/dropdown/utils.d.ts +221 -221
- package/src/dropdown/utils.js +434 -434
- package/src/editableui/editableuiview.d.ts +72 -72
- package/src/editableui/editableuiview.js +112 -112
- package/src/editableui/inline/inlineeditableuiview.d.ts +40 -40
- package/src/editableui/inline/inlineeditableuiview.js +48 -48
- package/src/editorui/bodycollection.d.ts +55 -51
- package/src/editorui/bodycollection.js +84 -78
- package/src/editorui/boxed/boxededitoruiview.d.ts +40 -40
- package/src/editorui/boxed/boxededitoruiview.js +81 -81
- package/src/editorui/editorui.d.ts +282 -274
- package/src/editorui/editorui.js +410 -388
- package/src/editorui/editoruiview.d.ts +39 -39
- package/src/editorui/editoruiview.js +38 -38
- package/src/editorui/poweredby.d.ts +71 -76
- package/src/editorui/poweredby.js +294 -291
- package/src/focuscycler.d.ts +183 -183
- package/src/focuscycler.js +220 -220
- package/src/formheader/formheaderview.d.ts +53 -53
- package/src/formheader/formheaderview.js +63 -63
- package/src/icon/iconview.d.ts +78 -78
- package/src/icon/iconview.js +112 -112
- package/src/iframe/iframeview.d.ts +50 -50
- package/src/iframe/iframeview.js +63 -63
- package/src/index.d.ts +62 -61
- package/src/index.js +61 -60
- package/src/input/inputview.d.ts +121 -121
- package/src/input/inputview.js +106 -106
- package/src/inputnumber/inputnumberview.d.ts +49 -49
- package/src/inputnumber/inputnumberview.js +40 -40
- package/src/inputtext/inputtextview.d.ts +18 -18
- package/src/inputtext/inputtextview.js +27 -27
- package/src/label/labelview.d.ts +36 -36
- package/src/label/labelview.js +41 -41
- package/src/labeledfield/labeledfieldview.d.ts +182 -182
- package/src/labeledfield/labeledfieldview.js +157 -157
- package/src/labeledfield/utils.d.ts +93 -93
- package/src/labeledfield/utils.js +131 -131
- package/src/labeledinput/labeledinputview.d.ts +125 -125
- package/src/labeledinput/labeledinputview.js +125 -125
- package/src/list/listitemview.d.ts +35 -35
- package/src/list/listitemview.js +40 -40
- package/src/list/listseparatorview.d.ts +18 -18
- package/src/list/listseparatorview.js +28 -28
- package/src/list/listview.d.ts +65 -65
- package/src/list/listview.js +90 -90
- package/src/model.d.ts +22 -22
- package/src/model.js +31 -31
- package/src/notification/notification.d.ts +211 -211
- package/src/notification/notification.js +187 -187
- package/src/panel/balloon/balloonpanelview.d.ts +685 -685
- package/src/panel/balloon/balloonpanelview.js +988 -988
- package/src/panel/balloon/contextualballoon.d.ts +299 -299
- package/src/panel/balloon/contextualballoon.js +572 -572
- package/src/panel/sticky/stickypanelview.d.ts +132 -132
- package/src/panel/sticky/stickypanelview.js +139 -139
- package/src/template.d.ts +942 -942
- package/src/template.js +1294 -1294
- package/src/toolbar/balloon/balloontoolbar.d.ts +122 -122
- package/src/toolbar/balloon/balloontoolbar.js +300 -300
- package/src/toolbar/block/blockbuttonview.d.ts +35 -35
- package/src/toolbar/block/blockbuttonview.js +41 -41
- package/src/toolbar/block/blocktoolbar.d.ts +161 -153
- package/src/toolbar/block/blocktoolbar.js +391 -374
- package/src/toolbar/normalizetoolbarconfig.d.ts +39 -39
- package/src/toolbar/normalizetoolbarconfig.js +51 -51
- package/src/toolbar/toolbarlinebreakview.d.ts +18 -18
- package/src/toolbar/toolbarlinebreakview.js +28 -28
- package/src/toolbar/toolbarseparatorview.d.ts +18 -18
- package/src/toolbar/toolbarseparatorview.js +28 -28
- package/src/toolbar/toolbarview.d.ts +265 -265
- package/src/toolbar/toolbarview.js +717 -717
- package/src/tooltipmanager.d.ts +180 -180
- package/src/tooltipmanager.js +353 -353
- package/src/view.d.ts +422 -422
- package/src/view.js +396 -396
- package/src/viewcollection.d.ts +139 -139
- package/src/viewcollection.js +206 -206
- package/theme/components/colorpicker/colorpicker.css +4 -4
- package/theme/globals/_poweredby.css +5 -1
- package/theme/icons/project-logo.svg +1 -1
|
@@ -1,125 +1,125 @@
|
|
|
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/labeledinput/labeledinputview
|
|
7
|
-
*/
|
|
8
|
-
import View from '../view';
|
|
9
|
-
import LabelView from '../label/labelview';
|
|
10
|
-
import { uid } from '@ckeditor/ckeditor5-utils';
|
|
11
|
-
import '../../theme/components/labeledinput/labeledinput.css';
|
|
12
|
-
/**
|
|
13
|
-
* The labeled input view class.
|
|
14
|
-
*/
|
|
15
|
-
export default class LabeledInputView extends View {
|
|
16
|
-
/**
|
|
17
|
-
* Creates an instance of the labeled input view class.
|
|
18
|
-
*
|
|
19
|
-
* @param locale The locale instance.
|
|
20
|
-
* @param InputView Constructor of the input view.
|
|
21
|
-
*/
|
|
22
|
-
constructor(locale, InputView) {
|
|
23
|
-
super(locale);
|
|
24
|
-
const inputUid = `ck-input-${uid()}`;
|
|
25
|
-
const statusUid = `ck-status-${uid()}`;
|
|
26
|
-
this.set('label', undefined);
|
|
27
|
-
this.set('value', undefined);
|
|
28
|
-
this.set('isReadOnly', false);
|
|
29
|
-
this.set('errorText', null);
|
|
30
|
-
this.set('infoText', null);
|
|
31
|
-
this.labelView = this._createLabelView(inputUid);
|
|
32
|
-
this.inputView = this._createInputView(InputView, inputUid, statusUid);
|
|
33
|
-
this.statusView = this._createStatusView(statusUid);
|
|
34
|
-
this.bind('_statusText').to(this, 'errorText', this, 'infoText', (errorText, infoText) => errorText || infoText);
|
|
35
|
-
const bind = this.bindTemplate;
|
|
36
|
-
this.setTemplate({
|
|
37
|
-
tag: 'div',
|
|
38
|
-
attributes: {
|
|
39
|
-
class: [
|
|
40
|
-
'ck',
|
|
41
|
-
'ck-labeled-input',
|
|
42
|
-
bind.if('isReadOnly', 'ck-disabled')
|
|
43
|
-
]
|
|
44
|
-
},
|
|
45
|
-
children: [
|
|
46
|
-
this.labelView,
|
|
47
|
-
this.inputView,
|
|
48
|
-
this.statusView
|
|
49
|
-
]
|
|
50
|
-
});
|
|
51
|
-
}
|
|
52
|
-
/**
|
|
53
|
-
* Creates label view class instance and bind with view.
|
|
54
|
-
*
|
|
55
|
-
* @param id Unique id to set as labelView#for attribute.
|
|
56
|
-
*/
|
|
57
|
-
_createLabelView(id) {
|
|
58
|
-
const labelView = new LabelView(this.locale);
|
|
59
|
-
labelView.for = id;
|
|
60
|
-
labelView.bind('text').to(this, 'label');
|
|
61
|
-
return labelView;
|
|
62
|
-
}
|
|
63
|
-
/**
|
|
64
|
-
* Creates input view class instance and bind with view.
|
|
65
|
-
*
|
|
66
|
-
* @param InputView Input view constructor.
|
|
67
|
-
* @param inputUid Unique id to set as inputView#id attribute.
|
|
68
|
-
* @param statusUid Unique id of the status for the input's `aria-describedby` attribute.
|
|
69
|
-
*/
|
|
70
|
-
_createInputView(InputView, inputUid, statusUid) {
|
|
71
|
-
const inputView = new InputView(this.locale, statusUid);
|
|
72
|
-
inputView.id = inputUid;
|
|
73
|
-
inputView.ariaDescribedById = statusUid;
|
|
74
|
-
inputView.bind('value').to(this);
|
|
75
|
-
inputView.bind('isReadOnly').to(this);
|
|
76
|
-
inputView.bind('hasError').to(this, 'errorText', value => !!value);
|
|
77
|
-
inputView.on('input', () => {
|
|
78
|
-
// UX: Make the error text disappear and disable the error indicator as the user
|
|
79
|
-
// starts fixing the errors.
|
|
80
|
-
this.errorText = null;
|
|
81
|
-
});
|
|
82
|
-
return inputView;
|
|
83
|
-
}
|
|
84
|
-
/**
|
|
85
|
-
* Creates the status view instance. It displays {@link #errorText} and {@link #infoText}
|
|
86
|
-
* next to the {@link #inputView}. See {@link #_statusText}.
|
|
87
|
-
*
|
|
88
|
-
* @param statusUid Unique id of the status, shared with the input's `aria-describedby` attribute.
|
|
89
|
-
*/
|
|
90
|
-
_createStatusView(statusUid) {
|
|
91
|
-
const statusView = new View(this.locale);
|
|
92
|
-
const bind = this.bindTemplate;
|
|
93
|
-
statusView.setTemplate({
|
|
94
|
-
tag: 'div',
|
|
95
|
-
attributes: {
|
|
96
|
-
class: [
|
|
97
|
-
'ck',
|
|
98
|
-
'ck-labeled-input__status',
|
|
99
|
-
bind.if('errorText', 'ck-labeled-input__status_error'),
|
|
100
|
-
bind.if('_statusText', 'ck-hidden', value => !value)
|
|
101
|
-
],
|
|
102
|
-
id: statusUid,
|
|
103
|
-
role: bind.if('errorText', 'alert')
|
|
104
|
-
},
|
|
105
|
-
children: [
|
|
106
|
-
{
|
|
107
|
-
text: bind.to('_statusText')
|
|
108
|
-
}
|
|
109
|
-
]
|
|
110
|
-
});
|
|
111
|
-
return statusView;
|
|
112
|
-
}
|
|
113
|
-
/**
|
|
114
|
-
* Moves the focus to the input and selects the value.
|
|
115
|
-
*/
|
|
116
|
-
select() {
|
|
117
|
-
this.inputView.select();
|
|
118
|
-
}
|
|
119
|
-
/**
|
|
120
|
-
* Focuses the input.
|
|
121
|
-
*/
|
|
122
|
-
focus() {
|
|
123
|
-
this.inputView.focus();
|
|
124
|
-
}
|
|
125
|
-
}
|
|
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/labeledinput/labeledinputview
|
|
7
|
+
*/
|
|
8
|
+
import View from '../view';
|
|
9
|
+
import LabelView from '../label/labelview';
|
|
10
|
+
import { uid } from '@ckeditor/ckeditor5-utils';
|
|
11
|
+
import '../../theme/components/labeledinput/labeledinput.css';
|
|
12
|
+
/**
|
|
13
|
+
* The labeled input view class.
|
|
14
|
+
*/
|
|
15
|
+
export default class LabeledInputView extends View {
|
|
16
|
+
/**
|
|
17
|
+
* Creates an instance of the labeled input view class.
|
|
18
|
+
*
|
|
19
|
+
* @param locale The locale instance.
|
|
20
|
+
* @param InputView Constructor of the input view.
|
|
21
|
+
*/
|
|
22
|
+
constructor(locale, InputView) {
|
|
23
|
+
super(locale);
|
|
24
|
+
const inputUid = `ck-input-${uid()}`;
|
|
25
|
+
const statusUid = `ck-status-${uid()}`;
|
|
26
|
+
this.set('label', undefined);
|
|
27
|
+
this.set('value', undefined);
|
|
28
|
+
this.set('isReadOnly', false);
|
|
29
|
+
this.set('errorText', null);
|
|
30
|
+
this.set('infoText', null);
|
|
31
|
+
this.labelView = this._createLabelView(inputUid);
|
|
32
|
+
this.inputView = this._createInputView(InputView, inputUid, statusUid);
|
|
33
|
+
this.statusView = this._createStatusView(statusUid);
|
|
34
|
+
this.bind('_statusText').to(this, 'errorText', this, 'infoText', (errorText, infoText) => errorText || infoText);
|
|
35
|
+
const bind = this.bindTemplate;
|
|
36
|
+
this.setTemplate({
|
|
37
|
+
tag: 'div',
|
|
38
|
+
attributes: {
|
|
39
|
+
class: [
|
|
40
|
+
'ck',
|
|
41
|
+
'ck-labeled-input',
|
|
42
|
+
bind.if('isReadOnly', 'ck-disabled')
|
|
43
|
+
]
|
|
44
|
+
},
|
|
45
|
+
children: [
|
|
46
|
+
this.labelView,
|
|
47
|
+
this.inputView,
|
|
48
|
+
this.statusView
|
|
49
|
+
]
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
/**
|
|
53
|
+
* Creates label view class instance and bind with view.
|
|
54
|
+
*
|
|
55
|
+
* @param id Unique id to set as labelView#for attribute.
|
|
56
|
+
*/
|
|
57
|
+
_createLabelView(id) {
|
|
58
|
+
const labelView = new LabelView(this.locale);
|
|
59
|
+
labelView.for = id;
|
|
60
|
+
labelView.bind('text').to(this, 'label');
|
|
61
|
+
return labelView;
|
|
62
|
+
}
|
|
63
|
+
/**
|
|
64
|
+
* Creates input view class instance and bind with view.
|
|
65
|
+
*
|
|
66
|
+
* @param InputView Input view constructor.
|
|
67
|
+
* @param inputUid Unique id to set as inputView#id attribute.
|
|
68
|
+
* @param statusUid Unique id of the status for the input's `aria-describedby` attribute.
|
|
69
|
+
*/
|
|
70
|
+
_createInputView(InputView, inputUid, statusUid) {
|
|
71
|
+
const inputView = new InputView(this.locale, statusUid);
|
|
72
|
+
inputView.id = inputUid;
|
|
73
|
+
inputView.ariaDescribedById = statusUid;
|
|
74
|
+
inputView.bind('value').to(this);
|
|
75
|
+
inputView.bind('isReadOnly').to(this);
|
|
76
|
+
inputView.bind('hasError').to(this, 'errorText', value => !!value);
|
|
77
|
+
inputView.on('input', () => {
|
|
78
|
+
// UX: Make the error text disappear and disable the error indicator as the user
|
|
79
|
+
// starts fixing the errors.
|
|
80
|
+
this.errorText = null;
|
|
81
|
+
});
|
|
82
|
+
return inputView;
|
|
83
|
+
}
|
|
84
|
+
/**
|
|
85
|
+
* Creates the status view instance. It displays {@link #errorText} and {@link #infoText}
|
|
86
|
+
* next to the {@link #inputView}. See {@link #_statusText}.
|
|
87
|
+
*
|
|
88
|
+
* @param statusUid Unique id of the status, shared with the input's `aria-describedby` attribute.
|
|
89
|
+
*/
|
|
90
|
+
_createStatusView(statusUid) {
|
|
91
|
+
const statusView = new View(this.locale);
|
|
92
|
+
const bind = this.bindTemplate;
|
|
93
|
+
statusView.setTemplate({
|
|
94
|
+
tag: 'div',
|
|
95
|
+
attributes: {
|
|
96
|
+
class: [
|
|
97
|
+
'ck',
|
|
98
|
+
'ck-labeled-input__status',
|
|
99
|
+
bind.if('errorText', 'ck-labeled-input__status_error'),
|
|
100
|
+
bind.if('_statusText', 'ck-hidden', value => !value)
|
|
101
|
+
],
|
|
102
|
+
id: statusUid,
|
|
103
|
+
role: bind.if('errorText', 'alert')
|
|
104
|
+
},
|
|
105
|
+
children: [
|
|
106
|
+
{
|
|
107
|
+
text: bind.to('_statusText')
|
|
108
|
+
}
|
|
109
|
+
]
|
|
110
|
+
});
|
|
111
|
+
return statusView;
|
|
112
|
+
}
|
|
113
|
+
/**
|
|
114
|
+
* Moves the focus to the input and selects the value.
|
|
115
|
+
*/
|
|
116
|
+
select() {
|
|
117
|
+
this.inputView.select();
|
|
118
|
+
}
|
|
119
|
+
/**
|
|
120
|
+
* Focuses the input.
|
|
121
|
+
*/
|
|
122
|
+
focus() {
|
|
123
|
+
this.inputView.focus();
|
|
124
|
+
}
|
|
125
|
+
}
|
|
@@ -1,35 +1,35 @@
|
|
|
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/list/listitemview
|
|
7
|
-
*/
|
|
8
|
-
import View from '../view';
|
|
9
|
-
import type ViewCollection from '../viewcollection';
|
|
10
|
-
import type { Locale } from '@ckeditor/ckeditor5-utils';
|
|
11
|
-
/**
|
|
12
|
-
* The list item view class.
|
|
13
|
-
*/
|
|
14
|
-
export default class ListItemView extends View {
|
|
15
|
-
/**
|
|
16
|
-
* Collection of the child views inside of the list item {@link #element}.
|
|
17
|
-
*/
|
|
18
|
-
readonly children: ViewCollection;
|
|
19
|
-
/**
|
|
20
|
-
* Controls whether the item view is visible. Visible by default, list items are hidden
|
|
21
|
-
* using a CSS class.
|
|
22
|
-
*
|
|
23
|
-
* @observable
|
|
24
|
-
* @default true
|
|
25
|
-
*/
|
|
26
|
-
isVisible: boolean;
|
|
27
|
-
/**
|
|
28
|
-
* @inheritDoc
|
|
29
|
-
*/
|
|
30
|
-
constructor(locale?: Locale);
|
|
31
|
-
/**
|
|
32
|
-
* Focuses the list item.
|
|
33
|
-
*/
|
|
34
|
-
focus(): void;
|
|
35
|
-
}
|
|
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/list/listitemview
|
|
7
|
+
*/
|
|
8
|
+
import View from '../view';
|
|
9
|
+
import type ViewCollection from '../viewcollection';
|
|
10
|
+
import type { Locale } from '@ckeditor/ckeditor5-utils';
|
|
11
|
+
/**
|
|
12
|
+
* The list item view class.
|
|
13
|
+
*/
|
|
14
|
+
export default class ListItemView extends View {
|
|
15
|
+
/**
|
|
16
|
+
* Collection of the child views inside of the list item {@link #element}.
|
|
17
|
+
*/
|
|
18
|
+
readonly children: ViewCollection;
|
|
19
|
+
/**
|
|
20
|
+
* Controls whether the item view is visible. Visible by default, list items are hidden
|
|
21
|
+
* using a CSS class.
|
|
22
|
+
*
|
|
23
|
+
* @observable
|
|
24
|
+
* @default true
|
|
25
|
+
*/
|
|
26
|
+
isVisible: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* @inheritDoc
|
|
29
|
+
*/
|
|
30
|
+
constructor(locale?: Locale);
|
|
31
|
+
/**
|
|
32
|
+
* Focuses the list item.
|
|
33
|
+
*/
|
|
34
|
+
focus(): void;
|
|
35
|
+
}
|
package/src/list/listitemview.js
CHANGED
|
@@ -1,40 +1,40 @@
|
|
|
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/list/listitemview
|
|
7
|
-
*/
|
|
8
|
-
import View from '../view';
|
|
9
|
-
/**
|
|
10
|
-
* The list item view class.
|
|
11
|
-
*/
|
|
12
|
-
export default class ListItemView extends View {
|
|
13
|
-
/**
|
|
14
|
-
* @inheritDoc
|
|
15
|
-
*/
|
|
16
|
-
constructor(locale) {
|
|
17
|
-
super(locale);
|
|
18
|
-
const bind = this.bindTemplate;
|
|
19
|
-
this.set('isVisible', true);
|
|
20
|
-
this.children = this.createCollection();
|
|
21
|
-
this.setTemplate({
|
|
22
|
-
tag: 'li',
|
|
23
|
-
attributes: {
|
|
24
|
-
class: [
|
|
25
|
-
'ck',
|
|
26
|
-
'ck-list__item',
|
|
27
|
-
bind.if('isVisible', 'ck-hidden', value => !value)
|
|
28
|
-
],
|
|
29
|
-
role: 'presentation'
|
|
30
|
-
},
|
|
31
|
-
children: this.children
|
|
32
|
-
});
|
|
33
|
-
}
|
|
34
|
-
/**
|
|
35
|
-
* Focuses the list item.
|
|
36
|
-
*/
|
|
37
|
-
focus() {
|
|
38
|
-
this.children.first.focus();
|
|
39
|
-
}
|
|
40
|
-
}
|
|
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/list/listitemview
|
|
7
|
+
*/
|
|
8
|
+
import View from '../view';
|
|
9
|
+
/**
|
|
10
|
+
* The list item view class.
|
|
11
|
+
*/
|
|
12
|
+
export default class ListItemView extends View {
|
|
13
|
+
/**
|
|
14
|
+
* @inheritDoc
|
|
15
|
+
*/
|
|
16
|
+
constructor(locale) {
|
|
17
|
+
super(locale);
|
|
18
|
+
const bind = this.bindTemplate;
|
|
19
|
+
this.set('isVisible', true);
|
|
20
|
+
this.children = this.createCollection();
|
|
21
|
+
this.setTemplate({
|
|
22
|
+
tag: 'li',
|
|
23
|
+
attributes: {
|
|
24
|
+
class: [
|
|
25
|
+
'ck',
|
|
26
|
+
'ck-list__item',
|
|
27
|
+
bind.if('isVisible', 'ck-hidden', value => !value)
|
|
28
|
+
],
|
|
29
|
+
role: 'presentation'
|
|
30
|
+
},
|
|
31
|
+
children: this.children
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* Focuses the list item.
|
|
36
|
+
*/
|
|
37
|
+
focus() {
|
|
38
|
+
this.children.first.focus();
|
|
39
|
+
}
|
|
40
|
+
}
|
|
@@ -1,18 +1,18 @@
|
|
|
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/list/listseparatorview
|
|
7
|
-
*/
|
|
8
|
-
import View from '../view';
|
|
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
|
-
}
|
|
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/list/listseparatorview
|
|
7
|
+
*/
|
|
8
|
+
import View from '../view';
|
|
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
|
+
}
|
|
@@ -1,28 +1,28 @@
|
|
|
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/list/listseparatorview
|
|
7
|
-
*/
|
|
8
|
-
import View from '../view';
|
|
9
|
-
/**
|
|
10
|
-
* The list separator view class.
|
|
11
|
-
*/
|
|
12
|
-
export default class ListSeparatorView extends View {
|
|
13
|
-
/**
|
|
14
|
-
* @inheritDoc
|
|
15
|
-
*/
|
|
16
|
-
constructor(locale) {
|
|
17
|
-
super(locale);
|
|
18
|
-
this.setTemplate({
|
|
19
|
-
tag: 'li',
|
|
20
|
-
attributes: {
|
|
21
|
-
class: [
|
|
22
|
-
'ck',
|
|
23
|
-
'ck-list__separator'
|
|
24
|
-
]
|
|
25
|
-
}
|
|
26
|
-
});
|
|
27
|
-
}
|
|
28
|
-
}
|
|
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/list/listseparatorview
|
|
7
|
+
*/
|
|
8
|
+
import View from '../view';
|
|
9
|
+
/**
|
|
10
|
+
* The list separator view class.
|
|
11
|
+
*/
|
|
12
|
+
export default class ListSeparatorView extends View {
|
|
13
|
+
/**
|
|
14
|
+
* @inheritDoc
|
|
15
|
+
*/
|
|
16
|
+
constructor(locale) {
|
|
17
|
+
super(locale);
|
|
18
|
+
this.setTemplate({
|
|
19
|
+
tag: 'li',
|
|
20
|
+
attributes: {
|
|
21
|
+
class: [
|
|
22
|
+
'ck',
|
|
23
|
+
'ck-list__separator'
|
|
24
|
+
]
|
|
25
|
+
}
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
}
|
package/src/list/listview.d.ts
CHANGED
|
@@ -1,65 +1,65 @@
|
|
|
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/list/listview
|
|
7
|
-
*/
|
|
8
|
-
import View from '../view';
|
|
9
|
-
import type DropdownPanelFocusable from '../dropdown/dropdownpanelfocusable';
|
|
10
|
-
import type ViewCollection from '../viewcollection';
|
|
11
|
-
import { FocusTracker, KeystrokeHandler, type Locale } from '@ckeditor/ckeditor5-utils';
|
|
12
|
-
import '../../theme/components/list/list.css';
|
|
13
|
-
/**
|
|
14
|
-
* The list view class.
|
|
15
|
-
*/
|
|
16
|
-
export default class ListView extends View<HTMLUListElement> implements DropdownPanelFocusable {
|
|
17
|
-
/**
|
|
18
|
-
* Collection of the child list views.
|
|
19
|
-
*/
|
|
20
|
-
readonly items: ViewCollection;
|
|
21
|
-
/**
|
|
22
|
-
* Tracks information about DOM focus in the list.
|
|
23
|
-
*/
|
|
24
|
-
readonly focusTracker: FocusTracker;
|
|
25
|
-
/**
|
|
26
|
-
* Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
|
|
27
|
-
*/
|
|
28
|
-
readonly keystrokes: KeystrokeHandler;
|
|
29
|
-
/**
|
|
30
|
-
* Label used by assistive technologies to describe this list element.
|
|
31
|
-
*
|
|
32
|
-
* @observable
|
|
33
|
-
*/
|
|
34
|
-
ariaLabel: string | undefined;
|
|
35
|
-
/**
|
|
36
|
-
* The property reflected by the `role` DOM attribute to be used by assistive technologies.
|
|
37
|
-
*
|
|
38
|
-
* @observable
|
|
39
|
-
*/
|
|
40
|
-
role: string | undefined;
|
|
41
|
-
/**
|
|
42
|
-
* Helps cycling over focusable {@link #items} in the list.
|
|
43
|
-
*/
|
|
44
|
-
private readonly _focusCycler;
|
|
45
|
-
/**
|
|
46
|
-
* @inheritDoc
|
|
47
|
-
*/
|
|
48
|
-
constructor(locale?: Locale);
|
|
49
|
-
/**
|
|
50
|
-
* @inheritDoc
|
|
51
|
-
*/
|
|
52
|
-
render(): void;
|
|
53
|
-
/**
|
|
54
|
-
* @inheritDoc
|
|
55
|
-
*/
|
|
56
|
-
destroy(): void;
|
|
57
|
-
/**
|
|
58
|
-
* Focuses the first focusable in {@link #items}.
|
|
59
|
-
*/
|
|
60
|
-
focus(): void;
|
|
61
|
-
/**
|
|
62
|
-
* Focuses the last focusable in {@link #items}.
|
|
63
|
-
*/
|
|
64
|
-
focusLast(): void;
|
|
65
|
-
}
|
|
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/list/listview
|
|
7
|
+
*/
|
|
8
|
+
import View from '../view';
|
|
9
|
+
import type DropdownPanelFocusable from '../dropdown/dropdownpanelfocusable';
|
|
10
|
+
import type ViewCollection from '../viewcollection';
|
|
11
|
+
import { FocusTracker, KeystrokeHandler, type Locale } from '@ckeditor/ckeditor5-utils';
|
|
12
|
+
import '../../theme/components/list/list.css';
|
|
13
|
+
/**
|
|
14
|
+
* The list view class.
|
|
15
|
+
*/
|
|
16
|
+
export default class ListView extends View<HTMLUListElement> implements DropdownPanelFocusable {
|
|
17
|
+
/**
|
|
18
|
+
* Collection of the child list views.
|
|
19
|
+
*/
|
|
20
|
+
readonly items: ViewCollection;
|
|
21
|
+
/**
|
|
22
|
+
* Tracks information about DOM focus in the list.
|
|
23
|
+
*/
|
|
24
|
+
readonly focusTracker: FocusTracker;
|
|
25
|
+
/**
|
|
26
|
+
* Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
|
|
27
|
+
*/
|
|
28
|
+
readonly keystrokes: KeystrokeHandler;
|
|
29
|
+
/**
|
|
30
|
+
* Label used by assistive technologies to describe this list element.
|
|
31
|
+
*
|
|
32
|
+
* @observable
|
|
33
|
+
*/
|
|
34
|
+
ariaLabel: string | undefined;
|
|
35
|
+
/**
|
|
36
|
+
* The property reflected by the `role` DOM attribute to be used by assistive technologies.
|
|
37
|
+
*
|
|
38
|
+
* @observable
|
|
39
|
+
*/
|
|
40
|
+
role: string | undefined;
|
|
41
|
+
/**
|
|
42
|
+
* Helps cycling over focusable {@link #items} in the list.
|
|
43
|
+
*/
|
|
44
|
+
private readonly _focusCycler;
|
|
45
|
+
/**
|
|
46
|
+
* @inheritDoc
|
|
47
|
+
*/
|
|
48
|
+
constructor(locale?: Locale);
|
|
49
|
+
/**
|
|
50
|
+
* @inheritDoc
|
|
51
|
+
*/
|
|
52
|
+
render(): void;
|
|
53
|
+
/**
|
|
54
|
+
* @inheritDoc
|
|
55
|
+
*/
|
|
56
|
+
destroy(): void;
|
|
57
|
+
/**
|
|
58
|
+
* Focuses the first focusable in {@link #items}.
|
|
59
|
+
*/
|
|
60
|
+
focus(): void;
|
|
61
|
+
/**
|
|
62
|
+
* Focuses the last focusable in {@link #items}.
|
|
63
|
+
*/
|
|
64
|
+
focusLast(): void;
|
|
65
|
+
}
|