@pepperi/components/checkbox/checkbox.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>
        <div class="pepperi-checkbox-container pepperi-input" [ngClass]="{
                'disable': disabled,
                'pepperi-report-checkbox': layoutType === LAYOUT_TYPE.PepperiTable && !isActive,
                'pepperi-card-checkbox': layoutType === LAYOUT_TYPE.PepperiCard,
                'one-row': rowSpan === 1,
                'no-title': label.length == 0,
                'space-bottom': layoutType === LAYOUT_TYPE.PepperiForm,
                'right-alignment pull-right flip': xAlignment == '2',
                'center-alignment': xAlignment == '3'
            }" dir="{{ xAlignment == '2' ? 'rtl' : 'ltr' }}">
            <!-- (click)="toggleChecked($event)" -->
            <ng-container *ngIf="type == 'booleanText'; then booleanTextTemplate; else regularTemplate"></ng-container>
            <ng-template #booleanTextTemplate>
                <div (click)="toggleChecked($event)" class="mat-checkbox-layout body-sm"
                    [title]="(label.length > 0 ? label + ': ' : '') + (value.toLowerCase() == 'true' || value == '1' ? ('True' | translate) : ('False' | translate))">
                    <button [id]="key" class="mat-icon-button emoji-icon pull-left flip">
                        {{ value.toLowerCase() == 'true' || value == '1' ? additionalValueObject.CheckedText : additionalValueObject.UncheckedText }}
                    </button>
                    <span *ngIf="label.length > 0 && layoutType !== LAYOUT_TYPE.PepperiTable"
                        class="mat-checkbox-label emoji-title">{{ label }}</span>
                </div>
            </ng-template>
            <ng-template #regularTemplate>
                <mat-checkbox [name]="key" class="body-sm ellipsis" type="checkbox" (change)="onMaterialChange($event)"
                    [title]="(label.length > 0 ? label + ': ' : '') + (value.toLowerCase() == 'true' || value == '1' ? ('True' | translate) : ('False' | translate))"
                    [checked]="value.toLowerCase() == 'true' || value == '1' ? true : false" [disabled]="disabled">
                    <span *ngIf="label.length > 0 && layoutType !== LAYOUT_TYPE.PepperiTable">{{ label }}</span>
                </mat-checkbox>
            </ng-template>
        </div>
    </ng-template>

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

    <ng-container *ngIf="layoutType === LAYOUT_TYPE.PepperiCard">
        <ng-container *ngTemplateOutlet="pepperiTemplate"></ng-container>
    </ng-container>

    <ng-container *ngIf="layoutType === LAYOUT_TYPE.PepperiTable">
        <ng-container *ngIf="key === 'ItemHasActiveCampaign'; then itemCampaignBlock; else checkboxBlock">
        </ng-container>
        <ng-template #itemCampaignBlock>
            <ng-container *ngIf="value.toLowerCase() == 'true' || value == '1'; then trueTemplate; else falseTemplate">
            </ng-container>
            <ng-template #trueTemplate>
                <mat-icon class="has-active-campaign" title="{{ 'True' | translate }}">
                    <svg class="svg-icon">
                        <use attr.xlink:href="{{ sessionService.svgIcons }}system-bolt"></use>
                    </svg>
                </mat-icon>
            </ng-template>
            <ng-template #falseTemplate>
                <span>&nbsp;</span>
            </ng-template>
        </ng-template>
        <ng-template #checkboxBlock>
            <ng-container *ngTemplateOutlet="pepperiTemplate"></ng-container>
        </ng-template>
    </ng-container>

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