@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.
Files changed (127) hide show
  1. package/lang/translations/it.po +1 -1
  2. package/package.json +3 -32
  3. package/src/augmentation.d.ts +86 -86
  4. package/src/augmentation.js +5 -5
  5. package/src/bindings/addkeyboardhandlingforgrid.d.ts +27 -27
  6. package/src/bindings/addkeyboardhandlingforgrid.js +107 -107
  7. package/src/bindings/clickoutsidehandler.d.ts +28 -28
  8. package/src/bindings/clickoutsidehandler.js +36 -36
  9. package/src/bindings/csstransitiondisablermixin.d.ts +40 -40
  10. package/src/bindings/csstransitiondisablermixin.js +55 -55
  11. package/src/bindings/injectcsstransitiondisabler.d.ts +59 -59
  12. package/src/bindings/injectcsstransitiondisabler.js +71 -71
  13. package/src/bindings/preventdefault.d.ts +33 -33
  14. package/src/bindings/preventdefault.js +34 -34
  15. package/src/bindings/submithandler.d.ts +57 -57
  16. package/src/bindings/submithandler.js +47 -47
  17. package/src/button/button.d.ts +178 -178
  18. package/src/button/button.js +5 -5
  19. package/src/button/buttonview.d.ts +177 -177
  20. package/src/button/buttonview.js +231 -231
  21. package/src/button/switchbuttonview.d.ts +45 -45
  22. package/src/button/switchbuttonview.js +75 -75
  23. package/src/colorgrid/colorgridview.d.ts +132 -132
  24. package/src/colorgrid/colorgridview.js +124 -124
  25. package/src/colorgrid/colortileview.d.ts +28 -28
  26. package/src/colorgrid/colortileview.js +40 -40
  27. package/src/colorgrid/utils.d.ts +47 -47
  28. package/src/colorgrid/utils.js +84 -84
  29. package/src/colorpicker/colorpickerview.d.ts +110 -110
  30. package/src/colorpicker/colorpickerview.js +253 -250
  31. package/src/colorpicker/utils.d.ts +35 -35
  32. package/src/colorpicker/utils.js +99 -99
  33. package/src/componentfactory.d.ts +81 -81
  34. package/src/componentfactory.js +104 -104
  35. package/src/dropdown/button/dropdownbutton.d.ts +25 -25
  36. package/src/dropdown/button/dropdownbutton.js +5 -5
  37. package/src/dropdown/button/dropdownbuttonview.d.ts +48 -48
  38. package/src/dropdown/button/dropdownbuttonview.js +66 -66
  39. package/src/dropdown/button/splitbuttonview.d.ts +161 -161
  40. package/src/dropdown/button/splitbuttonview.js +152 -152
  41. package/src/dropdown/dropdownpanelfocusable.d.ts +21 -21
  42. package/src/dropdown/dropdownpanelfocusable.js +5 -5
  43. package/src/dropdown/dropdownpanelview.d.ts +62 -62
  44. package/src/dropdown/dropdownpanelview.js +96 -96
  45. package/src/dropdown/dropdownview.d.ts +315 -315
  46. package/src/dropdown/dropdownview.js +378 -378
  47. package/src/dropdown/utils.d.ts +221 -221
  48. package/src/dropdown/utils.js +434 -434
  49. package/src/editableui/editableuiview.d.ts +72 -72
  50. package/src/editableui/editableuiview.js +112 -112
  51. package/src/editableui/inline/inlineeditableuiview.d.ts +40 -40
  52. package/src/editableui/inline/inlineeditableuiview.js +48 -48
  53. package/src/editorui/bodycollection.d.ts +55 -51
  54. package/src/editorui/bodycollection.js +84 -78
  55. package/src/editorui/boxed/boxededitoruiview.d.ts +40 -40
  56. package/src/editorui/boxed/boxededitoruiview.js +81 -81
  57. package/src/editorui/editorui.d.ts +282 -274
  58. package/src/editorui/editorui.js +410 -388
  59. package/src/editorui/editoruiview.d.ts +39 -39
  60. package/src/editorui/editoruiview.js +38 -38
  61. package/src/editorui/poweredby.d.ts +71 -76
  62. package/src/editorui/poweredby.js +294 -291
  63. package/src/focuscycler.d.ts +183 -183
  64. package/src/focuscycler.js +220 -220
  65. package/src/formheader/formheaderview.d.ts +53 -53
  66. package/src/formheader/formheaderview.js +63 -63
  67. package/src/icon/iconview.d.ts +78 -78
  68. package/src/icon/iconview.js +112 -112
  69. package/src/iframe/iframeview.d.ts +50 -50
  70. package/src/iframe/iframeview.js +63 -63
  71. package/src/index.d.ts +62 -61
  72. package/src/index.js +61 -60
  73. package/src/input/inputview.d.ts +121 -121
  74. package/src/input/inputview.js +106 -106
  75. package/src/inputnumber/inputnumberview.d.ts +49 -49
  76. package/src/inputnumber/inputnumberview.js +40 -40
  77. package/src/inputtext/inputtextview.d.ts +18 -18
  78. package/src/inputtext/inputtextview.js +27 -27
  79. package/src/label/labelview.d.ts +36 -36
  80. package/src/label/labelview.js +41 -41
  81. package/src/labeledfield/labeledfieldview.d.ts +182 -182
  82. package/src/labeledfield/labeledfieldview.js +157 -157
  83. package/src/labeledfield/utils.d.ts +93 -93
  84. package/src/labeledfield/utils.js +131 -131
  85. package/src/labeledinput/labeledinputview.d.ts +125 -125
  86. package/src/labeledinput/labeledinputview.js +125 -125
  87. package/src/list/listitemview.d.ts +35 -35
  88. package/src/list/listitemview.js +40 -40
  89. package/src/list/listseparatorview.d.ts +18 -18
  90. package/src/list/listseparatorview.js +28 -28
  91. package/src/list/listview.d.ts +65 -65
  92. package/src/list/listview.js +90 -90
  93. package/src/model.d.ts +22 -22
  94. package/src/model.js +31 -31
  95. package/src/notification/notification.d.ts +211 -211
  96. package/src/notification/notification.js +187 -187
  97. package/src/panel/balloon/balloonpanelview.d.ts +685 -685
  98. package/src/panel/balloon/balloonpanelview.js +988 -988
  99. package/src/panel/balloon/contextualballoon.d.ts +299 -299
  100. package/src/panel/balloon/contextualballoon.js +572 -572
  101. package/src/panel/sticky/stickypanelview.d.ts +132 -132
  102. package/src/panel/sticky/stickypanelview.js +139 -139
  103. package/src/template.d.ts +942 -942
  104. package/src/template.js +1294 -1294
  105. package/src/toolbar/balloon/balloontoolbar.d.ts +122 -122
  106. package/src/toolbar/balloon/balloontoolbar.js +300 -300
  107. package/src/toolbar/block/blockbuttonview.d.ts +35 -35
  108. package/src/toolbar/block/blockbuttonview.js +41 -41
  109. package/src/toolbar/block/blocktoolbar.d.ts +161 -153
  110. package/src/toolbar/block/blocktoolbar.js +391 -374
  111. package/src/toolbar/normalizetoolbarconfig.d.ts +39 -39
  112. package/src/toolbar/normalizetoolbarconfig.js +51 -51
  113. package/src/toolbar/toolbarlinebreakview.d.ts +18 -18
  114. package/src/toolbar/toolbarlinebreakview.js +28 -28
  115. package/src/toolbar/toolbarseparatorview.d.ts +18 -18
  116. package/src/toolbar/toolbarseparatorview.js +28 -28
  117. package/src/toolbar/toolbarview.d.ts +265 -265
  118. package/src/toolbar/toolbarview.js +717 -717
  119. package/src/tooltipmanager.d.ts +180 -180
  120. package/src/tooltipmanager.js +353 -353
  121. package/src/view.d.ts +422 -422
  122. package/src/view.js +396 -396
  123. package/src/viewcollection.d.ts +139 -139
  124. package/src/viewcollection.js +206 -206
  125. package/theme/components/colorpicker/colorpicker.css +4 -4
  126. package/theme/globals/_poweredby.css +5 -1
  127. package/theme/icons/project-logo.svg +1 -1
@@ -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 {};