blob: b15e4ed8418be62082abe5c263ea3d44f3e7331c (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
window.angular && (function(angular) {
'use strict';
/**
*
* tableCheckbox Component
*
*/
const controller = function($element) {
// <input> element ref needed to add indeterminate state
let inputEl;
/**
* Callback when the input select value changes
*/
this.onSelectChange = () => {
const checked = this.ngModel;
this.emitChange({checked});
};
/**
* onChanges Component lifecycle hook
*/
this.$onChanges = (onChangesObj) => {
const indeterminateChange = onChangesObj.indeterminate;
if (indeterminateChange && inputEl) {
inputEl.prop('indeterminate', this.indeterminate);
}
};
/**
* postLink Component lifecycle hook
*/
this.$postLink = () => {
inputEl = $element.find('input');
};
};
/**
* Component template
*/
const template = `
<div class="bmc-table__checkbox-container">
<label class="bmc-table__checkbox"
ng-class="{
'checked': $ctrl.ngModel,
'indeterminate': $ctrl.indeterminate
}">
<input type="checkbox"
class="bmc-table__checkbox-input"
ng-model="$ctrl.ngModel"
ng-change="$ctrl.onSelectChange()"
aria-label="Select row"/>
<span class="screen-reader-offscreen">Select row</span>
</label>
</div>`
/**
* Register tableCheckbox component
*/
angular.module('app.common.components').component('tableCheckbox', {
controller: ['$element', controller],
template,
bindings: {ngModel: '=', indeterminate: '<', emitChange: '&'}
})
})(window.angular);
|
