angular + es6 + jspm + system.js: directive subclassing

common.js

import angular from 'angular';
import _ from 'lodash';

let template = `
  <div>
    <h1>{{ data.title }}</h1>
    <div ng-transclude></div>
  </div>
`;

export var CommonModule = angular.module('App.common', [])
.factory('Card', function(){
  class Card{
    constructor(config){
      angular.extend(this, config);
      this.directiveName = 'Card';
      this.template = template;
      this.replace = true;
      this.transclude = true;
      this.bindToController = true;
      this.scope = {
        data: '='
      };
    }
    
    link(scope, element, attr){
      element.on('mouserenter', ()=>{
        console.log(this.directiveName);
      })
    }
    // DI
    controller($http, $scope){
      
    }
  }

  return Card;
})
.factory('MiniCard', function(Card){
  class MiniCard extends Card {
    constructor(config){
      super(config);
      this.template = `
        <div>
          <small>I'm a mini card</small>
        </div>
      `;
      
      this.directiveName = 'miniCard';
      
      this.replace = false;
      this.transclude = false;
    }
  }
})
.directive('card', Card => {
  return new Card();
})
.directive('miniCard', MiniCard =>{
  return new MiniCard();
});