Fix #25926 Reimplement the autocomplete component (#25935)

* Reimplement the autocomplete component

* dev (add styles autocomplete): enhance functionality

* Fix filtering and styling.

* Fix the filtering and language messages

* Add tests for JsonClassesService

* Test are not running

* fix (add styles dialog): now tests are running

* Fix tests

* Update mocks

---------

Co-authored-by: Jalinson Diaz <zjaaaldev@gmail.com>

.prettierrc

@@ -6,6 +6,7 @@
     "trailingComma": "none",
     "jsxBracketSameLine": false,
     "arrowParens": "always",
+    "bracketSameLine": true,
     "overrides": [
         {
             "files": "*.scss",

core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_autocomplete.scss

@@ -3,7 +3,6 @@
 
 .p-autocomplete {
     @extend #form-field-extend;
-    min-height: $field-height-md;
     height: auto;
     padding-right: 0;
 
@@ -38,30 +37,27 @@
             align-items: center;
             max-height: 13rem; // 208px
             overflow: auto; // Make it scrollable
+            gap: $spacing-0;
+            padding: 7px 0 6px; // Specific padding for the tokens in multiple lines
 
             &:hover,
             &:active,
             &.p-focus {
                 border: none;
             }
 
-            &:has(> .p-autocomplete-token) {
-                padding: $spacing-1 0;
-            }
-
             .p-autocomplete-token {
                 @extend #field-chip;
             }
 
             .p-autocomplete-input-token {
-                padding: 0.375rem 0;
-
                 input {
                     font-family: $font-default;
                     font-size: $font-size-md;
                     color: $black;
                     padding: 0;
                     margin: 0;
+                    height: 1.5rem;
                 }
             }
         }

core-web/libs/template-builder/src/lib/components/template-builder/components/add-style-classes-dialog/add-style-classes-dialog.component.html

@@ -1,30 +1,44 @@
-<ng-container *ngIf="vm$ | async as vm">
-    <div class="dialog__auto-complete-container field">
-        <div class="p-fluid">
-            <p-autoComplete
-                [ngModel]="vm.selectedClasses"
-                [suggestions]="vm.filteredClasses"
-                [multiple]="true"
-                [completeOnFocus]="true"
-                [size]="446"
-                [tabindex]="1"
-                (onSelect)="onSelect($event)"
-                (onUnselect)="onUnselect($event)"
-                (completeMethod)="filterClasses($event)"
-                (onKeyUp)="onKeyUp($event)"
-                dataKey="cssClass"
-                field="cssClass"
-                appendTo="body"
-                inputId="auto-complete-input"
-                name="class"
-                type="text"
-            >
-            </p-autoComplete>
-        </div>
-    </div>
-    <div class="dialog__actions-container">
-        <p-button (onClick)="saveClass(vm.selectedClasses)" data-testId="update-btn">
-            {{ 'dot.template.builder.classes.dialog.update.button' | dm }}</p-button
-        >
-    </div>
-</ng-container>
+<div class="dialog__auto-complete-container field">
+    <p-autoComplete
+        class="p-fluid"
+        [(ngModel)]="selectedClasses"
+        [unique]="true"
+        [suggestions]="filteredSuggestions"
+        [size]="446"
+        [multiple]="true"
+        [dropdown]="isJsonClasses$ | async"
+        [autofocus]="true"
+        (onKeyUp)="onKeyUp($event)"
+        (completeMethod)="filterClasses($event)"
+        data-testId="autocomplete"
+        inputId="auto-complete-input"
+        appendTo="body">
+    </p-autoComplete>
+    <ng-container *ngIf="isJsonClasses$ | async; else suggestionNotes">
+        <ul data-testId="list">
+            <li>
+                <i class="pi pi-info-circle"></i>
+                {{ 'dot.template.builder.autocomplete.has.suggestions' | dm }}
+            </li>
+        </ul>
+    </ng-container>
+
+    <ng-template #suggestionNotes>
+        <ul data-testId="list">
+            <li>
+                <i class="pi pi-info-circle"></i>
+                {{ 'dot.template.builder.autocomplete.no.suggestions' | dm }}
+            </li>
+            <li>
+                <i class="pi pi-check-circle"></i>
+                <span
+                    [innerHTML]="'dot.template.builder.autocomplete.setup.suggestions' | dm"></span>
+            </li>
+        </ul>
+    </ng-template>
+</div>
+<div class="dialog__actions-container">
+    <p-button (onClick)="save()" data-testId="update-btn">
+        {{ 'dot.template.builder.classes.dialog.update.button' | dm }}</p-button
+    >
+</div>

core-web/libs/template-builder/src/lib/components/template-builder/components/add-style-classes-dialog/add-style-classes-dialog.component.scss

@@ -1,30 +1,37 @@
 @use "variables" as *;
+
 :host {
     width: 33.875rem;
     display: block;
 }
 
-.dialog__auto-complete-container {
-    .auto-complete-container__label {
-        margin: 0;
-        color: $black;
-    }
-}
-
 .dialog__actions-container {
     display: flex;
     justify-content: end;
-    padding: 1.25rem $spacing-5;
 }
 
-::ng-deep {
-    .p-autocomplete.p-autocomplete-multiple
-        .p-autocomplete-multiple-container
-        .p-autocomplete-token {
-        margin-right: 0;
-    }
+p-autoComplete {
+    margin-bottom: $spacing-3;
+    display: block;
+}
+
+ul {
+    color: $color-palette-gray-700;
+    display: flex;
+    flex-direction: column;
+    font-size: $font-size-sm;
+    gap: $spacing-1;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+li {
+    display: flex;
+    align-items: center;
+    gap: $spacing-0;
+}
 
-    .p-autocomplete-multiple-container {
-        gap: 0.25rem;
-    }
+.pi {
+    color: $color-palette-gray;
 }