@aurigma/design-atoms-interfaces 0.0.6

package/Types/ItemData/IArchedTextItemData.d.ts

@@ -0,0 +1,32 @@
+import { IBaseTextItemData } from "./IBaseTextItemData";
+/**
+* A structure defining the default parameters of arched text.
+* @remarks You can apply these parameters to the `archedText` object through either **clientConfig.json** or {@link https://customerscanvas.com/dev/editors/iframe-api/reference/design-editor-iframe/iconfiguration.html|IConfiguration}.
+* @example
+* ```json
+* {
+*    "defaultItemsConfig": {
+*        "archedText": {
+*            "font": {
+*                "postScriptName": "Roboto-Regular",
+*                "size": 24
+*            },
+*            "text": "Arched text",
+*            "color": "cmyk(0%, 0%, 0%, 100%, 100%)",
+*            "bend": 0.7,
+*            "location": {
+*                "x": "50%",
+*                "y": "50%",
+*                "originX": "center",
+*                "originY": "center"
+*            }
+*        }
+*    }
+* }
+* ```
+* @public
+*/
+export interface IArchedTextItemData<TTextAlignment, TStrokeSettings, TShadowSettings> extends IBaseTextItemData<TTextAlignment, TStrokeSettings, TShadowSettings> {
+    bend?: number;
+    warp?: boolean;
+}

package/Types/ItemData/IArchedTextItemData.js

@@ -0,0 +1 @@
+export {};

package/Types/ItemData/IBarcodeItemData.d.ts

@@ -0,0 +1,60 @@
+import { BarcodeContentType } from "./BarcodeContentType";
+import { IBarcodeOptions } from "./IBarcodeOptions";
+import { IBarcodePermissionsData } from "./IBarcodePermissionsData";
+import { IImageItemData } from "./IImageItemData";
+/**
+* A structure defining the default parameters of barcodes.
+* @example The following example illustrates how you can enable two buttons in the Toolbox: the first one opens the standard **QrCode** dialog box, while the second custom button adds a predefined QR code to the canvas.
+* ```json
+* {
+*    "widgets": {
+*        "Toolbox": {
+*            "buttons": [
+*                "QrCode",
+*                {
+*                    "action": "CustomBarcode",
+*                    "iconClass": "cc-icon-qr-code",
+*                    "itemConfig": {
+*                        "barcodeContent": {
+*                            "barcodeFormat": "QrUrl",
+*                            "url": "example.com"
+*                        },
+*                        "name": "Custom barcode",
+*                        "color": "rgb(255,0,0)",
+*                        "width": "100",
+*                        "location": {
+*                            "originX": "left",
+*                            "originY": "bottom",
+*                            "x": "0%",
+*                            "y": "100%"
+*                        },
+*                        "barcodeOptions": {
+*                            "margin": 0
+*                        },
+*                        "manipulationPermissions": {
+*                            "allowMoveHorizontal": false,
+*                            "allowMoveVertical": false,
+*                            "resizeGrips": {
+*                                "edge": false,
+*                                "corner": []
+*                            }
+*                        }
+*                    }
+*                }
+*            ]
+*        }
+*    }
+* }
+* ```
+* @public
+*/
+export interface IBarcodeItemData<TOverlayEffect, TBarcodeFormat, TBarcodeSubType> extends IImageItemData<TOverlayEffect> {
+    /** The content of barcodes. */
+    barcodeContent?: BarcodeContentType<TBarcodeFormat, TBarcodeSubType>;
+    /** Defines permissions for barcodes. */
+    barcodePermissions?: IBarcodePermissionsData;
+    /** Defines the barcode color. The default value is `"rgb(0, 0, 0)"`. */
+    color?: string;
+    /** Defines encoding options. */
+    barcodeOptions?: IBarcodeOptions;
+}

package/Types/ItemData/IBarcodeItemData.js

@@ -0,0 +1 @@
+export {};

package/Types/ItemData/IBarcodeOptions.d.ts

