sunbirded-mobile-app documentation
  1. Components
  2. ItemListCardComponent

File

src/app/manage-learn/shared/components/item-list-card/item-list-card.component.ts

Implements

OnChanges

Metadata

selector app-item-list-card
styleUrls ./item-list-card.component.scss
templateUrl ./item-list-card.component.html

Index

Methods
Inputs
Outputs

Constructor

constructor(commonUtilService: CommonUtilService)
Defined in src/app/manage-learn/shared/components/item-list-card/item-list-card.component.ts:19
Parameters :
Name Type Optional
commonUtilService CommonUtilService No

Inputs

arrIndex
Type : any
Defined in src/app/manage-learn/shared/components/item-list-card/item-list-card.component.ts:18
case
Type : any
Default value : {subTitle:'titleCase', description:'titleCase'}
Defined in src/app/manage-learn/shared/components/item-list-card/item-list-card.component.ts:14
code
Type : any
Defined in src/app/manage-learn/shared/components/item-list-card/item-list-card.component.ts:11
description
Type : any
Defined in src/app/manage-learn/shared/components/item-list-card/item-list-card.component.ts:13
ellipsis
Type : Boolean
Default value : false
Defined in src/app/manage-learn/shared/components/item-list-card/item-list-card.component.ts:17
id
Type : any
Defined in src/app/manage-learn/shared/components/item-list-card/item-list-card.component.ts:15
selectedEvidenceIndex
Type : any
Defined in src/app/manage-learn/shared/components/item-list-card/item-list-card.component.ts:19
subTitle
Type : any
Defined in src/app/manage-learn/shared/components/item-list-card/item-list-card.component.ts:12
title
Type : any
Defined in src/app/manage-learn/shared/components/item-list-card/item-list-card.component.ts:10

Outputs

cardSelect
Type : EventEmitter
Defined in src/app/manage-learn/shared/components/item-list-card/item-list-card.component.ts:16

Methods

isNumber
isNumber(val)
Defined in src/app/manage-learn/shared/components/item-list-card/item-list-card.component.ts:24
Parameters :
Name Optional
val No
Returns : boolean
ngOnChanges
ngOnChanges(changes: SimpleChanges)
Defined in src/app/manage-learn/shared/components/item-list-card/item-list-card.component.ts:22
Parameters :
Name Type Optional
changes SimpleChanges No
Returns : void
programDetails
programDetails(id)
Defined in src/app/manage-learn/shared/components/item-list-card/item-list-card.component.ts:28
Parameters :
Name Optional
id No
Returns : void 
import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
import { CommonUtilService } from '@app/services';

@Component({
  selector: 'app-item-list-card',
  templateUrl: './item-list-card.component.html',
  styleUrls: ['./item-list-card.component.scss'],
})
export class ItemListCardComponent implements OnChanges {
  @Input() title: any;
  @Input() code: any;
  @Input() subTitle: any;
  @Input() description:any;
  @Input() case:any ={subTitle:'titleCase', description:'titleCase'}
  @Input() id: any;
  @Output() cardSelect = new EventEmitter();
  @Input() ellipsis:Boolean =false
  @Input() arrIndex:any;
  @Input() selectedEvidenceIndex:any;
  constructor(private commonUtilService: CommonUtilService) {}

  ngOnChanges(changes: SimpleChanges): void {
  }
  isNumber(val): boolean {
    return typeof val === 'number';
  }
 
  programDetails(id){
    this.cardSelect.emit(id);
  }
}

<ion-card (click)="programDetails(id)" class="sb--card card-container" [ngClass]="{alterCard: selectedEvidenceIndex !== undefined && arrIndex !== undefined && arrIndex === selectedEvidenceIndex}">
  <ion-card-content>
    <div class="d-flex flex-jc-ai-center">
      <div>
        <ng-content select="[color]"></ng-content>
      </div>
      <div class="flex-dc d-flex flex-basis-1">
        <div class="d-flex flex-ai-center flex-jc-space-between">
          <div class="title w-90 sb--card__title" [class.ellipsis]="ellipsis">
            {{ title }} <span *ngIf="code">
              , {{code}}
              </span>
          </div>
          <ng-content select="[certificate]"></ng-content>
          <ng-content select="[arrow]"></ng-content>
          <ng-content select="[report]"></ng-content>
        </div>
        <div class="info">
          <span *ngIf="isNumber(subTitle)">{{ subTitle | titlecase }}</span>
          <div *ngIf="!isNumber(subTitle)" class="d-flex flex-ai-center">
            <span>{{ case?.subTitle ? (subTitle | titlecase) : subTitle}}</span> <ng-content select="[info]" class="ml-5"></ng-content>
          </div>
          <div class="d-flex flex-ai-center">
            <span>{{ case?.description ? (description | titlecase) : description }}</span>
            <ng-content select="[info]" class="ml-5"></ng-content>
          </div>
        </div>
      </div>
    </div>

  </ion-card-content>
</ion-card>

./item-list-card.component.scss 

@import "src/assets/styles/base/_variables.scss";
@import "src/assets/styles/_custom-mixins.scss";
@import "src/assets/styles/_variables.scss";

.title{
    font-size: 1rem;
    font-weight: bold;
    color: #{$blue};
    word-break: break-all;
}


.ellipsis{
    text-overflow: ellipsis;
    overflow: hidden;
    width: 1rem;
    height: 1.4rem;
    white-space: nowrap;
    flex-grow: 1;
}

ion-card-header {
    padding-bottom: 2px;
}

.card-container{
    padding-top: 8px;
    padding-bottom: 8px;
    background: #ffffff;
    ion-card-content{
    word-break: break-all;
    }
}

.alterCard{
    border-bottom-left-radius: initial !important;
    border-bottom-right-radius: initial !important;
    margin-bottom: 2px;
  }
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""