1window.angular && (function(angular) {
2  'use strict';
3
4  /**
5   *
6   * tableToolbar Component
7   *
8   * To use:
9   * The <table-toolbar> component expects an 'actions' attribute
10   * that should be an array of action objects.
11   * Each action object should have 'type', 'label', and 'file'
12   * properties.
13   *
14   * actions: [
15   *  {type: 'Edit', label: 'Edit', file: 'icon-edit.svg'},
16   *  {type: 'Delete', label: 'Edit', file: 'icon-trashcan.svg'}
17   * ]
18   *
19   * The 'type' property is a string value that will be emitted to the
20   * parent component when clicked.
21   *
22   * The 'label' property is a string value that will render as text in
23   * the button
24   *
25   * The 'file' property is a string value of the filename of the svg icon
26   * to provide <icon> directive.
27   *
28   */
29
30  const controller = function() {
31    /**
32     * Set defaults if properties undefined
33     * @param {[]} actions
34     */
35    const setActions = (actions = []) => {
36      return actions
37          .map((action) => {
38            if (action.type === undefined) {
39              return;
40            }
41            if (action.file === undefined) {
42              action.file = null;
43            }
44            return action;
45          })
46          .filter((action) => action);
47    };
48
49    /**
50     * Callback when button action clicked
51     * Emits the action type to the parent component
52     */
53    this.onClick = (action) => {
54      this.emitAction({action});
55    };
56
57    this.onClickClose = () => {
58      this.emitClose();
59    };
60
61    /**
62     * onInit Component lifecycle hook
63     */
64    this.$onInit = () => {
65      this.actions = setActions(this.actions);
66    };
67  };
68
69  /**
70   * Component template
71   */
72  const template = `
73    <div class="bmc-table__toolbar" ng-if="$ctrl.active">
74      <p class="toolbar__selection-count">{{$ctrl.selectionCount}} selected</p>
75      <div class="toolbar__batch-actions" ng-show="$ctrl.actions.length > 0">
76        <button
77          class="btn  btn-tertiary"
78          type="button"
79          aria-label="{{action.label}}"
80          ng-repeat="action in $ctrl.actions"
81          ng-click="$ctrl.onClick(action.type)">
82          <icon ng-if="action.file !== null"
83                ng-file="{{action.file}}"
84                aria-hidden="true">
85          </icon>
86          {{action.label || action.type}}
87        </button>
88        <button
89          class="btn  btn-tertiary  btn-close"
90          type="button"
91          aria-label="Cancel"
92          ng-click="$ctrl.onClickClose()">
93          Cancel
94        </button>
95      </div>
96    </div>`
97
98  /**
99   * Register tableToolbar component
100   */
101  angular.module('app.common.components').component('tableToolbar', {
102    controller,
103    template,
104    bindings: {
105      actions: '<',
106      selectionCount: '<',
107      active: '<',
108      emitAction: '&',
109      emitClose: '&'
110    }
111  })
112})(window.angular);