@WidgetComponent

nm-radiobutton-widget

File

src/app/shared/widgets/imarket/radiobutton/radiobuttonwidget.component.ts

Implements

OnInit OnDestroy

Metadata

selector nm-radiobutton-widget
styleUrls radiobuttonwidget.component.scss
templateUrl ./radiobuttonwidget.component.html

Index

Widget inputs
Widget outputs
Properties
Methods

Constructor

constructor(_widgetFrameService: WidgetframeService, localStorageService: LocalStorageService)
Parameters :
Name Type Optional
_widgetFrameService WidgetframeService no
localStorageService LocalStorageService no

Methods

Protected configureWidget
configureWidget(configuration: WidgetConfig)
Decorators : WidgetConfigure
Parameters :
Name Type Optional
configuration WidgetConfig<RadiobuttonConfiguration> no
Returns : void
emitInitialValue
emitInitialValue()
Returns : void
ngOnDestroy
ngOnDestroy()
Returns : void
ngOnInit
ngOnInit()
Returns : void
radioButtonChange
radioButtonChange(event: MatRadioChange)
Parameters :
Name Type Optional
event MatRadioChange no
Returns : void

Properties

Public _id
_id:
Decorators : WidgetId
Public buttonValue
buttonValue: null
Type : null
Default value : null
Public configuration
configuration: WidgetConfig<RadiobuttonConfiguration>
Type : WidgetConfig<RadiobuttonConfiguration>
Decorators : WidgetConfiguration
Public cssClass
cssClass: string
Type : string
Default value : ""
Public defaultSelection
defaultSelection: null
Type : null
Default value : null
Private hideButtons
hideButtons: ReplaySubject<boolean>
Type : ReplaySubject<boolean>
Default value : new ReplaySubject<boolean>(1)
Decorators : WidgetInput

Hide radio buttons from view

Public hideGroup
hideGroup: boolean
Type : boolean
Default value : false
Public isMandatory
isMandatory: Boolean
Type : Boolean
Default value : false
Public label
label: string
Type : string
Default value : ""
Public options
options: any
Type : any
Private radiobuttonLabel
radiobuttonLabel: Subject<string>
Type : Subject<string>
Default value : new Subject<string>()
Decorators : WidgetInput

Change radio button label

Private resetButtons
resetButtons: ReplaySubject<any>
Type : ReplaySubject<any>
Default value : new ReplaySubject<any>(1)
Decorators : WidgetInput

Clear radio buttons selection or reset to default if there is a default selection

Public selectedValue
selectedValue:
Default value : new ReplaySubject<any>(1)
Decorators : WidgetOutput

Selected option

Private selectionEntry
selectionEntry: LocalStorageEntry
Type : LocalStorageEntry
Public showLabel
showLabel: boolean
Type : boolean
Default value : true
Private unsubscribe
unsubscribe:
Default value : NgUnsubscribe.create()
uri
uri: ReplaySubject<any>
Type : ReplaySubject<any>
Default value : new ReplaySubject<any>(1)
Decorators : WidgetInput

Set the input uri to fetch the radio buttons options from

Accessors

radioOptions
setradioOptions(configuration: )
Parameters :
Name Optional
configuration no
Returns : void
import {
  Component,
  OnDestroy,
  OnInit,
  Input,
  Output,
  EventEmitter,
} from "@angular/core";
import { WidgetConfig } from "../../widget.configuration";
import {
  WidgetComponent,
  WidgetId,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetInput,
  WidgetOutput,
} from "../../widget.metadata";
import { NgUnsubscribe } from "../../../ng-unsubscribe";
import { MatRadioChange } from "@angular/material/radio";
import { takeUntil, flatMap } from "rxjs/operators";
import { WidgetframeService } from "../../widgetframe/widgetframe.service";
import { Subject, ReplaySubject } from "rxjs";
import {
  LocalStorageEntry,
  LocalStorageService,
} from "../../../components/local-storage/local-storage.service";
import {
  DeletionMode,
  Scope,
} from "../../../components/local-storage/local-storage-constants";

export interface RadiobuttonConfiguration {
  /**
   *  Available options to be displayed as radio buttons
   */
  options: any[];

  /**
   * A localized property key that used in fetching the suitable label text based on ui locale
   */
  label: string;

  /**
   * Show or hide the label of radio buttons. @default(true)
   */
  showLabel?: boolean;

  /**
   * Css class that should be applied for radio buttons
   */
  cssClass: string;

  /**
   *  A storage key to keep the selected option value
   */
  "local-storage-key": string;

  /**
   * A default selected value
   */
  defaultSelection: string;

  /**
   * This value is used to make radio button selection is mandatory or not. @default(false)
   */
  isMandatory: boolean;
}

@WidgetComponent("nm-radiobutton-widget")
@Component({
  selector: "nm-radiobutton-widget",
  templateUrl: "./radiobuttonwidget.component.html",
  styleUrls: ["./radiobuttonwidget.component.scss"],
})
export class RadiobuttonWidgetComponent implements OnInit, OnDestroy {
  /** Selected option*/
  @WidgetOutput("selectedValue")
  public selectedValue = new ReplaySubject<any>(1);

