angular-base-lib 18.0.7 → 19.0.2

package/README.md

@@ -1,280 +1,280 @@
-# AngularBaseDao
-
-This library helps you to create dao-services that include all **CURDL** methods out of the box without needing to implement them by your own.
-Complex models that are received from the REST requests can simply be **converted/mapped** using the provided **HttpBaseDao** and **IConverter**.
-
-> **CURLD** => **C**reate **R**ead **U**pdate **D**elete **L**ist
-
-## Basic Usage
-
-To create a service that provides all CRUDL functions out of the box follow these steps:
-
-**Step 1: Create an entity-class which implements the **IIdentifiable** interface**
-
-```ts
-export interface UserModel implements IIdentifiable {
-  id: string;
-  name: string;
-}
-```
-
-**Step 2: Create an entity-dao-service, which extends from the NoConversionHttpBaseDao-class**
-
-By default, the service will set **withCredentials** to true, to make use of http-only cookie authentication.
-If this is not wanted, you can specify it in the super-constructor call.
-
-If you prefer a different kind of authentication method, you can pass custom http-headers to the affected **CRUDL** method. (`this.dao.list(false, { ...httpOptions })`)
-
-```ts
-@Injectable({ providedIn: 'root' })
-export class UserDaoService extends NoConversionHttpBaseDao<UserModel> {
-  constructor() {
-    super('https://api.net/user');
-  }
-}
-```
-
-**Step 3: Use the service**
-
-```ts
-@Component(...)
-export class AppComponent {
-  private readonly userDao = inject(UserDaoService);
-
-  constructor() {
-    this.userDao.create({ name: 'Max' }); // returns Promise<UserModel>
-    this.userDao.read('my-id'); // returns Promise<UserModel>
-    this.userDao.update({ id: 'max-id', name: 'Max' }); // returns Promise<UserModel>
-    this.userDao.delete({ id: 'max-id', name: 'Max' }); // returns Promise<void>
-    this.userDao.list(); // returns Promise<UserModel[]>
-  }
-}
-```
-
-### Using converters to convert http body to models (optional)
-
-**Step 1: Create the request interface that the server sends back to the client**
-
-```ts
-export interface UserResponse implements IIdentifiable {
-  id: string;
-  creationDateString: string; // ISO string
-}
-```
-
-**Step 2: Create the interface that the dao-service should return**
-
-```ts
-export interface UserModel implements IIdentifiable {
-  id: string;
-  creationDate: Date; // Real date object
-}
-```
-
-**Step 3: Create a mapper-service that maps between those two models**
-
-```ts
-@Injectable({ providedIn: 'root' })
-export class PersonConverterService implements IConverter<UserResponse, UserModel> {
-  // Converts the model that was returned by the server to the model that should be used in the applciation
-  fromJson(response: UserResponse): UserModel {
-    return {
-      id: response.id,
-      creationDate: new Date(response.creationDateString), // Converts the date-string to a date
-    };
-  }
-
-  // Prepares the object that will be sent to the server for CREATE or UPDATE
-  toJson(model: UserModel): unknown {
-    return {
-      id: model.id,
-      creationDate: model.creationDate.toISOString(),
-    };
-  }
-}
-```
-
-**Step 4: Create the entity-dao-service and provide the created converter-service**
-
-```ts
-@Injectable({ providedIn: 'root' })
-export class UserDaoService extends HttpBaseDao<UserResponse, PersonModel> {
-  constructor() {
-    super('https://api.net/user', inject(HttpClient), inject(PersonConverterService));
-  }
-}
-```
-
-## Server Requirements
-
-- REST server
-- HTTP methods are used to differentiate between the different CRUDL request
-
-  - **POST** (CREATE)
-
-    - url: https://api.net/entity
-    - request body: **json object**
-    - response body: **json object**
-
-  - **GET** (READ)
-
-    - url: https://api.net/entity/:id
-    - request body: -
-    - response body: **json object**
-
-  - **PUT** (UPDATE)
-
-    - url: https://api.net/entity/:id
-    - request body: **json object**
-    - response body: **json object**
-
-  - **DELETE** (DELETE)
-
-    - url: https://api.net/entity/:id
-    - request body: -
-    - response body: -
-
-  - **GET** (LIST)
-
-    - url: https://api.net/entity
-    - request body: -
-    - response body: **json array**
-
-# Angular Base Authentication
-This library contains an abstract auth-service and guards that can be used out of the box, by just extending the `BaseAuthService<TUSER>`.
-
-## Usage
-
-**Step 1: Create a user model**
-
-```js
-interface UserModel {
-  id: string;
-  email: string;
-  isAdmin: boolean;
-}
-```
-
-**Step 2: Extend the base-auth-service using the user-model**
-
-```js
-@Injectable({ providedIn: 'root' })
-export class MyOwnAuthService extends BaseAuthService<UserModel>...
-```
-
-**Step 3: Set the initial login state inside the constructor**
-
-With local auth-cookie:
-```js
-constructor() {
-  const user = loginUsingAuthCookie(); // Validate and check your local auth-cookie
-  if (user) {
-    this.userLoggedIn(user); // Sets the login state to logged-in
-  } else {
-    this.userLoggedOut(); // Sets the login state to logged-out
-  }
-}
-```
-
-Without local tokens:
-```js
-constructor() {
-  this.userLoggedOut(); // Sets the initial login state to logged-out
-}
-```
-
-> Important: Make sure the initial login state is set right after the application is started by calling `userLoggedIn`or `userLoggedOut`. If you do NOT do this the login-state will be `pending` and the provided auth-guards be waiting for the 'readyLoginState$' forever.
-
-****
-
-```js
-constructor() {
-  this.userLoggedOut(); // If you do not do this, the login-state will be pending
-}
-```
-
-**Step 4: Implement the login-logout functions and call the provided functions of the base-class**
-
-```js
-async login(loginData): Promise<void> {
-  try {
-    const result$ = this.http.post<UserModel>(login, loginData);
-    const user = await firstValueFrom(result$);
-    this.userLoggedIn(user); // Sets the login state to logged-in
-  } catch (ex) {
-    this.userLoggedOut(); // Sets the login state to logged-out
-    return ex;
-  }
-}
-```
-
-**Step 5: Provide your service implementation as `BaseAuthService`**
-app.config.ts
-```js
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideHttpClient(),
-    {
-      provide: BaseAuthService,
-      useExisting: MyOwnAuthService
-    },
-    ...
-  ]
-};
-```
-
-**Step 6: Use it**
-
-Now you can use the provided route-guards without any configuration.
-```js
-{  
-  ...
-  path: 'login',
-  canActivate: [loggedOutGuardFn], //Only allow when logged-out
-  ...
-},
-{
-  ...
-  path: 'account',
-  canActivate: [loggedInGuardFn], // Only allow when logged-in
-  ...
-},
-```
-
-The `BaseAuthService` also provides a list of handy observables that represent the current auth-state like:
-```js
-loginState$(): Observable<LoginState>
-readyLoginState$(): Observable<LoginState>
-readyAuthState$(): Observable<BaseAuthState<T>>
-user$(): Observable<T | null>
-isLoggedIn$(): Observable<boolean>
-loginRoute(): string
-```
-
-### loginState$ vs readyLoginState$
-
-#### loginState$
-
-Emits all login states. Initial value will be `{ loginState: 'pending', user: null }`
-
-#### readyLoginState$
-
-Only emits non `pending` auth-states. Therefor handy for auth-guards.
-
-#### Explanation
-
-When a page is initially loaded, and the user is logged in using the stored auth-cookie. The auth state will be `pending` until the cookie is verified, until this the auth guard should not check if the route can be activated. Only if `this.userLoggedOut()` or `this.userLoggedIn(user)` was called, the auth guard will check the access. This prevents the application from blocking a page from the user because login-state is not settled jet.
-
-# angular-base
-
-Library with different abstract components and utilities that come in handy for simple angular-applications.
-
-# model-component
-
-A collection of abstract classes(components) that can reflect the different action pages(list/add/edit) for a subject(model).
-
-# navigation-service
-
-Keeps track of visited pages and navigates back to the previous page if 'back' is called. If back is called on the initial page, the fallback route is used.
-For example if the user is on the route '/users/edit' and clicks on the back button, the router will navigate to '/users'.
-These base paths can be defined in the implementation of the base-model-components.
+# AngularBaseDao
+
+This library helps you to create dao-services that include all **CURDL** methods out of the box without needing to implement them by your own.
+Complex models that are received from the REST requests can simply be **converted/mapped** using the provided **HttpBaseDao** and **IConverter**.
+
+> **CURLD** => **C**reate **R**ead **U**pdate **D**elete **L**ist
+
+## Basic Usage
+
+To create a service that provides all CRUDL functions out of the box follow these steps:
+
+**Step 1: Create an entity-class which implements the **IIdentifiable** interface**
+
+```ts
+export interface UserModel implements IIdentifiable {
+  id: string;
+  name: string;
+}
+```
+
+**Step 2: Create an entity-dao-service, which extends from the NoConversionHttpBaseDao-class**
+
+By default, the service will set **withCredentials** to true, to make use of http-only cookie authentication.
+If this is not wanted, you can specify it in the super-constructor call.
+
+If you prefer a different kind of authentication method, you can pass custom http-headers to the affected **CRUDL** method. (`this.dao.list(false, { ...httpOptions })`)
+
+```ts
+@Injectable({ providedIn: 'root' })
+export class UserDaoService extends NoConversionHttpBaseDao<UserModel> {
+  constructor() {
+    super('https://api.net/user');
+  }
+}
+```
+
+**Step 3: Use the service**
+
+```ts
+@Component(...)
+export class AppComponent {
+  private readonly userDao = inject(UserDaoService);
+
+  constructor() {
+    this.userDao.create({ name: 'Max' }); // returns Promise<UserModel>
+    this.userDao.read('my-id'); // returns Promise<UserModel>
+    this.userDao.update({ id: 'max-id', name: 'Max' }); // returns Promise<UserModel>
+    this.userDao.delete({ id: 'max-id', name: 'Max' }); // returns Promise<void>
+    this.userDao.list(); // returns Promise<UserModel[]>
+  }
+}
+```
+
+### Using converters to convert http body to models (optional)
+
+**Step 1: Create the request interface that the server sends back to the client**
+
+```ts
+export interface UserResponse implements IIdentifiable {
+  id: string;
+  creationDateString: string; // ISO string
+}
+```
+
+**Step 2: Create the interface that the dao-service should return**
+
+```ts
+export interface UserModel implements IIdentifiable {
+  id: string;
+  creationDate: Date; // Real date object
+}
+```
+
+**Step 3: Create a mapper-service that maps between those two models**
+
+```ts
+@Injectable({ providedIn: 'root' })
+export class PersonConverterService implements IConverter<UserResponse, UserModel> {
+  // Converts the model that was returned by the server to the model that should be used in the applciation
+  fromJson(response: UserResponse): UserModel {
+    return {
+      id: response.id,
+      creationDate: new Date(response.creationDateString), // Converts the date-string to a date
+    };
+  }
+
+  // Prepares the object that will be sent to the server for CREATE or UPDATE
+  toJson(model: UserModel): unknown {
+    return {
+      id: model.id,
+      creationDate: model.creationDate.toISOString(),
+    };
+  }
+}
+```
+
+**Step 4: Create the entity-dao-service and provide the created converter-service**
+
+```ts
+@Injectable({ providedIn: 'root' })
+export class UserDaoService extends HttpBaseDao<UserResponse, PersonModel> {
+  constructor() {
+    super('https://api.net/user', inject(HttpClient), inject(PersonConverterService));
+  }
+}
+```
+
+## Server Requirements
+
+- REST server
+- HTTP methods are used to differentiate between the different CRUDL request
+
+  - **POST** (CREATE)
+
+    - url: https://api.net/entity
+    - request body: **json object**
+    - response body: **json object**
+
+  - **GET** (READ)
+
+    - url: https://api.net/entity/:id
+    - request body: -
+    - response body: **json object**
+
+  - **PUT** (UPDATE)
+
+    - url: https://api.net/entity/:id
+    - request body: **json object**
+    - response body: **json object**
+
+  - **DELETE** (DELETE)
+
+    - url: https://api.net/entity/:id
+    - request body: -
+    - response body: -
+
+  - **GET** (LIST)
+
+    - url: https://api.net/entity
+    - request body: -
+    - response body: **json array**
+
+# Angular Base Authentication
+This library contains an abstract auth-service and guards that can be used out of the box, by just extending the `BaseAuthService<TUSER>`.
+
+## Usage
+
+**Step 1: Create a user model**
+
+```js
+interface UserModel {
+  id: string;
+  email: string;
+  isAdmin: boolean;
+}
+```
+
+**Step 2: Extend the base-auth-service using the user-model**
+
+```js
+@Injectable({ providedIn: 'root' })
+export class MyOwnAuthService extends BaseAuthService<UserModel>...
+```
+
+**Step 3: Set the initial login state inside the constructor**
+
+With local auth-cookie:
+```js
+constructor() {
+  const user = loginUsingAuthCookie(); // Validate and check your local auth-cookie
+  if (user) {
+    this.userLoggedIn(user); // Sets the login state to logged-in
+  } else {
+    this.userLoggedOut(); // Sets the login state to logged-out
+  }
+}
+```
+
+Without local tokens:
+```js
+constructor() {
+  this.userLoggedOut(); // Sets the initial login state to logged-out
+}
+```
+
+> Important: Make sure the initial login state is set right after the application is started by calling `userLoggedIn`or `userLoggedOut`. If you do NOT do this the login-state will be `pending` and the provided auth-guards be waiting for the 'readyLoginState$' forever.
+
+****
+
+```js
+constructor() {
+  this.userLoggedOut(); // If you do not do this, the login-state will be pending
+}
+```
+
+**Step 4: Implement the login-logout functions and call the provided functions of the base-class**
+
+```js
+async login(loginData): Promise<void> {
+  try {
+    const result$ = this.http.post<UserModel>(login, loginData);
+    const user = await firstValueFrom(result$);
+    this.userLoggedIn(user); // Sets the login state to logged-in
+  } catch (ex) {
+    this.userLoggedOut(); // Sets the login state to logged-out
+    return ex;
+  }
+}
+```
+
+**Step 5: Provide your service implementation as `BaseAuthService`**
+app.config.ts
+```js
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideHttpClient(),
+    {
+      provide: BaseAuthService,
+      useExisting: MyOwnAuthService
+    },
+    ...
+  ]
+};
+```
+
+**Step 6: Use it**
+
+Now you can use the provided route-guards without any configuration.
+```js
+{  
+  ...
+  path: 'login',
+  canActivate: [loggedOutGuardFn], //Only allow when logged-out
+  ...
+},
+{
+  ...
+  path: 'account',
+  canActivate: [loggedInGuardFn], // Only allow when logged-in
+  ...
+},
+```
+
+The `BaseAuthService` also provides a list of handy observables that represent the current auth-state like:
+```js
+loginState$(): Observable<LoginState>
+readyLoginState$(): Observable<LoginState>
+readyAuthState$(): Observable<BaseAuthState<T>>
+user$(): Observable<T | null>
+isLoggedIn$(): Observable<boolean>
+loginRoute(): string
+```
+
+### loginState$ vs readyLoginState$
+
+#### loginState$
+
+Emits all login states. Initial value will be `{ loginState: 'pending', user: null }`
+
+#### readyLoginState$
+
+Only emits non `pending` auth-states. Therefor handy for auth-guards.
+
+#### Explanation
+
+When a page is initially loaded, and the user is logged in using the stored auth-cookie. The auth state will be `pending` until the cookie is verified, until this the auth guard should not check if the route can be activated. Only if `this.userLoggedOut()` or `this.userLoggedIn(user)` was called, the auth guard will check the access. This prevents the application from blocking a page from the user because login-state is not settled jet.
+
+# angular-base
+
+Library with different abstract components and utilities that come in handy for simple angular-applications.
+
+# model-component
+
+A collection of abstract classes(components) that can reflect the different action pages(list/add/edit) for a subject(model).
+
+# navigation-service
+
+Keeps track of visited pages and navigates back to the previous page if 'back' is called. If back is called on the initial page, the fallback route is used.
+For example if the user is on the route '/users/edit' and clicks on the back button, the router will navigate to '/users'.
+These base paths can be defined in the implementation of the base-model-components.

