@ckeditor/ckeditor5-ui 48.2.0 → 48.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.
- package/dist/arialiveannouncer.d.ts +90 -90
- package/dist/augmentation.d.ts +86 -86
- package/dist/autocomplete/autocompleteview.d.ts +70 -70
- package/dist/badge/badge.d.ts +119 -121
- package/dist/bindings/addkeyboardhandlingforgrid.d.ts +22 -22
- package/dist/bindings/clickoutsidehandler.d.ts +25 -25
- package/dist/bindings/csstransitiondisablermixin.d.ts +47 -36
- package/dist/bindings/draggableviewmixin.d.ts +45 -37
- package/dist/bindings/preventdefault.d.ts +30 -30
- package/dist/bindings/submithandler.d.ts +49 -49
- package/dist/button/button.d.ts +167 -167
- package/dist/button/buttonlabel.d.ts +28 -28
- package/dist/button/buttonlabelview.d.ts +26 -26
- package/dist/button/buttonview.d.ts +192 -192
- package/dist/button/filedialogbuttonview.d.ts +107 -99
- package/dist/button/listitembuttonview.d.ts +73 -73
- package/dist/button/switchbuttonview.d.ts +40 -40
- package/dist/collapsible/collapsibleview.d.ts +63 -63
- package/dist/colorgrid/colorgridview.d.ts +117 -117
- package/dist/colorgrid/colortileview.d.ts +21 -21
- package/dist/colorgrid/utils.d.ts +35 -35
- package/dist/colorpicker/colorpickerview.d.ts +155 -157
- package/dist/colorpicker/utils.d.ts +37 -37
- package/dist/colorselector/colorgridsfragmentview.d.ts +191 -191
- package/dist/colorselector/colorpickerfragmentview.d.ts +129 -129
- package/dist/colorselector/colorselectorview.d.ts +227 -229
- package/dist/colorselector/documentcolorcollection.d.ts +52 -59
- package/dist/componentfactory.d.ts +76 -76
- package/dist/dialog/dialog.d.ts +311 -288
- package/dist/dialog/dialogactionsview.d.ts +62 -62
- package/dist/dialog/dialogcontentview.d.ts +22 -22
- package/dist/dialog/dialogview.d.ts +255 -251
- package/dist/dropdown/button/dropdownbutton.d.ts +17 -17
- package/dist/dropdown/button/dropdownbuttonview.d.ts +41 -41
- package/dist/dropdown/button/splitbuttonview.d.ts +155 -155
- package/dist/dropdown/dropdownpanelfocusable.d.ts +16 -16
- package/dist/dropdown/dropdownpanelview.d.ts +56 -56
- package/dist/dropdown/dropdownview.d.ts +326 -326
- package/dist/dropdown/menu/dropdownmenubehaviors.d.ts +43 -43
- package/dist/dropdown/menu/dropdownmenubuttonview.d.ts +29 -29
- package/dist/dropdown/menu/dropdownmenulistitembuttonview.d.ts +12 -12
- package/dist/dropdown/menu/dropdownmenulistitemview.d.ts +17 -17
- package/dist/dropdown/menu/dropdownmenulistview.d.ts +19 -19
- package/dist/dropdown/menu/dropdownmenunestedmenupanelview.d.ts +28 -28
- package/dist/dropdown/menu/dropdownmenunestedmenuview.d.ts +126 -126
- package/dist/dropdown/menu/dropdownmenurootlistview.d.ts +132 -132
- package/dist/dropdown/menu/utils.d.ts +112 -112
- package/dist/dropdown/utils.d.ts +272 -272
- package/dist/editableui/editableuiview.d.ts +78 -78
- package/dist/editableui/inline/inlineeditableuiview.d.ts +38 -38
- package/dist/editorui/accessibilityhelp/accessibilityhelp.d.ts +50 -50
- package/dist/editorui/accessibilityhelp/accessibilityhelpcontentview.d.ts +30 -30
- package/dist/editorui/bodycollection.d.ts +86 -86
- package/dist/editorui/boxed/boxededitoruiview.d.ts +35 -35
- package/dist/editorui/editorui.d.ts +348 -351
- package/dist/editorui/editoruiview.d.ts +53 -53
- package/dist/editorui/evaluationbadge.d.ts +28 -28
- package/dist/editorui/poweredby.d.ts +25 -25
- package/dist/focuscycler.d.ts +265 -270
- package/dist/formheader/formheaderview.d.ts +53 -53
- package/dist/formrow/formrowview.d.ts +52 -52
- package/dist/highlightedtext/buttonlabelwithhighlightview.d.ts +25 -25
- package/dist/highlightedtext/highlightedtextview.d.ts +33 -33
- package/dist/highlightedtext/labelwithhighlightview.d.ts +21 -21
- package/dist/icon/iconview.d.ts +83 -83
- package/dist/iframe/iframeview.d.ts +42 -42
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +136 -136
- package/dist/index.js +16467 -17751
- package/dist/index.js.map +1 -1
- package/dist/input/inputbase.d.ts +114 -114
- package/dist/input/inputview.d.ts +28 -28
- package/dist/inputnumber/inputnumberview.d.ts +44 -44
- package/dist/inputtext/inputtextview.d.ts +13 -13
- package/dist/label/labelview.d.ts +31 -31
- package/dist/labeledfield/labeledfieldview.d.ts +180 -180
- package/dist/labeledfield/utils.d.ts +112 -112
- package/dist/labeledinput/labeledinputview.d.ts +120 -120
- package/dist/legacyerrors.d.ts +0 -4
- package/dist/list/listitemgroupview.d.ts +54 -54
- package/dist/list/listitemview.d.ts +31 -31
- package/dist/list/listseparatorview.d.ts +13 -13
- package/dist/list/listview.d.ts +119 -119
- package/dist/menubar/menubarmenubuttonview.d.ts +28 -28
- package/dist/menubar/menubarmenulistitembuttonview.d.ts +16 -16
- package/dist/menubar/menubarmenulistitemfiledialogbuttonview.d.ts +18 -18
- package/dist/menubar/menubarmenulistitemview.d.ts +20 -20
- package/dist/menubar/menubarmenulistview.d.ts +24 -24
- package/dist/menubar/menubarmenupanelview.d.ts +47 -47
- package/dist/menubar/menubarmenuview.d.ts +113 -113
- package/dist/menubar/menubarview.d.ts +145 -145
- package/dist/menubar/utils.d.ts +455 -455
- package/dist/model.d.ts +19 -18
- package/dist/notification/notification.d.ts +200 -200
- package/dist/panel/balloon/balloonpanelview.d.ts +692 -692
- package/dist/panel/balloon/contextualballoon.d.ts +298 -298
- package/dist/panel/sticky/stickypanelview.d.ts +151 -151
- package/dist/search/filteredview.d.ts +23 -23
- package/dist/search/filtergroupanditemnames.d.ts +11 -11
- package/dist/search/searchinfoview.d.ts +39 -39
- package/dist/search/searchresultsview.d.ts +49 -49
- package/dist/search/text/searchtextqueryview.d.ts +63 -63
- package/dist/search/text/searchtextview.d.ts +203 -203
- package/dist/spinner/spinnerview.d.ts +20 -20
- package/dist/template.d.ts +897 -902
- package/dist/textarea/textareaview.d.ts +96 -96
- package/dist/toolbar/balloon/balloontoolbar.d.ts +122 -122
- package/dist/toolbar/block/blockbuttonview.d.ts +30 -30
- package/dist/toolbar/block/blocktoolbar.d.ts +166 -166
- package/dist/toolbar/normalizetoolbarconfig.d.ts +35 -35
- package/dist/toolbar/toolbarlinebreakview.d.ts +13 -13
- package/dist/toolbar/toolbarseparatorview.d.ts +13 -13
- package/dist/toolbar/toolbarview.d.ts +271 -271
- package/dist/tooltipmanager.d.ts +190 -193
- package/dist/view.d.ts +385 -388
- package/dist/viewcollection.d.ts +134 -134
- package/package.json +6 -6
|
@@ -1,81 +1,81 @@
|
|
|
1
1
|
/**
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
4
|
+
*/
|
|
5
5
|
/**
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
import type { Locale } from
|
|
9
|
-
import { type ButtonLabel } from
|
|
10
|
-
import { type ViewCollection } from
|
|
11
|
-
import { ButtonView } from
|
|
12
|
-
import { View } from
|
|
13
|
-
import
|
|
6
|
+
* @module ui/button/listitembuttonview
|
|
7
|
+
*/
|
|
8
|
+
import type { Locale } from "@ckeditor/ckeditor5-utils";
|
|
9
|
+
import { type ButtonLabel } from "./buttonlabel.js";
|
|
10
|
+
import { type ViewCollection } from "../viewcollection.js";
|
|
11
|
+
import { ButtonView } from "./buttonview.js";
|
|
12
|
+
import { View } from "../view.js";
|
|
13
|
+
import "../../theme/components/button/listitembutton.css";
|
|
14
14
|
/**
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
* Button that is used as dropdown list item entry.
|
|
16
|
+
*/
|
|
17
17
|
export declare class ListItemButtonView extends ButtonView {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
18
|
+
/**
|
|
19
|
+
* Indicates whether the button view has reserved space for a check holder.
|
|
20
|
+
*
|
|
21
|
+
* @observable
|
|
22
|
+
*/
|
|
23
|
+
hasCheckSpace: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* The flag that indicates if the button should render a check holder.
|
|
26
|
+
*
|
|
27
|
+
* @internal
|
|
28
|
+
* @readonly
|
|
29
|
+
* @observable
|
|
30
|
+
*/
|
|
31
|
+
_hasCheck: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* Holds the view for the check icon of a button list item.
|
|
34
|
+
*/
|
|
35
|
+
private readonly _checkIconHolderView;
|
|
36
|
+
/**
|
|
37
|
+
* @inheritDoc
|
|
38
|
+
*/
|
|
39
|
+
constructor(locale?: Locale, labelView?: ButtonLabel);
|
|
40
|
+
/**
|
|
41
|
+
* @inheritDoc
|
|
42
|
+
*/
|
|
43
|
+
override render(): void;
|
|
44
|
+
/**
|
|
45
|
+
* Renders the check icon if the button is toggleable.
|
|
46
|
+
*/
|
|
47
|
+
private _watchCheckIconHolderMount;
|
|
48
48
|
}
|
|
49
49
|
/**
|
|
50
|
-
|
|
51
|
-
|
|
50
|
+
* @internal
|
|
51
|
+
*/
|
|
52
52
|
export declare class CheckIconHolderView extends View {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
53
|
+
/**
|
|
54
|
+
* Collection of child views.
|
|
55
|
+
*/
|
|
56
|
+
readonly children: ViewCollection<View>;
|
|
57
|
+
/**
|
|
58
|
+
* Indicates whether the button is in the "on" state.
|
|
59
|
+
*/
|
|
60
|
+
isOn: boolean;
|
|
61
|
+
/**
|
|
62
|
+
* The view for the check icon of the button list item.
|
|
63
|
+
*/
|
|
64
|
+
private readonly _checkIconView;
|
|
65
|
+
/**
|
|
66
|
+
* @inheritDoc
|
|
67
|
+
*/
|
|
68
|
+
constructor();
|
|
69
|
+
/**
|
|
70
|
+
* @inheritDoc
|
|
71
|
+
*/
|
|
72
|
+
override render(): void;
|
|
73
|
+
/**
|
|
74
|
+
* Renders the check icon if the button is toggleable.
|
|
75
|
+
*/
|
|
76
|
+
private _watchCheckIconMount;
|
|
77
|
+
/**
|
|
78
|
+
* Creates a check icon view.
|
|
79
|
+
*/
|
|
80
|
+
private _createCheckIconView;
|
|
81
81
|
}
|
|
@@ -1,45 +1,45 @@
|
|
|
1
1
|
/**
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
4
|
+
*/
|
|
5
5
|
/**
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
import { View } from
|
|
9
|
-
import { ButtonView } from
|
|
10
|
-
import type { Locale } from
|
|
11
|
-
import
|
|
6
|
+
* @module ui/button/switchbuttonview
|
|
7
|
+
*/
|
|
8
|
+
import { View } from "../view.js";
|
|
9
|
+
import { ButtonView } from "./buttonview.js";
|
|
10
|
+
import type { Locale } from "@ckeditor/ckeditor5-utils";
|
|
11
|
+
import "../../theme/components/button/switchbutton.css";
|
|
12
12
|
/**
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
13
|
+
* The switch button view class.
|
|
14
|
+
*
|
|
15
|
+
* ```ts
|
|
16
|
+
* const view = new SwitchButtonView();
|
|
17
|
+
*
|
|
18
|
+
* view.set( {
|
|
19
|
+
* withText: true,
|
|
20
|
+
* label: 'Switch me!'
|
|
21
|
+
* } );
|
|
22
|
+
*
|
|
23
|
+
* view.render();
|
|
24
|
+
*
|
|
25
|
+
* document.body.append( view.element );
|
|
26
|
+
* ```
|
|
27
|
+
*/
|
|
28
28
|
export declare class SwitchButtonView extends ButtonView {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
29
|
+
/**
|
|
30
|
+
* The toggle switch of the button.
|
|
31
|
+
*/
|
|
32
|
+
readonly toggleSwitchView: View;
|
|
33
|
+
/**
|
|
34
|
+
* @inheritDoc
|
|
35
|
+
*/
|
|
36
|
+
constructor(locale?: Locale);
|
|
37
|
+
/**
|
|
38
|
+
* @inheritDoc
|
|
39
|
+
*/
|
|
40
|
+
override render(): void;
|
|
41
|
+
/**
|
|
42
|
+
* Creates a toggle child view.
|
|
43
|
+
*/
|
|
44
|
+
private _createToggleView;
|
|
45
45
|
}
|
|
@@ -1,67 +1,67 @@
|
|
|
1
1
|
/**
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
import { View } from
|
|
6
|
-
import { ButtonView } from
|
|
7
|
-
import { type ViewCollection } from
|
|
8
|
-
import type { FocusableView } from
|
|
9
|
-
import type { Locale } from
|
|
10
|
-
import
|
|
2
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
4
|
+
*/
|
|
5
|
+
import { View } from "../view.js";
|
|
6
|
+
import { ButtonView } from "../button/buttonview.js";
|
|
7
|
+
import { type ViewCollection } from "../viewcollection.js";
|
|
8
|
+
import type { FocusableView } from "../focuscycler.js";
|
|
9
|
+
import type { Locale } from "@ckeditor/ckeditor5-utils";
|
|
10
|
+
import "../../theme/components/collapsible/collapsible.css";
|
|
11
11
|
/**
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
12
|
+
* A collapsible UI component. Consists of a labeled button and a container which can be collapsed
|
|
13
|
+
* by clicking the button. The collapsible container can be a host to other UI views.
|
|
14
|
+
*
|
|
15
|
+
* @internal
|
|
16
|
+
*/
|
|
17
17
|
export declare class CollapsibleView extends View {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
18
|
+
/**
|
|
19
|
+
* `true` when the container with {@link #children} is collapsed. `false` otherwise.
|
|
20
|
+
*
|
|
21
|
+
* @observable
|
|
22
|
+
*/
|
|
23
|
+
isCollapsed: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* The text label of the {@link #buttonView}.
|
|
26
|
+
*
|
|
27
|
+
* @observable
|
|
28
|
+
* @default 'Show more'
|
|
29
|
+
*/
|
|
30
|
+
label: string;
|
|
31
|
+
/**
|
|
32
|
+
* The ID of the label inside the {@link #buttonView} that describes the collapsible
|
|
33
|
+
* container for assistive technologies. Set after the button was {@link #render rendered}.
|
|
34
|
+
*
|
|
35
|
+
* @internal
|
|
36
|
+
* @readonly
|
|
37
|
+
* @observable
|
|
38
|
+
*/
|
|
39
|
+
_collapsibleAriaLabelUid: string | undefined;
|
|
40
|
+
/**
|
|
41
|
+
* The main button that, when clicked, collapses or expands the container with {@link #children}.
|
|
42
|
+
*/
|
|
43
|
+
readonly buttonView: ButtonView;
|
|
44
|
+
/**
|
|
45
|
+
* A collection of the child views that can be collapsed by clicking the {@link #buttonView}.
|
|
46
|
+
*/
|
|
47
|
+
readonly children: ViewCollection<FocusableView>;
|
|
48
|
+
/**
|
|
49
|
+
* Creates an instance of the collapsible view.
|
|
50
|
+
*
|
|
51
|
+
* @param locale The {@link module:core/editor/editor~Editor#locale} instance.
|
|
52
|
+
* @param childViews An optional array of initial child views to be inserted into the collapsible.
|
|
53
|
+
*/
|
|
54
|
+
constructor(locale: Locale, childViews?: Array<FocusableView>);
|
|
55
|
+
/**
|
|
56
|
+
* @inheritDoc
|
|
57
|
+
*/
|
|
58
|
+
override render(): void;
|
|
59
|
+
/**
|
|
60
|
+
* Focuses the first focusable.
|
|
61
|
+
*/
|
|
62
|
+
focus(): void;
|
|
63
|
+
/**
|
|
64
|
+
* Creates the main {@link #buttonView} of the collapsible.
|
|
65
|
+
*/
|
|
66
|
+
private _createButtonView;
|
|
67
67
|
}
|
|
@@ -1,132 +1,132 @@
|
|
|
1
1
|
/**
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
4
|
+
*/
|
|
5
5
|
/**
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
import { View } from
|
|
9
|
-
import { ColorTileView } from
|
|
10
|
-
import { type DropdownPanelFocusable } from
|
|
11
|
-
import { type ViewCollection } from
|
|
12
|
-
import { FocusTracker, KeystrokeHandler, type Locale } from
|
|
13
|
-
import
|
|
6
|
+
* @module ui/colorgrid/colorgridview
|
|
7
|
+
*/
|
|
8
|
+
import { View } from "../view.js";
|
|
9
|
+
import { ColorTileView } from "./colortileview.js";
|
|
10
|
+
import { type DropdownPanelFocusable } from "../dropdown/dropdownpanelfocusable.js";
|
|
11
|
+
import { type ViewCollection } from "../viewcollection.js";
|
|
12
|
+
import { FocusTracker, KeystrokeHandler, type Locale } from "@ckeditor/ckeditor5-utils";
|
|
13
|
+
import "../../theme/components/colorgrid/colorgrid.css";
|
|
14
14
|
/**
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
* A grid of {@link module:ui/colorgrid/colortileview~ColorTileView color tiles}.
|
|
16
|
+
*/
|
|
17
17
|
export declare class ColorGridView extends View implements DropdownPanelFocusable {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
18
|
+
/**
|
|
19
|
+
* A number of columns for the tiles grid.
|
|
20
|
+
*/
|
|
21
|
+
readonly columns: number;
|
|
22
|
+
/**
|
|
23
|
+
* Collection of the child tile views.
|
|
24
|
+
*/
|
|
25
|
+
readonly items: ViewCollection<ColorTileView>;
|
|
26
|
+
/**
|
|
27
|
+
* Tracks information about DOM focus in the grid.
|
|
28
|
+
*/
|
|
29
|
+
readonly focusTracker: FocusTracker;
|
|
30
|
+
/**
|
|
31
|
+
* Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
|
|
32
|
+
*/
|
|
33
|
+
readonly keystrokes: KeystrokeHandler;
|
|
34
|
+
/**
|
|
35
|
+
* The color of the currently selected color tile in {@link #items}.
|
|
36
|
+
*
|
|
37
|
+
* @observable
|
|
38
|
+
*/
|
|
39
|
+
selectedColor: string | undefined | null;
|
|
40
|
+
/**
|
|
41
|
+
* Creates an instance of a color grid containing {@link module:ui/colorgrid/colortileview~ColorTileView tiles}.
|
|
42
|
+
*
|
|
43
|
+
* @fires execute
|
|
44
|
+
* @param locale The localization services instance.
|
|
45
|
+
* @param options Component configuration
|
|
46
|
+
* @param options.colorDefinitions Array with definitions
|
|
47
|
+
* required to create the {@link module:ui/colorgrid/colortileview~ColorTileView tiles}.
|
|
48
|
+
* @param options.columns A number of columns to display the tiles.
|
|
49
|
+
*/
|
|
50
|
+
constructor(locale?: Locale, options?: {
|
|
51
|
+
colorDefinitions?: Array<ColorDefinition>;
|
|
52
|
+
columns?: number;
|
|
53
|
+
});
|
|
54
|
+
/**
|
|
55
|
+
* Focuses the first focusable in {@link #items}.
|
|
56
|
+
*/
|
|
57
|
+
focus(): void;
|
|
58
|
+
/**
|
|
59
|
+
* Focuses the last focusable in {@link #items}.
|
|
60
|
+
*/
|
|
61
|
+
focusLast(): void;
|
|
62
|
+
/**
|
|
63
|
+
* @inheritDoc
|
|
64
|
+
*/
|
|
65
|
+
override render(): void;
|
|
66
|
+
/**
|
|
67
|
+
* @inheritDoc
|
|
68
|
+
*/
|
|
69
|
+
override destroy(): void;
|
|
70
70
|
}
|
|
71
71
|
/**
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
72
|
+
* A color definition used to create a {@link module:ui/colorgrid/colortileview~ColorTileView}.
|
|
73
|
+
*
|
|
74
|
+
* ```json
|
|
75
|
+
* {
|
|
76
|
+
* color: 'hsl(0, 0%, 75%)',
|
|
77
|
+
* label: 'Light Grey',
|
|
78
|
+
* options: {
|
|
79
|
+
* hasBorder: true
|
|
80
|
+
* }
|
|
81
|
+
* }
|
|
82
|
+
* ```
|
|
83
|
+
*/
|
|
84
84
|
export interface ColorDefinition {
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
85
|
+
/**
|
|
86
|
+
* String representing a color.
|
|
87
|
+
* It is used as value of background-color style in {@link module:ui/colorgrid/colortileview~ColorTileView}.
|
|
88
|
+
*/
|
|
89
|
+
color: string;
|
|
90
|
+
/**
|
|
91
|
+
* String used as label for {@link module:ui/colorgrid/colortileview~ColorTileView}.
|
|
92
|
+
*/
|
|
93
|
+
label: string;
|
|
94
|
+
/**
|
|
95
|
+
* Additional options passed to create a {@link module:ui/colorgrid/colortileview~ColorTileView}.
|
|
96
|
+
*/
|
|
97
|
+
options: {
|
|
98
|
+
/**
|
|
99
|
+
* A flag that indicates if special a CSS class should be added
|
|
100
|
+
* to {@link module:ui/colorgrid/colortileview~ColorTileView}, which renders a border around it.
|
|
101
|
+
*/
|
|
102
|
+
hasBorder: boolean;
|
|
103
|
+
};
|
|
104
104
|
}
|
|
105
105
|
/**
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
106
|
+
* Fired when the `ColorTileView` for the picked item is executed.
|
|
107
|
+
*
|
|
108
|
+
* @eventName ~ColorGridView#execute
|
|
109
|
+
* @param data Additional information about the event.
|
|
110
110
|
*/
|
|
111
111
|
export type ColorGridViewExecuteEvent = {
|
|
112
|
-
|
|
113
|
-
|
|
112
|
+
name: "execute";
|
|
113
|
+
args: [data: ColorGridViewExecuteEventData];
|
|
114
114
|
};
|
|
115
115
|
/**
|
|
116
|
-
|
|
117
|
-
|
|
116
|
+
* The data of {@link ~ColorGridViewExecuteEvent execute event}.
|
|
117
|
+
*/
|
|
118
118
|
export interface ColorGridViewExecuteEventData {
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
119
|
+
/**
|
|
120
|
+
* The value of the selected color ({@link module:ui/colorgrid/colorgridview~ColorDefinition#color `color.color`}).
|
|
121
|
+
*/
|
|
122
|
+
value: string;
|
|
123
|
+
/**
|
|
124
|
+
* The `hasBorder` property of the selected color
|
|
125
|
+
* ({@link module:ui/colorgrid/colorgridview~ColorDefinition#options `color.options.hasBorder`}).
|
|
126
|
+
*/
|
|
127
|
+
hasBorder: boolean;
|
|
128
|
+
/**
|
|
129
|
+
* The label of the selected color ({@link module:ui/colorgrid/colorgridview~ColorDefinition#label `color.label`})
|
|
130
|
+
*/
|
|
131
|
+
label: string;
|
|
132
132
|
}
|