@pega/dx-component-builder-sdk/tests/assets/sdk-a/components/create/override-sdk/widget/file-utility/file-utility.component.html

Utility for building custom UI components

<div>
  <component-mapper
    name="ListUtility"
    [props]="{
      name$: lu_name$,
      icon$: lu_icon$,
      bLoading$: lu_bLoading$,
      count$: lu_count$,
      arActions$: lu_arActions$,
      arItems$: lu_arItems$,
      onViewAll$: lu_onViewAllFunction,
      menuIconOverrideAction$: removeFileFromList$
    }"
  ></component-mapper>
</div>

<div *ngIf="bShowFileModal$" class="psdk-dialog-background">
  <div class="psdk-modal-file-top">
    <h3>{{ pConn$.getLocalizedValue('Add local files', '', '') }}</h3>
    <div class="psdk-modal-body">
      <div class="psdk-modal-file-selector">
        <input hidden type="file" multiple #uploader (change)="uploadMyFiles($event)" />

        <button mat-stroked-button color="primary" (click)="uploader.click()">{{ pConn$.getLocalizedValue('Upload file(s)', '', '') }}</button>
      </div>

      <component-mapper
        name="SummaryList"
        [props]="{ arItems$: arFileList$, menuIconOverride$: 'trash', menuIconOverrideAction$: removeFileFromList$ }"
      ></component-mapper>
    </div>

    <component-mapper
      name="ActionButtons"
      [props]="{ arMainButtons$: arFileMainButtons$, arSecondaryButtons$: arFileSecondaryButtons$ }"
      [parent]="this"
      [outputEvents]="{ actionButtonClick: onFileActionButtonClick }"
    ></component-mapper>
  </div>
</div>

<div *ngIf="bShowLinkModal$" class="psdk-dialog-background">
  <div class="psdk-modal-link-top">
    <h3>{{ pConn$.getLocalizedValue('Add links', '', '') }}</h3>
    <div class="psdk-modal-link-entry">
      <div class="psdk-modal-body">
        <div class="psdk-modal-links-row">
          <div class="psdk-links-two-column">
            <div class="psdk-modal-link-data">
              <mat-form-field class="psdk-full-width">
                <mat-label>Link title</mat-label>
                <input matInput type="text" required="true" (change)="_fieldOnChangeLink($event)" [value]="link_title$" />
              </mat-form-field>
            </div>
            <div class="psdk-modal-link-data">
              <mat-form-field class="psdk-full-width">
                <mat-label>URL</mat-label>
                <input matInput type="text" required="true" (change)="_fieldOnChangeURL($event)" [value]="link_url$" />
              </mat-form-field>
            </div>
          </div>

          <div class="psdk-modal-link-add">
            <button mat-raised-button color="primary" (click)="_addLink()">{{ pConn$.getLocalizedValue('Add link', '', '') }}</button>
          </div>
        </div>

        <component-mapper
          name="SummaryList"
          [props]="{ arItems$: arLinksList$, menuIconOverride$: 'trash', menuIconOverrideAction$: removeLinksFromList$ }"
        ></component-mapper>
      </div>
    </div>

    <component-mapper
      name="ActionButtons"
      [props]="{ arMainButtons$: arLinkMainButtons$, arSecondaryButtons$: arLinkSecondaryButtons$ }"
      [parent]="this"
      [outputEvents]="{ actionButtonClick: onLinkActionButtonClick }"
    ></component-mapper>
  </div>
</div>

<div *ngIf="bShowViewAllModal$" class="psdk-dialog-background">
  <div class="psdk-modal-file-top">
    <div class="psdk-view-all-header">
      <div>
        <h3>{{ pConn$.getLocalizedValue('Attachments', '', '') }}</h3>
      </div>
      <div>
        <button mat-icon-button (click)="_closeViewAll()">
          <img class="psdk-utility-card-actions-svg-icon" src="{{ closeSvgIcon$ }}" />
        </button>
      </div>
    </div>
    <div class="psdk-view-all-body">
      <component-mapper name="SummaryList" [props]="{ arItems$: va_arItems$, menuIconOverrideAction$: removeLinksFromList$ }"></component-mapper>
    </div>
  </div>
</div>