src/app/shared/components/term-occurence-list/term-occurrence.component.ts
Component for a dropdown menu
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | ccf-term-occurrence-list |
| styleUrls | ./term-occurrence.component.scss |
| templateUrl | ./term-occurrence.component.html |
Properties |
|
Inputs |
HostBindings |
| termList | |
Type : TermResult[]
|
|
Default value : []
|
|
|
array that contains the terms and their counts |
|
| title | |
Type : string
|
|
|
Holds title for section |
|
| toolTipText | |
Type : string
|
|
|
Text to be included in the tool tip |
|
| class |
Type : "ccf-term-occurrence-list"
|
Default value : 'ccf-term-occurrence-list'
|
| Readonly className |
Type : string
|
Default value : 'ccf-term-occurrence-list'
|
Decorators :
@HostBinding('class')
|
import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
import { TermResult } from '../../../core/store/spatial-search-ui/spatial-search-ui.state';
/**
* Component for a dropdown menu
*/
@Component({
selector: 'ccf-term-occurrence-list',
templateUrl: './term-occurrence.component.html',
styleUrls: ['./term-occurrence.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TermOccurrenceListComponent {
@HostBinding('class') readonly className = 'ccf-term-occurrence-list';
/**
* array that contains the terms and their counts
*/
@Input() termList: TermResult[] = [];
/**
* Holds title for section
*/
@Input() title!: string;
/**
* Text to be included in the tool tip
*/
@Input() toolTipText!: string;
}
<div class="term-list-header">
<div class="title">{{ termList.length }} {{ title }}</div>
<button class="info" mat-icon-button>
<mat-icon matTooltip="{{ toolTipText }}" matTooltipPosition="right">info</mat-icon>
</button>
</div>
<div class="term-list">
<div class="donor" *ngFor="let term of termList">
<div class="term-bloc">
<div class="term-line">{{ term.label }}</div>
<div class="term-line">{{ term.count }}</div>
</div>
</div>
</div>
./term-occurrence.component.scss
:host {
padding-top: 1rem;
.term-list-header {
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
.title {
font-size: 0.875rem;
}
.counter {
font-size: 1rem;
}
.info {
padding-right: 0;
background: none;
border: none;
outline: none;
border-radius: 0.25rem;
transition: 0.6s;
}
}
.term-list {
overflow: auto;
padding-left: 2rem;
font-size: 1rem;
.term-bloc {
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
overflow: auto;
}
.term-line {
padding-right: 2rem;
}
}
}