refactor: split error component into module

Author: crisbeto

src/lib/core/_core.scss

@@ -7,6 +7,8 @@
 @import 'option/option-theme';
 @import 'option/optgroup';
 @import 'option/optgroup-theme';
+@import 'error/error';
+@import 'error/error-theme';
 @import 'selection/pseudo-checkbox/pseudo-checkbox-theme';
 @import 'typography/all-typography';
 
@@ -25,6 +27,7 @@
   @include mat-ripple();
   @include mat-option();
   @include mat-optgroup();
+  @include mat-error();
   @include cdk-a11y();
   @include cdk-overlay();
 }
@@ -35,6 +38,7 @@
   @include mat-option-theme($theme);
   @include mat-optgroup-theme($theme);
   @include mat-pseudo-checkbox-theme($theme);
+  @include mat-error-theme($theme);
 
   // Wrapper element that provides the theme background when the
   // user's content isn't inside of a `md-sidenav-container`.

src/lib/core/core.ts

@@ -16,6 +16,7 @@ import {OverlayModule} from './overlay/index';
 import {A11yModule} from './a11y/index';
 import {MdSelectionModule} from './selection/index';
 import {MdRippleModule} from './ripple/index';
+import {MdErrorModule} from './error/index';
 
 // Re-exports of the CDK to avoid breaking changes.
 export {
@@ -123,12 +124,13 @@ export {
 
 // Error
 export {
+  MdErrorModule,
+  MdError,
   ErrorStateMatcher,
   ErrorOptions,
-  MD_ERROR_GLOBAL_OPTIONS,
   defaultErrorStateMatcher,
-  showOnDirtyErrorStateMatcher
-} from './error/error-options';
+  showOnDirtyErrorStateMatcher,
+} from './error/index';
 
 @NgModule({
   imports: [
@@ -141,6 +143,7 @@ export {
     A11yModule,
     MdOptionModule,
     MdSelectionModule,
+    MdErrorModule,
   ],
   exports: [
     MdLineModule,
@@ -152,6 +155,7 @@ export {
     A11yModule,
     MdOptionModule,
     MdSelectionModule,
+    MdErrorModule,
   ],
 })
 export class MdCoreModule {}

src/lib/core/error/_error-theme.scss

@@ -0,0 +1,9 @@
+@import '../theming/palette';
+@import '../theming/theming';
+
+
+@mixin mat-error-theme($theme) {
+  .mat-error {
+    color: mat-color(map-get($theme, warn));
+  }
+}

src/lib/core/error/_error.scss

@@ -0,0 +1,5 @@
+@mixin mat-error {
+  .mat-error {
+    display: block;
+  }
+}

src/lib/core/error/error-options.ts

@@ -6,19 +6,12 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {InjectionToken} from '@angular/core';
+import {Injectable} from '@angular/core';
 import {FormGroupDirective, NgForm, NgControl} from '@angular/forms';
 
-/** Injection token that can be used to specify the global error options. */
-export const MD_ERROR_GLOBAL_OPTIONS = new InjectionToken<ErrorOptions>('md-error-global-options');
-
 export type ErrorStateMatcher =
   (control: NgControl | null, form: FormGroupDirective | NgForm | null) => boolean;
 
-export interface ErrorOptions {
-  errorStateMatcher?: ErrorStateMatcher;
-}
-
 /** Returns whether control is invalid and is either touched or is a part of a submitted form. */
 export const defaultErrorStateMatcher: ErrorStateMatcher = (control, form) => {
   return control ? !!(control.invalid && (control.touched || (form && form.submitted))) : false;
@@ -28,3 +21,12 @@ export const defaultErrorStateMatcher: ErrorStateMatcher = (control, form) => {
 export const showOnDirtyErrorStateMatcher: ErrorStateMatcher = (control, form) => {
   return control ? !!(control.invalid && (control.dirty || (form && form.submitted))) : false;
 };
+
+/**
+ * Provider that defines how form controls behave with
+ * regards to displaying error messages.
+ */
+@Injectable()
+export class ErrorOptions {
+  errorStateMatcher: ErrorStateMatcher = defaultErrorStateMatcher;
+}

src/lib/core/error/error.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright Google Inc. 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 {Directive, Input} from '@angular/core';
+
+let nextUniqueId = 0;
+
+/** Single error message to be shown underneath a form control. */
+@Directive({
+  selector: 'md-error, mat-error',
+  host: {
+    'class': 'mat-error',
+    'role': 'alert',
+    '[attr.id]': 'id',
+  }
+})
+export class MdError {
+  @Input() id: string = `md-input-error-${nextUniqueId++}`;
+}

src/lib/core/error/index.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright Google Inc. 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 {MdError} from './error';
+import {ErrorOptions} from './error-options';
+
+@NgModule({
+  declarations: [MdError],
+  exports: [MdError],
+  providers: [ErrorOptions],
+})
+export class MdErrorModule {}
+
+
+export * from './error';
+export * from './error-options';

src/lib/input/_input-theme.scss

@@ -94,10 +94,6 @@
       background-color: $input-underline-color-warn;
     }
   }
-
-  .mat-input-error {
-    color: $input-underline-color-warn;
-  }
 }
 
 // Applies a floating placeholder above the input itself.

src/lib/input/index.ts

@@ -8,7 +8,6 @@
 
 import {NgModule} from '@angular/core';
 import {
-  MdErrorDirective,
   MdHint,
   MdInputContainer,
   MdInputDirective,
@@ -19,11 +18,11 @@ import {
 import {MdTextareaAutosize} from './autosize';
 import {CommonModule} from '@angular/common';
 import {PlatformModule} from '../core/platform/index';
+import {MdErrorModule} from '../core/error/index';
 
 
 @NgModule({
   declarations: [
-    MdErrorDirective,
     MdHint,
     MdInputContainer,
     MdInputDirective,
@@ -35,16 +34,17 @@ import {PlatformModule} from '../core/platform/index';
   imports: [
     CommonModule,
     PlatformModule,
+    MdErrorModule,
   ],
   exports: [
-    MdErrorDirective,
     MdHint,
     MdInputContainer,
     MdInputDirective,
     MdPlaceholder,
     MdPrefix,
     MdSuffix,
     MdTextareaAutosize,
+    MdErrorModule,
   ],
 })
 export class MdInputModule {}

src/lib/input/input-container.scss

@@ -252,8 +252,3 @@ textarea.mat-input-element {
 .mat-input-hint-spacer {
   flex: 1 0 $mat-input-hint-min-space;
 }
-
-// Single error message displayed beneath the input.
-.mat-input-error {
-  display: block;
-}