ding-image-editor 3.15.3

package/index.d.ts

@@ -0,0 +1,334 @@
+// Type definitions for TOAST UI Image Editor v3.15.3
+// TypeScript Version: 3.2.2
+
+declare namespace tuiImageEditor {
+  type AngleType = number;
+
+  interface IThemeConfig {
+    'common.bi.image'?: string;
+    'common.bisize.width'?: string;
+    'common.bisize.height'?: string;
+    'common.backgroundImage'?: string;
+    'common.backgroundColor'?: string;
+    'common.border'?: string;
+    'header.backgroundImage'?: string;
+    'header.backgroundColor'?: string;
+    'header.border'?: string;
+    'loadButton.backgroundColor'?: string;
+    'loadButton.border'?: string;
+    'loadButton.color'?: string;
+    'loadButton.fontFamily'?: string;
+    'loadButton.fontSize'?: string;
+    'downloadButton.backgroundColor'?: string;
+    'downloadButton.border'?: string;
+    'downloadButton.color'?: string;
+    'downloadButton.fontFamily'?: string;
+    'downloadButton.fontSize'?: string;
+    'menu.normalIcon.path'?: string;
+    'menu.normalIcon.name'?: string;
+    'menu.activeIcon.path'?: string;
+    'menu.activeIcon.name'?: string;
+    'menu.iconSize.width'?: string;
+    'menu.iconSize.height'?: string;
+    'submenu.backgroundColor'?: string;
+    'submenu.partition.color'?: string;
+    'submenu.normalIcon.path'?: string;
+    'submenu.normalIcon.name'?: string;
+    'submenu.activeIcon.path'?: string;
+    'submenu.activeIcon.name'?: string;
+    'submenu.iconSize.width'?: string;
+    'submenu.iconSize.height'?: string;
+    'submenu.normalLabel.color'?: string;
+    'submenu.normalLabel.fontWeight'?: string;
+    'submenu.activeLabel.color'?: string;
+    'submenu.activeLabel.fontWeight'?: string;
+    'checkbox.border'?: string;
+    'checkbox.backgroundColor'?: string;
+    'range.pointer.color'?: string;
+    'range.bar.color'?: string;
+    'range.subbar.color'?: string;
+    'range.value.color'?: string;
+    'range.value.fontWeight'?: string;
+    'range.value.fontSize'?: string;
+    'range.value.border'?: string;
+    'range.value.backgroundColor'?: string;
+    'range.title.color'?: string;
+    'range.title.fontWeight'?: string;
+    'colorpicker.button.border'?: string;
+    'colorpicker.title.color'?: string;
+  }
+
+  interface IIconInfo {
+    [propName: string]: string;
+  }
+
+  interface IIconOptions {
+    fill?: string;
+    left?: number;
+    top?: number;
+  }
+
+  interface IShapeOptions {
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    width?: number;
+    height?: number;
+    rx?: number;
+    ry?: number;
+    left?: number;
+    top?: number;
+    isRegular?: boolean;
+  }
+
+  interface IGenerateTextOptions {
+    styles?: ITextStyleConfig;
+    position?: {
+      x: number;
+      y: number;
+    };
+  }
+
+  type IFilterOptions =
+    | { blur: number }
+    | { brightness: number }
+    | { noise: number }
+    | { blocksize: number }
+    | { color: string; distance: number; useAlpha?: boolean }
+    | { mode: string; color: string; alpha?: number }
+    | { maskObjId: number };
+
+  interface ITextStyleConfig {
+    fill?: string;
+    fontFamily?: string;
+    fontSize?: number;
+    fontStyle?: string;
+    fontWeight?: string;
+    textAlign?: string;
+    textDecoration?: string;
+  }
+
+  interface IRectConfig {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+  }
+
+  interface ICanvasSize {
+    width: number;
+    height: number;
+  }
+
+  interface IBrushOptions {
+    width: number;
+    color: string;
+  }
+
+  interface IPositionConfig {
+    x: number;
+    y: number;
+    originX: string;
+    originY: string;
+  }
+
+  interface IToDataURLOptions {
+    format?: string;
+    quality?: number;
+    multiplier?: number;
+    left?: number;
+    top?: number;
+    width?: number;
+    height?: number;
+  }
+
+  interface IGraphicObjectProps {
+    id?: number;
+    type?: string;
+    text?: string;
+    left?: string | number;
+    top?: string | number;
+    width?: string | number;
+    height?: string | number;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: string | number;
+    fontFamily?: string;
+    fontSize?: number;
+    fontStyle?: string;
+    fontWeight?: string;
+    textAlign?: string;
+    textDecoration?: string;
+    opacity?: number;
+    [propName: string]: number | string | boolean | undefined;
+  }
+
+  interface IIncludeUIOptions {
+    loadImage?: {
+      path: string;
+      name: string;
+    };
+    theme?: IThemeConfig;
+    menu?: string[];
+    initMenu?: string;
+    uiSize?: {
+      width: string;
+      height: string;
+    };
+    menuBarPosition?: string;
+    usageStatistics?: boolean;
+  }
+
+  interface ISelectionStyleConfig {
+    cornerStyle?: string;
+    cornerSize?: number;
+    cornerColor?: string;
+    cornerStrokeColor?: string;
+    transparentCorners?: boolean;
+    lineWidth?: number;
+    borderColor?: string;
+    rotatingPointOffset?: number;
+  }
+
+  interface IObjectProps {
+    // icon, shape
+    fill: string;
+    height: number;
+    id: number;
+    left: number;
+    opacity: number;
+    stroke: string | null;
+    strokeWidth: number | null;
+    top: number;
+    type: string;
+    width: number;
+  }
+
+  interface ITextObjectProps extends IObjectProps {
+    fontFamily: string;
+    fontSize: string;
+    fontStyle: string;
+    text: string;
+    textAlign: string;
+    textDecoration: string;
+  }
+
+  interface IFilterResolveObject {
+    type: string;
+    action: string;
+  }
+
+  interface ICropResolveObject {
+    oldWidth: number;
+    oldHeight: number;
+    newWidth: number;
+    newHeight: number;
+  }
+
+  interface IFlipXYResolveObject {
+    flipX: boolean;
+    flipY: boolean;
+    angle: AngleType;
+  }
+
+  interface IOptions {
+    includeUI?: IIncludeUIOptions;
+    cssMaxWidth?: number;
+    cssMaxHeight?: number;
+    usageStatistics?: boolean;
+    selectionStyle?: ISelectionStyleConfig;
+  }
+
+  interface IUIDimension {
+    height?: string;
+    width?: string;
+  }
+
+  interface IImageDimension {
+    oldHeight?: number;
+    oldWidth?: number;
+    newHeight?: number;
+    newWidth?: number;
+  }
+
+  interface IEditorSize {
+    uiSize?: IUIDimension;
+    imageSize?: IImageDimension;
+  }
+
+  interface UI {
+    resizeEditor(dimension: IEditorSize): Promise<void>;
+  }
+
+  class ImageEditor {
+    constructor(wrapper: string | Element, options: IOptions);
+    public ui: UI;
+
+    public addIcon(type: string, options?: IIconOptions): Promise<IObjectProps>;
+    public addImageObject(imgUrl: string): Promise<void>;
+    public addShape(type: string, options?: IShapeOptions): Promise<IObjectProps>;
+    public addText(text: string, options?: IGenerateTextOptions): Promise<ITextObjectProps>;
+    public applyFilter(
+      type: string,
+      options?: IFilterOptions,
+      isSilent?: boolean
+    ): Promise<IFilterResolveObject>;
+    public changeCursor(cursorType: string): void;
+    public changeIconColor(id: number, color: string): Promise<void>;
+    public changeSelectableAll(selectable: boolean): void;
+    public changeShape(id: number, options?: IShapeOptions, isSilent?: boolean): Promise<void>;
+    public changeText(id: number, text?: string): Promise<void>;
+    public changeTextStyle(
+      id: number,
+      styleObj: ITextStyleConfig,
+      isSilent?: boolean
+    ): Promise<void>;
+    public clearObjects(): Promise<void>;
+    public clearRedoStack(): void;
+    public clearUndoStack(): void;
+    public crop(rect: IRectConfig): Promise<ICropResolveObject>;
+    public deactivateAll(): void;
+    public destroy(): void;
+    public discardSelection(): void;
+    public flipX(): Promise<IFlipXYResolveObject>;
+    public flipY(): Promise<IFlipXYResolveObject>;
+    public getCanvasSize(): ICanvasSize;
+    public getCropzoneRect(): IRectConfig;
+    public getDrawingMode(): string;
+    public getImageName(): string;
+    public getObjectPosition(id: number, originX: string, originY: string): ICanvasSize;
+    public getObjectProperties(
+      id: number,
+      keys: string | string[] | IGraphicObjectProps
+    ): IGraphicObjectProps;
+    public hasFilter(type: string): boolean;
+    public isEmptyRedoStack(): boolean;
+    public isEmptyUndoStack(): boolean;
+    public loadImageFromFile(imgFile: File, imageName?: string): Promise<ICropResolveObject>;
+    public loadImageFromURL(url: string, imageName?: string): Promise<ICropResolveObject>;
+    public redo(iterationCount: number): Promise<any>;
+    public registerIcons(infos: IIconInfo): void;
+    public removeActiveObject(): void;
+    public removeFilter(type?: string): Promise<IFilterResolveObject>;
+    public removeObject(id: number): Promise<void>;
+    public resetFlip(): Promise<IFlipXYResolveObject>;
+    public resizeCanvasDimension(dimension: ICanvasSize): Promise<void>;
+    public rotate(angle: AngleType, isSilent?: boolean): Promise<AngleType>;
+    public setAngle(angle: AngleType, isSilent?: boolean): Promise<AngleType>;
+    public setBrush(option: IBrushOptions): void;
+    public setCropzoneRect(mode?: number): void;
+    public setDrawingShape(type: string, options?: IShapeOptions): void;
+    public setObjectPosition(id: number, posInfo?: IPositionConfig): Promise<void>;
+    public setObjectProperties(id: number, keyValue?: IGraphicObjectProps): Promise<void>;
+    public setObjectPropertiesQuietly(id: number, keyValue?: IGraphicObjectProps): Promise<void>;
+    public startDrawingMode(mode: string, option?: { width?: number; color?: string }): boolean;
+    public stopDrawingMode(): void;
+    public toDataURL(options?: IToDataURLOptions): string;
+    public undo(iterationCount: number): Promise<any>;
+    public on(eventName: string, handler: (...args: any[]) => void): void;
+  }
+}
+
+declare module 'tui-image-editor' {
+  export = tuiImageEditor.ImageEditor;
+}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "ding-image-editor",
+  "version": "3.15.3",
+  "description": "TOAST UI ImageEditor",
+  "keywords": [
+    "nhn",
+    "nhn cloud",
+    "tui",
+    "component",
+    "image",
+    "editor",
+    "canvas",
+    "fabric"
+  ],
+  "main": "dist/tui-image-editor.js",
+  "files": [
+    "src",
+    "dist",
+    "index.d.ts"
+  ],
+  "scripts": {
+    "test": "jest --forceExit --detectOpenHandles",
+    "test:types": "tsc --project tests/types",
+    "build": "npm run build:clean && npm run build:svg && npm run build:prod && npm run build:minify && node tsBannerGenerator.js",
+    "build:clean": "rm -rf ./dist",
+    "build:prod": "webpack",
+    "build:minify": "webpack --env minify",
+    "build:svg": "node makesvg.js",
+    "serve": "webpack serve",
+    "doc:dev": "tuidoc --serv",
+    "doc": "tuidoc",
+    "update:wrapper": "node scripts/updateWrapper.js",
+    "publish:cdn": "node scripts/publishToCDN.js"
+  },
+  "homepage": "https://github.com/nhn/tui.image-editor",
+  "bugs": "https://github.com/nhn/tui.image-editor/issues",
+  "author": "NHN Cloud. FE Development Lab <dl_javascript@nhn.com>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nhn/tui.image-editor.git"
+  },
+  "license": "MIT",
+  "browserslist": [
+    "last 2 versions",
+    "not ie <= 9"
+  ],
+  "dependencies": {
+    "fabric": "^4.2.0",
+    "tui-code-snippet": "^2.3.3",
+    "tui-color-picker": "^2.2.6"
+  }
+}

