From 23f2c5404faab74b891ceaa77b4bb0e6940d6a81 Mon Sep 17 00:00:00 2001
From: Josep Piguillem <jgpigui@gmail.com>
Date: Mon, 12 Oct 2026 20:28:25 +0200
Subject: [PATCH] Line up a number field without a prefix with the other fields

An empty matPrefix container still made Material reserve room for an
icon, pulling the text 12px left of every other field. The prefix is
only rendered when a pi-prefix is projected.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../number-field/number-field.component.html        | 13 ++++++++++---
 .../number-field/number-field.component.ts          |  5 +++++
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/libs/ui/src/lib/ui/form-field/number-field/number-field.component.html b/libs/ui/src/lib/ui/form-field/number-field/number-field.component.html
index 6788be6..fd92276 100644
--- a/libs/ui/src/lib/ui/form-field/number-field/number-field.component.html
+++ b/libs/ui/src/lib/ui/form-field/number-field/number-field.component.html
@@ -1,9 +1,16 @@
 <mat-form-field [appearance]="appearance()" floatLabel="always">
   <mat-label><ng-content select="pi-label"></ng-content></mat-label>
 
-  <ng-container matPrefix>
-    <ng-content select="pi-prefix"></ng-content>
-  </ng-container>
+  <!--
+    Only when something is actually projected. An empty `matPrefix` container
+    still makes Material treat the field as having an icon prefix, which
+    reserves space and pulls the text 12px left of every other field.
+  -->
+  @if (hasPrefix()) {
+    <ng-container matPrefix>
+      <ng-content select="pi-prefix"></ng-content>
+    </ng-container>
+  }
 
   <ng-container matSuffix>
     <ng-content select="pi-suffix"></ng-content>
diff --git a/libs/ui/src/lib/ui/form-field/number-field/number-field.component.ts b/libs/ui/src/lib/ui/form-field/number-field/number-field.component.ts
index 86d67af..4c45154 100644
--- a/libs/ui/src/lib/ui/form-field/number-field/number-field.component.ts
+++ b/libs/ui/src/lib/ui/form-field/number-field/number-field.component.ts
@@ -1,6 +1,7 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  contentChild,
   HostBinding,
   Injectable,
 } from '@angular/core';
@@ -15,6 +16,7 @@ import {
 import { MatInput } from '@angular/material/input';
 import { PiAutofocusDirective } from '../directives/autofocus.directive';
 import { numericValue } from '../numeric-value';
+import { PiPrefixDirective } from '../../../util/affix/affix.directive';
 
 import { TranslatePipe } from '@ngx-translate/core';
 
@@ -40,4 +42,7 @@ export class PiNumberFieldComponent extends PiBaseFormFieldComponent<
   @HostBinding('class') className = `pi-form-field__number`;
 
   protected readonly rawValue = numericValue(this.value);
+
+  /** Whether a consumer projected a `pi-prefix`; see the template. */
+  protected readonly hasPrefix = contentChild(PiPrefixDirective);
 }