@WidgetComponent

list-cell-state-indicator

File

src/app/shared/widgets/imarket/list-cell-state-indicator/list-cell-state-indicator-widget.component.ts

Implements

CellWidget

Metadata

selector list-cell-state-indicator
styleUrls list-cell-state-indicator-widget.component.scss
templateUrl ./list-cell-state-indicator-widget.component.html

Index

Widget inputs
Widget outputs
Properties
Methods

Methods

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

Properties

Public row
row: any
Type : any
Public value
value: any
Type : any
Public verticalStateIndicator
verticalStateIndicator: boolean
Type : boolean
import { ChangeDetectionStrategy, Component } from "@angular/core";
import { WidgetComponent, WidgetConfigure } from "../../widget.metadata";
import { WidgetConfig, getOrDefault } from "../../widget.configuration";
import { CellWidget } from "../../../components/list-cell";
import { BaseConfiguration } from "../../widgetframe/widgetframe.component";

export interface ListCellStateIndicatorConfiguration extends BaseConfiguration {
  /**
   * Show the indicator color as a vertical line with the tooltip as a description next to it
   */
  verticalStateIndicator?: boolean;
}
@WidgetComponent("list-cell-state-indicator")
@Component({
  selector: "list-cell-state-indicator",
  templateUrl: "./list-cell-state-indicator-widget.component.html",
  styleUrls: ["./list-cell-state-indicator-widget.component.scss"],
})
export class ListCellStateIndicatorWidgetComponent implements CellWidget {
  public row: any;
  public value: any;
  public verticalStateIndicator: boolean;

  @WidgetConfigure()
  protected configureWidget(
    configuration: WidgetConfig<ListCellStateIndicatorConfiguration>
  ) {
    this.verticalStateIndicator = getOrDefault(
      configuration.configuration.verticalStateIndicator,
      false
    );
  }
}
<div
  class="vertical-status-indicator"
  *ngIf="verticalStateIndicator; else trafficLightStateIndicator"
>
  <div class="vertical-status-indicator__color {{ '--' + value?.color }}"></div>
  <nm-ellipsis
    class="vertical-status-indicator__value"
    [content]="value?.value | translate"
  ></nm-ellipsis>
</div>
<ng-template #trafficLightStateIndicator>
  <div *ngIf="value?.color != 'empty'">
    <nm-trafficlight [status]="value"></nm-trafficlight>
  </div>
</ng-template>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""