@pega/angular-sdk-overrides 23.1.10 → 24.2.10

package/lib/template/simple-table-manual/simple-table-manual.component.html

@@ -27,7 +27,7 @@
             </mat-menu>
           </div>
         </th>
-        <td mat-cell *matCellDef="let element">{{ element[dCol.config.name] }}</td>
+        <td mat-cell *matCellDef="let element">{{ element[dCol.config.name] || '---' }}</td>
       </ng-container>
       <ng-container matColumnDef="DeleteIcon">
         <div *ngIf="allowEditingInModal">

package/lib/template/simple-table-manual/simple-table-manual.component.scss

@@ -4,6 +4,7 @@
   width: 100%;
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
+  overflow-y: auto;
 }
 
 table {

package/lib/template/simple-table-manual/simple-table-manual.component.ts

@@ -45,6 +45,7 @@ interface SimpleTableManualProps {
   displayMode?: string;
   useSeparateViewForEdit: any;
   viewForEditModal: any;
+  targetClassLabel: string;
 }
 
 class Group {
@@ -157,6 +158,9 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
   editView: any;
   settingsSvgIcon$: string;
 
+  isInitialized = false;
+  targetClassLabel: string;
+
   constructor(
     private angularPConnect: AngularPConnectService,
     private utils: Utils,
@@ -164,6 +168,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit(): void {
+    this.isInitialized = true;
     // First thing in initialization is registering and subscribing to the AngularPConnect service
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
     this.configProps$ = this.pConn$.getConfigProps() as SimpleTableManualProps;
@@ -216,7 +221,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     //  but getRawMetadata() has each child.config with datasource and value showing their unresolved values (ex: "@P thePropName")
     //  We need to use the prop name as the "glue" to tie the Angular Material table dataSource, displayColumns and data together.
     //  So, in the code below, we'll use the unresolved config.value (but replacing the space with an underscore to keep things happy)
-    const rawMetadata: any = this.pConn$.getRawMetadata();
+    const rawMetadata = this.pConn$.getRawMetadata();
 
     // Adapted from Nebula
     const {
@@ -234,22 +239,21 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
       editModeConfig,
       displayMode,
       useSeparateViewForEdit,
-      viewForEditModal
+      viewForEditModal,
+      targetClassLabel
     } = this.configProps$;
 
     this.referenceListStr = getContext(this.pConn$).referenceListStr;
     this.label = labelProp || propertyLabel;
     this.parameters = fieldMetadata?.datasource?.parameters;
-
+    this.targetClassLabel = targetClassLabel;
     const hideAddRow = allowTableEdit === false;
     const hideDeleteRow = allowTableEdit === false;
     let { contextClass } = this.configProps$;
     this.referenceList = referenceList;
     if (!contextClass) {
-      // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'
       let listName = this.pConn$.getComponentConfig().referenceList;
       listName = PCore.getAnnotationUtils().getPropertyName(listName);
-      // @ts-ignore - Property 'getFieldMetadata' is private and only accessible within class 'C11nEnv'
       contextClass = this.pConn$.getFieldMetadata(listName)?.pageClass;
     }
     this.contextClass = contextClass;
@@ -261,7 +265,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     //    config.value (ex: "@P .DeclarantChoice") or
     //    config.datasource (ex: "@ASSOCIATED .DeclarantChoice")
     //  Neither of these appear in the resolved (this.configProps$)
-    const rawConfig = rawMetadata?.config;
+    const rawConfig: any = rawMetadata?.config;
     const rawFields = rawConfig?.children?.[0]?.children || rawConfig?.presets?.[0].children?.[0]?.children;
     this.rawFields = rawFields;
     // At this point, fields has resolvedFields and rawFields we can use
@@ -300,6 +304,8 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     //  Nebula and we may not end up using it all.
     this.fieldDefs = buildFieldsForTable(rawFields, resolvedFields, showDeleteButton);
 
+    this.initializeDefaultPageInstructions();
+
     // end of from Nebula
 
     // Here, we use the "name" field in fieldDefs since that has the assoicated property
@@ -348,9 +354,24 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     //  ties the 3 data structures together.
   }
 
+  initializeDefaultPageInstructions() {
+    if (this.isInitialized) {
+      this.isInitialized = false;
+      if (this.allowEditingInModal) {
+        this.pConn$.getListActions().initDefaultPageInstructions(
+          this.pConn$.getReferenceList(),
+          this.fieldDefs.filter(item => item.name).map(item => item.name)
+        );
+      } else {
+        // @ts-ignore - An argument for 'propertyNames' was not provided.
+        this.pConn$.getListActions().initDefaultPageInstructions(this.pConn$.getReferenceList());
+      }
+    }
+  }
+
   getResultsText() {
     const recordsCount = this.readOnlyMode ? this.rowData?.data.length : this.referenceList?.length;
-    return `${recordsCount} result${recordsCount > 1 ? 's' : ''}`;
+    return `${recordsCount || 0} result${recordsCount > 1 ? 's' : ''}`;
   }
 
   sortCompare(a, b): number {
@@ -369,13 +390,28 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
       }
     }
 
-    if (aValue === bValue) {
-      return 0;
+    //
+    switch (this.arrowDirection) {
+      case 'up':
+        if (!aValue || aValue < bValue) {
+          return -1;
+        }
+        if (!bValue || aValue > bValue) {
+          return 1;
+        }
+        break;
+      case 'down':
+        if (!bValue || aValue > bValue) {
+          return -1;
+        }
+        if (!aValue || aValue < bValue) {
+          return 1;
+        }
+        break;
+      default:
+        break;
     }
 
-    if (this.arrowDirection === 'up') return aValue - bValue;
-    if (this.arrowDirection === 'down') return bValue - aValue;
-
     return 0;
   }
 
@@ -884,17 +920,19 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
         .getActionsApi()
         .openEmbeddedDataModal(
           this.defaultView,
-          this.pConn$,
+          this.pConn$ as any,
           this.referenceListStr,
           this.referenceList.length,
-          PCore.getConstants().RESOURCE_STATUS.CREATE
+          PCore.getConstants().RESOURCE_STATUS.CREATE,
+          this.targetClassLabel
         );
-    } else if (PCore.getPCoreVersion()?.includes('8.7')) {
-      this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceList.length, this.pageReference);
     } else {
-      // @ts-ignore - second parameter "pageRef" is optional for insert method
       this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceList.length);
     }
