<ng-container [ngSwitch]="valueType">
    <ng-container *ngSwitchCase="'STRING'">
        <div *ngIf="editModeON; else stringReadMode"
             class="cell-content-wrapper" [class.from-propositions-only]="fromPropositionsOnly">
            <value-validator
                    *ngIf="isIncompliant"
                    [isRequired]="required"
                    [value]="currentValue"
                    [maskValidation]="maskValidation"
                    [validationErrors]="validationErrors"
            >
            </value-validator>

            <div *ngIf="prefixTemplate" class="prefix-wrapper">
                <ng-template [ngTemplateOutlet]="prefixTemplate"></ng-template>
            </div>

            <div class="value-wrapper overflow-ellipsis">
                <ng-container *ngIf="!readonlyInput; else readonlyString">
                    <input *ngIf="maskConfig; else noMask" #valueInputField
                           [sdiInputMask]="maskConfig"
                           [(ngModel)]="newValue"
                           type="{{stringInputType}}"
                           title="{{newValue}}" class="value-input" placeholder="{{placeholder}}"
                           autocomplete="{{autocomplete}}"
                           [ngStyle]="inputStyle"
                           (focus)="onValueFocused()" (blur)="onValueBlurred()"
                           (input)="onInput()" (dblclick)="onInputDoubleClick()"
                           (paste)="onPasted($event)"
                           (keydown)="onInputKeyDown($event)" (keyup.enter)="onChangeValue()"
                           (keyup.escape)="restoreCurrentValue()">
                    <ng-template #noMask>
                        <highlighted-input *ngIf="allowWrap; else plainInputRef" #valueInputField
                                           [allowWrap]="allowWrap"
                                           [highlight]="false"
                                           [(text)]="newValue"
                                           [placeholder]="placeholder"
                                           (hlFocus)="onValueFocused()" (hlBlur)="onValueBlurred()"
                                           (hlInput)="showPropositions()" (hlDblClick)="onInputDoubleClick()"
                                           (hlPaste)="onPasted($event)"
                                           (hlKeyDown)="onInputKeyDown($event)" (hlEnterKeyUp)="onChangeValue()"
                                           (hlEscapeKeyUp)="restoreCurrentValue()">
                        </highlighted-input>

                        <ng-template #plainInputRef>
                            <input #valueInputField
                                   type="{{stringInputType}}"
                                   [(ngModel)]="newValue"
                                   title="{{newValue}}" class="value-input" placeholder="{{placeholder}}"
                                   autocomplete="{{autocomplete}}"
                                   [ngStyle]="inputStyle"
                                   (focus)="onValueFocused()" (blur)="onValueBlurred()"
                                   (input)="onInput()" (dblclick)="onInputDoubleClick()"
                                   (paste)="onPasted($event)"
                                   (keydown)="onInputKeyDown($event)" (keyup.enter)="onChangeValue()"
                                   (keyup.escape)="restoreCurrentValue()">
                        </ng-template>
                    </ng-template>
                </ng-container>

                <ng-template #readonlyString>
                    <div #valueInputField tabindex="0"
                         class="readonly-string overflow-ellipsis" [class.allow-wrap]="allowWrap"
                         [sdi-inner-html]="newValue" title="{{newValue}}"
                         (click)="onReadOnlyStringClick()"
                         (focus)="onValueFocused()" (blur)="onValueBlurred()">
                    </div>
                </ng-template>
            </div>

            <div *ngIf="editModeON" class="cell-tools">
                <i *ngIf="getPropositionsFn" class="fa fa-fw fa-caret-down sdi-icon fade-in" (click)="onPropositionsToggleClick()"></i>
                <ng-container *ngFor="let toolBtn of toolButtons">
                    <ng-container *ngIf="!toolBtn.isDisabledFn(newValue, owner)">
                        <i class="sdi-icon" [ngClass]="toolBtn.faClass" title="{{toolBtn.title}}"
                           (click)="toolBtn.executeCommand($event, owner, newValue)">
                        </i>

                        <span *ngIf="toolBtn.count != null" class="sdi-inline-count">
                            {{toolBtn.count}}
                        </span>
                    </ng-container>
                </ng-container>
            </div>
        </div>
        <ng-template #stringReadMode>
            <div class="overflow-ellipsis v-align-center">
                <value-validator
                        *ngIf="isIncompliant"
                        [isRequired]="required"
                        [value]="currentValue"
                        [maskValidation]="maskValidation"
                        [validationErrors]="validationErrors"
                >
                </value-validator>

                <ng-template *ngIf="prefixTemplate" [ngTemplateOutlet]="prefixTemplate"></ng-template>

                <!-- unable to use input tag due to necessity to support innerHTML -->
                <span *ngIf="currentValue; else valuePlaceholder"
                      [sdi-inner-html]="currentValue"
                      [class.allow-wrap]="allowWrap">
                </span>

                <ng-template #valuePlaceholder>
                    <span *ngIf="showPlaceholderInReadMode" class="placeholder">{{placeholder}}</span>
                </ng-template>
            </div>
        </ng-template>
    </ng-container>


    <label *ngSwitchCase="'BOOL'" class="sdi-checkbox">
        <input *ngIf="editModeON; else boolReadMode" type="checkbox" [(ngModel)]="newValue"
               (change)="changeValueIfNeeded()"
               (focus)="onValueFocused()" (blur)="onValueBlurred(true)">
        <ng-template #boolReadMode>
            <input type="checkbox" [ngModel]="currentValue" disabled>
        </ng-template>
    </label>


    <ng-container *ngSwitchCase="'TEXT'">
        <textarea *ngIf="editModeON; else textReadMode" [(ngModel)]="newValue" class="text-value"
                  (paste)="onPasted($event)"
                  (focus)="onValueFocused()" (blur)="onValueBlurred()" (keyup.escape)="restoreCurrentValue()">
        </textarea>
        <ng-template #textReadMode>
            <textarea [ngModel]="currentValue" class="text-value" readonly tabindex="-1"
                      (focus)="onValueFocused()" (blur)="onValueBlurred(true)">
            </textarea>
        </ng-template>
    </ng-container>


    <image-value *ngSwitchCase="'IMAGE'"
                 [editModeON]="editModeON"
                 [imageData]="currentValue"
                 [editImageFn]="changeValueFn">
    </image-value>


    <div *ngSwitchCase="'DATETIME'" class="cell-content-wrapper">
        <p-calendar #calendarRef class="sdi-calendar" panelStyleClass="sdi-calendar"
                    [(ngModel)]="newValue"
                    [placeholder]="placeholder"
                    dateFormat="{{dateFormat}}"
                    [locale]="calLocale"
                    [appendTo]="'body'"
                    [monthNavigator]="true"
                    [showTime]="false"
                    [readonlyInput]="true"
                    [disabled]="!editModeON"
                    [yearNavigator]="true" [yearRange]="yearRange"
                    (onFocus)="onValueFocused()"
                    (onBlur)="onValueBlurred(true)"
                    (onSelect)="changeValueIfNeeded()">
        </p-calendar>
        <div *ngIf="editModeON" class="cell-tools">
            <i #valueInputField *ngIf="getPropositionsFn" class="fa fa-caret-down sdi-icon fade-in" tabindex="-1"
               (blur)="onValueBlurred(true)" (click)="onPropositionsToggleClick()">
            </i>
            <i class="fa fa-calendar sdi-icon" (click)="calendarRef.onInputClick()"></i>
            <i *ngIf="newValue" class="fa fa-times sdi-icon" i18n-title="@@deleteTitle" title="Удалить"
               (click)="onDeleteValueClick()">
            </i>
        </div>
    </div>


    <span *ngSwitchDefault>
        unknown attribute type
    </span>
</ng-container>


<!-- Propositions -->
<value-propositions *ngIf="getPropositionsFn"
                    [getPropositionsFn]="getPropositionsFn"
                    [hasPropositions]="hasPropositions"
                    [debounceTimeInMs]="debounceTimeInMs"
                    [reloadOnShow]="reloadOnShow"
                    [highlightOnly]="highlightOnly"
                    [propositionTemplate]="propositionTemplate"
                    [owner]="owner"
                    [fixTo]="fixPropositionsTo"
                    [fixToOffsetV]="fixToOffsetV"
                    [fixToOffsetH]="fixToOffsetH"
                    (propositionSelected)="onPropositionSelected($event)"
                    (propositionsWrapperMouseUp)="focusValueInput()"
                    (propositionsClosed)="propositionsClosed.emit()">
</value-propositions>