Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@project-sunbird/common-consumption

Package Overview
Dependencies
Maintainers
10
Versions
132
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@project-sunbird/common-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 effo

  • 7.0.7
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
10
Created
Source

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

FeatureNotesSelector
LibraryCardCan be used in the library page for all consumption platformssb-library-card
CourseCardCan be used in the courses page for all consumption platformssb-course-card
TocCardCan be used in the My courses section for all consumption platformssb-my-course-card
LibraryCardHListCan be used in the library page for all consumption platformssb-library-cards-grid
CourseCardsGridCan be used in the course page for all consumption platformssb-course-cards-hlist
LibraryCardsStackCan be used in the courses page for all consumption platformssb-library-cards-stack
Confirmation ModalCan be used in places where a popup is needed with user promptsb-confirmation-modal
LibraryFiltersCan be used in the library page for all consumption platforms.sb-library-filters
FAQ ComponentFaq for Consumption Clients with intractable events.sb-faq
Card hover componentCan be used with library card to add overlay on card with action items .sb-card-hover
TOCItem componentShows given array of Items with accordion structure.sb-toc-item
TOCChildItem componentShows given array of Items with accordion structure.sb-toc-item

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

NameDescription
@Input() content: IContentContent Object
@Input() type: LibraryCardTypesimport the interface LibraryCardTypes, to know different possible values of card types.Example: recently_viewed, mobile_textbook, desktop_textbook, qrcode_result OR Example: LibraryCardTypes.RECENTLY_VIEWED, LibraryCardTypes.MOBILE_TEXTBOOK, LibraryCardTypes.DESKTOP_TEXTBOOK, LibraryCardTypes.QRCODE_RESULT
@Input() cardImg: stringImage to be displayed in card in all possible scenarios. Note: Logic behind the image is not part of library in case of online,offline, and save resource
@Input() moreInfoLabel:stringLabel to be displayed in the meta data. Example: Medium, Section
Optional @Input() isMobile: booleanFlag to distinguish mobile platform
Optional @Input() isOffline: booleanFlag to handle offline scenarios
Optional @Input() section: stringIn case of QR code results cards, there is a need to show section
Optional @Input('hover-template') gridTemplate: TemplateRef;When card has hover data, the template reference of the hover component needs to be injected

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

NameDescription
@Input() title: booleanName that represents the section
@Input() type: LibraryCardGridTypesimport the interface LibraryCardGridTypes, to know different possible values of card types.Example: infinite_card_grid OR Example: LibraryCardGridTypes.infinite_card_grid,
@Input() contentList: collectionCollection of contents, where each content is a object from server API. Note: Add cardImg property for each item in list before passing contentList
Optional @Input() maxCardCount: NumberNumber of cards to display the viewing area Default value is 3
Optional @Input() viewMoreButtonText: stringcustom text to show in place of view all button, if there are more number of cards than "maxCardCount" then a button needs to be displayed. Default value is "View All"
Optional @Input('hover-template') gridTemplate: TemplateRef;When card has hover data, the template reference of the hover component needs to be injected

Events

NameDescription
@Output() viewMoreClickEmits this event when view all button is clicked
@Output() cardClickEmits this event when card is clicked

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

NameDescription
@Input() title: booleanName that represents the section
@Input() contentList: collectionCollection of contents, where each content is a object from server API. Note: Add cardImg property for each item in list before passing contentList
Optional @Input() maxCardCount: NumberNumber of cards to display the viewing area Default value is 3
Optional @Input() viewMoreButtonText: stringcustom text to show in place of view all button, if there are more number of cards than "maxCardCount" then a button needs to be displayed. Default value is "View All"
Optional @Input() isOffline: booleanFlag to handle offline scenarios Default value is "False"

Events

NameDescription
@Output() viewMoreClickEmits this event when view all button is clicked
@Output() cardClickEmits this event when card is clicked

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

NameDescription
@Input() list: Array<string>Array of strings
@Input() layout: LibraryFiltersLayoutimport the interface LibraryFiltersLayout, to know different possible values of filter types.Example: round, square OR Example: LibraryFiltersLayout.ROUND, LibraryFiltersLayout.SQUARE
@Input() selectedItems: Array<number>Array of indexes to select

Events

NameDescription
@Output() selectedFilterEmits this event when user clicks on the filter item. Example: event.data = {text: "english", selected: true, index: 0}
@Output() selectedMimeTypeEmits this event when user clicks on the mimeType filter item. Example: event.data = {value: ["video/mp4", "video/x-youtube", "video/webm], text: "video", selected: true, type: "video", index: 1}

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

NameDescription
@Input() data: jsonPlease refer to faq Spec File for More details in the library
@Input() appName: stringName of your app

Events

NameDescription
@Output() toggleGroupEventEmits this event when user clicks on the faq accordion
@Output() yesClickedEventEmits this event when user clicks on the option yes inside faq
@Output() noClickedEventEmits this event when user clicks on the option yes inside faq
@Output() submitClickedEventEmits this event when user clicks on the option submit inside faq

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

NameDescription
@Input() hoverData: jsonPlease refer example for More details in the library

Events

NameDescription
@Output() hoverActionClickEmits this event when user clicks on the any action item, this will also have the card information on which the action is clicked

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>

Keywords

FAQs

Package last updated on 14 May 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc