refactor: changing displayMode value to DISPLAY_ONLY

package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-components-sdk",
-  "version": "0.1.0",
+  "version": "24.2.10",
   "private": true,
   "scripts": {
     "analyze": "cem analyze --litelement --globs \"src/**/*.ts\"",
@@ -32,14 +32,13 @@
   },
   "dependencies": {
     "@lion/ui": "^0.7.6",
-    "@pega/auth": "^0.2.4",
+    "@pega/auth": "^0.2.15",
     "@vaadin/grid": "^24.4.6",
     "@vaadin/notification": "^24.4.6",
     "@vaadin/router": "^2.0.0",
     "@vaadin/text-field": "^24.4.6",
     "dayjs": "^1.11.13",
-    "downloadjs": "^1.4.7",
-    "fast-deep-equal": "^3.1.3"
+    "downloadjs": "^1.4.7"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.6.3",

src/bridge/BridgeBase/index.ts

@@ -3,7 +3,6 @@
 //  best practice to ensure compatible versions is to import LitElement from lit
 import { LitElement, html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
-import * as isEqual from 'fast-deep-equal';
 import Utils from '../../helpers/utils';
 import { bootstrapStyles } from './bootstrap-styles';
 
@@ -72,15 +71,6 @@ export class BridgeBase extends LitElement {
     this.theStore = PCore.getStore();
     this.theComponentProps = {};
     this.renderTemplates = [];
-
-    // Always best to use deep object compare when it's available
-    if (isEqual !== undefined) {
-      if (this.bLogging) {
-        console.log(`${this.theComponentName}: [${this.theComponentId}] using deep object compare`);
-      }
-    } else if (this.bLogging) {
-      console.log(`${this.theComponentName}: [${this.theComponentId}] using JSON.stringify compare`);
-    }
   }
 
   /**
@@ -326,9 +316,8 @@ export class BridgeBase extends LitElement {
     const currentProps: any = currentComponentProps;
 
     // compare to current to prior props. If different, update stored props and return true
-    // fast-deep-equal version
-    if (isEqual !== undefined) {
-      bRet = !isEqual(priorProps, currentProps);
+    if (PCore.isDeepEqual !== undefined) {
+      bRet = !PCore.isDeepEqual(priorProps, currentProps);
     } else {
       // stringify compare version
       const priorPropsAsStr: string = JSON.stringify(priorProps);

src/components/DeferLoad/index.ts

@@ -163,7 +163,7 @@ class DeferLoad extends BridgeBase {
         }
       };
       const configObject = PCore.createPConnect(config);
-      configObject.getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
+      configObject.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
       this.loadedPConn = configObject.getPConnect();
       this.componentName = this.loadedPConn.getComponentName();
       // ${BridgeBase.getComponentFromConfigObj(config)}

src/components/ModalViewContainer/index.ts

@@ -5,7 +5,6 @@ import { BridgeBase } from '../../bridge/BridgeBase';
 
 // import the component's styles as HTML with <style>
 import { modalViewContainerStyles } from './modal-view-container-styles';
-import * as isEqual from 'fast-deep-equal';
 
 import '../CancelAlert';
 
@@ -386,9 +385,8 @@ class ModalViewContainer extends BridgeBase {
   compareCaseInfoIsDifferent(oCurrentCaseInfo: Object): boolean {
     let bRet = false;
 
-    // fast-deep-equal version
-    if (isEqual !== undefined) {
-      bRet = !isEqual(this.oCaseInfo, oCurrentCaseInfo);
+    if (PCore.isDeepEqual !== undefined) {
+      bRet = !PCore.isDeepEqual(this.oCaseInfo, oCurrentCaseInfo);
     } else {
       const sCurrnentCaseInfo = JSON.stringify(oCurrentCaseInfo);
       const sOldCaseInfo = JSON.stringify(this.oCaseInfo);

src/components/NavBar/navbar-styles.ts

@@ -60,11 +60,6 @@ export const navbarStyles = html`
       color: var(--app-nav-color);
       overflow: hidden;
       white-space: nowrap;
-      transition: width var(--transition-medium) var(--natural-ease);
-      will-change: width;
-    }
-
-    .psdk-appshell-nav:hover {
       width: var(--app-nav-width-expanded);
     }
 

src/components/fields/SemanticLink/index.ts

@@ -97,7 +97,7 @@ class SemanticLink extends BridgeBase {
   }
 
   getSingleReferenceHtml(): any {
-    if (this.displayMode === 'LABELS_LEFT' || (!this.displayMode && this.label !== undefined)) {
+    if (this.displayMode === 'DISPLAY_ONLY' || (!this.displayMode && this.label !== undefined)) {
       return html`<div>
         <div class="psdk-grid-filter" id="semantic-link-grid">
           <div class="psdk-field-label">${this.label}</div>

src/components/templates/AppShell/appshell-styles.ts

@@ -7,10 +7,6 @@ export const appShellStyles = html`
       background-color: var(--app-background-color);
     }
 
-    .nav-bar {
-      width: 10%;
-    }
-
     .appshell-main {
       position: relative;
       min-height: 100vh;

src/components/templates/DataReference/index.ts

@@ -80,7 +80,7 @@ class DataReference extends BridgeBase {
     this.hideLabel = theConfigProps.hideLabel;
 
     this.childrenToRender = this.children;
-    this.isDisplayModeEnabled = ['LABELS_LEFT', 'STACKED_LARGE_VAL'].includes(this.displayMode);
+    this.isDisplayModeEnabled = ['DISPLAY_ONLY', 'STACKED_LARGE_VAL'].includes(this.displayMode);
 
     this.propsToUse = { label: this.label, showLabel: this.showLabel, ...this.thePConn.getInheritedProps() };
     if (this.propsToUse.showLabel === false) {

src/components/templates/FieldGroupTemplate/index.ts

@@ -94,7 +94,7 @@ class FieldGroupTemplate extends BridgeBase {
     this.configProps = this.thePConn.getConfigProps() as FieldGroupTemplateProps;
     const renderMode = this.configProps.renderMode;
     const displayMode = this.configProps.displayMode;
-    this.readonlyMode = renderMode === 'ReadOnly' || displayMode === 'LABELS_LEFT';
+    this.readonlyMode = renderMode === 'ReadOnly' || displayMode === 'DISPLAY_ONLY';
     this.contextClass = this.configProps.contextClass;
     const lookForChildInConfig = this.configProps.lookForChildInConfig;
     this.heading = this.configProps.heading ?? 'Row';

src/components/templates/details/Details/index.ts

@@ -72,7 +72,7 @@ class Details extends DetailsTemplateBase {
         if (theCompType === 'reference') {
           const configObj = thePConn.getReferencedView();
           configObj.config.readOnly = true;
-          configObj.config.displayMode = 'LABELS_LEFT';
+          configObj.config.displayMode = 'DISPLAY_ONLY';
           const propToUse = { ...thePConn.getInheritedProps() };
           configObj.config.label = propToUse?.label;
           const loadedPConn = thePConn.getReferencedViewPConnect(true).getPConnect();

src/helpers/field-group-utils.ts

@@ -46,8 +46,8 @@ export class FieldGroupUtils {
     };
 
     const view = PCore.createPConnect(config);
-    if (pConn.getConfigProps()?.displayMode === 'LABELS_LEFT') {
-      view.getPConnect()?.setInheritedProp('displayMode', 'LABELS_LEFT');
+    if (pConn.getConfigProps()?.displayMode === 'DISPLAY_ONLY') {
+      view.getPConnect()?.setInheritedProp('displayMode', 'DISPLAY_ONLY');
     }
     return view;
   }