package/src/css/buttons.styl

@@ -0,0 +1,102 @@
+/* ICON BUTTON */
+.tie-icon-add-button
+    &.icon-bubble .{prefix}-button[data-icontype="icon-bubble"] svg > use.active,
+    &.icon-heart .{prefix}-button[data-icontype="icon-heart"] svg > use.active,
+    &.icon-location .{prefix}-button[data-icontype="icon-location"] svg > use.active,
+    &.icon-polygon .{prefix}-button[data-icontype="icon-polygon"] svg > use.active,
+    &.icon-star .{prefix}-button[data-icontype="icon-star"] svg > use.active,
+    &.icon-star-2 .{prefix}-button[data-icontype="icon-star-2"] svg > use.active,
+    &.icon-arrow-3 .{prefix}-button[data-icontype="icon-arrow-3"] svg > use.active,
+    &.icon-arrow-2 .{prefix}-button[data-icontype="icon-arrow-2"] svg > use.active,
+    &.icon-arrow .{prefix}-button[data-icontype="icon-arrow"] svg > use.active,
+    &.icon-bubble .{prefix}-button[data-icontype="icon-bubble"] svg > use.active
+        display: block;
+
+/* DRAW BUTTON */
+.tie-draw-line-select-button
+  &.line .{prefix}-button.line svg > use.normal,
+  &.free .{prefix}-button.free svg > use.normal
+    display: none;
+
+  &.line .{prefix}-button.line svg > use.active,
+  &.free .{prefix}-button.free svg > use.active
+    display: block;
+
+/* FLIP BUTTON */
+.tie-flip-button
+  &.resetFlip .{prefix}-button.resetFlip,
+  &.flipX .{prefix}-button.flipX,
+  &.flipY .{prefix}-button.flipY
+    svg > use.normal
+        display: none;
+    svg > use.active
+        display: block;
+
+/*  MASK BUTTON */
+.tie-mask-apply.apply.active .{prefix}-button.apply
+    label
+        color: #fff;
+    svg > use.active
+        display: block;
+
+/* CROP BUTTON */
+.tie-crop-button,
+.tie-crop-preset-button
+    .{prefix}-button.apply
+        margin-right: 24px;
+    .{prefix}-button.preset.active svg > use.active
+        display: block;
+    .{prefix}-button.apply.active svg > use.active
+        display: block;
+
+/* RESIZE BUTTON */
+.tie-resize-button,
+.tie-resize-preset-button
+    .{prefix}-button.apply
+        margin-right: 24px;
+    .{prefix}-button.preset.active svg > use.active
+        display: block;
+    .{prefix}-button.apply.active svg > use.active
+        display: block;
+
+
+/* SHAPE BUTTON */
+.tie-shape-button
+  &.rect .{prefix}-button.rect,
+  &.circle .{prefix}-button.circle,
+  &.triangle .{prefix}-button.triangle
+    svg > use.normal
+        display: none;
+    svg > use.active
+        display: block;
+
+/* TEXT BUTTON */
+.tie-text-effect-button
+    .{prefix}-button.active svg > use.active
+        display: block;
+.tie-text-align-button
+    &.tie-text-align-left .{prefix}-button.left svg > use.active,
+    &.tie-text-align-center .{prefix}-button.center svg > use.active,
+    &.tie-text-align-right .{prefix}-button.right svg > use.active
+        display: block;
+.tie-mask-image-file,
+.tie-icon-image-file
+    opacity: 0;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border: 1px solid green;
+    cursor: inherit;
+    left: 0;
+    top: 0;
+
+
+/* FLIP BUTTON */
+.tie-zoom-button
+    &.resetFlip .{prefix}-button.resetFlip,
+    &.flipX .{prefix}-button.flipX,
+    &.flipY .{prefix}-button.flipY
+        svg > use.normal
+            display: none;
+        svg > use.active
+            display: block;