@@ -0,0 +1,35 @@
+/**
+* A structure defining the barcode options.
+* @example
+* ```json
+* {
+*    "defaultItemsConfig": {
+*        "barcode": {
+*            "barcodeOptions": {
+*                "margin": 0
+*            }
+*        }
+*    }
+* }
+* ```
+* @public
+*/
+export interface IBarcodeOptions {
+    /** Specifies a margin, in pixels. This margin differs for barcode formats, for example, it controls the space before and after the barcode horizontally for linear formats. */
+    margin?: number;
+    /** If `true`, the image is a pure monochrome image of a barcode. */
+    pureBarcode?: boolean;
+    errorCorrection?: string;
+    /** Specifies what character encoding to use when decoding. */
+    characterSet?: string;
+    pdf417Compact?: boolean;
+    pdf417Compaction?: string;
+    pdf417Dimensions?: {};
+    disableEci?: boolean;
+    code128ForceCodesetB?: boolean;
+    aztecLayers?: number;
+    /** The version of QR code to be encoded, in the range [1, 40]. */
+    qrVersion?: number;
+    xDimension?: number;
+    databarExpandedSegments?: number;
+}

package/Types/ItemData/IBarcodeOptions.js

@@ -0,0 +1 @@
+export {};

package/Types/ItemData/IBarcodePermissionsData.d.ts

@@ -0,0 +1,27 @@
+/**
+* A structure defining the barcode permissions.
+* @example
+* ```json
+* {
+*    "defaultItemsConfig": {
+*        "placeholder": {
+*            "contentPermissions": {
+*                "barcodePermissions": {
+*                    "allowChangeBarcodeContent": false,
+*                    "allowChangeBarcodeType": false
+*                }
+*            }
+*        }
+*    }
+* }
+* ```
+* @public
+*/
+export interface IBarcodePermissionsData {
+    /** Allows your users to change the barcode type in a placeholder. The default value is `false`. */
+    allowChangeBarcodeType?: boolean;
+    /** Allows your users to change the barcode content. The default value is `true`. */
+    allowChangeBarcodeContent?: boolean;
+    /** Allows your users to change the barcode color. The default value is `true`. */
+    allowChangeBarcodeColor?: boolean;
+}

package/Types/ItemData/IBarcodePermissionsData.js

@@ -0,0 +1 @@
+export {};

package/Types/ItemData/IBaseTextItemData.d.ts

@@ -0,0 +1,71 @@
+import { IContentItemData } from "./IContentItemData";
+import { IFontSettingsData } from "./IFontSettingsData";
+import { ITextPermissionsData } from "./ITextPermissionsData";
+/**
+* A structure defining the basic text parameters.
+* @example
+* ```json
+* {
+*    "defaultItemsConfig": {
+*        "text": {
+*            "font": {
+*                "postScriptName": "Impact",
+*                "size": 33,
+*                "fauxBold": true,
+*                "fauxItalic": true
+*            },
+*            "color": "rgb(30,30,30)",
+*            "shadow": {
+*                "color": "rgb(255,0,0)",
+*                "size": 0.4,
+*                "angle": 45,
+*                "distance": 2
+*            },
+*            "stroke": {
+*                "size": 0.3
+*            },
+*            "overflowStrategy": "FitToWidth",
+*            "textPermissions": {
+*                "allowChangeFontColor": false,
+*                "allowChangeShadow": false,
+*                "allowChangeStroke": false
+*            }
+*        }
+*    }
+* }
+* ```
+* @public
+*/
+export interface IBaseTextItemData<TTextAlignment, TStrokeSettings, TShadowSettings> extends IContentItemData {
+    /** The default content for new text elements. It is an empty string for text with rich formatting and `"Text"` for plain text. */
+    text?: string;
+    /** The font parameters. */
+    font?: IFontSettingsData;
+    /** The text alignment. */
+    alignment?: TTextAlignment;
+    /** Enables the underline. The default value is `false`. */
+    underline?: boolean;
+    /** The text color. The default value is `"rgba(0,0,0,1)"`. */
+    color?: string;
+    /** The spacing between characters, in points. The default value is `0`. */
+    tracking?: number;
+    /** The spacing between base lines, in points. */
+    leading?: number;
+    /** The spacing between base lines on proof images, in points. */
+    previewLeading?: number;
+    /** Allows you to scale text horizontally. The default value is `1`. */
+    horizontalScale?: number;
+    /** Allows you to scale text vertically. The default value is `1`. */
+    verticalScale?: number;
+    /** The text scaling on proof images. */
+    previewScale?: number;
+    /** The stroke parameters. */
+    stroke?: TStrokeSettings;
+    /** The shadow parameters. */
+    shadow?: TShadowSettings;
+    /** Defines permissions for new text elements. */
+    textPermissions?: ITextPermissionsData;
+    overlapLinesEnabled?: boolean;
+    checkTextCrop?: boolean;
+    overprintText?: boolean;
+}

