Add FullWidth Support to Text Input Component

apps/sales/src/app/modules/ui/text-input/text-input.component.component.ts

@@ -25,6 +25,7 @@ export class UiTextInputComponent implements ControlValueAccessor {
   @Input() label = '';
   @Input() suffix: string;
   @Input() placeholder = '';
+  @Input() fullWidth = true;
 
   constructor(private cdr: ChangeDetectorRef) {}
 

apps/sales/src/app/modules/ui/text-input/text-input.component.html

@@ -1,13 +1,24 @@
 <div class="isa-form-field">
-  <label>
+  <label [class.expand]="fullWidth">
     {{ label }}
-    <input resize type="text" [(ngModel)]="value" (input)="handleInput()" (blur)="handleBlur()"
-      (focus)="handleFocus(true)" [disabled]="!editable" [placeholder]="placeholder" />
+    <input
+      resize
+      type="text"
+      [(ngModel)]="value"
+      (input)="handleInput()"
+      (blur)="handleBlur()"
+      (focus)="handleFocus(true)"
+      [disabled]="!editable"
+      [placeholder]="placeholder"
+    />
     <span class="isa-font-weight-bold suffix">{{ suffix }}</span>
   </label>
 
-  <button *ngIf="editable && value?.length && touched && focussed" class="isa-input-reset-sm"
-    (click)="reset()"></button>
+  <button
+    *ngIf="editable && value?.length && touched && focussed"
+    class="isa-input-reset-sm"
+    (click)="reset()"
+  ></button>
 
   <span *ngIf="!editable" class="status">Nicht Änderbar</span>
-</div>
+</div>

apps/sales/src/app/modules/ui/text-input/text-input.component.scss

@@ -1,6 +1,20 @@
+$status-width: 115px;
+
 input {
   margin-left: 20px;
 }
+
+label {
+  &.expand {
+    display: flex;
+    width: calc(95% - #{$status-width});
+  }
+}
+
+.status {
+  width: $status-width;
+}
+
 .suffix {
   margin-left: -30px;
 }