package/src/css/checkbox.styl

@@ -0,0 +1,86 @@
+/* VIRTUAL CHECKBOX */
+.{prefix}-container
+  .filter-color-item
+    display: inline-block;
+    .tui-image-editor-checkbox
+        display: block;
+  .{prefix}-checkbox-wrap
+      display: inline-block !important;
+      text-align: left;
+  .{prefix}-checkbox-wrap.fixed-width
+      width: 187px;
+      white-space: normal;
+  .{prefix}-checkbox
+      display: inline-block;
+      margin: 1px 0 1px 0;
+      input
+          width: 14px;
+          height: 14px;
+          opacity: 0;
+      > label > span
+          color: #fff;
+          height: 14px;
+          position: relative;
+      input + label:before,
+      > label > span:before
+          content: '';
+          position: absolute;
+          width: 14px;
+          height: 14px;
+          background-color: #fff;
+          top: 6px;
+          left: -19px;
+          display: inline-block;
+          margin: 0;
+          text-align: center;
+          font-size: 11px;
+          border: 0;
+          border-radius: 2px;
+          padding-top: 1px;
+          box-sizing: border-box;
+      input[type='checkbox']:checked + span:before
+          background-size: cover;
+          background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAMBJREFUKBWVkjEOwjAMRe2WgZW7IIHEDdhghhuwcQ42rlJugAQS54Cxa5cq1QM5TUpByZfS2j9+dlJVt/tX5ZxbS4ZU9VLkQvSHKTIGRaVJYFmKrBbTCJxE2UgCdDzMZDkHrOV6b95V0US6UmgKodujEZbJg0B0ZgEModO5lrY1TMQf1TpyJGBEjD+E2NPN7ukIUDiF/BfEXgRiGEw8NgkffYGYwCi808fpn/6OvfUfsDr/Vc1IfRf8sKnFVqeiVQfDu0tf/nWH9gAAAABJRU5ErkJggg==');
+
+  .{prefix}-selectlist-wrap
+      position: relative;
+      select
+          width: 100%;
+          height: 28px;
+          margin-top: 4px;
+          border: 0;
+          outline: 0;
+          border-radius: 0;
+          border: 1px solid #cbdbdb;
+          background-color: #fff;
+          -webkit-appearance: none;
+          -moz-appearance: none;
+          appearance: none;
+          padding: 0 7px 0 10px;
+      .{prefix}-selectlist
+          display: none;
+          position: relative;
+          top: -1px;
+          border: 1px solid #ccc;
+          background-color: #fff;
+          border-top: 0px;
+          padding: 4px 0;
+          li
+              display: block;
+              text-align: left;
+              padding: 7px 10px;
+              font-family: 'Noto Sans', sans-serif;
+          li:hover
+                  background-color: rgba(81, 92, 230, 0.05);
+  .{prefix}-selectlist-wrap:before
+      content: '';
+      position: absolute;
+      display: inline-block;
+      width: 14px;
+      height: 14px;
+      right: 5px;
+      top: 10px;
+      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAHlJREFUKBVjYBgFOEOAEVkmPDxc89+/f6eAYjzI4kD2FyYmJrOVK1deh4kzwRggGiQBVJCELAZig8SQNYHEmEEEMrh69eo1HR0dfqCYJUickZGxf9WqVf3IakBsFBthklpaWmVA9mEQhrJhUoTp0NBQCRAmrHL4qgAAuu4cWZOZIGsAAAAASUVORK5CYII=');
+      background-size: cover;
+  .{prefix}-selectlist-wrap select::-ms-expand
+      display:none;

