Add Display Text Height and Scrollbar to Text Area Plus

flow_screen_components/textAreaPlus/force-app/main/default/lwc/textAreaPlus/textAreaPlus.css

@@ -1,7 +1,37 @@
+/*:host {    
+    --slds-c-textarea-sizing-min-height:800px;
+}*/
+
 .warning {
    color:red;
 }
 
 .default {
     color:dimgray
+
+}
+
+.display-text-container {
+    border: 1px solid #dddbda;
+    border-radius: 0.25rem;
+    padding: 0.5rem;
+    background-color: #f3f2f2;
+}
+
+.display-text-container::-webkit-scrollbar {
+    width: 8px;
+}
+
+.display-text-container::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 4px;
+}
+
+.display-text-container::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 4px;
+}
+
+.display-text-container::-webkit-scrollbar-thumb:hover {
+    background: #a8a8a8;
 }

flow_screen_components/textAreaPlus/force-app/main/default/lwc/textAreaPlus/textAreaPlus.html

@@ -9,8 +9,10 @@
 
   <!-- Display Text-->
   <template if:true={displayText}>
-    <lightning-formatted-rich-text value={textValue}>
-    </lightning-formatted-rich-text>
+    <div class={displayTextClass} style={displayTextStyle}>
+      <lightning-formatted-rich-text value={textValue}>
+      </lightning-formatted-rich-text>
+    </div>
   </template>
 
   <!-- Plain Text / TextArea Section -->
@@ -119,4 +121,4 @@
       </lightning-button-group>
     </div>
   </template>
-</template>
+</template>

flow_screen_components/textAreaPlus/force-app/main/default/lwc/textAreaPlus/textAreaPlus.js

@@ -81,6 +81,7 @@ export default class TextAreaPlus extends LightningElement {
   @api label;
   @api placeHolder;
   @api textAreaHeight;
+  @api displayTextHeight;
   @api textMode;
   @api slackOutput;
   @api fieldLevelHelp;
@@ -408,6 +409,25 @@ export default class TextAreaPlus extends LightningElement {
 
   }
 
+  //set display text height and overflow
+  get displayTextStyle() {
+    // Only apply style when there's content and displayTextHeight is set
+    if (!this.textValue || this.textValue.trim() === '' || !this.displayTextHeight) {
+      return '';
+    }
+    const height = this.displayTextHeight + 'px';
+    return `height: ${height}; overflow-y: auto;`;
+  }
+
+  // Conditionally apply display text container class
+  get displayTextClass() {
+    // Only apply container styling when there's content and displayTextHeight is set
+    if (!this.textValue || this.textValue.trim() === '' || !this.displayTextHeight) {
+      return '';
+    }
+    return 'display-text-container';
+  }
+
   // Dynamically calculate remaining characters
   get charsLeft() {
     const tlen = this.len;
@@ -698,4 +718,4 @@ export default class TextAreaPlus extends LightningElement {
 
 
 
-}
+}

flow_screen_components/textAreaPlus/force-app/main/default/lwc/textAreaPlus/textAreaPlus.js-meta.xml

@@ -29,7 +29,8 @@
             <property name="cb_showCharCounter" type="String" role="inputOnly" />
             <property name="slackOutput" label="Slack Formatted Output" type="String"/>
             <property name="textAreaHeight" label="Text Area Height" type="String"/>
+            <property name="displayTextHeight" label="Display Text Height" type="String" role="inputOnly" description="Set the height of the display text container in pixels (e.g., 200). Leave empty for auto height."/>
             <property name="fieldLevelHelp" label="Help Text" type="String"/>
         </targetConfig>
     </targetConfigs>
-</LightningComponentBundle>
+</LightningComponentBundle>

flow_screen_components/textAreaPlus/force-app/main/default/lwc/textAreaPlusCPE/textAreaPlusCPE.html

@@ -14,6 +14,10 @@
       label="Text Value" onvaluechanged={handleFlowComboboxValueChange} automatic-output-variables={automaticOutputVariables}></c-fsc_flow-combobox>
     <lightning-input-rich-text name="value" value={inputValues.value.value}
       onchange={handleRichTextChange}></lightning-input-rich-text>
+    <c-fsc_flow-combobox name="displayTextHeight" value={inputValues.displayTextHeight.value}
+      builder-context-filter-type="String" label={inputValues.displayTextHeight.label}
+      onvaluechanged={handleFlowComboboxValueChange}
+      field-level-help={inputValues.displayTextHeight.helpText} automatic-output-variables={automaticOutputVariables}></c-fsc_flow-combobox>
   </template>
   <template lwc:if={isPlainText}>
     <c-fsc_flow-banner banner-color="#1d4583" banner-label="Plain Text Options" banner-info={textBannerInfo}>
@@ -48,10 +52,10 @@
     <c-fsc_flow-combobox name="value" value={inputValues.value.value} 
       label={inputValues.value.label} onvaluechanged={handleFlowComboboxValueChange} automatic-output-variables={automaticOutputVariables}></c-fsc_flow-combobox>
 
-    <c-fsc_flow-checkbox name="required" label={inputValues.required.label}
-      field-level-help={inputValues.required.helpText} checked={inputValues.cb_required.value}
-      oncheckboxchanged={handleCheckboxChange}></c-fsc_flow-checkbox>
-  </template>
+   <c-fsc_flow-combobox name="required" value={inputValues.required.value}
+      builder-context-filter-type="String" label={inputValues.required.label}
+      onvaluechanged={handleFlowComboboxValueChange}
+      field-level-help={inputValues.required.helpText} automatic-output-variables={automaticOutputVariables}></c-fsc_flow-combobox>
 
   <template lwc:if={isTextInput}>
     <c-fsc_flow-banner banner-color="#1d4583" banner-label="Text Input Options" banner-info={textBannerInfo}>
@@ -178,4 +182,4 @@
         onvaluechanged={handleFlowComboboxValueChange} automatic-output-variables={automaticOutputVariables}></c-fsc_flow-combobox>
     </template>
   </template>
-</template>
+</template>

flow_screen_components/textAreaPlus/force-app/main/default/lwc/textAreaPlusCPE/textAreaPlusCPE.js

@@ -219,6 +219,13 @@ export default class textAreaPlusCPE extends LightningElement {
       label: "Text Area Height",
       helpText: "Set the minimum height of the text input area i.e. 800"
     },
+    displayTextHeight: {
+      value: null,
+      valueDataType: DATA_TYPE.NUMBER,
+      isCollection: false,
+      label: "Display Text Height",
+      helpText: "Set the height of the display text container in pixels (e.g., 200). Leave empty for auto height."
+    },
     fieldLevelHelp: {
       value: null,
       valueDataType: null,
@@ -452,4 +459,4 @@ export default class textAreaPlusCPE extends LightningElement {
       (this.eq("textMode", "rich") || this.eq("textMode", "plain") || this.eq("textMode", "slack") || this.eq("textMode", "textInput"))
     );
   }
-}
+}

flow_screen_components/textAreaPlus/force-app/main/default/lwc/textAreaPlusCPE/textAreaPlusCPE.js-meta.xml

@@ -2,4 +2,4 @@
 <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
     <apiVersion>58.0</apiVersion>
     <isExposed>false</isExposed>
-</LightningComponentBundle>
+</LightningComponentBundle>