<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

## StyleManager

With Style Manager you build categories (called sectors) of CSS properties which could be used to customize the style of components.
You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object][1]

```js
const editor = grapesjs.init({
 styleManager: {
   // options
 }
})
```

Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance

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

*   [getConfig][2]
*   [addSector][3]
*   [getSector][4]
*   [removeSector][5]
*   [getSectors][6]
*   [addProperty][7]
*   [getProperty][8]
*   [removeProperty][9]
*   [getProperties][10]
*   [getModelToStyle][11]
*   [addType][12]
*   [getType][13]
*   [getTypes][14]
*   [createType][15]

[Sector]: sector.html

[CssRule]: css_rule.html

[Component]: component.html

[Property]: property.html

## getConfig

Get configuration object

Returns **[Object][16]** 

## addSector

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

### Parameters

*   `id` **[String][17]** Sector id
*   `sector` **[Object][16]** Sector definition. Check the [available properties][18]
*   `options` **[Object][16]** Options (optional, default `{}`)

    *   `options.at` **[Number][19]?** Position index (by default, will be appended at the end).

### Examples

```javascript
const sector = styleManager.addSector('mySector',{
  name: 'My sector',
  open: true,
  properties: [{ name: 'My property'}]
}, { at: 0 });
// With `at: 0` we place the new sector at the beginning of the list
```

Returns **[Sector]** Added Sector

## getSector

Get sector by id.

### Parameters

*   `id` **[String][17]** Sector id
*   `opts`   (optional, default `{}`)

### Examples

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

Returns **([Sector] | null)** 

## removeSector

Remove sector by id.

### Parameters

*   `id` **[String][17]** Sector id

### Examples

```javascript
const removed = styleManager.removeSector('mySector');
```

Returns **[Sector]** Removed sector

## getSectors

Get all sectors.

### Parameters

*   `opts`   (optional, default `{}`)

### Examples

```javascript
const sectors = styleManager.getSectors();
```

Returns **Collection<[Sector]>** Collection of sectors

## addProperty

Add new property to the sector.

### Parameters

*   `sectorId` **[String][17]** Sector id.
*   `property` **[Object][16]** Property definition. Check the [base available properties][20] + others based on the `type` of your property.
*   `opts`   (optional, default `{}`)
*   `options` **[Object][16]** Options (optional, default `{}`)

    *   `options.at` **[Number][19]?** Position index (by default, will be appended at the end).

### Examples

```javascript
const property = styleManager.addProperty('mySector', {
  label: 'Minimum height',
  property: 'min-height',
  type: 'select',
  default: '100px',
  options: [
   { id: '100px', label: '100' },
   { id: '200px', label: '200' },
  ],
}, { at: 0 });
```

Returns **([Property] | null)** Added property or `null` in case the sector doesn't exist.

## getProperty

Get property by its CSS name and sector id

### Parameters

*   `sectorId` **[string][17]** Sector id
*   `name` **[string][17]** CSS property name (or id), eg. 'min-height'

### Examples

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

Returns **(Property | null)** 

## removeProperty

Remove a property from the sector

### Parameters

*   `sectorId` **[string][17]** Sector id
*   `name` **[string][17]** CSS property name, eg. 'min-height'

### Examples

```javascript
const property = styleManager.removeProperty('mySector', 'min-height');
```

Returns **Property** Removed property

## getProperties

Get properties of the sector

### Parameters

*   `sectorId` **[string][17]** 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** 
*   `options`   (optional, default `{}`)

Returns **Model** 

## addType

Add new property type

### Parameters

*   `id` **[string][17]** Type ID
*   `definition` **[Object][16]** Definition of the type. Each definition contains
    `model` (business logic), `view` (presentation logic)
    and `isType` function which recognize the type of the
    passed entity

### Examples

```javascript
styleManager.addType('my-custom-prop', {
   create({ props, change }) {
     const el = document.createElement('div');
     el.innerHTML = '<input type="range" class="my-input" min="10" max="50"/>';
     const inputEl = el.querySelector('.my-input');
     inputEl.addEventListener('change', event => change({ event })); // change will trigger the emit
     inputEl.addEventListener('input', event => change({ event, complete: false }));
     return el;
   },
   emit({ props, updateStyle }, { event, complete }) {
     const { value } = event.target;
     const valueRes = value + 'px';
     // Pass a string value for the exact CSS property or an object containing multiple properties
     // eg. updateStyle({ [props.property]: valueRes, color: 'red' });
     updateStyle(valueRes, { complete });
   },
   update({ value, el }) {
     el.querySelector('.my-input').value = parseInt(value, 10);
   },
   destroy() {
     // In order to prevent memory leaks, use this method to clean, eventually, created instances, global event listeners, etc.
   }
})
```

## getType

Get type

### Parameters

*   `id` **[string][17]** Type ID

Returns **[Object][16]** Type definition

## getTypes

Get all types

Returns **[Array][21]** 

## createType

Create new property from type

### Parameters

*   `id` **[string][17]** Type ID
*   `options` **[Object][16]** Options (optional, default `{}`)

    *   `options.model` **[Object][16]** Custom model object (optional, default `{}`)
    *   `options.view` **[Object][16]** Custom view object (optional, default `{}`)

### Examples

```javascript
const propView = styleManager.createType('integer', {
 model: {units: ['px', 'rem']}
});
propView.render();
propView.model.on('change:value', ...);
someContainer.appendChild(propView.el);
```

Returns **PropertyView** 

## getBuiltIn

Return built-in property definition

### Parameters

*   `prop` **[String][17]** Property name.

Returns **([Object][16] | null)** Property definition.

## getBuiltInAll

Get all the available built-in property definitions.

Returns **[Object][16]** 

## addBuiltIn

Add built-in property definition.
If the property exists already, it will extend it.

### Parameters

*   `prop` **[String][17]** Property name.
*   `definition` **[Object][16]** Property definition.

### Examples

```javascript
const sector = styleManager.addBuiltIn('new-property', {
 type: 'select',
 default: 'value1',
 options: [{ id: 'value1', label: 'Some label' }, ...],
})
```

Returns **[Object][16]** Added property definition.

[1]: https://github.com/artf/grapesjs/blob/master/src/style_manager/config/config.js

[2]: #getconfig

[3]: #addsector

[4]: #getsector

[5]: #removesector

[6]: #getsectors

[7]: #addproperty

[8]: #getproperty

[9]: #removeproperty

[10]: #getproperties

[11]: #getmodeltostyle

[12]: #addtype

[13]: #gettype

[14]: #gettypes

[15]: #createtype

[16]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object

[17]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String

[18]: sector.html#properties

[19]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number

[20]: property.html#properties

[21]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array