package/src/css/colorpicker.styl

@@ -0,0 +1,98 @@
+/* COLOR PICKER */
+.{prefix}-container
+    div.tui-colorpicker-clearfix
+        width: 159px;
+        height: 28px;
+        border: 1px solid #d5d5d5;
+        border-radius: 2px;
+        background-color: #f5f5f5;
+        margin-top: 6px;
+        padding: 4px 7px 4px 7px;
+    .tui-colorpicker-palette-hex
+        width: 114px;
+        background-color: #f5f5f5;
+        border: 0;
+        font-size: 11px;
+        margin-top: 2px;
+        font-family: 'Noto Sans', sans-serif;
+    .tui-colorpicker-palette-hex[value='#ffffff'] + .tui-colorpicker-palette-preview,
+    .tui-colorpicker-palette-hex[value=''] + .tui-colorpicker-palette-preview
+            border: 1px solid #ccc;
+    .tui-colorpicker-palette-hex[value=''] + .tui-colorpicker-palette-preview
+            background-size: cover;
+            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAdBJREFUWAnFl0FuwjAQRZ0ukiugHqFSOQNdseuKW3ALzkA4BateICvUGyCxrtRFd4WuunH/TzykaYJrnLEYaTJJsP2+x8GZZCbQrLU5mj7Bn+EP8HvnCObd+R7xBV5lWfaNON4AnsA38E94qLEt+0yiFaBzAV/Bv+Cxxr4co7hKCDpw1q9wLeNYYdlAwyn8TYt8Hme3+8D5ozcTaMCZ68PXa2tnM2sbEcOZAJhrrpl2DAcTOGNjZPSfCdzkw6JrfbiMv+osBe4y9WOedhm4jZfhbENWuxS44H9Wz/xw4WzqLOAqh1+zycgAwzEMzr5k5gaHOa9ULBwuuDkFlHI1Kl4PJ66kgIpnoywOTmRFAYcbwYk9UMApWkD8zAV5ihcwHk4Rx7gl0IFTQL0EFc+CTQ9OZHWH3YhlVJiVpTHbrTGLhTHLZVgff6s9lyBsI9KduSS83oj+34rTwJutmBmCnMsvozRwZqB5GTkBw6/jdPDu69iJ6BYk6eCcfbcgcQIK/MByaaiMqm8rHcjol2TnpWDhyAKSGdA3FrxtJUToX0ODqatetfGE+8tyEUOV8GY5dGRwLP/MBS4RHQr4bT7NRAQjlcOTfZxmv2G+c4hI8nn+Ax5PG/zhI393AAAAAElFTkSuQmCC');
+    .tui-colorpicker-palette-preview
+        border-radius: 100%;
+        float: left;
+        width: 17px;
+        height: 17px;
+        border: 0;
+    .color-picker-control
+        position: absolute;
+        display: none;
+        z-index: 99;
+        width: 192px;
+        background-color: #fff;
+        box-shadow: 0 3px 22px 6px rgba(0, 0, 0, .15);
+        padding: 16px;
+        border-radius: 2px;
+        .tui-colorpicker-palette-toggle-slider
+            display: none;
+        .tui-colorpicker-palette-button
+            border: 0;
+            border-radius: 100%;
+            margin: 2px;
+            background-size: cover;
+            font-size: 1px;
+            &[title='#ffffff']
+              border: 1px solid #ccc;
+            &[title='']
+              border: 1px solid #ccc;
+        .triangle
+            width: 0;
+            height: 0;
+            border-right: 7px solid transparent;
+            border-top: 8px solid #fff;
+            border-left: 7px solid transparent;
+            position: absolute;
+            bottom: -8px;
+            left: 84px;
+        .tui-colorpicker-container,
+        .tui-colorpicker-palette-container ul,
+        .tui-colorpicker-palette-container
+            width: 100%;
+            height: auto;
+
+
+    .filter-color-item
+        .color-picker-control label
+            font-color: #333;
+            font-weight: normal;
+            margin-right: 7pxleft
+        .tui-image-editor-checkbox
+            margin-top: 0;
+            input + label:before,
+            > label:before
+              left: -16px;
+    .color-picker
+        width: 100%;
+        height: auto;
+    .color-picker-value 
+        width: 32px;
+        height: 32px;
+        border: 0px;
+        border-radius: 100%;
+        margin: auto;
+        margin-bottom: 1px;
+        &.transparent
+            border: 1px solid #cbcbcb;
+            background-size: cover;
+            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAdBJREFUWAnFl0FuwjAQRZ0ukiugHqFSOQNdseuKW3ALzkA4BateICvUGyCxrtRFd4WuunH/TzykaYJrnLEYaTJJsP2+x8GZZCbQrLU5mj7Bn+EP8HvnCObd+R7xBV5lWfaNON4AnsA38E94qLEt+0yiFaBzAV/Bv+Cxxr4co7hKCDpw1q9wLeNYYdlAwyn8TYt8Hme3+8D5ozcTaMCZ68PXa2tnM2sbEcOZAJhrrpl2DAcTOGNjZPSfCdzkw6JrfbiMv+osBe4y9WOedhm4jZfhbENWuxS44H9Wz/xw4WzqLOAqh1+zycgAwzEMzr5k5gaHOa9ULBwuuDkFlHI1Kl4PJ66kgIpnoywOTmRFAYcbwYk9UMApWkD8zAV5ihcwHk4Rx7gl0IFTQL0EFc+CTQ9OZHWH3YhlVJiVpTHbrTGLhTHLZVgff6s9lyBsI9KduSS83oj+34rTwJutmBmCnMsvozRwZqB5GTkBw6/jdPDu69iJ6BYk6eCcfbcgcQIK/MByaaiMqm8rHcjol2TnpWDhyAKSGdA3FrxtJUToX0ODqatetfGE+8tyEUOV8GY5dGRwLP/MBS4RHQr4bT7NRAQjlcOTfZxmv2G+c4hI8nn+Ax5PG/zhI393AAAAAElFTkSuQmCC');
+
+    .color-picker-value + label
+        color: #fff;
+
+    .{prefix}-submenu svg > use
+        display: none;
+    .{prefix}-submenu svg > use.normal
+        display: block;