fix: Transform form-control to component (#3183)

* fix: Transform form-control to component

* change tests

apps/docs/src/app/core/api-files.ts

@@ -41,7 +41,7 @@ export const API_FILES = {
     fileInput: ['FileInputComponent', 'FileSelectDirective', 'FileDragndropDirective'],
     fileUploader: ['FileUploaderComponent', 'FileUploaderSelectDirective', 'FileUploaderDragndropDirective'],
     form: [
-        'FormControlDirective',
+        'FormControlComponent',
         'FormGroupComponent',
         'FormItemComponent',
         'FormLabelComponent',

libs/core/src/lib/form/form-control/form-control.component.scss

@@ -1,4 +1,3 @@
-@import '~fundamental-styles/dist/form-item';
 @import '~fundamental-styles/dist/input';
 @import '~fundamental-styles/dist/textarea';
 @import '~fundamental-styles/dist/form-select';

libs/core/src/lib/form/form-control/form-control.directive.spec.ts → libs/core/src/lib/form/form-control/form-control.component.spec.ts

@@ -1,4 +1,4 @@
-import { FormControlDirective } from './form-control.directive';
+import { FormControlComponent } from './form-control.component';
 import { Component, DebugElement } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
@@ -9,17 +9,17 @@ import { By } from '@angular/platform-browser';
 })
 export class TestComponent {}
 
-describe('FormControlDirective', () => {
+describe('FormControlComponent', () => {
     let fixture: ComponentFixture<TestComponent>,
         component: TestComponent,
         debugElement: DebugElement,
         element: HTMLElement;
 
-    let directive, directiveInstance;
+    let directive, componentInstance;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            declarations: [FormControlDirective, TestComponent]
+            declarations: [FormControlComponent, TestComponent]
         });
     }));
 
@@ -29,20 +29,20 @@ describe('FormControlDirective', () => {
         debugElement = fixture.debugElement;
         element = debugElement.nativeElement;
         fixture.detectChanges();
-        directive = debugElement.query(By.directive(FormControlDirective));
-        directiveInstance = directive.injector.get(FormControlDirective);
+        directive = debugElement.query(By.directive(FormControlComponent));
+        componentInstance = directive.injector.get(FormControlComponent);
 
-        spyOn(directiveInstance, 'buildComponentCssClass').and.callThrough();
+        spyOn(componentInstance, 'buildComponentCssClass').and.callThrough();
     });
 
     it('should create', () => {
-        expect(directive).toBeTruthy();
-        directiveInstance.ngOnInit();
-        expect(directiveInstance.buildComponentCssClass).toHaveBeenCalled();
+        expect(component).toBeTruthy();
+        componentInstance.ngOnInit();
+        expect(componentInstance.buildComponentCssClass).toHaveBeenCalled();
     });
 
     it('should add appropriate classes', () => {
-        directiveInstance.ngOnChanges();
-        expect(directiveInstance.buildComponentCssClass).toHaveBeenCalled();
+        componentInstance.ngOnChanges();
+        expect(componentInstance.buildComponentCssClass).toHaveBeenCalled();
     });
 });

libs/core/src/lib/form/form-control/form-control.directive.ts → libs/core/src/lib/form/form-control/form-control.component.ts

@@ -1,4 +1,4 @@
-import { Input, ElementRef, Directive, OnInit, OnChanges } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, Input, OnChanges, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormStates } from './form-states';
 import { applyCssClass, CssClassBuilder } from '../../utils/public_api';
 
