feat(formatters): Exposed formatted display unit in DtFormattedValue.

libs/barista-components/formatters/src/formatted-value.ts

@@ -50,23 +50,39 @@ export class DtFormattedValue {
     return this._formattedData;
   }
 
+  /** Formatted display unit composed by unit and rate unit */
+  get formattedDisplayUnit(): string {
+    const {
+      displayUnit,
+      displayWhiteSpace,
+      displayRateUnit,
+    } = this._formattedData;
+
+    if (displayUnit !== undefined && displayRateUnit !== undefined) {
+      return `${displayUnit}${displayWhiteSpace ? ' ' : ''}/${displayRateUnit}`;
+    }
+    if (displayUnit !== undefined) {
+      return displayUnit;
+    }
+    if (displayRateUnit !== undefined) {
+      return `/${displayRateUnit}`;
+    }
+
+    return '';
+  }
+
   /** @return the string as a combination of the display data */
   toString(): string {
-    if (this._formattedData.displayValue === undefined) {
+    const { displayValue } = this._formattedData;
+    if (displayValue === undefined) {
       return NO_DATA;
     }
-    let text = this._formattedData.displayValue;
-    if (this._formattedData.displayUnit !== undefined) {
-      text = `${text} ${this._formattedData.displayUnit}`;
-    }
-    if (this._formattedData.displayRateUnit !== undefined) {
-      text =
-        this._formattedData.displayUnit !== undefined ||
-        this._formattedData.displayWhiteSpace === false
-          ? `${text}/${this._formattedData.displayRateUnit}`
-          : `${text} /${this._formattedData.displayRateUnit}`;
+
+    const displayUnit = this.formattedDisplayUnit;
+    if (displayUnit === '') {
+      return displayValue;
     }
 
-    return text;
+    return `${displayValue} ${displayUnit}`;
   }
 }