@pepperi/components/select/select.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>
        <ng-container *ngIf="type == 'multi'; then multiSelectBlock; else regularSelectBlock"></ng-container>
        <ng-template #regularSelectBlock>
            <mat-form-field appearance="outline" dir="{{ xAlignment === '2' ? 'rtl' : 'ltr' }}">
                <mat-select #select [required]="required ? required : undefined" matInput disableOptionCentering
                    class="body-sm text-align-{{ xAlignment }}" [id]="key"
                    [ngClass]="{'right-alignment': xAlignment == '2'}"
                    [placeholder]="disabled || readonly ? '' : ('Dropdown_Placeholder_Msg' | translate)"
                    [(ngModel)]="selectedValueModel" [ngModelOptions]="{standalone: true}" [disabled]="disabled"
                    (selectionChange)="selectionChange($event)" (openedChange)="openedChange($event)"
                    title="{{ formattedValue }}">
                    <mat-option *ngIf="emptyOption" value="">{{ 'None' | translate }}</mat-option>
                    <mat-option *ngFor="let option of options" [value]="option.Key">{{ option.Value }}</mat-option>
                </mat-select>
                <mat-error>
                    <span class="body-xs" [title]="'Msg_Is_Required' | translate: {field: label}"
                        [innerText]="'Msg_Is_Required' | translate: {field: label}"></span>
                </mat-error>
            </mat-form-field>
        </ng-template>
        <ng-template #multiSelectBlock>
            <mat-form-field appearance="outline" dir="{{ xAlignment === '2' ? 'rtl' : 'ltr' }}">
                <mat-select #select [required]="required ? required : undefined" matInput disableOptionCentering
                    class="body-sm text-align-{{ xAlignment }}" [id]="key"
                    [ngClass]="{'right-alignment': xAlignment == '2'}"
                    [placeholder]="disabled || readonly ? '' : ('MultiDropdown_Placeholder_Msg' | translate)"
                    [(ngModel)]="selectedValuesModel" [ngModelOptions]="{standalone: true}" [disabled]="disabled"
                    (openedChange)="openedChange($event)" multiple title="{{ formattedValue }}">
                    <mat-option *ngFor="let option of options" [value]="option.Key">{{ option.Value }}</mat-option>
                </mat-select>
                <mat-error><span class="body-xs" [title]="'Msg_Is_Required' | translate: {field: label}"
                        [innerText]="'Msg_Is_Required' | translate: {field: label}"> </span>
                </mat-error>
            </mat-form-field>
        </ng-template>
    </ng-template>

    <ng-container *ngIf="layoutType === LAYOUT_TYPE.PepperiForm">
        <pepperi-field-title *ngIf="!parentField" [label]="label" [required]="required" [disabled]="disabled"
            [xAlignment]="xAlignment" [showTitle]="showTitle"></pepperi-field-title>
        <ng-container *ngTemplateOutlet="pepperiTemplate"></ng-container>
    </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"></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"></ng-container>
        </ng-template>
        <ng-template #notSelectedBlock>
            <span [id]="key" class="body-sm pepperi-report-input" [ngClass]="{readonly: disabled}"
                title="{{ fieldFormattedValue }}">{{ fieldFormattedValue }}</span>
        </ng-template>
    </ng-container>

    <ng-container *ngIf="layoutType === LAYOUT_TYPE.Editmodal">
        <pepperi-field-title [label]="label" [required]="required" [disabled]="disabled" [xAlignment]="xAlignment"
            [showTitle]="showTitle"></pepperi-field-title>
        <ng-container *ngTemplateOutlet="pepperiTemplate"></ng-container>
    </ng-container>
</ng-container>