cidaas-hosted-page-toolkit

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

Requirements

Requirement	Version
Angular	>=21.0.0
@ngx-translate/core	>=18.0.0
Node.js	^20.19.0 || ^22.12.0 || ^24.0.0
TypeScript	>=5.9.0 <6.0.0

Migrating from v20 to v21

Summary of changes in v21:

• Angular 21 support
• @ngx-translate/core v18 (provider-based API)
• Removed unused @angular/flex-layout dependency
• Peer dependencies raised to Angular 21 / ngx-translate 18

Breaking changes for consumers

• Peer dependency bump: Install cidaas-hosted-page-toolkit@21 only after upgrading your host app to Angular 21.
• ngx-translate v18 required: TranslateModule is removed upstream. Configure i18n with provideTranslateService() instead of TranslateModule.forRoot(). See the ngx-translate v17 → v18 migration guide.
• Footer component: Still imported via CidaasHostedPageFooterModule, but the host app must provide @ngx-translate/core v18 at the root. Footer labels (FOOTER.* keys) require a configured TranslateService.
• Password strength meter: If using CidPwdStrengthMeterModule.forRoot(), register it after provideTranslateService() is configured. The module no longer bundles ngx-translate internally.
• Removed dependency: @angular/flex-layout was never used by this toolkit and is not required by consumers.

Setup example (Angular 21 + ngx-translate v18)

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { provideHttpClient } from '@angular/common/http';
import { provideTranslateService } from '@ngx-translate/core';
import { provideTranslateHttpLoader } from '@ngx-translate/http-loader';
import {
  CidaasHostedPageFooterModule,
  CidPwdStrengthMeterModule,
} from 'cidaas-hosted-page-toolkit';

@NgModule({
  imports: [
    BrowserModule,
    CidaasHostedPageFooterModule,
    CidPwdStrengthMeterModule.forRoot(),
  ],
  providers: [
    provideHttpClient(),
    provideTranslateService({
      loader: provideTranslateHttpLoader({ prefix: './assets/i18n/', suffix: '.json' }),
      fallbackLang: 'en',
    }),
  ],
})
export class AppModule {}

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. Configure @ngx-translate/core v18 at the app root (see setup example above)

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

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

1. 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']