@aurigma/design-editor-iframe
Version:
Using this module you can embed Design Editor (a part of Customer's Canvas) to your page through the IFrame API.
271 lines (270 loc) • 10.4 kB
TypeScript
import { ColorSpace } from "./../../Configuration/ConfigurationTypes";
/** @internal */
export declare namespace IColorPickerConfigParsed {
const injectName = "$cc.IColorPickerConfigParsed";
}
/** @internal */
export interface IColorPickerConfigParsed {
/** If `true`, shows the predefined palettes and hides the color field in the Color picker. If `false`, shows both the predefined palettes and the field. The default value is `false`. */
showPaletteOnly: boolean;
/** Defines the color space which the user can select a swatch from. The default value is `"rgb"`. */
colorSpace: ColorSpace.ColorSpaceType;
/** A set of predefined palettes. */
sections: IColorPickerConfigSection[];
/** If `true`, allows users to collapse the sections of predefined palettes when they click headers of these sections in the Color picker. The default value is `false`. */
sectionCollapseEnabled: boolean;
/** If `true`, displays the hints. The default value is `false`. */
paletteHintsEnabled: boolean;
}
/**
* Sections of the predefined colors in the Color picker.
* @public
*/
export declare enum SectionType {
/** A {@link IPaletteSection|predefined set} of color swatches. */
PaletteSection = "PaletteSection",
/** A set of {@link IRecentSection|recently selected} colors. */
RecentSection = "RecentSection",
/** A set of {@link IThemeSection|theme colors} defined for a product. */
ThemeSection = "ThemeSection",
/** The {@link INoColorSection|"NoColor"} section. */
NoColorSection = "NoColorSection"
}
/**
* Targets for color sections of Color picker.
* @remarks This enum contains all properties that can be colored. You can configure a color picker in a {@link INoColorSection|special way} for each of these targets.
* @public
*/
export declare enum ColorPickerTarget {
/** The background color. */
Background = "Background",
/** The fill color. */
Fill = "Fill",
/** The border color. */
Border = "Border",
/** The color of plain text. */
Text = "Text",
/** The color of rich formatted text. */
RichText = "RichText",
/** The shadow color. */
Shadow = "Shadow",
/** The stroke color. */
Stroke = "Stroke",
/** The color of lines. */
Line = "Line",
/** All item properties for which you can specify a color. */
All = "All"
}
/**
* A structure defining basic properties of Color picker sections.
* @remarks See the {@link https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/color-picker.html|Color picker} topic for more details.
* @example
* ```js
* configuration = {
* widgets: {
* ColorPicker: {
* colorSpace: "rgb",
* sections: [
* {
* type: "NoColorSection",
* targets: [ "Fill", "Border", "Background" ]
* },
* {
* type: "RecentSection",
* translationKey: "ColorPicker.RECENT_SECTION_NAME"
* },
* {
* type: "PaletteSection",
* translationKey: "Swatches",
* viewType: "Line",
* palette: [["rgb(0, 0, 0)","rgb(255, 255, 255)"],
* ["rgb(255, 0, 0)","rgb(255, 255, 0)","rgb(0, 255, 0)","rgb(0, 255, 255)","rgb(0, 0, 255)","rgb(255, 0, 255)"]]
* }
* ]
* }
* }
* };
* ```
* @public
*/
export interface IColorPickerConfigSection {
/** The section name. You can use either a string or an identifier of a string defined in the `~/Configuration/translations.json` file. */
translationKey: string;
/** The appearance of the section, either `"Block"` or `"Line"`. The default value is `"Block"`. */
viewType: ColorPickerSectionViewType;
/** The color section type, one of {@link INoColorSection|"NoColorSection"}, {@link IRecentSection|"RecentSection"}, {@link IThemeSection|"ThemeSection"}, or {@link IPaletteSection|"PaletteSection"}. */
type: SectionType;
/** An item property that you can specify a color for. The default value is `["All"]`. */
targets: ColorPickerTarget[];
}
/**
* A structure defining the section of swatches in the Color picker.
* @remarks See the {@link https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/color-picker.html|Color picker} topic for more details.
* @example
* ```js
* let configuration = {
* widgets: {
* ColorPicker: {
* sections: [
* {
* type: "PaletteSection",
* translationKey: "Swatches",
* viewType: "Line",
* palette: [["spot(PANTONE 8783 C, cmyk(100%,55%,0%,55%,100%), 1, 100%)",
* "cmyk(0%, 0%, 100%, 0%, 100%)"]]
* }
* ]
* }
* }
* };
* ```
* @public
*/
export interface IPaletteSection extends IColorPickerConfigSection {
/** The source type, `"PaletteSection"`. */
type: SectionType;
/** Palettes to show in the Color picker; a palette is described by the two-dimensional array of colors in a css-compatible format. The default value is [["cmyk(0%,100%,100%,0%,100%)","cmyk(0%,0%,100%,0%,100%)",...],...]. */
palette: string[][];
}
/**
* A structure defining the section of recently selected colors in the Color picker.
* @remarks See the {@link https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/color-picker.html|Color picker} topic for more details.
* @example
* ```js
* let configuration = {
* widgets: {
* ColorPicker: {
* sections: [
* {
* type: "RecentSection"
* }
* ]
* }
* }
* };
* ```
* @public
*/
export interface IRecentSection extends IColorPickerConfigSection {
/** The source type, `"RecentSection"`. */
type: SectionType.RecentSection;
}
/**
* A structure defining the section of theme colors in the Color picker.
* @remarks See the {@link https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/color-picker.html|Color picker} topic for more details.
* @example
* ```js
* let colorSets = {
* "violetSet": {
* "main": "rgb(102,45,145)",
* "alternative": "rgb(150,67,214)",
* "borders": "rgb(190,107,255)",
* "texts": "rgb(32,18,77)",
* "shadows": "rgb(123,123,123)"
* },
* "roseSet": {
* "main": "rgb(241,160,175)",
* "alternative": "rgb(255,200,214)",
* "borders": "rgb(255,255,255)",
* "texts": "rgb(224,102,102)",
* "shadows": "rgb(88,88,88)"
* },
* };
* let configuration = {
* productThemes: colorSets,
* defaultProductTheme: "roseSet",
* widgets: {
* ColorPicker: {
* sections: [
* {
* type: "ThemeSection"
* }
* ]
* }
* }
* };
* ```
* @public
*/
export interface IThemeSection extends IColorPickerConfigSection {
/** The source type, `"ThemeSection"`. */
type: SectionType.ThemeSection;
}
/**
* A structure defining the `No Color` section in the Color picker.
* @remarks By default, this section appears when the user selects a fill color, a background color, or a color for the bounding rectangle. For more detals, see the {@link https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/color-picker.html|Color picker} topic.
* @example
* ```js
* let configuration = {
* widgets: {
* ColorPicker: {
* sections: [
* {
* type: "NoColorSection",
* targets: [ "Fill", "Border", "Background" ]
* }
* ]
* }
* }
* };
* ```
* @public
*/
export interface INoColorSection extends IColorPickerConfigSection {
/** The source type, `"NoColorSection"`. */
type: SectionType.NoColorSection;
}
/**
* The appearance of the Color picker sections.
* @public
*/
export declare enum ColorPickerSectionViewType {
/** Displays a palette as a block of color swatches. */
Block = "Block",
/** Displays a palette as a list of color swatches and their names. */
Line = "Line"
}
/**
* A structure defining the Color picker.
* @remarks See the {@link https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/color-picker.html|Color picker} topic for more details.
* @example
* ```js
* configuration = {
* widgets: {
* ColorPicker: {
* colorSpace: "rgb",
* sections: [
* {
* type: "NoColorSection",
* targets: [ "Fill", "Border", "Background" ]
* },
* {
* type: "RecentSection",
* translationKey: "ColorPicker.RECENT_SECTION_NAME"
* },
* {
* type: "PaletteSection",
* translationKey: "Swatches",
* viewType: "Line",
* palette: [["rgb(0, 0, 0)","rgb(255, 255, 255)"],
* ["rgb(255, 0, 0)","rgb(255, 255, 0)","rgb(0, 255, 0)","rgb(0, 255, 255)","rgb(0, 0, 255)","rgb(255, 0, 255)"]]
* }
* ]
* }
* }
* };
* ```
* @public
*/
export interface IColorPickerConfig {
/** If `true`, shows the predefined palettes and hides the color field in the Color picker. If `false`, shows both the predefined palettes and the field. The default value is `false`. */
showPaletteOnly?: boolean;
/** Defines the color space which the user can select a swatch from. The default value is `"rgb"`. */
colorSpace?: ColorSpace.ColorSpaceType;
/** A set of predefined palettes. */
sections?: IColorPickerConfigSection[];
/** If `true`, allows users to collapse the sections of predefined palettes when they click headers of these sections in the Color picker. The default value is `false`. */
sectionCollapseEnabled?: boolean;
/** If `true`, displays the hints. The default value is `false`. */
paletteHintsEnabled?: boolean;
}