@pega/angular-sdk-overrides 24.2.10 → 25.1.10

package/lib/field/user-reference/user-reference.component.html

@@ -1,45 +1,47 @@
-<div class="psdk-user-reference">
+<div>
   <div *ngIf="displayMode$; else noDisplayMode">
     <component-mapper name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
   </div>
   <ng-template #noDisplayMode>
-    <div *ngIf="type === 'operator'">
-      <component-mapper name="Operator" [props]="{ pConn$ }"></component-mapper>
-    </div>
-    <div [formGroup]="formGroup$" *ngIf="type === 'dropdown'">
-      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
-        <mat-select [required]="bRequired$" [formControl]="fieldControl" [attr.data-test-id]="testId" (selectionChange)="fieldOnChange($event)">
-          <mat-option *ngFor="let opt of options$" [value]="opt.key">
-            {{ opt.value }}
-          </mat-option>
-        </mat-select>
-        <mat-label>{{ label$ }}</mat-label>
-        <mat-error *ngIf="fieldControl.invalid">
-          {{ getErrorMessage() }}
-        </mat-error>
-      </mat-form-field>
-    </div>
-    <div [formGroup]="formGroup$" *ngIf="type === 'searchbox'">
-      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
-        <mat-label>{{ label$ }}</mat-label>
-        <input
-          matInput
-          [placeholder]="placeholder"
-          [formControl]="fieldControl"
-          [required]="bRequired$"
-          [matAutocomplete]="auto"
-          [attr.data-test-id]="testId"
-          (blur)="fieldOnBlur($event)"
-        />
-        <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption (optionSelected)="optionChanged($event)">
-          <mat-option *ngFor="let opt of filteredOptions | async" [value]="opt.value">
-            <span>{{ opt.value }}</span>
-          </mat-option>
-        </mat-autocomplete>
-        <mat-error *ngIf="fieldControl.invalid">
-          {{ getErrorMessage() }}
-        </mat-error>
-      </mat-form-field>
+    <div class="psdk-user-reference">
+      <div *ngIf="this.userID$ && type === 'operator'">
+        <component-mapper name="Operator" [props]="{ pConn$, name$: userName$ }"></component-mapper>
+      </div>
+      <div [formGroup]="formGroup$" *ngIf="type === 'dropdown'">
+        <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+          <mat-select [required]="bRequired$" [formControl]="fieldControl" [attr.data-test-id]="testId" (selectionChange)="fieldOnChange($event)">
+            <mat-option *ngFor="let opt of options$" [value]="opt.key">
+              {{ opt.value }}
+            </mat-option>
+          </mat-select>
+          <mat-label>{{ label$ }}</mat-label>
+          <mat-error *ngIf="fieldControl.invalid">
+            {{ getErrorMessage() }}
+          </mat-error>
+        </mat-form-field>
+      </div>
+      <div [formGroup]="formGroup$" *ngIf="type === 'searchbox'">
+        <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+          <mat-label>{{ label$ }}</mat-label>
+          <input
+            matInput
+            [placeholder]="placeholder"
+            [formControl]="fieldControl"
+            [required]="bRequired$"
+            [matAutocomplete]="auto"
+            [attr.data-test-id]="testId"
+            (blur)="fieldOnBlur($event)"
+          />
+          <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption (optionSelected)="optionChanged($event)">
+            <mat-option *ngFor="let opt of filteredOptions | async" [value]="opt.value">
+              <span>{{ opt.value }}</span>
+            </mat-option>
+          </mat-autocomplete>
+          <mat-error *ngIf="fieldControl.invalid">
+            {{ getErrorMessage() }}
+          </mat-error>
+        </mat-form-field>
+      </div>
     </div>
   </ng-template>
 </div>

package/lib/field/user-reference/user-reference.component.scss

