@pega/dx-component-builder-sdk/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/material-details-fields/material-details-fields.component.html

Utility for building custom UI components

<div id="details-fields-list">
  <div *ngFor="let field of arFields$">
    <div *ngIf="field.type === 'group'; else noGroup">
      <component-mapper name="Group" [props]="{ pConn$: field.pConn }"></component-mapper>
    </div>
    <ng-template #noGroup>
      <div *ngIf="field.type === 'reference'; else showDetails">
        <component-mapper name="View" [props]="{ pConn$: field.pConn }"></component-mapper>
      </div>
    </ng-template>

    <ng-template #showDetails>
      <div class="psdk-grid-filter" *ngIf="field.config.label && getVisibility(field.config)">
        <div class="psdk-details-fields-label">
          {{ field.config.label }}
        </div>
        <div [ngSwitch]="field.type.toLowerCase()" class="psdk-csf-primary-field-value">
          <span *ngSwitchCase="'textinput'" class="psdk-details-text-style">{{ _getValue(field.config.value) }}</span>
          <span *ngSwitchCase="'status'" class="psdk-details-status-style">{{ _getValue(field.config.value) }}</span>
          <a *ngSwitchCase="'phone'" as="a" href="tel: {{ field.config.value }}">{{ _getValue(field.config.value) }}</a>
          <a *ngSwitchCase="'email'" href="mailto: {{ field.config.value }}">{{ _getValue(field.config.value) }}</a>
          <span *ngSwitchCase="'date'" class="psdk-details-text-style">{{ _formatDate(field.config.value, field.type) }}</span>
          <span *ngSwitchCase="'caseoperator'"></span>
          <span *ngSwitchDefault>{{ _getValue(field.config.value, field) }}</span>
        </div>
      </div>
    </ng-template>
  </div>
</div>