From bb1a47c150d6b7c31cd2637e21bccd5d6598c6ff Mon Sep 17 00:00:00 2001
From: Silke <s.grueber@intershop.de>
Date: Fri, 19 Nov 2021 11:54:17 +0100
Subject: [PATCH] feat: formly - data type of the input addon text extended by
 Observable<string>

---
 docs/guides/formly.md                         | 18 ++++++++--------
 .../input-addon-wrapper.component.html        |  6 +++---
 .../input-addon-wrapper.component.ts          | 21 ++++++++++++++++---
 3 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/docs/guides/formly.md b/docs/guides/formly.md
index 4569033a3a..a648c8e4aa 100644
--- a/docs/guides/formly.md
+++ b/docs/guides/formly.md
@@ -267,15 +267,15 @@ Refer to the tables below for an overview of these parts.
 
 ### Wrappers
 
-| Name                           | Functionality                                                                                                                                                                                                                    | Relevant templateOptions                                                                                                      |
-| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
-| form-field-horizontal          | Adds a label next to the field and adds red styling for invalid fields.                                                                                                                                                          | `labelClass`& `fieldClass`: Classes that will be added to the label or field `<div>`                                          |
-| form-field-checkbox-horizontal | Adds a label for a checkbox or radio field, adds red styling and error messages for invalid fields. Uses `validators.validation` and `validation.messages` properties. Adds a tooltip behind the label, see also tooltip-wrapper | `labelClass`& `fieldClass`: Classes that will be added to the label or the outer field `<div>`                                |
-| validation                     | Adds validation icons and error messages to the field. Uses `validators.validation` and `validation.messages` properties.                                                                                                        | `showValidation`: `(field: FormlyFieldConfig) => boolean`: optional, used to determine whether to show validation check marks |
-| textarea-description           | Adds a description to textarea fields, including the amount of remaining characters.                                                                                                                                             | `maxLength`: Specifies the maximum length to be displayed in the message.                                                     |
-| description                    | Adds a custom description to any field                                                                                                                                                                                           | `customDescription`: `string` or `{key: string; args: any}` that will be translated                                           |
-| tooltip                        | Adds a tooltip to a field. Includes `<ish-field-tooltip>` component.                                                                                                                                                             | `tooltip`: `{ title?: string; text: string; link: string }` that defines the different tooltip texts.                         |
-| input-addon                    | Adds a prepended or appended text to a field, e.g. a currency or unit.                                                                                                                                                           | `addonLeft?`: `{ text: string; }, addonRight?: {text: string}` that defines the addon texts.                                  |
+| Name                           | Functionality                                                                                                                                                                                                                    | Relevant templateOptions                                                                                                                 |
+| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| form-field-horizontal          | Adds a label next to the field and adds red styling for invalid fields.                                                                                                                                                          | `labelClass`& `fieldClass`: Classes that will be added to the label or field `<div>`                                                     |
+| form-field-checkbox-horizontal | Adds a label for a checkbox or radio field, adds red styling and error messages for invalid fields. Uses `validators.validation` and `validation.messages` properties. Adds a tooltip behind the label, see also tooltip-wrapper | `labelClass`& `fieldClass`: Classes that will be added to the label or the outer field `<div>`                                           |
+| validation                     | Adds validation icons and error messages to the field. Uses `validators.validation` and `validation.messages` properties.                                                                                                        | `showValidation`: `(field: FormlyFieldConfig) => boolean`: optional, used to determine whether to show validation check marks            |
+| textarea-description           | Adds a description to textarea fields, including the amount of remaining characters.                                                                                                                                             | `maxLength`: Specifies the maximum length to be displayed in the message.                                                                |
+| description                    | Adds a custom description to any field                                                                                                                                                                                           | `customDescription`: `string` or `{key: string; args: any}` that will be translated                                                      |
+| tooltip                        | Adds a tooltip to a field. Includes `<ish-field-tooltip>` component.                                                                                                                                                             | `tooltip`: `{ title?: string; text: string; link: string }` that defines the different tooltip texts.                                    |
+| input-addon                    | Adds a prepended or appended text to a field, e.g. a currency or unit.                                                                                                                                                           | `addonLeft?`: `{ text: string \| Observable<string>; }, addonRight?: {text: string \| Observable<string>}` that defines the addon texts. |
 
 ### Extensions
 
diff --git a/src/app/shared/formly/wrappers/input-addon-wrapper/input-addon-wrapper.component.html b/src/app/shared/formly/wrappers/input-addon-wrapper/input-addon-wrapper.component.html
index 3e5a55515f..ff512dca53 100644
--- a/src/app/shared/formly/wrappers/input-addon-wrapper/input-addon-wrapper.component.html
+++ b/src/app/shared/formly/wrappers/input-addon-wrapper/input-addon-wrapper.component.html
@@ -1,9 +1,9 @@
-<div class="align-items-start" [ngClass]="{ 'input-group': to.addonLeft || to.addonRight }">
+<div class="align-items-start flex-nowrap" [ngClass]="{ 'input-group': to.addonLeft || to.addonRight }">
   <div *ngIf="to.addonLeft" class="input-group-prepend">
-    <span class="input-group-text">{{ to.addonLeft?.text | translate }}</span>
+    <span class="input-group-text">{{ addonLeftText | async | translate }}</span>
   </div>
   <div class="flex-grow-1"><ng-container #fieldComponent></ng-container></div>
   <div *ngIf="to.addonRight" class="input-group-append">
-    <span class="input-group-text">{{ to.addonRight?.text | translate }}</span>
+    <span class="input-group-text">{{ addonRightText | async | translate }}</span>
   </div>
 </div>
diff --git a/src/app/shared/formly/wrappers/input-addon-wrapper/input-addon-wrapper.component.ts b/src/app/shared/formly/wrappers/input-addon-wrapper/input-addon-wrapper.component.ts
index 06cfec536b..a0fe0acb67 100644
--- a/src/app/shared/formly/wrappers/input-addon-wrapper/input-addon-wrapper.component.ts
+++ b/src/app/shared/formly/wrappers/input-addon-wrapper/input-addon-wrapper.component.ts
@@ -1,11 +1,12 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FieldWrapper } from '@ngx-formly/core';
+import { of } from 'rxjs';
 
 /**
  * Wrapper to add input-addons to fields, using bootstrap styling.
  *
- *  @templateOption **addonRight** - object of type ``{ text: string }`` that will be used to render an input addon to the right of the field.
- *  @templateOption **addonLeft** - object of type ``{ text: string }`` that will be used to render an input addon to the left of the field.
+ *  @templateOption **addonRight** - object of type ``{ text: string }`` or ``{ text: Observable<string> }`` that will be used to render an input addon to the right of the field.
+ *  @templateOption **addonLeft** - object of type ``{ text: string }`` or ``{ text: Observable<string> }`` that will be used to render an input addon to the left of the field.
  *
  */
 @Component({
@@ -13,4 +14,18 @@ import { FieldWrapper } from '@ngx-formly/core';
   templateUrl: './input-addon-wrapper.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class InputAddonWrapperComponent extends FieldWrapper {}
+export class InputAddonWrapperComponent extends FieldWrapper {
+  get addonLeftText() {
+    if (!this.to.addonLeft?.text) {
+      return;
+    }
+    return typeof this.to.addonLeft.text === 'string' ? of(this.to.addonLeft.text) : this.to.addonLeft.text;
+  }
+
+  get addonRightText() {
+    if (!this.to.addonRight?.text) {
+      return;
+    }
+    return typeof this.to.addonRight.text === 'string' ? of(this.to.addonRight.text) : this.to.addonRight.text;
+  }
+}