@project-sunbird/common-consumption-v10 v4.11.0

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

For help getting started with a new Angular app, check out the Angular CLI. For existing apps, follow these steps to begin using .

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

LibraryCard

Can be used in the library page for all consumption platforms.

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

Selector: sb-library-card Exported as : LibraryCardComponent

Properties

LibraryCardsGrid

Can be used in the library page for all consumption platforms targeting web platform

import { SbLibraryCardsGrid } form '@project-sunbird/common-consumption/layout/gridcards';

Selector: sb-library-cards-grid Exported as: SbLibraryCardsGrid

Properties

Events

LibraryCardsStackComponent

Can be used in the library page for mobile consumption

import { LibraryCardsStackComponent } form '@project-sunbird/common-consumption/layout/stackcards';

Selector: sb-library-cards-stack Exported as: LibraryCardsStackComponent

Properties

Events

LibraryFilters

Can be used in the library page for all consumption platforms.

import { LibraryFiltersComponent } from '@project-sunbird/common-consumption/library-filters';

Selector: sb-library-filters Exported as : LibraryFiltersComponent

Properties

Events

FAQ Component

Consumption Clients intend to use this component for FAQ in their apps.

import { FaqComponent } from '@Sunbird/components/faq' Selector: sb-faq Exported as : FaqComponent

Properties

Events

Card hover Component

Card hover component is intended to be used with Library card component. On hover of the card, this component adds an overlay with actions to be shows passed as input to it.

import { CardHoverComponent } from '@Sunbird/components/card-hover'

Selector: sb-card-hover Exported as : CardHoverComponent

Properties

Events

Sample hover data :

"hoverData": {
        "note": "Go to “My Downloads” to find this textbook",
        "actions": [
          {
            "type": "save",
            "label": "Save to pen-drive",
            "disabled": true
          },
          {
            "type": "open",
            "label": "Open"
          }
        ]
      }

Example :

<sb-library-card [content]="content" [type]="recentlyViewedCard"
                    (click)="cardClick($event)" [cardImg]="content?.appIcon"
                    [hover-template]="hoverTemplate">

                    <ng-template #hoverTemplate let-hoverData="hoverData" 
					let-content="content">
                        <sb-card-hover class="card-hover" [hoverData]="hoverData"
						[content]="content" (hoverActionClick)="hoverActionClicked($event)">
                        </sb-card-hover>
                    </ng-template>
	
</sb-library-card>