Common angular components for Sunbird consumption!

Contains common UI components powered by angular. These components are designed to be used in sunbird consumption platforms (mobile app, web portal, offline desktop app) to drive reusability, maintainability hence reducing the redundant development effort significantly.

Getting started

How to use @project-sunbird/common-consumption in your projects

Table of Contents

• Using library locally
• Step 1: Install the package
• Step 2: Include the sb-styles and assets in angular.json
• Step 3: Import the modules and components
• Available components
• Available directives
• Versions

Using library locally

1. Build library

npm run build-lib

2. link library -> cd dist/common-consumption

npm link

3. Link the library to your project

npm link @project-sunbird/common-consumption

Step 1: Install the package

npm install @project-sunbird/common-consumption --save
npm install @project-sunbird/sb-styles --save

Step 2: Include the sb-styles and assets in angular.json

"styles": [
...
...
"./node_modules/@project-sunbird/sb-styles/assets/_styles.scss"
]

Add following under architect.build.assets

 {
    ...
    "build": {
    
    "builder": "@angular-devkit/build-angular:browser",
    
    "options": {
	    ...
	    ...

	    "assets": [
	    
		   ...
		   ...
		    
		    {
			    "glob": "**/*.*",
			    "input": "./node_modules/@project-sunbird/common-consumption/assets",
			    "output": "./assets/common-consumption"
		    }
	    
	    ],

    "styles": [
    
    ...
    
    "./node_modules/@project-sunbird/sb-styles/assets/_styles.scss"
    
    ],
    
    ...
    ...

},

Step 3: Import the modules and components

Import the NgModule for each component you want to use:

import { CommonConsumptionModule} from '@project-sunbird/common-consumption';

@NgModule({
    ...
    
    imports: [CommonConsumptionModule],
    
    ...
})


export class TestAppModule { }

Alternatively, you can create a separate NgModule that imports and then re-exports all of the Angular components that you will use in your application. By exporting them again, other modules can simply include your CustomSunbirdComponentsModule wherever components are needed, and automatically get all of the exported modules. A good place for importing/exporting the application-wide modules is the SharedModule.

import { CardsModule } from '@project-sunbird/common-consumption/card';

import { PopoverModule } from '@project-sunbird/common-consumption/popover';


@NgModule({

...

imports: [CardsModule, PopoverModule],

exports: [CardsModule, PopoverModule],

...

})


export class MyOwnCustomSunbirdComponentsModule { }

Available components

|Feature| Notes| Selector|Code| |--|--|--|------------------------------------------------------------------------------------------| | LibraryCard | Can be used in the library page for all consumption platforms| sb-library-card| <sb-library-card><sb-library-card>| | CourseCard | Can be used in the courses page for all consumption platforms| sb-course-card| <sb-course-card><sb-course-card>| | MyCourseCard | Can be used in the My courses section for all consumption platforms| sb-my-course-card| <sb-my-course-card></sb-my-course-card>| | TocCard | Can be used in the TOC card| sb-toc-card|NA| | LibraryCardsGrid | Can be used in the courses page for all consumption platforms|sb-library-cards-grid |<sb-library-cards-grid [title]="Grid Title" [isLoading]="isLoading[maxCardCount="3"><sb-library-cards-grid>| | CourseCardsGrid | Can be used in the course page for all consumption platforms|sb-course-cards-hlist| <sb-course-cards-hlist [multiRow]="true" [contentList]="range(15)"[type="'curiculum_course_card_grid'" [title]="'Courses'" [isLoading]="isLoading"><sb-course-cards-hlist>| | LibraryCardsStack | Can be used in the courses page for all consumption platforms|sb-library-cards-stack| <sb-library-cards-stack [title]="Stack Title"[contentList]="range(15)" [maxCardCount]="3" [isLoading]="isLoading"></sb-library-cards-stack>| | Confirmation Modal | Can be used in places where a popup is needed with user prompt|sb-confirmation-modal|| | LibraryFilters | Can be used in the library page for all consumption platforms. |sb-library-filters|| | FAQ Component | Faq for Consumption Clients with intractable events. |sb-faq|| | Card hover component | Can be used with library card to add overlay on card with action items . |sb-card-hover|| | TOCItem component | Shows given array of Items with accordion structure. |sb-toc-item|| | TOCChildItem component | Shows given array of Items with accordion structure. |sb-toc-item|| | Member Card component | Member Card With Menu. |sb-member-card| <sb-member-card></sb-member-card>| | Member List component | Member List With Cards. |sb-member-list| <sb-member-list [layoutConfig]="{size:'medium', isBold:false, isSelectable:true,view:'horizontal'}" [memberList]="range(15)" [isMenu]="false"(cardClick)="memberCardClick`` ($event)" (menuClick)="menuClick($event)"></sb-member-list>*| | [Group Card component](./projects/common-consumption/src/lib/card/group-card/group-card.md) | Group Card. |sb-group-card| *`|

Available directives

|Feature| Notes| directive|Code| |--|--|--|------------------------------------------------------------------------------------------| | CertificateDownloadAsImageDirective | Can be used on any DOM element to make it download certificate as image on click| sbCertificateDownloadAsImage| <button sbCertificateDownloadAsImage [template]="'<svg some-attr="$SOME_VAR"></svg>'" [metadata]="{$SOME_VAR: 'SOME_VALUE'}" [baseUrl]="'SAMPLE_BASE_URL'"></button>| | CertificateDownloadAsPdfDirective | Can be used on any DOM element to make it download certificate as PDF on click| sbCertificateDownloadAsPdf| <button sbCertificateDownloadAsImage [template]="'<svg some-attr="$SOME_VAR"></svg>'" [metadata]="{$SOME_VAR: 'SOME_VALUE'}" [baseUrl]="'SAMPLE_BASE_URL'"></button>|

Versions

| release branch | npm package version | Angular Version | |-------------------|---------------------|-----------------| | v10_migration | 4.11.0 | Ng V10 | | release-5.1.0_v11 | 4.12.0 | Ng V11 | | release-5.1.0_v12 | 5.1.0 | Ng V12 | | release-5.1.0_v12 | 5.1.1 | Ng V12 | | release-6.0.0_v13 | 6.0.0 | Ng V13 | | 8.0.0_v14 | 8.0.0 | Ng V14 | | 8.0.0_v15 | 8.0.1 | Ng V15 | | 8.0.0_v16 | 8.0.2 | Ng V16 |