@pepperi/components/date/date.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-showIcon="showIcon">
        <mat-form-field appearance="outline">
            <input
                #input
                [id]="key"
                title="{{ formattedValue }}"
                matInput
                class="body-sm"
                autocomplete="false"
                [ngStyle]="{color: textColor, 'text-align': xAlignment == '3' ? 'center' : xAlignment == '2' ? 'right' : 'left'}"
                [(ngModel)]="dateModel"
                [ngModelOptions]="{standalone: true}"
                [matDatetimepicker]="datetimePicker"
                [min]="minDate"
                [max]="maxDate"
                [required]="required"
                [disabled]="disabled"
                (dateChange)="onDateChange($event)"
                (click)="openDatetimePicker(datetimePicker)"
                (blur)="onBlur($event)"
            />
            <mat-error
                ><span
                    class="body-xs"
                    [title]="required && formattedValue.length == 0 ? ('Msg_Is_Required' | translate: {field: label}) : ('Msg_Is_Not_Valid' | translate: {field: label})"
                    [innerText]="required && formattedValue.length == 0 ? ('Msg_Is_Required' | translate: {field: label}) : ('Msg_Is_Not_Valid' | translate: {field: label})"
                ></span>
            </mat-error>
            <pepperi-textbox-icon
                *ngIf="showIcon && xAlignment == '2'"
                matPrefix
                [value]="value"
                [label]="label"
                [type]="type"
                [disabled]="disabled"
                (iconClicked)="openDatetimePicker(datetimePicker)"
            >
            </pepperi-textbox-icon>
            <pepperi-textbox-icon
                *ngIf="(showIcon && xAlignment == '1') || xAlignment == '0'"
                matSuffix
                [value]="value"
                [label]="label"
                [type]="type"
                [disabled]="disabled"
                (iconClicked)="openDatetimePicker(datetimePicker)"
            >
            </pepperi-textbox-icon>
            <mat-datetimepicker #datetimePicker [type]="showTime ? 'datetime' : 'date'" openOnFocus="false" touchUi="true" timeInterval="1"></mat-datetimepicker>
        </mat-form-field>
    </ng-template>

    <ng-container *ngIf="layoutType === LAYOUT_TYPE.PepperiForm">
        <pepperi-field-title [label]="label" [required]="required" [disabled]="disabled" [xAlignment]="xAlignment" [showTitle]="showTitle"></pepperi-field-title>
        <ng-container *ngTemplateOutlet="pepperiTemplate; context: {showIcon: 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>
            <div [ngClass]="{'one-row': rowSpan === 1}">
                <ng-container *ngTemplateOutlet="pepperiTemplate; context: {showIcon: 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: {showIcon: true}"></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 *ngSwitchDefault>
                        <span [id]="key" class="body-sm pepperi-report-input" [ngClass]="{readonly: disabled}" title="{{ formattedValue }}">{{ 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">
        <pepperi-field-title [label]="label" [required]="required" [disabled]="disabled" [xAlignment]="xAlignment" [showTitle]="showTitle"></pepperi-field-title>
        <ng-container *ngTemplateOutlet="pepperiTemplate; context: {showIcon: true}"></ng-container>
    </ng-container>
</ng-container>