fix: formly styling issues

projects/organization-management/src/app/components/user-budget-form/user-budget-form.component.ts

@@ -90,7 +90,7 @@ export class UserBudgetFormComponent implements OnInit, OnDestroy {
             key: 'orderSpentLimitValue',
             type: 'ish-text-input-field',
             templateOptions: {
-              postWrappers: ['input-addon'],
+              postWrappers: [{ wrapper: 'input-addon', index: -1 }],
               label: 'account.user.new.order_spend_limit.label',
               addonLeft: {
                 text: getCurrencySymbol(this.model.currency, 'wide', this.currentLocale),
@@ -113,7 +113,7 @@ export class UserBudgetFormComponent implements OnInit, OnDestroy {
                 key: 'budgetValue',
                 type: 'ish-text-input-field',
                 templateOptions: {
-                  postWrappers: ['input-addon'],
+                  postWrappers: [{ wrapper: 'input-addon', index: -1 }],
                   labelClass: 'col-md-6',
                   fieldClass: 'col-md-6 pr-0',
                   label: 'account.user.budget.label',

src/app/core/services/registration-form-configuration/registration-form-configuration.service.ts

@@ -261,7 +261,6 @@ export class RegistrationFormConfigurationService {
               required: true,
               label: 'account.register.password.label',
               customDescription: {
-                class: 'input-help',
                 key: 'account.register.password.extrainfo.message',
                 args: { 0: '7' },
               },

src/app/extensions/punchout/shared/punchout-user-form/punchout-user-form.component.spec.ts

@@ -1,24 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
-import { FormlyConfig, FormlyForm } from '@ngx-formly/core';
+import { FormlyForm } from '@ngx-formly/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { MockComponent } from 'ng-mocks';
-import { anything, instance, mock, when } from 'ts-mockito';
 
 import { PunchoutUserFormComponent } from './punchout-user-form.component';
 
 describe('Punchout User Form Component', () => {
   let component: PunchoutUserFormComponent;
   let fixture: ComponentFixture<PunchoutUserFormComponent>;
   let element: HTMLElement;
-  let formlyConfig: FormlyConfig;
 
   beforeEach(async () => {
-    formlyConfig = mock(FormlyConfig);
     await TestBed.configureTestingModule({
       imports: [ReactiveFormsModule, TranslateModule.forRoot()],
       declarations: [MockComponent(FormlyForm), PunchoutUserFormComponent],
-      providers: [{ provide: FormlyConfig, useFactory: () => instance(formlyConfig) }],
     }).compileComponents();
   });
 
@@ -27,8 +23,6 @@ describe('Punchout User Form Component', () => {
     component = fixture.componentInstance;
     element = fixture.nativeElement;
     component.punchoutType = 'oci';
-
-    when(formlyConfig.getType(anything())).thenReturn({ name: '', wrappers: [] });
   });
 
   it('should be created', () => {

src/app/extensions/punchout/shared/punchout-user-form/punchout-user-form.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormGroup } from '@angular/forms';
-import { FormlyConfig, FormlyFieldConfig } from '@ngx-formly/core';
+import { FormlyFieldConfig } from '@ngx-formly/core';
 
 import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
 import { SpecialValidators } from 'ish-shared/forms/validators/special-validators';
@@ -24,8 +24,6 @@ export class PunchoutUserFormComponent implements OnInit {
   fields: FormlyFieldConfig[];
   model = {};
 
-  constructor(private config: FormlyConfig) {}
-
   ngOnInit() {
     this.checkInput();
 
@@ -84,13 +82,12 @@ export class PunchoutUserFormComponent implements OnInit {
           {
             key: 'password',
             type: 'ish-password-field',
-            wrappers: [...this.config.getType('ish-password-field').wrappers, 'description'],
             templateOptions: {
+              postWrappers: [{ wrapper: 'description', index: -1 }],
               label: this.punchoutUser ? 'account.punchout.password.new.label' : 'account.punchout.password.label',
               required: this.punchoutUser ? false : true,
               autocomplete: 'new-password',
               customDescription: {
-                class: 'input-help',
                 key: 'account.register.password.extrainfo.message',
                 args: { 0: '7' },
               },

src/app/pages/account-profile-password/account-profile-password/account-profile-password.component.ts

@@ -9,7 +9,7 @@ import {
   SimpleChanges,
 } from '@angular/core';
 import { FormGroup } from '@angular/forms';
-import { FormlyConfig, FormlyFieldConfig } from '@ngx-formly/core';
+import { FormlyFieldConfig } from '@ngx-formly/core';
 
 import { HttpError } from 'ish-core/models/http-error/http-error.model';
 import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
@@ -33,8 +33,6 @@ export class AccountProfilePasswordComponent implements OnInit, OnChanges {
   fields: FormlyFieldConfig[];
   submitted = false;
 
-  constructor(private config: FormlyConfig) {}
-
   ngOnInit() {
     this.fields = [
       {
@@ -55,13 +53,12 @@ export class AccountProfilePasswordComponent implements OnInit, OnChanges {
       {
         key: 'password',
         type: 'ish-password-field',
-        wrappers: [...(this.config.getType('ish-password-field').wrappers ?? []), 'description'],
         templateOptions: {
+          postWrappers: [{ wrapper: 'description', index: -1 }],
           required: true,
           hideRequiredMarker: true,
           label: 'account.update_password.newpassword.label',
           customDescription: {
-            class: 'input-help',
             key: 'account.register.password.extrainfo.message',
             args: { 0: '7' },
           },

src/app/pages/checkout-address/formly/components/checkout-address-anonymous-form/checkout-address-anonymous-form.component.ts

@@ -48,7 +48,6 @@ export class CheckoutAddressAnonymousFormComponent implements OnInit, OnDestroy
               label: 'checkout.addresses.email.label',
               forceRequiredStar: true,
               customDescription: {
-                class: 'form-text',
                 key: 'account.address.email.hint',
               },
               postWrappers: [{ wrapper: 'description', index: -1 }],

src/app/pages/forgot-password/update-password-form/update-password-form.component.ts

@@ -34,12 +34,11 @@ export class UpdatePasswordFormComponent implements OnInit {
         key: 'password',
         type: 'ish-password-field',
         templateOptions: {
-          postWrappers: [{ wrappers: 'description', index: -1 }],
+          postWrappers: [{ wrapper: 'description', index: -1 }],
           required: true,
           hideRequiredMarker: true,
           label: 'account.register.password.label',
           customDescription: {
-            class: 'input-help',
             key: 'account.register.password.extrainfo.message',
             args: { 0: '7' },
           },

src/app/shared/components/basket/basket-order-reference/basket-order-reference.component.ts

@@ -37,11 +37,10 @@ export class BasketOrderReferenceComponent implements OnInit, OnChanges {
         key: 'orderReferenceId',
         type: 'ish-text-input-field',
         templateOptions: {
-          postWrappers: ['description'],
+          postWrappers: [{ wrapper: 'description', index: -1 }],
           label: 'checkout.orderReferenceId.label',
           maxLength: 35,
           customDescription: {
-            class: 'input-help',
             key: 'checkout.orderReferenceId.note',
           },
         },

src/app/shared/formly/components/validation-message/validation-message.component.ts

@@ -5,7 +5,7 @@ import { startWith, switchMap } from 'rxjs/operators';
 
 @Component({
   selector: 'ish-validation-message',
-  template: '<small>{{ errorMessage$ | async | translate }} </small>',
+  template: '<small class="mt-1">{{ errorMessage$ | async | translate }} </small>',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ValidationMessageComponent implements OnChanges {

src/app/shared/formly/wrappers/description-wrapper/description-wrapper.component.html

@@ -1,2 +1,2 @@
 <ng-template #fieldComponent> </ng-template>
-<small [ngClass]="to.customDescription?.class"> {{ description | translate: args }} </small> <br />
+<small class="form-text" [ngClass]="to.customDescription?.class"> {{ description | translate: args }} </small>

src/app/shared/formly/wrappers/input-addon-wrapper/input-addon-wrapper.component.html

@@ -1,4 +1,4 @@
-<div [ngClass]="{ 'input-group': to.addonLeft || to.addonRight }">
+<div class="align-items-start" [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>
   </div>