Merge pull request #22941 from abpframework/fix/inline-icon-label-wrap

Angular - Fixing inline icon-label wrapping problem

npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html

@@ -1,15 +1,14 @@
 <ng-container *abpPermission="prop.permission; runChangeDetection: false">
   @switch (getComponent(prop)) {
     @case ('template') {
-      <ng-container *ngComponentOutlet="prop.template; injector: injectorForCustomComponent">
+      <ng-container *ngComponentOutlet="prop.template; injector: injectorForCustomComponent" />
-      </ng-container>
     }
   }
 
   <div [ngClass]="containerClassName" class="mb-2">
     @switch (getComponent(prop)) {
       @case ('input') {
-        <ng-template [ngTemplateOutlet]="label"></ng-template>
+        <ng-template [ngTemplateOutlet]="label" />
         <input
           #field
           [id]="prop.id"
@@ -37,11 +36,11 @@
           <ng-template
             [ngTemplateOutlet]="label"
             [ngTemplateOutletContext]="{ $implicit: 'form-check-label' }"
-          ></ng-template>
+          />
         </div>
       }
       @case ('select') {
-        <ng-template [ngTemplateOutlet]="label"></ng-template>
+        <ng-template [ngTemplateOutlet]="label" />
         <select
           #field
           [id]="prop.id"
@@ -61,7 +60,7 @@
         </select>
       }
       @case ('multiselect') {
-        <ng-template [ngTemplateOutlet]="label"></ng-template>
+        <ng-template [ngTemplateOutlet]="label" />
         <select
           #field
           [id]="prop.id"
@@ -82,7 +81,7 @@
         </select>
       }
       @case ('typeahead') {
-        <ng-template [ngTemplateOutlet]="label"></ng-template>
+        <ng-template [ngTemplateOutlet]="label" />
         <div #typeahead class="position-relative" validationStyle validationTarget>
           <input
             #field
@@ -104,7 +103,7 @@
         </div>
       }
       @case ('date') {
-        <ng-template [ngTemplateOutlet]="label"></ng-template>
+        <ng-template [ngTemplateOutlet]="label" />
         <input
           [id]="prop.id"
           [formControlName]="prop.name"
@@ -117,15 +116,15 @@
         />
       }
       @case ('time') {
-        <ng-template [ngTemplateOutlet]="label"></ng-template>
+        <ng-template [ngTemplateOutlet]="label" />
-        <ngb-timepicker [formControlName]="prop.name"></ngb-timepicker>
+        <ngb-timepicker [formControlName]="prop.name" />
       }
       @case ('dateTime') {
-        <ng-template [ngTemplateOutlet]="label"></ng-template>
+        <ng-template [ngTemplateOutlet]="label" />
         <abp-extensible-date-time-picker [prop]="prop" [meridian]="meridian$ | async" />
       }
       @case ('textarea') {
-        <ng-template [ngTemplateOutlet]="label"></ng-template>
+        <ng-template [ngTemplateOutlet]="label" />
         <textarea
           #field
           [id]="prop.id"
@@ -136,7 +135,7 @@
         ></textarea>
       }
       @case ('passwordinputgroup') {
-        <ng-template [ngTemplateOutlet]="label"></ng-template>
+        <ng-template [ngTemplateOutlet]="label" />
         <div class="input-group form-group" validationTarget>
           <input
             class="form-control"
@@ -165,24 +164,26 @@
 </ng-container>
 
 <ng-template #label let-classes>
-  <label [htmlFor]="prop.id" [ngClass]="classes || 'form-label'">
+  <label [htmlFor]="prop.id" [ngClass]="classes || 'form-label d-inline-block'">
-    @if (prop.displayTextResolver) {
+    <span class="d-inline-flex align-items-center gap-1 text-nowrap">
-      {{ prop.displayTextResolver(data) | abpLocalization }}
+      @if (prop.displayTextResolver) {
-    } @else {
+        {{ prop.displayTextResolver(data) | abpLocalization }}
-      @if (prop.isExtra) {
-        {{ '::' + prop.displayName | abpLocalization }}
       } @else {
-        {{ prop.displayName | abpLocalization }}
+        @if (prop.isExtra) {
+          {{ '::' + prop.displayName | abpLocalization }}
+        } @else {
+          {{ prop.displayName | abpLocalization }}
+        }
       }
-    }
+      {{ asterisk }}
-    {{ asterisk }}
+      @if (prop.tooltip) {
-    @if (prop.tooltip) {
+        <i
-      <i
+          [ngbTooltip]="prop.tooltip.text | abpLocalization"
-        [ngbTooltip]="prop.tooltip.text | abpLocalization"
+          [placement]="prop.tooltip.placement || 'auto'"
-        [placement]="prop.tooltip.placement || 'auto'"
+          container="body"
-        container="body"
+          class="bi bi-info-circle"
-        class="bi bi-info-circle"
+        ></i>
-      ></i>
+      }
-    }
+    </span>
   </label>
 </ng-template>