package/fesm2022/angular-base-lib.mjs

@@ -2,7 +2,6 @@ import * as i0 from '@angular/core';
 import { inject, Injectable, Directive, HostListener, output, Input, model, signal } from '@angular/core';
 import { Router, NavigationEnd } from '@angular/router';
 import { Location } from '@angular/common';
-import { MatTableDataSource } from '@angular/material/table';
 import { FormGroup } from '@angular/forms';
 import { BehaviorSubject, filter, firstValueFrom, map as map$1 } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -31,10 +30,10 @@ class NavigationService {
             this.router.navigate([fallbackRoute]);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NavigationService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NavigationService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NavigationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NavigationService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -124,35 +123,35 @@ class BaseModelEditComponent extends BaseModelComponent {
 class BaseModelListComponent extends BaseModelComponent {
     constructor(baseRoute) {
         super(baseRoute);
-        this.dataSource = new MatTableDataSource([]);
+        this.dataSource = [];
         this.backRoute = '/';
     }
-    handleModelAction(modelAction) {
+    async handleModelAction(modelAction) {
         switch (modelAction.action) {
             case 'show':
-                this.showDetail(modelAction.model.id);
+                await this.showDetailPage(modelAction.model.id);
                 break;
             case 'edit':
-                this.editModel(modelAction.model.id);
+                await this.editModelPage(modelAction.model.id);
                 break;
             case 'delete':
-                this.deleteModel(modelAction.model);
+                await this.deleteModel(modelAction.model);
                 break;
         }
     }
-    showDetail(id) {
-        this.router.navigate([this.baseRoute, id]);
+    async showDetailPage(id) {
+        await this.router.navigate([this.baseRoute, id]);
     }
-    editModel(id) {
-        this.router.navigate([`${this.baseRoute}/edit`, id]);
+    async editModelPage(id) {
+        await this.router.navigate([`${this.baseRoute}/edit`, id]);
     }
-    createModel() {
-        this.router.navigate([`${this.baseRoute}/add`]);
+    async showCreateModelPage() {
+        await this.router.navigate([`${this.baseRoute}/add`]);
     }
     async deleteModel(model) {
         const [deleted, newList] = await this.handleModelDelete(model);
         if (deleted && newList) {
-            this.dataSource.data = newList;
+            this.dataSource = newList;
         }
     }
 }
@@ -164,10 +163,10 @@ class BackButtonDirective {
     onClick() {
         this.navigation.back();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: BackButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", type: BackButtonDirective, isStandalone: true, selector: "[ngLibBackButton]", host: { listeners: { "click": "onClick()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BackButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: BackButtonDirective, isStandalone: true, selector: "[ngLibBackButton]", host: { listeners: { "click": "onClick()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: BackButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BackButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngLibBackButton]',
@@ -550,10 +549,10 @@ class BaseControlValueAccessor {
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: BaseControlValueAccessor, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", type: BaseControlValueAccessor, inputs: { value: "value" }, outputs: { valueChanged: "valueChanged" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BaseControlValueAccessor, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: BaseControlValueAccessor, isStandalone: true, inputs: { value: "value" }, outputs: { valueChanged: "valueChanged" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: BaseControlValueAccessor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BaseControlValueAccessor, decorators: [{
             type: Directive
         }], propDecorators: { value: [{
                 type: Input
@@ -593,10 +592,10 @@ class SignalBaseControlValueAccessor {
     setDisabledState(disabled) {
         this.disabled.set(disabled);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SignalBaseControlValueAccessor, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.4", type: SignalBaseControlValueAccessor, inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SignalBaseControlValueAccessor, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", type: SignalBaseControlValueAccessor, isStandalone: true, inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SignalBaseControlValueAccessor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SignalBaseControlValueAccessor, decorators: [{
             type: Directive
         }] });