From b05c0d8a0dd948d8ac569c6521e0febf8abf39f6 Mon Sep 17 00:00:00 2001
From: tschug <timschug@gmail.com>
Date: Thu, 21 Nov 2024 04:12:16 -0500
Subject: [PATCH] Stable draft of Indicator Badges

---
 force-app/main/default/classes/Cmdt.cls       | 10 ++++-
 .../default/classes/IndicatorController.cls   | 25 +++++++++++-
 .../lwc/indicatorBundle/indicatorBundle.html  | 38 ++++++++++++++-----
 .../lwc/indicatorBundle/indicatorBundle.js    | 27 +++++++++++--
 .../indicatorBundle.js-meta.xml               |  7 ++--
 .../__tests__/indicatorBundleBadge.test.js    | 25 ++++++++++++
 .../indicatorBundleBadge.css                  |  5 +++
 .../indicatorBundleBadge.html                 | 11 ++++++
 .../indicatorBundleBadge.js                   | 37 ++++++++++++++++++
 .../indicatorBundleBadge.js-meta.xml          |  5 +++
 .../Badge_Icon_Position__c.field-meta.xml     | 25 ++++++++++++
 .../fields/Badge_Text_Color__c.field-meta.xml | 12 ++++++
 .../Badge_Icon_Position__c.field-meta.xml     | 25 ++++++++++++
 .../fields/Badge_Text_Color__c.field-meta.xml | 12 ++++++
 ...erse_Badge_Icon_Position__c.field-meta.xml | 25 ++++++++++++
 ...Inverse_Badge_Text_Color__c.field-meta.xml | 12 ++++++
 16 files changed, 281 insertions(+), 20 deletions(-)
 create mode 100644 force-app/main/default/lwc/indicatorBundleBadge/__tests__/indicatorBundleBadge.test.js
 create mode 100644 force-app/main/default/lwc/indicatorBundleBadge/indicatorBundleBadge.css
 create mode 100644 force-app/main/default/lwc/indicatorBundleBadge/indicatorBundleBadge.html
 create mode 100644 force-app/main/default/lwc/indicatorBundleBadge/indicatorBundleBadge.js
 create mode 100644 force-app/main/default/lwc/indicatorBundleBadge/indicatorBundleBadge.js-meta.xml
 create mode 100644 force-app/main/default/objects/Indicator_Item_Extension__mdt/fields/Badge_Icon_Position__c.field-meta.xml
 create mode 100644 force-app/main/default/objects/Indicator_Item_Extension__mdt/fields/Badge_Text_Color__c.field-meta.xml
 create mode 100644 force-app/main/default/objects/Indicator_Item__mdt/fields/Badge_Icon_Position__c.field-meta.xml
 create mode 100644 force-app/main/default/objects/Indicator_Item__mdt/fields/Badge_Text_Color__c.field-meta.xml
 create mode 100644 force-app/main/default/objects/Indicator_Item__mdt/fields/Inverse_Badge_Icon_Position__c.field-meta.xml
 create mode 100644 force-app/main/default/objects/Indicator_Item__mdt/fields/Inverse_Badge_Text_Color__c.field-meta.xml

