feat: logic between label checkbox and functional checkboxes

telekom · Jul 19, 2021 · f6669b9 · f6669b9
1 parent 0d77ccc
commit f6669b9
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 13 deletions.
diff --git a/packages/components/src/components/checkbox-group/checkbox-group.tsx b/packages/components/src/components/checkbox-group/checkbox-group.tsx
@@ -32,31 +32,39 @@ export class CheckboxGroup {
     const checkboxes = Array.from(
       this.hostElement.shadowRoot.querySelectorAll('scale-checkbox')
     );
+    const labelBox = checkboxes[0];
     const checked = event.detail.checked;
     let countChecked = 0;
     let countUnchecked = 0;
     if (event.detail.id === 'checkbox1') {
+      labelBox.removeAttribute('indeterminate');
       checkboxes.forEach((checkbox) => {
         checkbox.checked = checked;
       });
-    } else {
-      for (let i = 1; i < checkboxes.length; i++) {
-        if (checkboxes[i].checked) {
-          countChecked = countChecked + 1;
-        } else {
-          countUnchecked = countUnchecked + 1;
-        }
+      return;
+    }
+
+    for (let i = 1; i < checkboxes.length; i++) {
+      if (checkboxes[i].checked) {
+        countChecked += 1;
+      } else {
+        countUnchecked += 1;
       }
     }
 
     if (countChecked === checkboxes.length - 1) {
-      checkboxes[0].checked = true;
+      labelBox.removeAttribute('indeterminate');
+      labelBox.checked = true;
       return;
     }
     if (countUnchecked === checkboxes.length - 1) {
-      checkboxes[0].checked = false;
+      labelBox.removeAttribute('indeterminate');
+      labelBox.checked = false;
       return;
     }
+    console.log('indeterminated state');
+    labelBox.setAttribute('indeterminate', 'true');
+	labelBox.removeAttribute('checked');
   }
 
   render() {
@@ -101,9 +109,6 @@ export class CheckboxGroup {
             </div>
           </div>
         </div>
-        {/* <button class="button" onClick={this.setCheckboxes}> 
-          click
-        </button>*/}
       </Host>
     );
   }

diff --git a/packages/components/src/components/checkbox/checkbox.tsx b/packages/components/src/components/checkbox/checkbox.tsx
@@ -90,7 +90,7 @@ export class Checkbox {
             <div class="checkbox__control-wrapper">
               <span class="checkbox__control"></span>
               {/* Accessibility: rendering the icon *only* when checked, otherwise is always visible in HCM */}
-              {this.checked && !this.indeterminate && (
+              {this.checked && (
                 <scale-icon-action-success
                   class="icon"
                   decorative