fix: input label

italia · Dec 13, 2023 · 77bdeea · 77bdeea
1 parent 5d7682c
commit 77bdeea
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 47 deletions.
diff --git a/projects/design-angular-kit/src/lib/components/form/input/input.component.html b/projects/design-angular-kit/src/lib/components/form/input/input.component.html
@@ -1,15 +1,8 @@
 <div class="form-group">
-  <label *ngIf="label" [for]="id" [class.active]="isActiveLabel"
-    [class.input-number-label]="type === 'number'"
-    [class.empty-prepend-label]="!prependText.hasChildNodes() && !prepend.hasChildNodes()">
-    {{label}}
-  </label>
-  <div class="input-group" 
-      [class.disabled]="!control.enabled"
-      [class.input-number]="type === 'number'"
-      [class.input-number-currency]="currency"
-      [class.input-number-percentage]="percentage"
-      [class.input-number-adaptive]="adaptive">
+
+  <div class="input-group" [class.disabled]="!control.enabled" [class.input-number]="type === 'number'"
+    [class.input-number-currency]="currency" [class.input-number-percentage]="percentage"
+    [class.input-number-adaptive]="adaptive">
     <div class="input-group-prepend" [class.d-none]="!prependText.hasChildNodes() && !prepend.hasChildNodes()">
       <div #prepend>
         <ng-content select="[prepend]"></ng-content>
@@ -18,24 +11,17 @@
         <ng-content select="[prependText]"></ng-content>
       </div>
     </div>
-
+    <label *ngIf="label" [for]="id" [class.active]="isActiveLabel" [class.input-number-label]="type === 'number'"
+    [class.empty-prepend-label]="!prependText.hasChildNodes() && !prepend.hasChildNodes()">
+    {{label}}
+  </label>
     <ng-container *ngIf="type === 'number'">
       <span *ngIf="currency || percentage" class="input-group-text fw-semibold">{{symbol}}</span>
-      <input type="number"
-             [id]="id"
-             [step]="step ?? null"
-             [min]="min ?? null"
-             [max]="max ?? null"
-             [class.form-control]="readonly !== 'plaintext'"
-             [class.form-control-plaintext]="readonly === 'plaintext'"
-             [class.is-invalid]="isInvalid"
-             [class.is-valid]="isValid"
-             [formControl]="control"
-             [placeholder]="placeholder"
-             [readonly]="isReadonly"
-             [autocomplete]="autocomplete"
-             [attr.aria-describedby]="id + '-description'"
-             (blur)="markAsTouched()" />
+      <input type="number" [id]="id" [step]="step ?? null" [min]="min ?? null" [max]="max ?? null"
+        [class.form-control]="readonly !== 'plaintext'" [class.form-control-plaintext]="readonly === 'plaintext'"
+        [class.is-invalid]="isInvalid" [class.is-valid]="isValid" [formControl]="control" [placeholder]="placeholder"
+        [readonly]="isReadonly" [autocomplete]="autocomplete" [attr.aria-describedby]="id + '-description'"
+        (blur)="markAsTouched()" />
       <span class="input-group-text align-buttons flex-column">
         <button type="button" class="input-number-add" [disabled]="!control.enabled" (click)="incrementNumber()">
           <span class="visually-hidden">{{'it.form.increase-value' | translate}}</span>
@@ -45,22 +31,12 @@
         </button>
       </span>
     </ng-container>
-    <input *ngIf="type !== 'number'"
-           [id]="id"
-           [type]="type"
-           [max]="type === 'date' ? maxDate : undefined"
-           [min]="type === 'date' ? minDate : undefined"
-           [class.form-control]="readonly !== 'plaintext'"
-           [class.form-control-plaintext]="readonly === 'plaintext'"
-           [class.is-invalid]="isInvalid"
-           [class.is-valid]="isValid"
-           [formControl]="control"
-           [placeholder]="placeholder"
-           [readonly]="isReadonly"
-           (keydown)="onKeyDown()"
-           [autocomplete]="autocomplete"
-           [attr.aria-describedby]="id + '-description'"
-           (blur)="markAsTouched()">
+    <input *ngIf="type !== 'number'" [id]="id" [type]="type" [max]="type === 'date' ? maxDate : undefined"
+      [min]="type === 'date' ? minDate : undefined" [class.form-control]="readonly !== 'plaintext'"
+      [class.form-control-plaintext]="readonly === 'plaintext'" [class.is-invalid]="isInvalid"
+      [class.is-valid]="isValid" [formControl]="control" [placeholder]="placeholder" [readonly]="isReadonly"
+      (keydown)="onKeyDown()" [autocomplete]="autocomplete" [attr.aria-describedby]="id + '-description'"
+      (blur)="markAsTouched()">
 
     <div class="input-group-append">
       <ng-content select="[append]"></ng-content>
@@ -82,9 +58,10 @@
 
     <ng-container *ngIf="autocompleteResults$ | async as autocomplete">
       <!-- Lista di autocompletamento -->
-      <ul class="autocomplete-list" [class.autocomplete-list-show]="autocomplete.relatedEntries?.length && showAutocompletion">
+      <ul class="autocomplete-list"
+        [class.autocomplete-list-show]="autocomplete.relatedEntries?.length && showAutocompletion">
         <li *ngFor="let entry of autocomplete.relatedEntries; trackBy: autocompleteItemTrackByValueFn"
-            (click)="onEntryClick(entry, $event)">
+          (click)="onEntryClick(entry, $event)">
           <a [href]="entry.link">
             <ng-container *ngTemplateOutlet="autocompleteItemTemplate"></ng-container>
           </a>
@@ -110,4 +87,4 @@
     </div>
     <ng-container *ngIf="!customError.hasChildNodes()">{{invalidMessage | async}}</ng-container>
   </div>
-</div>
+</div>
diff --git a/src/app/form-input/form-input-example/form-input-example.component.html b/src/app/form-input/form-input-example/form-input-example.component.html
@@ -3,7 +3,7 @@ <h3>Interazione con Form Input</h3>
 
 <div class="bd-example">
   <div class="row">
-    <div class="col-4">
+    <div class="col-8">
       <it-input *ngIf="type !== 'password'"
                 [label]="label"
                 [placeholder]="placeholder"