docs: update documentation

Author: hakimio

docs/cdk/date-suggestion.md

@@ -1,8 +1,9 @@
 #### `@angular-ru/cdk/date`
 
-#### DateSuggestionModule
+#### DateSuggestion Composer
 
-Module for convenient substitution of date intervals depending on values and the current date.
+DateSuggestion composer can be used for convenient substitution of date intervals depending on values and the current
+date.
 
 ##### Default usage
 
@@ -17,16 +18,23 @@ Default implementation has 8 built-in strategies:
 - `LAST_180_DAYS_OF_INTERVAL` — set 180 days to the last day from the current interval.
 
 ```typescript
-import {DateSuggestionModule, DateSuggestionComposer, DefaultDateIntervalSuggestion} from '@angular-ru/cdk/date';
+import {
+  DateSuggestionComposer,
+  DayOfWeek,
+  DefaultDateIntervalSuggestion,
+  FIRST_DAY_OF_WEEK,
+  provideDateSuggestion,
+} from '@angular-ru/cdk/date';
 
-@NgModule({
-  // ...
-  imports: [
-    // ...
-    DateSuggestionModule,
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideDateSuggestion(),
+    {
+      provide: FIRST_DAY_OF_WEEK,
+      useValue: DayOfWeek.Monday,
+    },
   ],
-})
-export class AppModule {}
+};
 
 @Component({
   // ...
@@ -68,10 +76,10 @@ import {
   DAYS_COUNT,
   DEFAULT_SUGGESTION_STRATEGY_MAP,
   SuggestionStrategyMap,
-  DateSuggestionModule,
   DateSuggestionComposer,
   DefaultDateIntervalSuggestion,
   endOfDay,
+  provideDateSuggestion,
   shiftDate,
   startOfDay,
 } from '@angular-ru/cdk/date';
@@ -107,15 +115,9 @@ const EXTENDED_STRATEGY_MAP: SuggestionStrategyMap<ExtendedDateIntervalSuggestio
   },
 };
 
-@NgModule({
-  // ...
-  imports: [
-    // ...
-    // Import DateSuggestionModule with created map as parameter
-    DateSuggestionModule.forRoot(EXTENDED_STRATEGY_MAP),
-  ],
-})
-export class AppModule {}
+export const appConfig: ApplicationConfig = {
+  providers: [provideDateSuggestion(EXTENDED_STRATEGY_MAP)],
+};
 
 @Component({
   // ...

docs/cdk/directives.md

@@ -1,24 +1,18 @@
 #### `@angular-ru/cdk/directives`
 
-- `InitialFocusDirective, InitialFocusModule`
+- `InitialFocus`
 - Selector: `initialFocus`
 
 - API:
-
   - `Input() focusDisabled: boolean` - default: `false`
 
 ```typescript
