<!-- 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 and listen to its events. Before using these methods, you should get the module from the instance.

```js
// Listen to events
editor.on('style:sector:add', (sector) => { ... });

// Use the API
const styleManager = editor.StyleManager;
styleManager.addSector(...);
```

## Available Events

*   `style:sector:add` - Sector added. The [Sector] is passed as an argument to the callback.
*   `style:target` - Target selection changed. The target (or `null` in case the target is deselected) is passed as an argument to the callback.
*   `styleManager:update:target` - The target (Component or CSSRule) is changed
*   `styleManager:change` - Triggered on style property change from new selected component, the view of the property is passed as an argument to the callback
*   `styleManager:change:{propertyName}` - As above but for a specific style property

## Methods

*   [getConfig][2]
*   [addSector][3]
*   [getSector][4]
*   [getSectors][5]
*   [removeSector][6]
*   [addProperty][7]
*   [getProperty][8]
*   [getProperties][9]
*   [removeProperty][10]
*   [select][11]
*   [getSelected][12]
*   [getLastSelected][13]
*   [getSelectedParents][14]
*   [addStyleTargets][15]
*   [getBuiltIn][16]
*   [getBuiltInAll][17]
*   [addBuiltIn][18]
*   [addType][19]
*   [getType][20]
*   [getTypes][21]
*   [createType][22]

[Sector]: sector.html

[CssRule]: css_rule.html

[Component]: component.html

[Property]: property.html

## getConfig

Get configuration object

Returns **[Object][23]** 

## addSector

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

### Parameters

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

    *   `options.at` **[Number][26]?** 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][24]** Sector id
*   `opts`   (optional, default `{}`)

### Examples

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

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

## getSectors

Get all sectors.

### Parameters

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

### Examples

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

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

## removeSector

Remove sector by id.

### Parameters

*   `id` **[String][24]** Sector id

### Examples

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

Returns **[Sector]** Removed sector

## addProperty

Add new property to the sector.

### Parameters

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

    *   `opts.at` **[Number][26]?** 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 the property.

### Parameters

*   `sectorId` **[String][24]** Sector id.
*   `id` **[String][24]** Property id.

### Examples

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

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

## getProperties

Get all properties of the sector.

### Parameters

*   `sectorId` **[String][24]** Sector id.

### Examples

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

Returns **(Collection<[Property]> | null)** Collection of properties

## removeProperty

Remove the property.

### Parameters

*   `sectorId` **[String][24]** Sector id.
*   `id` **[String][24]** Property id.

### Examples

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

Returns **([Property] | null)** Removed property

## select

Select new target.
The target could be a Component, CSSRule, or a CSS selector string.

### Parameters

*   `target` **([Component] | [CSSRule] | [String][24])** 
*   `opts`   (optional, default `{}`)

### Examples

```javascript
// Select the first button in the current page
const wrapperCmp = editor.Pages.getSelected().getMainComponent();
const btnCmp = wrapperCmp.find('button')[0];
btnCmp && styleManager.select(btnCmp);

// Set as a target the CSS selector
styleManager.select('.btn > span');
```

Returns **[Array][28]<([Component] | [CSSRule])>** Array containing selected Components or CSSRules

## getSelected

Get the array of selected targets.

Returns **[Array][28]<([Component] | [CSSRule])>** 

## getLastSelected

Get the last selected target.
By default, the Style Manager shows styles of the last selected target.

Returns **([Component] | [CSSRule] | null)** 

## getSelectedParents

Get parent rules of the last selected target.

Returns **[Array][28]<[CSSRule]>** 

## addStyleTargets

Update selected targets with a custom style.

### Parameters

*   `style` **[Object][23]** Style object
*   `opts` **[Object][23]** Options (optional, default `{}`)

### Examples

```javascript
styleManager.addStyleTargets({ color: 'red' });
```

## getBuiltIn

Return built-in property definition

### Parameters

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

### Examples

```javascript
const widthPropDefinition = styleManager.getBuiltIn('width');
```

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

## getBuiltInAll

Get all the available built-in property definitions.

Returns **[Object][23]** 

## addBuiltIn

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

### Parameters

*   `prop` **[String][24]** Property name.
*   `definition` **[Object][23]** Property definition.

### Examples

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

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

## addType

Add new property type

### Parameters

*   `id` **[string][24]** Type ID
*   `definition` **[Object][23]** 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][24]** Type ID

Returns **[Object][23]** Type definition

## getTypes

Get all types

Returns **[Array][28]** 

## createType

Create new property from type

### Parameters

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

    *   `options.model` **[Object][23]** Custom model object (optional, default `{}`)
    *   `options.view` **[Object][23]** 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** 

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

[2]: #getconfig

[3]: #addsector

[4]: #getsector

[5]: #getsectors

[6]: #removesector

[7]: #addproperty

[8]: #getproperty

[9]: #getproperties

[10]: #removeproperty

[11]: #select

[12]: #getselected

[13]: #getlastselected

[14]: #getselectedparents

[15]: #addstyletargets

[16]: #getbuiltin

[17]: #getbuiltinall

[18]: #addbuiltin

[19]: #addtype

[20]: #gettype

[21]: #gettypes

[22]: #createtype

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

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

[25]: sector.html#properties

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

[27]: property.html#properties

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