package/Types/ItemData/IBaseTextItemData.js

@@ -0,0 +1 @@
+export {};

package/Types/ItemData/IBoundedTextItemData.d.ts

@@ -0,0 +1,44 @@
+import { IBaseTextItemData } from "./IBaseTextItemData";
+import { IParagraphSettingsData } from "./IParagraphSettingsData";
+import { OverflowStrategy } from "./OverflowStrategy";
+import { ShrinkMode } from "./ShrinkMode";
+import { VerticalAlignmentType } from "./VerticalAlignmentType";
+/**
+* A structure defining the basic parameters of bounded text.
+* @example
+* ```json
+* {
+*    "defaultItemsConfig": {
+*        "boundedText": {
+*            "isVertical": true,
+*            "verticalAlignment": "center",
+*            "overflowStrategy": "fitToWidth",
+*            "tracking": 12,
+*            "maxLineCount": 2,
+*            "maxLineLength": 20
+*        }
+*    }
+* }
+* ```
+* @public
+*/
+export interface IBoundedTextItemData<TTextAlignment, TStrokeSettings, TShadowSettings> extends IBaseTextItemData<TTextAlignment, TStrokeSettings, TShadowSettings> {
+    /** The spacing between an item and wrapping text, in points. The default value is `7`. */
+    wrappingMargin?: number;
+    /** The default parameters of paragraphs. */
+    paragraphSettings?: IParagraphSettingsData;
+    /** Defines how the vertical bounded text is aligned. The default value is `"top"`. */
+    verticalAlignment?: VerticalAlignmentType;
+    /** Limits the number of characters that the user can enter in the Rich text editor. By default, this number is not limited. */
+    characterLimit?: number;
+    /** Enables the vertical orientation of bounded text. The default value is `false`. */
+    isVertical?: boolean;
+    /** The maximum length of text lines which the user is allowed to enter into a specific point text or bounded text element. By default, this number is not limited. */
+    maxLineLength?: number;
+    /** The maximum number of lines which the user is allowed to enter into a specific point text or bounded text element. By default, this number is not limited. */
+    maxLineCount?: number;
+    /** The copyfitting strategy applied to a bounded text element when it overflows. By default, this property is `"clip"`. */
+    overflowStrategy?: OverflowStrategy;
+    /** A mode defining how a bounded text element shrinks to its bounds when it overflows. By default, this property is `"size"`. */
+    textShrinkMode?: ShrinkMode;
+}

package/Types/ItemData/IBoundedTextItemData.js

@@ -0,0 +1 @@
+export {};

package/Types/ItemData/IClipartItemData.d.ts

@@ -0,0 +1,21 @@
+import { IGroupItemData } from "./IGroupItemData";
+/**
+* A structure containing parameters of clipart.
+* @remarks For details, you can refer to the {@link https://customerscanvas.com/help/designers-manual/design-anatomy/groups.html|Group elements} topic.
+* @example
+* ```json
+* {
+*    "defaultItemsConfig": {
+*        "clipart": {
+*            "manipulationPermissions": {
+*                "allowMoveHorizontal": false
+*            },
+*            "angle": 20
+*        }
+*    }
+* }
+* ```
+* @public
+*/
+export interface IClipartItemData extends IGroupItemData {
+}

package/Types/ItemData/IClipartItemData.js

@@ -0,0 +1 @@
+export {};

