@ckeditor/ckeditor5-ui 40.0.0 → 40.1.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.
- package/LICENSE.md +3 -3
- package/lang/translations/pt-br.po +1 -1
- package/lang/translations/ug.po +26 -26
- package/package.json +3 -3
- package/src/arialiveannouncer.d.ts +94 -0
- package/src/arialiveannouncer.js +113 -0
- package/src/augmentation.d.ts +86 -86
- package/src/augmentation.js +5 -5
- package/src/autocomplete/autocompleteview.d.ts +81 -81
- package/src/autocomplete/autocompleteview.js +153 -146
- 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 +172 -178
- package/src/button/button.js +5 -5
- package/src/button/buttonlabel.d.ts +34 -34
- package/src/button/buttonlabel.js +5 -5
- package/src/button/buttonlabelview.d.ts +31 -31
- package/src/button/buttonlabelview.js +42 -42
- package/src/button/buttonview.d.ts +181 -185
- package/src/button/buttonview.js +217 -219
- 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 +137 -137
- package/src/colorpicker/colorpickerview.js +270 -270
- package/src/colorpicker/utils.d.ts +43 -43
- package/src/colorpicker/utils.js +99 -99
- package/src/colorselector/colorgridsfragmentview.d.ts +194 -194
- package/src/colorselector/colorgridsfragmentview.js +289 -289
- package/src/colorselector/colorpickerfragmentview.d.ts +128 -128
- package/src/colorselector/colorpickerfragmentview.js +205 -205
- package/src/colorselector/colorselectorview.d.ts +242 -242
- package/src/colorselector/colorselectorview.js +256 -256
- package/src/colorselector/documentcolorcollection.d.ts +70 -70
- package/src/colorselector/documentcolorcollection.js +42 -42
- 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 +97 -97
- package/src/dropdown/dropdownview.d.ts +315 -315
- package/src/dropdown/dropdownview.js +379 -379
- package/src/dropdown/utils.d.ts +235 -235
- package/src/dropdown/utils.js +463 -458
- 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 -55
- package/src/editorui/bodycollection.js +84 -84
- package/src/editorui/boxed/boxededitoruiview.d.ts +40 -40
- package/src/editorui/boxed/boxededitoruiview.js +81 -81
- package/src/editorui/editorui.d.ts +288 -282
- package/src/editorui/editorui.js +412 -410
- package/src/editorui/editoruiview.d.ts +39 -39
- package/src/editorui/editoruiview.js +38 -38
- package/src/editorui/poweredby.d.ts +71 -71
- package/src/editorui/poweredby.js +276 -276
- package/src/focuscycler.d.ts +226 -226
- package/src/focuscycler.js +245 -245
- package/src/formheader/formheaderview.d.ts +59 -59
- package/src/formheader/formheaderview.js +69 -69
- package/src/highlightedtext/highlightedtextview.d.ts +38 -38
- package/src/highlightedtext/highlightedtextview.js +102 -102
- package/src/icon/iconview.d.ts +85 -85
- package/src/icon/iconview.js +114 -114
- package/src/iframe/iframeview.d.ts +50 -50
- package/src/iframe/iframeview.js +63 -63
- package/src/index.d.ts +73 -73
- package/src/index.js +70 -70
- package/src/input/inputbase.d.ts +107 -107
- package/src/input/inputbase.js +110 -110
- package/src/input/inputview.d.ts +36 -36
- package/src/input/inputview.js +24 -24
- 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 +187 -187
- package/src/labeledfield/labeledfieldview.js +157 -157
- package/src/labeledfield/utils.d.ts +123 -123
- package/src/labeledfield/utils.js +176 -176
- package/src/labeledinput/labeledinputview.d.ts +125 -125
- package/src/labeledinput/labeledinputview.js +125 -125
- package/src/list/listitemgroupview.d.ts +59 -51
- package/src/list/listitemgroupview.js +63 -75
- package/src/list/listitemview.d.ts +36 -36
- package/src/list/listitemview.js +42 -42
- package/src/list/listseparatorview.d.ts +18 -18
- package/src/list/listseparatorview.js +28 -28
- package/src/list/listview.d.ts +122 -122
- package/src/list/listview.js +187 -187
- 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 +1010 -1010
- package/src/panel/balloon/contextualballoon.d.ts +299 -299
- package/src/panel/balloon/contextualballoon.js +572 -572
- package/src/panel/sticky/stickypanelview.d.ts +156 -156
- package/src/panel/sticky/stickypanelview.js +234 -234
- package/src/search/filteredview.d.ts +31 -31
- package/src/search/filteredview.js +5 -5
- package/src/search/searchinfoview.d.ts +45 -45
- package/src/search/searchinfoview.js +59 -59
- package/src/search/searchresultsview.d.ts +54 -54
- package/src/search/searchresultsview.js +65 -65
- package/src/search/text/searchtextqueryview.d.ts +76 -76
- package/src/search/text/searchtextqueryview.js +75 -75
- package/src/search/text/searchtextview.d.ts +219 -219
- package/src/search/text/searchtextview.js +201 -201
- package/src/spinner/spinnerview.d.ts +25 -25
- package/src/spinner/spinnerview.js +38 -38
- package/src/template.d.ts +942 -942
- package/src/template.js +1294 -1294
- package/src/textarea/textareaview.d.ts +88 -88
- package/src/textarea/textareaview.js +142 -140
- 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 -161
- package/src/toolbar/block/blocktoolbar.js +395 -395
- package/src/toolbar/normalizetoolbarconfig.d.ts +40 -40
- package/src/toolbar/normalizetoolbarconfig.js +52 -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 +266 -266
- package/src/toolbar/toolbarview.js +719 -719
- 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/arialiveannouncer/arialiveannouncer.css +10 -0
- package/theme/components/button/button.css +9 -1
- package/theme/components/formheader/formheader.css +0 -4
package/src/index.js
CHANGED
|
@@ -1,70 +1,70 @@
|
|
|
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
|
|
7
|
-
*/
|
|
8
|
-
export { default as clickOutsideHandler } from './bindings/clickoutsidehandler';
|
|
9
|
-
export { default as injectCssTransitionDisabler } from './bindings/injectcsstransitiondisabler';
|
|
10
|
-
export { default as CssTransitionDisablerMixin } from './bindings/csstransitiondisablermixin';
|
|
11
|
-
export { default as submitHandler } from './bindings/submithandler';
|
|
12
|
-
export { default as addKeyboardHandlingForGrid } from './bindings/addkeyboardhandlingforgrid';
|
|
13
|
-
export { default as BodyCollection } from './editorui/bodycollection';
|
|
14
|
-
export { default as ButtonView } from './button/buttonview';
|
|
15
|
-
export { default as ButtonLabelView } from './button/buttonlabelview';
|
|
16
|
-
export { default as SwitchButtonView } from './button/switchbuttonview';
|
|
17
|
-
export * from './colorgrid/utils';
|
|
18
|
-
export { default as ColorGridView } from './colorgrid/colorgridview';
|
|
19
|
-
export { default as ColorTileView } from './colorgrid/colortileview';
|
|
20
|
-
export { default as ColorPickerView } from './colorpicker/colorpickerview';
|
|
21
|
-
export { default as ColorSelectorView } from './colorselector/colorselectorview';
|
|
22
|
-
export { default as ComponentFactory } from './componentfactory';
|
|
23
|
-
export { default as DropdownView } from './dropdown/dropdownview';
|
|
24
|
-
export { default as DropdownPanelView } from './dropdown/dropdownpanelview';
|
|
25
|
-
export { default as DropdownButtonView } from './dropdown/button/dropdownbuttonview';
|
|
26
|
-
export { default as SplitButtonView } from './dropdown/button/splitbuttonview';
|
|
27
|
-
export * from './dropdown/utils';
|
|
28
|
-
export { default as EditorUI } from './editorui/editorui';
|
|
29
|
-
export { default as EditorUIView } from './editorui/editoruiview';
|
|
30
|
-
export { default as BoxedEditorUIView } from './editorui/boxed/boxededitoruiview';
|
|
31
|
-
export { default as InlineEditableUIView } from './editableui/inline/inlineeditableuiview';
|
|
32
|
-
export { default as FormHeaderView } from './formheader/formheaderview';
|
|
33
|
-
export { default as FocusCycler } from './focuscycler';
|
|
34
|
-
export { default as IconView } from './icon/iconview';
|
|
35
|
-
export { default as InputView } from './input/inputview';
|
|
36
|
-
export { default as InputTextView } from './inputtext/inputtextview';
|
|
37
|
-
export { default as InputNumberView } from './inputnumber/inputnumberview';
|
|
38
|
-
export { default as TextareaView } from './textarea/textareaview';
|
|
39
|
-
export { default as IframeView } from './iframe/iframeview';
|
|
40
|
-
export { default as LabelView } from './label/labelview';
|
|
41
|
-
export { default as LabeledFieldView } from './labeledfield/labeledfieldview';
|
|
42
|
-
export * from './labeledfield/utils';
|
|
43
|
-
export { default as ListItemGroupView } from './list/listitemgroupview';
|
|
44
|
-
export { default as ListItemView } from './list/listitemview';
|
|
45
|
-
export { default as ListView } from './list/listview';
|
|
46
|
-
export { default as Notification } from './notification/notification';
|
|
47
|
-
export { default as Model } from './model';
|
|
48
|
-
export { default as BalloonPanelView } from './panel/balloon/balloonpanelview';
|
|
49
|
-
export { default as ContextualBalloon } from './panel/balloon/contextualballoon';
|
|
50
|
-
export { default as StickyPanelView } from './panel/sticky/stickypanelview';
|
|
51
|
-
export { default as AutocompleteView } from './autocomplete/autocompleteview';
|
|
52
|
-
export { default as SearchTextView } from './search/text/searchtextview';
|
|
53
|
-
export { default as SearchInfoView } from './search/searchinfoview';
|
|
54
|
-
export { default as HighlightedTextView } from './highlightedtext/highlightedtextview';
|
|
55
|
-
export { default as TooltipManager } from './tooltipmanager';
|
|
56
|
-
export { default as Template } from './template';
|
|
57
|
-
export { default as SpinnerView } from './spinner/spinnerview';
|
|
58
|
-
export { default as ToolbarView } from './toolbar/toolbarview';
|
|
59
|
-
export { default as ToolbarLineBreakView } from './toolbar/toolbarlinebreakview';
|
|
60
|
-
export { default as ToolbarSeparatorView } from './toolbar/toolbarseparatorview';
|
|
61
|
-
export { default as normalizeToolbarConfig } from './toolbar/normalizetoolbarconfig';
|
|
62
|
-
export { default as BalloonToolbar } from './toolbar/balloon/balloontoolbar';
|
|
63
|
-
export { default as BlockToolbar } from './toolbar/block/blocktoolbar';
|
|
64
|
-
export { default as View } from './view';
|
|
65
|
-
export { default as ViewCollection } from './viewcollection';
|
|
66
|
-
import { default as colorPaletteIcon } from '../theme/icons/color-palette.svg';
|
|
67
|
-
export const icons = {
|
|
68
|
-
colorPaletteIcon
|
|
69
|
-
};
|
|
70
|
-
import './augmentation';
|
|
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
|
|
7
|
+
*/
|
|
8
|
+
export { default as clickOutsideHandler } from './bindings/clickoutsidehandler';
|
|
9
|
+
export { default as injectCssTransitionDisabler } from './bindings/injectcsstransitiondisabler';
|
|
10
|
+
export { default as CssTransitionDisablerMixin } from './bindings/csstransitiondisablermixin';
|
|
11
|
+
export { default as submitHandler } from './bindings/submithandler';
|
|
12
|
+
export { default as addKeyboardHandlingForGrid } from './bindings/addkeyboardhandlingforgrid';
|
|
13
|
+
export { default as BodyCollection } from './editorui/bodycollection';
|
|
14
|
+
export { default as ButtonView } from './button/buttonview';
|
|
15
|
+
export { default as ButtonLabelView } from './button/buttonlabelview';
|
|
16
|
+
export { default as SwitchButtonView } from './button/switchbuttonview';
|
|
17
|
+
export * from './colorgrid/utils';
|
|
18
|
+
export { default as ColorGridView } from './colorgrid/colorgridview';
|
|
19
|
+
export { default as ColorTileView } from './colorgrid/colortileview';
|
|
20
|
+
export { default as ColorPickerView } from './colorpicker/colorpickerview';
|
|
21
|
+
export { default as ColorSelectorView } from './colorselector/colorselectorview';
|
|
22
|
+
export { default as ComponentFactory } from './componentfactory';
|
|
23
|
+
export { default as DropdownView } from './dropdown/dropdownview';
|
|
24
|
+
export { default as DropdownPanelView } from './dropdown/dropdownpanelview';
|
|
25
|
+
export { default as DropdownButtonView } from './dropdown/button/dropdownbuttonview';
|
|
26
|
+
export { default as SplitButtonView } from './dropdown/button/splitbuttonview';
|
|
27
|
+
export * from './dropdown/utils';
|
|
28
|
+
export { default as EditorUI } from './editorui/editorui';
|
|
29
|
+
export { default as EditorUIView } from './editorui/editoruiview';
|
|
30
|
+
export { default as BoxedEditorUIView } from './editorui/boxed/boxededitoruiview';
|
|
31
|
+
export { default as InlineEditableUIView } from './editableui/inline/inlineeditableuiview';
|
|
32
|
+
export { default as FormHeaderView } from './formheader/formheaderview';
|
|
33
|
+
export { default as FocusCycler } from './focuscycler';
|
|
34
|
+
export { default as IconView } from './icon/iconview';
|
|
35
|
+
export { default as InputView } from './input/inputview';
|
|
36
|
+
export { default as InputTextView } from './inputtext/inputtextview';
|
|
37
|
+
export { default as InputNumberView } from './inputnumber/inputnumberview';
|
|
38
|
+
export { default as TextareaView } from './textarea/textareaview';
|
|
39
|
+
export { default as IframeView } from './iframe/iframeview';
|
|
40
|
+
export { default as LabelView } from './label/labelview';
|
|
41
|
+
export { default as LabeledFieldView } from './labeledfield/labeledfieldview';
|
|
42
|
+
export * from './labeledfield/utils';
|
|
43
|
+
export { default as ListItemGroupView } from './list/listitemgroupview';
|
|
44
|
+
export { default as ListItemView } from './list/listitemview';
|
|
45
|
+
export { default as ListView } from './list/listview';
|
|
46
|
+
export { default as Notification } from './notification/notification';
|
|
47
|
+
export { default as Model } from './model';
|
|
48
|
+
export { default as BalloonPanelView } from './panel/balloon/balloonpanelview';
|
|
49
|
+
export { default as ContextualBalloon } from './panel/balloon/contextualballoon';
|
|
50
|
+
export { default as StickyPanelView } from './panel/sticky/stickypanelview';
|
|
51
|
+
export { default as AutocompleteView } from './autocomplete/autocompleteview';
|
|
52
|
+
export { default as SearchTextView } from './search/text/searchtextview';
|
|
53
|
+
export { default as SearchInfoView } from './search/searchinfoview';
|
|
54
|
+
export { default as HighlightedTextView } from './highlightedtext/highlightedtextview';
|
|
55
|
+
export { default as TooltipManager } from './tooltipmanager';
|
|
56
|
+
export { default as Template } from './template';
|
|
57
|
+
export { default as SpinnerView } from './spinner/spinnerview';
|
|
58
|
+
export { default as ToolbarView } from './toolbar/toolbarview';
|
|
59
|
+
export { default as ToolbarLineBreakView } from './toolbar/toolbarlinebreakview';
|
|
60
|
+
export { default as ToolbarSeparatorView } from './toolbar/toolbarseparatorview';
|
|
61
|
+
export { default as normalizeToolbarConfig } from './toolbar/normalizetoolbarconfig';
|
|
62
|
+
export { default as BalloonToolbar } from './toolbar/balloon/balloontoolbar';
|
|
63
|
+
export { default as BlockToolbar } from './toolbar/block/blocktoolbar';
|
|
64
|
+
export { default as View } from './view';
|
|
65
|
+
export { default as ViewCollection } from './viewcollection';
|
|
66
|
+
import { default as colorPaletteIcon } from '../theme/icons/color-palette.svg';
|
|
67
|
+
export const icons = {
|
|
68
|
+
colorPaletteIcon
|
|
69
|
+
};
|
|
70
|
+
import './augmentation';
|
package/src/input/inputbase.d.ts
CHANGED
|
@@ -1,107 +1,107 @@
|
|
|
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/input/inputbase
|
|
7
|
-
*/
|
|
8
|
-
import View from '../view';
|
|
9
|
-
import { FocusTracker, type Locale } from '@ckeditor/ckeditor5-utils';
|
|
10
|
-
/**
|
|
11
|
-
* The base input view class.
|
|
12
|
-
*/
|
|
13
|
-
export default abstract class InputBase<TElement extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement> extends View<TElement> {
|
|
14
|
-
/**
|
|
15
|
-
* Stores information about the editor UI focus and propagates it so various plugins and components
|
|
16
|
-
* are unified as a focus group.
|
|
17
|
-
*/
|
|
18
|
-
readonly focusTracker: FocusTracker;
|
|
19
|
-
/**
|
|
20
|
-
* The value of the input.
|
|
21
|
-
*
|
|
22
|
-
* @observable
|
|
23
|
-
*/
|
|
24
|
-
value: string | undefined;
|
|
25
|
-
/**
|
|
26
|
-
* The `id` attribute of the input (i.e. to pair with a `<label>` element).
|
|
27
|
-
*
|
|
28
|
-
* @observable
|
|
29
|
-
*/
|
|
30
|
-
id: string | undefined;
|
|
31
|
-
/**
|
|
32
|
-
* The `placeholder` attribute of the input.
|
|
33
|
-
*
|
|
34
|
-
* @observable
|
|
35
|
-
*/
|
|
36
|
-
placeholder: string | undefined;
|
|
37
|
-
/**
|
|
38
|
-
* Controls whether the input view is in read-only mode.
|
|
39
|
-
*
|
|
40
|
-
* @observable
|
|
41
|
-
*/
|
|
42
|
-
isReadOnly: boolean;
|
|
43
|
-
/**
|
|
44
|
-
* Set to `true` when the field has some error. Usually controlled via
|
|
45
|
-
* {@link module:ui/labeledinput/labeledinputview~LabeledInputView#errorText}.
|
|
46
|
-
*
|
|
47
|
-
* @observable
|
|
48
|
-
*/
|
|
49
|
-
hasError: boolean;
|
|
50
|
-
/**
|
|
51
|
-
* The `id` of the element describing this field, e.g. when it has
|
|
52
|
-
* some error; it helps screen readers read the error text.
|
|
53
|
-
*
|
|
54
|
-
* @observable
|
|
55
|
-
*/
|
|
56
|
-
ariaDescribedById: string | undefined;
|
|
57
|
-
/**
|
|
58
|
-
* An observable flag set to `true` when the input is currently focused by the user.
|
|
59
|
-
* Set to `false` otherwise.
|
|
60
|
-
*
|
|
61
|
-
* @readonly
|
|
62
|
-
* @observable
|
|
63
|
-
* @default false
|
|
64
|
-
*/
|
|
65
|
-
isFocused: boolean;
|
|
66
|
-
/**
|
|
67
|
-
* An observable flag set to `true` when the input contains no text, i.e.
|
|
68
|
-
* when {@link #value} is `''`, `null`, or `false`.
|
|
69
|
-
*
|
|
70
|
-
* @readonly
|
|
71
|
-
* @observable
|
|
72
|
-
* @default true
|
|
73
|
-
*/
|
|
74
|
-
isEmpty: boolean;
|
|
75
|
-
/**
|
|
76
|
-
* @inheritDoc
|
|
77
|
-
*/
|
|
78
|
-
constructor(locale?: Locale);
|
|
79
|
-
/**
|
|
80
|
-
* @inheritDoc
|
|
81
|
-
*/
|
|
82
|
-
render(): void;
|
|
83
|
-
/**
|
|
84
|
-
* @inheritDoc
|
|
85
|
-
*/
|
|
86
|
-
destroy(): void;
|
|
87
|
-
/**
|
|
88
|
-
* Moves the focus to the input and selects the value.
|
|
89
|
-
*/
|
|
90
|
-
select(): void;
|
|
91
|
-
/**
|
|
92
|
-
* Focuses the input.
|
|
93
|
-
*/
|
|
94
|
-
focus(): void;
|
|
95
|
-
/**
|
|
96
|
-
* Resets the value of the input
|
|
97
|
-
*/
|
|
98
|
-
reset(): void;
|
|
99
|
-
/**
|
|
100
|
-
* Updates the {@link #isEmpty} property value on demand.
|
|
101
|
-
*/
|
|
102
|
-
protected _updateIsEmpty(): void;
|
|
103
|
-
/**
|
|
104
|
-
* Sets the `value` property of the {@link #element DOM element} on demand.
|
|
105
|
-
*/
|
|
106
|
-
private _setDomElementValue;
|
|
107
|
-
}
|
|
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/input/inputbase
|
|
7
|
+
*/
|
|
8
|
+
import View from '../view';
|
|
9
|
+
import { FocusTracker, type Locale } from '@ckeditor/ckeditor5-utils';
|
|
10
|
+
/**
|
|
11
|
+
* The base input view class.
|
|
12
|
+
*/
|
|
13
|
+
export default abstract class InputBase<TElement extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement> extends View<TElement> {
|
|
14
|
+
/**
|
|
15
|
+
* Stores information about the editor UI focus and propagates it so various plugins and components
|
|
16
|
+
* are unified as a focus group.
|
|
17
|
+
*/
|
|
18
|
+
readonly focusTracker: FocusTracker;
|
|
19
|
+
/**
|
|
20
|
+
* The value of the input.
|
|
21
|
+
*
|
|
22
|
+
* @observable
|
|
23
|
+
*/
|
|
24
|
+
value: string | undefined;
|
|
25
|
+
/**
|
|
26
|
+
* The `id` attribute of the input (i.e. to pair with a `<label>` element).
|
|
27
|
+
*
|
|
28
|
+
* @observable
|
|
29
|
+
*/
|
|
30
|
+
id: string | undefined;
|
|
31
|
+
/**
|
|
32
|
+
* The `placeholder` attribute of the input.
|
|
33
|
+
*
|
|
34
|
+
* @observable
|
|
35
|
+
*/
|
|
36
|
+
placeholder: string | undefined;
|
|
37
|
+
/**
|
|
38
|
+
* Controls whether the input view is in read-only mode.
|
|
39
|
+
*
|
|
40
|
+
* @observable
|
|
41
|
+
*/
|
|
42
|
+
isReadOnly: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* Set to `true` when the field has some error. Usually controlled via
|
|
45
|
+
* {@link module:ui/labeledinput/labeledinputview~LabeledInputView#errorText}.
|
|
46
|
+
*
|
|
47
|
+
* @observable
|
|
48
|
+
*/
|
|
49
|
+
hasError: boolean;
|
|
50
|
+
/**
|
|
51
|
+
* The `id` of the element describing this field, e.g. when it has
|
|
52
|
+
* some error; it helps screen readers read the error text.
|
|
53
|
+
*
|
|
54
|
+
* @observable
|
|
55
|
+
*/
|
|
56
|
+
ariaDescribedById: string | undefined;
|
|
57
|
+
/**
|
|
58
|
+
* An observable flag set to `true` when the input is currently focused by the user.
|
|
59
|
+
* Set to `false` otherwise.
|
|
60
|
+
*
|
|
61
|
+
* @readonly
|
|
62
|
+
* @observable
|
|
63
|
+
* @default false
|
|
64
|
+
*/
|
|
65
|
+
isFocused: boolean;
|
|
66
|
+
/**
|
|
67
|
+
* An observable flag set to `true` when the input contains no text, i.e.
|
|
68
|
+
* when {@link #value} is `''`, `null`, or `false`.
|
|
69
|
+
*
|
|
70
|
+
* @readonly
|
|
71
|
+
* @observable
|
|
72
|
+
* @default true
|
|
73
|
+
*/
|
|
74
|
+
isEmpty: boolean;
|
|
75
|
+
/**
|
|
76
|
+
* @inheritDoc
|
|
77
|
+
*/
|
|
78
|
+
constructor(locale?: Locale);
|
|
79
|
+
/**
|
|
80
|
+
* @inheritDoc
|
|
81
|
+
*/
|
|
82
|
+
render(): void;
|
|
83
|
+
/**
|
|
84
|
+
* @inheritDoc
|
|
85
|
+
*/
|
|
86
|
+
destroy(): void;
|
|
87
|
+
/**
|
|
88
|
+
* Moves the focus to the input and selects the value.
|
|
89
|
+
*/
|
|
90
|
+
select(): void;
|
|
91
|
+
/**
|
|
92
|
+
* Focuses the input.
|
|
93
|
+
*/
|
|
94
|
+
focus(): void;
|
|
95
|
+
/**
|
|
96
|
+
* Resets the value of the input
|
|
97
|
+
*/
|
|
98
|
+
reset(): void;
|
|
99
|
+
/**
|
|
100
|
+
* Updates the {@link #isEmpty} property value on demand.
|
|
101
|
+
*/
|
|
102
|
+
protected _updateIsEmpty(): void;
|
|
103
|
+
/**
|
|
104
|
+
* Sets the `value` property of the {@link #element DOM element} on demand.
|
|
105
|
+
*/
|
|
106
|
+
private _setDomElementValue;
|
|
107
|
+
}
|
package/src/input/inputbase.js
CHANGED
|
@@ -1,110 +1,110 @@
|
|
|
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/input/inputbase
|
|
7
|
-
*/
|
|
8
|
-
import View from '../view';
|
|
9
|
-
import { FocusTracker } from '@ckeditor/ckeditor5-utils';
|
|
10
|
-
/**
|
|
11
|
-
* The base input view class.
|
|
12
|
-
*/
|
|
13
|
-
export default class InputBase extends View {
|
|
14
|
-
/**
|
|
15
|
-
* @inheritDoc
|
|
16
|
-
*/
|
|
17
|
-
constructor(locale) {
|
|
18
|
-
super(locale);
|
|
19
|
-
this.set('value', undefined);
|
|
20
|
-
this.set('id', undefined);
|
|
21
|
-
this.set('placeholder', undefined);
|
|
22
|
-
this.set('isReadOnly', false);
|
|
23
|
-
this.set('hasError', false);
|
|
24
|
-
this.set('ariaDescribedById', undefined);
|
|
25
|
-
this.focusTracker = new FocusTracker();
|
|
26
|
-
this.bind('isFocused').to(this.focusTracker);
|
|
27
|
-
this.set('isEmpty', true);
|
|
28
|
-
const bind = this.bindTemplate;
|
|
29
|
-
this.setTemplate({
|
|
30
|
-
tag: 'input',
|
|
31
|
-
attributes: {
|
|
32
|
-
class: [
|
|
33
|
-
'ck',
|
|
34
|
-
'ck-input',
|
|
35
|
-
bind.if('isFocused', 'ck-input_focused'),
|
|
36
|
-
bind.if('isEmpty', 'ck-input-text_empty'),
|
|
37
|
-
bind.if('hasError', 'ck-error')
|
|
38
|
-
],
|
|
39
|
-
id: bind.to('id'),
|
|
40
|
-
placeholder: bind.to('placeholder'),
|
|
41
|
-
readonly: bind.to('isReadOnly'),
|
|
42
|
-
'aria-invalid': bind.if('hasError', true),
|
|
43
|
-
'aria-describedby': bind.to('ariaDescribedById')
|
|
44
|
-
},
|
|
45
|
-
on: {
|
|
46
|
-
input: bind.to((...args) => {
|
|
47
|
-
this.fire('input', ...args);
|
|
48
|
-
this._updateIsEmpty();
|
|
49
|
-
}),
|
|
50
|
-
change: bind.to(this._updateIsEmpty.bind(this))
|
|
51
|
-
}
|
|
52
|
-
});
|
|
53
|
-
}
|
|
54
|
-
/**
|
|
55
|
-
* @inheritDoc
|
|
56
|
-
*/
|
|
57
|
-
render() {
|
|
58
|
-
super.render();
|
|
59
|
-
this.focusTracker.add(this.element);
|
|
60
|
-
this._setDomElementValue(this.value);
|
|
61
|
-
this._updateIsEmpty();
|
|
62
|
-
// Bind `this.value` to the DOM element's value.
|
|
63
|
-
// We cannot use `value` DOM attribute because removing it on Edge does not clear the DOM element's value property.
|
|
64
|
-
this.on('change:value', (evt, name, value) => {
|
|
65
|
-
this._setDomElementValue(value);
|
|
66
|
-
this._updateIsEmpty();
|
|
67
|
-
});
|
|
68
|
-
}
|
|
69
|
-
/**
|
|
70
|
-
* @inheritDoc
|
|
71
|
-
*/
|
|
72
|
-
destroy() {
|
|
73
|
-
super.destroy();
|
|
74
|
-
this.focusTracker.destroy();
|
|
75
|
-
}
|
|
76
|
-
/**
|
|
77
|
-
* Moves the focus to the input and selects the value.
|
|
78
|
-
*/
|
|
79
|
-
select() {
|
|
80
|
-
this.element.select();
|
|
81
|
-
}
|
|
82
|
-
/**
|
|
83
|
-
* Focuses the input.
|
|
84
|
-
*/
|
|
85
|
-
focus() {
|
|
86
|
-
this.element.focus();
|
|
87
|
-
}
|
|
88
|
-
/**
|
|
89
|
-
* Resets the value of the input
|
|
90
|
-
*/
|
|
91
|
-
reset() {
|
|
92
|
-
this.value = this.element.value = '';
|
|
93
|
-
this._updateIsEmpty();
|
|
94
|
-
}
|
|
95
|
-
/**
|
|
96
|
-
* Updates the {@link #isEmpty} property value on demand.
|
|
97
|
-
*/
|
|
98
|
-
_updateIsEmpty() {
|
|
99
|
-
this.isEmpty = isInputElementEmpty(this.element);
|
|
100
|
-
}
|
|
101
|
-
/**
|
|
102
|
-
* Sets the `value` property of the {@link #element DOM element} on demand.
|
|
103
|
-
*/
|
|
104
|
-
_setDomElementValue(value) {
|
|
105
|
-
this.element.value = (!value && value !== 0) ? '' : value;
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
function isInputElementEmpty(domElement) {
|
|
109
|
-
return !domElement.value;
|
|
110
|
-
}
|
|
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/input/inputbase
|
|
7
|
+
*/
|
|
8
|
+
import View from '../view';
|
|
9
|
+
import { FocusTracker } from '@ckeditor/ckeditor5-utils';
|
|
10
|
+
/**
|
|
11
|
+
* The base input view class.
|
|
12
|
+
*/
|
|
13
|
+
export default class InputBase extends View {
|
|
14
|
+
/**
|
|
15
|
+
* @inheritDoc
|
|
16
|
+
*/
|
|
17
|
+
constructor(locale) {
|
|
18
|
+
super(locale);
|
|
19
|
+
this.set('value', undefined);
|
|
20
|
+
this.set('id', undefined);
|
|
21
|
+
this.set('placeholder', undefined);
|
|
22
|
+
this.set('isReadOnly', false);
|
|
23
|
+
this.set('hasError', false);
|
|
24
|
+
this.set('ariaDescribedById', undefined);
|
|
25
|
+
this.focusTracker = new FocusTracker();
|
|
26
|
+
this.bind('isFocused').to(this.focusTracker);
|
|
27
|
+
this.set('isEmpty', true);
|
|
28
|
+
const bind = this.bindTemplate;
|
|
29
|
+
this.setTemplate({
|
|
30
|
+
tag: 'input',
|
|
31
|
+
attributes: {
|
|
32
|
+
class: [
|
|
33
|
+
'ck',
|
|
34
|
+
'ck-input',
|
|
35
|
+
bind.if('isFocused', 'ck-input_focused'),
|
|
36
|
+
bind.if('isEmpty', 'ck-input-text_empty'),
|
|
37
|
+
bind.if('hasError', 'ck-error')
|
|
38
|
+
],
|
|
39
|
+
id: bind.to('id'),
|
|
40
|
+
placeholder: bind.to('placeholder'),
|
|
41
|
+
readonly: bind.to('isReadOnly'),
|
|
42
|
+
'aria-invalid': bind.if('hasError', true),
|
|
43
|
+
'aria-describedby': bind.to('ariaDescribedById')
|
|
44
|
+
},
|
|
45
|
+
on: {
|
|
46
|
+
input: bind.to((...args) => {
|
|
47
|
+
this.fire('input', ...args);
|
|
48
|
+
this._updateIsEmpty();
|
|
49
|
+
}),
|
|
50
|
+
change: bind.to(this._updateIsEmpty.bind(this))
|
|
51
|
+
}
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
/**
|
|
55
|
+
* @inheritDoc
|
|
56
|
+
*/
|
|
57
|
+
render() {
|
|
58
|
+
super.render();
|
|
59
|
+
this.focusTracker.add(this.element);
|
|
60
|
+
this._setDomElementValue(this.value);
|
|
61
|
+
this._updateIsEmpty();
|
|
62
|
+
// Bind `this.value` to the DOM element's value.
|
|
63
|
+
// We cannot use `value` DOM attribute because removing it on Edge does not clear the DOM element's value property.
|
|
64
|
+
this.on('change:value', (evt, name, value) => {
|
|
65
|
+
this._setDomElementValue(value);
|
|
66
|
+
this._updateIsEmpty();
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
/**
|
|
70
|
+
* @inheritDoc
|
|
71
|
+
*/
|
|
72
|
+
destroy() {
|
|
73
|
+
super.destroy();
|
|
74
|
+
this.focusTracker.destroy();
|
|
75
|
+
}
|
|
76
|
+
/**
|
|
77
|
+
* Moves the focus to the input and selects the value.
|
|
78
|
+
*/
|
|
79
|
+
select() {
|
|
80
|
+
this.element.select();
|
|
81
|
+
}
|
|
82
|
+
/**
|
|
83
|
+
* Focuses the input.
|
|
84
|
+
*/
|
|
85
|
+
focus() {
|
|
86
|
+
this.element.focus();
|
|
87
|
+
}
|
|
88
|
+
/**
|
|
89
|
+
* Resets the value of the input
|
|
90
|
+
*/
|
|
91
|
+
reset() {
|
|
92
|
+
this.value = this.element.value = '';
|
|
93
|
+
this._updateIsEmpty();
|
|
94
|
+
}
|
|
95
|
+
/**
|
|
96
|
+
* Updates the {@link #isEmpty} property value on demand.
|
|
97
|
+
*/
|
|
98
|
+
_updateIsEmpty() {
|
|
99
|
+
this.isEmpty = isInputElementEmpty(this.element);
|
|
100
|
+
}
|
|
101
|
+
/**
|
|
102
|
+
* Sets the `value` property of the {@link #element DOM element} on demand.
|
|
103
|
+
*/
|
|
104
|
+
_setDomElementValue(value) {
|
|
105
|
+
this.element.value = (!value && value !== 0) ? '' : value;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
function isInputElementEmpty(domElement) {
|
|
109
|
+
return !domElement.value;
|
|
110
|
+
}
|
package/src/input/inputview.d.ts
CHANGED
|
@@ -1,36 +1,36 @@
|
|
|
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/input/inputview
|
|
7
|
-
*/
|
|
8
|
-
import { type Locale } from '@ckeditor/ckeditor5-utils';
|
|
9
|
-
import InputBase from './inputbase';
|
|
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
|
-
};
|
|
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/input/inputview
|
|
7
|
+
*/
|
|
8
|
+
import { type Locale } from '@ckeditor/ckeditor5-utils';
|
|
9
|
+
import InputBase from './inputbase';
|
|
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
|
+
};
|