@WidgetComponent

nm-icontext

File

src/app/shared/widgets/imarket/icontext/icontext.component.ts

Implements

OnDestroy

Metadata

selector nm-icontext
styleUrls icontext.component.scss
templateUrl ./icontext.component.html

Index

Widget inputs
Widget outputs
Properties
Methods

Constructor

constructor()

Methods

Protected configureWidget
configureWidget(configuration: WidgetConfig)
Decorators : WidgetConfigure
Parameters :
Name Type Optional
configuration WidgetConfig<IconTextConfiguration> no
Returns : void
ngOnDestroy
ngOnDestroy()
Returns : void

Properties

Public _id
_id:
Decorators : WidgetId
Public configuration
configuration: WidgetConfig<IconTextConfiguration>
Type : WidgetConfig<IconTextConfiguration>
Decorators : WidgetConfiguration
Public hide
hide: Subject<boolean>
Type : Subject<boolean>
Default value : new Subject<boolean>()
Decorators : WidgetInput

Shows / Hides the widget

Public hideWidget
hideWidget: boolean
Type : boolean
Default value : false
Public icon
icon: string
Type : string
Public svg
svg: boolean
Type : boolean
Public text
text: string
Type : string
Public title
title: string
Type : string
Private unsubscribe
unsubscribe:
Default value : NgUnsubscribe.create()
import { Component, OnDestroy } from "@angular/core";
import {
  WidgetConfig,
  getOrDefault,
} from "../../../../shared/widgets/widget.configuration";
import {
  WidgetComponent,
  WidgetId,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetInput,
} from "../../../../shared/widgets/widget.metadata";
import { Subject } from "rxjs";
import { takeUntil } from "rxjs/operators";
import { NgUnsubscribe } from "../../../ng-unsubscribe";
import { BaseConfiguration } from "../../../widgets/widgetframe/widgetframe.component";

export interface IconTextConfiguration extends BaseConfiguration {
  /**
   * Sets the text displayed next to the icon
   */
  text: string;

  /**
   * Sets the icon name
   */
  icon: string;

  /**
   * Enables the display of svg icons @default(false)
   */
  svg?: boolean;
}

@WidgetComponent("nm-icontext")
@Component({
  selector: "nm-icontext",
  templateUrl: "./icontext.component.html",
  styleUrls: ["./icontext.component.scss"],
})
export class IconTextWidgetComponent implements OnDestroy {
  public title: string;
  public text: string;
  public icon: string;
  public hideWidget: boolean = false;
  public svg: boolean;

  private unsubscribe = NgUnsubscribe.create();

  /**
   * Shows / Hides the widget
   */
  @WidgetInput("hide")
  public hide: Subject<boolean> = new Subject<boolean>();

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

  @WidgetId()
  public _id;

  constructor() {}

  @WidgetConfigure()
  protected configureWidget(
    configuration: WidgetConfig<IconTextConfiguration>
  ) {
    this.title = configuration.configuration.title;
    this.text = configuration.configuration.text;
    this.icon = configuration.configuration.icon;
    this.svg = getOrDefault(configuration.configuration.svg, false);

    this.hide
      .asObservable()
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((hide) => {
        this.hideWidget = hide;
      });
  }

  ngOnDestroy() {
    this.unsubscribe.destroy();
  }
}
<nm-widgetframe
  [header]="configuration.configuration['header']"
  widgetId="{{ _id }}"
  [configuration]="configuration"
  [infoTitle]="configuration.configuration['infoTitle']"
  [infoText]="configuration.configuration['infoText']"
  [infoPlacement]="'bottom'"
  [wikiLink]="configuration.configuration['wikiLink']"
  [visible]="!hideWidget"
  [withBorder]="configuration.configuration.withBorder"
>
  <ng-container slot="title">
    <div class="nm-widgetframe__title">
      {{ title | translate }}
    </div>
  </ng-container>
  <ng-container slot="content">
    <div class="nm-widgetframe__content">
      <div class="icon-text-wrapper">
        <mat-icon
          [svgIcon]="icon"
          color="primary"
          inline="true"
          class="nm-large-icon"
          *ngIf="svg; else noSvg"
        ></mat-icon>
        <ng-template #noSvg>
          <mat-icon color="primary" inline="true" class="nm-large-icon">{{
            icon
          }}</mat-icon>
        </ng-template>
        <div class="icon-text">
          {{ text | translate }}
        </div>
      </div>
    </div>
  </ng-container>
</nm-widgetframe>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""