src/app/shared/components/block-size-input/block-size-input.component.ts
Component for entering dimensions of the tissue block
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | ccf-block-size-input |
| styleUrls | ./block-size-input.component.scss |
| templateUrl | ./block-size-input.component.html |
Properties |
|
Methods |
Inputs |
Outputs |
HostBindings |
constructor(ga: GoogleAnalyticsService)
|
||||||||
|
Creates an instance of block size input component.
Parameters :
|
| blockSize | |
Type : BlockSize
|
|
Default value : DEFAULT_BLOCK_SIZE
|
|
|
Values of block dimensions to be emitted |
|
| blockSizeChange | |
Type : EventEmitter
|
|
|
Emitter for values |
|
| class |
Type : "ccf-block-size-input"
|
Default value : 'ccf-block-size-input'
|
|
HTML class name |
| refreshBlockSize |
refreshBlockSize()
|
|
Refreshes all block size values to 10
Returns :
void
|
| updateBlockSizes | ||||||||||||
updateBlockSizes(input: KeyboardEvent, key: string)
|
||||||||||||
|
Updates values when an input changes
Parameters :
Returns :
void
|
| Readonly clsName |
Type : string
|
Default value : 'ccf-block-size-input'
|
Decorators :
@HostBinding('class')
|
|
HTML class name |
import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
import { GoogleAnalyticsService } from 'ngx-google-analytics';
/**
* Interface for objects containing tissue block dimensions
*/
export interface BlockSize {
/** Width of block */
x: number;
/** Height of block */
y: number;
/** Depth of block */
z: number;
}
/** Defaults for block sizes. */
const DEFAULT_BLOCK_SIZE: BlockSize = {
x: 10,
y: 10,
z: 10,
};
/**
* Component for entering dimensions of the tissue block
*/
@Component({
selector: 'ccf-block-size-input',
templateUrl: './block-size-input.component.html',
styleUrls: ['./block-size-input.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BlockSizeInputComponent {
/** HTML class name */
@HostBinding('class') readonly clsName = 'ccf-block-size-input';
/**
* Values of block dimensions to be emitted
*/
@Input() blockSize = DEFAULT_BLOCK_SIZE;
/**
* Emitter for values
*/
@Output() readonly blockSizeChange = new EventEmitter<BlockSize>();
/**
* Creates an instance of block size input component.
*
* @param ga Analytics service
*/
constructor(private readonly ga: GoogleAnalyticsService) {}
/**
* Updates values when an input changes
*
* @param input Event from the input element which contains the new value
* @param key Name of the dimension to be updated
*/
updateBlockSizes(input: KeyboardEvent, key: string): void {
const inputTarget = input.target as HTMLInputElement;
this.blockSize = { ...this.blockSize, [key]: +inputTarget.value };
this.ga.event('block_size_change', 'block_size_input', key, this.blockSize[key as never]);
this.blockSizeChange.emit(this.blockSize);
}
/**
* Refreshes all block size values to 10
*/
refreshBlockSize(): void {
this.blockSize = DEFAULT_BLOCK_SIZE;
this.ga.event('block_size_reset', 'block_size_input');
this.blockSizeChange.emit(this.blockSize);
}
}
<div class="header" matTooltip="Set the tissue block width, height and depth (dimensions)">
<span class="text title">Tissue Block Dimensions (mm)</span>
<div class="filler"></div>
<mat-icon
matRipple
[matRippleCentered]="true"
[matRippleUnbounded]="true"
class="icon refresh"
(click)="refreshBlockSize()"
>refresh</mat-icon
>
</div>
<div class="size-inputs">
<mat-form-field class="field">
<mat-label class="text form-input-label">Width (X)</mat-label>
<input
matInput
class="input"
type="number"
placeholder=""
[value]="blockSize.x"
(keyup)="updateBlockSizes($event, 'x')"
matTooltip="Enter tissue block width."
/>
</mat-form-field>
<mat-form-field class="field">
<mat-label class="text form-input-label">Height (Y)</mat-label>
<input
matInput
class="input"
type="number"
placeholder=""
[value]="blockSize.y"
(keyup)="updateBlockSizes($event, 'y')"
matTooltip="Enter tissue block height."
/>
</mat-form-field>
<mat-form-field class="field">
<mat-label class="text form-input-label">Depth (Z)</mat-label>
<input
matInput
class="input"
type="number"
placeholder=""
[value]="blockSize.z"
(keyup)="updateBlockSizes($event, 'z')"
matTooltip="Enter tissue block depth."
/>
</mat-form-field>
</div>
./block-size-input.component.scss
:host {
display: flex;
flex-direction: column;
input[type='number'] {
-moz-appearance: textfield;
}
.header {
display: flex;
align-items: center;
height: 1.5rem;
padding: 0.5rem 0;
.title {
font-weight: 400;
}
.refresh {
transform: scaleX(-1);
cursor: pointer;
transition: 0.6s;
&:hover {
border-radius: 2px;
}
}
}
.size-inputs {
display: flex;
justify-content: space-between;
width: 20rem;
margin: 0 auto;
.field {
width: 4.5rem;
&:not(:last-child) {
padding-right: 0.75rem;
}
.input {
text-align: center;
}
.suffix {
display: none;
}
::ng-deep .mdc-text-field {
padding: 0;
.mat-mdc-form-field-infix {
padding-bottom: 0;
min-height: inherit;
}
.mat-mdc-form-field-icon-suffix {
padding: 1rem 0 0px 0.25rem;
}
}
}
}
.filler {
flex-grow: 1;
}
}