Fix #139

porscheinformatik · Sep 6, 2023 · d921660 · d921660
1 parent de30f3e
commit d921660
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -30,6 +30,7 @@ The versioning of material-addons is based on the Angular version. The Angular v
 _Hint: Changes marked as **visible change** directly affect your application during version upgrade. **Breaking**
 requires your attention during upgrade._
 
+- **v16.0.3**: Fix read-only-form-field styling for "right" aligned units
 - **v16.0.2**: Upgraded Angular to v16.2. Caution: This version only supports ES2022!
 - **v15.0.3**: Fixed layout issue in cards
 - **v15.0.1**: Removed all @angular/flex-layout dependencies and replaced them with pure CSS

diff --git a/package-lock.json b/package-lock.json
diff --git a/projects/material-addons/package.json b/projects/material-addons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@porscheinformatik/material-addons",
-  "version": "16.0.2",
+  "version": "16.0.3",
   "description": "Custom theme and components for Angular Material",
   "homepage": "https://github.com/porscheinformatik/material-addons",
   "repository": {

diff --git a/...cts/material-addons/src/lib/readonly/readonly-form-field/readonly-form-field.component.ts b/...cts/material-addons/src/lib/readonly/readonly-form-field/readonly-form-field.component.ts
@@ -91,7 +91,7 @@ export class ReadOnlyFormFieldComponent implements OnChanges, AfterViewChecked {
         this.renderer.insertBefore(inputWrapper, this.unitSpan, inputWrapper.children[0]);
       } else {
         this.renderer.setAttribute(this.unitSpan, 'matSuffix', '');
-        this.renderer.setStyle(this.unitSpan, 'padding-left', '5px');
+        this.renderer.setStyle(this.unitSpan, 'padding-left', '25px');
         this.renderer.appendChild(inputWrapper, this.unitSpan);
       }
     }

diff --git a/src/app/example-components/read-only-field-wrapper/read-only-field-wrapper.component.html b/src/app/example-components/read-only-field-wrapper/read-only-field-wrapper.component.html
@@ -33,9 +33,25 @@
     <textarea [(ngModel)]="demoText" class="form-control" id="text" matInput name="text" matInput></textarea>
   </mat-form-field>
 </mad-readonly-form-field-wrapper>
-<mad-readonly-form-field-wrapper [readonly]="!textIsEditable" [multiline]="true" [value]="shrinkDemoText" [rows]="4" [shrinkIfEmpty]="true">
+<mad-readonly-form-field-wrapper [readonly]="!textIsEditable" [multiline]="true" [value]="shrinkDemoText" [rows]="4"
+                                 [shrinkIfEmpty]="true">
   <mat-form-field class="form-group">
     <mat-label>This text will shrink, if empty</mat-label>
-    <textarea [(ngModel)]="shrinkDemoText" class="form-control" id="shrinkDemoText" matInput name="shrinkDemoText" matInput></textarea>
+    <textarea [(ngModel)]="shrinkDemoText" class="form-control" id="shrinkDemoText" matInput name="shrinkDemoText"
+              matInput></textarea>
+  </mat-form-field>
+</mad-readonly-form-field-wrapper>
+
+
+<mad-readonly-form-field-wrapper [readonly]="!textIsEditable"
+                                 [value]="demoIdNumberHigh" [unit]="'€'"
+                                 unitPosition="left"
+                                 [autofillDecimals]="true">
+  <mat-form-field class="form-group">
+    <mat-label>Very large number with prefix</mat-label>
+    <input
+      autocomplete="off" class="form-control" id="highRoller" matInput [required]="false"
+      [unit]="'€'" name="highRoller" unitPosition="left"
+      [(ngModel)]="demoIdNumberHigh" [autofillDecimals]="true" madNumericField/>
   </mat-form-field>
 </mad-readonly-form-field-wrapper>
diff --git a/src/app/example-components/read-only-field-wrapper/read-only-field-wrapper.component.ts b/src/app/example-components/read-only-field-wrapper/read-only-field-wrapper.component.ts
@@ -8,6 +8,7 @@ import { Component } from '@angular/core';
 export class ReadOnlyFieldWrapperComponent {
   demoIdData = 'John Doe';
   demoIdNumber = 12345678;
+  demoIdNumberHigh = 123456789012.99;
   textIsEditable = false;
   demoText =
     'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore \n' +

diff --git a/src/app/example-components/read-only-field/read-only-field.component.html b/src/app/example-components/read-only-field/read-only-field.component.html
@@ -5,6 +5,11 @@
 <mad-readonly-form-field [value]="123456" [label]="'Long number, not formatted (default)'"></mad-readonly-form-field>
 <mad-readonly-form-field [value]="123456" [label]="'Long number, formatted as number'" [formatNumber]="true"></mad-readonly-form-field>
 <mad-readonly-form-field [value]="zeroValue" [label]="'Zero value'"></mad-readonly-form-field>
+<mad-readonly-form-field [value]="12000000000" [label]="'Number with percentage suffix'" unit="%" unitPosition="right"></mad-readonly-form-field>
+<mad-readonly-form-field [label]="'Just some other high number'" [value]="999999999.99"
+                         [unit]="'€'" [decimalPlaces]="2" [autofillDecimals]="true" unitPosition="right"
+                         [formatNumber]="true"></mad-readonly-form-field>
+<mad-readonly-form-field [value]="154.48" [label]="'Number with Euro prefix'" unit="€" unitPosition="left"></mad-readonly-form-field>
 <mad-readonly-form-field [value]="nullValue" [label]="'Null value'"></mad-readonly-form-field>
 <mad-readonly-form-field [value]="undefinedValue" [label]="'Undefined value'"></mad-readonly-form-field>
 <mad-readonly-form-field [value]="" label="First name"></mad-readonly-form-field>