import { computed } from '@ember/object';
import { htmlSafe } from '@ember/template';

// An Ember.Computed property for transforming an object into an
// html compatible style attribute
//
// ex. styleProps: { color: '#FF0', border-width: '1px' }
//     styleStr: styleStringProperty('styleProps') // color:#FF0;border-width:1px
export default function styleStringProperty(prop) {
  return computed(prop, function() {
    const styles = this.get(prop);
    let str = '';

    if (styles) {
      str = Object.keys(styles)
        .reduce(function(arr, key) {
          const val = styles[key];
          arr.push(key + ':' + (typeof val === 'number' ? val.toFixed(2) + 'px' : val));
          return arr;
        }, [])
        .join(';');
    }

    return htmlSafe(str);
  });
}

@@ -10,16 +10,21 @@
 computed
+, get
  %7D from 
@@ -440,17 +440,18 @@
 s = 
-this.get(
+get(this, 
 prop

Make the style-string property glimmer safe