@aurigma/ui-framework/docs/reference/classes/auwidgetcolorselector.md

A platform which allows building print product personalization editors based on Aurigma's Customer's Canvas.

# Class: AuWidgetColorSelector

A widget that is used to select colors in the editor.

```
{
  "widgets": [
      {
          "title": "Color picks",
          "name": "colorSelector1",
          "type": "color-selector",
          "params": {
              "text": "Our color picks",
              "popupText": "Our color picks",
              "svg": "<svg viewBox='0 0 20 20'><path d='m5 5h10v10h-10z' fill='currentColor'/></svg>",
              "colors": [
                  {
                      "title": "Pastel Pink / Salmon",
                      "value": [
                          "#F4CDD3",
                          "#E08697"
                      ]
                  },
                  {
                      "title": "Fog/Navy",
                      "value": [
                          "#DCDCDC",
                          "#151B4E"
                      ]
                  },
                  {
                      "title": "Eggshell / Seamist",
                      "value": [
                          "#F6F4EC",
                          "#717BA1"
                      ]
                  }
              ]
          }
      },
      {
          "title": "Text color",
          "name": "colorSelector2",
          "type": "color-selector",
          "params": {
              "text": "Text color",
              "popupText": "Select text color",
              "colors": [
                  {
                      "title": "Pastel Pink",
                      "value": ["#F4CDD3"]
                  },
                  {
                      "title": "Salmon",
                      "value": ["#D7877C"]
                  }
              ]
          }
      },
      {
          "title": "Base color",
          "name": "colorSelector3",
          "type": "color-selector",
          "params": {
              "text": "Base color",
              "popupText": "Select base color",
              "colors": [
                  {
                      "title": "Pastel Pink",
                      "value": "#F4CDD3"
                  },
                  {
                      "title": "Salmon",
                      "value": "#D7877C"
                  }
              ]
          }
      }
  ]
}
```

## Hierarchy

  ↳ [AuBaseSelectorWidget](aubaseselectorwidget.md)

  ↳ **AuWidgetColorSelector**

## Implements

* [IWidget](../interfaces/iwidget.md)
* [IRestorableWidget](../interfaces/irestorablewidget.md)

## Index

### Properties

* [color](auwidgetcolorselector.md#color)
* [params](auwidgetcolorselector.md#params)

### Accessors

* [_](auwidgetcolorselector.md#_)
* [hiddenColor](auwidgetcolorselector.md#hiddencolor)

### Methods

* [checkInitDependenciesWidgets](auwidgetcolorselector.md#checkinitdependencieswidgets)
* [clearSelection](auwidgetcolorselector.md#clearselection)
* [closeSelector](auwidgetcolorselector.md#closeselector)
* [createPalette](auwidgetcolorselector.md#createpalette)
* [exportWidgetData](auwidgetcolorselector.md#exportwidgetdata)
* [resetPreloaderState](auwidgetcolorselector.md#resetpreloaderstate)
* [restoreWidgetFromData](auwidgetcolorselector.md#restorewidgetfromdata)
* [showPreloader](auwidgetcolorselector.md#showpreloader)
* [showToast](auwidgetcolorselector.md#showtoast)
* [toggleSelector](auwidgetcolorselector.md#toggleselector)

## Properties

###  color

• **color**: *any*

The color selected by the user.

___

###  params

• **params**: *[IColorSelectorConfig](../interfaces/icolorselectorconfig.md)*

*Implementation of [IWidget](../interfaces/iwidget.md).[params](../interfaces/iwidget.md#optional-params)*

*Overrides [AuBaseWidget](aubasewidget.md).[params](aubasewidget.md#params)*

Properties of the widget.

## Accessors

###  _

• **get _**(): *boolean*

*Overrides [AuBaseSelectorWidget](aubaseselectorwidget.md).[_](aubaseselectorwidget.md#_)*

Returns the selected value.

**Returns:** *boolean*

___

###  hiddenColor

• **get hiddenColor**(): *boolean*

**Returns:** *boolean*

• **set hiddenColor**(`value`: boolean): *void*

**Parameters:**

Name | Type |
------ | ------ |
`value` | boolean |

**Returns:** *void*

## Methods

###  checkInitDependenciesWidgets

▸ **checkInitDependenciesWidgets**(): *string[]*

*Inherited from [AuBaseWidget](aubasewidget.md).[checkInitDependenciesWidgets](aubasewidget.md#checkinitdependencieswidgets)*

Returns an array of widget names, due to which the current widget cannot receive parameters.

**Returns:** *string[]*

___

###  clearSelection

▸ **clearSelection**(): *void*

*Overrides [AuBaseSelectorWidget](aubaseselectorwidget.md).[clearSelection](aubaseselectorwidget.md#abstract-clearselection)*

Sets the color value to `false` to reset the color selection.

**Returns:** *void*

___

###  closeSelector

▸ **closeSelector**(): *void*

Closes the color selector.

**Returns:** *void*

___

###  createPalette

▸ **createPalette**(`colors`: any, `svg`: any): *void*

Creates a palette.

**Parameters:**

Name | Type |
------ | ------ |
`colors` | any |
`svg` | any |

**Returns:** *void*

___

###  exportWidgetData

▸ **exportWidgetData**(`force`: boolean): *Promise‹ColorSelectorData›*

*Implementation of [IRestorableWidget](../interfaces/irestorablewidget.md)*

**Parameters:**

Name | Type |
------ | ------ |
`force` | boolean |

**Returns:** *Promise‹ColorSelectorData›*

___

###  resetPreloaderState

▸ **resetPreloaderState**(): *void*

*Inherited from [AuBaseWidget](aubasewidget.md).[resetPreloaderState](aubasewidget.md#resetpreloaderstate)*

**Returns:** *void*

___

###  restoreWidgetFromData

▸ **restoreWidgetFromData**(`widgetData`: ColorSelectorData, `force`: boolean): *Promise‹void›*

**Parameters:**

Name | Type |
------ | ------ |
`widgetData` | ColorSelectorData |
`force` | boolean |

**Returns:** *Promise‹void›*

___

###  showPreloader

▸ **showPreloader**(`isPreload`: boolean, `message`: string | string[], `timeout`: number): *void*

*Inherited from [AuBaseWidget](aubasewidget.md).[showPreloader](aubasewidget.md#showpreloader)*

Shows a preloader.

```
"onClick": [
  "{{#function main.showPreloader(true, 'Creating print files...')}}",
  "{{#function $['editor'].getHiResImages(800,800)}}",
  "{{#function main.showPreloader(false)}}"
]
```

**Parameters:**

Name | Type | Default | Description |
------ | ------ | ------ | ------ |
`isPreload` | boolean | - | If `true`, enables the preloader. |
`message` | string &#124; string[] |  [""] | A text message that appears next to the preloader.  |
`timeout` | number | 5 | - |

**Returns:** *void*

___

###  showToast

▸ **showToast**(`data?`: string, `duration?`: number): *void*

*Inherited from [AuBaseWidget](aubasewidget.md).[showToast](aubasewidget.md#showtoast)*

Shows a toast.

```
return editor.loadUserInfo(data)
    .catch(err => {
        this.widget.showToast("Error: Invalid data");
        console.log(err);
    });
```

**Parameters:**

Name | Type | Description |
------ | ------ | ------ |
`data?` | string | A string message to display in the toast. |
`duration?` | number | Defines how long to show the toast for.  |

**Returns:** *void*

___

###  toggleSelector

▸ **toggleSelector**(): *void*

Shows and hides the color selector.

**Returns:** *void*