feat(docs): checkbox indeterminate example (#236)

packages/mosaic-examples/checkbox-indeterminate/checkbox-indeterminate-example.css

@@ -1 +1 @@
-/** No CSS for this example */
+/** No CSS for this example **/

packages/mosaic-examples/checkbox-indeterminate/checkbox-indeterminate-example.html

@@ -1 +1,5 @@
-<mc-checkbox [checked]="true" [indeterminate]="true"> Indeterminate</mc-checkbox>
+<div class="mc-body">
+    <mc-checkbox  [checked]="parentChecked" [indeterminate]="parentIndeterminate" (change)="toggleChecked()" > All fruits</mc-checkbox>
+    <p *ngFor="let fruit of fruits; let i = index"><mc-checkbox [checked]="fruit.checked" (change)="updateCheckboxes(i)" >{{fruit.name}}</mc-checkbox>
+</div>
+

packages/mosaic-examples/checkbox-indeterminate/checkbox-indeterminate-example.ts

@@ -1,4 +1,10 @@
-import { Component } from '@angular/core';
+import { ChangeDetectorRef, Component } from '@angular/core';
+
+
+interface ICheckbox {
+    name: string;
+    checked: boolean;
+}
 
 
 /**
@@ -9,4 +15,46 @@ import { Component } from '@angular/core';
     templateUrl: 'checkbox-indeterminate-example.html',
     styleUrls: ['checkbox-indeterminate-example.css']
 })
-export class CheckboxIndeterminateExample {}
+export class CheckboxIndeterminateExample {
+    parentIndeterminate = true;
+    parentChecked = true;
+
+    fruits: ICheckbox[] = [
+        { name: 'Apples', checked: true },
+        { name: 'Bananas', checked: false },
+        { name: 'Grapes', checked: false }
+    ];
+
+    constructor(private ref: ChangeDetectorRef) {}
+
+    updateCheckboxes(index: number) {
+        this.toggleFruitChecked(index);
+        this.updateIndeterminate();
+        this.ref.detectChanges();
+    }
+
+    toggleFruitChecked(index: number) {
+        this.fruits[index].checked = !this.fruits[index].checked;
+    }
+
+    toggleChecked() {
+        this.parentChecked = !this.parentChecked;
+        for (const fruit of this.fruits) {
+            fruit.checked = this.parentChecked;
+        }
+        this.parentIndeterminate = false;
+        this.ref.detectChanges();
+    }
+
+    updateIndeterminate() {
+        let checked: number = 0;
+        let unchecked: number = 0;
+        const length = this.fruits.length;
+        this.fruits.forEach((fruit) => {
+            fruit.checked ? checked++ : unchecked++;
+        });
+        this.parentIndeterminate = (checked !== length && unchecked !== length);
+        this.parentChecked = this.parentIndeterminate || length === checked;
+    }
+}
+