package/Types/ItemData/IContentItemData.d.ts

@@ -0,0 +1,10 @@
+import { IRectangleItemData } from "./IRectangleItemData";
+/**
+* A structure defining the common parameters of text elements and images.
+*/
+export interface IContentItemData extends IRectangleItemData {
+    /** The mask opacity of an item. The default value is `0.45`. */
+    maskOpacity?: number;
+    /** The fill color. The default value is `"rgba(0, 0, 0, 0)"`. */
+    fillColor?: string;
+}

package/Types/ItemData/IContentItemData.js

@@ -0,0 +1 @@
+export {};

package/Types/ItemData/IContentPermissionsData.d.ts

@@ -0,0 +1,35 @@
+import { IBarcodePermissionsData } from "./IBarcodePermissionsData";
+import { IImagePermissionsData } from "./IImagePermissionsData";
+/**
+* A structure defining permissions for the placeholder's content.
+* @example
+* ```json
+* {
+*    "defaultItemsConfig": {
+*        "placeholder": {
+*            "placeholderPermissions": {
+*                "allowEditContent": true,
+*                "showSelectButton": true,
+*                "showHandleButton": true
+*            },
+*            "contentPermissions": {
+*                "imagePermissions": {
+*                    "allowChangeImage": true,
+*                    "allowEditImage": true
+*                },
+*                "barcodePermissions": {
+*                    "allowChangeBarcodeType": true
+*                }
+*            }
+*        }
+*    }
+* }
+* ```
+* @public
+*/
+export interface IContentPermissionsData {
+    /** Defines permissions for the content of image placeholders. */
+    imagePermissions?: IImagePermissionsData;
+    /** Defines permissions for the content of barcode placeholders. */
+    barcodePermissions?: IBarcodePermissionsData;
+}

package/Types/ItemData/IContentPermissionsData.js

@@ -0,0 +1 @@
+export {};

package/Types/ItemData/IEllipseItemData.d.ts

@@ -0,0 +1,28 @@
+import { IShapeItemData } from "./IShapeItemData";
+/**
+* A structure defining the default parameters of ellipses.
+* @remarks You can apply these parameters to the `ellipse` object through either **clientConfig.json** or {@link https://customerscanvas.com/dev/editors/iframe-api/reference/design-editor-iframe/iconfiguration.html|IConfiguration}.
+* @example
+* ```json
+* {
+*    "defaultItemsConfig": {
+*        "ellipse": {
+*            "borderWidth": 2,
+*            "borderColor": "rgba(155,0,0,0.55)",
+*            "textWrappingMode": "tight",
+*            "shapePermissions": {
+*                "allowChangeBorderWidth": false
+*            },
+*            "location": {
+*                "x": "50%", "y": "0%",
+*                "originX": "right",
+*                "originY": "top"
+*            }
+*        }
+*    }
+* }
+* ```
+* @public
+*/
+export interface IEllipseItemData extends IShapeItemData {
+}

package/Types/ItemData/IEllipseItemData.js

@@ -0,0 +1 @@
+export {};

package/Types/ItemData/IFontSettingsData.d.ts

@@ -0,0 +1,33 @@
+/**
+* A configuration of font settings.
+* @example
+* ```json
+* {
+*    "defaultItemsConfig": {
+*        "text": {
+*            "font": {
+*                "postScriptName": "Impact",
+*                "size": 33,
+*                "fauxBold": true,
+*                "fauxItalic": true
+*            },
+*            "color": "rgb(30,30,30)"
+*        }
+*    }
+* }
+* ```
+* @public
+*/
+export interface IFontSettingsData {
+    previewSize?: number | string;
+    /** The font name. The default value is `"Roboto-Regular"`. */
+    postScriptName?: string;
+    /** The font size in points (for example, `8`) or as a percentage of the height of the print area (for example, `"15%"`). The default value is `10` pt. */
+    size?: number | string;
+    /** Enables the faux bold style for text. The default value is `false`. */
+    fauxBold?: boolean;
+    /** Enables the faux italic style for text. The default value is `false`. */
+    fauxItalic?: boolean;
+    /** Enables the all caps style for text. The default value is `false`. */
+    allCaps?: boolean;
+}

