@pepperi/components/textarea/textarea.component.html

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.1.

<ng-container [formGroup]="form">
    <!-- New code -->
    <ng-template #pepperiTemplate let-isFormView="isFormView">
        <div class="pepperi-textarea-container" [ngClass]="{ 'right-alignment': xAlignment == '2', 'one-row': rowSpan === 1, 'stand-alone': standAlone, 
            'pepperi-textarea-card-container inherit-full-height': layoutType === LAYOUT_TYPE.PepperiCard }">
            <pepperi-field-title *ngIf="isFormView" [label]="label" [required]="required" [disabled]="disabled" [maxFieldCharacters]="maxFieldCharacters" [xAlignment]="xAlignment"
                [showTitle]="showTitle" [inputLength]="input.value?.length"></pepperi-field-title>
            <mat-form-field appearance="outline" dir="{{ xAlignment == '2' ? 'rtl' : 'ltr' }}" [ngClass]="{ 'pepperi-table-textarea': layoutType === LAYOUT_TYPE.PepperiTable }">
                <textarea #input [hidden]="readonly" [id]="key" class="body-sm" matInput (blur)="onBlur($event)" title="{{ value }}" [value]="value"
                    maxlength="{{ maxFieldCharacters > 0 ? maxFieldCharacters : 99999 }}" [ngStyle]="{ color: 'textColor', 'text-align': xAlignment == '2' ? 'right' : 'left' }"
                    [formControlName]="key" [style.height]="fieldHeight" [disabled]="disabled">
                </textarea>
                <div *ngIf="readonly" class="body-sm disable-text-div" title="{{ value }}" [ngStyle]="{ color: 'textColor', 'text-align': xAlignment == '2' ? 'right' : 'left' }"
                    [innerHtml]="value | safeHtml" [style.height]="fieldHeight">
                </div>
                <!-- <pepperi-textbox-icon *ngIf="xAlignment == '2'" matPrefix [value]="value" [label]="label" [type]="controlType" [disabled]="disabled"
                    [ngClass]="{ 'card-one-row-icon': layoutType === LAYOUT_TYPE.PepperiCard && rowSpan === 1 }" (iconClicked)="openDialog()">
                </pepperi-textbox-icon> -->
                <pepperi-textbox-icon matSuffix [value]="value" [label]="label" [type]="controlType" [disabled]="disabled"
                    [ngClass]="{ 'card-one-row-icon': layoutType === LAYOUT_TYPE.PepperiCard && rowSpan === 1 }" (iconClicked)="openDialog()"></pepperi-textbox-icon>
                <mat-error>
                    <span class="body-xs"
                        [title]="required && value.length == 0 ? ('Msg_Is_Required' | translate: { field: label }) : ('Msg_Is_Not_Valid' | translate: { field: label })"
                        [innerText]="required && value.length == 0 ? ('Msg_Is_Required' | translate: { field: label }) : ('Msg_Is_Not_Valid' | translate: { field: label })"></span>
                </mat-error>
            </mat-form-field>
        </div>
    </ng-template>

    <ng-container *ngIf="layoutType === LAYOUT_TYPE.PepperiForm">
        <ng-container *ngTemplateOutlet="pepperiTemplate; context: { isFormView: true }"></ng-container>
    </ng-container>

    <ng-container *ngIf="layoutType === LAYOUT_TYPE.PepperiCard">
        <ng-container *ngIf="isInEditMode; then editBlock; else readOnlyBlock"></ng-container>
        <ng-template #editBlock>
            <ng-container *ngTemplateOutlet="pepperiTemplate; context: { isFormView: false }"></ng-container>
        </ng-template>
        <ng-template #readOnlyBlock>
            <div class="pepperi-textarea-card-container card-flex-container" [ngClass]="{'one-row': rowSpan === 1, 'pepperi-button weak': isActive && !disabled }"
                [ngStyle]="{ '-webkit-line-clamp': rowSpan }" [class]="'text-align-' + xAlignment" (click)="!disabled ? cardTemplateClicked($event) : ''"
                [style.height]="fieldHeight">
                <span *ngIf=" showTitle && label !=''" class=" body-xs title no-shrink" title="{{ label }}">{{ label }}&nbsp;</span>
                <span [id]="key" title="{{ value }}" class="body-sm value wrap">{{ value }}</span>
                <button *ngIf="isActive && !disabled" class="pepperi-button weak card-edit-button self-start" [ngClass]="{'self-end' : value && value !== ''}" mat-button>
                    <mat-icon>
                        <svg class="svg-icon">
                            <use attr.xlink:href="{{ sessionService.svgIcons }}system-edit"></use>
                        </svg>
                    </mat-icon>
                </button>
            </div>
        </ng-template>
    </ng-container>

    <ng-container *ngIf="layoutType === LAYOUT_TYPE.PepperiTable">
        <ng-container *ngIf="isActive && !disabled; then selectedBlock; else notSelectedBlock"></ng-container>
        <ng-template #selectedBlock>
            <ng-container *ngTemplateOutlet="pepperiTemplate; context: { isFormView: false }"></ng-container>
        </ng-template>
        <ng-template #notSelectedBlock>
            <ng-container *ngIf="value?.length > 0; then notEmptyBlock; else emptyBlock"></ng-container>
            <ng-template #notEmptyBlock>
                <mat-form-field appearance="outline" dir="{{ xAlignment == '2' ? 'rtl' : 'ltr' }}" class="pepperi-report-textarea" [ngClass]="{ readonly: disabled }">
                    <input matInput [id]="key" class="body-sm pepperi-report-input" [ngClass]="{ readonly: disabled }"
                        [ngStyle]="{ color: textColor, 'text-align': xAlignment == '3' ? 'center' : xAlignment == '2' ? 'right' : 'left' }" title="{{ value }}"
                        [formControlName]="key" type="text" [value]="value" [disabled]="true" />
                    <pepperi-textbox-icon *ngIf="disabled && xAlignment == '2'" matPrefix [value]="value" [label]="label" [type]="controlType" [disabled]="disabled"
                        (iconClicked)="openDialog()">
                    </pepperi-textbox-icon>
                    <pepperi-textbox-icon *ngIf="disabled && (xAlignment == '1' || xAlignment == '0')" matSuffix [value]="value" [label]="label" [type]="controlType"
                        [disabled]="disabled" (iconClicked)="openDialog()"></pepperi-textbox-icon>
                </mat-form-field>
            </ng-template>
            <ng-template #emptyBlock>
                <span>&nbsp;</span>
            </ng-template>
        </ng-template>
    </ng-container>

    <ng-container *ngIf="layoutType === LAYOUT_TYPE.Editmodal">
        <ng-container *ngTemplateOutlet="pepperiTemplate; context: { isFormView: true }"></ng-container>
    </ng-container>
</ng-container>