@pepperi/components/textbox/textbox.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" let-hasParent="hasParent">
        <pepperi-field-title *ngIf="isFormView && !hasParent" [label]="label" [required]="required"
            [disabled]="disabled" [maxFieldCharacters]="maxFieldCharacters" [xAlignment]="xAlignment"
            [showTitle]="showTitle" [inputLength]="input.value?.length">
        </pepperi-field-title>
        <mat-form-field appearance="outline">
            <input #input [id]="key" [name]="key" class=" body-sm " matInput autocomplete="off"
                (keyup)="onKeyUp($event)" (keypress)="onKeyPress($event)"
                maxlength="{{ maxFieldCharacters > 0 ? maxFieldCharacters : 99999 }}"
                [placeholder]="hasParent && !disabled ? placeholder : ''"
                [ngStyle]="{ color: textColor, 'text-align': xAlignment == '3' ? 'center' : xAlignment == '2' ? 'right' : 'left' }"
                title="{{ formattedValue }}" [formControlName]="key" [type]="type"
                [value]="type == 'link' ? formattedValue : (isFocus ? value : formattedValue)" (blur)="onBlur($event)"
                (keyup.enter)="$event?.currentTarget?.blur()" (focus)="onFocus($event)" [disabled]="disabled"
                [ngClass]="{'disable-hidden': disabled && formattedValue.length > 0 && (type === 'phone' || type === 'email' || type === 'link')}" />

            <span
                *ngIf="disabled && formattedValue.length > 0 && (type === 'phone' || type === 'email' || type === 'link')"
                class="dis-grid">
                <a href="javascript:void(0)" (click)="anchorClicked()" [id]="key" [name]="key"
                    class="color-link body-sm "> {{formattedValue}}</a>
            </span>
            <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>

            <pepperi-textbox-icon *ngIf="isFormView && xAlignment == '2'" matPrefix [value]="value" [label]="label"
                [type]="type" [disabled]="disabled"></pepperi-textbox-icon>
            <pepperi-textbox-icon *ngIf="isFormView && (xAlignment == '1' || xAlignment == '0')" matSuffix
                [value]="value" [label]="label" [type]="type" [disabled]="disabled">
            </pepperi-textbox-icon>
        </mat-form-field>
    </ng-template>

    <ng-container *ngIf="layoutType === LAYOUT_TYPE.PepperiForm">
        <ng-container *ngIf="parentField == null; then regularBlock; else groupedBlock"></ng-container>
        <ng-template #regularBlock>
            <ng-container *ngTemplateOutlet="pepperiTemplate; context: { isFormView: true, hasParent: false }">
            </ng-container>
        </ng-template>
        <ng-template #groupedBlock>
            <ng-container [formGroupName]="parentField.key">
                <mat-form-field appearance="outline">
                    <input [id]="key" [name]="key" class=" body-sm " matInput autocomplete="off"
                        (keyup)="onKeyUp($event)" (keypress)="onKeyPress($event)"
                        [placeholder]="!disabled ? placeholder : ''" title="{{ formattedValue }}"
                        [formControlName]="key" [value]="value" (blur)="onBlur($event)"
                        (keyup.enter)="$event?.currentTarget?.blur()" (focus)="onFocus($event)" [disabled]="disabled" />
                </mat-form-field>
                <!-- <ng-container *ngTemplateOutlet="pepperiTemplate; context: { isFormView: true, hasParent: true }"></ng-container> -->
            </ng-container>
        </ng-template>
    </ng-container>

    <ng-container *ngIf="layoutType === LAYOUT_TYPE.PepperiCard">
        <ng-container *ngIf="isInEditMode; then editBlock; else readOnlyBlock"></ng-container>
        <ng-template #editBlock>
            <div [ngClass]="{'one-row': rowSpan === 1}">
                <ng-container *ngTemplateOutlet="pepperiTemplate; context: { isFormView: false, hasParent: false }">
                </ng-container>
            </div>
        </ng-template>
        <ng-template #readOnlyBlock>
            <div class="pepperi-card-input card-flex-container"
                [ngClass]="{'one-row': rowSpan === 1, 'pepperi-button weak': isActive && !disabled}"
                [class]="'text-align-' + xAlignment" (click)="!disabled ? cardTemplateClicked($event) : ''">
                <span *ngIf="showTitle && label != ''" class="body-xs title"
                    title="{{ label }}">{{ label }}&nbsp;</span>
                <span [id]="key" title="{{ formattedValue }}" class="body-sm value">{{ formattedValue }}</span>
                <button *ngIf="isActive && !disabled" class="pepperi-button weak card-edit-button" 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, hasParent: false }">
            </ng-container>
        </ng-template>
        <ng-template #notSelectedBlock>
            <ng-container *ngIf="formattedValue?.length > 0; then notEmptyBlock; else emptyBlock"></ng-container>
            <ng-template #notEmptyBlock>
                <ng-container [ngSwitch]="type">
                    <ng-container *ngSwitchCase="'link'">
                        <a [id]="key" class="color-link body-sm pepperi-report-input"
                            [ngClass]="{'disable': (disabled && value === '')}" *ngIf="formattedValue != null"
                            title="{{ formattedValue }}" target="_blank"
                            href="{{ value ? value : formattedValue }}">{{ formattedValue }}</a>
                    </ng-container>
                    <ng-container *ngSwitchDefault>
                        <span [id]="key" class="body-sm pepperi-report-input" [ngClass]="{'readonly': disabled}"
                            title="{{ formattedValue }}" [ngStyle]="{ color: textColor }">{{ formattedValue }}</span>
                    </ng-container>
                </ng-container>
            </ng-template>
            <ng-template #emptyBlock>
                <span [id]="key">&nbsp;</span>
            </ng-template>
        </ng-template>
    </ng-container>

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

</ng-container>