@pega/angular-sdk-overrides 23.1.10 → 24.1.10

package/lib/widget/attachment/attachment.component.html

@@ -1,31 +1,55 @@
-<div class="psdk-label-infix-readonly" *ngIf="bVisible$">
-  <span class="psdk-label-wrapper-readonly">
-    <label [ngClass]="{ 'psdk-label-readonly': true, 'label-required': bRequired$ === true }" [htmlFor]="att_valueRef">{{ label$ }}</label>
-  </span>
-  <div
-    [ngClass]="{ 'psdk-modal-file-selector': status !== 'error', 'psdk-modal-file-selector-error': status === 'error' }"
-    id="attachment-container"
-    *ngIf="bShowSelector$"
-  >
-    <mat-spinner *ngIf="bLoading$" class="progress-spinner" diameter="40"></mat-spinner>
-    <input hidden type="file" [required]="bRequired$" #uploader [id]="att_valueRef" [multiple]="allowMultiple$" (change)="uploadMyFiles($event)" />
-
-    <button mat-stroked-button color="primary" [disabled]="bDisabled$" (click)="uploader.click()">
-      {{ allowMultiple$ ? 'Upload files' : 'Upload file' }}
-    </button>
+<div class="file-upload-container" *ngIf="bVisible$">
+  <span class="attachment-label" [ngClass]="{ 'file-label': bRequired$ }">{{ label$ }}</span>
+  <div *ngIf="(files.length === 0 && !allowMultiple$) || allowMultiple$">
+    <div
+      style="margin-bottom: 10px"
+      id="attachment-container"
+      [ngClass]="validateMessage ? 'psdk-modal-file-selector-error' : 'psdk-modal-file-selector'"
+    >
+      <div [hidden]="true" id="attachment-ID">
+        {{ valueRef }}
+      </div>
+      <input hidden type="file" [required]="bRequired$" #uploader [id]="valueRef" [multiple]="allowMultiple$" (change)="onFileAdded($event)" />
+      <button mat-stroked-button color="primary" [disabled]="bDisabled$" (click)="uploader.click()">
+        {{
+          allowMultiple$
+            ? uploadMultipleFilesLabel === 'file_upload_text_multiple'
+              ? 'Choose files'
+              : uploadMultipleFilesLabel
+            : uploadSingleFileLabel === 'file_upload_text_one'
+              ? 'Choose a file'
+              : uploadSingleFileLabel
+        }}
+      </button>
+    </div>
   </div>
   <span *ngIf="validateMessage" class="file-error">{{ validateMessage }}</span>
-
-  <div class="psdk-attachment-list" *ngIf="arFileList$ != null && arFileList$.length > 0">
-    <div *ngFor="let attachment of arFileList$">
-      <component-mapper
-        *ngIf="attachment.noDeleteIcon !== true; else showfull"
-        name="SummaryItem"
-        [props]="{ item$: attachment, menuIconOverride$: 'trash', menuIconOverrideAction$: removeFileFromList$ }"
-      ></component-mapper>
-      <ng-template #showfull>
-        <component-mapper name="SummaryItem" [props]="{ item$: attachment, menuIconOverrideAction$: removeFileFromList$ }"></component-mapper>
-      </ng-template>
+  <div *ngIf="files && files.length > 0">
+    <div *ngFor="let file of files">
+      <div class="psdk-attachment-card">
+        <div className="psdk-utility-card-icon">
+          <img *ngIf="!file.inProgress" class="psdk-attachment-card-svg-icon" src="{{ srcImg }}" />
+          <mat-spinner *ngIf="file.inProgress" class="progress-spinner" diameter="40"></mat-spinner>
+        </div>
+        <div class="psdk-attachment-card-main">
+          <div class="psdk-attachment-card-main-primary-label">{{ file.props.name }}</div>
+          <div *ngIf="file.props.meta" [ngStyle]="{ color: file.props.error ? 'red' : null }">{{ file.props.meta }}</div>
+        </div>
+        <div class="psdk-attachment-action">
+          <button id="delete-attachment" *ngIf="file.ID" class="psdk-utility-button" (click)="deleteFile(file)">
+            <img class="psdk-utility-card-action-svg-icon" src="{{ deleteIcon }}" />
+          </button>
+          <div *ngIf="!file.ID">
+            <button id="setting-button" mat-icon-button [matMenuTriggerFor]="actionMenu">
+              <mat-icon>more_vert</mat-icon>
+            </button>
+            <mat-menu #actionMenu="matMenu">
+              <button mat-menu-item (click)="downloadFile(file.responseProps ? file.responseProps : {})">Download</button>
+              <button mat-menu-item (click)="deleteFile(file)">Delete</button>
+            </mat-menu>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>

package/lib/widget/attachment/attachment.component.scss

@@ -53,3 +53,121 @@
 ::ng-deep .mat-mdc-form-field-infix {
   width: auto;
 }
+.psdk-modal-file-selector {
+  border: 1px dashed var(--app-neutral-dark-color);
+  padding: 0.5rem;
+  text-align: center;
+  position: relative;
+}
+
+.label-required::after {
+  display: inline;
+  content: ' *';
+  vertical-align: top;
+  color: var(--app-neutral-dark-color);
+}
+
+.file-error {
+  color: var(--app-error-light-color);
+}
+
+.psdk-modal-file-selector-error {
+  border: 1px dashed var(--app-error-light-color);
+  padding: 0.5rem;
+  text-align: center;
+  position: relative;
+}
+
+.psdk-full-width {
+  width: 100%;
+}
+
+.psdk-label-readonly {
+  opacity: 54%;
+  font-size: 0.8rem;
+  font-weight: 400;
+}
+
+.psdk-data-readonly {
+  padding-top: 0.625rem;
+  width: 100%;
+}
+
+.psdk-attachment-list {
+  border: 1px solid var(--app-neutral-color);
+}
+
+::ng-deep .mat-mdc-form-field-infix {
+  width: auto;
+}
+
+.psdk-attachment-card {
+  display: flex;
+  align-items: center;
+  border: 0.0625rem solid rgb(207, 207, 207);
+  border-radius: calc(0.25rem);
+  padding: 0.25rem 0rem 0.25rem 0.25rem;
+  min-height: 3rem;
+  margin-bottom: 0.5rem;
+}
+
+.psdk-attachment-card-main-primary-label {
+  font-weight: 500;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: normal;
+}
+
+.psdk-attachment-card-main {
+  flex-grow: 2;
+  margin-left: 5px;
+}
+
+.psdk-attachment-action {
+  flex-grow: 1;
+  text-align: right;
+}
+
+.psdk-attachment-card-svg-icon {
+  width: 2.5rem;
+}
+
+.psdk-utility-button {
+  background: none;
+  border: none;
+  margin-right: 0.5rem;
+  cursor: pointer;
+}
+
+.psdk-utility-card-action-svg-icon {
+  width: 1.4rem;
+  display: inline-block;
+}
+
+.file-div {
+  border: 1px dashed var(--app-neutral-dark-color);
+  width: 100%;
+  padding: 0.5rem;
+  text-align: center;
+  position: relative;
+}
+
+.file-div-error {
+  border: 1px dashed var(--app-error-light-color);
+  width: 100%;
+  padding: 0.5rem;
+  text-align: center;
+  position: relative;
+}
+
+.attachment-label {
+  display: block;
+  margin-bottom: 10px;
+}
+
+.file-label::after {
+  display: inline;
+  content: ' *';
+  vertical-align: top;
+  color: var(--app-neutral-dark-color);
+}