From 08db8cd3f5770b05e399cf35ca5c44102dede95b Mon Sep 17 00:00:00 2001
From: JodieM <jminers@gmail.com>
Date: Sun, 18 Aug 2024 23:54:04 +1000
Subject: [PATCH 1/5] Dynamic Forms Layout without button layout changes

---
 .../lwc/indicatorBundle/indicatorBundle.html  | 41 ++++++++++++-------
 .../lwc/indicatorBundle/indicatorBundle.js    | 15 ++++++-
 .../indicatorBundle.js-meta.xml               |  1 +
 3 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/force-app/main/default/lwc/indicatorBundle/indicatorBundle.html b/force-app/main/default/lwc/indicatorBundle/indicatorBundle.html
index 9c4eebd..136365f 100644
--- a/force-app/main/default/lwc/indicatorBundle/indicatorBundle.html
+++ b/force-app/main/default/lwc/indicatorBundle/indicatorBundle.html
@@ -24,25 +24,38 @@
                         onclick={refreshCmdt}
                     ></lightning-button-icon>
                 </template>
-                <template lwc:if={hasHeader} class="cardIcon">
+                <template lwc:if={isDynamicForms}>
                     <template lwc:if={showTitle}>
-                        <h3 slot="title">
-                            <lightning-icon 
-                                lwc:if={card.icon}
-                                icon-name={card.icon} 
-                                size="small"
-                                class={card.iconClass}
-                            >
-                            </lightning-icon>
-                            {card.title}
-                        </h3>
+                        <div>
+                        <div class={sectionHeaderClass}>
+                                <h3 slot="title" class="label slds-section__title slds-truncate slds-p-top_xx-small slds-p-bottom_xx-small slds-theme_shade">
+                                <span class="slds-var-m-left_medium" title="Section Title">{card.title}</span>
+                                </h3>
+                            </div>
+                        </div>
                     </template>
-                    <template lwc:if={showDescription}>
-                        <p class="slds-var-p-horizontal_medium slds-var-p-bottom_small">{card.body}</p>
+                </template>
+                <template lwc:else>
+                    <template lwc:if={hasHeader} class="cardIcon">
+                        <template lwc:if={showTitle}>
+                            <h3 slot="title">
+                                <lightning-icon 
+                                    lwc:if={card.icon}
+                                    icon-name={card.icon} 
+                                    size="small"
+                                    class={card.iconClass}
+                                >
+                                </lightning-icon>
+                                {card.title}
+                            </h3>
+                        </template>
                     </template>
                 </template>
+                <template lwc:if={showDescription}>
+                    <p class="slds-var-p-horizontal_medium slds-var-p-bottom_small">{card.body}</p>
+                </template>
                 <!-- TODO: Do we put this in a Layout which would be responsive to the container, this could allow for empty slots too -->
-                <div class="slds-var-m-left_medium">
+                <div class="slds-var-m-left_medium slds-clearfix">
                     <template if:true={results}>
                         <template for:each={results} for:item="fld">
                             <c-indicator-bundle-item if:true={fld.fShowAvatar} key={fld.fName}
