<ng-template [ngIf]="formControlRef.disabled">
    <ng-template [ngIf]="!isPlainText()">
        <mat-form-field [appearance]="dataField.materialAppearance" class="full-width" color="primary">
            <mat-label *ngIf="!showLargeLayout.value">{{dataField.title}}</mat-label>
            <input matInput
                   [disabled]="true"
                   [ngModel]="!!currentValue[selectedLanguage] && currentValue[selectedLanguage] !== ''
                                ? currentValue[selectedLanguage] : currentValue[getDefaultLanguageCode()]"
                   [placeholder]="dataField.placeholder ? dataField.placeholder : ''"
                   [required]="dataField.behavior.required">
            <mat-hint>{{dataField.description}}</mat-hint>
        </mat-form-field>
    </ng-template>
    <ng-template [ngIf]="isPlainText()">
        <div class="full-width"
             [ngStyle]="textPropertyEnabled('fontSize') && {'font-size': getTextFontSize()}">
            <span [ngStyle]="textPropertyEnabled('textColor') && {'color': getTextColor()}"
                  [ngClass]="{'i18n-bold-text': isBoldText()}">
                {{!!currentValue[selectedLanguage] && currentValue[selectedLanguage] !== ''
                    ? currentValue[selectedLanguage] : currentValue[getDefaultLanguageCode()]}}
            </span>
        </div>
    </ng-template>
</ng-template>
<ng-template [ngIf]="!formControlRef.disabled">
    <div class="full-width">
        <div #i18nLabel class="i18n-label" [ngClass]="{'invalid-form-label': dataField.isInvalid(formControlRef)}">
            {{dataField.title}}
            <nc-required-label *ngIf="dataField.behavior.required" [isIn]="!dataField.disabled"></nc-required-label>
        </div>
        <div class="form-input-interfield button-icon-input full-width" fxLayout="row" fxLayoutAlign="start center"
             [ngClass]="{'invalid-form-input': dataField.isInvalid(formControlRef), 'form-input-disabled': formControlRef.disabled}"
             [ngStyle]="{
                    '-webkit-clip-path': getCutProperty(i18nLabel),
                    'clip-path': getCutProperty(i18nLabel)
            }">
            <button mat-icon-button color="accent" [matTooltip]="'dataField.i18n.languageSelect' | translate"
                    class="language-selector-button" (click)="languageDropdown.open()">
                <div class="language-svg-wrapper"
                     [innerHTML]="getLanguageIcons()[this.selectedLanguage].svgIcon"></div>
            </button>
            <mat-select #languageDropdown class="language-select">
                <mat-option *ngFor="let languageKey of languageKeys"
                            [value]="languageKey" (click)="selectLanguage(languageKey)">
                    <div fxLayout="row" fxLayoutAlign=" center">
                        <div [innerHTML]="getLanguageIcons()[languageKey].svgIcon" class="language-option-icon"></div>
                        <span class="language-option-value">{{getLanguageIcons()[languageKey].languageName}}</span>
                    </div>
                </mat-option>
            </mat-select>
            <input class="selected-language-value"
                   type="text"
                   [placeholder]="dataField.placeholder ? dataField.placeholder : ''"
                   [required]="dataField.behavior.required"
                   [(ngModel)]="currentValue[selectedLanguage]"
                   (blur)="setSelectedValue()">
            <button mat-icon-button (click)="toggleFilled()"
                    [matTooltip]="(filledShown ? 'dataField.i18n.hideTranslations' : 'dataField.i18n.showTranslations') | translate">
                <mat-icon color="warn">{{filledShown ? 'arrow_drop_up' : 'arrow_drop_down'}}</mat-icon>
            </button>
        </div>

        <div fxLayout="column" class="filled-languages-wrapper"
             [@languageWrapper]="filledShown"
             (@languageWrapper.start)="$event.element.style.display = 'block'"
             (@languageWrapper.done)="$event.element.style.display = ($event.toState ? 'block' : 'none')">
            <div *ngFor="let filledKey of filledKeys" fxLayout="row" fxLayoutAlign=" center"
                 class="filled-language-row">
                <div class="filled-language-icon" [innerHTML]="getLanguageIcons()[filledKey].svgIcon"></div>
                <span class="filled-language-value">{{currentValue[filledKey]}}</span>
                <button class="filled-language-button" *ngIf="!isDefaultValue(filledKey)" mat-icon-button
                        (click)="removeTranslation(filledKey)"
                        [matTooltip]="'dataField.i18n.deleteTranslation' | translate">
                    <mat-icon color="warn">close</mat-icon>
                </button>
            </div>
        </div>
        <mat-hint class="i18n-hint-error" [ngClass]="{'mat-hint-disabled': formControlRef.disabled}"
                  *ngIf="!dataField.isInvalid(formControlRef) && hasHint()">{{dataField.description}}</mat-hint>
        <mat-error class="i18n-hint-error" *ngIf="dataField.isInvalid(formControlRef)">{{getErrorMessage()}}</mat-error>
    </div>
