File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
Methods
|
selectAndSubmitDisposition
|
selectAndSubmitDisposition(event: KeyboardEvent, dispositionKey: string)
|
|
|
Parameters :
| Name |
Type |
Optional |
| event |
KeyboardEvent
|
No
|
| dispositionKey |
string
|
No
|
|
|
submitDisposition
|
submitDisposition()
|
|
|
|
|
|
dispositionName
|
Type : string
|
Default value : ''
|
|
|
|
selectedDispositionValue
|
Type : string
|
Default value : ''
|
|
|
import { IDisposition, IDispositionResult } from './../../models/disposition.interface';
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'amc-disposition',
templateUrl: './disposition.component.html',
styleUrls: ['./disposition.component.css']
})
export class DispositionComponent implements OnInit {
@Input() disposition: IDisposition;
@Output() dispositionEmitter = new EventEmitter<IDispositionResult>();
selectedDispositionValue: string = '';
dispositionName: string = '';
constructor() { }
ngOnInit() {
for (const metadata of this.disposition.dispositionMetadata) {
if (metadata.key === 'callId') {
this.dispositionName = `disposition_${metadata.value}`;
break;
}
}
if (this.disposition.checkedDisposition) {
this.selectedDispositionValue = this.disposition.checkedDisposition;
}
}
submitDisposition() {
const selectedDisposition: IDispositionResult = {
dispositionId: this.selectedDispositionValue,
dispositionName: this.disposition.disposition.get(this.selectedDispositionValue),
dispositionMetadata: this.disposition.dispositionMetadata
};
this.dispositionEmitter.emit(selectedDisposition);
}
selectAndSubmitDisposition(event: KeyboardEvent, dispositionKey: string) {
if (event.code === 'Enter') {
this.selectedDispositionValue = dispositionKey;
this.submitDisposition();
}
}
}
<div class="disposition-container">
<div class="header-container">
<label class="disposition-header" attr.aria-label="set disposition">{{disposition.dispositionHeader}}</label>
</div>
<div class="dispositions-container">
<div class="disposition" *ngFor="let disp of disposition.disposition | keyvalue; let i = index">
<label
class="disposition-label"
tabindex="0"
[id]="disp.key"
[ngClass]="{'disposition-label-selected' : selectedDispositionValue === disp.key, 'first-disposition': i === 0}"
(keypress)="selectAndSubmitDisposition($event, disp.key)">
<input
class="disposition-input"
type="radio"
value="{{disp.key}}"
tabindex="-1"
attr.aria-label="{{disp.value}}"
[required]="!selectedDispositionValue"
[name]="dispositionName"
(change)="submitDisposition()"
[(ngModel)]="selectedDispositionValue">
{{disp.value}}
</label>
</div>
</div>
</div>
.disposition-container {
border: 1px solid #939598;
white-space: nowrap;
font-family: Arial;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
text-overflow: ellipsis;
position: relative;
font-size: 0.9em;
max-height: 180px;
overflow-x: hidden;
overflow-y: hidden;
}
.header-container {
border-bottom: 1px solid #939598;
background-color: #f4f5fb;
width: 100%;
white-space: nowrap;
height: 28px;
position: sticky;
overflow-x: hidden;
overflow-y: hidden;
}
.disposition-header {
margin-top: auto;
margin-left: 7px;
padding: 5px;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: bold;
font-size: 0.9em;
font-family: Arial;
overflow-x: hidden;
}
.disposition {
margin-left: 5px;
padding-left: 5px;
white-space: nowrap;
}
.disposition-label {
text-overflow: ellipsis;
font-weight: normal;
white-space: nowrap;
font-size: 0.9em;
overflow-x: hidden;
}
.disposition-label-selected {
text-overflow: ellipsis;
font-weight: bold;
white-space: nowrap;
font-size: 0.9em;
}
.dispositions-container {
padding: 5px;
overflow-y: scroll;
max-height: 150px;
padding: 3px;
}
.disposition-label:focus {
outline: 2px solid rgb(50, 150, 218);
outline-offset: 5px;
}
.first-disposition {
margin-top: 5px;
}
Legend
Html element with directive