hms-core v0.0.4

HMS Core Library

This library provides common components which use in other Angular projects. Currently, we have 4 components implemented and publish to public NPM.

Table Of Contents

• Getting Started
  • Dependencies
  • Install
  • Import the library to project
• About HMS Core Components
• Models
• Running Unit Test
• Author

Getting Started

Dependencies

Install

First thing, You need to an Angular project which you generate by Angular CLI. After that, You need to install Bootstrap CSS/SCSS and Ng-Bootstrap on either Dependencies or Dev Dependencies (--save-dev). You need to make sure about you imported bootstrap CSS/SCSS to your project.

// styles.scss
    @import '../../../node_modules/bootstrap/scss/bootstrap.scss';

// styles.css
    @import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

About ".../.../.../" or ".../" at URL prefix, It's belong to project structure you have.

Then you can get our library from NPM as below:

npm i hms-core

npm install hms-core

Import the library to project

Now, you need to import the library to any modules that you need as the following example

// app.module.ts
...
import { HmsCoreModule } from 'hms-core'; // <-- Declare importting module from hms-core here
...

@NgModule({
    declarations: [
        AppComponent,
        ...
    ],
    imports: [
        ...,
        HmsCoreModule, // <-- Import the library here
        ...
    ],
    providers: [],
    bootstrap: [AppComponent],
    schemas: [CUSTOM_ELEMENTS_SCHEMA] // <-- Put CUSTOM_ELEMENTS_SCHEMA to schemas
})
export class AppModule { }

About HMS Core Components

Login

<hms-login [loginLanguages]="loginLanguage" [loginSignal]="loginSignal" (signIn)="onSignIn($event)" (signOut)="onSignOut()"></hms-login>

Header

<hms-header [headerData]="headerData" (searchTerm)="onSearch($event)" (updateProfile)="onUpdateProfile()" (changePassword)="onChangePassword()" (signOut)="onSignOut()"></hms-header>

Footer

<hms-footer [footerData]="footerData"></hms-footer>

SideBar

<hms-sidebar [sideBarData]="sideBarData"></hms-sidebar>

Models

Login

//login-languages.model.ts

---LoginLanguages CLASS
-------title?: string;
-------emailLabel?: string;
-------passwordLabel?: string;
-------signInText?: string;
-------signUpText?: string;
-------signUpIntroText?: string;
-------invalidEmailMessageText?: string;

//login-signal.model.ts

---LoginSignal CLASS
-------isValid: string;
-------invalidMessage: string;

//login-user.model.ts

---LoginUser CLASS
-------email: string;
-------password: string;

Header

//header.model.ts

---Header CLASS
-------logo: Logo;
-------title: string;
-------menu: MenuItem[];
-------user: User;
-------userMenuLanguage: UserMenuLanguage;

//logo.model.ts

---Logo CLASS
-------imgUrl: string;
-------alt: string;
-------homePageUrl: string;

//menu-item.model.ts

---MenuItem CLASS
-------displayText: string;
-------url: string;

//user-menu-language.model.ts

---UserMenuLanguage CLASS
-------profile: Logo;
-------changePassword: string;
-------signOut: MenuItem[];

//user.model.ts

---User CLASS
-------firstName: string;
-------lastName: string;
-------email: string;
-------user: string;

Footer

//footer.model.ts

---Footer CLASS
-------copyRightText: string;
-------logo: Logo;

SideBar

//sidebar.model.ts

---SideBar CLASS
-------title: string;
-------menu: string;

Running unit tests

Run ng test hms-core to execute the unit tests via Karma.

Author

• Shane - Sang Nguyen - Initial work - Github