Update clear methods in composite and stack

src/style_manager/model/PropertyComposite.js

@@ -28,11 +28,20 @@ module.exports = Property.extend({
     this.listenTo(this, 'change:value', this.updateValues);
   },
 
+  /**
+   * Clear the value
+   * @return {this}
+   */
+  clearValue(opts = {}) {
+    this.get('properties').each(property => property.clearValue());
+    return Property.prototype.clearValue.apply(this, arguments);
+  },
+
   /**
    * Update property values
    */
   updateValues() {
-    const values = this.get('value').split(this.get('separator'));
+    const values = this.getFullValue().split(this.get('separator'));
     this.get('properties').each((property, i) => {
       const len = values.length;
       // Try to get value from a shorthand:

src/style_manager/view/PropertiesView.js

@@ -16,6 +16,7 @@ module.exports = Backbone.View.extend({
     this.onChange = o.onChange;
     this.onInputRender = o.onInputRender || {};
     this.customValue = o.customValue || {};
+    this.properties = [];
     const coll = this.collection;
     this.listenTo(coll, 'add', this.addTo);
     this.listenTo(coll, 'reset', this.render);
@@ -43,6 +44,7 @@ module.exports = Backbone.View.extend({
 
     view.render();
     const el = view.el;
+    this.properties.push(view);
 
     if (frag) {
       frag.appendChild(el);
@@ -52,6 +54,7 @@ module.exports = Backbone.View.extend({
   },
 
   render() {
+    this.properties = [];
     const fragment = document.createDocumentFragment();
     this.collection.each(model => this.add(model, fragment));
     this.$el.append(fragment);

src/style_manager/view/PropertyCompositeView.js

@@ -18,16 +18,12 @@ module.exports = PropertyView.extend({
       PropertyView.prototype.inputValueChanged.apply(this, args);
     }
   },
-  /*
-  clear(e) {
-    e && e.stopPropagation();
-    const target = this.getTargetModel();
-    target.removeStyle(this.model.get('property'));
-    if (!this.model.get('detached')) {
 
-    }
-    this.targetUpdated();
-  },*/
+  clear(e) {
+    const props = this.properties;
+    props && props.forEach(propView => propView.clear());
+    PropertyView.prototype.clear.apply(this, arguments);
+  },
 
   /**
    * Renders input
@@ -36,6 +32,7 @@ module.exports = PropertyView.extend({
     var model = this.model;
     var props = model.get('properties') || [];
     var self = this;
+    this.properties = [];
 
     if (props.length) {
       if (!this.$input) {
@@ -60,6 +57,7 @@ module.exports = PropertyView.extend({
         var PropertiesView = require('./PropertiesView');
         var propsView = new PropertiesView(this.getPropsConfig());
         this.$props = propsView.render().$el;
+        this.properties = propsView.properties;
         this.$el.find(`#${this.pfx}input-holder`).append(this.$props);
       }
     }

src/style_manager/view/PropertyStackView.js

@@ -23,6 +23,13 @@ module.exports = PropertyCompositeView.extend({
     this.delegateEvents();
   },
 
+  clear(e) {
+    e && e.stopPropagation();
+    this.model.get('layers').reset();
+    this.model.clearValue();
+    this.targetUpdated();
+  },
+
   /**
    * Fired when the target is updated.
    * With detached mode the component will be always empty as its value

src/style_manager/view/PropertyView.js

@@ -116,11 +116,6 @@ module.exports = Backbone.View.extend({
     e && e.stopPropagation();
     this.model.clearValue();
     this.targetUpdated();
-    /*
-    const target = this.getTargetModel();
-    target.removeStyle(this.model.get('property'));
-    this.targetUpdated();
-    */
   },
 
   /**