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 table/utils/ui/table-properties
|
7 | */
|
8 | import { type ColorOption, type LabeledFieldView, type ListDropdownItemDefinition, type NormalizedColorOption, type ToolbarView, type View } from 'ckeditor5/src/ui';
|
9 | import { Collection, type LocaleTranslate } from 'ckeditor5/src/utils';
|
10 | import type TableCellPropertiesView from '../../tablecellproperties/ui/tablecellpropertiesview';
|
11 | import type TablePropertiesView from '../../tableproperties/ui/tablepropertiesview';
|
12 | import ColorInputView from '../../ui/colorinputview';
|
13 | /**
|
14 | * Returns an object containing pairs of CSS border style values and their localized UI
|
15 | * labels. Used by {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView}
|
16 | * and {@link module:table/tableproperties/ui/tablepropertiesview~TablePropertiesView}.
|
17 | *
|
18 | * @param t The "t" function provided by the editor that is used to localize strings.
|
19 | */
|
20 | export declare function getBorderStyleLabels(t: LocaleTranslate): Record<string, string>;
|
21 | /**
|
22 | * Returns a localized error string that can be displayed next to color (background, border)
|
23 | * fields that have an invalid value.
|
24 | *
|
25 | * @param t The "t" function provided by the editor that is used to localize strings.
|
26 | */
|
27 | export declare function getLocalizedColorErrorText(t: LocaleTranslate): string;
|
28 | /**
|
29 | * Returns a localized error string that can be displayed next to length (padding, border width)
|
30 | * fields that have an invalid value.
|
31 | *
|
32 | * @param t The "t" function provided by the editor that is used to localize strings.
|
33 | */
|
34 | export declare function getLocalizedLengthErrorText(t: LocaleTranslate): string;
|
35 | /**
|
36 | * Returns `true` when the passed value is an empty string or a valid CSS color expression.
|
37 | * Otherwise, `false` is returned.
|
38 | *
|
39 | * See {@link module:engine/view/styles/utils~isColor}.
|
40 | */
|
41 | export declare function colorFieldValidator(value: string): boolean;
|
42 | /**
|
43 | * Returns `true` when the passed value is an empty string, a number without a unit or a valid CSS length expression.
|
44 | * Otherwise, `false` is returned.
|
45 | *
|
46 | * See {@link module:engine/view/styles/utils~isLength}.
|
47 | * See {@link module:engine/view/styles/utils~isPercentage}.
|
48 | */
|
49 | export declare function lengthFieldValidator(value: string): boolean;
|
50 | /**
|
51 | * Returns `true` when the passed value is an empty string, a number without a unit or a valid CSS length expression.
|
52 | * Otherwise, `false` is returned.
|
53 | *
|
54 | * See {@link module:engine/view/styles/utils~isLength}.
|
55 | */
|
56 | export declare function lineWidthFieldValidator(value: string): boolean;
|
57 | /**
|
58 | * Generates item definitions for a UI dropdown that allows changing the border style of a table or a table cell.
|
59 | *
|
60 | * @param defaultStyle The default border.
|
61 | */
|
62 | export declare function getBorderStyleDefinitions(view: TableCellPropertiesView | TablePropertiesView, defaultStyle: string): Collection<ListDropdownItemDefinition>;
|
63 | /**
|
64 | * A helper that fills a toolbar with buttons that:
|
65 | *
|
66 | * * have some labels,
|
67 | * * have some icons,
|
68 | * * set a certain UI view property value upon execution.
|
69 | *
|
70 | * @param nameToValue A function that maps a button name to a value. By default names are the same as values.
|
71 | */
|
72 | export declare function fillToolbar<TView extends View, TPropertyName extends keyof TView>(options: {
|
73 | view: TView;
|
74 | icons: Record<string, string>;
|
75 | toolbar: ToolbarView;
|
76 | labels: Record<number, string>;
|
77 | propertyName: TPropertyName;
|
78 | nameToValue?: (name: string) => string;
|
79 | defaultValue?: string;
|
80 | }): void;
|
81 | /**
|
82 | * A default color palette used by various user interfaces related to tables, for instance,
|
83 | * by {@link module:table/tablecellproperties/tablecellpropertiesui~TableCellPropertiesUI} or
|
84 | * {@link module:table/tableproperties/tablepropertiesui~TablePropertiesUI}.
|
85 | *
|
86 | * The color palette follows the {@link module:table/tableconfig~TableColorConfig table color configuration format}
|
87 | * and contains the following color definitions:
|
88 | *
|
89 | * ```ts
|
90 | * const defaultColors = [
|
91 | * {
|
92 | * color: 'hsl(0, 0%, 0%)',
|
93 | * label: 'Black'
|
94 | * },
|
95 | * {
|
96 | * color: 'hsl(0, 0%, 30%)',
|
97 | * label: 'Dim grey'
|
98 | * },
|
99 | * {
|
100 | * color: 'hsl(0, 0%, 60%)',
|
101 | * label: 'Grey'
|
102 | * },
|
103 | * {
|
104 | * color: 'hsl(0, 0%, 90%)',
|
105 | * label: 'Light grey'
|
106 | * },
|
107 | * {
|
108 | * color: 'hsl(0, 0%, 100%)',
|
109 | * label: 'White',
|
110 | * hasBorder: true
|
111 | * },
|
112 | * {
|
113 | * color: 'hsl(0, 75%, 60%)',
|
114 | * label: 'Red'
|
115 | * },
|
116 | * {
|
117 | * color: 'hsl(30, 75%, 60%)',
|
118 | * label: 'Orange'
|
119 | * },
|
120 | * {
|
121 | * color: 'hsl(60, 75%, 60%)',
|
122 | * label: 'Yellow'
|
123 | * },
|
124 | * {
|
125 | * color: 'hsl(90, 75%, 60%)',
|
126 | * label: 'Light green'
|
127 | * },
|
128 | * {
|
129 | * color: 'hsl(120, 75%, 60%)',
|
130 | * label: 'Green'
|
131 | * },
|
132 | * {
|
133 | * color: 'hsl(150, 75%, 60%)',
|
134 | * label: 'Aquamarine'
|
135 | * },
|
136 | * {
|
137 | * color: 'hsl(180, 75%, 60%)',
|
138 | * label: 'Turquoise'
|
139 | * },
|
140 | * {
|
141 | * color: 'hsl(210, 75%, 60%)',
|
142 | * label: 'Light blue'
|
143 | * },
|
144 | * {
|
145 | * color: 'hsl(240, 75%, 60%)',
|
146 | * label: 'Blue'
|
147 | * },
|
148 | * {
|
149 | * color: 'hsl(270, 75%, 60%)',
|
150 | * label: 'Purple'
|
151 | * }
|
152 | * ];
|
153 | * ```
|
154 | */
|
155 | export declare const defaultColors: Array<ColorOption>;
|
156 | /**
|
157 | * Returns a creator for a color input with a label.
|
158 | *
|
159 | * For given options, it returns a function that creates an instance of a
|
160 | * {@link module:table/ui/colorinputview~ColorInputView color input} logically related to
|
161 | * a {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView labeled view} in the DOM.
|
162 | *
|
163 | * The helper does the following:
|
164 | *
|
165 | * * It sets the color input `id` and `ariaDescribedById` attributes.
|
166 | * * It binds the color input `isReadOnly` to the labeled view.
|
167 | * * It binds the color input `hasError` to the labeled view.
|
168 | * * It enables a logic that cleans up the error when the user starts typing in the color input.
|
169 | *
|
170 | * Usage:
|
171 | *
|
172 | * ```ts
|
173 | * const colorInputCreator = getLabeledColorInputCreator( {
|
174 | * colorConfig: [ ... ],
|
175 | * columns: 3,
|
176 | * } );
|
177 | *
|
178 | * const labeledInputView = new LabeledFieldView( locale, colorInputCreator );
|
179 | * console.log( labeledInputView.view ); // A color input instance.
|
180 | * ```
|
181 | *
|
182 | * @internal
|
183 | * @param options Color input options.
|
184 | * @param options.colorConfig The configuration of the color palette displayed in the input's dropdown.
|
185 | * @param options.columns The configuration of the number of columns the color palette consists of in the input's dropdown.
|
186 | * @param options.defaultColorValue If specified, the color input view will replace the "Remove color" button with
|
187 | * the "Restore default" button. Instead of clearing the input field, the default color value will be set.
|
188 | */
|
189 | export declare function getLabeledColorInputCreator(options: {
|
190 | colorConfig: Array<NormalizedColorOption>;
|
191 | columns: number;
|
192 | defaultColorValue?: string;
|
193 | }): (labeledFieldView: LabeledFieldView, viewUid: string, statusUid: string) => ColorInputView;
|