@smartbit4all/ng-client 2.2.2 → 3.0.1

package/projects.d.ts

@@ -1,7 +1,19 @@
 export * from './lib/smart-ng-client.service';
 export * from './lib/smart-ng-client.module';
 export * from './lib/smart-client/smart-file-uploader/smart-file-uploader.component';
-export * from './lib/view-context/projects';
+export * from './lib/component-factory-service/projects';
 export * from './lib/session/projects';
-export * from './lib/smart-client/projects';
+export * from './lib/smart-component-layout/projects';
+export * from './lib/smart-dialog/projects';
+export * from './lib/smart-expandable-section/projects';
+export * from './lib/smart-filter/projects';
+export * from './lib/smart-form/projects';
+export * from './lib/smart-grid/projects';
+export * from './lib/smart-icon/projects';
+export * from './lib/smart-navbar/projects';
+export * from './lib/smart-navigation/projects';
+export * from './lib/smart-subject/projects';
+export * from './lib/smart-tab-group/projects';
+export * from './lib/smart-table/projects';
 export * from './lib/smart-tree/projects';
+export * from './lib/view-context/projects';

package/src/lib/component-factory-service/README.md

@@ -0,0 +1,99 @@
+# Smart Component Factory Service
+
+## References
+
+These packages must be updated in case of a new version:
+
+-   [_@smartbit4all/expandable-section_](https://www.npmjs.com/package/@smartbit4all/expandable-section)
+
+---
+
+## How to use
+
+### Installation
+
+Go to your project, open the terminal and use the following command:
+
+    npm i @smartbit4all/component-factory-service
+
+### Usage
+
+In this example there are two components, which are called `Example1Component` and `Example2Component`, these will be presented with the `ComponentFactoryService` in the `ParentComponent`.
+
+`parent.component.html:`
+
+    <button (click)="show(1)">Show 1</button>
+    <button (click)="show(2)">Show 2</button>
+
+    <ng-template #exampleRef></ng-template>
+
+`parent.component.ts:`
+
+    export class ParentComponent implements AfterViewInit {
+
+        @ViewChild('exampleRef', { read: ViewContainerRef }) vcRefExample?: ViewContainerRef;
+
+        componentRef?: ComponentRef<any>;
+
+        constructor(private cfService: ComponentFactoryService) { ... }
+
+        ngAfterViewInit(): void {
+            this.createExampleOne();
+        }
+
+        show(componentNumber: number): void {
+            if (componentNumber === 1)
+                this.createExampleOne();
+            else if (componentNumber === 2)
+                this.createExampleTwo();
+        }
+
+        createExampleOne(): void {
+            this.vcRefExample?.clear();
+
+            this.cfService.createComponent(
+                this.vcRefExample!,
+                Example1Component
+            );
+        }
+
+        createExampleTwo(): void {
+            if (this.componentRef) {
+                this.cfService.destroyComponent(this.componentRef);
+            }
+
+            let exampleInput: any = { ... }
+
+            this.componentRef = this.cfService.createComponent(
+                this.vcRefExample!,
+                Example2Component,
+                new Map<string, any>([['exampleInput', exampleInput]])
+            );
+        }
+    }
+
+`example2.component.ts:`
+
+    export class Example2Component {
+        @Input() exampleInput: any;
+
+        ...
+    }
+
+---
+
+## Version logs
+
+## @smartbit4all/form v1.0.1
+
+**Type: Update**
+
+The package has been published.
+
+## @smartbit4all/component-factory-service v0.0.1
+
+**Type: Feature**
+
+The npm package has been created.
+
+The `ComponentFactoryService` helps to use **ng-template** in your code.

package/src/lib/smart-component-layout/README.md

@@ -0,0 +1,31 @@
+# Smart Component Layout
+
+---
+
+## How to use
+
+### Installation
+
+Go to your project, open the terminal and use the following command:
+
+    npm i @smartbit4all/component-layout
+
+Import the `SmartComponentLayoutComponent` in the app.module:
+
+`app.module.ts:`
+
+    @NgModule({
+        declarations: [...],
+        imports: [
+            SmartComponentLayoutComponent,
+            ...
+        ],
+        providers: [
+            SmartSessionService,
+    	    SmartViewContextService,
+            ...
+        ],
+        ...
+    })
+
+### Usage

package/src/lib/smart-component-layout/api/README.md

@@ -0,0 +1,226 @@
+## @
+
+### Building
+
+To install the required dependencies and to build the typescript sources run:
+```
+npm install
+npm run build
+```
+
+### publishing
+
+First build the package then run ```npm publish dist``` (don't forget to specify the `dist` folder!)
+
+### consuming
+
+Navigate to the folder of your consuming project and run one of next commands.
+
+_published:_
+
+```
+npm install @ --save
+```
+
+_without publishing (not recommended):_
+
+```
+npm install PATH_TO_GENERATED_PACKAGE/dist.tgz --save
+```
+
+_It's important to take the tgz file, otherwise you'll get trouble with links on windows_
+
+_using `npm link`:_
+
+In PATH_TO_GENERATED_PACKAGE/dist:
+```
+npm link
+```
+
+In your project:
+```
+npm link 
+```
+
+__Note for Windows users:__ The Angular CLI has troubles to use linked npm packages.
+Please refer to this issue https://github.com/angular/angular-cli/issues/8284 for a solution / workaround.
+Published packages are not effected by this issue.
+
+
+#### General usage
+
+In your Angular project:
+
+
+```
+// without configuring providers
+import { ApiModule } from '';
+import { HttpClientModule } from '@angular/common/http';
+
+@NgModule({
+    imports: [
+        ApiModule,
+        // make sure to import the HttpClientModule in the AppModule only,
+        // see https://github.com/angular/angular/issues/20575
+        HttpClientModule
+    ],
+    declarations: [ AppComponent ],
+    providers: [],
+    bootstrap: [ AppComponent ]
+})
+export class AppModule {}
+```
+
+```
+// configuring providers
+import { ApiModule, Configuration, ConfigurationParameters } from '';
+
+export function apiConfigFactory (): Configuration {
+  const params: ConfigurationParameters = {
+    // set configuration parameters here.
+  }
+  return new Configuration(params);
+}
+
+@NgModule({
+    imports: [ ApiModule.forRoot(apiConfigFactory) ],
+    declarations: [ AppComponent ],
+    providers: [],
+    bootstrap: [ AppComponent ]
+})
+export class AppModule {}
+```
+
+```
+// configuring providers with an authentication service that manages your access tokens
+import { ApiModule, Configuration } from '';
+
+@NgModule({
+    imports: [ ApiModule ],
+    declarations: [ AppComponent ],
+    providers: [
+      {
+        provide: Configuration,
+        useFactory: (authService: AuthService) => new Configuration(
+          {
+            basePath: environment.apiUrl,
+            accessToken: authService.getAccessToken.bind(authService)
+          }
+        ),
+        deps: [AuthService],
+        multi: false
+      }
+    ],
+    bootstrap: [ AppComponent ]
+})
+export class AppModule {}
+```
+
+```
+import { DefaultApi } from '';
+
+export class AppComponent {
+    constructor(private apiGateway: DefaultApi) { }
+}
+```
+
+Note: The ApiModule is restricted to being instantiated once app wide.
+This is to ensure that all services are treated as singletons.
+
+#### Using multiple OpenAPI files / APIs / ApiModules
+In order to use multiple `ApiModules` generated from different OpenAPI files,
+you can create an alias name when importing the modules
+in order to avoid naming conflicts:
+```
+import { ApiModule } from 'my-api-path';
+import { ApiModule as OtherApiModule } from 'my-other-api-path';
+import { HttpClientModule } from '@angular/common/http';
+
+@NgModule({
+  imports: [
+    ApiModule,
+    OtherApiModule,
+    // make sure to import the HttpClientModule in the AppModule only,
+    // see https://github.com/angular/angular/issues/20575
+    HttpClientModule
+  ]
+})
+export class AppModule {
+
+}
+```
+
+
+### Set service base path
+If different than the generated base path, during app bootstrap, you can provide the base path to your service.
+
+```
+import { BASE_PATH } from '';
+
+bootstrap(AppComponent, [
+    { provide: BASE_PATH, useValue: 'https://your-web-service.com' },
+]);
+```
+or
+
+```
+import { BASE_PATH } from '';
+
+@NgModule({
+    imports: [],
+    declarations: [ AppComponent ],
+    providers: [ provide: BASE_PATH, useValue: 'https://your-web-service.com' ],
+    bootstrap: [ AppComponent ]
+})
+export class AppModule {}
+```
+
+
+#### Using @angular/cli
+First extend your `src/environments/*.ts` files by adding the corresponding base path:
+
+```
+export const environment = {
+  production: false,
+  API_BASE_PATH: 'http://127.0.0.1:8080'
+};
+```
+
+In the src/app/app.module.ts:
+```
+import { BASE_PATH } from '';
+import { environment } from '../environments/environment';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [ ],
+  providers: [{ provide: BASE_PATH, useValue: environment.API_BASE_PATH }],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
+```
+
+### Customizing path parameter encoding
+
+Without further customization, only [path-parameters][parameter-locations-url] of [style][style-values-url] 'simple'
+and Dates for format 'date-time' are encoded correctly.
+
+Other styles (e.g. "matrix") are not that easy to encode
+and thus are best delegated to other libraries (e.g.: [@honoluluhenk/http-param-expander]).
+
+To implement your own parameter encoding (or call another library),
+pass an arrow-function or method-reference to the `encodeParam` property of the Configuration-object
+(see [General Usage](#general-usage) above).
+
+Example value for use in your Configuration-Provider:
+```typescript
+new Configuration({
+    encodeParam: (param: Param) => myFancyParamEncoder(param),
+})
+```
+
+[parameter-locations-url]: https://github.com/OAI/OpenAPI-Specification/blob/main/versions/3.1.0.md#parameter-locations
+[style-values-url]: https://github.com/OAI/OpenAPI-Specification/blob/main/versions/3.1.0.md#style-values
+[@honoluluhenk/http-param-expander]: https://www.npmjs.com/package/@honoluluhenk/http-param-expander

package/src/lib/smart-dialog/README.md

@@ -0,0 +1,197 @@
+# Smart Dialog
+
+## References
+
+These packages must be updated in case of a new version:
+
+-   [_@smartbit4all/view-context_](https://www.npmjs.com/package/@smartbit4all/view-context)
+
+---
+
+## How to use
+
+### Installation
+
+Go to your project, open the terminal and use the following command:
+
+    npm i @smartbit4all/dialog
+
+Then import it in the AppModule:
+
+`app.module.ts:`
+
+    import { SmartdialogModule, SmartdialogService } from '@smartbit4all/dialog';
+    ...
+    @NgModule({
+        declarations: [...]
+        imports: [
+            ...
+            SmartdialogModule,
+        ],
+        providers: [
+            ...
+    	    SmartdialogService,
+        ]
+        ...
+    })
+
+### Usage #1
+
+If you **do not** use the **`SmartViewContext`** package in your project **or the dialog is not opened by the BFF**, you **have to create a service** for you component.
+
+Create a component for the content of the dialog. In the folder of the component create an Angular Service.
+
+-   src/app/.../example-dialog/
+    -   example-dialog.component.css
+    -   example-dialog.component.html
+    -   example-dialog.component.ts
+    -   example-dialog.service.ts
+
+Extend your service with the `SmartdialogService`. You can see an example for a specific service belove.
+
+`example-dialog.service.ts:`
+
+    @Injectable({
+        providedIn: 'root'
+    })
+    export class ExampleDialogService extends SmartdialogService {
+        constructor(
+            dialog: MatDialog,
+            router: Router
+        ) {
+            super(dialog, router);
+        }
+
+        override handleAfterClosed(result: any): void {
+            ...
+        }
+
+        openDialog(): void {
+            const dialogData: SmartDialogData = { ... };
+            this.createDialog(dialogData, SmartDialog);
+        }
+
+        onAction(params: any): void {
+            this.closeDialog().then(() => {
+                ...
+            });
+        }
+    }
+
+In case if you use **RouterOutlet** in your dialog, it should be used like this:
+
+`example-dialog.component.html:`
+
+    <router-outlet name="exampleNamedOutlet"></router-outlet>
+
+`app-routing.module.ts:`
+
+    ...
+    {
+    	path: 'example-url',
+    	component: ExampleComponent,
+    	outlet: 'exampleNamedOutlet'
+    }
+
+`example-dialog.service.ts:`
+
+    const dialogData: SmartDialogData = {
+        ...
+        outlets: {
+            exampleNamedOutlet: null
+        }
+    };
+
+### Usage #2
+
+If you **use** the **`SmartViewContext`** package in your project **and the dialog is opened by the BFF**, you **do not** have to **create a service** for you component.
+
+`view-context.pages.ts:`
+
+    export enum Pages {
+        VIEW_CONTEXT = 'viewContextUuid',
+        EXAMPLE_DIALOG = 'exampleDialog'
+    }
+
+`view-context.handlers.ts:`
+
+    export const viewContextHandlers: SmartViewHandlerModel[] = [
+        {
+            name: Pages.EXAMPLE_DIALOG,
+            component: ExmapleDialogComponent
+        }
+    ];
+
+---
+
+## Version logs
+
+## @smartbit4all/form v1.0.5
+
+**Type: Update**
+
+The **openComponentAsDialog** function returns the reference of the created dialog.
+
+    openComponentAsDialog(component: ComponentType<any>, viewName: string): MatDialogRef<any, any> { ... }
+
+## @smartbit4all/form v1.0.4
+
+**Type: Update**
+
+`@smartbit4all/icon` support.
+
+## @smartbit4all/form v1.0.1
+
+**Type: Update**
+
+The package has been published.
+
+## @smartbit4all/dialog v0.1.0
+
+**Type: Feature**
+
+From this version the usage of `SmartViewContext` is supported.
+
+The **SmartDialogService got a new function** which **creates** a unified **SmartDialogData object** and **opens the dialog**.
+
+    export class SmartdialogService {
+
+        ...
+
+        openComponentAsDialog(component: ComponentType<any>, viewName: string): void {
+            let smartDialog: SmartDialogData = {
+                size: {},
+                content: {
+                    title: viewName,
+                },
+                customComponent: component,
+            };
+
+            this.createDialog(smartDialog, component);
+        }
+    }
+
+## @smartbit4all/dialog v0.0.7
+
+**Type: Feature**
+
+In this update a new way to handle dialogs and its data has been introduced.
+
+With the `SmartdialogService` **creating** and **closing** a dialog has become easier and more unified. **This service should be used as a parent class of a workflow specific service.**
+
+## @smartbit4all/dialog v0.0.2
+
+**Type: Version updates**
+
+The versions of the SmartForm and the SmartTable have been updated.
+
+**New versions:**
+
+-   @smartbit4all/form: v0.1.1
+-   @smartbit4all/table: v0.1.3
+
+## @smartbit4all/dialog v0.0.1
+
+**Type: Feature**
+
+The basic smart dialog with its features.