diff --git a/projects/common-consumption/src/lib/card/card.module.ts b/projects/common-consumption/src/lib/card/card.module.ts
index 89844655ac154f6df3553f7318b584ec89ecfe82..7295f9cdcb225419be946e356398815f989e5a06 100644
--- a/projects/common-consumption/src/lib/card/card.module.ts
+++ b/projects/common-consumption/src/lib/card/card.module.ts
@@ -15,6 +15,7 @@ import { NotificationCardComponent } from './notification-card/notification-card
import {BannerCardComponent} from './banner-card/banner-card.component';
import { TruncatedEllipsisComponent } from './truncated-ellipsis/truncated-ellipsis.component';
import { CqubeCardComponent } from './cqube-card/cqube-card.component';
+import { LibraryCardV5Component } from './library-card-v5/library-card-v5.component';
@NgModule({
declarations: [
@@ -32,7 +33,8 @@ import { CqubeCardComponent } from './cqube-card/cqube-card.component';
NotificationCardComponent,
BannerCardComponent,
TruncatedEllipsisComponent,
- CqubeCardComponent
+ CqubeCardComponent,
+ LibraryCardV5Component
],
imports: [
CommonModule
diff --git a/projects/common-consumption/src/lib/card/library-card-v5/library-card-v5.component.html b/projects/common-consumption/src/lib/card/library-card-v5/library-card-v5.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..7e47077e00f042827edf5fdf3ab2c7877eab3695
--- /dev/null
+++ b/projects/common-consumption/src/lib/card/library-card-v5/library-card-v5.component.html
@@ -0,0 +1,112 @@
+<div class="sb--card"
+ [ngClass]="{'sb--card--recently-viewed': type === LibraryCardTypes.RECENTLY_VIEWED, 'offline': isOffline, 'selected': isSelected}"
+ (click)="onClick($event)" (keydown.enter)="onEnterKeyPress($event)" *ngIf="!isLoading" tabindex="0" role="button">
+ <div class="sb-card-label">{{content?.primaryCategory}}</div>
+ <div class="sb--card__main-area mt-16">
+ <!-- card img -->
+ <!-- <div class="sb--card__img">
+ <div class="img-container">
+ <img [src]="cardImg" alt="">
+ </div>
+ </div> -->
+
+ <!-- card mobile view details -->
+ <div class="sb--card__info">
+ <div class="sb--card__meta1">
+ <h4 class="sb--card__title sb__ellipsis sb__ellipsis--two text-left flex-basis-1" title="{{content?.name}}"><bdi>{{content?.name}}</bdi></h4>
+ <a *ngIf="isMenu" role="button" aria-label="View more actions menu" class="menu" (click)="onMenuClick($event);$event.stopPropagation()" tabindex="0"></a>
+ </div>
+
+ <div class="sb--card__meta1 text-left mb-4" *ngIf="content?.se_mediums?.length">
+ <span class="data_2 ellipsis" title="{{content?.se_mediums}}">Role: {{content?.se_mediums}}</span>
+ </div>
+ <div class="sb--card__meta1 text-left" *ngIf="content?.subject?.length">
+ <span class="data_1 ellipsis" title="{{content?.subject}}">Competency: {{content?.subject}}</span>
+ </div>
+
+ </div>
+ </div>
+
+ <!-- content for only desktop -->
+ <!-- <div *ngIf="type === LibraryCardTypes.DESKTOP_TEXTBOOK || type === LibraryCardTypes.PORTAL_QRCODE_FLATRESULT">
+ <div class="sb--card__moreinfo"> -->
+ <!-- other meta info Medium, Organization etc -->
+ <!-- <div class="sb--card__meta2 text-left">
+ <div class="sb--card__meta2_data" *ngIf="content?.medium"><span class="">{{moreInfoLabel}}:
+ {{content?.medium}}</span></div>
+ <div class="sb--card__org sb__ellipsis" *ngIf="content?.organisation"><bdi>{{content?.organisation}}</bdi></div>
+ </div> -->
+ <!-- other meta info Badge and card category Book, learn, practice -->
+ <!-- <div class="sb--card__tags">
+ <span class="sb--card__badge" *ngIf="content?.badgeAssertions"><img
+ [src]="content?.badgeAssertions[0]?.badgeClassImage" alt="" title="" /></span>
+ <span class="sb--card__type" *ngIf="content?.resourceType">{{content?.resourceType}}</span>
+ </div>
+ </div>
+ <div *ngIf="type === LibraryCardTypes.PORTAL_QRCODE_FLATRESULT">
+ <div>
+ <button class="sb-btn sb-btn-primary sb-btn-normal w-100 border-top-r-left-right">
+ <i class="icon-svg icon-svg--xxs icon-videos mr-4">
+ <svg class="icon icon-svg--white">
+ <use xlink:href="assets/common-consumption/images/sprite.svg#play"></use>
+ </svg>
+ </i> {{btnlabel}} </button>
+ </div>
+ </div>
+ </div> -->
+
+ <!-- Qr code card -->
+ <div *ngIf="type === LibraryCardTypes.QRCODE_RESULT">
+ <!-- Section area if not available it will be hidden -->
+ <div class="sb--card__moreinfo" *ngIf="section !== null">
+ <div class="sb--card__meta2 text-left">
+ <div class="sb--card__meta2_data sb__ellipsis sb__ellipsis--two" *ngIf="section">
+ <span class="label">{{moreInfoLabel}}: </span>
+ <span class="value">{{section}}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- <ng-content select=".card-hover">
+
+ </ng-content> -->
+ <ng-container
+ *ngTemplateOutlet="gridTemplate; context: {$implicit: content?.hoverData, hoverData: content?.hoverData, content:content}"
+ class="card-hover">
+
+ </ng-container>
+</div>
+
+ <div class="sb--card" *ngIf="isLoading" tabindex="0" role="button">
+ <div class="sb--card__main-area">
+ <!-- card img -->
+ <div class="sb--card__img">
+ <div class="img-container loading-animation">
+
+ </div>
+ </div>
+ <!-- card mobile view details -->
+ <div class="sb--card__info">
+ <h4 class="sb--card__title loading-animation sb--card--highlighter"></h4>
+ <div class="sb--card__meta1 text-left">
+ <span class="data_1 ellipsis loading-animation sb--card--highlighter"></span>
+ </div>
+ </div>
+ </div>
+ <div class="sb--card__moreinfo" style="display:block;" *ngIf="type === LibraryCardTypes.DESKTOP_TEXTBOOK || type === LibraryCardTypes.QRCODE_RESULT || type === LibraryCardTypes.PORTAL_QRCODE_FLATRESULT">
+ <div class="sb--card__meta2 text-left" style="float:left;width:60%">
+ <div class="label loading-animation sb--card--highlighter" style="width:80%;"></div>
+ <div class="value loading-animation sb--card--highlighter" style="width:60%;"></div>
+ </div>
+ <div class="sb--card__tags" style="float:right;width:30%;margin-top: 15px;">
+ <div class="label loading-animation sb--card--highlighter" style="width:80%;"></div>
+ </div>
+ <div style="clear:both;"></div>
+ </div>
+ <div *ngIf="type === LibraryCardTypes.PORTAL_QRCODE_FLATRESULT">
+ <div>
+ <div class="label loading-animation sb--card--highlighter" style="width:100%;"></div>
+ </div>
+ </div>
+
+ </div>
\ No newline at end of file
diff --git a/projects/common-consumption/src/lib/card/library-card-v5/library-card-v5.component.scss b/projects/common-consumption/src/lib/card/library-card-v5/library-card-v5.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..72a1ab0f901bed3f0836211f79dc9ad427c8b0ec
--- /dev/null
+++ b/projects/common-consumption/src/lib/card/library-card-v5/library-card-v5.component.scss
@@ -0,0 +1,478 @@
+@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
+@use "~@project-sunbird/sb-styles/assets/loadingshadows" as *;
+
+::ng-deep :root {
+ --cc-sbcard-bg: var(--white);
+ --cc-sbcard-img-container-bg: var(--gray-100);
+ --cc-sbcard-title: var(--primary-color);
+ --cc-sbcard-meta-text: var(--gray-800);
+ --cc-sbcard-dot-divider: var(--gray-200);
+ --cc-sbcard-moreinfo-bg: none; //var(--rc-FAFAFA);
+ --cc-sbcard-moreinfo-bordertop: #cacbce;
+ --cc-sbcard-meta2-text: var(--gray-800);
+ --cc-sbcard-org-text: var(--gray-200);
+ --cc-sbcard-type-bg: var(--gray-200);
+ --cc-sbcard-type-text: var(--white);
+ --cc-sbcard-rv-img-container-bg: var(--gray-100);
+ --cc-sbcard-selected-border: var(--primary-color);
+ --cc-sbcard-selected-bg:rgba(2, 79, 157, 0.2);
+ --cc-sbcard-offline-bg: var(--tertiary-color);
+ --cc-sbcard-offline-img-text: var(--white);
+ --cc-sbcard-card__progressbar-bg: var(--gray-100);
+ --cc-sbcard-card__progressbar-span-bg: var(--secondary-200);
+ --cc-sbcard-type-br:var(--gray-200);
+}
+
+/* sb card component css */
+:host {
+ .sb--card {
+ width: 100%;
+ background-color: var(--cc-sbcard-bg);
+ display: flex;
+ flex-direction: column;
+ cursor: pointer;
+ position: relative;
+ margin-top: 0px;
+ border: 0px;
+ contain: content;
+ border-radius: calculateRem(2px) !important;
+ padding: 24px 16px;
+ border: 1px solid rgba(0,0,0, 0.1) !important;
+ box-shadow: 0px 2px 4px rgba(0,0,0, 0.08);
+ opacity: 1;
+ background-color: rgba(255,255,255, 1) !important;
+ height: 162px;
+ &:hover {
+ transform: translate(0, 0px);
+ box-shadow: 0 calculateRem(2px) calculateRem(7px) 0 rgba(var(--rc-rgba-black), 0.16);
+ }
+
+ @include respond-below(sm) {
+ box-shadow: 0 calculateRem(2px) calculateRem(7px) rgba(var(--rc-rgba-black), 0.16);
+ }
+
+ &__main-area {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ height: unset !important;
+ }
+
+ &__img {
+ height: calculateRem(72px);
+ width: calculateRem(72px);
+ overflow: hidden;
+ flex: 0 0 calculateRem(72px);
+ margin: calculateRem(8px);
+
+ .img-container {
+
+ display: flex;
+ align-items: center;
+ background-color: var(--cc-sbcard-img-container-bg);
+ height: calculateRem(72px);
+ width: calculateRem(72px);
+ justify-content: center;
+
+ img {
+ max-width: 100%;
+ // backdrop-filter: brightness(93%) opacity(85%) blur(3px) contrast(110%);
+ }
+ }
+ }
+
+ &__info {
+ @include padding(null, calculateRem(8px), null, null);
+ flex: 1;
+ overflow: hidden;
+ }
+
+ &__title {
+ opacity: 1;
+ font-weight: 700;
+ font-style: normal;
+ letter-spacing: 0px;
+ text-align: left;
+ color: rgba(0,0,0,0.8);
+ font-size: calculateRem(16px);
+ margin: 0px;
+ line-height: normal;
+ line-height: calculateRem(20px);
+ padding-bottom: calculateRem(12px);
+ }
+
+ &__meta1 {
+ color: rgba(0, 0, 0, 0.6);
+ background: white !important;
+ font-size: calculateRem(12px);
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ flex: 1;
+ line-height: calculateRem(20px);
+ }
+
+ .data_1 {
+ max-width: 100%;
+ }
+
+ .data_2 {
+ flex: 1;
+ }
+
+ .dot-divider {
+
+ width: calculateRem(4px);
+ height: calculateRem(4px);
+ min-width: calculateRem(4px);
+ max-width: calculateRem(4px);
+ min-height: calculateRem(4px);
+ max-height: calculateRem(4px);
+ border-radius: 100%;
+ background-color: var(--cc-sbcard-dot-divider);
+ display: inline-block;
+ margin: 0px calculateRem(8px);
+ }
+
+ &__moreinfo {
+
+ border-radius: 0 0 calculateRem(2px) calculateRem(2px);
+ background-color: var(--cc-sbcard-moreinfo-bg);
+ display: flex;
+ flex-direction: row;
+ align-items: stretch;
+ justify-content: space-between;
+ min-height: calculateRem(56px);
+ border-top: 0px solid var(--cc-sbcard-moreinfo-bordertop);
+ }
+
+ &__meta2 {
+
+ color: var(--cc-sbcard-meta2-text);
+ font-size: calculateRem(12px);
+ line-height: calculateRem(14px);
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ justify-content: space-around;
+ padding: calculateRem(8px);
+ }
+
+ &__meta2_data {
+ .label {
+ font-weight: normal;
+ }
+
+ .value {
+ font-weight: bold;
+ }
+ }
+
+ &__org {
+
+ color: var(--cc-sbcard-org-text);
+ }
+
+ &__tags {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: flex-end;
+ flex: 1;
+ }
+
+ &__badge {
+ display: flex;
+
+ img {
+ width: calculateRem(20px);
+ height: calculateRem(20px);
+ }
+ }
+
+ &__type {
+
+ background: var(--cc-sbcard-type-bg);
+ position: relative;
+ height: calculateRem(20px);
+ @include padding(null, calculateRem(8px), null, calculateRem(4px));
+ @include margin(null, null, null, calculateRem(16px));
+ color: var(--cc-sbcard-type-text);
+ font-size: calculateRem(11px);
+ display: flex;
+ align-items: center;
+
+ &:before {
+ content: "";
+ width: 0;
+ height: 0;
+ border-width: calculateRem(10px) calculateRem(5px);
+ border-style: solid;
+ border-color: var(--cc-sbcard-type-br) var(--cc-sbcard-type-br) var(--cc-sbcard-type-br) transparent;
+ position: absolute;
+ left: -10px;
+
+ html[dir="rtl"] & {
+ right: calculateRem(-10px);
+ left: inherit;
+ border-color: var(--cc-sbcard-type-br) transparent var(--cc-sbcard-type-br) var(--cc-sbcard-type-br);
+ }
+ }
+ }
+
+ /* recently viewed card css */
+ &--recently-viewed {
+ .sb--card__img {
+ height: calculateRem(88px);
+ width: calculateRem(88px);
+ flex: 0 0 calculateRem(88px);
+ margin: 0;
+
+ .img-container {
+
+ display: flex;
+ align-items: center;
+ background-color: var(--cc-sbcard-rv-img-container-bg);
+ height: calculateRem(88px);
+ width: calculateRem(88px);
+ }
+ }
+
+ .sb--card__info {
+ padding: calculateRem(8px);
+ flex: 1;
+ }
+ }
+
+ &.selected {
+ border: 1px solid var(--cc-sbcard-selected-border);
+ border-radius: 4px;
+ background-color:var(--cc-sbcard-selected-bg);
+ }
+
+ /* offline card css */
+ &.offline {
+ .sb--card__img {
+ .img-container {
+
+ display: flex;
+ align-items: center;
+ background-color: var(--cc-sbcard-offline-bg);
+ opacity: 0.5;
+
+ img {
+
+ margin: auto;
+ font-size: calculateRem(24px);
+ color: var(--cc-sbcard-offline-img-text);
+ }
+ }
+ }
+
+ .sb--card__info,
+ .sb--card__moreinfo {
+ opacity: 0.5;
+ }
+ }
+ }
+
+ .sb--card__progressbar {
+
+ height: calculateRem(4px);
+ margin: 0px 0 0px;
+ border-radius: 0px;
+ box-shadow: inset 0 calculateRem(-1px) calculateRem(1px) rgba(var(--rc-rgba-white), 0.3);
+ width: 100%;
+ background: var(--cc-sbcard-card__progressbar-bg);
+
+ &>span {
+
+ display: block;
+ height: 100%;
+ background-color: var(--cc-sbcard-card__progressbar-span-bg);
+ background-image: -webkit-gradient(center bottom, var(--secondary-400), var(--secondary-200));
+ box-shadow: inset 0 calculateRem(2px) calculateRem(9px) var(--gray-100),
+ inset 0 calculateRem(-2px) calculateRem(6px) rgba(var(--rc-rgba-black), 0.4);
+ position: relative;
+ overflow: hidden;
+ }
+ }
+
+ .animate>span:after {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background-image: -webkit-gradient(linear,
+ 0 0, 100% 100%, color-stop(0.25, rgba(var(--rc-rgba-white), 0.2)), color-stop(0.25, transparent),
+ color-stop(0.5, transparent),
+ color-stop(0.5, rgba(var(--rc-rgba-white), 0.2)), color-stop(0.75, rgba(var(--rc-rgba-white), 0.2)), color-stop(0.75, transparent), to(transparent));
+ z-index: 1;
+ background-size: calculateRem(50px) calculateRem(50px);
+ border-top-right-radius: calculateRem(8px);
+ border-bottom-right-radius: calculateRem(8px);
+ border-top-left-radius: calculateRem(20px);
+ border-bottom-left-radius: calculateRem(20px);
+ overflow: hidden;
+ -webkit-animation: move 2s linear infinite;
+ }
+
+ @-webkit-keyframes move {
+ 0% {
+ background-position: 0 0;
+ }
+
+ 100% {
+ background-position: calculateRem(50px) calculateRem(50px);
+ }
+ }
+
+ .completed>span {
+ background-color: var(--secondary-color);
+ background-image: -webkit-gradient(linear,
+ left top,
+ left bottom,
+ color-stop(0, var(--secondary-100)),
+ color-stop(1, var(--secondary-400)));
+ background-image: -webkit-linear-gradient(var(--secondary-100), var(--secondary-400));
+ }
+
+ .inprogress>span {
+ background-color: var(--tertiary-color);
+ background-image: -webkit-gradient(linear,
+ left top,
+ left bottom,
+ color-stop(0, var(--tertiary-100)),
+ color-stop(1, var(--tertiary-400)));
+ background-image: -webkit-linear-gradient(var(--tertiary-100), var(--tertiary-400));
+ }
+
+ .notcompleted>span {
+ background-color: var(--red-100);
+ background-image: -webkit-gradient(linear,
+ left top,
+ left bottom,
+ color-stop(0, var(--red-100)),
+ color-stop(1, var(--red-400)));
+ background-image: -webkit-linear-gradient(var(--red-100), var(--red-400));
+ }
+
+ .nostripes>span,
+ .nostripes>span:after {
+ -webkit-animation: none;
+ -moz-animation: none;
+ background-image: none;
+ }
+
+
+
+ .border-top-r-left-right {
+ border-top-left-radius: 0px;
+ border-top-right-radius: 0px;
+ }
+}
+
+::ng-deep {
+
+ .card-hover {
+ opacity: 0;
+ transition: all 0.2s ease-in;
+ display: none;
+ }
+
+ .sb--card:hover, .sb--card:focus-within {
+ .card-hover {
+ opacity: 1;
+ z-index: 1001;
+ display: block;
+
+ .child-content {
+ --cc-sbcard-hover-text: var(--white);
+ --cc-sbcard-hover-bg: var(--primary-color);
+ color: var(--cc-sbcard-hover-text);
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ opacity: 0.95;
+ border-radius: calculateRem(2px);
+ background-color: var(--cc-sbcard-hover-bg);
+ z-index: 1;
+ display: flex;
+ align-items: center;
+ transition: 0.2s ease-in;
+ flex-direction: column;
+ justify-content: space-evenly;
+ }
+
+ .action-container {
+ display: flex;
+ width: 100%;
+ justify-content: center;
+ align-self: center;
+ justify-self: center;
+ flex: 1;
+ align-items: center;
+ }
+
+ .action-item {
+ padding: 0 calculateRem(16px);
+ flex: 1;
+ text-align: center;
+
+ .sb-btn.sb-btn-primary[disabled] {
+ background-color: transparent;
+ opacity: 0.5;
+ border: 0;
+ color: var(--white);
+ }
+ }
+
+ .action-item:not(:last-child) {
+ border-right: calculateRem(1px) solid rgba(var(--rc-rgba-white), 0.5);
+ }
+
+ .hover-meta-info {
+ font-size: calculateRem(10px);
+ opacity: 0.8;
+ color: var(--white);
+ line-height: calculateRem(12px);
+ flex: 0 0 25%;
+ }
+ }
+ }
+
+}
+
+
+.menu::after {
+ content: '\2807';
+ font-size: calculateRem(24px);
+ color: var(--gray-200);
+ text-align: center;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ border-radius: 50%;
+ padding-left: calculateRem(6px);
+ cursor: pointer;
+ width: calculateRem(32px);
+ height: calculateRem(32px);
+}
+
+.menu:hover::after {
+ background: var(--gray-0);
+}
+.sb-card-label{
+ color: var(--primary-theme);
+ font-size: 0.6875rem;
+ border: 0.0625rem solid var(--primary-theme);
+ border-radius: 0.125rem;
+ padding: 0.25rem 0.5rem;
+ height: 1.5rem;
+ text-transform: uppercase;
+ width: fit-content;
+}
\ No newline at end of file
diff --git a/projects/common-consumption/src/lib/card/library-card-v5/library-card-v5.component.spec.ts b/projects/common-consumption/src/lib/card/library-card-v5/library-card-v5.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..35a734a512893e1131528d4339073c5d96169a35
--- /dev/null
+++ b/projects/common-consumption/src/lib/card/library-card-v5/library-card-v5.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LibraryCardV5Component } from './library-card-v5.component';
+
+describe('LibraryCardV5Component', () => {
+ let component: LibraryCardV5Component;
+ let fixture: ComponentFixture<LibraryCardV5Component>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ LibraryCardV5Component ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(LibraryCardV5Component);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/projects/common-consumption/src/lib/card/library-card-v5/library-card-v5.component.ts b/projects/common-consumption/src/lib/card/library-card-v5/library-card-v5.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..16d3f4a22d0bb7c384502682d7f8aac8bdfdd0d6
--- /dev/null
+++ b/projects/common-consumption/src/lib/card/library-card-v5/library-card-v5.component.ts
@@ -0,0 +1,54 @@
+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({
+ selector: 'sb-library-card-v5',
+ templateUrl: './library-card-v5.component.html',
+ styleUrls: ['./library-card-v5.component.scss']
+})
+export class LibraryCardV5Component implements OnInit {
+
+ @Input() content: IContent|any = staticContent;
+ @Input() isMobile = false;
+ @Input() isOffline = false;
+ @Input() cardImg = '';
+ @Input() type: LibraryCardTypes = LibraryCardTypes.DESKTOP_TEXTBOOK;
+ @Input() moreInfoLabel = 'Medium';
+ @Input() section = '';
+ @Input() isLoading:boolean;
+ @Input('hover-template') gridTemplate: TemplateRef<any>;
+ @Input() btnlabel = '';
+ @Input() btnicon = '';
+ @Input() isMenu: boolean = false;
+ @Input() layoutConfig:any;
+ @Input() indexToDisplay:number;
+ @Input() isSelected = false;
+
+ @Output() cardClick: EventEmitter<ICardClick> = new EventEmitter();
+ @Output() menuClick: EventEmitter<ICardClick> = new EventEmitter();
+ @Output() enterKey: EventEmitter<IEnterKeyPress> = new EventEmitter();
+
+ get LibraryCardTypes() { return LibraryCardTypes; }
+
+ ngOnInit() {
+ }
+
+ ngAfterViewInit(): void {
+ }
+
+ onClick(event: MouseEvent) {
+ this.cardClick.emit({ event: event, data: this.content });
+ }
+ 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/library-card/library-card.component.html b/projects/common-consumption/src/lib/card/library-card/library-card.component.html
index e171acdd5053254186e727d00b825eafa975b428..f615bc10912c7d19e8d123e43fdc9f415595abd7 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
@@ -3,13 +3,15 @@
<div class="sb--card"
[ngClass]="{'sb--card--recently-viewed': type === LibraryCardTypes.RECENTLY_VIEWED, 'offline': isOffline, 'selected': isSelected}"
(click)="onClick($event)" (keydown.enter)="onEnterKeyPress($event)" *ngIf="!isLoading" tabindex="0" role="button">
+ <!-- <div class="sb-card-label">{{content?.resourceType}}</div> -->
<div class="sb--card__main-area">
<!-- card img -->
- <div class="sb--card__img">
+ <!-- <div class="sb--card__img">
<div class="img-container">
<img [src]="cardImg" alt="">
</div>
- </div>
+ </div> -->
+
<!-- card mobile view details -->
<div class="sb--card__info">
<div class="sb--card__meta1">
@@ -17,28 +19,30 @@
<a *ngIf="isMenu" role="button" aria-label="View more actions menu" class="menu" (click)="onMenuClick($event);$event.stopPropagation()" tabindex="0"></a>
</div>
- <div class="sb--card__meta1 text-left" *ngIf="content?.subject?.length || content?.gradeLevel?.length">
- <span class="data_1 ellipsis" title="{{content?.subject}}">{{content?.subject}}</span>
- <span *ngIf="content?.subject?.length && content?.gradeLevel?.length" class="dot-divider"></span>
- <span class="data_2 ellipsis" title="{{content?.gradeLevel}}">{{content?.gradeLevel}}</span>
+ <div class="sb--card__meta1 text-left mb-4" *ngIf="content?.se_mediums?.length">
+ <span class="data_2 ellipsis" title="{{content?.se_mediums}}">Role: {{content?.se_mediums}}</span>
+ </div>
+ <div class="sb--card__meta1 text-left" *ngIf="content?.subject?.length">
+ <span class="data_1 ellipsis" title="{{content?.subject}}">Competency: {{content?.subject}}</span>
</div>
+
</div>
</div>
<!-- content for only desktop -->
- <div *ngIf="type === LibraryCardTypes.DESKTOP_TEXTBOOK || type === LibraryCardTypes.PORTAL_QRCODE_FLATRESULT">
- <div class="sb--card__moreinfo">
+ <!-- <div *ngIf="type === LibraryCardTypes.DESKTOP_TEXTBOOK || type === LibraryCardTypes.PORTAL_QRCODE_FLATRESULT">
+ <div class="sb--card__moreinfo"> -->
<!-- other meta info Medium, Organization etc -->
- <div class="sb--card__meta2 text-left">
+ <!-- <div class="sb--card__meta2 text-left">
<div class="sb--card__meta2_data" *ngIf="content?.medium"><span class="">{{moreInfoLabel}}:
{{content?.medium}}</span></div>
<div class="sb--card__org sb__ellipsis" *ngIf="content?.organisation"><bdi>{{content?.organisation}}</bdi></div>
- </div>
+ </div> -->
<!-- other meta info Badge and card category Book, learn, practice -->
- <div class="sb--card__tags">
- <span class="sb--card__badge" *ngIf="content?.badgeAssertions"><img
- [src]="content?.badgeAssertions[0]?.badgeClassImage" alt="" title="" /></span>
- <span class="sb--card__type" *ngIf="content?.resourceType">{{content?.resourceType}}</span>
+ <!-- <div class="sb--card__tags">
+ <span class="sb--card__badge" *ngIf="content?.badgeAssertions"><img
+ [src]="content?.badgeAssertions[0]?.badgeClassImage" alt="" title="" /></span>
+ <span class="sb--card__type" *ngIf="content?.resourceType">{{content?.resourceType}}</span>
</div>
</div>
<div *ngIf="type === LibraryCardTypes.PORTAL_QRCODE_FLATRESULT">
@@ -51,7 +55,7 @@
</i> {{btnlabel}} </button>
</div>
</div>
- </div>
+ </div> -->
<!-- Qr code card -->
<div *ngIf="type === LibraryCardTypes.QRCODE_RESULT">
@@ -134,4 +138,12 @@
(menuClick)="onMenuClick($event);$event.stopPropagation()" [hover-template]="gridTemplate"
></sb-library-card-v4>
</ng-container>
+ <ng-container *ngIf="layoutConfig.layout === 'v5'">
+ <sb-library-card-v5 [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)" (enterKeyPress)="onEnterKeyPress($event)"
+ (menuClick)="onMenuClick($event);$event.stopPropagation()" [hover-template]="gridTemplate"
+ ></sb-library-card-v5>
+ </ng-container>
</span>
\ No newline at end of file
diff --git a/projects/common-consumption/src/lib/card/library-card/library-card.component.scss b/projects/common-consumption/src/lib/card/library-card/library-card.component.scss
index 20c6fbfbb9089b7cf07b0b02818e70a590803da7..95b908e7da7db959dcc8b34dc5b481ce0ea42679 100644
--- a/projects/common-consumption/src/lib/card/library-card/library-card.component.scss
+++ b/projects/common-consumption/src/lib/card/library-card/library-card.component.scss
@@ -35,8 +35,13 @@
margin-top: 0px;
border: 0px;
contain: content;
- border-radius: calculateRem(2px);
-
+ border-radius: calculateRem(2px) !important;
+ padding: 24px 16px;
+ border: 1px solid rgba(0,0,0, 0.1) !important;
+ box-shadow: 0px 2px 4px rgba(0,0,0, 0.08);
+ opacity: 1;
+ background-color: rgba(255,255,255, 1) !important;
+ height: 126px;
&:hover {
transform: translate(0, 0px);
box-shadow: 0 calculateRem(2px) calculateRem(7px) 0 rgba(var(--rc-rgba-black), 0.16);
@@ -50,7 +55,7 @@
display: flex;
flex-direction: row;
align-items: center;
- height: calculateRem(88px);
+ height: unset !important;
}
&__img {
@@ -83,24 +88,28 @@
}
&__title {
-
- color: var(--cc-sbcard-title);
- font-size: calculateRem(14px);
+ opacity: 1;
+ font-weight: 700;
+ font-style: normal;
+ letter-spacing: 0px;
+ text-align: left;
+ color: rgba(0,0,0,0.8);
+ font-size: calculateRem(16px);
margin: 0px;
line-height: normal;
line-height: calculateRem(20px);
+ padding-bottom: calculateRem(12px);
}
&__meta1 {
-
- color: var(--cc-sbcard-meta-text);
+ color: rgba(0, 0, 0, 0.6);
+ background: white !important;
font-size: calculateRem(12px);
display: flex;
flex-direction: row;
align-items: center;
flex: 1;
line-height: calculateRem(20px);
- margin-top: calculateRem(4px);
}
.data_1 {
@@ -457,3 +466,13 @@
.menu:hover::after {
background: var(--gray-0);
}
+.sb-card-label{
+ color: var(--primary-theme);
+ font-size: 0.6875rem;
+ border: 0.0625rem solid var(--primary-theme);
+ border-radius: 0.125rem;
+ padding: 0.25rem 0.5rem;
+ height: 1.5rem;
+ text-transform: uppercase;
+ width: fit-content;
+}
\ No newline at end of file
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 c9737b44b90897b4db38c948dd342c3f06e36d01..6177607a4290031930bb5ea9ab8a1716d2981875 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
@@ -1,11 +1,11 @@
<div class="layout-library" *ngIf="!isLoading">
<div class="header">
<div class="title" role="heading" aria-level="2">
- <i class="icon-svg icon-svg--sm">
+ <!-- <i class="icon-svg icon-svg--sm">
<svg class="icon">
<use xlink:href="assets/common-consumption/images/sprite.svg#book"></use>
</svg>
- </i>
+ </i> -->
{{title}}
<span class="badge">{{contentList?.length}}</span>
</div>
diff --git a/projects/common-consumption/src/lib/layout/library-cards-grid/library-cards-grid.component.scss b/projects/common-consumption/src/lib/layout/library-cards-grid/library-cards-grid.component.scss
index 1de34ff8e0df868cb5f35de29cd32bec22f07e73..dedea0d1907904dc0070de3374b4ba7ca3ceac72 100644
--- a/projects/common-consumption/src/lib/layout/library-cards-grid/library-cards-grid.component.scss
+++ b/projects/common-consumption/src/lib/layout/library-cards-grid/library-cards-grid.component.scss
@@ -21,6 +21,7 @@
@include margin(1.5rem 0 1rem 0);
padding: 0px 0;
align-items: center;
+ // background-color: darkgoldenrod;
.title {
font-family: inherit;
@@ -168,3 +169,17 @@
margin-top: -1.5rem;
}
}
+.sb-btn-white{
+ opacity: 1 !important;
+ color: rgba(236,73,51,1) !important;
+ /* font-family: "NotoSans-Bold"; */
+ font-size: 14px !important;
+ font-weight: 700 !important;
+ font-style: normal !important;
+ letter-spacing: 0.29px !important;
+ text-align: left !important;
+ text-decoration: underline !important;
+ border: none !important;
+ background-color: transparent !important;
+ box-shadow: unset !important;
+}
diff --git a/projects/common-consumption/src/lib/pills-grid/pill-item/pill-item.component.scss b/projects/common-consumption/src/lib/pills-grid/pill-item/pill-item.component.scss
index 564e4e2ae6acbb210716cd91451c69645ebdba71..73392d7f449e1bd52c2d89981e32e6ff0c3cc357 100644
--- a/projects/common-consumption/src/lib/pills-grid/pill-item/pill-item.component.scss
+++ b/projects/common-consumption/src/lib/pills-grid/pill-item/pill-item.component.scss
@@ -18,7 +18,7 @@
font-size: calc(16px * 1.5);
.item {
label {
- font-size: 1rem !important;
+ font-size: 0.75rem !important;
}
}
}
@@ -26,7 +26,7 @@
font-size: calc(16px * 1.75);
.item {
label {
- font-size: 1rem !important;
+ font-size: 0.75rem !important;
}
}
}
@@ -90,7 +90,7 @@
.item {
border-radius: 1em;
span.img {
- border-radius: 0.5em;
+ border-radius: 2px;
}
}
}
@@ -148,22 +148,29 @@
flex-wrap: wrap;
.item {
height: 3em;
- border: 0px;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0.5em;
flex: none;
box-sizing: border-box;
+ border-radius: 2px !important;
+ border: 1px solid rgba(0,0,0, 0.2) !important;
+ width: 23%;
+ @media screen and (max-width: 768px){
+ width: 100%;
+ }
.img {
- width: 2em;
- height: 2em;
+ width: 40px;
+ height: 40px;
background: var(--cc-pills-grid-item-img-bg);
display: flex;
align-items: center;
justify-content: center;
margin-right: 0.5em;
padding: 0.325em;
+ border-radius: 2px;
+ opacity: 1;
img {
margin: 0 0 0 0;
width: 100%;
@@ -174,6 +181,12 @@
margin-bottom: 0px;
flex: 1;
font-size: 0.875em;
+ opacity: 1;
+ color: rgba(0,0,0,1);
+ font-weight: 700;
+ font-style: normal;
+ letter-spacing: 0px;
+ text-align: left;
}
}
&.hscroll {
diff --git a/projects/common-consumption/src/lib/pills-grid/pills-grid/pills-grid.component.html b/projects/common-consumption/src/lib/pills-grid/pills-grid/pills-grid.component.html
index baaf15c0f57bfdd0e04953191ed42e933f9aa388..c9617cb3245bb8b3f96c5da31355ddb56ae83377 100644
--- a/projects/common-consumption/src/lib/pills-grid/pills-grid/pills-grid.component.html
+++ b/projects/common-consumption/src/lib/pills-grid/pills-grid/pills-grid.component.html
@@ -1,4 +1,4 @@
-<div class="header" *ngIf="platform === 'portal' && pillItems?.length > 0">
+<div class="header p-0" *ngIf="platform === 'portal' && pillItems?.length > 0">
<div class="title">{{title}}</div>
<div *ngIf="minDisplayCount && (pillItems?.length > minDisplayCount)">
<button class="sb-btn sb-btn-normal font-weight-bold sb-btn-outline-primary sb-btn-white" *ngIf="showMoreViewType===ShowMoreViewType.EXPAND && viewCount < pillItems?.length"
diff --git a/projects/common-consumption/src/lib/pills-grid/pills-grid/pills-grid.component.scss b/projects/common-consumption/src/lib/pills-grid/pills-grid/pills-grid.component.scss
index 5ffeddb4f07fd894e820579c8b86aa91ee984d05..a90c12851358f65cb189e973cffa817e22afeb5b 100644
--- a/projects/common-consumption/src/lib/pills-grid/pills-grid/pills-grid.component.scss
+++ b/projects/common-consumption/src/lib/pills-grid/pills-grid/pills-grid.component.scss
@@ -29,7 +29,6 @@
align-items: center;
margin: 1.5rem 0 1rem;
padding-left: 1rem;
-
.title {
font-family: inherit;
text-overflow: ellipsis;
@@ -44,4 +43,18 @@
display: flex;
align-items: center;
}
+}
+.sb-btn-white{
+ opacity: 1 !important;
+ color: rgba(236,73,51,1) !important;
+ /* font-family: "NotoSans-Bold"; */
+ font-size: 14px !important;
+ font-weight: 700 !important;
+ font-style: normal !important;
+ letter-spacing: 0.29px !important;
+ text-align: left !important;
+ text-decoration: underline !important;
+ border: none !important;
+ background-color: transparent !important;
+ box-shadow: unset !important;
}
\ No newline at end of file