@pega/dx-component-builder-sdk

Version:
Utility for building custom UI components
51 lines (50 loc) • 1.93 kB
HTML
<div *ngIf="displayMode$; else noDisplayMode">
  <component-mapper
    *ngIf="bVisible$ !== false"
    name="FieldValueList"
    [props]="{ label$: caption$, value$: value$ ? trueLabel$ : falseLabel$, displayMode$ }"
  ></component-mapper>
</div>
<ng-template #noDisplayMode>
  <div *ngIf="bHasForm$; else noEdit">
    <div [formGroup]="formGroup$" *ngIf="bVisible$">
      <div class="mat-form-field-infix" *ngIf="showLabel$">
        <span>
          <label class="mat-form-field-label psdk-label-readonly">{{ label$ }}</label>
        </span>
      </div>
      <div *ngIf="selectionMode === 'multi'; else single">
        <mat-option *ngFor="let item of listOfCheckboxes" (click)="handleChangeMultiMode($event, item)">
          <mat-checkbox
            [labelPosition]="'after'"
            [checked]="item.selected"
            [disabled]="bDisabled$ || bReadonly$"
            [required]="bRequired$"
            [attr.data-test-id]="testId + ':' + item.value"
            (change)="handleChangeMultiMode($event, item)"
            (blur)="fieldOnBlur($event)"
            >{{ item.text ?? item.value }}
          </mat-checkbox>
        </mat-option>
      </div>
      <ng-template #single>
        <mat-checkbox
          [labelPosition]="'after'"
          [checked]="isChecked$"
          [disabled]="bDisabled$ || bReadonly$"
          [required]="bRequired$"
          [attr.data-test-id]="testId"
          [formControl]="fieldControl"
          (change)="fieldOnChange($event)"
          (blur)="fieldOnBlur($event)"
          >{{ caption$ }}</mat-checkbox
        >
        <p *ngIf="helperText">{{ helperText }}</p>
      </ng-template>
      <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
    </div>
  </div>
</ng-template>
<ng-template #noEdit>
  <component-mapper *ngIf="bVisible$ !== false" name="Text" [props]="{ pConn$, formatAs$: 'text' }"></component-mapper>
</ng-template>