package/Types/ItemData/IFontSettingsData.js

@@ -0,0 +1 @@
+export {};

package/Types/ItemData/IGroupItemData.d.ts

@@ -0,0 +1,21 @@
+import { IItemData } from "./IItemData";
+/**
+* A structure containing parameters of groups.
+* @remarks For details, you can refer to the {@link https://customerscanvas.com/help/designers-manual/design-anatomy/groups.html|Group elements} topic.
+* @example
+* ```json
+* {
+*    "defaultItemsConfig": {
+*        "group": {
+*            "manipulationPermissions": {
+*                "allowMoveHorizontal": false
+*            },
+*            "width": "100"
+*        }
+*    }
+* }
+* ```
+* @public
+*/
+export interface IGroupItemData extends IItemData {
+}

package/Types/ItemData/IGroupItemData.js

@@ -0,0 +1 @@
+export {};

package/Types/ItemData/IImageItemData.d.ts

@@ -0,0 +1,37 @@
+import { IContentItemData } from "./IContentItemData";
+import { IImagePermissionsData } from "./IImagePermissionsData";
+import { ImageEffect } from "./ImageEffect";
+/**
+* A structure containing default parameters of images.
+* @remarks You can apply these parameters to the `image` object through either **clientConfig.json** or {@link https://customerscanvas.com/dev/editors/iframe-api/reference/design-editor-iframe/iconfiguration.html|IConfiguration}.
+* @example The following example shows how you can add image placeholders to the canvas and disallow changing of the z-order for them.
+* ```json
+* {
+*    "defaultItemsConfig": {
+*        "image": {
+*            "name": "placeholder",
+*            "addImageAsPlaceholder": true,
+*            "overlayColor": "rgb(0,255,0)",
+*            "itemPermissions": {
+*                "allowZOrderChange": false
+*            }
+*        }
+*    }
+* }
+* ```
+* @public
+*/
+export interface IImageItemData<TOverlayEffect> extends IContentItemData {
+    /** Defines permissions for images being added to the canvas. */
+    imagePermissions?: IImagePermissionsData;
+    /** Allows adding images to the canvas as placeholders. The default value is `false`. */
+    addImageAsPlaceholder?: boolean;
+    /** _Deprecated, use `overlayEffect` instead_. */
+    overlayColor?: string;
+    /** Defines an overlay color for images being added to the canvas. */
+    overlayEffect?: TOverlayEffect;
+    /** A link to the default image. */
+    imageUrl?: string;
+    /** Defines an effect for images being added to the canvas. */
+    effect?: ImageEffect;
+}

package/Types/ItemData/IImageItemData.js

@@ -0,0 +1 @@
+export {};

package/Types/ItemData/IImagePermissionsData.d.ts

@@ -0,0 +1,25 @@
+/**
+* A structure defining the image permissions.
+* @example The following example shows how you can disallow for editing and selecting other images after adding an image to the canvas.
+* ```json
+* {
+*    "defaultItemsConfig": {
+*        "image": {
+*            "imagePermissions": {
+*                "allowChangeImage": false,
+*                "allowEditImage": false
+*            }
+*        }
+*    }
+* }
+* ```
+* @public
+*/
+export interface IImagePermissionsData {
+    /** Allows your users to change images. This property enables the **Select image** command in menus. Also, if it is `false`, your users cannot change images by double-clicking. The default value is `true`. */
+    allowChangeImage?: boolean;
+    /** Allows your users to open the Image Editor. This property enables the **Edit** command. The default value is `true`. */
+    allowEditImage?: boolean;
+    /** Allows your users to keep theoverlay color. The default value is `true`. */
+    allowKeepOverlayColor?: boolean;
+}

package/Types/ItemData/IImagePermissionsData.js

@@ -0,0 +1 @@
+export {};

package/Types/ItemData/IItemData.d.ts

