How to use the phoenix/components/as-widget/list.extend function in phoenix

import Ember from 'ember';
import ListWidgetComponent from 'phoenix/components/as-widget/list';

export default ListWidgetComponent.extend({
  classNameBindings: [':team-unused-advisors'],

  name: 'Unused Advisors',
  emptyMessage: 'no unused advisors to contact.',
  listItemTemplateName: 'components/as-widget/team-unused-advisors/list-item',
  hasTeamMemberFilter: false,
  teamMembers: null,

  model: Ember.computed('teamMembers', function() {
    return this.get('teamMembers').sortBy('deliveryPerformance.unusedAdvisorsCount').reverse();
  })
});

import ListWidgetComponent from 'phoenix/components/as-widget/list';
import notify from 'phoenix/helpers/notify';

export default ListWidgetComponent.extend({
  classNameBindings: [':unused-advisors'],

  name: 'Unused Advisors',
  emptyMessage: 'no unused advisors to contact.',
  hasTeamMemberFilter: false,
  listItemTemplateName: 'components/as-widget/unused-advisors/list-item',
  store: null,

  actions: {
    removeUnusedAdvisor: function(unusedAdvisorId) {
      if (window.confirm('Are you sure you want to remove the advisor from the list?')) {
        this.get('store').findRecord('unusedAdvisor', unusedAdvisorId).then(function(unusedAdvisor) {
          unusedAdvisor.destroyRecord().then(function() {
            notify(`The advisor ${unusedAdvisor.get('advisor.name')} was removed from the list.`);
          });
        });

import Ember from 'ember';
import ListWidgetComponent from 'phoenix/components/as-widget/list';

export default ListWidgetComponent.extend({
  classNameBindings: [':interactions', ':scheduled-interactions'],

  name: 'Scheduled Interactions',

  hasTeamMemberFilter: Ember.computed.oneWay('isTeamView'),
  listItemTemplateName: 'components/as-widget/scheduled-interactions/list-item',
  emptyMessage: 'no scheduled interactions.'
});

import Ember from 'ember';
import ListWidgetComponent from 'phoenix/components/as-widget/list';

export default ListWidgetComponent.extend({
  classNameBindings: [':interactions'],

  interactionsWithIncompleteChecklistItems: Ember.computed.filterBy('arrangedContent', 'hasIncompleteChecklistItems', true),

  alert: Ember.computed('interactionsWithIncompleteChecklistItems.length', function() {
    let count = this.get('interactionsWithIncompleteChecklistItems.length');

    return `${count} ${count > 1 ? 'interactions have' : 'interaction has'} incomplete checklist items.`;
  }),

  displayAlert: Ember.computed('interactionsWithIncompleteChecklistItems.length', 'hasMoreItems', function() {
    return this.get('interactionsWithIncompleteChecklistItems.length') > 0 && this.get('hasMoreItems');
  })
});