diff --git a/force-app/main/default/classes/Cmdt.cls b/force-app/main/default/classes/Cmdt.cls
index b36d92c..3a3b79c 100644
--- a/force-app/main/default/classes/Cmdt.cls
+++ b/force-app/main/default/classes/Cmdt.cls
@@ -47,7 +47,11 @@ public with sharing class Cmdt {
                 Icon_Foreground__c,
                 Inverse_Icon_Background__c,
                 Inverse_Icon_Foreground__c,
-                Description__c
+                Description__c,
+                Badge_Text_Color__c,
+                Badge_Icon_Position__c,
+                Inverse_Badge_Text_Color__c,
+                Inverse_Badge_Icon_Position__c
             FROM Indicator_Item__mdt
             // WHERE Active__c = TRUE
         ]){
@@ -85,7 +89,9 @@ public with sharing class Cmdt {
                 Static_Text__c,
                 Icon_Background__c,
                 Icon_Foreground__c,
-                Description__c
+                Description__c,
+                Badge_Text_Color__c,
+                Badge_Icon_Position__c
             FROM Indicator_Item_Extension__mdt
             // WHERE Active__c = TRUE
             // AND Indicator_Item__r.Active__c = TRUE
diff --git a/force-app/main/default/classes/IndicatorController.cls b/force-app/main/default/classes/IndicatorController.cls
index c2859c2..603c9dd 100644
--- a/force-app/main/default/classes/IndicatorController.cls
+++ b/force-app/main/default/classes/IndicatorController.cls
@@ -84,6 +84,14 @@ public with sharing class IndicatorController {
         public String InverseBackgroundColor {get; set;}
         @AuraEnabled
         public String InverseForegroundColor {get; set;}
+        @AuraEnabled
+        public String BadgeTextColor {get; set;}
+        @AuraEnabled
+        public String BadgeIconPosition {get; set;}
+        @AuraEnabled
+        public String FalseBadgeTextColor {get; set;}
+        @AuraEnabled
+        public String FalseBadgeIconPosition {get; set;}
     }
 
     public class IndicatorExtension {
@@ -115,6 +123,10 @@ public with sharing class IndicatorController {
         public String BackgroundColor {get; set;}
         @AuraEnabled
         public String ForegroundColor {get; set;}
+        @AuraEnabled
+        public String BadgeTextColor {get; set;}
+        @AuraEnabled
+        public String BadgeIconPosition {get; set;}
     }
     
     @AuraEnabled
@@ -206,6 +218,10 @@ public with sharing class IndicatorController {
                 item.ForegroundColor = indicatorItem.Icon_Foreground__c;
                 item.InverseBackgroundColor = indicatorItem.Inverse_Icon_Background__c;
                 item.InverseForegroundColor = indicatorItem.Inverse_Icon_Foreground__c;
+                item.BadgeTextColor = indicatorItem.Badge_Text_Color__c;
+                item.BadgeIconPosition = indicatorItem.Badge_Icon_Position__c;
+                item.FalseBadgeTextColor = indicatorItem.Inverse_Badge_Text_Color__c;
+                item.FalseBadgeIconPosition = indicatorItem.Inverse_Badge_Icon_Position__c;
                 
                 List<Indicator_Item_Extension__mdt> itemExtensions = Cmdt.getExtensionsForItem(indicatorItem.DeveloperName);
 
@@ -229,7 +245,8 @@ public with sharing class IndicatorController {
                         extension.ExtensionId = itemExtension.Id;
                         extension.BackgroundColor = itemExtension.Icon_Background__c;
                         extension.ForegroundColor = itemExtension.Icon_Foreground__c;
-        
+                        extension.BadgeTextColor = itemExtension.Badge_Text_Color__c;
+                        extension.BadgeIconPosition = itemExtension.Badge_Icon_Position__c;
                         item.Extensions.add(extension);
                     }
 
@@ -306,6 +323,10 @@ public with sharing class IndicatorController {
                         item.ForegroundColor = indicatorItem.Icon_Foreground__c;
                         item.InverseBackgroundColor = indicatorItem.Inverse_Icon_Background__c;
                         item.InverseForegroundColor = indicatorItem.Inverse_Icon_Foreground__c;
+                        item.BadgeTextColor = indicatorItem.Badge_Text_Color__c;
+                        item.BadgeIconPosition = indicatorItem.Badge_Icon_Position__c;
+                        item.FalseBadgeTextColor = indicatorItem.Inverse_Badge_Text_Color__c;
+                        item.FalseBadgeIconPosition = indicatorItem.Inverse_Badge_Icon_Position__c;
                         
                         List<Indicator_Item_Extension__mdt> itemExtensions = Cmdt.getExtensionsForItem(indicatorItem.DeveloperName);
 
@@ -329,6 +350,8 @@ public with sharing class IndicatorController {
                                 extension.ExtensionId = itemExtension.Id;
                                 extension.BackgroundColor = itemExtension.Icon_Background__c;
                                 extension.ForegroundColor = itemExtension.Icon_Foreground__c;
+                                extension.BadgeTextColor = itemExtension.Badge_Text_Color__c;
+                                extension.BadgeIconPosition = itemExtension.Badge_Icon_Position__c;
                 
                                 item.Extensions.add(extension);
                             }
diff --git a/force-app/main/default/lwc/indicatorBundle/indicatorBundle.html b/force-app/main/default/lwc/indicatorBundle/indicatorBundle.html
index b892cc9..eb911e9 100644
--- a/force-app/main/default/lwc/indicatorBundle/indicatorBundle.html
+++ b/force-app/main/default/lwc/indicatorBundle/indicatorBundle.html
@@ -50,17 +50,32 @@ <h3 slot="title" class="slds-truncate slds-p-around_xx-small">
                         <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}
+                                    <template lwc:if={showAvatarStyle}>
+                                        <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 lwc:if={showBadgeStyle}>
+                                        <c-indicator-bundle-badge if:true={fld.fShowAvatar} key={fld.fName}
+                                            ind-text={fld.fHoverValue} 
+
+                                            ind-icon={fld.fIconName}
+                                            ind-icon-position={fld.fIconPosition}
+                                            ind-background-color={fld.fIconBackground}
+                                            ind-foreground-color={fld.fIconForeground}
+                                            ind-text-color={fld.fTextColor}
                                         >
-                                    </c-indicator-bundle-item>
+                                            <!-- ind-hover-text={fld.fHoverValue} -->
+                                        </c-indicator-bundle-badge>
+                                    </template>
                                 </template>
                             </template>
                         </div>
@@ -92,6 +107,9 @@ <h3 slot="title" class="slds-truncate slds-p-around_xx-small">
                         </div>
                     </div>
                 </div>
+                <!-- <template if:true={results}>
+
+                </template> -->
                 <template lwc:if={displayFooter}>
                     <footer class="slds-card__footer">
                         <lightning-badge label={mappedField}></lightning-badge>
diff --git a/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js b/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js
index 0872d54..08f80e1 100644
--- a/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js
+++ b/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js
@@ -16,6 +16,7 @@ export default class IndicatorBundle extends LightningElement {
     @api showDescription;
     @api showTitle;
     @api titleStyle = 'Lightning Card';
+    @api indsStyle = 'avatar';
     @api indsSize = 'large';
     @api indsShape = 'base';
     @api showRefresh = false;
@@ -133,7 +134,7 @@ export default class IndicatorBundle extends LightningElement {
         const { data, error } = result;
         if(data) {
             if(Object.keys(data).length) {  // Used to confirm that values were returned, rather than an empty object
-                // console.dir(data);   // Retain for debug purposes
+                console.dir(data);   // Retain for debug purposes
 
                 this.bundle = data;
                 this.bundleActive = true;
@@ -237,7 +238,7 @@ export default class IndicatorBundle extends LightningElement {
                     let anyMatch = false;
                     if(item.IsActive){
                         
-                        // console.dir(item);   // Retain for debug purposes
+                        console.dir(item);   // Retain for debug purposes
                                         
                         let dataField = this.objectApiName + "." + item.FieldApiName;
                         // console.log('DataField',dataField);   // Retain for debug purposes
@@ -388,6 +389,16 @@ export default class IndicatorBundle extends LightningElement {
                                     } : {
                                         fIconForeground: item.DisplayFalse? item.InverseForegroundColor : item.ForegroundColor
                                     },
+                                ...dataValue || dataValue === 0 ? {
+                                        fTextColor : matchedExtension ? matchedExtension.BadgeTextColor : item.BadgeTextColor
+                                    } : {
+                                        fTextColor: item.DisplayFalse? item.FalseBadgeTextColor : item.BadgeTextColor
+                                    },
+                                ...dataValue || dataValue === 0 ? {
+                                        fIconPosition : matchedExtension ? matchedExtension.BadgeIconPosition : item.BadgeIconPosition
+                                    } : {
+                                        fIconPosition: item.DisplayFalse? item.FalseBadgeIconPosition : item.BadgeIconPosition
+                                    },
                                 //If the False Icon and False Text is entered and the Boolean is False or text value is empty, then set the False Text
                                 //If the Icon Text is entered then show that
                                 //If no Icon Text is entered if the field is a Boolean then show the icon otherwise show the field value    
@@ -396,7 +407,7 @@ export default class IndicatorBundle extends LightningElement {
                                             fTextShown: matchedExtension.TextValue ? matchedExtension.TextValue.substring(0,3) : ''
                                         } : {
                                         ...dataValue && item.TextValue ? {
-                                                fTextShown : item.TextValue.substring(0,3) 
+                                                fTextShown : this.indsStyle === 'avatar' ? item.TextValue.substring(0,3) : item.TextValue
                                             } : {
                                                 ...item.EmptyStaticBehavior === 'Use Icon Only' ? { 
                                                         fTextShown : '' 
@@ -407,7 +418,7 @@ export default class IndicatorBundle extends LightningElement {
                                         }
                                     } : {
                                     ...(dataValue === false || dataValue === null || dataValue === '') && item.DisplayFalse ? {
-                                            fTextShown : item.FalseTextValue ? item.FalseTextValue.substring(0,3) : ''
+                                            fTextShown : item.FalseTextValue ? this.indsStyle === 'avatar' ? item.FalseTextValue.substring(0,3) : item.FalseTextValue : ''
                                         } : {
                                             fTextShown : '' 
                                         }
@@ -440,4 +451,12 @@ export default class IndicatorBundle extends LightningElement {
         console.log(result);
     }
 
+    get showAvatarStyle(){
+        return this.indsStyle === 'avatar';
+    }
+
+    get showBadgeStyle(){
+        return this.indsStyle === 'badge';
+    }
+
 }
\ No newline at end of file
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 342f3b2..ef8c101 100644
--- a/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js-meta.xml
+++ b/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js-meta.xml
@@ -9,12 +9,13 @@
     </targets>
     <targetConfigs>
         <targetConfig targets="lightning__RecordPage">
-            <property name="bundleName" type="String" label="Indicator Bundle" datasource="apex://inds.IndicatorListBundleSelector" description="Choose the Indicator Bundle."/>
+            <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 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."/>
-            <property name="indsShape" type="String" label="Indicator Shape" placeholder="base" datasource="base,circle" description="Choose the Indicator Shape."/>
+            <property name="indsStyle" type="String" label="Indicator Style" placeholder="avatar" datasource="avatar,badge" description="Choose the Indicators Style."/>
+            <property name="indsSize" type="String" label="Avatar Indicator Size" placeholder="large" datasource="large,medium" description="Choose the Indicator Size."/>
+            <property name="indsShape" type="String" label="Avatar Indicator Shape" placeholder="base" datasource="base,circle" description="Choose the Indicator Shape."/>
             <property name="showRefresh" type="Boolean" label="Show refresh button" description="Enable an admin button to refresh the values."/>
             <property name="mappedField" type="String" label="(Optional) Mapped Id Field" description="(Optional) Instead of using the current Record Id, provide the API Name of a field (Case Sensitive) on this object which holds a Record Id or Relationship Id to use that value." placeholder="Example: Source_Id__c, ParentId, or AccountId" />
             <property name="showFooter" type="Boolean" label="Show footer when using Mapped Id Field" description="Enable a footer to show what mapped field is being used."/>
diff --git a/force-app/main/default/lwc/indicatorBundleBadge/__tests__/indicatorBundleBadge.test.js b/force-app/main/default/lwc/indicatorBundleBadge/__tests__/indicatorBundleBadge.test.js
new file mode 100644
index 0000000..c56a7c6
--- /dev/null
+++ b/force-app/main/default/lwc/indicatorBundleBadge/__tests__/indicatorBundleBadge.test.js
@@ -0,0 +1,25 @@
+import { createElement } from 'lwc';
+import IndicatorBundleBadge from 'c/indicatorBundleBadge';
+
+describe('c-indicator-bundle-badge', () => {
+    afterEach(() => {
+        // The jsdom instance is shared across test cases in a single file so reset the DOM
+        while (document.body.firstChild) {
+            document.body.removeChild(document.body.firstChild);
+        }
+    });
+
+    it('TODO: test case generated by CLI command, please fill in test logic', () => {
+        // Arrange
+        const element = createElement('c-indicator-bundle-badge', {
+            is: IndicatorBundleBadge
+        });
+
+        // Act
+        document.body.appendChild(element);
+
+        // Assert
+        // const div = element.shadowRoot.querySelector('div');
+        expect(1).toBe(1);
+    });
+});
\ No newline at end of file
diff --git a/force-app/main/default/lwc/indicatorBundleBadge/indicatorBundleBadge.css b/force-app/main/default/lwc/indicatorBundleBadge/indicatorBundleBadge.css
new file mode 100644
index 0000000..d2ca004
--- /dev/null
+++ b/force-app/main/default/lwc/indicatorBundleBadge/indicatorBundleBadge.css
@@ -0,0 +1,5 @@
+.indicatorBadge {
+    --slds-c-badge-color-background: var(--backgroundColor);
+    --slds-c-badge-icon-color-foreground: var(--foregroundColor);
+    --slds-c-badge-text-color: var(--textColor);
+}
\ No newline at end of file
diff --git a/force-app/main/default/lwc/indicatorBundleBadge/indicatorBundleBadge.html b/force-app/main/default/lwc/indicatorBundleBadge/indicatorBundleBadge.html
new file mode 100644
index 0000000..d2b5b32
--- /dev/null
+++ b/force-app/main/default/lwc/indicatorBundleBadge/indicatorBundleBadge.html
@@ -0,0 +1,11 @@
+<template>
+    <div class="slds-var-m-bottom_x-small slds-float_left">
+        <lightning-badge 
+            label={indText}
+            icon-name={indIcon}
+            icon-alternative-text={indHoverText} 
+            icon-position={indIconPosition}
+            class={indClass}>
+        </lightning-badge>
+    </div>
+</template>
\ No newline at end of file
diff --git a/force-app/main/default/lwc/indicatorBundleBadge/indicatorBundleBadge.js b/force-app/main/default/lwc/indicatorBundleBadge/indicatorBundleBadge.js
new file mode 100644
index 0000000..3c46fab
--- /dev/null
+++ b/force-app/main/default/lwc/indicatorBundleBadge/indicatorBundleBadge.js
@@ -0,0 +1,37 @@
+import { LightningElement, api } from 'lwc';
+
+export default class IndicatorBundleBadge extends LightningElement {
+
+    @api indText = '';
+    @api indIcon = 'standard:marketing_actions';
+    @api indHoverText = '';
+    @api indIconPosition = 'start';
+    @api indBackgroundColor;
+    @api indForegroundColor;
+    @api indTextColor;
+
+    get indClass() {
+        let classValue = '';
+        if(this.indBackgroundColor || this.indForegroundColor || this.indTextColor){
+            classValue = 'indicatorBadge ';
+        }
+        
+        return classValue;
+    }
+
+    renderedCallback() { 
+        this.initCSSVariables();
+    }
+
+    initCSSVariables() {
+
+        if(this.indBackgroundColor || this.indForegroundColor || this.indTextColor){
+            var css = this.template.querySelector(".indicatorBadge").style;
+    
+            css.setProperty('--backgroundColor', this.indBackgroundColor);
+            css.setProperty('--foregroundColor', this.indForegroundColor);
+            css.setProperty('--textColor', this.indTextColor);
+        }
+
+    }
+}
\ No newline at end of file
diff --git a/force-app/main/default/lwc/indicatorBundleBadge/indicatorBundleBadge.js-meta.xml b/force-app/main/default/lwc/indicatorBundleBadge/indicatorBundleBadge.js-meta.xml
new file mode 100644
index 0000000..353961e
--- /dev/null
+++ b/force-app/main/default/lwc/indicatorBundleBadge/indicatorBundleBadge.js-meta.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>62.0</apiVersion>
+    <isExposed>false</isExposed>
+</LightningComponentBundle>
\ No newline at end of file
diff --git a/force-app/main/default/objects/Indicator_Item_Extension__mdt/fields/Badge_Icon_Position__c.field-meta.xml b/force-app/main/default/objects/Indicator_Item_Extension__mdt/fields/Badge_Icon_Position__c.field-meta.xml
new file mode 100644
index 0000000..d5fd9b3
--- /dev/null
+++ b/force-app/main/default/objects/Indicator_Item_Extension__mdt/fields/Badge_Icon_Position__c.field-meta.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<CustomField xmlns="http://soap.sforce.com/2006/04/metadata">
+    <fullName>Badge_Icon_Position__c</fullName>
+    <externalId>false</externalId>
+    <fieldManageability>SubscriberControlled</fieldManageability>
+    <label>Badge Icon Position</label>
+    <required>false</required>
+    <type>Picklist</type>
+    <valueSet>
+        <restricted>true</restricted>
+        <valueSetDefinition>
+            <sorted>false</sorted>
+            <value>
+                <fullName>start</fullName>
+                <default>false</default>
+                <label>Start</label>
+            </value>
+            <value>
+                <fullName>end</fullName>
+                <default>false</default>
+                <label>End</label>
+            </value>
+        </valueSetDefinition>
+    </valueSet>
+</CustomField>
diff --git a/force-app/main/default/objects/Indicator_Item_Extension__mdt/fields/Badge_Text_Color__c.field-meta.xml b/force-app/main/default/objects/Indicator_Item_Extension__mdt/fields/Badge_Text_Color__c.field-meta.xml
new file mode 100644
index 0000000..e052490
--- /dev/null
+++ b/force-app/main/default/objects/Indicator_Item_Extension__mdt/fields/Badge_Text_Color__c.field-meta.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<CustomField xmlns="http://soap.sforce.com/2006/04/metadata">
+    <fullName>Badge_Text_Color__c</fullName>
+    <externalId>false</externalId>
+    <fieldManageability>SubscriberControlled</fieldManageability>
+    <inlineHelpText></inlineHelpText>
+    <label>Bdage Text Color</label>
+    <length>255</length>
+    <required>false</required>
+    <type>Text</type>
+    <unique>false</unique>
+</CustomField>
diff --git a/force-app/main/default/objects/Indicator_Item__mdt/fields/Badge_Icon_Position__c.field-meta.xml b/force-app/main/default/objects/Indicator_Item__mdt/fields/Badge_Icon_Position__c.field-meta.xml
new file mode 100644
index 0000000..d5fd9b3
--- /dev/null
+++ b/force-app/main/default/objects/Indicator_Item__mdt/fields/Badge_Icon_Position__c.field-meta.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<CustomField xmlns="http://soap.sforce.com/2006/04/metadata">
+    <fullName>Badge_Icon_Position__c</fullName>
+    <externalId>false</externalId>
+    <fieldManageability>SubscriberControlled</fieldManageability>
+    <label>Badge Icon Position</label>
+    <required>false</required>
+    <type>Picklist</type>
+    <valueSet>
+        <restricted>true</restricted>
+        <valueSetDefinition>
+            <sorted>false</sorted>
+            <value>
+                <fullName>start</fullName>
+                <default>false</default>
+                <label>Start</label>
+            </value>
+            <value>
+                <fullName>end</fullName>
+                <default>false</default>
+                <label>End</label>
+            </value>
+        </valueSetDefinition>
+    </valueSet>
+</CustomField>
diff --git a/force-app/main/default/objects/Indicator_Item__mdt/fields/Badge_Text_Color__c.field-meta.xml b/force-app/main/default/objects/Indicator_Item__mdt/fields/Badge_Text_Color__c.field-meta.xml
new file mode 100644
index 0000000..eb6658c
--- /dev/null
+++ b/force-app/main/default/objects/Indicator_Item__mdt/fields/Badge_Text_Color__c.field-meta.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<CustomField xmlns="http://soap.sforce.com/2006/04/metadata">
+    <fullName>Badge_Text_Color__c</fullName>
+    <externalId>false</externalId>
+    <fieldManageability>SubscriberControlled</fieldManageability>
+    <inlineHelpText></inlineHelpText>
+    <label>Badge Text Color</label>
+    <length>255</length>
+    <required>false</required>
+    <type>Text</type>
+    <unique>false</unique>
+</CustomField>
diff --git a/force-app/main/default/objects/Indicator_Item__mdt/fields/Inverse_Badge_Icon_Position__c.field-meta.xml b/force-app/main/default/objects/Indicator_Item__mdt/fields/Inverse_Badge_Icon_Position__c.field-meta.xml
new file mode 100644
index 0000000..be5a43b
--- /dev/null
+++ b/force-app/main/default/objects/Indicator_Item__mdt/fields/Inverse_Badge_Icon_Position__c.field-meta.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<CustomField xmlns="http://soap.sforce.com/2006/04/metadata">
+    <fullName>Inverse_Badge_Icon_Position__c</fullName>
+    <externalId>false</externalId>
+    <fieldManageability>SubscriberControlled</fieldManageability>
+    <label>Inverse Badge Icon Position</label>
+    <required>false</required>
+    <type>Picklist</type>
+    <valueSet>
+        <restricted>true</restricted>
+        <valueSetDefinition>
+            <sorted>false</sorted>
+            <value>
+                <fullName>start</fullName>
+                <default>false</default>
+                <label>Start</label>
+            </value>
+            <value>
+                <fullName>end</fullName>
+                <default>false</default>
+                <label>End</label>
+            </value>
+        </valueSetDefinition>
+    </valueSet>
+</CustomField>
diff --git a/force-app/main/default/objects/Indicator_Item__mdt/fields/Inverse_Badge_Text_Color__c.field-meta.xml b/force-app/main/default/objects/Indicator_Item__mdt/fields/Inverse_Badge_Text_Color__c.field-meta.xml
new file mode 100644
index 0000000..b0827dd
--- /dev/null
+++ b/force-app/main/default/objects/Indicator_Item__mdt/fields/Inverse_Badge_Text_Color__c.field-meta.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<CustomField xmlns="http://soap.sforce.com/2006/04/metadata">
+    <fullName>Inverse_Badge_Text_Color__c</fullName>
+    <externalId>false</externalId>
+    <fieldManageability>SubscriberControlled</fieldManageability>
+    <inlineHelpText></inlineHelpText>
+    <label>Inerse Badge Text Color</label>
+    <length>255</length>
+    <required>false</required>
+    <type>Text</type>
+    <unique>false</unique>
+</CustomField>