@ckeditor/ckeditor5-ui 38.1.0 → 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.
Files changed (123) hide show
  1. package/package.json +3 -3
  2. package/src/augmentation.d.ts +86 -86
  3. package/src/augmentation.js +5 -5
  4. package/src/bindings/addkeyboardhandlingforgrid.d.ts +27 -27
  5. package/src/bindings/addkeyboardhandlingforgrid.js +107 -107
  6. package/src/bindings/clickoutsidehandler.d.ts +28 -28
  7. package/src/bindings/clickoutsidehandler.js +36 -36
  8. package/src/bindings/csstransitiondisablermixin.d.ts +40 -40
  9. package/src/bindings/csstransitiondisablermixin.js +55 -55
  10. package/src/bindings/injectcsstransitiondisabler.d.ts +59 -59
  11. package/src/bindings/injectcsstransitiondisabler.js +71 -71
  12. package/src/bindings/preventdefault.d.ts +33 -33
  13. package/src/bindings/preventdefault.js +34 -34
  14. package/src/bindings/submithandler.d.ts +57 -57
  15. package/src/bindings/submithandler.js +47 -47
  16. package/src/button/button.d.ts +178 -178
  17. package/src/button/button.js +5 -5
  18. package/src/button/buttonview.d.ts +177 -177
  19. package/src/button/buttonview.js +231 -231
  20. package/src/button/switchbuttonview.d.ts +45 -45
  21. package/src/button/switchbuttonview.js +75 -75
  22. package/src/colorgrid/colorgridview.d.ts +132 -132
  23. package/src/colorgrid/colorgridview.js +124 -124
  24. package/src/colorgrid/colortileview.d.ts +28 -28
  25. package/src/colorgrid/colortileview.js +40 -40
  26. package/src/colorgrid/utils.d.ts +47 -47
  27. package/src/colorgrid/utils.js +84 -84
  28. package/src/colorpicker/colorpickerview.d.ts +110 -110
  29. package/src/colorpicker/colorpickerview.js +253 -253
  30. package/src/colorpicker/utils.d.ts +35 -35
  31. package/src/colorpicker/utils.js +99 -99
  32. package/src/componentfactory.d.ts +81 -81
  33. package/src/componentfactory.js +104 -104
  34. package/src/dropdown/button/dropdownbutton.d.ts +25 -25
  35. package/src/dropdown/button/dropdownbutton.js +5 -5
  36. package/src/dropdown/button/dropdownbuttonview.d.ts +48 -48
  37. package/src/dropdown/button/dropdownbuttonview.js +66 -66
  38. package/src/dropdown/button/splitbuttonview.d.ts +161 -161
  39. package/src/dropdown/button/splitbuttonview.js +152 -152
  40. package/src/dropdown/dropdownpanelfocusable.d.ts +21 -21
  41. package/src/dropdown/dropdownpanelfocusable.js +5 -5
  42. package/src/dropdown/dropdownpanelview.d.ts +62 -62
  43. package/src/dropdown/dropdownpanelview.js +96 -96
  44. package/src/dropdown/dropdownview.d.ts +315 -315
  45. package/src/dropdown/dropdownview.js +378 -378
  46. package/src/dropdown/utils.d.ts +221 -221
  47. package/src/dropdown/utils.js +434 -434
  48. package/src/editableui/editableuiview.d.ts +72 -72
  49. package/src/editableui/editableuiview.js +112 -112
  50. package/src/editableui/inline/inlineeditableuiview.d.ts +40 -40
  51. package/src/editableui/inline/inlineeditableuiview.js +48 -48
  52. package/src/editorui/bodycollection.d.ts +55 -55
  53. package/src/editorui/bodycollection.js +84 -84
  54. package/src/editorui/boxed/boxededitoruiview.d.ts +40 -40
  55. package/src/editorui/boxed/boxededitoruiview.js +81 -81
  56. package/src/editorui/editorui.d.ts +282 -282
  57. package/src/editorui/editorui.js +410 -410
  58. package/src/editorui/editoruiview.d.ts +39 -39
  59. package/src/editorui/editoruiview.js +38 -38
  60. package/src/editorui/poweredby.d.ts +71 -71
  61. package/src/editorui/poweredby.js +294 -294
  62. package/src/focuscycler.d.ts +183 -183
  63. package/src/focuscycler.js +220 -220
  64. package/src/formheader/formheaderview.d.ts +53 -53
  65. package/src/formheader/formheaderview.js +63 -63
  66. package/src/icon/iconview.d.ts +78 -78
  67. package/src/icon/iconview.js +112 -112
  68. package/src/iframe/iframeview.d.ts +50 -50
  69. package/src/iframe/iframeview.js +63 -63
  70. package/src/index.d.ts +62 -62
  71. package/src/index.js +61 -61
  72. package/src/input/inputview.d.ts +121 -121
  73. package/src/input/inputview.js +106 -106
  74. package/src/inputnumber/inputnumberview.d.ts +49 -49
  75. package/src/inputnumber/inputnumberview.js +40 -40
  76. package/src/inputtext/inputtextview.d.ts +18 -18
  77. package/src/inputtext/inputtextview.js +27 -27
  78. package/src/label/labelview.d.ts +36 -36
  79. package/src/label/labelview.js +41 -41
  80. package/src/labeledfield/labeledfieldview.d.ts +182 -182
  81. package/src/labeledfield/labeledfieldview.js +157 -157
  82. package/src/labeledfield/utils.d.ts +93 -93
  83. package/src/labeledfield/utils.js +131 -131
  84. package/src/labeledinput/labeledinputview.d.ts +125 -125
  85. package/src/labeledinput/labeledinputview.js +125 -125
  86. package/src/list/listitemview.d.ts +35 -35
  87. package/src/list/listitemview.js +40 -40
  88. package/src/list/listseparatorview.d.ts +18 -18
  89. package/src/list/listseparatorview.js +28 -28
  90. package/src/list/listview.d.ts +65 -65
  91. package/src/list/listview.js +90 -90
  92. package/src/model.d.ts +22 -22
  93. package/src/model.js +31 -31
  94. package/src/notification/notification.d.ts +211 -211
  95. package/src/notification/notification.js +187 -187
  96. package/src/panel/balloon/balloonpanelview.d.ts +685 -685
  97. package/src/panel/balloon/balloonpanelview.js +988 -988
  98. package/src/panel/balloon/contextualballoon.d.ts +299 -299
  99. package/src/panel/balloon/contextualballoon.js +572 -572
  100. package/src/panel/sticky/stickypanelview.d.ts +132 -132
  101. package/src/panel/sticky/stickypanelview.js +139 -139
  102. package/src/template.d.ts +942 -942
  103. package/src/template.js +1294 -1294
  104. package/src/toolbar/balloon/balloontoolbar.d.ts +122 -122
  105. package/src/toolbar/balloon/balloontoolbar.js +300 -300
  106. package/src/toolbar/block/blockbuttonview.d.ts +35 -35
  107. package/src/toolbar/block/blockbuttonview.js +41 -41
  108. package/src/toolbar/block/blocktoolbar.d.ts +161 -161
  109. package/src/toolbar/block/blocktoolbar.js +391 -391
  110. package/src/toolbar/normalizetoolbarconfig.d.ts +39 -39
  111. package/src/toolbar/normalizetoolbarconfig.js +51 -51
  112. package/src/toolbar/toolbarlinebreakview.d.ts +18 -18
  113. package/src/toolbar/toolbarlinebreakview.js +28 -28
  114. package/src/toolbar/toolbarseparatorview.d.ts +18 -18
  115. package/src/toolbar/toolbarseparatorview.js +28 -28
  116. package/src/toolbar/toolbarview.d.ts +265 -265
  117. package/src/toolbar/toolbarview.js +717 -717
  118. package/src/tooltipmanager.d.ts +180 -180
  119. package/src/tooltipmanager.js +353 -353
  120. package/src/view.d.ts +422 -422
  121. package/src/view.js +396 -396
  122. package/src/viewcollection.d.ts +139 -139
  123. package/src/viewcollection.js +206 -206
