CidaasHostedPageToolkit

The Cidaas Hosted Page Toolkit provides the most used components that developer needed to develop hosted pages.

Installation

npm install --save cidaas-hosted-page-toolkit

Cidaas Hosted Page Footer

To use cidaas hosted page footer, the following steps should be done:

1. Make sure that Cidaas Hosted Page Toolkit has been installed in your application

2. Add the CidaasHostedPageFooterModule from the toolkit in your applications's app.module

import { CidaasHostedPageFooterModule } from 'cidaas-hosted-page-toolkit';
...
@NgModule({
  ...
  imports: [
    ...
    CidaasHostedPageFooterModule,
    ...

3. you can now use cidaas hosted page footer component in your application

html:

<lib-cidaas-hosted-page-footer [imprintUri]="cpLegalNoticeURL" [tosUri]="cpDataProtectionURL" [policyUri]="cpPolicyURL"
  [customStyle]="customStyles">
</lib-cidaas-hosted-page-footer>

component:

...
this.cpPolicyURL = 'https://www.cidaas.com/terms-of-use/';
this.cpDataProtectionURL = 'https://www.cidaas.com/privacy-policy/';
this.cpLegalNoticeURL = 'https://www.cidaas.com/legal/';
this.customStyles = {
    layout: 'column',
    backgroundColor: 'green',
}
...

cidaas hosted page footer component support the following input:

|Input | Optional | Description | | --- | --- | --- | | tosUri | yes | If exist, it will show Terms os services label in the footer that will be redirected to the input uri.| | imprintUri | yes | If exist, it will show Imprint label in the footer that will be redirected to the input uri. | | policyUri color | yes | If exist, it will show Data Policy label in the footer that will be redirected to the input uri. | | companyName | yes | If exist, company name will also be shown in the footer. | | appVersion | yes | If exist, application version will also be shown in the footer. | | customStyle | yes | Contains collection of custom styles, which would be applied to the toolkit footer. |

the following custom styles can be added to cidaas hosted page footer component:

|Style | Possible Values | Description | | --- | --- | --- | | backgroundColor | hex color code e.g. #000000, ... | Change background color of footer.| | fontColor | hex color code e.g. #000000, ... | Change font color of footer. | | fontFamily | font family e.g. calibri, ... | Change font family of footer. | | fontSize | html font size e.g. 16px, 1.2em, ... | Change font size of footer. | | height | html height e.g. 100px, 100%, ... | Change the height of footer. | | layout | ['row', 'column'] | Change the layout of footer. row for horizontal layout & column for vertical layout | | location | ['start', 'center', 'end]' | Change the allignment of footer. |

Cidaas Hosted Page Color Service

Cidaas Hosted Page Color Service contain method to calculate material color palette based on base color.

to use it, bind the service in the app module provider:

import { CidaasHostedPageColorService } from 'cidaas-hosted-page-toolkit';
...
@NgModule({
  ...
  providers: [
    ...
    CidaasHostedPageColorService,
    ...

afterward you can bind the toolkit in the component constructor and call computeColors()

import { CidaasHostedPageColorService } from 'cidaas-hosted-page-toolkit';
...
constructor(private colorService: CidaasHostedPageColorService) { }
...
const colorPalette = this.colorService.computeColors('{color code}');
...

computeColors() have the following parameter:

| Parameter | Optional | Description | | --- | --- | --- | | hex | no | Base color code, which color palette should be calculated | | type | yes | color type (e.g. primary, accent) | | algorithm | yes | algorithm to calculate color palette. If filled, its value is one of ['constantin','buckner'] |