feat(design): remove error message dependency on form-field

libs/design/src/atoms/form/form-field/error-message/error-message.component.scss → libs/design/src/atoms/form/error-message/error-message.component.scss

@@ -1,6 +1,6 @@
-@import '../../../../scss/daff-util';
+@import '../../../scss/daff-util';
 
-.daff-error-message {
+:host {
 	display: block;
 	font-size: $small-font-size;
 	margin-top: 5px;

libs/design/src/atoms/form/error-message/error-message.component.spec.ts

@@ -0,0 +1,27 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DaffErrorMessageComponent } from './error-message.component';
+
+describe('DaffErrorMessageComponent', () => {
+  let fixture: ComponentFixture<DaffErrorMessageComponent>;
+  let component: DaffErrorMessageComponent;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        DaffErrorMessageComponent
+       ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DaffErrorMessageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

libs/design/src/atoms/form/form-field/error-message/error-message.component.ts → libs/design/src/atoms/form/error-message/error-message.component.ts

@@ -1,12 +1,9 @@
-import { Component, ViewEncapsulation } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
   selector: 'daff-error-message',
   template: '<ng-content></ng-content>',
   styleUrls: ['./error-message.component.scss'],
-  host: {
-    'class': 'daff-error-message'
-  },
-  encapsulation: ViewEncapsulation.None
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DaffErrorMessageComponent {}

libs/design/src/atoms/form/form-field/error-message/error-message.md → libs/design/src/atoms/form/error-message/error-message.md

@@ -1,6 +1,5 @@
-# Error Message Component
-
-`daff-error-message` is a component that works alongside the the `daff-form-field` component to style and place the error message and its associated form control element appropriately.
+# Error Message
+`<daff-error-message>` is a component that works alongside the `<daff-form-field>` component to style and place the error message and its associated form control element appropriately.
 
 ## Usage
 

libs/design/src/atoms/form/error-message/error-message.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DaffErrorMessageComponent } from './error-message.component';
+
+@NgModule({
+  exports: [
+    DaffErrorMessageComponent
+  ],
+  declarations: [
+    DaffErrorMessageComponent
+  ]
+})
+export class DaffErrorMessageModule { }

libs/design/src/atoms/form/error-message/public_api.ts

@@ -0,0 +1,2 @@
+export { DaffErrorMessageModule } from './error-message.module';
+export { DaffErrorMessageComponent } from './error-message.component';

libs/design/src/atoms/form/form-field/form-field.module.ts

@@ -1,23 +1,23 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DaffFormFieldComponent } from './form-field/form-field.component';
-import { DaffErrorMessageComponent } from './error-message/error-message.component';
 
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { DaffErrorMessageModule } from '../error-message/error-message.module';
 
 @NgModule({
   imports: [
     CommonModule,
 
-    FontAwesomeModule
+    FontAwesomeModule,
+    DaffErrorMessageModule
   ],
   exports: [
     DaffFormFieldComponent,
-    DaffErrorMessageComponent
+    DaffErrorMessageModule
   ],
   declarations: [
-    DaffFormFieldComponent,
-    DaffErrorMessageComponent
+    DaffFormFieldComponent
   ]
 })
 export class DaffFormFieldModule { }

libs/design/src/atoms/form/form-field/form-field/form-field.component.spec.ts

@@ -4,7 +4,7 @@ import { By } from '@angular/platform-browser';
 import { ReactiveFormsModule, FormControl, Validators } from '@angular/forms';
 
 import { DaffFormFieldComponent } from './form-field.component';
-import { DaffErrorMessageComponent } from '../error-message/error-message.component';
+import { DaffErrorMessageComponent } from '../../error-message/error-message.component';
 import { DaffFormFieldMissingControlMessage } from '../form-field-errors';
 import { DaffFormFieldControl } from '../form-field-control';
 import { DaffInputModule } from '../../input/public_api';

libs/design/src/atoms/form/form-field/public_api.ts

@@ -1,4 +1,3 @@
 export { DaffFormFieldModule } from './form-field.module';
 export * from './form-field/form-field.component';
 export { DaffFormFieldControl } from './form-field-control';
-export * from './error-message/error-message.component';

libs/design/src/scss/theming/_theme.scss

@@ -1,5 +1,5 @@
 @import '../../atoms/button/button-theme';
-@import '../../atoms/form/form-field/error-message/error-message-theme';
+@import '../../atoms/form/error-message/error-message-theme';
 @import '../../atoms/form/form-field/form-field/form-field-theme';
 @import '../../atoms/form/input/input/input-theme';
 @import '../../atoms/form/select/select/select-theme';