feat: merge FeControl and FeControlDirective, remove Directive from filenames, add exportAs to all directives

Author: navix

README.md

@@ -79,8 +79,8 @@ $ npm i ngfe
 
 ### Requirements
 
-* Angular 12.0+
-* RxJs 6.6+
+* Angular 12+
+* RxJs 7+
 
 
 
@@ -355,7 +355,7 @@ Also emits event only if form has `valid` state.
 
 For dynamic forms we need to setup values when some fields became visible, and remove such values on field hiding.
 
-Structural directive [`feIf`](./projects/ngfe/src/lib/core/fe-if.directive.ts) works similar to `ngIf` (except `else` part) and could set a model to some default / `undefined`.
+Structural directive [`feIf`](./projects/ngfe/src/lib/core/fe-if.ts) works similar to `ngIf` (except `else` part) and could set a model to some default / `undefined`.
 
 When Angular change detection runs, `feIf` directive checks that the condition is true/false, wait until template updates, then update bound model and renders conditional template. This allows us to keep this logic in template and not collide with rendering process.
 
@@ -452,172 +452,6 @@ Also, with this package, `feControl` provides `NgControl` and allows you to use
 
 
 
-## Reference
-
-### [`FeControl<MODEL, INPUT>`](./projects/ngfe/src/lib/core/fe-control.ts)
-
-```
-readonly modelValue: MODEL | undefined;
-readonly modelValue$: Observable<MODEL | undefined>;
-readonly inputValue: INPUT | undefined;
-readonly inputValue$: Observable<INPUT | undefined>;
-readonly toInputValue$: Observable<INPUT | undefined>;
-disabled: boolean;
-readonly disabled$: Observable<boolean>;
-standalone: boolean;
-readonly standalone$: Observable<boolean>;
-touched: boolean;
-readonly touched$: Observable<boolean>;
-dirty: boolean;
-readonly dirty$: Observable<boolean>;
-readonly validators: FeValidator<MODEL, INPUT>[];
-readonly validators$: Observable<FeValidator<MODEL, INPUT>[]>;
-readonly validity: boolean;
-readonly validity$: Observable<FeValidity>[]>;
-readonly valid: boolean;
-readonly valid$: Observable<boolean>;
-readonly invalid: boolean;
-readonly invalid$: Observable<boolean>;
-readonly pending: boolean;
-readonly pending$: Observable<boolean>;
-readonly errors: FeErrors | undefined;
-readonly errors$: Observable<FeErrors | undefined>;
-readonly visibleErrors: FeErrors | undefined;
-readonly visibleErrors$: Observable<FeErrors | undefined>;
-readonly destroy$: Observable<undefined>;
-adapter: FeAdapter<MODEL, INPUT> | undefined;
-debounce: debounce: number | undefined;
-update(modelValue: MODEL | undefined, source: VcSource = 'manual');
-input(inputValue: INPUT | undefined);
-touch();
-updateValidators({add = [], remove = []}: {
-  add?: FeValidator<MODEL, INPUT>[];
-  remove?: FeValidator<MODEL, INPUT>[];
-});
-addValidator(validator: FeValidator<MODEL, INPUT>);
-updateValidity();
-setAdapter(adapter: FeAdapter<MODEL, INPUT> | undefined);
-reset();
-```
-
-### [`FeControlDirective<MODEL, INPUT>`](./projects/ngfe/src/lib/core/fe-control.directive.ts)
-
-`exportAs: "feControl"`
-
-```
-[(feControl)]: MODEL | undefined;
-[(disabled)]: boolean;
-[(standalone)]: boolean;
-[(touched)]: boolean;
-[(dirty)]: boolean;
-[extraValidators]: FeValidator<MODEL>[] | undefined;
-[debounce]: number | undefined;
-[adapter]: 'noop' | 'numberToString' | 'dateToDateString' | 'dateToDateLocalString' | 'deepCopy' 
-  | FeAdapter<MODEL, INPUT> | undefined;
-(destroy): undefined;
-readonly modelValue: MODEL | undefined;
-readonly modelValue$: Observable<MODEL | undefined>;
-readonly inputValue: INPUT | undefined;
-readonly inputValue$: Observable<INPUT | undefined>;
-disabled: boolean;
-readonly disabled$: Observable<boolean>;
-standalone: boolean;
-readonly standalone$: Observable<boolean>;
-touched: boolean;
-readonly touched$: Observable<boolean>;
-dirty: boolean;
-readonly dirty$: Observable<boolean>;
-readonly validity: boolean;
-readonly validity$: Observable<FeValidity>[]>;
-readonly valid: boolean;
-readonly valid$: Observable<boolean>;
-readonly invalid: boolean;
-readonly invalid$: Observable<boolean>;
-readonly pending: boolean;
-readonly pending$: Observable<boolean>;
-readonly errors: FeErrors | undefined;
-readonly errors$: Observable<FeErrors | undefined>;
-readonly visibleErrors: FeErrors | undefined;
-readonly visibleErrors$: Observable<FeErrors | undefined>;
-```
-
-### [`FeFormDirective`](./projects/ngfe/src/lib/core/fe-form.directive.ts)
-
-`exportAs: "feForm"`
-
-```
-[disabled]: boolean;
-readonly change$: Observable<undefined>;
-readonly validity: FeValidity;
-readonly validity$: Observable<FeValidity>;
-readonly valid: boolean;
-readonly valid$: Observable<boolean>;
-readonly invalid: boolean;
-readonly invalid$: Observable<boolean>;
-readonly pending: boolean;
-readonly pending$: Observable<boolean>;
-readonly controls: FeControl[];
-readonly enabledControls: FeControl[];
-readonly touched: boolean;
-readonly dirty: boolean;
-touchAll();
-reset();
-```
-
-### [`FeSubmitDirective`](./projects/ngfe/src/lib/core/fe-submit.directive.ts)
-
-`exportAs: "feSubmit"`
-
-```
-(feSubmit): void;
-```
-
-### [`FeIfDirective<T>`](./projects/ngfe/src/lib/core/fe-if.directive.ts)
-
-```
-[feIf]: any;
-[(ensure)]: T | undefined;
-[default]: T | undefined;
-[force]: boolean; 
-```
-
-### [`FeInputDirective`](./projects/ngfe/src/lib/value-accessors/fe-input.directive.ts)
-
-```
-[type]: 'text' | 'color' | 'email' | 'password' | 'range' | 'search' | 'tel' | 'url' |
-    'number' |
-    'checkbox' |'radio' |
-    'date' | 'datetime-local' | 'time' | 'month' | 'week' |
-    'file' |
-    'hidden' | 'button' | 'image' | 'reset' = 'text';
-[name]: string;
-[value]: any;
-[updateOn]: 'change' | 'blur' = 'change'
-[touchOnBlur]: boolean | string = true;
-[touchOnChange]: boolean | string = false;
-[readFileAs]: 'DataURL' | 'Text' | 'ArrayBuffer' | 'BinaryString' = 'DataURL'
-(fileError): string;
-connected: boolean = true;
-```
-
-### [`FeSelectDirective`](./projects/ngfe/src/lib/value-accessors/fe-select.directive.ts)
-
-```
-[multiple]: boolean = false;
-[updateOn]: 'change' | 'blur' = 'change';
-[touchOnBlur]: boolean | string = true;
-[touchOnChange]: boolean | string = false;
-readonly options: Set<FeSelectOptionDirective>;
-connected: boolean = true;
-```
-
-### [`FeSelectOptionDirective`](./projects/ngfe/src/lib/value-accessors/fe-select.directive.ts)
-
-```
-[value]: any;
-```
-
-
 ## LICENSE 
 
 MIT