@@ -1,6 +1,5 @@
 .psdk-user-reference {
   font-size: 0.8rem;
-  color: var(--app-neutral-color);
 }
 .psdk-single {
   flex: 1;

package/lib/field/user-reference/user-reference.component.ts

@@ -30,7 +30,6 @@ interface UserReferenceProps extends Omit<PConnFieldProps, 'value'> {
   selector: 'app-user-reference',
   templateUrl: './user-reference.component.html',
   styleUrls: ['./user-reference.component.scss'],
-  standalone: true,
   imports: [
     CommonModule,
     ReactiveFormsModule,
@@ -65,7 +64,7 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
   filterValue = '';
 
   fieldControl = new FormControl('', null);
-  actionsApi: Object;
+  actionsApi: object;
   propName: string;
   onRecordChange: any;
 
@@ -168,7 +167,11 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
     this.placeholder = placeholder || '';
     this.displayMode$ = displayMode;
 
-    this.value$ = this.pConn$.getConfigProps()?.value;
+    if (value && typeof value === 'object') {
+      this.value$ = value.userName ? value.userName : '';
+    } else {
+      this.value$ = value || '';
+    }
 
     const { readOnly, required } = props;
     [this.bReadonly$, this.bRequired$] = [readOnly, required].map(prop => prop === true || (typeof prop === 'string' && prop === 'true'));
@@ -184,12 +187,8 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
       } else {
         // if same user ref field is referred in view as editable & readonly formatted text
         // referenced users won't be available, so get user details from dx api
-        const { getOperatorDetails } = PCore.getUserApi();
-        getOperatorDetails(this.userID$).then((resp: any) => {
-          if (resp.data && resp.data.pyOperatorInfo && resp.data.pyOperatorInfo.pyUserName) {
-            this.userName$ = resp.data.pyOperatorInfo.pyUserName;
-          }
-        });
+
+        this.userName$ = await getUserName(this.pConn$, this.userID$);
       }
     } else if (displayAs === DROPDOWN_LIST || displayAs === SEARCH_BOX) {
       const queryPayload = {
@@ -257,3 +256,65 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
     return errMessage;
   }
 }
+
+const buildColumnForDisplayValue = dataObj => {
+  if (dataObj.columns) {
+    dataObj.columns = dataObj.columns.map(column => {
+      const tempColObj = { ...column };
+      if (tempColObj.key === 'true') {
+        tempColObj.useForSearch = true;
+      } else {
+        tempColObj.useForSearch = false;
+      }
+      return tempColObj;
+    });
+  }
+};
+
+function getUserName(pConn, userId = ''): Promise<string> {
+  return new Promise(resolve => {
+    const { parameters = {}, referenceList } = pConn.getConfigProps();
+    const contextName = pConn.getContextName();
+
+    const OPERATORS_DP = referenceList || PCore.getEnvironmentInfo().getDefaultOperatorDP() || '';
+
+    const columns = [
+      {
+        value: 'pyUserName',
+        display: 'true',
+        useForSearch: true,
+        primary: 'true'
+      },
+      {
+        value: 'pyUserIdentifier',
+        setProperty: 'Associated property',
+        key: 'true',
+        display: 'true',
+        secondary: 'true',
+        useForSearch: true
+      }
+    ];
+
+    const dataConfig: any = {
+      dataSource: OPERATORS_DP,
+      parameters,
+      matchPosition: 'equals',
+      listType: 'datapage',
+      columns,
+      cacheLifeSpan: 'form',
+      deferDatasource: false,
+      maxResultsDisplay: '1',
+      ignoreCase: true
+    };
+
+    PCore.getDataApi()
+      .init(dataConfig, contextName)
+      .then(dataApiObj => {
+        buildColumnForDisplayValue(dataApiObj);
+        dataApiObj.registerForBufferedCall({ waitTime: 50 });
+        dataApiObj.fetchData(userId).then((response: any) => {
+          resolve(response.data?.[0]?.pyUserName || userId);
+        });
+      });
+  });
+}

package/lib/infra/Containers/flow-container/flow-container.component.html

@@ -1,7 +1,7 @@
 <div style="text-align: left" class="psdk-flow-container-top">
   <div *ngIf="!bShowConfirm">
     <div *ngIf="!todo_showTodo$">
-      <h2>{{ containerName$ }}</h2>
+      <h2 *ngIf="!isMultiStep">{{ containerName$ }}</h2>
       <div *ngIf="banners?.length">
         <component-mapper name="AlertBanner" [props]="{ banners }"></component-mapper>
       </div>
@@ -32,7 +32,7 @@
   </div>
   <div *ngIf="bHasCaseMessages$">
     <mat-card class="psdk-message-card">
-      <div style="display: flex; flex-direction: row">
+      <div style="display: flex; flex-direction: row; align-items: center">
         <div><img class="psdk-icon" src="{{ checkSvg$ }}" /></div>
         <div>{{ caseMessages$ }}</div>
       </div>

package/lib/infra/Containers/flow-container/flow-container.component.ts

@@ -6,7 +6,7 @@ import { publicConstants } from '@pega/pcore-pconnect-typedefs/constants';
 import { ProgressSpinnerService } from '@pega/angular-sdk-components';
 import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
-import { getToDoAssignments, showBanner } from './helpers';
+import { getToDoAssignments, hasAssignments, showBanner } from './helpers';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { FlowContainerBaseComponent } from '@pega/angular-sdk-components';
 
@@ -29,7 +29,6 @@ interface FlowContainerProps {
   templateUrl: './flow-container.component.html',
   styleUrls: ['./flow-container.component.scss'],
   providers: [Utils],
-  standalone: true,
   imports: [CommonModule, MatCardModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class FlowContainerComponent extends FlowContainerBaseComponent implements OnInit, OnDestroy {
@@ -71,6 +70,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
   // itemKey: string = "";   // JA - this is what Nebula/Constellation uses to pass to finishAssignment, navigateToStep
 
   pConnectOfActiveContainerItem;
+  isMultiStep: any;
 
   constructor(
     injector: Injector,
@@ -90,8 +90,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
 
     this.localizedVal = PCore.getLocaleUtils().getLocaleValue;
-    const caseInfo = this.pConn$.getCaseInfo();
-    this.localeReference = `${caseInfo?.getClassName()}!CASE!${caseInfo.getName()}`.toUpperCase();
+    this.localeReference = this.pConn$?.getCaseLocaleReference();
 
     // Then, continue on with other initialization
 
@@ -121,6 +120,14 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
       },
       'cancelPressed'
     );
+
+    PCore.getPubSubUtils().subscribe(
+      'clearBannerMessages',
+      () => {
+        this.banners = [];
+      },
+      'clearBannerMessages'
+    );
   }
 
   ngOnDestroy() {
@@ -131,6 +138,8 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
     PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL, 'cancelAssignment');
 
     PCore.getPubSubUtils().unsubscribe('cancelPressed', 'cancelPressed');
+
+    PCore.getPubSubUtils().unsubscribe('clearBannerMessages', 'clearBannerMessages');
   }
 
   handleCancel() {
@@ -155,13 +164,15 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
     const caseViewModeFromProps = this.angularPConnect.getComponentProp(this, 'caseViewMode');
     const caseViewModeFromRedux = pConn.getValue('context_data.caseViewMode', '');
 
+    const completeProps = this.angularPConnect.getCurrentCompleteProps(this) as FlowContainerProps;
+
     // ONLY call updateSelf when the component should update
     //    AND removing the "gate" that was put there since shouldComponentUpdate
     //      should be the real "gate"
+
     if (bUpdateSelf || caseViewModeFromProps !== caseViewModeFromRedux) {
       // don't want to redraw the flow container when there are page messages, because
       // the redraw causes us to loose the errors on the elements
-      const completeProps = this.angularPConnect.getCurrentCompleteProps(this) as FlowContainerProps;
       if (!completeProps.pageMessages || completeProps.pageMessages.length == 0) {
         // with a cancel, need to timeout so todo will update correctly
         if (this.bHasCancel) {
@@ -172,10 +183,10 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
         } else {
           this.updateSelf();
         }
-      } else {
-        this.showPageMessages(completeProps);
       }
     }
+
+    this.showPageMessages(completeProps);
   }
 
   showPageMessages(completeProps: FlowContainerProps) {
@@ -191,9 +202,9 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
       const kid = this.pConn$.getChildren()[0];
       const todoKid = kid.getPConnect().getChildren()[0];
 
-      this.todo_pConn$ = todoKid.getPConnect();
+      this.todo_pConn$ = todoKid?.getPConnect();
 
-      return true;
+      return !!this.todo_pConn$;
     }
 
     return !(caseViewMode && caseViewMode === 'perform');
@@ -270,48 +281,14 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
 
     // this.containerName$ = oWorkMeta["name"];
     if (bLoadChildren && oWorkData) {
-      this.containerName$ = this.localizedVal(this.getActiveViewLabel() || oWorkData.caseInfo.assignments[0].name, undefined, this.localeReference);
+      this.containerName$ = this.localizedVal(this.getActiveViewLabel() || oWorkData.caseInfo.assignments?.[0].name, undefined, this.localeReference);
+      this.isMultiStep = this.utils.getBooleanValue(oWorkData.caseInfo.assignments?.[0].isMultiStep);
     }
 
     // turn off spinner
     this.psService.sendMessage(false);
   }
 
