From 074e97a429adebb4ced1fc95abf2017027f9fb82 Mon Sep 17 00:00:00 2001
From: Iakovleva Margarita <naruyaoi@yandex.ru>
Date: Wed, 11 Sep 2019 08:37:32 +0300
Subject: [PATCH] feat(docs): checkbox indeterminate example (#236)

---
 .../checkbox-indeterminate-example.css        |  2 +-
 .../checkbox-indeterminate-example.html       |  6 ++-
 .../checkbox-indeterminate-example.ts         | 52 ++++++++++++++++++-
 3 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/packages/mosaic-examples/checkbox-indeterminate/checkbox-indeterminate-example.css b/packages/mosaic-examples/checkbox-indeterminate/checkbox-indeterminate-example.css
index 743230875..e89394307 100644
--- a/packages/mosaic-examples/checkbox-indeterminate/checkbox-indeterminate-example.css
+++ b/packages/mosaic-examples/checkbox-indeterminate/checkbox-indeterminate-example.css
@@ -1 +1 @@
-/** No CSS for this example */
+/** No CSS for this example **/
diff --git a/packages/mosaic-examples/checkbox-indeterminate/checkbox-indeterminate-example.html b/packages/mosaic-examples/checkbox-indeterminate/checkbox-indeterminate-example.html
index a5730d4aa..2bbf94841 100644
--- a/packages/mosaic-examples/checkbox-indeterminate/checkbox-indeterminate-example.html
+++ b/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>
+
diff --git a/packages/mosaic-examples/checkbox-indeterminate/checkbox-indeterminate-example.ts b/packages/mosaic-examples/checkbox-indeterminate/checkbox-indeterminate-example.ts
index 0ec92c8d1..59d53bfff 100644
--- a/packages/mosaic-examples/checkbox-indeterminate/checkbox-indeterminate-example.ts
+++ b/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;
+    }
+}
+