e2e/tests/playground/input-control.spec.ts

@@ -10,7 +10,7 @@ test.describe.serial('FeInputDirective', () => {
 
   test('open', async ({page}) => {
     await kit.goto('/input-control');
-    await expect(kit.subTitle).toHaveText('FeInputDirective');
+    await expect(kit.subTitle).toHaveText('FeInput');
   });
 
   test('input 1 - base input', async () => {

e2e/tests/playground/select-control.spec.ts

@@ -11,7 +11,7 @@ test.describe.serial('FeSelectDirective', () => {
 
   test('open', async ({page}) => {
     await kit.goto('/select-control');
-    await expect(kit.subTitle).toHaveText('FeSelectDirective');
+    await expect(kit.subTitle).toHaveText('FeSelect');
   });
 
   test('select 1 - base select', async () => {

projects/ngfe-ng-adapter/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngfe-ng-adapter",
-  "version": "13.0.0",
+  "version": "13.1.0",
   "keywords": ["angular", "forms"],
   "author": {
     "name": "Oleksa Novyk",

projects/ngfe-ng-adapter/src/lib/fe-ng-adapter.module.ts

@@ -1,15 +1,15 @@
 import { NgModule } from '@angular/core';
-import { FeNgAdapterDirective } from './fe-ng-adapter.directive';
-import { FeNgControlDirective } from './fe-ng-control.directive';
+import { FeNgAdapter } from './fe-ng-adapter';
+import { FeNgControl } from './fe-ng-control';
 
 @NgModule({
   declarations: [
-    FeNgAdapterDirective,
-    FeNgControlDirective,
+    FeNgAdapter,
+    FeNgControl,
   ],
   exports: [
-    FeNgAdapterDirective,
-    FeNgControlDirective,
+    FeNgAdapter,
+    FeNgControl,
   ],
 })
 export class FeNgAdapterModule {

projects/ngfe-ng-adapter/src/lib/fe-ng-adapter.directive.ts renamed to projects/ngfe-ng-adapter/src/lib/fe-ng-adapter.ts

@@ -1,18 +1,18 @@
 import { Directive, Inject, Optional, Self } from '@angular/core';
 import { ControlValueAccessor, NG_ASYNC_VALIDATORS, NG_VALIDATORS, NG_VALUE_ACCESSOR, Validator } from '@angular/forms';
-import { FeControl, FeInputDirective, FeSelectDirective } from 'ngfe';
+import { FeControl, FeInput, FeSelect } from 'ngfe';
 
 @Directive({
   selector: '[feControl]',
 })
-export class FeNgAdapterDirective {
+export class FeNgAdapter {
   constructor(
     @Self() private control: FeControl,
     @Self() @Optional() @Inject(NG_VALUE_ACCESSOR) private ngValueAccessors: ControlValueAccessor[],
     @Self() @Optional() @Inject(NG_VALIDATORS) private ngValidators: Validator[],
     @Self() @Optional() @Inject(NG_ASYNC_VALIDATORS) private ngAsyncValidators: Validator[],
-    @Self() @Optional() @Inject(FeInputDirective) private feInputDirective: FeInputDirective | undefined,
-    @Self() @Optional() @Inject(FeSelectDirective) private feSelectDirective: FeSelectDirective | undefined,
+    @Self() @Optional() @Inject(FeInput) private feInputDirective: FeInput | undefined,
+    @Self() @Optional() @Inject(FeSelect) private feSelectDirective: FeSelect | undefined,
   ) {
     // @todo use selectValueAccessor
     // https://github.com/angular/angular/blob/3a60063a54d850c50ce962a8a39ce01cfee71398/packages/forms/src/directives/shared.ts#L326

projects/ngfe-ng-adapter/src/lib/fe-ng-control.directive.ts renamed to projects/ngfe-ng-adapter/src/lib/fe-ng-control.ts

@@ -127,15 +127,15 @@ class LocalControl {
   providers: [
     {
       provide: NgControl,
-      useExisting: FeNgControlDirective,
+      useExisting: FeNgControl,
     },
     {
       provide: ControlContainer,
-      useExisting: FeNgControlDirective,
+      useExisting: FeNgControl,
     },
   ],
 })
-export class FeNgControlDirective extends NgControl {
+export class FeNgControl extends NgControl {
   @Input() name!: string | null;
 
   private _control?: LocalControl;

projects/ngfe-ng-adapter/src/lib/index.ts

@@ -1,3 +1,3 @@
-export * from './fe-ng-adapter.directive';
+export * from './fe-ng-adapter';
 export * from './fe-ng-adapter.module';
-export * from './fe-ng-control.directive';
+export * from './fe-ng-control';

projects/ngfe/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngfe",
-  "version": "13.0.0",
+  "version": "13.1.0",
   "keywords": ["angular", "forms"],
   "author": {
     "name": "Oleksa Novyk",