-  hasAssignments() {
-    let hasAssignments = false;
-    const assignmentsList = this.pConn$.getValue(this.pCoreConstants.CASE_INFO.D_CASE_ASSIGNMENTS_RESULTS);
-    // const thisOperator = PCore.getEnvironmentInfo().getOperatorIdentifier();
-    // 8.7 includes assignments in Assignments List that may be assigned to
-    //  a different operator. So, see if there are any assignments for
-    //  the current operator
-    const isEmbedded = window.location.href.includes('embedded');
-    let bAssignmentsForThisOperator = false;
-
-    if (isEmbedded) {
-      const thisOperator = PCore.getEnvironmentInfo().getOperatorIdentifier();
-      for (const assignment of assignmentsList) {
-        if (assignment.assigneeInfo.ID === thisOperator) {
-          bAssignmentsForThisOperator = true;
-        }
-      }
-    } else {
-      bAssignmentsForThisOperator = true;
-    }
-
-    // Bail if there is no assignmentsList
-    if (!assignmentsList) {
-      return hasAssignments;
-    }
-
-    const hasChildCaseAssignments = this.hasChildCaseAssignments();
-
-    if (bAssignmentsForThisOperator || hasChildCaseAssignments || this.isCaseWideLocalAction()) {
-      hasAssignments = true;
-    }
-
-    return hasAssignments;
-  }
-
   isCaseWideLocalAction() {
     const actionID = this.pConn$.getValue(this.pCoreConstants.CASE_INFO.ACTIVE_ACTION_ID);
     const caseActions = this.pConn$.getValue(this.pCoreConstants.CASE_INFO.AVAILABLEACTIONS);
@@ -461,7 +438,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
     this.caseMessages$ = this.localizedVal(this.pConn$.getValue('caseMessages'), this.localeCategory);
     // caseMessages's behavior has changed in 24.2, and hence it doesn't let Optional Action work.
     // Changing the below condition for now. Was: (theCaseMessages || !hasAssignments())
-    if (!this.hasAssignments()) {
+    if (!hasAssignments(this.pConn$)) {
       this.bHasCaseMessages$ = true;
       this.bShowConfirm = true;
       this.checkSvg$ = this.utils.getImageSrc('check', this.utils.getSDKStaticContentUrl());
@@ -471,9 +448,6 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
         this.caseMessages$ = this.localizedVal('Thank you! The next step in this case has been routed appropriately.', this.localeCategory);
       }
 
-      // publish this "assignmentFinished" for mashup, need to get approved as a standard
-      PCore.getPubSubUtils().publish('assignmentFinished');
-
       this.psService.sendMessage(false);
     } else {
       this.bHasCaseMessages$ = false;
@@ -491,7 +465,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
       // @ts-ignore - Property 'getLoadingStatus' is private and only accessible within class 'C11nEnv'
       loadingInfo = this.pConn$.getLoadingStatus();
     } catch (ex) {
-      /* empty */
+      console.log(ex);
     }
 
     // this check in routingInfo, mimic Nebula/Constellation (React) to check and get the internals of the
@@ -513,7 +487,6 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
           }
         });
 
