# StyleManager

-   [addSector](#addsector)
-   [getSector](#getsector)
-   [getSectors](#getsectors)
-   [addProperty](#addproperty)
-   [getProperty](#getproperty)
-   [getProperties](#getproperties)
-   [getModelToStyle](#getmodeltostyle)
-   [render](#render)

With Style Manager you basically build categories (called sectors) of CSS properties which could
be used to custom components and classes.
You can init the editor with all sectors and properties via configuration

```js
var editor = grapesjs.init({
  ...
 styleManager: {...} // Check below for the possible properties
  ...
});
```

Before using methods you should get first the module from the editor instance, in this way:

```js
var styleManager = editor.StyleManager;
```

**Parameters**

-   `config` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** Configurations
    -   `config.sectors` **\[[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)>]** Array of possible sectors (optional, default `[]`)

**Examples**

```javascript
...
styleManager: {
   sectors: [{
     id: 'dim',
     name: 'Dimension',
     properties: [{
       name: 'Width',
       property: 'width',
       type: 'integer',
       units: ['px', '%'],
       defaults: 'auto',
       min: 0,
}],
    }],
}
...
```

# init

Initialize module. Automatically called with a new instance of the editor

**Parameters**

-   `config` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** Configurations

# addSector

Add new sector to the collection. If the sector with the same id already exists,
that one will be returned

**Parameters**

-   `id` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** Sector id
-   `sector` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** Object representing sector
    -   `sector.name` **\[[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)]** Sector's label (optional, default `''`)
    -   `sector.open` **\[[Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)]** Indicates if the sector should be opened (optional, default `true`)
    -   `sector.properties` **\[[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)>]** Array of properties (optional, default `[]`)

**Examples**

```javascript
var sector = styleManager.addSector('mySector',{
  name: 'My sector',
  open: true,
  properties: [{ name: 'My property'}]
});
```

Returns **Sector** Added Sector

# getSector

Get sector by id

**Parameters**

-   `id` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** Sector id

**Examples**

```javascript
var sector = styleManager.getSector('mySector');
```

Returns **(Sector | null)** 

# getSectors

Get all sectors

Returns **Sectors** Collection of sectors

# addProperty

Add property to the sector identified by id

**Parameters**

-   `sectorId` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** Sector id
-   `property.list` **\[[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)>]** List of possible options for radio and select types (optional, default `[]`)
-   `property.name` **\[[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)]** Name of the property (optional, default `''`)
-   `property.property` **\[[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)]** CSS property, eg. `min-height` (optional, default `''`)
-   `property.type` **\[[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)]** Type of the property: integer | radio | select | color | file | composite | stack (optional, default `''`)
-   `property.units` **\[[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)>]** Unit of measure available, eg. ['px','%','em']. Only for integer type (optional, default `[]`)
-   `property.unit` **\[[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)]** Default selected unit from `units`. Only for integer type (optional, default `''`)
-   `property.min` **\[[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)]** Min possible value. Only for integer type (optional, default `null`)
-   `property` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** Property object
    -   `property.defaults` **\[[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)]** Default value (optional, default `''`)
    -   `property.info` **\[[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)]** Some description (optional, default `''`)
    -   `property.icon` **\[[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)]** Class name. If exists no text will be displayed (optional, default `''`)
    -   `property.preview` **\[[Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)]** Show layers preview. Only for stack type (optional, default `false`)
    -   `property.functionName` **\[[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)]** Indicates if value need to be wrapped in some function, for istance `transform: rotate(90deg)` (optional, default `''`)
    -   `property.properties` **\[[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)>]** Nested properties for composite and stack type (optional, default `[]`)
    -   `property.layers` **\[[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)>]** Layers for stack properties (optional, default `[]`)
    -   `property.max` **\[[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)]** Max possible value. Only for integer type (optional, default `null`)

**Examples**

```javascript
var property = styleManager.addProperty('mySector',{
  name: 'Minimum height',
  property: 'min-height',
  type: 'select',
  defaults: '100px',
  list: [{
    value: '100px',
    name: '100',
   },{
     value: '200px',
     name: '200',
   }],
});
```

Returns **(Property | null)** Added Property or `null` in case sector doesn't exist

# getProperty

Get property by its CSS name and sector id

**Parameters**

-   `sectorId` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** Sector id
-   `name` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** CSS property name, eg. 'min-height'

**Examples**

```javascript
var property = styleManager.getProperty('mySector','min-height');
```

Returns **(Property | null)** 

# getProperties

Get properties of the sector

**Parameters**

-   `sectorId` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** Sector id

**Examples**

```javascript
var properties = styleManager.getProperties('mySector');
```

Returns **Properties** Collection of properties

# getModelToStyle

Get what to style inside Style Manager. If you select the component
without classes the entity is the Component itself and all changes will
go inside its 'style' property. Otherwise, if the selected component has
one or more classes, the function will return the corresponding CSS Rule

**Parameters**

-   `model` **Model** 

Returns **Model** 

# render

Render sectors and properties

Returns **[HTMLElement](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)** 

# build

Build props object by their name

**Parameters**

-   `props` **([Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)> | [string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String))** Array of properties name

Returns **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)>** 

# build

Build composite value

**Parameters**

-   `selectedEl` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** Selected element
-   `propertyView` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** Property view
-   `opts` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** Options

Returns **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** 

# addTo

Add to collection

**Parameters**

-   `Object`  Model
-   `model`  

Returns **Any** Object

# targetUpdated

Fired when the target is changed

# targetUpdated

Fired when the target is updated.
With detached mode the component will be always empty as its value
so we gonna check all props and fine if there is some differences.

**Parameters**

-   `args` **...Any** 

# addToCollection

Add new object to collection

**Parameters**

-   `Object`  Model
-   `Object`  Fragment collection
-   `model`  
-   `fragmentEl`  
-   `index` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** Index of append

Returns **Any** Object Object created

# updateVisibility

If all properties are hidden this will hide the sector

# updateOpen

Update visibility

# show

Show the content of the sector

# hide

Hide the content of the sector

# toggle

Toggle visibility

# clear

Clear the property

# getClearEl

Get clear element

Returns **[HTMLElement](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)** 

# getTarget

Returns selected target which should have 'style' property

Returns **(Model | null)** 

# getTargetModel

Returns Styleable model

Returns **(Model | null)** 

# getHelperModel

Returns helper Styleable model

Returns **(Model | null)** 

# valueUpdated

Fired when the input value is updated

# valueUpdated

Fired when the input value is updated

**Parameters**

-   `args` **...Any** 

# valueUpdated

Fired when the input value is updated

# elementUpdated

Fired when the element of the property is updated

# sameValue

Checks if the value from selected component is the
same of the value of the model

Returns **[Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** 

# getComponentValue

Get the value from the selected component of this property

Returns **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** 

# getDefaultValue

Get default value of the property

Returns **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** 

# fetchFromFunction

Fetch the string from function type value

**Parameters**

-   `v` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** Function type value

Returns **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** 

# getValueForTarget

Returns value from inputs

Returns **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** 

# getValueForTarget

Returns value from inputs

Returns **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** 

# getInputValue

Returns value from input

Returns **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** 

# getInputValue

Returns value from input

Returns **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** 

# valueChanged

Property was changed, so I need to update the component too

**Parameters**

-   `e` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** Events
-   `val` **Mixed** Value
-   `opt` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** Options

# valueChanged

Emitted when the value is changed

# updateTargetStyle

Update target style

**Parameters**

-   `propertyValue` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** 
-   `propertyName` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** 
-   `opts` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** 

# isTargetStylable

Check if target is stylable with this property
The target could be the Component as the CSS Rule

Returns **[Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** 

# isComponentStylable

Check if the selected component is stylable with this property
The target could be the Component as the CSS Rule

Returns **[Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** 

# setValue

Set value to the input

**Parameters**

-   `value` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** 
-   `force` **[Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** 

# setValue

**Parameters**

-   `value`  

# renderField

Render field property

# renderTemplate

Render loaded template

# renderTemplate

# renderInput

Renders input, to override

# renderInput

# renderInput

# renderInput

# renderInput

Renders input

# renderInput

**Parameters**

-   `args` **...Any** 

# renderInputRequest

Request to render input of the property

# cleanValue

Clean input

# cleanValue

# setPreviewView

Change visibility of the preview box

**Parameters**

-   `bool`  Visibility
-   `v`  

Returns **Any** void

# spreadUrl

Spread url

**Parameters**

-   `string`  Url
-   `url`  

Returns **Any** void

# setPreview

Shows file preview

**Parameters**

-   `string`  Value
-   `url`  

# removeFile

Remove file from input

**Parameters**

-   `args` **...Any** 

Returns **Any** void

# openAssetManager

Open dialog for image selecting

**Parameters**

-   `e` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** Event

Returns **Any** void

# getPropsConfig

Returns configurations that should be past to properties

**Parameters**

-   `opts` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** 

Returns **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** 

# getPropsConfig

**Parameters**

-   `opts`  

# valueOnIndex

Extract string from composite value

**Parameters**

-   `index` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** Index
-   `view` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** Property view

Returns **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** 

# getLayers

Returns the collection of layers

Returns **Collection** 

# indexChanged

Triggered when another layer has been selected.
This allow to move all rendered properties to a new
selected layer

**Parameters**

-   `Event`  
-   `e`  

Returns **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** 

# getStackValues

Get array of values from layers

Returns **Any** Array

# addLayer

Add layer

**Parameters**

-   `Event`  
-   `e`  

Returns **Any** Object

# createValue

Create value by layers

Returns **Any** string

# renderLayers

Render layers

Returns **Any** self

# getLayersFromTarget

Returns array suitale for layers from target style
Only for detached stacks

Returns **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)>** 

# refreshLayers

Refresh layers

# deselectAll

Deselect all

Returns **Any** void

# initSorter

Delegate sorting

**Parameters**

-   `e` **[Event](https://developer.mozilla.org/en-US/docs/Web/API/Event)** 

# getProps

Returns properties

Returns **(Collection | null)** 

# onPreview

Default method for changing preview box

**Parameters**

-   `props` **Collection** 
-   `$el` **[Element](https://developer.mozilla.org/en-US/docs/Web/API/Element)** 

# showProps

Show inputs on this layer

# remove

**Parameters**

-   `e`  

# updateIndex

Update index

**Parameters**

-   `Event`  
-   `e`  

Returns **Any** void

# getIndex

Fetch model index

Returns **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** Index
