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