alarm-event-selector/alarm-event-selector-list-item/alarm-event-selector-list-item.component.ts
OnInit
ControlValueAccessor
Validator
OnDestroy
providers |
{
provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => AlarmEventSelectorListItemComponent), multi: true
}
{
provide: NG_VALIDATORS, useExisting: forwardRef(() => AlarmEventSelectorListItemComponent), multi: true
}
|
selector | c8y-alarm-event-selector-list-item |
templateUrl | ./alarm-event-selector-list-item.component.html |
Properties |
Methods |
Inputs |
Outputs |
constructor(formBuilder: FormBuilder)
|
||||||
Parameters :
|
allowItemEdit |
Type : boolean
|
Default value : false
|
displayAsSwitch |
Type : boolean
|
Default value : false
|
hideSource |
Type : boolean
|
Default value : false
|
highlightText |
Type : string
|
isSelected |
Type : boolean
|
Default value : false
|
omitProperties |
Type : OmitSelectorProperties
|
Default value : {}
|
optionToRemove |
Type : boolean
|
Default value : false
|
showActiveToggle |
Type : boolean
|
Default value : false
|
showAddRemoveButton |
Type : boolean
|
Default value : true
|
timelineType |
Type : TimelineType
|
added |
Type : EventEmitter
|
removed |
Type : EventEmitter
|
addOrRemoveItem |
addOrRemoveItem()
|
Returns :
void
|
ngOnDestroy |
ngOnDestroy()
|
Returns :
void
|
ngOnInit |
ngOnInit()
|
Returns :
void
|
registerOnChange | ||||||
registerOnChange(fn: any)
|
||||||
Parameters :
Returns :
void
|
registerOnTouched | ||||||
registerOnTouched(fn: any)
|
||||||
Parameters :
Returns :
void
|
remove |
remove()
|
Returns :
void
|
setDisabledState | ||||||
setDisabledState(isDisabled: boolean)
|
||||||
Parameters :
Returns :
void
|
toggleActive |
toggleActive()
|
Returns :
void
|
validate | ||||||
validate(_control: AbstractControl)
|
||||||
Parameters :
Returns :
ValidationErrors
|
writeValue | ||||||
writeValue(obj: any)
|
||||||
Parameters :
Returns :
void
|
colorPickerTitle |
Type : string
|
formGroup |
Type : FormGroup
|
valid$ |
Type : Observable<boolean>
|
<c8y-li
class="c8y-list__item__collapse--container-small"
[formGroup]="formGroup"
#li
>
<c8y-li-drag-handle><ng-content select="c8y-li-drag-handle"></ng-content></c8y-li-drag-handle>
<c8y-li-icon
class="a-s-center p-r-4"
*ngIf="showAddRemoveButton"
>
<button
class="btn btn-clean text-primary"
[title]="'Remove' | translate"
*ngIf="isSelected"
(click)="addOrRemoveItem()"
>
<i
class="text-danger"
c8yIcon="minus-circle"
></i>
</button>
<button
class="btn btn-clean text-primary"
[title]="'Select' | translate"
*ngIf="!isSelected"
(click)="addOrRemoveItem()"
[disabled]="(valid$ | async) === false"
>
<i
class="text-primary"
c8yIcon="plus-circle"
></i>
</button>
</c8y-li-icon>
<c8y-li-checkbox
class="a-s-center m-t-4 p-r-0"
*ngIf="showActiveToggle"
[displayAsSwitch]="displayAsSwitch"
formControlName="__active"
(click)="$event.stopPropagation()"
></c8y-li-checkbox>
<div class="d-flex a-i-center p-l-4">
<div
class="c8y-list__item__colorpicker p-t-0 p-b-0 p-l-0"
[title]="colorPickerTitle | translate"
>
<div
class="c8y-colorpicker"
[ngClass]="{
'c8y-colorpicker--alarm': timelineType === 'ALARM',
'c8y-colorpicker--event': timelineType === 'EVENT'
}"
>
<input
[ngStyle]="{ 'pointer-events': allowItemEdit && !omitProperties.color ? 'auto' : 'none' }"
type="color"
formControlName="color"
(click)="$event.stopPropagation()"
/>
<span
class="circle-icon-wrapper"
[ngStyle]="{ 'background-color': formGroup.value.color }"
>
<i
class="stroked-icon"
[c8yIcon]="timelineType === 'EVENT' ? 'c8y-events' : 'bell'"
></i>
</span>
</div>
</div>
<button
class="btn-clean text-truncate"
[title]="formGroup.value.details?.label"
(click)="
allowItemEdit
? (li.collapsed = !li.collapsed)
: showActiveToggle
? toggleActive()
: addOrRemoveItem()
"
>
<span class="text-truncate text-12">
<c8y-highlight
[text]="
omitProperties.label
? formGroup.value.details?.filters?.type
: formGroup.value.details?.label
"
[pattern]="highlightText"
[shouldTrimPattern]="true"
></c8y-highlight>
</span>
<small
class="text-truncate text-muted icon-flex"
*ngIf="formGroup.value.__target && !hideSource"
>
<i c8yIcon="exchange"></i>
<span class="text-truncate">{{ formGroup.value.__target.name }}</span>
</small>
</button>
<button
class="btn-dot btn-dot--danger m-l-auto"
title="{{ 'Invalid entries' | translate }}"
[popover]="'Some entries are invalid. Check the required input fields.' | translate"
container="body"
*ngIf="(valid$ | async) === false && li.collapsed"
[outsideClick]="true"
>
<i c8yIcon="exclamation-circle"></i>
</button>
</div>
<c8y-li-action
[icon]="'minus-circle'"
*ngIf="optionToRemove"
[label]="'Remove from list' | translate"
(click)="remove()"
></c8y-li-action>
<c8y-li-collapse *ngIf="allowItemEdit">
<div class="data-point-details">
<c8y-alarm-event-attributes-form
formControlName="details"
[timelineType]="timelineType"
[omitProperties]="omitProperties"
></c8y-alarm-event-attributes-form>
</div>
</c8y-li-collapse>
</c8y-li>