@@ -0,0 +1,65 @@
+import { BlendMode } from "./BlendMode";
+import { IItemPermissionsData } from "./IItemPermissionsData";
+import { ILocationData } from "./ILocationData";
+import { IManipulationPermissionsData } from "./IManipulationPermissionsData";
+import { IThemeBindingData } from "./IThemeBindingData";
+import { IViolationSettings } from "./IViolationSettings";
+import { IVisualizationPermissionsData } from "./IVisualizationPermissionsData";
+import { WrappingMode } from "./WrappingMode";
+/**
+* A structure containing parameters of custom design elements.
+* @remarks For details, you can refer to the {@link https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/toolbox.html|Toolbox} topic.
+* @example
+* ```js
+* var configuration = {
+*    angle: 90,
+*    opacity: 0.5,
+*    textWrappingMode: "tight",
+*    themeBinding: {
+*        styles: [ "DimImages" ]
+*    },
+*    manipulationPermissions: {
+*        allowMoveHorizontal: false,
+*        allowMoveVertical: false
+*    },
+*    itemPermissions: {
+*        allowZOrderChange: false,
+*        allowOpacityChange: true
+*    }
+* };
+*
+* CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition, configuration);
+* ```
+* @public
+*/
+export interface IItemData {
+    /** A structure defining the manipulation permissions for design elements. */
+    manipulationPermissions?: IManipulationPermissionsData;
+    /** A structure defining the visualization permissions for design elements. */
+    visualizationPermissions?: IVisualizationPermissionsData;
+    /** A structure defining the Item Menu and the Floating item toolbar for design elements. */
+    itemPermissions?: IItemPermissionsData;
+    /** A structure defining the design validation parameters and warnings. */
+    violationSettings?: IViolationSettings;
+    /** An angle, which design elements are rotated to. By default, this value is `0`. */
+    angle?: number;
+    /** A wrapping mode that applies to wrap text around design elements, one of `"none"`, `"square"`, or `"tight"`. By default, it is `"none"`. */
+    textWrappingMode?: WrappingMode;
+    /** An opacity that applies to design elements. This value can be from `0` to `1`. By default, it is `1`. */
+    opacity?: number;
+    /** The coordinates of design elements being added to the canvas. By default, you can add them to the center of your product. */
+    location?: ILocationData;
+    /** A style or a color that applies to new design elements. */
+    themeBinding?: IThemeBindingData;
+    /** The name of design elements being added to the canvas. */
+    name?: string;
+    /** Marks a design element as a variable item. The default value is `false`. */
+    isVariable?: boolean;
+    /** The width of design elements being added to the canvas, in points or percent. */
+    width?: string | number;
+    /** The height of design elements being added to the canvas, in points or percent. For QR codes, the `width` value is used for both `width` and `height`. */
+    height?: string | number;
+    /** A blend mode that applies to design elements being added to the canvas. */
+    blendMode?: BlendMode;
+    adjustSize?: boolean;
+}

package/Types/ItemData/IItemData.js

@@ -0,0 +1 @@
+export {};

package/Types/ItemData/IItemPermissionsData.d.ts

@@ -0,0 +1,28 @@
+import { IItemToolbarPermissionsData } from "./IItemToolbarPermissionsData";
+/**
+* A structure defining common permissions for design elements.
+* @example
+* ```json
+* {
+*    "defaultItemsConfig": {
+*        "image": {
+*            "itemPermissions": {
+*                "allowZOrderChange": false,
+*                "allowOpacityChange": false
+*            }
+*        }
+*    }
+* }
+* ```
+* @public
+*/
+export interface IItemPermissionsData {
+    /** Enables buttons for changing the z-order of design elements. */
+    allowZOrderChange?: boolean;
+    /** Enables buttons for changing the opacity of design elements. */
+    allowOpacityChange?: boolean;
+    /** Allows for removing and keeping design elements when changing layouts. */
+    allowRemoveOnLayoutChange?: boolean;
+    /** Configures the **Floating item toolbar** for design elements. You can enable the **Select Image**, **Edit**, and **Delete** buttons. */
+    itemToolbarPermissions?: IItemToolbarPermissionsData;
+}

package/Types/ItemData/IItemPermissionsData.js

@@ -0,0 +1 @@
+export {};