src/app/shared/text-block/components/text-replacement/text-replacement.component.html

<!-------------------------------------------------------------------------------
 * Copyright (c) 2020 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0
 *
 * SPDX-License-Identifier: EPL-2.0
 -------------------------------------------------------------------------------->

  <div #editBox (click)="onClick()" *ngIf="!appEditable && appType !== 'select'"
       [class.editable-text---disabled]="appDisabled"
       class="editable-text"><!--
  -->{{appValue != null && appValue !== "" ? (appType !== "select" ? appValue : appOptions[appValue]) : appPlaceholder}}
    <mat-icon *ngIf="appType === 'input'" class="editable-text--icon">edit</mat-icon>
    <mat-icon *ngIf="appType === 'select'" class="editable-text--icon">arrow_drop_down</mat-icon>
    <mat-icon *ngIf="appType === 'date'" class="editable-text--icon">today</mat-icon><!--
--></div>


<span *ngIf="appType === 'input'" [class.hidden]="!appEditable"
      class="input-field">

  <span class="input-field--placeholder openk-textarea">
    {{appValue}}
  </span>

  <input #inputElement
         (focusout)="onFocusOut()"
         (input)="inputValue(inputElement.value)"
         (keydown.enter)="onFocusOut();"
         [disabled]="appDisabled"
         class="openk-textarea input-field--control"
         value="{{appValue}}"/>
</span>


<div *ngIf="appType === 'date'"
     [class.hidden]="!appEditable"
     class="date-field">
  <app-date-control #dateElement
                    (appValueSet)="onFocusOut(); appValueChange.emit($event);"
                    [appDisabled]="appDisabled"
                    [appDisplayFormat]="'DD.MM.YYYY'"
                    [appInternalFormat]="'DD.MM.YYYY'"
                    [appSmall]="true"
                    [appValue]="appValue">
  </app-date-control>
</div>

  <div *ngIf="appType === 'select'" class="select">
    <app-select #selectElement
                (appClose)="onFocusOut()"
                (appValueChange)="appValueChange.emit($event)"
                *ngIf="appType === 'select'"
                [appDisabled]="appDisabled"
                [appOptions]="appOptions | stringsToOptions"
                [appPlaceholder]="appPlaceholder"
                [appSmall]="true"
                [appValue]="appValue"
                [appMaxWidth]="'33em'"
                class="select">
    </app-select>
  </div>