@WidgetComponent
File
Description
Used in iPIM Buy.
No Widgetframe.
Button of type mat-mini-fab
Implements
Metadata
| selector |
nm-event-button |
| styleUrls |
eventbutton.component.scss |
| templateUrl |
./eventbutton.component.html |
Index
Widget inputs
|
|
|
|
|
|
|
|
|
Widget outputs
|
|
|
|
|
Properties
|
|
|
Methods
|
|
|
Methods
|
buttonClick
|
buttonClick(event: Event)
|
|
|
Parameters :
| Name |
Type |
Optional |
| event |
Event
|
no
|
|
|
Protected
configureWidget
|
configureWidget(configuration: WidgetConfig)
|
Decorators : WidgetConfigure
|
|
|
|
|
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
Public
disableClass
|
disableClass: BehaviorSubject<boolean>
|
Type : BehaviorSubject<boolean>
|
Default value : new BehaviorSubject<boolean>(
false
)
|
Decorators : WidgetInput
|
|
|
|
Private
enable
|
enable: ReplaySubject<any>
|
Type : ReplaySubject<any>
|
Default value : new ReplaySubject<any>(1)
|
Decorators : WidgetInput
|
|
|
|
Private
fireEvent
|
fireEvent:
|
Default value : new Subject<Event>()
|
Decorators : WidgetOutput
|
|
|
|
Public
isDisabled
|
isDisabled: Boolean
|
Type : Boolean
|
Default value : false
|
|
|
|
Public
isResetButtonNeeded
|
isResetButtonNeeded:
|
|
|
|
Public
isVisible
|
isVisible: Boolean
|
Type : Boolean
|
Default value : true
|
|
|
|
Private
unsubscribe
|
unsubscribe:
|
Default value : NgUnsubscribe.create()
|
|
|
|
Public
visibleChannel
|
visibleChannel: ReplaySubject<any>
|
Type : ReplaySubject<any>
|
Default value : new ReplaySubject<any>(1)
|
Decorators : WidgetInput
|
|
|
import { Component, OnDestroy } from "@angular/core";
import { Subject, ReplaySubject, BehaviorSubject } from "rxjs";
import { WidgetConfig } from "../../widget.configuration";
import {
WidgetComponent,
WidgetConfiguration,
WidgetConfigure,
WidgetInput,
WidgetOutput,
} from "../../widget.metadata";
import { NgUnsubscribe } from "../../../ng-unsubscribe";
import { getOrDefault, throwIfUndefined } from "../../widget.configuration";
/**
* Used in iPIM Buy.
* No Widgetframe.
*
* Button of type mat-mini-fab
*/
@WidgetComponent("nm-event-button")
@Component({
selector: "nm-event-button",
templateUrl: "./eventbutton.component.html",
styleUrls: ["./eventbutton.component.scss"],
})
export class EventButtonWidgetComponent implements OnDestroy {
private unsubscribe = NgUnsubscribe.create();
@WidgetConfiguration()
public configuration: WidgetConfig;
// Set the enabled or disabled state of the button
@WidgetInput()
private enable: ReplaySubject<any> = new ReplaySubject<any>(1);
// Set the disabled class of the button but button stays enabled
@WidgetInput()
public disableClass: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(
false
);
@WidgetInput()
public visibleChannel: ReplaySubject<any> = new ReplaySubject<any>(1);
// Emits the click event
@WidgetOutput("fireEvent")
private fireEvent = new Subject<Event>();
public isDisabled: Boolean = false;
public isVisible: Boolean = true;
public isResetButtonNeeded;
constructor() {}
@WidgetConfigure()
protected configureWidget(configuration: WidgetConfig) {
this.isDisabled = true;
this.enable.subscribe((enable) => {
if (enable != null) {
this.isDisabled = false;
} else this.isDisabled = true;
});
this.visibleChannel.asObservable().subscribe((value) => {
if (Array.isArray(value)) {
this.isVisible = value.length > 0;
} else {
this.isVisible = !!value; //!!value => true gets true, false gets false, 0 gets false, !=0 gets true
}
});
}
buttonClick(event: Event) {
this.fireEvent.next(event);
}
ngOnDestroy() {
this.unsubscribe.destroy();
}
}
<button
mat-mini-fab
color="primary"
(click)="buttonClick($event)"
class="mat-icon-button nm-button__reset"
[disabled]="isDisabled"
[class.nm-fadeout]="!isVisible"
[class.btn-black]="disableClass | async"
pTooltip="{{ configuration.configuration['popover'] | translate }}"
tooltipPosition="bottom"
>
<div
class="material-icons nm-svg-icon"
[ngStyle]="{ fill: 'rgb(255,153,0)' }"
>
<mat-icon>{{ configuration.configuration["icon"] }}</mat-icon>
</div>
</button>
Legend
Html element with directive