File

src/app/shared/alert/alert.component.ts

Implements

OnChanges

Metadata

encapsulation ViewEncapsulation.None
selector alert
styleUrls alert.css
templateUrl alert.component.html

Index

Properties
Methods
Inputs
Accessors

Constructor

constructor(cts: CustomtextService)
Parameters :
Name Type Optional
cts CustomtextService No

Inputs

customtext
Type : string
level
Type : "error" | "warning" | "info" | "success"
replacements
Type : string[]
text
Type : string

Methods

getCustomtext
getCustomtext()
Returns : Observable<string>
ngOnChanges
ngOnChanges(changes: SimpleChanges)
Parameters :
Name Type Optional
changes SimpleChanges No
Returns : void
Private subscribeCustomText
subscribeCustomText()
Returns : void
Private unsubscribeCustomText
unsubscribeCustomText()
Returns : void

Properties

Private _displayText$
Type : Subject<string>
Private customTextSubscription
Type : Subscription
Private highlightTicks
Default value : () => {...}
icons
Type : object
Default value : { error: 'error', warning: 'warning', info: 'info', success: 'check_circle' }

Accessors

displayText$
getdisplayText$()
import {
  Component, Input, OnChanges, SimpleChanges, ViewEncapsulation
} from '@angular/core';
import { CustomtextPipe, CustomtextService } from 'iqb-components';
import {
  Observable, ReplaySubject, Subject, Subscription
} from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'alert',
  templateUrl: 'alert.component.html',
  styleUrls: ['alert.css'],
  encapsulation: ViewEncapsulation.None
})
export class AlertComponent implements OnChanges {
  @Input() text: string;
  @Input() customtext: string;
  @Input() replacements: string[];
  @Input() level: 'error' | 'warning' | 'info' | 'success';

  icons = {
    error: 'error',
    warning: 'warning',
    info: 'info',
    success: 'check_circle'
  };

  get displayText$(): Observable<string> {
    return this._displayText$
      .pipe(
        map(text => this.highlightTicks(text || ''))
      );
  }

  private _displayText$: Subject<string>;
  private customTextSubscription: Subscription;

  constructor(
    private cts: CustomtextService
  ) {
    this._displayText$ = new ReplaySubject<string>();
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (!this.customtext) {
      this.unsubscribeCustomText();
      if (changes.text) {
        this._displayText$.next(this.text);
      }
    } else if (changes.customtext || changes.replacements) {
      this.unsubscribeCustomText();
      this.subscribeCustomText();
    }
  }

  private subscribeCustomText(): void {
    this.customTextSubscription = this.getCustomtext()
      .subscribe(text => this._displayText$.next(text));
  }

  private unsubscribeCustomText(): void {
    if (this.customTextSubscription) {
      this.customTextSubscription.unsubscribe();
      this.customTextSubscription = null;
    }
  }

  getCustomtext(): Observable<string> {
    return new CustomtextPipe(this.cts)
      .transform(this.text, this.customtext, ...(this.replacements || []));
  }

  private highlightTicks = (text: string): string => text.replace(
    /\u0060([^\u0060]+)\u0060/g,
    (match, match2) => `<span class='highlight'>${match2}</span>`
  );
}
<div class="alert">
  <div class="vertical-align-middle">
    <mat-icon class="alert-{{level}}">{{icons[level]}}</mat-icon>
      <span [innerHTML]="displayText$ | async"></span>
  </div>
</div>


alert.css

.alert {
    margin-bottom: 2px;
}

.vertical-align-middle {
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
}

.alert-error {
    color: #821324;
}

.alert-warning {
    color: goldenrod;
}

.alert-info {
    color: blue;
}

.alert-success {
    color: green;
}

.highlight {
    color: #003333;
    font-style: italic;
}

mat-icon {
    margin-right: 0.2em
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""