File
|
omaps
|
Type : OmapConfig
|
Default value : { organsOnly: false, proteinsOnly: false }
|
|
|
Outputs
|
updateConfig
|
Type : EventEmitter
|
|
|
Methods
|
checkBoxClicked
|
checkBoxClicked(event: Record)
|
|
|
Parameters :
| Name |
Type |
Optional |
| event |
Record<string | boolean>
|
No
|
|
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { OmapConfig } from '../../models/omap.model';
import { Error } from '../../models/response.model';
@Component({
selector: 'app-omap-controls',
templateUrl: './omap-controls.component.html',
styleUrls: ['./omap-controls.component.scss'],
})
export class OmapControlsComponent {
@Input() omaps: OmapConfig = { organsOnly: false, proteinsOnly: false };
@Input() error!: Error;
@Output() updateConfig = new EventEmitter<OmapConfig>();
checkBoxClicked(event: Record<string, boolean>) {
this.omaps.organsOnly = event['organsOnly'];
this.omaps.proteinsOnly = event['proteinsOnly'];
this.updateConfig.emit(this.omaps);
}
}
<div>
<mat-expansion-panel class="mepNoPadding" [expanded]="!error.hasError">
<mat-expansion-panel-header [expandedHeight]="'4.5rem'" [collapsedHeight]="'4.5rem'">
<mat-panel-title>
<div>
<strong> Organ Mapping Antibody Panels (OMAPs) </strong>
</div>
</mat-panel-title>
</mat-expansion-panel-header>
<div class="py-1">
<mat-checkbox
[checked]="omaps.organsOnly"
(change)="
checkBoxClicked({
organsOnly: !omaps.organsOnly,
proteinsOnly: omaps.proteinsOnly
})
"
>
<mat-label class="checkbox-label">OMAP Organs Only</mat-label>
</mat-checkbox>
</div>
<div class="py-1">
<mat-checkbox
[checked]="omaps.proteinsOnly"
(change)="
checkBoxClicked({
proteinsOnly: !omaps.proteinsOnly,
organsOnly: omaps.organsOnly
})
"
>
<mat-label class="checkbox-label">OMAP Proteins Only</mat-label>
</mat-checkbox>
</div>
</mat-expansion-panel>
</div>
@import './../../../assets/stylesheets/_colors.scss';
.mat-expansion-panel:not([class*='mat-elevation-z']) {
box-shadow: none;
}
.mat-expansion-panel-header:not(.compare) {
border-top-left-radius: 0.5rem !important;
border-top-right-radius: 0.5rem !important;
}
.mat-expansion-panel-header {
transition: all 0.3s;
background-color: $secondary !important;
padding-left: 0.9375rem !important;
padding-right: 0.9375rem !important;
border-top-left-radius: 0.5rem !important;
border-top-right-radius: 0.5rem !important;
}
.mat-expansion-panel-header:hover {
background-color: darken($color: $secondary, $amount: 8%) !important;
}
.checkbox-label {
font-size: 0.89rem;
}
Legend
Html element with directive