diff --git a/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js b/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js
index 2bb92c5..4f424a8 100644
--- a/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js
+++ b/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js
@@ -14,6 +14,7 @@ export default class IndicatorBundle extends LightningElement {
     @api flexipageRegionWidth;  // Width of the container on record page
     @api showDescription;
     @api showTitle;
+    @api pageUsage = 'standard';
     @api indsSize = 'large';
     @api indsShape = 'base';
     @api showRefresh = false;
@@ -106,11 +107,21 @@ export default class IndicatorBundle extends LightningElement {
                     if( this.showTitle || this.showDescription ){
                         this.hasHeader = true;
                     }
+                    
+                    if( this.pageUsage == 'dynamic'){
+                        this.isDynamicForms = true;
+                    }
 
                     if(this.bundle.CardIconBackground || this.bundle.CardIconForeground ){
-                        this.card.iconClass = 'cardIcon slds-var-m-right_xx-small ';
+                        this.card.iconClass = 'cardIcon slds-var-m-right_x-small ';
+                    } else {
+                        this.card.iconClass = 'slds-var-m-right_x-small ';
+                    }
+
+                    if(this.flexipageRegionWidth == 'SMALL'){
+                        this.sectionHeaderClass = 'slds-section slds-is-open slds-var-p-horizontal_medium';
                     } else {
-                        this.card.iconClass = 'slds-var-m-right_xx-small ';
+                        this.sectionHeaderClass = 'slds-section slds-is-open';
                     }
 
                     // console.log('Card Data');
diff --git a/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js-meta.xml b/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js-meta.xml
index 820c614..82286d0 100644
--- a/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js-meta.xml
+++ b/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js-meta.xml
@@ -10,6 +10,7 @@
     <targetConfigs>
         <targetConfig targets="lightning__RecordPage">
             <property name="bundleName" type="String" label="Indicator Bundle" datasource="apex://IndicatorListBundleSelector" description="Choose the Indicator Bundle."/>
+            <property name="pageUsage" type="String" label="Page Usage" placeholder="standard" datasource="standard,dynamic" description="Choose the Page Usage - Standard Lightning Page, or styled to match Dynamic Forms"/>
             <property name="showTitle" type="Boolean" default="true" label="Display Title" description="Display the Indicator's Title on the component."/>
             <property name="showDescription" type="Boolean" default="true" label="Display Description" description="Display the Indicator's Description on the component."/>
             <property name="indsSize" type="String" label="Indicator Size" placeholder="large" datasource="large,medium" description="Choose the Indicator Size."/>

From ad28d649edf8bd8830ad36840f7027ff2f86e21c Mon Sep 17 00:00:00 2001
From: JodieM <jminers@gmail.com>
Date: Sun, 1 Sep 2024 22:39:30 +1000
Subject: [PATCH 2/5] Changes to CSS to make titles Align. Change to CPE to use
 Title Style

---
 .../lwc/indicatorBundle/indicatorBundle.html  | 70 +++++++++++--------
 .../lwc/indicatorBundle/indicatorBundle.js    | 17 ++---
 .../indicatorBundle.js-meta.xml               |  2 +-
 3 files changed, 49 insertions(+), 40 deletions(-)

diff --git a/force-app/main/default/lwc/indicatorBundle/indicatorBundle.html b/force-app/main/default/lwc/indicatorBundle/indicatorBundle.html
index 136365f..6afd7c8 100644
--- a/force-app/main/default/lwc/indicatorBundle/indicatorBundle.html
+++ b/force-app/main/default/lwc/indicatorBundle/indicatorBundle.html
@@ -24,18 +24,7 @@
                         onclick={refreshCmdt}
                     ></lightning-button-icon>
                 </template>
-                <template lwc:if={isDynamicForms}>
-                    <template lwc:if={showTitle}>
-                        <div>
-                        <div class={sectionHeaderClass}>
-                                <h3 slot="title" class="label slds-section__title slds-truncate slds-p-top_xx-small slds-p-bottom_xx-small slds-theme_shade">
-                                <span class="slds-var-m-left_medium" title="Section Title">{card.title}</span>
-                                </h3>
-                            </div>
-                        </div>
-                    </template>
-                </template>
-                <template lwc:else>
+                <template lwc:if={isStandardUsage}>
                     <template lwc:if={hasHeader} class="cardIcon">
                         <template lwc:if={showTitle}>
                             <h3 slot="title">
@@ -51,26 +40,45 @@ <h3 slot="title">
                         </template>
                     </template>
                 </template>
-                <template lwc:if={showDescription}>
-                    <p class="slds-var-p-horizontal_medium slds-var-p-bottom_small">{card.body}</p>
-                </template>
-                <!-- TODO: Do we put this in a Layout which would be responsive to the container, this could allow for empty slots too -->
-                <div class="slds-var-m-left_medium slds-clearfix">
-                    <template if:true={results}>
-                        <template for:each={results} for:item="fld">
-                            <c-indicator-bundle-item if:true={fld.fShowAvatar} key={fld.fName}
-                                ind-text={fld.fTextShown}
-                                ind-size={indsSize}
-                                ind-shape={indsShape} 
-                                ind-hover-text={fld.fHoverValue}
-                                ind-icon={fld.fIconName}
-                                ind-image={fld.fImageURL}
-                                ind-background-color={fld.fIconBackground}
-                                ind-foreground-color={fld.fIconForeground}
-                                >
-                            </c-indicator-bundle-item>
+                <template lwc:else>
+                    <div class="slds-card__body slds-card__body_inner"> 
+                        <template lwc:if={showTitle}>
+                            <div class="section-layout-container slds-section slds-is-open slds-button slds-section__title-action slds-theme_shade">
+                                <h3 slot="title" class="slds-truncate slds-p-around_xx-small">
+                                <span class="slds-text-heading_small" title="Section Title">{card.title}</span>
+                                </h3>
+                            </div>
                         </template>
-                    </template>
+                    </div>
+                </template>
+                <div class={sectionBodyClass}>
+                    <div class="slds-col slds-grid slds-grid_vertical">                 
+                        <div class="slds-col">
+                            <template lwc:if={showDescription}>
+                                <p class="slds-var-p-left_medium slds-var-p-right_x-small slds-var-p-bottom_small">{card.body}</p>
+                            </template>
+                        </div>   
+                        <div class="slds-col">
+                        <!-- TODO: Do we put this in a Layout which would be responsive to the container, this could allow for empty slots too -->
+                            <div class="slds-var-p-left_medium slds-clearfix">
+                                <template if:true={results}>
+                                    <template for:each={results} for:item="fld">
+                                        <c-indicator-bundle-item if:true={fld.fShowAvatar} key={fld.fName}
+                                            ind-text={fld.fTextShown}
+                                            ind-size={indsSize}
+                                            ind-shape={indsShape} 
+                                            ind-hover-text={fld.fHoverValue}
+                                            ind-icon={fld.fIconName}
+                                            ind-image={fld.fImageURL}
+                                            ind-background-color={fld.fIconBackground}
+                                            ind-foreground-color={fld.fIconForeground}
+                                            >
+                                        </c-indicator-bundle-item>
+                                    </template>
+                                </template>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </lightning-card>
         </template>
diff --git a/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js b/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js
index 4f424a8..dad52fe 100644
--- a/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js
+++ b/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js
@@ -14,7 +14,7 @@ export default class IndicatorBundle extends LightningElement {
     @api flexipageRegionWidth;  // Width of the container on record page
     @api showDescription;
     @api showTitle;
-    @api pageUsage = 'standard';
+    @api titleStyle = 'Lightning Card';
     @api indsSize = 'large';
     @api indsShape = 'base';
     @api showRefresh = false;
@@ -58,6 +58,10 @@ export default class IndicatorBundle extends LightningElement {
         }
     }
 
+    get isStandardUsage(){
+        return this.titleStyle == 'Lightning Card';
+    }
+
     initCSSVariables() {
 
         if(this.bundle.CardIconBackground || this.bundle.CardIconForeground) {
@@ -107,21 +111,18 @@ export default class IndicatorBundle extends LightningElement {
                     if( this.showTitle || this.showDescription ){
                         this.hasHeader = true;
                     }
-                    
-                    if( this.pageUsage == 'dynamic'){
-                        this.isDynamicForms = true;
-                    }
 
                     if(this.bundle.CardIconBackground || this.bundle.CardIconForeground ){
                         this.card.iconClass = 'cardIcon slds-var-m-right_x-small ';
                     } else {
                         this.card.iconClass = 'slds-var-m-right_x-small ';
                     }
-
+                    
                     if(this.flexipageRegionWidth == 'SMALL'){
-                        this.sectionHeaderClass = 'slds-section slds-is-open slds-var-p-horizontal_medium';
+                        this.sectionBodyClass = 'slds-grid grid-wrap slds-card__body';
                     } else {
-                        this.sectionHeaderClass = 'slds-section slds-is-open';
+                        this.card.iconClass = 'slds-media__figure slds-var-m-right_xx-small';
+                        this.sectionBodyClass = 'slds-grid grid-wrap slds-card__body slds-card__body_inner';
                     }
 
                     // console.log('Card Data');
diff --git a/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js-meta.xml b/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js-meta.xml
index 82286d0..4633fce 100644
--- a/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js-meta.xml
+++ b/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js-meta.xml
@@ -10,7 +10,7 @@
     <targetConfigs>
         <targetConfig targets="lightning__RecordPage">
             <property name="bundleName" type="String" label="Indicator Bundle" datasource="apex://IndicatorListBundleSelector" description="Choose the Indicator Bundle."/>
-            <property name="pageUsage" type="String" label="Page Usage" placeholder="standard" datasource="standard,dynamic" description="Choose the Page Usage - Standard Lightning Page, or styled to match Dynamic Forms"/>
+            <property name="titleStyle" type="String" label="Title Style" placeholder="Lightning Card" datasource="Lightning Card,Dynamic Forms" description="Choose the Title Style - Standard Lightning Card, or title Style to match Dynamic Forms"/>
             <property name="showTitle" type="Boolean" default="true" label="Display Title" description="Display the Indicator's Title on the component."/>
             <property name="showDescription" type="Boolean" default="true" label="Display Description" description="Display the Indicator's Description on the component."/>
             <property name="indsSize" type="String" label="Indicator Size" placeholder="large" datasource="large,medium" description="Choose the Indicator Size."/>

From 82fc05d3ef6b4763249b60378d7d02439d50f22c Mon Sep 17 00:00:00 2001
From: JodieM <jminers@gmail.com>
Date: Mon, 2 Sep 2024 16:15:47 +1000
Subject: [PATCH 3/5] Incorporating vertical space changes into this branch
 also

---
 .forceignore                                  |  5 +++-
 .../indicatorBundleItem.html                  | 24 ++++++++++---------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/.forceignore b/.forceignore
index 6a0c7fe..fc86577 100644
--- a/.forceignore
+++ b/.forceignore
@@ -18,4 +18,7 @@ package.xml
 **/Account/**
 **/Contact/**
 
-**/unpackaged/**
\ No newline at end of file
+**/unpackaged/**
+**/tsconfig.json
+
+**/*.ts
diff --git a/force-app/main/default/lwc/indicatorBundleItem/indicatorBundleItem.html b/force-app/main/default/lwc/indicatorBundleItem/indicatorBundleItem.html
index c33ab5a..78ea653 100644
--- a/force-app/main/default/lwc/indicatorBundleItem/indicatorBundleItem.html
+++ b/force-app/main/default/lwc/indicatorBundleItem/indicatorBundleItem.html
@@ -1,13 +1,15 @@
 <template>
-    <template if:false={record}>
-        <lightning-avatar 
-            size={indSize}
-            variant={indShape}
-            initials={indText}
-            src={indImage} 
-            fallback-icon-name={indIcon}
-            alternative-text={indHoverText} 
-            class={indClass}>
-        </lightning-avatar>
-    </template>
+    <div class="slds-var-m-bottom_x-small slds-float_left">
+        <template if:false={record}>
+            <lightning-avatar 
+                size={indSize}
+                variant={indShape}
+                initials={indText}
+                src={indImage} 
+                fallback-icon-name={indIcon}
+                alternative-text={indHoverText} 
+                class={indClass}>
+            </lightning-avatar>
+        </template>
+    </div>
 </template>
\ No newline at end of file

From 304a2498a16445ab750791435adb8403020d134d Mon Sep 17 00:00:00 2001
From: JodieM <jminers@gmail.com>
Date: Mon, 2 Sep 2024 17:21:24 +1000
Subject: [PATCH 4/5] Modifed CSS for Dynamic Forms to be more like standard
 Field Sections

---
 .../main/default/lwc/indicatorBundle/indicatorBundle.html | 2 +-
 .../main/default/lwc/indicatorBundle/indicatorBundle.js   | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/force-app/main/default/lwc/indicatorBundle/indicatorBundle.html b/force-app/main/default/lwc/indicatorBundle/indicatorBundle.html
index 6afd7c8..96bac89 100644
--- a/force-app/main/default/lwc/indicatorBundle/indicatorBundle.html
+++ b/force-app/main/default/lwc/indicatorBundle/indicatorBundle.html
@@ -60,7 +60,7 @@ <h3 slot="title" class="slds-truncate slds-p-around_xx-small">
                         </div>   
                         <div class="slds-col">
                         <!-- TODO: Do we put this in a Layout which would be responsive to the container, this could allow for empty slots too -->
-                            <div class="slds-var-p-left_medium slds-clearfix">
+                            <div class="slds-var-m-left_medium slds-clearfix">
                                 <template if:true={results}>
                                     <template for:each={results} for:item="fld">
                                         <c-indicator-bundle-item if:true={fld.fShowAvatar} key={fld.fName}
diff --git a/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js b/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js
index dad52fe..8d3b515 100644
--- a/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js
+++ b/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js
@@ -118,11 +118,11 @@ export default class IndicatorBundle extends LightningElement {
                         this.card.iconClass = 'slds-var-m-right_x-small ';
                     }
                     
-                    if(this.flexipageRegionWidth == 'SMALL'){
-                        this.sectionBodyClass = 'slds-grid grid-wrap slds-card__body';
-                    } else {
-                        this.card.iconClass = 'slds-media__figure slds-var-m-right_xx-small';
+                    if(this.isStandardUsage != true){
                         this.sectionBodyClass = 'slds-grid grid-wrap slds-card__body slds-card__body_inner';
+                    } else {
+                        this.card.iconClass = 'slds-media__figure slds-var-m-right_x-small';
+                        this.sectionBodyClass = 'slds-grid grid-wrap slds-card__body';
                     }
 
                     // console.log('Card Data');

From 6bcbcc5a6347e8842f72c730f61f79d91a40a63b Mon Sep 17 00:00:00 2001
From: tschug <timschug@gmail.com>
Date: Mon, 7 Oct 2024 20:04:34 -0400
Subject: [PATCH 5/5] Pull Request changes

---
 .../indicatorBundle.js-meta.xml               |  2 +-
 .../indicatorBundleItem.html                  | 20 +++++++++----------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js-meta.xml b/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js-meta.xml
index 4633fce..7553d86 100644
--- a/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js-meta.xml
+++ b/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js-meta.xml
@@ -10,7 +10,7 @@
     <targetConfigs>
         <targetConfig targets="lightning__RecordPage">
             <property name="bundleName" type="String" label="Indicator Bundle" datasource="apex://IndicatorListBundleSelector" description="Choose the Indicator Bundle."/>
-            <property name="titleStyle" type="String" label="Title Style" placeholder="Lightning Card" datasource="Lightning Card,Dynamic Forms" description="Choose the Title Style - Standard Lightning Card, or title Style to match Dynamic Forms"/>
+            <property name="titleStyle" type="String" label="Title Style" placeholder="Lightning Card" datasource="Lightning Card,Dynamic Forms" description="Choose the Title Style: Standard Lightning Card or a style to match Dynamic Forms"/>
             <property name="showTitle" type="Boolean" default="true" label="Display Title" description="Display the Indicator's Title on the component."/>
             <property name="showDescription" type="Boolean" default="true" label="Display Description" description="Display the Indicator's Description on the component."/>
             <property name="indsSize" type="String" label="Indicator Size" placeholder="large" datasource="large,medium" description="Choose the Indicator Size."/>
diff --git a/force-app/main/default/lwc/indicatorBundleItem/indicatorBundleItem.html b/force-app/main/default/lwc/indicatorBundleItem/indicatorBundleItem.html
index 78ea653..55fdf6c 100644
--- a/force-app/main/default/lwc/indicatorBundleItem/indicatorBundleItem.html
+++ b/force-app/main/default/lwc/indicatorBundleItem/indicatorBundleItem.html
@@ -1,15 +1,13 @@
 <template>
     <div class="slds-var-m-bottom_x-small slds-float_left">
-        <template if:false={record}>
-            <lightning-avatar 
-                size={indSize}
-                variant={indShape}
-                initials={indText}
-                src={indImage} 
-                fallback-icon-name={indIcon}
-                alternative-text={indHoverText} 
-                class={indClass}>
-            </lightning-avatar>
-        </template>
+        <lightning-avatar 
+            size={indSize}
+            variant={indShape}
+            initials={indText}
+            src={indImage} 
+            fallback-icon-name={indIcon}
+            alternative-text={indHoverText} 
+            class={indClass}>
+        </lightning-avatar>
     </div>
 </template>
\ No newline at end of file