@WidgetComponent

nm-event-icon-button

File

src/app/shared/widgets/buttons/eventiconbutton/eventiconbutton.component.ts

Description

Used in iPIM Buy. No Widgetframe.

Button of type mat-icon-button with icon refresh

Implements

OnDestroy

Metadata

selector nm-event-icon-button
styleUrls eventiconbutton.component.scss
templateUrl ./eventiconbutton.component.html

Index

Widget inputs
Widget outputs
Properties
Methods

Constructor

constructor()

Methods

buttonClick
buttonClick(event: Event)
Parameters :
Name Type Optional
event Event no
Returns : void
Protected configureWidget
configureWidget(configuration: WidgetConfig)
Decorators : WidgetConfigure
Parameters :
Name Type Optional
configuration WidgetConfig no
Returns : void
ngOnDestroy
ngOnDestroy()
Returns : void

Properties

Public configuration
configuration: WidgetConfig
Type : WidgetConfig
Decorators : WidgetConfiguration
Public cssClass
cssClass:
Default value : new Subject<any>()
Decorators : WidgetInput
Public customCssClass
customCssClass: string
Type : string
Private disable
disable: Subject<boolean>
Type : Subject<boolean>
Default value : new Subject<boolean>()
Decorators : WidgetInput
Public disabled
disabled: boolean
Type : boolean
Default value : false
Public disableRipple
disableRipple: boolean
Type : boolean
Private fireEvent
fireEvent:
Default value : new Subject<Event>()
Decorators : WidgetOutput
Public hide
hide: Subject<boolean>
Type : Subject<boolean>
Default value : new Subject<boolean>()
Decorators : WidgetInput
Public icon
icon: string
Type : string
Public isVisible
isVisible: boolean
Type : boolean
Default value : true
Public tooltip
tooltip: string
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>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""