projects/storefrontlib/shared/components/card/card.component.ts
| selector | cx-card |
| templateUrl | ./card.component.html |
Properties |
Methods |
Inputs |
Outputs |
constructor()
|
| border | |
Type : boolean
|
|
Default value : false
|
|
| charactersLimit | |
Type : number
|
|
Default value : 100
|
|
| content | |
Type : Card
|
|
| editMode | |
Type : boolean
|
|
Default value : false
|
|
| fitToContainer | |
Type : boolean
|
|
Default value : false
|
|
| isDefault | |
Type : boolean
|
|
Default value : false
|
|
| truncateText | |
Type : boolean
|
|
Default value : false
|
|
| cancelCard | |
Type : EventEmitter<number>
|
|
| deleteCard | |
Type : EventEmitter<number>
|
|
| editCard | |
Type : EventEmitter<number>
|
|
| sendCard | |
Type : EventEmitter<number>
|
|
| setDefaultCard | |
Type : EventEmitter<number>
|
|
| cancelEdit |
cancelEdit()
|
|
Returns :
void
|
| delete |
delete()
|
|
Returns :
void
|
| edit |
edit()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| send |
send()
|
|
Returns :
void
|
| setDefault |
setDefault()
|
|
Returns :
void
|
| setEditMode |
setEditMode()
|
|
Returns :
void
|
| border |
Default value : false
|
Decorators :
@Input()
|
| cancelCard |
Type : EventEmitter<number>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
| charactersLimit |
Type : number
|
Default value : 100
|
Decorators :
@Input()
|
| content |
Type : Card
|
Decorators :
@Input()
|
| deleteCard |
Type : EventEmitter<number>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
| editCard |
Type : EventEmitter<number>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
| editMode |
Default value : false
|
Decorators :
@Input()
|
| fitToContainer |
Default value : false
|
Decorators :
@Input()
|
| iconTypes |
Default value : ICON_TYPE
|
| isDefault |
Default value : false
|
Decorators :
@Input()
|
| sendCard |
Type : EventEmitter<number>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
| setDefaultCard |
Type : EventEmitter<number>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
| truncateText |
Default value : false
|
Decorators :
@Input()
|
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { ICON_TYPE } from '../../../cms-components/misc/icon/icon.model';
export interface CardAction {
event: string;
name: string;
}
export interface CardLinkAction {
link: string;
name: string;
}
export interface Card {
header?: string;
title?: string;
textBold?: string;
text?: Array<string>;
paragraphs?: Array<{ title?: string; text?: Array<string> }>;
img?: string;
actions?: Array<CardAction | CardLinkAction>;
deleteMsg?: string;
}
@Component({
selector: 'cx-card',
templateUrl: './card.component.html',
})
export class CardComponent implements OnInit {
iconTypes = ICON_TYPE;
@Output()
deleteCard: EventEmitter<number> = new EventEmitter();
@Output()
setDefaultCard: EventEmitter<number> = new EventEmitter();
@Output()
sendCard: EventEmitter<number> = new EventEmitter();
@Output()
editCard: EventEmitter<number> = new EventEmitter();
@Output()
cancelCard: EventEmitter<number> = new EventEmitter();
@Input()
border = false;
@Input()
editMode = false;
@Input()
isDefault = false;
@Input()
content: Card;
@Input()
fitToContainer = false;
@Input()
truncateText = false;
@Input()
charactersLimit = 100;
// ACTIONS
setEditMode(): void {
this.editMode = true;
}
cancelEdit(): void {
this.editMode = false;
this.cancelCard.emit(5);
}
delete(): void {
this.deleteCard.emit(1);
}
setDefault(): void {
this.isDefault = true;
this.setDefaultCard.emit(2);
}
send(): void {
this.sendCard.emit(3);
}
edit(): void {
this.editCard.emit(4);
}
constructor() {}
ngOnInit() {}
}
<div
*ngIf="content"
class="cx-card"
[class.cx-card-border]="border"
[class.cx-card-fit-to-container]="fitToContainer"
>
<!-- Card Header -->
<div *ngIf="content.header && !editMode" class="card-header">
{{ content.header }}
</div>
<!-- Card Body -->
<div class="card-body cx-card-body" [class.cx-card-delete]="editMode">
<!-- Edit message -->
<div *ngIf="editMode" class="cx-card-delete-msg">
{{ content.deleteMsg }}
</div>
<!-- Card title -->
<h3 *ngIf="content.title" class="cx-card-title">
{{ content.title }}
</h3>
<!-- Card Content -->
<div class="cx-card-container">
<!-- Card Label -->
<div class="cx-card-label-container">
<div *ngIf="content.textBold" class="cx-card-label-bold">
{{ content.textBold }}
</div>
<div *ngFor="let line of content.text">
<div *ngIf="!truncateText; else truncate" class="cx-card-label">
{{ line }}
</div>
<ng-template #truncate>
<cx-truncate-text-popover
[charactersLimit]="charactersLimit"
[content]="line"
></cx-truncate-text-popover>
</ng-template>
</div>
<div class="cx-card-paragraph" *ngFor="let item of content.paragraphs">
<div class="cx-card-paragraph-title">{{ item.title }}</div>
<div *ngFor="let text of item.text">
<div class="cx-card-paragraph-text">
{{ text }}
</div>
</div>
</div>
</div>
<!-- Image -->
<div *ngIf="content.img" class="cx-card-img-container">
<cx-icon [type]="content.img"></cx-icon>
</div>
</div>
<!-- Edit Mode Actions -->
<div *ngIf="editMode" class="row cx-card-body-delete">
<div class="col-md-6">
<button class="btn btn-block btn-secondary" (click)="cancelEdit()">
{{ 'common.cancel' | cxTranslate }}
</button>
</div>
<div class="col-md-6">
<button class="btn btn-block btn-primary" (click)="delete()">
{{ 'common.delete' | cxTranslate }}
</button>
</div>
</div>
<!-- Actions -->
<div *ngIf="content.actions && !editMode" class="cx-card-actions">
<div *ngFor="let action of content.actions">
<div [ngSwitch]="action.event">
<a
*ngSwitchCase="'delete'"
class="cx-card-link card-link btn-link cx-action-link"
(click)="delete()"
(keydown.enter)="delete()"
tabindex="0"
>{{ action.name }}</a
>
<a
*ngSwitchCase="'default'"
class="cx-card-link card-link btn-link cx-action-link"
(click)="setDefault()"
(keydown.enter)="setDefault()"
tabindex="0"
>{{ action.name }}</a
>
<a
*ngSwitchCase="'send'"
class="cx-card-link card-link btn-link cx-action-link"
(click)="send()"
(keydown.enter)="send()"
tabindex="0"
>{{ action.name }}</a
>
<a
*ngSwitchCase="'edit'"
class="cx-card-link card-link btn-link cx-action-link"
(click)="edit()"
(keydown.enter)="edit()"
tabindex="0"
>{{ action.name }}</a
>
<a
*ngSwitchDefault
href="{{ action.link }}"
class="card-link btn-link cx-action-link"
tabindex="0"
>{{ action.name }}</a
>
</div>
</div>
</div>
</div>
</div>