chore: enforce consistency in demo-app (#10657)

Author: rafaelss95

src/demo-app/a11y/a11y-module.ts

@@ -6,19 +6,19 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
-import {ACCESSIBILITY_DEMO_ROUTES} from './routes';
 import {DemoMaterialModule} from '../demo-material-module';
 import {AccessibilityDemo, AccessibilityHome} from './a11y';
 import {AutocompleteAccessibilityDemo} from './autocomplete/autocomplete-a11y';
-import {ButtonAccessibilityDemo} from './button/button-a11y';
 import {ButtonToggleAccessibilityDemo} from './button-toggle/button-toggle-a11y';
+import {ButtonAccessibilityDemo} from './button/button-a11y';
 import {CardAccessibilityDemo} from './card/card-a11y';
 import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y';
 import {ChipsAccessibilityDemo} from './chips/chips-a11y';
+import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
 import {
   DialogAccessibilityDemo,
   DialogAddressFormDialog,
@@ -29,31 +29,32 @@ import {
 } from './dialog/dialog-a11y';
 import {ExpansionPanelAccessibilityDemo} from './expansion/expansion-a11y';
 import {GridListAccessibilityDemo} from './grid-list/grid-list-a11y';
-import {ListAccessibilityDemo} from './list/list-a11y';
-import {RadioAccessibilityDemo} from './radio/radio-a11y';
-import {ToolbarAccessibilityDemo} from './toolbar/toolbar-a11y';
-import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
 import {IconAccessibilityDemo} from './icon/icon-a11y';
 import {InputAccessibilityDemo} from './input/input-a11y';
+import {ListAccessibilityDemo} from './list/list-a11y';
 import {MenuAccessibilityDemo} from './menu/menu-a11y';
 import {ProgressBarAccessibilityDemo} from './progress-bar/progress-bar-a11y';
 import {ProgressSpinnerAccessibilityDemo} from './progress-spinner/progress-spinner-a11y';
-import {SliderAccessibilityDemo} from './slider/slider-a11y';
+import {RadioAccessibilityDemo} from './radio/radio-a11y';
+import {ACCESSIBILITY_DEMO_ROUTES} from './routes';
+import {SelectAccessibilityDemo} from './select/select-a11y';
+import {SidenavBasicAccessibilityDemo} from './sidenav/basic-sidenav-a11y';
+import {SidenavDualAccessibilityDemo} from './sidenav/dual-sidenav-a11y';
+import {SidenavMobileAccessibilityDemo} from './sidenav/mobile-sidenav-a11y';
+import {SidenavAccessibilityDemo} from './sidenav/sidenav-a11y';
 import {SlideToggleAccessibilityDemo} from './slide-toggle/slide-toggle-a11y';
+import {SliderAccessibilityDemo} from './slider/slider-a11y';
 import {SnackBarAccessibilityDemo} from './snack-bar/snack-bar-a11y';
-import {SelectAccessibilityDemo} from './select/select-a11y';
 import {TableAccessibilityDemo} from './table/table-a11y';
 import {
-  TabsAccessibilityDemo,
-  SunnyTabContent,
-  RainyTabContent,
   FoggyTabContent,
+  RainyTabContent,
+  SunnyTabContent,
+  TabsAccessibilityDemo,
 } from './tabs/tabs-a11y';
+import {ToolbarAccessibilityDemo} from './toolbar/toolbar-a11y';
 import {TooltipAccessibilityDemo} from './tooltip/tooltip-a11y';
-import {SidenavAccessibilityDemo} from './sidenav/sidenav-a11y';
-import {SidenavBasicAccessibilityDemo} from './sidenav/basic-sidenav-a11y';
-import {SidenavDualAccessibilityDemo} from './sidenav/dual-sidenav-a11y';
-import {SidenavMobileAccessibilityDemo} from './sidenav/mobile-sidenav-a11y';
+
 
 @NgModule({
   imports: [
@@ -105,11 +106,11 @@ export class AccessibilityRoutingModule {}
     SidenavBasicAccessibilityDemo,
     SidenavDualAccessibilityDemo,
     SidenavMobileAccessibilityDemo,
-    SliderAccessibilityDemo,
     SlideToggleAccessibilityDemo,
+    SliderAccessibilityDemo,
     SnackBarAccessibilityDemo,
-    TableAccessibilityDemo,
     SunnyTabContent,
+    TableAccessibilityDemo,
     TabsAccessibilityDemo,
     ToolbarAccessibilityDemo,
     TooltipAccessibilityDemo,

src/demo-app/a11y/a11y.ts

@@ -6,10 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, ElementRef, OnDestroy, ViewChild, ViewEncapsulation} from '@angular/core';
+import {Component, ElementRef, OnDestroy, ViewChild} from '@angular/core';
 import {NavigationEnd, Router} from '@angular/router';
 import {Subscription} from 'rxjs';
 
+
 @Component({
   moduleId: module.id,
   selector: 'accessibility-home',
@@ -22,10 +23,9 @@ export class AccessibilityHome {}
   selector: 'accessibility-demo',
   templateUrl: 'a11y.html',
   styleUrls: ['a11y.css'],
-  encapsulation: ViewEncapsulation.None,
 })
 export class AccessibilityDemo implements OnDestroy {
-  currentComponent: string = '';
+  currentComponent = '';
 
   fullscreen = false;
 
@@ -67,8 +67,8 @@ export class AccessibilityDemo implements OnDestroy {
   constructor(router: Router) {
     this._routerSubscription = router.events.subscribe((e) => {
       if (e instanceof NavigationEnd) {
-        let fragments = e.url.split('/');
-        let nav = this.navItems.find(navItem => {
+        const fragments = e.url.split('/');
+        const nav = this.navItems.find(navItem => {
           return fragments[fragments.length - 1] === navItem.route;
         });
         this.currentComponent = nav ? nav.name : '';

src/demo-app/a11y/button/button-a11y.ts

@@ -9,6 +9,7 @@
 import {Component} from '@angular/core';
 import {MatSnackBar} from '@angular/material';
 
+
 @Component({
   moduleId: module.id,
   selector: 'button-a11y',

src/demo-app/a11y/card/card-a11y.html

@@ -1,7 +1,7 @@
 <section>
   <h2>Dogs group</h2>
   <p>Showing a card with a group of content.</p>
-  <mat-card class="example-card" role="group">
+  <mat-card class="demo-card" role="group">
     <mat-card-content>
       <p>Herding Group</p>
       <p>Hound Group</p>
@@ -19,15 +19,15 @@ <h2>Dogs group</h2>
 <section>
   <h2>Husky</h2>
   <p>Showing a card with title only.</p>
-  <mat-card class="example-card">
+  <mat-card class="demo-card">
     Siberian Husky
   </mat-card>
 </section>
 
 <section>
   <h2>Malamute</h2>
   <p>Showing a Card with title and subtitle.</p>
-  <mat-card class="example-card">
+  <mat-card class="demo-card">
     <mat-card-title>Alaskan Malamute</mat-card-title>
     <mat-card-subtitle>Dog breed</mat-card-subtitle>
   </mat-card>
@@ -37,7 +37,7 @@ <h2>Malamute</h2>
 <section>
   <h2>German Shepherd</h2>
   <p>Showing a card with title, subtitle, and a footer.</p>
-  <mat-card class="example-card">
+  <mat-card class="demo-card">
     <mat-card-subtitle>Dog breed</mat-card-subtitle>
     <mat-card-title>German Shepherd</mat-card-title>
     <mat-card-content>
@@ -54,7 +54,7 @@ <h2>German Shepherd</h2>
 <section>
   <h2>Dachshund</h2>
   <p>Showing a card with title, subtitle, and avatar as header and a card image.</p>
-  <mat-card class="example-card">
+  <mat-card class="demo-card">
     <mat-card-header>
       <img mat-card-avatar src="a11y/card/assets/dachshund-avatar.jpg" aria-label="Dachshund avatar">
       <mat-card-title>Dachshund</mat-card-title>
@@ -71,7 +71,7 @@ <h2>Dachshund</h2>
 <section>
   <h2>Shiba Inu</h2>
   <p>Showing a card with header, content, image, and two action buttons: "share" and "like".</p>
-  <mat-card class="example-card">
+  <mat-card class="demo-card">
     <mat-card-header>
       <img mat-card-avatar src="a11y/card/assets/shiba-inu-avatar.jpg" aria-label="Shiba Inu avatar">
       <mat-card-title>Shiba Inu</mat-card-title>

src/demo-app/a11y/card/card-a11y.scss

@@ -1,7 +1,7 @@
-.example-card button {
+.demo-card button {
   text-transform: uppercase;
 }
 
-.example-card {
+.demo-card {
   max-width: 450px;
 }

src/demo-app/a11y/card/card-a11y.ts

@@ -9,6 +9,7 @@
 import {Component} from '@angular/core';
 import {MatSnackBar} from '@angular/material';
 
+
 @Component({
   moduleId: module.id,
   selector: 'card-a11y',

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

@@ -24,7 +24,7 @@ <h2>Nested checklist</h2>
                    (change)="setAllCompleted(task.subtasks, $event.checked)">
         {{task.name}}
       </mat-checkbox>
-      <div class="sub-list">
+      <div class="demo-sub-list">
         <div *ngFor="let subtask of task.subtasks">
           <mat-checkbox [(ngModel)]="subtask.completed">
             {{subtask.name}}

src/demo-app/a11y/checkbox/checkbox-a11y.scss

@@ -1,3 +1,3 @@
-.sub-list {
+.demo-sub-list {
   margin-left: 20px;
 }

src/demo-app/a11y/checkbox/checkbox-a11y.ts

@@ -8,6 +8,7 @@
 
 import {Component} from '@angular/core';
 
+
 export interface Task {
   name: string;
   completed: boolean;
@@ -27,30 +28,26 @@ export class CheckboxAccessibilityDemo {
       name: 'Reminders',
       completed: false,
       subtasks: [
-        { name: 'Cook Dinner', completed: false },
-        { name: 'Read the Material Design Spec', completed: false },
-        { name: 'Upgrade Application to Angular', completed: false }
+        {name: 'Cook Dinner', completed: false},
+        {name: 'Read the Material Design Spec', completed: false},
+        {name: 'Upgrade Application to Angular', completed: false}
       ]
     },
     {
       name: 'Groceries',
       completed: false,
       subtasks: [
-        { name: 'Organic Eggs', completed: false },
-        { name: 'Protein Powder', completed: false },
-        { name: 'Almond Meal Flour', completed: false }
+        {name: 'Organic Eggs', completed: false},
+        {name: 'Protein Powder', completed: false},
+        {name: 'Almond Meal Flour', completed: false}
       ]
     }
   ];
 
   allComplete(task: Task): boolean {
-    let subtasks = task.subtasks;
-
-    if (!subtasks) {
-      return false;
-    }
+    const subtasks = task.subtasks;
 
-    return subtasks.every(t => t.completed);
+    return task.completed || (subtasks != null && subtasks.every(t => t.completed));
   }
 
   someComplete(tasks: Task[]): boolean {

src/demo-app/a11y/chips/chips-a11y.ts

@@ -29,19 +29,19 @@ export class ChipsAccessibilityDemo {
   message: string = '';
 
   people: Person[] = [
-    { name: 'Kara' },
-    { name: 'Jeremy' },
-    { name: 'Topher' },
-    { name: 'Elad' },
-    { name: 'Kristiyan' },
-    { name: 'Paul' }
+    {name: 'Kara'},
+    {name: 'Jeremy'},
+    {name: 'Topher'},
+    {name: 'Elad'},
+    {name: 'Kristiyan'},
+    {name: 'Paul'}
   ];
 
   availableColors = [
-    { name: 'none', color: '' },
-    { name: 'Primary', color: 'primary' },
-    { name: 'Accent', color: 'accent' },
-    { name: 'Warn', color: 'warn' }
+    {name: 'none', color: ''},
+    {name: 'Primary', color: 'primary'},
+    {name: 'Accent', color: 'accent'},
+    {name: 'Warn', color: 'warn'}
   ];
 
   constructor(public snackBar: MatSnackBar) {}
@@ -51,8 +51,8 @@ export class ChipsAccessibilityDemo {
   }
 
   add(event: MatChipInputEvent): void {
-    let input = event.input;
-    let value = event.value;
+    const input = event.input;
+    const value = event.value;
 
     // Add our person
     if ((value || '').trim()) {
@@ -69,7 +69,7 @@ export class ChipsAccessibilityDemo {
   }
 
   remove(person: Person): void {
-    let index = this.people.indexOf(person);
+    const index = this.people.indexOf(person);
 
     if (index >= 0) {
       this.people.splice(index, 1);
@@ -80,6 +80,4 @@ export class ChipsAccessibilityDemo {
   toggleVisible(): void {
     this.visible = false;
   }
-
-
 }