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