@@ -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/colorgrid/colortileview
7
- */
8
- import ButtonView from '../button/buttonview';
9
- import type { Locale } from '@ckeditor/ckeditor5-utils';
10
- /**
11
- * This class represents a single color tile in the {@link module:ui/colorgrid/colorgridview~ColorGridView}.
12
- */
13
- export default class ColorTileView extends ButtonView {
14
- /**
15
- * String representing a color shown as tile's background.
16
- */
17
- color: string | undefined;
18
- /**
19
- * A flag that toggles a special CSS class responsible for displaying
20
- * a border around the button.
21
- */
22
- hasBorder: boolean;
23
- constructor(locale?: Locale);
24
- /**
25
- * @inheritDoc
26
- */
27
- render(): void;
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/colorgrid/colortileview
7
+ */
8
+ import ButtonView from '../button/buttonview';
9
+ import type { Locale } from '@ckeditor/ckeditor5-utils';
10
+ /**
11
+ * This class represents a single color tile in the {@link module:ui/colorgrid/colorgridview~ColorGridView}.
12
+ */
13
+ export default class ColorTileView extends ButtonView {
14
+ /**
15
+ * String representing a color shown as tile's background.
16
+ */
17
+ color: string | undefined;
18
+ /**
19
+ * A flag that toggles a special CSS class responsible for displaying
20
+ * a border around the button.
21
+ */
22
+ hasBorder: boolean;
23
+ constructor(locale?: Locale);
24
+ /**
25
+ * @inheritDoc
26
+ */
27
+ render(): void;
28
+ }
@@ -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/colorgrid/colortileview
7
- */
8
- import ButtonView from '../button/buttonview';
9
- import checkIcon from '../../theme/icons/color-tile-check.svg';
10
- /**
11
- * This class represents a single color tile in the {@link module:ui/colorgrid/colorgridview~ColorGridView}.
12
- */
13
- export default class ColorTileView extends ButtonView {
14
- constructor(locale) {
15
- super(locale);
16
- const bind = this.bindTemplate;
17
- this.set('color', undefined);
18
- this.set('hasBorder', false);
19
- this.icon = checkIcon;
20
- this.extendTemplate({
21
- attributes: {
22
- style: {
23
- backgroundColor: bind.to('color')
24
- },
25
- class: [
26
- 'ck',
27
- 'ck-color-grid__tile',
28
- bind.if('hasBorder', 'ck-color-table__color-tile_bordered')
29
- ]
30
- }
31
- });
32
- }
33
- /**
34
- * @inheritDoc
35
- */
36
- render() {
37
- super.render();
38
- this.iconView.fillColor = 'hsl(0, 0%, 100%)';
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/colorgrid/colortileview
7
+ */
8
+ import ButtonView from '../button/buttonview';
9
+ import checkIcon from '../../theme/icons/color-tile-check.svg';
10
+ /**
11
+ * This class represents a single color tile in the {@link module:ui/colorgrid/colorgridview~ColorGridView}.
12
+ */
13
+ export default class ColorTileView extends ButtonView {
14
+ constructor(locale) {
15
+ super(locale);
16
+ const bind = this.bindTemplate;
17
+ this.set('color', undefined);
18
+ this.set('hasBorder', false);
19
+ this.icon = checkIcon;
20
+ this.extendTemplate({
21
+ attributes: {
22
+ style: {
23
+ backgroundColor: bind.to('color')
24
+ },
25
+ class: [
26
+ 'ck',
27
+ 'ck-color-grid__tile',
28
+ bind.if('hasBorder', 'ck-color-table__color-tile_bordered')
29
+ ]
30
+ }
31
+ });
32
+ }
33
+ /**
34
+ * @inheritDoc
35
+ */
36
+ render() {
37
+ super.render();
38
+ this.iconView.fillColor = 'hsl(0, 0%, 100%)';
39
+ }
40
+ }
@@ -1,47 +1,47 @@
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/colorgrid/utils
7
- */
8
- import type { Locale } from '@ckeditor/ckeditor5-utils';
9
- export type ColorOption = string | {
10
- color: string;
11
- label?: string;
12
- hasBorder?: boolean;
13
- };
14
- export interface NormalizedColorOption {
15
- model: string;
16
- label: string;
17
- hasBorder: boolean;
18
- view: {
19
- name: string;
20
- styles: {
21
- color: string;
22
- };
23
- };
24
- }
25
- /**
26
- * Returns color configuration options as defined in `editor.config.(fontColor|fontBackgroundColor).colors` or
27
- * `editor.config.table.(tableProperties|tableCellProperties).(background|border).colors
28
- * but processed to account for editor localization in the correct language.
29
- *
30
- * Note: The reason behind this method is that there is no way to use {@link module:utils/locale~Locale#t}
31
- * when the user configuration is defined because the editor does not exist yet.
32
- *
33
- * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
34
- */
35
- export declare function getLocalizedColorOptions(locale: Locale, options: Array<NormalizedColorOption>): Array<NormalizedColorOption>;
36
- /**
37
- * Creates a unified color definition object from color configuration options.
38
- * The object contains the information necessary to both render the UI and initialize the conversion.
39
- */
40
- export declare function normalizeColorOptions(options: Array<ColorOption>): Array<NormalizedColorOption>;
41
- /**
42
- * Creates a normalized color definition from the user-defined configuration.
43
- * The "normalization" means it will create full
44
- * {@link module:ui/colorgrid/colorgridview~ColorDefinition `ColorDefinition-like`}
45
- * object for string values, and add a `view` property, for each definition.
46
- */
47
- export declare function normalizeSingleColorDefinition(color: ColorOption): NormalizedColorOption;
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/colorgrid/utils
7
+ */
8
+ import type { Locale } from '@ckeditor/ckeditor5-utils';
9
+ export type ColorOption = string | {
10
+ color: string;
11
+ label?: string;
12
+ hasBorder?: boolean;
13
+ };
14
+ export interface NormalizedColorOption {
15
+ model: string;
16
+ label: string;
17
+ hasBorder: boolean;
18
+ view: {
19
+ name: string;
20
+ styles: {
21
+ color: string;
22
+ };
23
+ };
24
+ }
25
+ /**
26
+ * Returns color configuration options as defined in `editor.config.(fontColor|fontBackgroundColor).colors` or
27
+ * `editor.config.table.(tableProperties|tableCellProperties).(background|border).colors
28
+ * but processed to account for editor localization in the correct language.
29
+ *
30
+ * Note: The reason behind this method is that there is no way to use {@link module:utils/locale~Locale#t}
31
+ * when the user configuration is defined because the editor does not exist yet.
32
+ *
33
+ * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
34
+ */
35
+ export declare function getLocalizedColorOptions(locale: Locale, options: Array<NormalizedColorOption>): Array<NormalizedColorOption>;
36
+ /**
37
+ * Creates a unified color definition object from color configuration options.
38
+ * The object contains the information necessary to both render the UI and initialize the conversion.
39
+ */
40
+ export declare function normalizeColorOptions(options: Array<ColorOption>): Array<NormalizedColorOption>;
41
+ /**
42
+ * Creates a normalized color definition from the user-defined configuration.
43
+ * The "normalization" means it will create full
44
+ * {@link module:ui/colorgrid/colorgridview~ColorDefinition `ColorDefinition-like`}
45
+ * object for string values, and add a `view` property, for each definition.
46
+ */
47
+ export declare function normalizeSingleColorDefinition(color: ColorOption): NormalizedColorOption;
@@ -1,84 +1,84 @@
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
- * Returns color configuration options as defined in `editor.config.(fontColor|fontBackgroundColor).colors` or
7
- * `editor.config.table.(tableProperties|tableCellProperties).(background|border).colors
8
- * but processed to account for editor localization in the correct language.
9
- *
10
- * Note: The reason behind this method is that there is no way to use {@link module:utils/locale~Locale#t}
11
- * when the user configuration is defined because the editor does not exist yet.
12
- *
13
- * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
14
- */
15
- export function getLocalizedColorOptions(locale, options) {
16
- const t = locale.t;
17
- const localizedColorNames = {
18
- Black: t('Black'),
19
- 'Dim grey': t('Dim grey'),
20
- Grey: t('Grey'),
21
- 'Light grey': t('Light grey'),
22
- White: t('White'),
23
- Red: t('Red'),
24
- Orange: t('Orange'),
25
- Yellow: t('Yellow'),
26
- 'Light green': t('Light green'),
27
- Green: t('Green'),
28
- Aquamarine: t('Aquamarine'),
29
- Turquoise: t('Turquoise'),
30
- 'Light blue': t('Light blue'),
31
- Blue: t('Blue'),
32
- Purple: t('Purple')
33
- };
34
- return options.map(colorOption => {
35
- const label = localizedColorNames[colorOption.label];
36
- if (label && label != colorOption.label) {
37
- colorOption.label = label;
38
- }
39
- return colorOption;
40
- });
41
- }
42
- /**
43
- * Creates a unified color definition object from color configuration options.
44
- * The object contains the information necessary to both render the UI and initialize the conversion.
45
- */
46
- export function normalizeColorOptions(options) {
47
- return options
48
- .map(normalizeSingleColorDefinition)
49
- .filter(option => !!option);
50
- }
51
- /**
52
- * Creates a normalized color definition from the user-defined configuration.
53
- * The "normalization" means it will create full
54
- * {@link module:ui/colorgrid/colorgridview~ColorDefinition `ColorDefinition-like`}
55
- * object for string values, and add a `view` property, for each definition.
56
- */
57
- export function normalizeSingleColorDefinition(color) {
58
- if (typeof color === 'string') {
59
- return {
60
- model: color,
61
- label: color,
62
- hasBorder: false,
63
- view: {
64
- name: 'span',
65
- styles: {
66
- color
67
- }
68
- }
69
- };
70
- }
71
- else {
72
- return {
73
- model: color.color,
74
- label: color.label || color.color,
75
- hasBorder: color.hasBorder === undefined ? false : color.hasBorder,
76
- view: {
77
- name: 'span',
78
- styles: {
79
- color: `${color.color}`
80
- }
81
- }
82
- };
83
- }
84
- }
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
+ * Returns color configuration options as defined in `editor.config.(fontColor|fontBackgroundColor).colors` or
7
+ * `editor.config.table.(tableProperties|tableCellProperties).(background|border).colors
8
+ * but processed to account for editor localization in the correct language.
9
+ *
10
+ * Note: The reason behind this method is that there is no way to use {@link module:utils/locale~Locale#t}
11
+ * when the user configuration is defined because the editor does not exist yet.
12
+ *
13
+ * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
14
+ */
15
+ export function getLocalizedColorOptions(locale, options) {
16
+ const t = locale.t;
17
+ const localizedColorNames = {
18
+ Black: t('Black'),
19
+ 'Dim grey': t('Dim grey'),
20
+ Grey: t('Grey'),
21
+ 'Light grey': t('Light grey'),
22
+ White: t('White'),
23
+ Red: t('Red'),
24
+ Orange: t('Orange'),
25
+ Yellow: t('Yellow'),
26
+ 'Light green': t('Light green'),
27
+ Green: t('Green'),
28
+ Aquamarine: t('Aquamarine'),
29
+ Turquoise: t('Turquoise'),
30
+ 'Light blue': t('Light blue'),
31
+ Blue: t('Blue'),
32
+ Purple: t('Purple')
33
+ };
34
+ return options.map(colorOption => {
35
+ const label = localizedColorNames[colorOption.label];
36
+ if (label && label != colorOption.label) {
37
+ colorOption.label = label;
38
+ }
39
+ return colorOption;
40
+ });
41
+ }
42
+ /**
43
+ * Creates a unified color definition object from color configuration options.
44
+ * The object contains the information necessary to both render the UI and initialize the conversion.
45
+ */
46
+ export function normalizeColorOptions(options) {
47
+ return options
48
+ .map(normalizeSingleColorDefinition)
49
+ .filter(option => !!option);
50
+ }
51
+ /**
52
+ * Creates a normalized color definition from the user-defined configuration.
53
+ * The "normalization" means it will create full
54
+ * {@link module:ui/colorgrid/colorgridview~ColorDefinition `ColorDefinition-like`}
55
+ * object for string values, and add a `view` property, for each definition.
56
+ */
57
+ export function normalizeSingleColorDefinition(color) {
58
+ if (typeof color === 'string') {
59
+ return {
60
+ model: color,
61
+ label: color,
62
+ hasBorder: false,
63
+ view: {
64
+ name: 'span',
65
+ styles: {
66
+ color
67
+ }
68
+ }
69
+ };
70
+ }
71
+ else {
72
+ return {
73
+ model: color.color,
74
+ label: color.label || color.color,
75
+ hasBorder: color.hasBorder === undefined ? false : color.hasBorder,
76
+ view: {
77
+ name: 'span',
78
+ styles: {
79
+ color: `${color.color}`
80
+ }
81
+ }
82
+ };
83
+ }
84
+ }
@@ -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/colorpicker/colorpickerview
7
- */
8
- import { type ColorPickerConfig } from './utils';
9
- import { type Locale } from '@ckeditor/ckeditor5-utils';
10
- import View from '../view';
11
- import type ViewCollection from '../viewcollection';
12
- import 'vanilla-colorful/hex-color-picker.js';
13
- import '../../theme/components/colorpicker/colorpicker.css';
14
- export default class ColorPickerView extends View {
15
- /**
16
- * Element with saturation and hue sliders.
17
- */
18
- picker: HTMLElement;
19
- /**
20
- * Container for a `#` sign prefix and an input for displaying and defining custom colors
21
- * in HEX format.
22
- */
23
- hexInputRow: ColorPickerInputRowView;
24
- /**
25
- * Current color state in color picker.
26
- */
27
- color: string;
28
- /**
29
- * List of slider views of the color picker.
30
- */
31
- slidersView: ViewCollection<SliderView>;
32
- /**
33
- * An internal representation of a color.
34
- *
35
- * Since the picker uses a hex format, that's how we store it.
36
- *
37
- * Since this is unified color format it won't fire a change event if color is changed
38
- * from `#f00` to `#ff0000` (same value, different format).
39
- *
40
- * @observable
41
- * @private
42
- */
43
- _hexColor: string;
44
- /**
45
- * Debounced event method. The `colorPickerEvent()` method is called the specified `waitingTime` after
46
- * `debouncedPickerEvent()` is called, unless a new action happens in the meantime.
47
- */
48
- private _debounceColorPickerEvent;
49
- /**
50
- * The output format (the one in which colors are applied in the model) of color picker.
51
- */
52
- private _format;
53
- /**
54
- * Creates a view of color picker.
55
- *
56
- * @param locale
57
- * @param config
58
- */
59
- constructor(locale: Locale | undefined, config: ColorPickerConfig);
60
- /**
61
- * Renders color picker in the view.
62
- */
63
- render(): void;
64
- /**
65
- * Focuses the first pointer in color picker.
66
- *
67
- */
68
- focus(): void;
69
- /**
70
- * Creates collection of sliders in color picker.
71
- *
72
- * @private
73
- */
74
- private _createSlidersView;
75
- /**
76
- * Creates input row for defining custom colors in color picker.
77
- *
78
- * @private
79
- */
80
- private _createInputRow;
81
- /**
82
- * Creates the input where user can type or paste the color in hex format.
83
- *
84
- * @private
85
- */
86
- private _createColorInput;
87
- }
88
- declare class SliderView extends View {
89
- /**
90
- * @param element HTML elemnt of slider in color picker.
91
- */
92
- constructor(element: HTMLElement);
93
- /**
94
- * Focuses element.
95
- */
96
- focus(): void;
97
- }
98
- declare class ColorPickerInputRowView extends View {
99
- /**
100
- * A collection of row items (buttons, dropdowns, etc.).
101
- */
102
- readonly children: ViewCollection;
103
- /**
104
- * Creates an instance of the form row class.
105
- *
106
- * @param locale The locale instance.
107
- */
108
- constructor(locale: Locale, children?: Array<View>);
109
- }
110
- export {};
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ /**
6
+ * @module ui/colorpicker/colorpickerview
7
+ */
8
+ import { type ColorPickerConfig } from './utils';
9
+ import { type Locale } from '@ckeditor/ckeditor5-utils';
10
+ import View from '../view';
11
+ import type ViewCollection from '../viewcollection';
12
+ import 'vanilla-colorful/hex-color-picker.js';
13
+ import '../../theme/components/colorpicker/colorpicker.css';
14
+ export default class ColorPickerView extends View {
15
+ /**
16
+ * Element with saturation and hue sliders.
17
+ */
18
+ picker: HTMLElement;
19
+ /**
20
+ * Container for a `#` sign prefix and an input for displaying and defining custom colors
21
+ * in HEX format.
22
+ */
23
+ hexInputRow: ColorPickerInputRowView;
24
+ /**
25
+ * Current color state in color picker.
26
+ */
27
+ color: string;
28
+ /**
29
+ * List of slider views of the color picker.
30
+ */
31
+ slidersView: ViewCollection<SliderView>;
32
+ /**
33
+ * An internal representation of a color.
34
+ *
35
+ * Since the picker uses a hex format, that's how we store it.
36
+ *
37
+ * Since this is unified color format it won't fire a change event if color is changed
38
+ * from `#f00` to `#ff0000` (same value, different format).
39
+ *
40
+ * @observable
41
+ * @private
42
+ */
43
+ _hexColor: string;
44
+ /**
45
+ * Debounced event method. The `colorPickerEvent()` method is called the specified `waitingTime` after
46
+ * `debouncedPickerEvent()` is called, unless a new action happens in the meantime.
47
+ */
48
+ private _debounceColorPickerEvent;
49
+ /**
50
+ * The output format (the one in which colors are applied in the model) of color picker.
51
+ */
52
+ private _format;
53
+ /**
54
+ * Creates a view of color picker.
55
+ *
56
+ * @param locale
57
+ * @param config
58
+ */
59
+ constructor(locale: Locale | undefined, config: ColorPickerConfig);
60
+ /**
61
+ * Renders color picker in the view.
62
+ */
63
+ render(): void;
64
+ /**
65
+ * Focuses the first pointer in color picker.
66
+ *
67
+ */
68
+ focus(): void;
69
+ /**
70
+ * Creates collection of sliders in color picker.
71
+ *
72
+ * @private
73
+ */
74
+ private _createSlidersView;
75
+ /**
76
+ * Creates input row for defining custom colors in color picker.
77
+ *
78
+ * @private
79
+ */
80
+ private _createInputRow;
81
+ /**
82
+ * Creates the input where user can type or paste the color in hex format.
83
+ *
84
+ * @private
85
+ */
86
+ private _createColorInput;
87
+ }
88
+ declare class SliderView extends View {
89
+ /**
90
+ * @param element HTML elemnt of slider in color picker.
91
+ */
92
+ constructor(element: HTMLElement);
93
+ /**
94
+ * Focuses element.
95
+ */
96
+ focus(): void;
97
+ }
98
+ declare class ColorPickerInputRowView extends View {
99
+ /**
100
+ * A collection of row items (buttons, dropdowns, etc.).
101
+ */
102
+ readonly children: ViewCollection;
103
+ /**
104
+ * Creates an instance of the form row class.
105
+ *
106
+ * @param locale The locale instance.
107
+ */
108
+ constructor(locale: Locale, children?: Array<View>);
109
+ }
110
+ export {};