nm-event-icon-button
src/app/shared/widgets/buttons/eventiconbutton/eventiconbutton.component.ts
Used in iPIM Buy. No Widgetframe.
Button of type mat-icon-button with icon refresh
| selector | nm-event-icon-button |
| styleUrls | eventiconbutton.component.scss |
| templateUrl | ./eventiconbutton.component.html |
Widget inputs |
Widget outputs |
Properties |
|
Methods |
|
constructor()
|
| buttonClick | ||||||
buttonClick(event: Event)
|
||||||
|
Parameters :
Returns :
void
|
| Protected configureWidget | ||||||
configureWidget(configuration: WidgetConfig)
|
||||||
Decorators : WidgetConfigure
|
||||||
|
Parameters :
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Returns :
void
|
| Public configuration |
configuration:
|
Type : WidgetConfig
|
Decorators : WidgetConfiguration
|
| Public cssClass |
cssClass:
|
Default value : new Subject<any>()
|
Decorators : WidgetInput
|
| Public customCssClass |
customCssClass:
|
Type : string
|
| Private disable |
disable:
|
Type : Subject<boolean>
|
Default value : new Subject<boolean>()
|
Decorators : WidgetInput
|
| Public disabled |
disabled:
|
Type : boolean
|
Default value : false
|
| Public disableRipple |
disableRipple:
|
Type : boolean
|
| Private fireEvent |
fireEvent:
|
Default value : new Subject<Event>()
|
Decorators : WidgetOutput
|
| Public hide |
hide:
|
Type : Subject<boolean>
|
Default value : new Subject<boolean>()
|
Decorators : WidgetInput
|
| Public icon |
icon:
|
Type : string
|
| Public isVisible |
isVisible:
|
Type : boolean
|
Default value : true
|
| Public tooltip |
tooltip:
|
Type : string
|
| Private unsubscribe |
unsubscribe:
|
Default value : NgUnsubscribe.create()
|
import { Component, OnDestroy } from "@angular/core";
import { Subject } from "rxjs";
import { WidgetConfig } from "../../widget.configuration";
import {
WidgetComponent,
WidgetConfiguration,
WidgetConfigure,
WidgetInput,
WidgetOutput,
} from "../../widget.metadata";
import { NgUnsubscribe } from "../../../ng-unsubscribe";
import { takeUntil } from "rxjs/operators";
import { getOrDefault } from "../../../widgets/widget.configuration";
/**
* Used in iPIM Buy.
* No Widgetframe.
*
* Button of type mat-icon-button with icon refresh
*/
@WidgetComponent("nm-event-icon-button")
@Component({
selector: "nm-event-icon-button",
templateUrl: "./eventiconbutton.component.html",
styleUrls: ["./eventiconbutton.component.scss"],
})
export class EventIconButtonWidgetComponent implements OnDestroy {
private unsubscribe = NgUnsubscribe.create();
public icon: string;
public tooltip: string;
public disabled: boolean = false;
public disableRipple: boolean;
public customCssClass: string;
public isVisible: boolean = true;
@WidgetConfiguration()
public configuration: WidgetConfig;
@WidgetInput("disable")
private disable: Subject<boolean> = new Subject<boolean>();
@WidgetInput("cssClass")
public cssClass = new Subject<any>();
@WidgetOutput("fireEvent")
private fireEvent = new Subject<Event>();
@WidgetInput()
public hide: Subject<boolean> = new Subject<boolean>();
constructor() {}
@WidgetConfigure()
protected configureWidget(configuration: WidgetConfig) {
if (
this.configuration.configuration &&
this.configuration.configuration.icon
) {
this.icon = this.configuration.configuration.icon;
} else {
this.icon = "refresh";
}
this.tooltip = this.configuration.configuration["tooltip"];
this.disableRipple = getOrDefault(
this.configuration.configuration.disableRipple,
false
);
this.customCssClass = getOrDefault(
this.configuration.configuration.customCssClass,
"mat-icon-button"
);
this.disable.pipe(takeUntil(this.unsubscribe)).subscribe((disabled) => {
this.disabled = disabled;
});
this.cssClass
.pipe(takeUntil(this.unsubscribe))
.subscribe((customCssClass) => {
this.customCssClass = customCssClass;
});
this.hide
.asObservable()
.pipe(takeUntil(this.unsubscribe))
.subscribe((value) => {
this.isVisible = !value;
});
}
buttonClick(event: Event) {
this.fireEvent.next(event);
}
ngOnDestroy() {
this.unsubscribe.destroy();
}
}
<button
mat-icon-button
[disabled]="disabled"
color="primary"
matTooltip="{{ tooltip | translate }}"
(click)="buttonClick($event)"
class="{{ customCssClass }}"
[disableRipple]="disableRipple"
[class.--disableActiveRipple]="disableRipple"
*ngIf="isVisible"
>
<mat-icon>{{ icon }}</mat-icon>
</button>