+
+    this.pConn$.clearErrorMessages({
+      property: this.pConn$.getStateProps()?.referenceList?.substring(1)
+    });
   }
 
   editRecord(data, index) {
@@ -903,21 +941,17 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
         .getActionsApi()
         .openEmbeddedDataModal(
           this.bUseSeparateViewForEdit ? this.editView : this.defaultView,
-          this.pConn$,
+          this.pConn$ as any,
           this.referenceListStr,
           index,
-          PCore.getConstants().RESOURCE_STATUS.UPDATE
+          PCore.getConstants().RESOURCE_STATUS.UPDATE,
+          this.targetClassLabel
         );
     }
   }
 
   deleteRecord(index) {
-    if (PCore.getPCoreVersion()?.includes('8.7')) {
-      this.pConn$.getListActions().deleteEntry(index, this.pageReference);
-    } else {
-      // @ts-ignore - second parameter "pageRef" is optional for deleteEntry method
-      this.pConn$.getListActions().deleteEntry(index);
-    }
+    this.pConn$.getListActions().deleteEntry(index);
   }
 
   buildElementsForTable() {
@@ -928,9 +962,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
       this.rawFields?.forEach(item => {
         const referenceListData = getReferenceList(this.pConn$);
         const isDatapage = referenceListData.startsWith('D_');
-        const pageReferenceValue = isDatapage
-          ? `${referenceListData}[${index}]`
-          : `${this.pConn$.getPageReference()}${referenceListData.substring(referenceListData.lastIndexOf('.'))}[${index}]`;
+        const pageReferenceValue = isDatapage ? `${referenceListData}[${index}]` : `${this.pConn$.getPageReference()}${referenceListData}[${index}]`;
         const config = {
           meta: item,
           options: {

package/lib/template/simple-table-select/simple-table-select.component.ts

@@ -57,7 +57,7 @@ export class SimpleTableSelectComponent implements OnInit, OnDestroy {
   }
 
   updateSelf() {
-    const theConfigProps: any = this.pConn$.getConfigProps();
+    const theConfigProps = this.pConn$.getConfigProps();
     this.label = theConfigProps.label;
     this.renderMode = theConfigProps.renderMode;
     this.showLabel = theConfigProps.showLabel;
@@ -71,7 +71,7 @@ export class SimpleTableSelectComponent implements OnInit, OnDestroy {
       this.propsToUse.label = '';
     }
     const { MULTI } = PCore.getConstants().LIST_SELECTION_MODE;
-    const { selectionMode, selectionList }: any = this.pConn$.getConfigProps();
+    const { selectionMode, selectionList } = this.pConn$.getConfigProps();
     const isMultiSelectMode = selectionMode === MULTI;
     if (isMultiSelectMode && this.renderMode === 'ReadOnly') {
       this.showSimpleTableManual = true;
@@ -85,10 +85,8 @@ export class SimpleTableSelectComponent implements OnInit, OnDestroy {
         contextPageReference = pageReference.concat('.').concat(referenceProp);
       }
       const metadata = isMultiSelectMode
-        ? // @ts-ignore - Property 'getFieldMetadata' is private and only accessible within class 'C11nEnv'
-          this.pConn$.getFieldMetadata(`@P .${referenceProp}`)
-        : // @ts-ignore - Property 'getCurrentPageFieldMetadata' is private and only accessible within class 'C11nEnv'
-          this.pConn$.getCurrentPageFieldMetadata(contextPageReference);
+        ? this.pConn$.getFieldMetadata(`@P .${referenceProp}`)
+        : this.pConn$.getCurrentPageFieldMetadata(contextPageReference);
 
       const { datasource: { parameters: fieldParameters = {} } = {}, pageClass } = metadata;
 
@@ -139,7 +137,7 @@ export class SimpleTableSelectComponent implements OnInit, OnDestroy {
       parameters: this.parameters
     };
 
-    this.filters = (this.pConn$.getRawMetadata() as any).config.promotedFilters ?? [];
+    this.filters = (this.pConn$.getRawMetadata()?.config as any).promotedFilters ?? [];
 
     this.isSearchable = this.filters.length > 0;
   }

package/lib/template/three-column/three-column.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, Input, forwardRef, OnChanges, SimpleChanges } from '
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { FormTemplateBase } from '@pega/angular-sdk-components';
 
 @Component({
   selector: 'app-three-column',
@@ -10,8 +11,8 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class ThreeColumnComponent implements OnInit, OnChanges {
-  @Input() pConn$: typeof PConnect;
+export class ThreeColumnComponent extends FormTemplateBase implements OnInit, OnChanges {
+  @Input() override pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 
   arChildren$: any[];
@@ -29,6 +30,6 @@ export class ThreeColumnComponent implements OnInit, OnChanges {
   }
 
   updateSelf() {
-    this.arChildren$ = this.pConn$.getChildren() as any[];
+    this.arChildren$ = this.pConn$.getChildren();
   }
 }

package/lib/template/two-column/two-column.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, Input, forwardRef, SimpleChanges, OnChanges } from '
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { FormTemplateBase } from '@pega/angular-sdk-components';
 
 @Component({
   selector: 'app-two-column',
@@ -10,8 +11,8 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class TwoColumnComponent implements OnInit, OnChanges {
-  @Input() pConn$: typeof PConnect;
+export class TwoColumnComponent extends FormTemplateBase implements OnInit, OnChanges {
+  @Input() override pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 
   arChildren$: any[];
@@ -29,6 +30,6 @@ export class TwoColumnComponent implements OnInit, OnChanges {
   }
 
   updateSelf() {
-    this.arChildren$ = this.pConn$.getChildren() as any[];
+    this.arChildren$ = this.pConn$.getChildren();
   }
 }

package/lib/template/two-column-tab/two-column-tab.component.ts

@@ -29,6 +29,6 @@ export class TwoColumnTabComponent implements OnInit, OnChanges {
   }
 
   updateSelf() {
-    this.arChildren$ = this.pConn$.getChildren() as any[];
+    this.arChildren$ = this.pConn$.getChildren();
   }
 }

package/lib/template/wide-narrow-form/wide-narrow-form.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, Input, forwardRef, OnChanges, SimpleChanges } from '
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { FormTemplateBase } from '@pega/angular-sdk-components';
 
 @Component({
   selector: 'app-wide-narrow-form',
@@ -10,8 +11,8 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class WideNarrowFormComponent implements OnInit, OnChanges {
-  @Input() pConn$: typeof PConnect;
+export class WideNarrowFormComponent extends FormTemplateBase implements OnInit, OnChanges {
+  @Input() override pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 
   arChildren$: any[];
@@ -29,6 +30,6 @@ export class WideNarrowFormComponent implements OnInit, OnChanges {
   }
 
   updateSelf() {
-    this.arChildren$ = this.pConn$.getChildren() as any[];
+    this.arChildren$ = this.pConn$.getChildren();
   }
 }

package/lib/template/wide-narrow-page/wide-narrow-page.component.ts

@@ -15,7 +15,7 @@ export class WideNarrowPageComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 
-  thePConnType = '';
+  thePConnType: string | undefined = '';
 
   // Used with AngularPConnect
   angularPConnectData: AngularPConnectData = {};

package/lib/template/wss-nav-bar/wss-nav-bar.component.html

@@ -25,7 +25,7 @@
       </mat-list-item>
       <mat-menu #menu="matMenu">
         <button mat-menu-item>Profile</button>
-        <button mat-menu-item (click)="navPanelLogoutClick()">Logoff</button>
+        <button mat-menu-item (click)="navPanelLogoutClick()">{{ localizedVal('Log off', localeCategory) }}</button>
       </mat-menu>
     </mat-list>
   </mat-toolbar-row>

package/lib/template/wss-nav-bar/wss-nav-bar.component.ts

@@ -37,11 +37,11 @@ export class WssNavBarComponent implements OnInit, OnDestroy {
   navExpandCollapse$: string;
   bShowCaseTypes$ = false;
 
-  portalApp$ = '';
+  portalApp$: string | undefined = '';
   portalLogoImage$: string;
   showAppName$ = false;
 
-  portalOperator$: string;
+  portalOperator$: string | undefined;
   portalOperatorInitials$: string;
 
   actionsAPI: any;
@@ -50,7 +50,8 @@ export class WssNavBarComponent implements OnInit, OnDestroy {
   logout: any;
 
   navIcon$: string;
-
+  localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  localeCategory = 'AppShell';
   constructor(
     private angularPConnect: AngularPConnectService,
     private cdRef: ChangeDetectorRef,
@@ -128,7 +129,7 @@ export class WssNavBarComponent implements OnInit, OnDestroy {
 
       this.portalLogoImage$ = this.utils.getSDKStaticContentUrl().concat('assets/pzpega-logo-mark.svg');
       this.portalOperator$ = PCore.getEnvironmentInfo().getOperatorName();
-      this.portalOperatorInitials$ = this.utils.getInitials(this.portalOperator$);
+      this.portalOperatorInitials$ = this.utils.getInitials(this.portalOperator$ ?? '');
       this.showAppName$ = this.configProps$.showAppName;
 
       this.portalApp$ = PCore.getEnvironmentInfo().getApplicationLabel();

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);
+}