-import {InitialFocusModule} from '@angular-ru/cdk/directives';
-import {Component, NgModule} from '@angular/core';
-
-@NgModule({
-  // ..
-  imports: [InitialFocusModule],
-})
-export class AppModule {}
+import {InitialFocus} from '@angular-ru/cdk/directives';
+import {Component} from '@angular/core';
 
 @Component({
   //...
+  imports: [InitialFocus],
   template: `
     <input
       [focusDisabled]="false"
@@ -30,20 +24,15 @@ export class AppModule {}
 export class AppComponent {}
 ```
 
-- `AmountFormatDirective, AmountFormatDirectiveModule`
+- `AmountFormat`
 
 ```typescript
-import {AmountFormatDirectiveModule} from '@angular-ru/cdk/directives';
-import {Component, NgModule} from '@angular/core';
-
-@NgModule({
-  // ..
-  imports: [AmountFormatDirectiveModule],
-})
-export class AppModule {}
+import {AmountFormat} from '@angular-ru/cdk/directives';
+import {Component} from '@angular/core';
 
 @Component({
   //...
+  imports: [AmountFormat],
   template: `
     <input
       amountFormat
@@ -54,20 +43,15 @@ export class AppModule {}
 export class AppComponent {}
 ```
 
-- `ConvertCaseDirective, ConvertCaseDirectiveModule`
+- `ConvertCase`
 
 ```typescript
-import {ConvertCaseDirectiveModule} from '@angular-ru/cdk/directives';
-import {Component, NgModule} from '@angular/core';
-
-@NgModule({
-  // ..
-  imports: [ConvertCaseDirectiveModule],
-})
-export class AppModule {}
+import {ConvertCase} from '@angular-ru/cdk/directives';
+import {Component} from '@angular/core';
 
 @Component({
   //...
+  imports: [ConvertCase],
   template: `
     <input
       convertCase
@@ -78,20 +62,15 @@ export class AppModule {}
 export class AppComponent {}
 ```
 
-- `DisableControlDirective, DisableControlDirectiveModule`
+- `DisableControl`
 
 ```typescript
-import {DisableControlDirectiveModule} from '@angular-ru/cdk/directives';
-import {Component, NgModule} from '@angular/core';
-
-@NgModule({
-  // ..
-  imports: [DisableControlDirectiveModule],
-})
-export class AppModule {}
+import {DisableControl} from '@angular-ru/cdk/directives';
+import {Component} from '@angular/core';
 
 @Component({
   //...
+  imports: [DisableControl],
   template: `
     <input
       disableControl
@@ -102,20 +81,15 @@ export class AppModule {}
 export class AppComponent {}
 ```
 
-- `MaxLengthDirective, MaxLengthDirectiveModule`
+- `MaxLength`
 
 ```typescript
-import {MaxLengthDirectiveModule} from '@angular-ru/cdk/directives';
-import {Component, NgModule} from '@angular/core';
-
-@NgModule({
-  // ..
-  imports: [MaxLengthDirectiveModule],
-})
-export class AppModule {}
+import {MaxLength} from '@angular-ru/cdk/directives';
+import {Component} from '@angular/core';
 
 @Component({
   //...
+  imports: [MaxLength],
   template: `
     <input
       maxLength="3000"
@@ -126,25 +100,20 @@ export class AppModule {}
 export class AppComponent {}
 ```
 
-- `TrimInputDirective, TrimInputModule`
+- `TrimInput`
 - Selector: `trimInput`
 
 API:
 
 - `@Input('trimDisabled') disabled: boolean` - default: `false`
 
 ```typescript
-import {TrimInputModule} from '@angular-ru/cdk/directives';
-import {Component, NgModule} from '@angular/core';
-
-@NgModule({
-  // ..
-  imports: [TrimInputModule],
-})
-export class AppModule {}
+import {TrimInput} from '@angular-ru/cdk/directives';
+import {Component} from '@angular/core';
 
 @Component({
   //...
+  imports: [TrimInput],
   template: `
     <input
       [trimDisabled]="false"
@@ -156,20 +125,15 @@ export class AppModule {}
 export class AppComponent {}
 ```
 
-- `SplitStringDirective, SplitStringModule`
+- `SplitString`
 
 ```typescript
-import {SplitStringModule, SplitStringOptions} from '@angular-ru/cdk/directives';
-import {Component, NgModule} from '@angular/core';
-
-@NgModule({
-  // ..
-  imports: [SplitStringModule],
-})
-export class AppModule {}
+import {SplitString, SplitStringOptions} from '@angular-ru/cdk/directives';
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'test',
+  imports: [SplitString],
   template: `
         <form [formGroup]="form">
             <input type="text" formControlName="input1" splitString" />
@@ -202,20 +166,15 @@ class TestComponent {
 }
 ```
 
-- `InputFilterDirective, InputFilterModule`
+- `InputFilter`
 
 ```typescript
-import {InputFilterModule, FilterPredicate} from '@angular-ru/cdk/directives';
-import {Component, NgModule} from '@angular/core';
-
-@NgModule({
-  // ..
-  imports: [InputFilterModule],
-})
-export class AppModule {}
+import {InputFilter, FilterPredicate} from '@angular-ru/cdk/directives';
+import {Component} from '@angular/core';
 
 @Component({
   //...
+  imports: [InputFilter],
   template: `
     <div [formGroup]="form">
       <input

docs/cdk/flex-layout.md

@@ -17,14 +17,13 @@ $ npm install @angular-ru/cdk
 ```
 
 ```typescript
-import {FlexLayoutModule} from '@angular-ru/cdk/flex-layout';
-import {NgModule} from '@angular/core';
+import {FlexLayout} from '@angular-ru/cdk/flex-layout';
 
-@NgModule({
+@Component({
   imports: [
     // ...
-    FlexLayoutModule,
+    FlexLayout,
   ],
 })
-export class AppModule {}
+export class AppComponent {}
 ```

docs/cdk/http.md

@@ -1,12 +1,11 @@
-## DataHttpClientModule
+## DataHttpClient
 
 Custom http client, with the ability to customize requests, auto unsubscribe and additional request interceptors.
 
 ## Table of contents:
 
 1. [📖 Changelog](https://github.com/Angular-RU/angular-ru-sdk/blob/master/CHANGELOG.md)
 2. [📦 Advanced](#table-of-contents)
-
    - [@angular-ru/cdk/http/utils](https://github.com/Angular-RU/angular-ru-sdk/blob/master/libs/http/docs/utils.md)
    - [@angular-ru/cdk/http/decorators](https://github.com/Angular-RU/angular-ru-sdk/blob/master/libs/http/docs/decorators.md)
 
@@ -17,21 +16,17 @@ Example, if your API base url placed here `https://my-server.com/api/***` and ha
 ![](https://habrastorage.org/webt/af/bg/n9/afbgn985tehybqdpk2gs1ymq9se.jpeg)
 
 ```typescript
-import {HttpClientModule} from '@angular/common/http';
-import {DataHttpClientModule} from '@angular-ru/cdk/http';
-
-@NgModule({
-  imports: [
-    // ...
-    HttpClientModule,
-    DataHttpClientModule.forRoot([ApiUsersClient], {
+import {provideHttpClient} from '@angular/common/http';
+import {provideDataHttpClientOptions} from '@angular-ru/cdk/http';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideHttpClient(),
+    provideDataHttpClientOptions([ApiUsersClient], {
       hostUrl: 'https://my-server.com/api/',
     }),
   ],
-  declarations: [AppComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
+};
 ```
 
 #### Create your http client for your api controller
@@ -164,22 +159,21 @@ limits for maximum connections per host name (Chrome: 6)
 but if necessary, you can change it <br> for example, <b>limitConcurrency: 5</b> <br> This mean that maximum of 5
 requests can be executed in parallel. Next one immediately start only if one of the previous requests is completed
 
-- `app.module.ts`
+- `app.config.ts`
 
 ```typescript
-import {DataHttpClientModule} from '@angular-ru/cdk/http';
+import {provideHttpClient} from '@angular/common/http';
+import {provideDataHttpClientOptions} from '@angular-ru/cdk/http';
 
-@NgModule({
-  imports: [
-    // ...
-    DataHttpClientModule.forRoot([ApiUsersClient], {
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideHttpClient(),
+    provideDataHttpClientOptions([ApiUsersClient], {
       // ...
       limitConcurrency: 5,
     }),
   ],
-  // ...
-})
-export class AppModule {}
+};
 ```
 
 ![](../assets/limit-concurrency-5.png)