diff --git a/projects/common-consumption/package.json b/projects/common-consumption/package.json index 76354746495d85686eaa2ddc57a8d7b62fd9354a..9cb0d0f5d8f21ae3911c6f4232acc69ba52f3139 100644 --- a/projects/common-consumption/package.json +++ b/projects/common-consumption/package.json @@ -1,6 +1,6 @@ { "name": "@project-sunbird/common-consumption-v9", - "version": "4.9.1", + "version": "4.10.2", "repository": { "type": "git", "url": "git+https://github.com/Sunbird-Ed/SunbirdEd-consumption-ngcomponents.git" diff --git a/projects/common-consumption/src/lib/card/library-card-v2/library-card-v2.component.html b/projects/common-consumption/src/lib/card/library-card-v2/library-card-v2.component.html index e00855edc0c60509cef7c258ae2096b45c15e091..86ae02eb6a1a37ef0fc297f60f3db0c619f69253 100644 --- a/projects/common-consumption/src/lib/card/library-card-v2/library-card-v2.component.html +++ b/projects/common-consumption/src/lib/card/library-card-v2/library-card-v2.component.html @@ -1,7 +1,7 @@ <!-- card component --> <div class="sb--card sb--card--theme2" role="link" tabindex="0" [ngClass]="{'sb--card--recently-viewed': type === LibraryCardTypes.RECENTLY_VIEWED, 'offline': isOffline, 'selected': isSelected}" - (click)="onClick($event)" *ngIf="!isLoading"> + (click)="onClick($event)" (keydown.enter)="onEnterKeyPress($event)" *ngIf="!isLoading"> <svg width="79px" class="sb--card-svg-tail" height="36px" viewBox="0 0 79 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> diff --git a/projects/common-consumption/src/lib/card/library-card-v2/library-card-v2.component.ts b/projects/common-consumption/src/lib/card/library-card-v2/library-card-v2.component.ts index 97d715e263754bf450691801eabf55d00baba45c..92101c9bf307831707b4124861475c287cb30888 100644 --- a/projects/common-consumption/src/lib/card/library-card-v2/library-card-v2.component.ts +++ b/projects/common-consumption/src/lib/card/library-card-v2/library-card-v2.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit, Input, Output, EventEmitter, TemplateRef, AfterViewInit } from '@angular/core'; -import { IContent, LibraryCardTypes, ICardClick } from '../models'; +import { IContent, LibraryCardTypes, ICardClick, IEnterKeyPress } from '../models'; @Component({ @@ -28,6 +28,7 @@ export class LibraryCardV2Component implements OnInit, AfterViewInit { @Output() cardClick: EventEmitter<ICardClick> = new EventEmitter(); @Output() menuClick: EventEmitter<ICardClick> = new EventEmitter(); + @Output() enterKeyPress: EventEmitter<IEnterKeyPress> = new EventEmitter(); get LibraryCardTypes() { return LibraryCardTypes; } @@ -42,6 +43,9 @@ export class LibraryCardV2Component implements OnInit, AfterViewInit { onClick(event: MouseEvent) { this.cardClick.emit({ event: event, data: this.content }); } + onEnterKeyPress(event: KeyboardEvent) { + this.enterKeyPress.emit({ event: event, data: this.content }); + } splitGradeMedium() { if(this.content && this.content.gradeLevel) { this.content.gradeLevel = typeof this.content.gradeLevel === "string"?this.content.gradeLevel.split(","):this.content.gradeLevel; diff --git a/projects/common-consumption/src/lib/card/library-card-v3/library-card-v3.component.html b/projects/common-consumption/src/lib/card/library-card-v3/library-card-v3.component.html index 0bff766790327301aa96e65f2ca5f4950a66d5c3..e5dd69b9f8ab82d201608d8b1caf9d667f33ed86 100644 --- a/projects/common-consumption/src/lib/card/library-card-v3/library-card-v3.component.html +++ b/projects/common-consumption/src/lib/card/library-card-v3/library-card-v3.component.html @@ -1,7 +1,7 @@ <!-- card component --> <div class="sb--card sb--card--theme2" role="link" tabindex="0" [ngClass]="{'sb--card--recently-viewed': type === LibraryCardTypes.RECENTLY_VIEWED, 'offline': isOffline, 'selected': isSelected}" - (click)="onClick($event)" *ngIf="!isLoading"> + (click)="onClick($event)" (keydown.enter)="onEnterKeyPress($event)" *ngIf="!isLoading"> <div class="sb--card__main-area"> <!-- card img --> <div [ngClass]="getClassForImage()"> diff --git a/projects/common-consumption/src/lib/card/library-card-v3/library-card-v3.component.ts b/projects/common-consumption/src/lib/card/library-card-v3/library-card-v3.component.ts index 2580930f16630b9e81ed44a3eac131c693eb1f50..5b4d4a99d87fbc4f0feb79e0d8c45caac3de17fb 100644 --- a/projects/common-consumption/src/lib/card/library-card-v3/library-card-v3.component.ts +++ b/projects/common-consumption/src/lib/card/library-card-v3/library-card-v3.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit, Input, Output, EventEmitter, TemplateRef, AfterViewInit } from '@angular/core'; -import { IContent, LibraryCardTypes, ICardClick } from '../models'; +import { IContent, LibraryCardTypes, ICardClick, IEnterKeyPress } from '../models'; @Component({ @@ -28,6 +28,7 @@ export class LibraryCardV3Component implements OnInit, AfterViewInit { @Output() cardClick: EventEmitter<ICardClick> = new EventEmitter(); @Output() menuClick: EventEmitter<ICardClick> = new EventEmitter(); + @Output() enterKeyPress: EventEmitter<IEnterKeyPress> = new EventEmitter(); get LibraryCardTypes() { return LibraryCardTypes; } frameworkDetailsList = []; @@ -43,6 +44,9 @@ export class LibraryCardV3Component implements OnInit, AfterViewInit { onClick(event: MouseEvent) { this.cardClick.emit({ event: event, data: this.content }); } + onEnterKeyPress(event: KeyboardEvent) { + this.enterKeyPress.emit({ event: event, data: this.content }); + } arrangeFrameworkDetails() { this.frameworkDetailsList = []; diff --git a/projects/common-consumption/src/lib/card/library-card-v4/library-card-v4.component.html b/projects/common-consumption/src/lib/card/library-card-v4/library-card-v4.component.html index 1ac60200fa1dc63c45be5a057d9cd33a7b318d93..98b0ccc17f23b22e5e4d8b3906a57b4c86e000e8 100644 --- a/projects/common-consumption/src/lib/card/library-card-v4/library-card-v4.component.html +++ b/projects/common-consumption/src/lib/card/library-card-v4/library-card-v4.component.html @@ -1,7 +1,7 @@ <!-- card component --> <div class="sb--card sb--card--theme2" tabindex="0" [ngClass]="{'sb--card--recently-viewed': type === LibraryCardTypes.RECENTLY_VIEWED, 'offline': isOffline, 'selected': isSelected}" - (click)="onClick($event)" *ngIf="!isLoading"> + (click)="onClick($event)" (keydown.enter)="onEnterKeyPress($event)" *ngIf="!isLoading"> <div class="sb--card__main-area"> <!-- card img --> <div [ngClass]="getClassForImage()"> diff --git a/projects/common-consumption/src/lib/card/library-card-v4/library-card-v4.component.ts b/projects/common-consumption/src/lib/card/library-card-v4/library-card-v4.component.ts index 191885e9abb7d5d97b6809005d4d00ff595fece9..da271418e3827abc21940deec17e07fcfadf58b2 100644 --- a/projects/common-consumption/src/lib/card/library-card-v4/library-card-v4.component.ts +++ b/projects/common-consumption/src/lib/card/library-card-v4/library-card-v4.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit, Input, Output, EventEmitter, TemplateRef, AfterViewInit } from '@angular/core'; -import { IContent, LibraryCardTypes, ICardClick } from '../models'; +import { IContent, LibraryCardTypes, ICardClick, IEnterKeyPress } from '../models'; @Component({ @@ -27,6 +27,7 @@ export class LibraryCardV4Component implements OnInit, AfterViewInit { @Input() isSelected = false; @Output() cardClick: EventEmitter<ICardClick> = new EventEmitter(); + @Output() enterKeyPress: EventEmitter<IEnterKeyPress> = new EventEmitter(); get LibraryCardTypes() { return LibraryCardTypes; } frameworkDetailsList = []; @@ -53,6 +54,9 @@ export class LibraryCardV4Component implements OnInit, AfterViewInit { onClick(event: MouseEvent) { this.cardClick.emit({ event: event, data: this.content }); } + onEnterKeyPress(event: KeyboardEvent) { + this.enterKeyPress.emit({ event: event, data: this.content }); + } arrangeFrameworkDetails() { this.se_boards = this.getFormatedData(this.content.se_boards); diff --git a/projects/common-consumption/src/lib/card/library-card/library-card.component.html b/projects/common-consumption/src/lib/card/library-card/library-card.component.html index 790031f4cb42a6d7062d03f8d5e7a24c54522790..e171acdd5053254186e727d00b825eafa975b428 100644 --- a/projects/common-consumption/src/lib/card/library-card/library-card.component.html +++ b/projects/common-consumption/src/lib/card/library-card/library-card.component.html @@ -2,7 +2,7 @@ <span *ngIf="!layoutConfig"> <div class="sb--card" [ngClass]="{'sb--card--recently-viewed': type === LibraryCardTypes.RECENTLY_VIEWED, 'offline': isOffline, 'selected': isSelected}" - (click)="onClick($event)" *ngIf="!isLoading" tabindex="0" role="button"> + (click)="onClick($event)" (keydown.enter)="onEnterKeyPress($event)" *ngIf="!isLoading" tabindex="0" role="button"> <div class="sb--card__main-area"> <!-- card img --> <div class="sb--card__img"> @@ -114,7 +114,7 @@ <sb-library-card-v2 [indexToDisplay]="indexToDisplay" [isLoading]="isLoading" [content]="content" [isMobile]="isMobile" [isOffline]="isOffline" [cardImg]="cardImg" [type]="type" [moreInfoLabel]="moreInfoLabel" [isSelected]="isSelected" [section]="section" [btnlabel]="btnlabel" [btnicon]="btnicon" - [layoutConfig]="layoutConfig" [isMenu]="isMenu" (cardClick)="onClick($event)" + [layoutConfig]="layoutConfig" [isMenu]="isMenu" (cardClick)="onClick($event)" (enterKeyPress)="onEnterKeyPress($event)" (menuClick)="onMenuClick($event);$event.stopPropagation()" [hover-template]="gridTemplate" ></sb-library-card-v2> </ng-container> @@ -122,7 +122,7 @@ <sb-library-card-v3 [indexToDisplay]="indexToDisplay" [isLoading]="isLoading" [content]="content" [isMobile]="isMobile" [isOffline]="isOffline" [cardImg]="cardImg" [type]="type" [moreInfoLabel]="moreInfoLabel" [isSelected]="isSelected" [section]="section" [btnlabel]="btnlabel" [btnicon]="btnicon" - [layoutConfig]="layoutConfig" [isMenu]="isMenu" (cardClick)="onClick($event)" + [layoutConfig]="layoutConfig" [isMenu]="isMenu" (cardClick)="onClick($event)" (enterKeyPress)="onEnterKeyPress($event)" (menuClick)="onMenuClick($event);$event.stopPropagation()" [hover-template]="gridTemplate" ></sb-library-card-v3> </ng-container> @@ -130,7 +130,7 @@ <sb-library-card-v4 [indexToDisplay]="indexToDisplay" [isLoading]="isLoading" [content]="content" [isMobile]="isMobile" [isOffline]="isOffline" [cardImg]="cardImg" [type]="type" [moreInfoLabel]="moreInfoLabel" [isSelected]="isSelected" [section]="section" [btnlabel]="btnlabel" [btnicon]="btnicon" - [layoutConfig]="layoutConfig" [isMenu]="isMenu" (cardClick)="onClick($event)" + [layoutConfig]="layoutConfig" [isMenu]="isMenu" (cardClick)="onClick($event)" (enterKeyPress)="onEnterKeyPress($event)" (menuClick)="onMenuClick($event);$event.stopPropagation()" [hover-template]="gridTemplate" ></sb-library-card-v4> </ng-container> diff --git a/projects/common-consumption/src/lib/card/library-card/library-card.component.ts b/projects/common-consumption/src/lib/card/library-card/library-card.component.ts index 01c0c3fa8855ece542c9655042faedd42e85f638..5e996347dc2921a9a9f0ae5f0a4de39668a63956 100644 --- a/projects/common-consumption/src/lib/card/library-card/library-card.component.ts +++ b/projects/common-consumption/src/lib/card/library-card/library-card.component.ts @@ -1,4 +1,4 @@ -import { IContent, LibraryCardTypes, ICardClick } from './../models'; +import { IContent, LibraryCardTypes, ICardClick, IEnterKeyPress } from './../models'; import { Component, Input, OnInit, EventEmitter, Output, TemplateRef, AfterViewInit } from '@angular/core'; import { staticContent } from '../library-card/library-card.data'; @Component({ @@ -26,6 +26,7 @@ export class LibraryCardComponent implements OnInit, AfterViewInit { @Output() cardClick: EventEmitter<ICardClick> = new EventEmitter(); @Output() menuClick: EventEmitter<ICardClick> = new EventEmitter(); + @Output() enterKey: EventEmitter<IEnterKeyPress> = new EventEmitter(); get LibraryCardTypes() { return LibraryCardTypes; } @@ -41,6 +42,9 @@ export class LibraryCardComponent implements OnInit, AfterViewInit { onMenuClick(event: MouseEvent) { this.menuClick.emit({ event: event, data: this.content }); } + onEnterKeyPress(event: KeyboardEvent) { + this.enterKey.emit({ event, data: this.content }); + } test() { diff --git a/projects/common-consumption/src/lib/card/models.ts b/projects/common-consumption/src/lib/card/models.ts index 994a0e6e3fc365b7a40fe54816015bad655ed58d..4de4a0f3d9fa7f35acce5348f8ea6eb573a24e7a 100644 --- a/projects/common-consumption/src/lib/card/models.ts +++ b/projects/common-consumption/src/lib/card/models.ts @@ -2,6 +2,10 @@ export interface ICardClick { event: MouseEvent; data: any; } +export interface IEnterKeyPress { + event: KeyboardEvent; + data: any; +} export interface IClick { event: MouseEvent; diff --git a/projects/common-consumption/src/lib/layout/library-cards-grid/library-cards-grid.component.html b/projects/common-consumption/src/lib/layout/library-cards-grid/library-cards-grid.component.html index 1f1a1fa4bb90092bd330b5409f4935be341507a6..17fb0ab59d59ddda4f13844daf0b629926793a6a 100644 --- a/projects/common-consumption/src/lib/layout/library-cards-grid/library-cards-grid.component.html +++ b/projects/common-consumption/src/lib/layout/library-cards-grid/library-cards-grid.component.html @@ -22,7 +22,7 @@ <div class="item" [ngClass]="maxCardCount ? 'show-' + maxCardCount: ''" *ngFor="let content of contentList | slice:0:(maxCardCount ? maxCardCount : contentList?.length)let i=index"> <sb-library-card [indexToDisplay]="i" [layoutConfig]="layoutConfig" [content]="content" [type]="LibraryCardTypes.DESKTOP_TEXTBOOK" - (click)="onCardClick($event, content)" tabindex="0" [cardImg]="content?.cardImg"> + (click)="onCardClick($event, content)" (keydown.enter)="onEnterKeyPress($event, content)" tabindex="0" [cardImg]="content?.cardImg"> </sb-library-card> </div> </div> @@ -32,7 +32,7 @@ (click)="onViewMoreClick($event)" tabindex="0">{{viewMoreButtonText}}</button> <div class="item" [ngClass]="maxCardCount ? 'show-' + maxCardCount: ''" *ngFor="let content of contentList;let i=index"> <sb-library-card [indexToDisplay]="i" [layoutConfig]="layoutConfig" [content]="content" [type]="LibraryCardTypes.DESKTOP_TEXTBOOK" - [isMenu]="isMenu" (click)="onCardClick($event, content)" tabindex="0" [cardImg]="content?.cardImg" (menuClick)="onCardMenuClick($event)"> + [isMenu]="isMenu" (click)="onCardClick($event, content)" (keydown.enter)="onEnterKeyPress($event, content)" tabindex="0" [cardImg]="content?.cardImg" (menuClick)="onCardMenuClick($event)"> </sb-library-card> </div> </div> diff --git a/projects/common-consumption/src/lib/layout/library-cards-grid/library-cards-grid.component.ts b/projects/common-consumption/src/lib/layout/library-cards-grid/library-cards-grid.component.ts index 1e5a795b113afaaf8f12ef2019476ae6288d0d02..2985ab3cddf52041ae3c2266193ada6565d06b18 100644 --- a/projects/common-consumption/src/lib/layout/library-cards-grid/library-cards-grid.component.ts +++ b/projects/common-consumption/src/lib/layout/library-cards-grid/library-cards-grid.component.ts @@ -1,6 +1,6 @@ import { Component, Input, Output, EventEmitter, TemplateRef } from '@angular/core'; import { defaultLibraryCardsGrid } from '../library-cards.data'; -import { IContent, LibraryCardTypes, LibraryCardGridTypes } from '../../card/models'; +import { IContent, LibraryCardTypes, LibraryCardGridTypes, IEnterKeyPress } from '../../card/models'; import { IViewMoreClick, ICardClick } from '../models'; @Component({ @@ -34,6 +34,7 @@ export class LibraryCardsGridComponent { @Output() cardClick: EventEmitter<ICardClick> = new EventEmitter<ICardClick>(); @Output() hoverActionClick: EventEmitter<any> = new EventEmitter<any>(); @Output() menuClick: EventEmitter<ICardClick> = new EventEmitter(); + @Output() enterKey: EventEmitter<IEnterKeyPress> = new EventEmitter(); get LibraryCardTypes() { return LibraryCardTypes; } @@ -56,6 +57,10 @@ export class LibraryCardsGridComponent { this.cardClick.emit({ event, data }); } + onEnterKeyPress(event: KeyboardEvent, data: IContent) { + this.enterKey.emit({ event, data }); + } + hoverActionClicked(event) { this.hoverActionClick.emit(event); }