@ckeditor/ckeditor5-table 36.0.0 → 37.0.0-alpha.0

package/src/utils/table-properties.d.ts

@@ -0,0 +1,67 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module table/utils/table-properties
+ */
+import type { BoxSides } from 'ckeditor5/src/engine';
+/**
+ * Returns a string if all four values of box sides are equal.
+ *
+ * If a string is passed, it is treated as a single value (pass-through).
+ *
+ * ```ts
+ * // Returns 'foo':
+ * getSingleValue( { top: 'foo', right: 'foo', bottom: 'foo', left: 'foo' } );
+ * getSingleValue( 'foo' );
+ *
+ * // Returns undefined:
+ * getSingleValue( { top: 'foo', right: 'foo', bottom: 'bar', left: 'foo' } );
+ * getSingleValue( { top: 'foo', right: 'foo' } );
+ * ```
+ */
+export declare function getSingleValue(objectOrString: BoxSides | string | undefined): string | undefined;
+/**
+ * Adds a unit to a value if the value is a number or a string representing a number.
+ *
+ * **Note**: It does nothing to non-numeric values.
+ *
+ * ```ts
+ * getSingleValue( 25, 'px' ); // '25px'
+ * getSingleValue( 25, 'em' ); // '25em'
+ * getSingleValue( '25em', 'px' ); // '25em'
+ * getSingleValue( 'foo', 'px' ); // 'foo'
+ * ```
+ *
+ * @param defaultUnit A default unit added to a numeric value.
+ */
+export declare function addDefaultUnitToNumericValue(value: string | number | undefined, defaultUnit: string): string | number | undefined;
+export interface NormalizedDefaultProperties {
+    borderStyle: string;
+    borderWidth: string;
+    borderColor: string;
+    backgroundColor: string;
+    width: string;
+    height: string;
+    alignment?: string;
+    padding?: string;
+    verticalAlignment?: string;
+    horizontalAlignment?: string;
+}
+/**
+ * Returns the normalized configuration.
+ *
+ * @param options.includeAlignmentProperty Whether the "alignment" property should be added.
+ * @param options.includePaddingProperty Whether the "padding" property should be added.
+ * @param options.includeVerticalAlignmentProperty Whether the "verticalAlignment" property should be added.
+ * @param options.includeHorizontalAlignmentProperty Whether the "horizontalAlignment" property should be added.
+ * @param options.isRightToLeftContent Whether the content is right-to-left.
+ */
+export declare function getNormalizedDefaultProperties(config: Partial<NormalizedDefaultProperties> | undefined, options?: {
+    includeAlignmentProperty?: boolean;
+    includePaddingProperty?: boolean;
+    includeVerticalAlignmentProperty?: boolean;
+    includeHorizontalAlignmentProperty?: boolean;
+    isRightToLeftContent?: boolean;
+}): NormalizedDefaultProperties;

package/src/utils/table-properties.js

@@ -2,106 +2,85 @@
  * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-
-/**
- * @module table/utils/table-properties
- */
-
 import { isObject } from 'lodash-es';
-
 /**
  * Returns a string if all four values of box sides are equal.
  *
  * If a string is passed, it is treated as a single value (pass-through).
  *
- *		// Returns 'foo':
- *		getSingleValue( { top: 'foo', right: 'foo', bottom: 'foo', left: 'foo' } );
- *		getSingleValue( 'foo' );
- *
- *		// Returns undefined:
- *		getSingleValue( { top: 'foo', right: 'foo', bottom: 'bar', left: 'foo' } );
- *		getSingleValue( { top: 'foo', right: 'foo' } );
+ * ```ts
+ * // Returns 'foo':
+ * getSingleValue( { top: 'foo', right: 'foo', bottom: 'foo', left: 'foo' } );
+ * getSingleValue( 'foo' );
  *
- * @param objectOrString
- * @returns {module:engine/view/stylesmap~BoxSides|String}
+ * // Returns undefined:
+ * getSingleValue( { top: 'foo', right: 'foo', bottom: 'bar', left: 'foo' } );
+ * getSingleValue( { top: 'foo', right: 'foo' } );
+ * ```
  */
-export function getSingleValue( objectOrString ) {
-	if ( !objectOrString || !isObject( objectOrString ) ) {
-		return objectOrString;
-	}
-
-	const { top, right, bottom, left } = objectOrString;
-
-	if ( top == right && right == bottom && bottom == left ) {
-		return top;
-	}
+export function getSingleValue(objectOrString) {
+    if (!objectOrString || !isObject(objectOrString)) {
+        return objectOrString;
+    }
+    const { top, right, bottom, left } = objectOrString;
+    if (top == right && right == bottom && bottom == left) {
+        return top;
+    }
 }
-
 /**
  * Adds a unit to a value if the value is a number or a string representing a number.
  *
  * **Note**: It does nothing to non-numeric values.
  *
- *		getSingleValue( 25, 'px' );		// '25px'
- *		getSingleValue( 25, 'em' );		// '25em'
- *		getSingleValue( '25em', 'px' );	// '25em'
- *		getSingleValue( 'foo', 'px' );	// 'foo'
+ * ```ts
+ * getSingleValue( 25, 'px' ); // '25px'
+ * getSingleValue( 25, 'em' ); // '25em'
+ * getSingleValue( '25em', 'px' ); // '25em'
+ * getSingleValue( 'foo', 'px' ); // 'foo'
+ * ```
  *
- * @param {*} value
- * @param {String} defaultUnit A default unit added to a numeric value.
- * @returns {String|*}
+ * @param defaultUnit A default unit added to a numeric value.
  */
-export function addDefaultUnitToNumericValue( value, defaultUnit ) {
-	const numericValue = parseFloat( value );
-
-	if ( Number.isNaN( numericValue ) ) {
-		return value;
-	}
-
-	if ( String( numericValue ) !== String( value ) ) {
-		return value;
-	}
-
-	return `${ numericValue }${ defaultUnit }`;
+export function addDefaultUnitToNumericValue(value, defaultUnit) {
+    const numericValue = parseFloat(value);
+    if (Number.isNaN(numericValue)) {
+        return value;
+    }
+    if (String(numericValue) !== String(value)) {
+        return value;
+    }
+    return `${numericValue}${defaultUnit}`;
 }
-
 /**
  * Returns the normalized configuration.
  *
- * @param {Object} config
- * @param {Object} [options={}]
- * @param {Boolean} [options.includeAlignmentProperty=false] Whether the "alignment" property should be added.
- * @param {Boolean} [options.includePaddingProperty=false] Whether the "padding" property should be added.
- * @param {Boolean} [options.includeVerticalAlignmentProperty=false] Whether the "verticalAlignment" property should be added.
- * @param {Boolean} [options.includeHorizontalAlignmentProperty=false] Whether the "horizontalAlignment" property should be added.
- * @param {Boolean} [options.isRightToLeftContent=false] Whether the content is right-to-left.
- * @returns {Object}
+ * @param options.includeAlignmentProperty Whether the "alignment" property should be added.
+ * @param options.includePaddingProperty Whether the "padding" property should be added.
+ * @param options.includeVerticalAlignmentProperty Whether the "verticalAlignment" property should be added.
+ * @param options.includeHorizontalAlignmentProperty Whether the "horizontalAlignment" property should be added.
+ * @param options.isRightToLeftContent Whether the content is right-to-left.
  */
-export function getNormalizedDefaultProperties( config, options = {} ) {
-	const normalizedConfig = Object.assign( {
-		borderStyle: 'none',
-		borderWidth: '',
-		borderColor: '',
-		backgroundColor: '',
-		width: '',
-		height: ''
-	}, config );
-
-	if ( options.includeAlignmentProperty && !normalizedConfig.alignment ) {
-		normalizedConfig.alignment = 'center';
-	}
-
-	if ( options.includePaddingProperty && !normalizedConfig.padding ) {
-		normalizedConfig.padding = '';
-	}
-
-	if ( options.includeVerticalAlignmentProperty && !normalizedConfig.verticalAlignment ) {
-		normalizedConfig.verticalAlignment = 'middle';
-	}
-
-	if ( options.includeHorizontalAlignmentProperty && !normalizedConfig.horizontalAlignment ) {
-		normalizedConfig.horizontalAlignment = options.isRightToLeftContent ? 'right' : 'left';
-	}
-
-	return normalizedConfig;
+export function getNormalizedDefaultProperties(config, options = {}) {
+    const normalizedConfig = {
+        borderStyle: 'none',
+        borderWidth: '',
+        borderColor: '',
+        backgroundColor: '',
+        width: '',
+        height: '',
+        ...config
+    };
+    if (options.includeAlignmentProperty && !normalizedConfig.alignment) {
+        normalizedConfig.alignment = 'center';
+    }
+    if (options.includePaddingProperty && !normalizedConfig.padding) {
+        normalizedConfig.padding = '';
+    }
+    if (options.includeVerticalAlignmentProperty && !normalizedConfig.verticalAlignment) {
+        normalizedConfig.verticalAlignment = 'middle';
+    }
+    if (options.includeHorizontalAlignmentProperty && !normalizedConfig.horizontalAlignment) {
+        normalizedConfig.horizontalAlignment = options.isRightToLeftContent ? 'right' : 'left';
+    }
+    return normalizedConfig;
 }

package/src/utils/ui/contextualballoon.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module table/utils/ui/contextualballoon
+ */
+import { type PositionOptions } from 'ckeditor5/src/utils';
+import type { Editor } from 'ckeditor5/src/core';
+/**
+ * A helper utility that positions the
+ * {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon} instance
+ * with respect to the table in the editor content, if one is selected.
+ *
+ * @param editor The editor instance.
+ * @param target Either "cell" or "table". Determines the target the balloon will be attached to.
+ */
+export declare function repositionContextualBalloon(editor: Editor, target: string): void;
+/**
+ * Returns the positioning options that control the geometry of the
+ * {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon} with respect
+ * to the selected table in the editor content.
+ *
+ * @param editor The editor instance.
+ */
+export declare function getBalloonTablePositionData(editor: Editor): Partial<PositionOptions>;
+/**
+ * Returns the positioning options that control the geometry of the
+ * {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon} with respect
+ * to the selected table cell in the editor content.
+ *
+ * @param editor The editor instance.
+ */
+export declare function getBalloonCellPositionData(editor: Editor): Partial<PositionOptions>;

package/src/utils/ui/contextualballoon.js

@@ -2,124 +2,105 @@
  * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-
 /**
  * @module table/utils/ui/contextualballoon
  */
-
 import { Rect } from 'ckeditor5/src/utils';
 import { BalloonPanelView } from 'ckeditor5/src/ui';
-
 import { getTableWidgetAncestor } from './widget';
-
 const DEFAULT_BALLOON_POSITIONS = BalloonPanelView.defaultPositions;
-
 const BALLOON_POSITIONS = [
-	DEFAULT_BALLOON_POSITIONS.northArrowSouth,
-	DEFAULT_BALLOON_POSITIONS.northArrowSouthWest,
-	DEFAULT_BALLOON_POSITIONS.northArrowSouthEast,
-	DEFAULT_BALLOON_POSITIONS.southArrowNorth,
-	DEFAULT_BALLOON_POSITIONS.southArrowNorthWest,
-	DEFAULT_BALLOON_POSITIONS.southArrowNorthEast,
-	DEFAULT_BALLOON_POSITIONS.viewportStickyNorth
+    DEFAULT_BALLOON_POSITIONS.northArrowSouth,
+    DEFAULT_BALLOON_POSITIONS.northArrowSouthWest,
+    DEFAULT_BALLOON_POSITIONS.northArrowSouthEast,
+    DEFAULT_BALLOON_POSITIONS.southArrowNorth,
+    DEFAULT_BALLOON_POSITIONS.southArrowNorthWest,
+    DEFAULT_BALLOON_POSITIONS.southArrowNorthEast,
+    DEFAULT_BALLOON_POSITIONS.viewportStickyNorth
 ];
-
 /**
  * A helper utility that positions the
  * {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon} instance
  * with respect to the table in the editor content, if one is selected.
  *
- * @param {module:core/editor/editor~Editor} editor The editor instance.
- * @param {String} target Either "cell" or "table". Determines the target the balloon will
- * be attached to.
+ * @param editor The editor instance.
+ * @param target Either "cell" or "table". Determines the target the balloon will be attached to.
  */
-export function repositionContextualBalloon( editor, target ) {
-	const balloon = editor.plugins.get( 'ContextualBalloon' );
-
-	if ( getTableWidgetAncestor( editor.editing.view.document.selection ) ) {
-		let position;
-
-		if ( target === 'cell' ) {
-			position = getBalloonCellPositionData( editor );
-		} else {
-			position = getBalloonTablePositionData( editor );
-		}
-
-		balloon.updatePosition( position );
-	}
+export function repositionContextualBalloon(editor, target) {
+    const balloon = editor.plugins.get('ContextualBalloon');
+    if (getTableWidgetAncestor(editor.editing.view.document.selection)) {
+        let position;
+        if (target === 'cell') {
+            position = getBalloonCellPositionData(editor);
+        }
+        else {
+            position = getBalloonTablePositionData(editor);
+        }
+        balloon.updatePosition(position);
+    }
 }
-
 /**
  * Returns the positioning options that control the geometry of the
  * {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon} with respect
  * to the selected table in the editor content.
  *
- * @param {module:core/editor/editor~Editor} editor The editor instance.
- * @returns {module:utils/dom/position~Options}
+ * @param editor The editor instance.
  */
-export function getBalloonTablePositionData( editor ) {
-	const firstPosition = editor.model.document.selection.getFirstPosition();
-	const modelTable = firstPosition.findAncestor( 'table' );
-	const viewTable = editor.editing.mapper.toViewElement( modelTable );
-
-	return {
-		target: editor.editing.view.domConverter.mapViewToDom( viewTable ),
-		positions: BALLOON_POSITIONS
-	};
+export function getBalloonTablePositionData(editor) {
+    const firstPosition = editor.model.document.selection.getFirstPosition();
+    const modelTable = firstPosition.findAncestor('table');
+    const viewTable = editor.editing.mapper.toViewElement(modelTable);
+    return {
+        target: editor.editing.view.domConverter.mapViewToDom(viewTable),
+        positions: BALLOON_POSITIONS
+    };
 }
-
 /**
  * Returns the positioning options that control the geometry of the
  * {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon} with respect
  * to the selected table cell in the editor content.
  *
- * @param {module:core/editor/editor~Editor} editor The editor instance.
- * @returns {module:utils/dom/position~Options}
+ * @param editor The editor instance.
  */
-export function getBalloonCellPositionData( editor ) {
-	const mapper = editor.editing.mapper;
-	const domConverter = editor.editing.view.domConverter;
-	const selection = editor.model.document.selection;
-
-	if ( selection.rangeCount > 1 ) {
-		return {
-			target: () => createBoundingRect( selection.getRanges(), editor ),
-			positions: BALLOON_POSITIONS
-		};
-	}
-
-	const modelTableCell = getTableCellAtPosition( selection.getFirstPosition() );
-	const viewTableCell = mapper.toViewElement( modelTableCell );
-
-	return {
-		target: domConverter.mapViewToDom( viewTableCell ),
-		positions: BALLOON_POSITIONS
-	};
+export function getBalloonCellPositionData(editor) {
+    const mapper = editor.editing.mapper;
+    const domConverter = editor.editing.view.domConverter;
+    const selection = editor.model.document.selection;
+    if (selection.rangeCount > 1) {
+        return {
+            target: () => createBoundingRect(selection.getRanges(), editor),
+            positions: BALLOON_POSITIONS
+        };
+    }
+    const modelTableCell = getTableCellAtPosition(selection.getFirstPosition());
+    const viewTableCell = mapper.toViewElement(modelTableCell);
+    return {
+        target: domConverter.mapViewToDom(viewTableCell),
+        positions: BALLOON_POSITIONS
+    };
 }
-
-// Returns the first selected table cell from a multi-cell or in-cell selection.
-//
-// @param {module:engine/model/position~Position} position Document position.
-// @returns {module:engine/model/element~Element}
-function getTableCellAtPosition( position ) {
-	const isTableCellSelected = position.nodeAfter && position.nodeAfter.is( 'element', 'tableCell' );
-
-	return isTableCellSelected ? position.nodeAfter : position.findAncestor( 'tableCell' );
+/**
+ * Returns the first selected table cell from a multi-cell or in-cell selection.
+ *
+ * @param position Document position.
+ */
+function getTableCellAtPosition(position) {
+    const isTableCellSelected = position.nodeAfter && position.nodeAfter.is('element', 'tableCell');
+    return isTableCellSelected ? position.nodeAfter : position.findAncestor('tableCell');
 }
-
-// Returns bounding rectangle for given model ranges.
-//
-// @param {Iterable.<module:engine/model/range~Range>} ranges Model ranges that the bounding rect should be returned for.
-// @param {module:core/editor/editor~Editor} editor The editor instance.
-// @returns {module:utils/dom/rect~Rect}
-function createBoundingRect( ranges, editor ) {
-	const mapper = editor.editing.mapper;
-	const domConverter = editor.editing.view.domConverter;
-	const rects = Array.from( ranges ).map( range => {
-		const modelTableCell = getTableCellAtPosition( range.start );
-		const viewTableCell = mapper.toViewElement( modelTableCell );
-		return new Rect( domConverter.mapViewToDom( viewTableCell ) );
-	} );
-
-	return Rect.getBoundingRect( rects );
+/**
+ * Returns bounding rectangle for given model ranges.
+ *
+ * @param ranges Model ranges that the bounding rect should be returned for.
+ * @param editor The editor instance.
+ */
+function createBoundingRect(ranges, editor) {
+    const mapper = editor.editing.mapper;
+    const domConverter = editor.editing.view.domConverter;
+    const rects = Array.from(ranges).map(range => {
+        const modelTableCell = getTableCellAtPosition(range.start);
+        const viewTableCell = mapper.toViewElement(modelTableCell);
+        return new Rect(domConverter.mapViewToDom(viewTableCell));
+    });
+    return Rect.getBoundingRect(rects);
 }

package/src/utils/ui/table-properties.d.ts

@@ -0,0 +1,193 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module table/utils/ui/table-properties
+ */
+import { type ColorOption, type LabeledFieldView, type ListDropdownItemDefinition, type NormalizedColorOption, type ToolbarView, type View } from 'ckeditor5/src/ui';
+import { Collection, type LocaleTranslate } from 'ckeditor5/src/utils';
+import type TableCellPropertiesView from '../../tablecellproperties/ui/tablecellpropertiesview';
+import type TablePropertiesView from '../../tableproperties/ui/tablepropertiesview';
+import ColorInputView from '../../ui/colorinputview';
+/**
+ * Returns an object containing pairs of CSS border style values and their localized UI
+ * labels. Used by {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView}
+ * and {@link module:table/tableproperties/ui/tablepropertiesview~TablePropertiesView}.
+ *
+ * @param t The "t" function provided by the editor that is used to localize strings.
+ */
+export declare function getBorderStyleLabels(t: LocaleTranslate): Record<string, string>;
+/**
+ * Returns a localized error string that can be displayed next to color (background, border)
+ * fields that have an invalid value.
+ *
+ * @param t The "t" function provided by the editor that is used to localize strings.
+ */
+export declare function getLocalizedColorErrorText(t: LocaleTranslate): string;
+/**
+ * Returns a localized error string that can be displayed next to length (padding, border width)
+ * fields that have an invalid value.
+ *
+ * @param t The "t" function provided by the editor that is used to localize strings.
+ */
+export declare function getLocalizedLengthErrorText(t: LocaleTranslate): string;
+/**
+ * Returns `true` when the passed value is an empty string or a valid CSS color expression.
+ * Otherwise, `false` is returned.
+ *
+ * See {@link module:engine/view/styles/utils~isColor}.
+ */
+export declare function colorFieldValidator(value: string): boolean;
+/**
+ * Returns `true` when the passed value is an empty string, a number without a unit or a valid CSS length expression.
+ * Otherwise, `false` is returned.
+ *
+ * See {@link module:engine/view/styles/utils~isLength}.
+ * See {@link module:engine/view/styles/utils~isPercentage}.
+ */
+export declare function lengthFieldValidator(value: string): boolean;
+/**
+ * Returns `true` when the passed value is an empty string, a number without a unit or a valid CSS length expression.
+ * Otherwise, `false` is returned.
+ *
+ * See {@link module:engine/view/styles/utils~isLength}.
+ */
+export declare function lineWidthFieldValidator(value: string): boolean;
+/**
+ * Generates item definitions for a UI dropdown that allows changing the border style of a table or a table cell.
+ *
+ * @param defaultStyle The default border.
+ */
+export declare function getBorderStyleDefinitions(view: TableCellPropertiesView | TablePropertiesView, defaultStyle: string): Collection<ListDropdownItemDefinition>;
+/**
+ * A helper that fills a toolbar with buttons that:
+ *
+ * * have some labels,
+ * * have some icons,
+ * * set a certain UI view property value upon execution.
+ *
+ * @param nameToValue A function that maps a button name to a value. By default names are the same as values.
+ */
+export declare function fillToolbar<TView extends View, TPropertyName extends keyof TView>(options: {
+    view: TView;
+    icons: Record<string, string>;
+    toolbar: ToolbarView;
+    labels: Record<number, string>;
+    propertyName: TPropertyName;
+    nameToValue?: (name: string) => string;
+    defaultValue?: string;
+}): void;
+/**
+ * A default color palette used by various user interfaces related to tables, for instance,
+ * by {@link module:table/tablecellproperties/tablecellpropertiesui~TableCellPropertiesUI} or
+ * {@link module:table/tableproperties/tablepropertiesui~TablePropertiesUI}.
+ *
+ * The color palette follows the {@link module:table/tableconfig~TableColorConfig table color configuration format}
+ * and contains the following color definitions:
+ *
+ * ```ts
+ * const defaultColors = [
+ *   {
+ *     color: 'hsl(0, 0%, 0%)',
+ *     label: 'Black'
+ *   },
+ *   {
+ *     color: 'hsl(0, 0%, 30%)',
+ *     label: 'Dim grey'
+ *   },
+ *   {
+ *     color: 'hsl(0, 0%, 60%)',
+ *     label: 'Grey'
+ *   },
+ *   {
+ *     color: 'hsl(0, 0%, 90%)',
+ *     label: 'Light grey'
+ *   },
+ *   {
+ *     color: 'hsl(0, 0%, 100%)',
+ *     label: 'White',
+ *     hasBorder: true
+ *   },
+ *   {
+ *     color: 'hsl(0, 75%, 60%)',
+ *     label: 'Red'
+ *   },
+ *   {
+ *     color: 'hsl(30, 75%, 60%)',
+ *     label: 'Orange'
+ *   },
+ *   {
+ *     color: 'hsl(60, 75%, 60%)',
+ *     label: 'Yellow'
+ *   },
+ *   {
+ *     color: 'hsl(90, 75%, 60%)',
+ *     label: 'Light green'
+ *   },
+ *   {
+ *     color: 'hsl(120, 75%, 60%)',
+ *     label: 'Green'
+ *   },
+ *   {
+ *     color: 'hsl(150, 75%, 60%)',
+ *     label: 'Aquamarine'
+ *   },
+ *   {
+ *     color: 'hsl(180, 75%, 60%)',
+ *     label: 'Turquoise'
+ *   },
+ *   {
+ *     color: 'hsl(210, 75%, 60%)',
+ *     label: 'Light blue'
+ *   },
+ *   {
+ *     color: 'hsl(240, 75%, 60%)',
+ *     label: 'Blue'
+ *   },
+ *   {
+ *     color: 'hsl(270, 75%, 60%)',
+ *     label: 'Purple'
+ *   }
+ * ];
+ * ```
+ */
+export declare const defaultColors: Array<ColorOption>;
+/**
+ * Returns a creator for a color input with a label.
+ *
+ * For given options, it returns a function that creates an instance of a
+ * {@link module:table/ui/colorinputview~ColorInputView color input} logically related to
+ * a {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView labeled view} in the DOM.
+ *
+ * The helper does the following:
+ *
+ * * It sets the color input `id` and `ariaDescribedById` attributes.
+ * * It binds the color input `isReadOnly` to the labeled view.
+ * * It binds the color input `hasError` to the labeled view.
+ * * It enables a logic that cleans up the error when the user starts typing in the color input.
+ *
+ * Usage:
+ *
+ * ```ts
+ * const colorInputCreator = getLabeledColorInputCreator( {
+ *   colorConfig: [ ... ],
+ *   columns: 3,
+ * } );
+ *
+ * const labeledInputView = new LabeledFieldView( locale, colorInputCreator );
+ * console.log( labeledInputView.view ); // A color input instance.
+ * ```
+ *
+ * @internal
+ * @param options Color input options.
+ * @param options.colorConfig The configuration of the color palette displayed in the input's dropdown.
+ * @param options.columns The configuration of the number of columns the color palette consists of in the input's dropdown.
+ * @param options.defaultColorValue If specified, the color input view will replace the "Remove color" button with
+ * the "Restore default" button. Instead of clearing the input field, the default color value will be set.
+ */
+export declare function getLabeledColorInputCreator(options: {
+    colorConfig: Array<NormalizedColorOption>;
+    columns: number;
+    defaultColorValue?: string;
+}): (labeledFieldView: LabeledFieldView, viewUid: string, statusUid: string) => ColorInputView;