-        // eslint-disable-next-line sonarjs/no-collapsible-if
         if (currentOrder.length > 0) {
           if (currentItems[key] && currentItems[key].view && type === 'single' && Object.keys(currentItems[key].view).length > 0) {
             // when we get here, it it because the flow action data has changed

package/lib/infra/Containers/flow-container/helpers.ts

@@ -28,12 +28,12 @@ function getChildCaseAssignments(pConnect) {
   return allAssignments;
 }
 
-function hasAssignments(pConnect) {
+export function hasAssignments(pConnect) {
   const { CASE_INFO } = PCore.getConstants();
   const assignments = pConnect.getValue(CASE_INFO.D_CASE_ASSIGNMENTS_RESULTS);
   const childCasesAssignments = getChildCaseAssignments(pConnect);
 
-  return assignments || childCasesAssignments || isCaseWideLocalAction(pConnect);
+  return assignments || childCasesAssignments?.length || isCaseWideLocalAction(pConnect);
 }
 
 export const showBanner = getPConnect => {

package/lib/infra/Containers/hybrid-view-container/hybrid-view-container.component.ts

@@ -14,7 +14,6 @@ import { FormGroup } from '@angular/forms';
   selector: 'app-hybrid-view-container',
   templateUrl: './hybrid-view-container.component.html',
   styleUrls: ['./hybrid-view-container.component.scss'],
-  standalone: true,
   imports: [CommonModule]
 })
 export class HybridViewContainerComponent {

package/lib/infra/Containers/modal-view-container/modal-view-container.component.html

@@ -1,4 +1,4 @@
-<div id="dialog" *ngIf="bShowModal$ && bShowAsModal$" class="psdk-dialog-background">
+<div id="dialog" *ngIf="bShowModal$" class="psdk-dialog-background">
   <div class="psdk-modal-view-container-top" id="{{ buildName$ }}">
     <h3 *ngIf="title$ != ''">{{ title$ }}</h3>
     <component-mapper
@@ -15,16 +15,6 @@
   </div>
 </div>
 
-<div *ngIf="bShowModal$ && !bShowAsModal$">
-  <div id="{{ buildName$ }}">
-    <h3 *ngIf="title$ != ''">{{ title$ }}</h3>
-    <component-mapper
-      name="Assignment"
-      [props]="{ pConn$: createdViewPConn$, formGroup$, arChildren$, itemKey$, isCreateStage$: true, updateToken$ }"
-    ></component-mapper>
-  </div>
-</div>
-
 <div *ngIf="bShowCancelAlert$">
   <component-mapper
     name="CancelAlert"

package/lib/infra/Containers/modal-view-container/modal-view-container.component.ts

@@ -18,12 +18,10 @@ import { ReferenceComponent } from '@pega/angular-sdk-components';
   selector: 'app-modal-view-container',
   templateUrl: './modal-view-container.component.html',
   styleUrls: ['./modal-view-container.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class ModalViewContainerComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
-  @Input() displayOnlyFA$: boolean;
 
   // for when non modal
   @Output() modalVisibleChange = new EventEmitter<boolean>();
@@ -32,17 +30,16 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
   angularPConnectData: AngularPConnectData = {};
 
   arChildren$: any[];
-  stateProps$: Object;
+  stateProps$: object;
   banners: any;
   templateName$: string;
   buildName$: string;
   context$: string;
   title$ = '';
   bShowModal$ = false;
-  bShowAsModal$ = true;
   itemKey$: string;
   formGroup$: FormGroup;
-  oCaseInfo: Object = {};
+  oCaseInfo: object = {};
 
   // for causing a change on assignment
   updateToken$ = 0;
@@ -73,11 +70,6 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    if (this.displayOnlyFA$) {
-      // for when non modal
-      this.bShowAsModal$ = false;
-    }
-
     // First thing in initialization is registering and subscribing to the AngularPConnect service
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
 
@@ -142,7 +134,7 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
       // @ts-ignore - Property 'getLoadingStatus' is private and only accessible within class 'C11nEnv'
       loadingInfo = this.pConn$.getLoadingStatus();
     } catch (ex) {
-      /* empty */
+      console.log(ex);
     }
     // const configProps = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
     this.stateProps$ = this.pConn$.getStateProps();
@@ -242,12 +234,7 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
         this.title$ =
           isDataObject || this.isMultiRecord
             ? this.getModalHeading(dataObjectAction)
-            : this.determineModalHeaderByAction(
-                actionName,
-                caseTypeName,
-                ID,
-                `${theNewCaseInfo?.getClassName()}!CASE!${theNewCaseInfo.getName()}`.toUpperCase()
-              );
+            : this.determineModalHeaderByAction(actionName, caseTypeName, ID, this.createdViewPConn$?.getCaseLocaleReference());
 
         const bIsRefComponent = this.checkIfRefComponent(newComp);
 
@@ -372,7 +359,7 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
     return {};
   }
 
-  compareCaseInfoIsDifferent(oCurrentCaseInfo: Object): boolean {
+  compareCaseInfoIsDifferent(oCurrentCaseInfo: object): boolean {
     let bRet = false;
 
     // fast-deep-equal version

package/lib/infra/Containers/view-container/helper.ts

@@ -10,13 +10,46 @@ export const addContainerItem = pConnect => {
 export const configureBrowserBookmark = pConnect => {
   const context = pConnect.getContextName();
   const containerName = pConnect.getContainerName();
+  const envInfo = PCore.getEnvironmentInfo();
+  const { APP } = PCore.getConstants();
+
   const navPages = pConnect.getValue('pyPortal.pyPrimaryNavPages');
-  const defaultViewLabel = Array.isArray(navPages) && navPages[0] ? navPages[0].pyLabel : '';
+  let ruleName = '';
+  let className = '';
+  let defaultViewLabel = '';
+
+  const isNextGenLandingPageRouting = (envInfo?.environmentInfoObject as any)?.pyExecutionRuntimeName === (APP as any).INFINITY_RUNTIME;
+
+  if (Array.isArray(navPages) && navPages.length > 0) {
+    const firstNavPage = navPages[0];
+    const nestedNavPage = firstNavPage.NavigationPages?.[0];
+
+    if (isNextGenLandingPageRouting) {
+      if (nestedNavPage?.pyRuleName) {
+        ruleName = nestedNavPage.pyRuleName;
+        className = nestedNavPage.pyClassName || '';
+      } else if (firstNavPage?.pyRuleName) {
+        ruleName = firstNavPage.pyRuleName;
+        className = firstNavPage.pyClassName || '';
+      } else if (nestedNavPage?.pyLabel) {
+        defaultViewLabel = nestedNavPage.pyLabel;
+      } else if (firstNavPage?.pyLabel) {
+        defaultViewLabel = firstNavPage.pyLabel;
+      }
+    } else if (nestedNavPage?.pyLabel) {
+      defaultViewLabel = nestedNavPage.pyLabel;
+    } else if (firstNavPage?.pyLabel) {
+      defaultViewLabel = firstNavPage.pyLabel;
+    }
+  }
+
   PCore.configureForBrowserBookmark({
     context,
     containerName,
     acName: containerName,
     semanticURL: '',
-    defaultViewLabel
+    defaultViewLabel,
+    ruleName,
+    className
   });
 };

package/lib/infra/Containers/view-container/view-container.component.ts

@@ -28,7 +28,6 @@ interface ViewContainerProps {
   selector: 'app-view-container',
   templateUrl: './view-container.component.html',
   styleUrls: ['./view-container.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class ViewContainerComponent implements OnInit, OnDestroy {
@@ -162,7 +161,7 @@ export class ViewContainerComponent implements OnInit, OnDestroy {
 
       this.psService.sendMessage(loadingInfo);
     } catch (ex) {
-      /* empty */
+      console.log(ex);
     }
 
     // const buildName = this.buildName();

package/lib/infra/action-buttons/action-buttons.component.html

@@ -1,12 +1,17 @@
-<mat-grid-list cols="2" rowHeight="6.25rem">
-  <mat-grid-tile>
-    <button *ngFor="let aButton of arSecondaryButtons$" mat-raised-button color="secondary" (click)="buttonClick(aButton.jsAction, 'secondary')">
+<div class="button-bar" *ngIf="arMainButtons$ && arSecondaryButtons$">
+  <div class="left-group">
+    <button
+      *ngFor="let aButton of arSecondaryButtons$"
+      mat-stroked-button
+      class="secondary-button"
+      (click)="buttonClick(aButton.jsAction, 'secondary')"
+    >
       {{ localizedVal(aButton.name, localeCategory) }}
     </button>
-  </mat-grid-tile>
-  <mat-grid-tile>
-    <button *ngFor="let aButton of arMainButtons$" mat-raised-button color="primary" (click)="buttonClick(aButton.jsAction, 'primary')">
+  </div>
+  <div class="right-group">
+    <button *ngFor="let aButton of arMainButtons$" mat-flat-button (click)="buttonClick(aButton.jsAction, 'primary')">
       {{ localizedVal(aButton.name, localeCategory) }}
     </button>
-  </mat-grid-tile>
-</mat-grid-list>
+  </div>
+</div>

package/lib/infra/action-buttons/action-buttons.component.scss

@@ -0,0 +1,23 @@
+.button-bar {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  padding: 1rem;
+}
+
+.left-group,
+.right-group {
+  display: flex;
+  gap: 1rem;
+}
+
+.right-group {
+  margin-left: auto;
+}
+
+.secondary-button {
+  background-color: var(--app-sys-secondary-button-background);
+  border-color: var(--app-sys-secondary-button-border);
+}