  /**
   * Set the input uri to fetch the radio buttons options from
   */
  @WidgetInput("uri") uri: ReplaySubject<any> = new ReplaySubject<any>(1);

  /**
   * Hide radio buttons from view
   */
  @WidgetInput("hideButtons")
  private hideButtons: ReplaySubject<boolean> = new ReplaySubject<boolean>(1);

  /**
   * Clear radio buttons selection or reset to default if there is a default selection
   */
  @WidgetInput("reset")
  private resetButtons: ReplaySubject<any> = new ReplaySubject<any>(1);

  /**
   *  Change radio button label
   */
  @WidgetInput("radiobuttonLabel")
  private radiobuttonLabel: Subject<string> = new Subject<string>();

  @Input("radioOptions")
  public set radioOptions(configuration) {
    this.configureWidget(configuration);
  }

  @Output("selectedItem")
  public selectedItem = new EventEmitter<any>();

  @WidgetConfiguration()
  public configuration: WidgetConfig<RadiobuttonConfiguration>;

  @WidgetId()
  public _id;

  //Atlernative options from configuration
  public options: any;

  public label: string = "";
  public showLabel: boolean = true;
  public cssClass: string = "";
  public buttonValue = null;
  public hideGroup: boolean = false;
  public defaultSelection = null;
  private selectionEntry: LocalStorageEntry;
  public isMandatory: Boolean = false;

  private unsubscribe = NgUnsubscribe.create();

  @WidgetConfigure()
  protected configureWidget(
    configuration: WidgetConfig<RadiobuttonConfiguration>
  ) {
    this.options = configuration.configuration["options"];
    this.label = configuration.configuration["label"];
    this.showLabel =
      configuration.configuration["showLabel"] !== undefined
        ? configuration.configuration["showLabel"]
        : this.showLabel;
    this.cssClass = configuration.configuration["cssClass"];
    if (configuration.configuration["local-storage-key"]) {
      this.selectionEntry = this.localStorageService.getLocalStorageEntry(
        configuration.configuration["local-storage-key"],
        Scope.GLOBAL,
        DeletionMode.NEVER
      );
    }
    this.defaultSelection = configuration.configuration["defaultSelection"];
    this.isMandatory = configuration.configuration["isMandatory"]
      ? configuration.configuration["isMandatory"]
      : false;
  }

  constructor(
    private _widgetFrameService: WidgetframeService,
    private localStorageService: LocalStorageService
  ) {}

  ngOnInit() {
    if (this.selectionEntry && this.selectionEntry.exists()) {
      this.buttonValue = this.selectionEntry.value;
    } else if (this.defaultSelection) {
      this.buttonValue = this.defaultSelection;
    } else if (this.isMandatory && this.options.length > 0) {
      this.buttonValue = this.options[0];
    }

    this.emitInitialValue();

    this.uri
      .asObservable()
      .pipe(
        takeUntil(this.unsubscribe),
        flatMap((href) => {
          if (href) {
            return this._widgetFrameService.getData(href);
          }
        })
      )
      .subscribe((data: any[]) => {
        if (data) {
          this.options = data;
          if (this.isMandatory && this.options.length > 0) {
            this.buttonValue = this.options[0];
          }
          this.emitInitialValue();
        }
      });

    this.hideButtons
      .asObservable()
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((hideButtons) => {
        this.hideGroup = hideButtons;
      });

    this.resetButtons
      .asObservable()
      .pipe(takeUntil(this.unsubscribe))
      .subscribe(() => {
        if (this.defaultSelection) {
          this.buttonValue = this.defaultSelection;
          this.emitInitialValue();
        } else {
          this.buttonValue = null;
          if (this.selectionEntry) {
            this.selectionEntry.clear();
          }
          this.selectedValue.next(null);
          this.selectedItem.next(null);
        }
      });

    this.radiobuttonLabel
      .asObservable()
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((label) => (this.label = label));
  }

  ngOnDestroy() {
    this.unsubscribe.destroy();
  }

  radioButtonChange(event: MatRadioChange) {
    if (this.selectionEntry) {
      this.selectionEntry.value = this.buttonValue;
    }
    this.selectedValue.next(event.value);
    this.selectedItem.next(event.value);
  }

  emitInitialValue() {
    if (this.options.length > 0 && this.buttonValue) {
      for (let selectedOption of this.options) {
        if (this.buttonValue === selectedOption.value) {
          this.selectionEntry.value = this.buttonValue;
          this.selectedValue.next(selectedOption.value);
          this.selectedItem.next(selectedOption.value);
        }
      }
    }
  }
}
<mat-radio-group
  *ngIf="!hideGroup"
  (change)="radioButtonChange($event)"
  [(ngModel)]="buttonValue"
  ngClass="{{ cssClass }}"
>
  <mat-label class="mat-label" *ngIf="showLabel"
    >{{ label | translate }} :
  </mat-label>
  <mat-radio-button *ngFor="let opt of options" [value]="opt.value">{{
    opt.label | translate
  }}</mat-radio-button>
</mat-radio-group>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""