docs(checkbox): add indeterminate and disabled checkbox examples (#18987)

* docs(checkbox): add indeterminate and disabled checkbox examples

* Make fixes

Author: livvielin

src/components-examples/material/checkbox/checkbox-overview/checkbox-overview-example.css

@@ -1 +1,12 @@
-/** No CSS for this example */
+.example-section {
+  margin: 12px 0;
+}
+
+.example-margin {
+  margin: 0 12px;
+}
+
+ul {
+  list-style-type: none;
+  margin-top: 4px;
+}

src/components-examples/material/checkbox/checkbox-overview/checkbox-overview-example.html

@@ -1 +1,26 @@
-<mat-checkbox>Check me!</mat-checkbox>
+<section class="example-section">
+  <mat-checkbox class="example-margin">Check me!</mat-checkbox>
+  <mat-checkbox class="example-margin" [disabled]="true">Disabled</mat-checkbox>
+</section>
+
+<section class="example-section">
+  <span class="example-list-section">
+    <mat-checkbox class="example-margin"
+                  [checked]="allComplete"
+                  [indeterminate]="someComplete()"
+                  (change)="setAll($event.checked)">
+      {{task.name}}
+    </mat-checkbox>
+  </span>
+  <span class="example-list-section">
+    <ul>
+      <li *ngFor="let subtask of task.subtasks">
+        <mat-checkbox [(ngModel)]="subtask.completed"
+                      [color]="subtask.color"
+                      (ngModelChange)="updateAllComplete()">
+          {{subtask.name}}
+        </mat-checkbox>
+      </li>
+    </ul>
+  </span>
+</section>

src/components-examples/material/checkbox/checkbox-overview/checkbox-overview-example.ts

@@ -1,4 +1,12 @@
 import {Component} from '@angular/core';
+import {ThemePalette} from '@angular/material/core';
+
+export interface Task {
+  name: string;
+  completed: boolean;
+  color: ThemePalette;
+  subtasks?: Task[];
+}
 
 /**
  * @title Basic checkboxes
@@ -8,4 +16,36 @@ import {Component} from '@angular/core';
   templateUrl: 'checkbox-overview-example.html',
   styleUrls: ['checkbox-overview-example.css'],
 })
-export class CheckboxOverviewExample {}
+export class CheckboxOverviewExample {
+  task: Task = {
+    name: 'Indeterminate',
+    completed: false,
+    color: 'primary',
+    subtasks: [
+      {name: 'Primary', completed: false, color: 'primary'},
+      {name: 'Accent', completed: false, color: 'accent'},
+      {name: 'Warn', completed: false, color: 'warn'}
+    ]
+  };
+
+  allComplete: boolean = false;
+
+  updateAllComplete() {
+    this.allComplete = this.task.subtasks != null && this.task.subtasks.every(t => t.completed);
+  }
+
+  someComplete(): boolean {
+    if (this.task.subtasks == null) {
+      return false;
+    }
+    return this.task.subtasks.filter(t => t.completed).length > 0 && !this.allComplete;
+  }
+
+  setAll(completed: boolean) {
+    this.allComplete = completed;
+    if (this.task.subtasks == null) {
+      return;
+    }
+    this.task.subtasks.forEach(t => t.completed = completed);
+  }
+}

src/components-examples/material/checkbox/index.ts

@@ -1,3 +1,4 @@
+import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatCardModule} from '@angular/material/card';
@@ -18,6 +19,7 @@ const EXAMPLES = [
 
 @NgModule({
   imports: [
+    CommonModule,
     MatCardModule,
     MatCheckboxModule,
     MatRadioModule,

src/dev-app/checkbox/BUILD.bazel

@@ -11,6 +11,7 @@ ng_module(
         ":checkbox_demo_scss",
     ],
     deps = [
+        "//src/components-examples/material/checkbox",
         "//src/material/checkbox",
         "//src/material/core",
         "//src/material/form-field",

src/dev-app/checkbox/checkbox-demo-module.ts

@@ -7,6 +7,7 @@
  */
 
 import {CommonModule} from '@angular/common';
+import {CheckboxExamplesModule} from '@angular/components-examples/material/checkbox';
 import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatCheckboxModule} from '@angular/material/checkbox';
@@ -25,6 +26,7 @@ import {
 
 @NgModule({
   imports: [
+    CheckboxExamplesModule,
     CommonModule,
     FormsModule,
     MatCheckboxModule,

src/dev-app/checkbox/checkbox-demo.html

@@ -245,3 +245,7 @@ <h5>No animations</h5>
     </mat-checkbox>
   </div>
 </div>
+
+<h1>Overview example</h1>
+<checkbox-overview-example></checkbox-overview-example>
+