fix: autocomplete label

italia · Feb 8, 2024 · c7271f0 · c7271f0
1 parent 3bfe2b4
commit c7271f0
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/projects/design-angular-kit/src/lib/components/form/autocomplete/autocomplete.component.html b/projects/design-angular-kit/src/lib/components/form/autocomplete/autocomplete.component.html
@@ -1,6 +1,8 @@
 <div class="form-group" [class.autocomplete-wrapper-big]="big">
   @if (label) {
-    <label [for]="id" class="visually-hidden">{{ label }}</label>
+    <label [for]="id" [class.visually-hidden]="!isActiveLabel" [class.active]="isActiveLabel">
+      {{ label }}
+    </label>
   }
 
   <input

diff --git a/projects/design-angular-kit/src/lib/components/form/autocomplete/autocomplete.component.ts b/projects/design-angular-kit/src/lib/components/form/autocomplete/autocomplete.component.ts
@@ -40,6 +40,11 @@ export class ItAutocompleteComponent extends ItAbstractFormComponent<string | nu
    */
   @Input() placeholder = '';
 
+  /**
+   * Show the label
+   */
+  @Input({ transform: inputToBoolean }) forceShowLabel: boolean = true;
+
   /**
    * Fired when the Autocomplete Item has been selected
    */
@@ -112,4 +117,9 @@ export class ItAutocompleteComponent extends ItAbstractFormComponent<string | nu
   protected onKeyDown() {
     this.showAutocompletion = true;
   }
+
+  protected get isActiveLabel(): boolean {
+    const value = this.control.value;
+    return this.forceShowLabel && (!!value || !!this.placeholder);
+  }
 }