@WidgetComponent

nm-edit-input

File

src/app/shared/widgets/edit-input/edit-input.component.ts

Implements

OnDestroy

Metadata

selector nm-edit-input
styleUrls edit-input.component.scss
templateUrl ./edit-input.component.html

Index

Widget inputs
Widget outputs
Properties
Methods

Constructor

constructor(_widgetframeService: WidgetframeService, dialog: MatDialog, localStorageService: LocalStorageService, translateService: TranslateService)
Parameters :
Name Type Optional
_widgetframeService WidgetframeService no
dialog MatDialog no
localStorageService LocalStorageService no
translateService TranslateService no

Methods

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

Properties

Public _id
_id:
Decorators : WidgetId
Public configuration
configuration: WidgetConfig
Type : WidgetConfig
Decorators : WidgetConfiguration
Public dialog
dialog: MatDialog
Type : MatDialog
Public localStorageEntry
localStorageEntry: LocalStorageEntry
Type : LocalStorageEntry
Public localStorageKey
localStorageKey: string
Type : string
Public options
options: any[]
Type : any[]
Default value : []
Public payload
payload:
Default value : new Subject<any>()
Decorators : WidgetInput
Public placeholder
placeholder: string
Type : string
Public reset
reset:
Default value : new Subject<any>()
Decorators : WidgetInput
Public selectedValue
selectedValue:
Default value : new ReplaySubject<any>(1)
Decorators : WidgetOutput
Public selection
selection: string
Type : string
Public shouldLabelFloat
shouldLabelFloat:
Default value : false
Public translateService
translateService: TranslateService
Type : TranslateService
Public trigger
trigger:
Default value : new Subject<any>()
Decorators : WidgetOutput
import { Component, OnDestroy } from "@angular/core";
import { Subject, ReplaySubject } from "rxjs";
import { WidgetframeService } from "../widgetframe/widgetframe.service";
import { WidgetConfig } from "../widget.configuration";
import {
  WidgetComponent,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetId,
  WidgetInput,
  WidgetOutput,
} from "../widget.metadata";
import { MatDialog } from "@angular/material/dialog";
import { TranslateService } from "@ngx-translate/core";
import {
  DeletionMode,
  Scope,
} from "../../components/local-storage/local-storage-constants";
import {
  LocalStorageEntry,
  LocalStorageService,
} from "../../components/local-storage/local-storage.service";

@WidgetComponent("nm-edit-input")
@Component({
  selector: "nm-edit-input",
  templateUrl: "./edit-input.component.html",
  styleUrls: ["./edit-input.component.scss"],
})
export class EditInputWidgetComponent implements OnDestroy {
  @WidgetId()
  public _id;

  @WidgetConfiguration()
  public configuration: WidgetConfig;

  @WidgetOutput()
  public selectedValue = new ReplaySubject<any>(1);

  @WidgetInput()
  public payload = new Subject<any>();

  @WidgetInput()
  public reset = new Subject<any>();

  @WidgetOutput()
  public trigger = new Subject<any>();

  public selection: string;
  public placeholder: string;
  public shouldLabelFloat = false;
  public localStorageKey: string;
  public localStorageEntry: LocalStorageEntry;
  public options: any[] = [];
  constructor(
    private _widgetframeService: WidgetframeService,
    public dialog: MatDialog,
    private localStorageService: LocalStorageService,
    public translateService: TranslateService
  ) {}

  onChange() {
    this.localStorageEntry.value = this.selection;
    this.selectedValue.next(this.selection);
  }

  keyDownFunction(event) {
    if (event.keyCode == 13 && !!this.selection) {
      this.trigger.next(new Date());
    }
  }

  @WidgetConfigure()
  protected configureWidget(configuration: WidgetConfig) {
    let title = configuration.configuration["title"];
    this.placeholder = configuration.configuration["placeholder"];
    this.shouldLabelFloat = configuration.configuration["shouldLabelFloat"];
    this.localStorageEntry = this.localStorageService.getLocalStorageEntry(
      configuration.configuration["local-storage-key"],
      Scope.GLOBAL,
      DeletionMode.LOGIN
    );
    if (this.localStorageEntry.exists()) {
      this.selection = this.localStorageEntry.value;
    }
    this.selectedValue.next(this.selection);

    this.reset.asObservable().subscribe((reset) => {
      this.localStorageEntry.clear();
      this.selection = "";
      this.selectedValue.next(this.selection);
    });
  }

  ngOnDestroy() {
    //this.unsubscribe.destroy();
  }
}
<div class="nm-select">
  <mat-form-field>
    <input
      matInput
      [(ngModel)]="selection"
      (input)="onChange()"
      (keydown)="keyDownFunction($event)"
      [placeholder]="placeholder | translate"
      [name]="configuration.configuration['name']"
      [id]="configuration.configuration['name']"
    />
  </mat-form-field>
</div>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""