@@ -9,12 +9,15 @@ import { applyCssClass, CssClassBuilder } from '../../utils/public_api';
  * <input type="text" fd-form-control />
  * ```
  */
-@Directive({
-    // TODO to be discussed
-    // tslint:disable-next-line:directive-selector
-    selector: '[fd-form-control]'
+@Component({
+    // tslint:disable-next-line:component-selector
+    selector: '[fd-form-control]',
+    template: `<ng-content></ng-content>`,
+    styleUrls: ['./form-control.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class FormControlDirective implements CssClassBuilder, OnInit, OnChanges {
+export class FormControlComponent implements CssClassBuilder, OnInit, OnChanges {
     /**
      *  The state of the form control - applies css classes.
      *  Can be `success`, `error`, `warning`, `information` or blank for default.

libs/core/src/lib/form/form-control/form-control.module.ts

@@ -1,10 +1,10 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormControlDirective } from './form-control.directive';
+import { FormControlComponent } from './form-control.component';
 
 @NgModule({
     imports: [CommonModule],
-    exports: [FormControlDirective],
-    declarations: [FormControlDirective]
+    exports: [FormControlComponent],
+    declarations: [FormControlComponent]
 })
 export class FormControlModule {}

libs/core/src/lib/form/form-input-message-group/form-input-message-group.component.scss

@@ -1,5 +1,3 @@
-//@import '~fundamental-styles/dist/form-input-message-group';
-
 .fd-popover-container-custom--message {
   flex-grow: 1;
 }

libs/core/src/lib/form/form-item/form-item.component.scss

@@ -1,4 +1 @@
 @import '~fundamental-styles/dist/form-item';
-@import '~fundamental-styles/dist/input';
-@import '~fundamental-styles/dist/textarea';
-@import '~fundamental-styles/dist/form-select';

libs/core/src/lib/form/public_api.ts

@@ -1,5 +1,5 @@
 export * from './form.module';
-export * from './form-control/form-control.directive';
+export * from './form-control/form-control.component';
 export * from './form-control/form-control.module';
 export * from './form-group/form-group.component';
 export * from './form-group/form-group.module';

libs/core/src/lib/token/tokenizer.component.spec.ts

@@ -3,7 +3,7 @@ import { Component, ViewChild, ContentChildren, forwardRef, QueryList } from '@a
 import { RtlService, TokenizerInputDirective } from '@fundamental-ngx/core';
 
 import { whenStable } from '../utils/tests/when-stable';
-import { FormControlDirective } from '../form/form-control/form-control.directive';
+import { FormControlComponent } from '../form/form-control/form-control.component';
 import { TokenComponent, TokenizerComponent } from './public_api';
 @Component({
     selector: 'fd-tokenizer-test-component',
@@ -18,7 +18,7 @@ import { TokenComponent, TokenizerComponent } from './public_api';
 })
 class TokenizerWrapperComponent {
     @ViewChild(TokenizerComponent) tokenizer: TokenizerComponent;
-    @ViewChild(FormControlDirective) formControl: FormControlDirective;
+    @ViewChild(FormControlComponent) formControl: FormControlComponent;
 
     @ContentChildren(TokenComponent, { read: TokenComponent })
     tokenList: QueryList<TokenComponent>;
@@ -34,7 +34,7 @@ describe('TokenizerComponent', () => {
                 TokenizerComponent,
                 TokenComponent,
                 TokenizerWrapperComponent,
-                FormControlDirective,
+                FormControlComponent,
                 TokenizerInputDirective
             ],
             providers: [RtlService]

libs/core/src/lib/token/tokenizer.component.ts

@@ -20,7 +20,7 @@ import {
     ViewChild,
     ViewEncapsulation
 } from '@angular/core';
-import { FormControlDirective } from '../form/form-control/form-control.directive';
+import { FormControlComponent } from '../form/form-control/form-control.component';
 import { TokenComponent } from './token.component';
 import { RtlService } from '../utils/services/rtl.service';
 import { Subscription } from 'rxjs';
@@ -44,8 +44,8 @@ export class TokenizerComponent implements AfterViewChecked, AfterViewInit, Afte
     tokenList: QueryList<TokenComponent>;
 
     /** @hidden */
-    @ContentChild(forwardRef(() => FormControlDirective))
-    input: FormControlDirective;
+    @ContentChild(forwardRef(() => FormControlComponent))
+    input: FormControlComponent;
 
     /** @hidden */
     @ViewChild('tokenizerInner')

src/stories/fd-form-control/fd-form-control.stories.ts

@@ -2,12 +2,12 @@ import { moduleMetadata } from '@storybook/angular';
 import { boolean, select, text, withKnobs } from '@storybook/addon-knobs';
 import { withA11y } from '@storybook/addon-a11y';
 import { ReactiveFormsModule } from '@angular/forms';
-import { FormControlDirective, FormModule } from 'libs/core/src/lib/form/public_api';
+import { FormControlComponent, FormModule } from 'libs/core/src/lib/form/public_api';
 import { semanticStates } from '../../utils';
 
 export default {
     title: 'Fd form-control',
-    component: FormControlDirective,
+    component: FormControlComponent,
     moduleMetadata: moduleMetadata,
     decorators: [
         withKnobs,

src/stories/textarea/fd-textarea.stories.ts

@@ -3,12 +3,12 @@ import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
 import { withA11y } from '@storybook/addon-a11y';
 import { ReactiveFormsModule } from '@angular/forms';
 
-import { FormControlDirective, FormModule } from 'libs/core/src/lib/form/public_api';
+import { FormControlComponent, FormModule } from 'libs/core/src/lib/form/public_api';
 import { semanticStates } from '../../utils';
 
 export default {
     title: 'Fd text-area',
-    component: FormControlDirective,
+    component: FormControlComponent,
     moduleMetadata: moduleMetadata,
     decorators: [
         withKnobs,