</ng-template>

./i18n-text-field.component.scss

.full-width {
    display: block;
    margin: 0 auto;
    width: 100%;
}

.selected-language-value {
    outline: none;
    padding: 9px 0;
    width: calc(100% - 56px);
    font-size: 14px;
    border: 0;
    margin-left: 8px;
    color: #64748B;
    background: transparent;
}

.selected-language-value:disabled {
    color: #94A3B8;
}

.form-input-interfield {
    background: #FFFFFF;
    color: #64748B;
    outline: none;
    border: 1px solid #64748B;
    text-align: left;
    font-size: 14px;
    line-height: 15.75px;
    border-radius: 6px;
    min-width: 5px;
    box-sizing: border-box;
    height: 44px;
}

.form-input-interfield:hover {
    border: solid 2px #64748B;
}

.button-icon-input {
    padding: 2px;
}

.button-icon-input:hover {
    padding: 1px !important;
}

.i18n-hint-error {
    padding: 0 1em;
    font-size: 75%;
    width: auto !important;
}

.language-svg-wrapper {
    height: 20px;
    line-height: normal;
}

.language-selector-button {
    width: auto;
    margin-left: 8px;
    margin-right: 4px;
}

.language-selector-wrapper {
    margin: 0 8px;
}

.language-svg-icon {
    border: solid 1px #64748B;
}

.filled-language-row {
    min-height: 28px;
    padding: 4px 0;
    background-color: #FFFFFF;
}

.filled-language-row:not(:last-child) {
    border-bottom: 1px solid #64748B;
}

.filled-language-row:last-child {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.filled-languages-wrapper {
    border-radius: 0 0 6px 6px;
    border-left: 1px solid #64748B;
    border-right: 1px solid #64748B;
    border-bottom: 1px solid #64748B;
    margin-top: -5px;
    padding-top: 5px;
    transform-origin: top;
}

.filled-language-icon {
    margin: 0 10px;
    height: 20px;
}

.filled-language-value {
    margin-left: 20px;
}

.filled-language-button {
    margin-left: auto;
    height: 24px;
    width: 24px;
    line-height: normal;
    margin-right: 10px;
}

.language-select {
    width: 18px !important;
}

.language-option-icon {
    margin-left: 0;
}

.language-option-value {
    margin-left: 16px;
}

.i18n-label {
    transform: translate(0.4em,-0.4em) scale(.75);
    transform-origin: left;
    color: #64748B;
    background: transparent;
    width: fit-content;
    padding: 0 0.5em;
    z-index: 5;
    height: 0;
    position: relative;
    top: -1px;
}

.form-input-disabled {
    background: transparent !important;
    border-color: #CBD5E1 !important;
}

.form-input-disabled:hover {
    border-width: 1px;
}

.i18n-bold-text {
    font-weight: bold;
}