src/app/components/card-button-long/card-button-long.component.ts
Displays a card to navigate to other pages or external links
| selector | ccf-card-button-long |
| styleUrls | ./card-button-long.component.scss |
| templateUrl | ./card-button-long.component.html |
Inputs |
Outputs |
| longButtonItems | |
Type : LongCard[]
|
|
Default value : []
|
|
|
Details to be displayed inside the card |
|
| cardRoutes | |
Type : EventEmitter
|
|
|
Emits the card data when card is clicked |
|
import { LongCard } from './long-card';
import { Component, EventEmitter, Input, Output } from '@angular/core';
/** Displays a card to navigate to other pages or external links */
@Component({
selector: 'ccf-card-button-long',
templateUrl: './card-button-long.component.html',
styleUrls: ['./card-button-long.component.scss'],
})
export class CardButtonLongComponent {
/** Details to be displayed inside the card */
@Input() longButtonItems: LongCard[] = [];
/**Emits the card data when card is clicked */
@Output() readonly cardRoutes = new EventEmitter<LongCard>();
}
<mat-card *ngFor="let longButton of longButtonItems" (click)="cardRoutes.emit(longButton)">
<a *ngIf="longButton.externalLink; else route" [href]="longButton.externalLink" target="_blank">
<ng-container *ngTemplateOutlet="content; context: { $implicit: true }"> </ng-container>
</a>
<ng-template #route>
<ng-container *ngTemplateOutlet="content"> </ng-container>
</ng-template>
<ng-template let-isExternal #content>
<div class="symbol" [style.background-color]="longButton.color">
<img [src]="longButton.icon" [alt]="longButton.alt" class="card-image" />
</div>
<div class="body">
<div class="nav-card-title">
<span
>{{ longButton.title }}
<mat-icon *ngIf="isExternal" class="external-icon">open_in_new</mat-icon>
</span>
</div>
<div class="nav-card-description">
{{ longButton.body }}
</div>
</div>
</ng-template>
</mat-card>
./card-button-long.component.scss
:host {
padding-bottom: 2rem;
display: flex;
flex-direction: column;
cursor: pointer;
box-sizing: content-box;
.symbol {
height: 8rem;
max-width: 8rem;
}
.card-image {
width: 100%;
height: 100%;
object-fit: fill;
}
.mdc-card {
padding: unset;
margin-bottom: 0.063rem;
display: flex;
flex-direction: row;
&:hover {
background: rgba(0, 0, 0, 0.04);
}
}
a {
width: 100%;
display: flex;
}
.body,
a > .body {
margin-left: 1.5rem;
overflow-x: hidden;
display: flex;
flex-direction: column;
align-self: center;
}
.nav-card-title {
display: flex;
font-weight: 400;
font-size: 1.25rem;
line-height: 1.75rem;
letter-spacing: 0.005em;
color: #054f89;
}
.nav-card-description {
padding-top: 0.5rem;
font-weight: 300;
font-size: 1rem;
line-height: 1.5rem;
letter-spacing: 0.005em;
color: #212121;
}
a {
text-decoration: none;
color: #054f89;
font-weight: unset;
}
.mat-icon {
height: 1.313rem;
// padding-left: 10.5px;
}
// @media (max-width: 48rem) {
// .mat-icon {
// padding-right: 1rem;
// }
// }
@media (max-width: 26.75rem) {
.body {
padding: 1rem 0rem;
padding-right: 1rem;
}
.symbol {
height: auto;
width: 80px;
min-width: 80px;
background-color: #444c65;
}
}
@media (max-width: 80rem) {
.symbol {
height: auto;
width: 80px;
min-width: 80px;
background-color: #444c65;
}
.body {
padding: 1rem;
}
}
}