import Component from '@ember/component';
import { action, computed } from '@ember/object';
import { htmlSafe } from '@ember/template';

export default Component.extend({
  tagName: '',
  selectable: false,

  badgeStyle: computed('row.color', function () {
    return htmlSafe(`background-color: ${this.row.color}`);
  }),

  actions: {
    remove() {
      this.onRemove(this.get('row.id'));
    },
  },

  handleClick: action(function () {
    if (this.selectable) {
      this.onSelect(this.get('row.id'));
    }
  }),
});

import Component from '@ember/component';
import { action, computed } from '@ember/object';
import { htmlSafe } from '@ember/template';

export default class extends Component {
  tagName = '';

  selectable = false;

  @computed('row.color')
  get badgeStyle() {
    return htmlSafe(`background-color: ${this.row.color}`);
  }

  @action
  remove() {
    this.onRemove(this.get('row.id'));
  }

  @action
  handleClick() {
    if (this.selectable) {
      this.onSelect(this.get('row.id'));
    }
  }
}

Convert to ES6 class