feat(divider): move divider out of mat-list

- Creates an independent mat-divider component
- Adds inset capability with special accomodations for mat-list-item
- Adds vertical option
- Removed mat-divider from MatListModule with temporary import to
  prevent breaking changes
- Added styling for dividers in cards

Author: CaerusKaru

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

@@ -27,6 +27,23 @@
     </mat-card-footer>
   </mat-card>
 
+  <mat-card>
+    <mat-card-subtitle>Subtitle</mat-card-subtitle>
+    <mat-card-title>Card with title, footer, and inset-divider</mat-card-title>
+    <mat-card-content>
+      <p>This is supporting text.</p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </mat-card-content>
+    <mat-divider [inset]="true"></mat-divider>
+    <mat-card-actions>
+      <button md-button>LIKE</button>
+      <button md-button>SHARE</button>
+    </mat-card-actions>
+    <mat-card-footer>
+      <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+    </mat-card-footer>
+  </mat-card>
+
   <mat-card>
     <img mat-card-image src="https://material.angularjs.org/latest/img/washedout.png">
     <mat-card-title>Content Title</mat-card-title>

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

@@ -8,6 +8,7 @@ import {
   MatChipsModule,
   MatDatepickerModule,
   MatDialogModule,
+  MatDividerModule,
   MatExpansionModule,
   MatFormFieldModule,
   MatGridListModule,
@@ -55,6 +56,7 @@ import {PortalModule} from '@angular/cdk/portal';
     MatTableModule,
     MatDatepickerModule,
     MatDialogModule,
+    MatDividerModule,
     MatExpansionModule,
     MatFormFieldModule,
     MatGridListModule,

src/demo-app/list/list-demo.html

@@ -31,6 +31,7 @@ <h4 mat-line>{{message.from}}</h4>
           <span>{{message.subject}} -- </span>
           <span class="demo-secondary-text">{{message.message}}</span>
         </p>
+        <mat-divider [inset]="true" *ngIf="!last"></mat-divider>
       </mat-list-item>
       <mat-divider></mat-divider>
       <mat-list-item *ngFor="let message of messages">

src/demo-app/system-config.ts

@@ -56,6 +56,7 @@ System.config({
     '@angular/material/core': 'dist/packages/material/core/index.js',
     '@angular/material/datepicker': 'dist/packages/material/datepicker/index.js',
     '@angular/material/dialog': 'dist/packages/material/dialog/index.js',
+    '@angular/material/divider': 'dist/packages/material/divider/index.js',
     '@angular/material/expansion': 'dist/packages/material/expansion/index.js',
     '@angular/material/form-field': 'dist/packages/material/form-field/index.js',
     '@angular/material/grid-list': 'dist/packages/material/grid-list/index.js',

src/e2e-app/e2e-app-module.ts

@@ -23,6 +23,7 @@ import {
   MatButtonModule,
   MatCheckboxModule,
   MatDialogModule,
+  MatDividerModule,
   MatFormFieldModule,
   MatGridListModule,
   MatIconModule,
@@ -50,6 +51,7 @@ import {ReactiveFormsModule} from '@angular/forms';
     MatButtonModule,
     MatCheckboxModule,
     MatDialogModule,
+    MatDividerModule,
     MatFormFieldModule,
     MatGridListModule,
     MatIconModule,

src/e2e-app/system-config.ts

@@ -56,6 +56,7 @@ System.config({
     '@angular/material/core': 'dist/bundles/material-core.umd.js',
     '@angular/material/datepicker': 'dist/bundles/material-datepicker.umd.js',
     '@angular/material/dialog': 'dist/bundles/material-dialog.umd.js',
+    '@angular/material/divider': 'dist/bundles/material-divider.umd.js',
     '@angular/material/expansion': 'dist/bundles/material-expansion.umd.js',
     '@angular/material/form-field': 'dist/bundles/material-form-field.umd.js',
     '@angular/material/grid-list': 'dist/bundles/material-grid-list.umd.js',

src/lib/core/theming/_all-theme.scss

@@ -9,6 +9,7 @@
 @import '../../table/table-theme';
 @import '../../datepicker/datepicker-theme';
 @import '../../dialog/dialog-theme';
+@import '../../divider/divider-theme';
 @import '../../expansion/expansion-theme';
 @import '../../grid-list/grid-list-theme';
 @import '../../icon/icon-theme';
@@ -43,6 +44,7 @@
   @include mat-table-theme($theme);
   @include mat-datepicker-theme($theme);
   @include mat-dialog-theme($theme);
+  @include mat-divider-theme($theme);
   @include mat-expansion-panel-theme($theme);
   @include mat-form-field-theme($theme);
   @include mat-grid-list-theme($theme);

src/lib/divider/README.md

@@ -0,0 +1 @@
+Please see the official documentation at https://material.angular.io/components/component/divider

src/lib/divider/_divider-theme.scss

@@ -0,0 +1,15 @@
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+
+
+@mixin mat-divider-theme($theme) {
+  $foreground: map-get($theme, foreground);
+
+  .mat-divider {
+    border-top-color: mat-color($foreground, divider);
+  }
+
+  .mat-divider-vertical {
+    border-right-color: mat-color($foreground, divider);
+  }
+}

src/lib/divider/divider-module.ts

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {MatCommonModule} from '@angular/material/core';
+import {
+    MatDivider,
+    MatDividerCssMatStyler,
+} from './divider';
+import {CommonModule} from '@angular/common';
+
+
+@NgModule({
+    imports: [MatCommonModule, CommonModule],
+    exports: [
+        MatDivider,
+        MatDividerCssMatStyler,
+        MatCommonModule,
+    ],
+    declarations: [
+        MatDivider,
+        MatDividerCssMatStyler,
+    ],
+})
+export class MatDividerModule {}