chore(dotcms-ui): Fix error with autocomplete #30249

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

@@ -65,8 +65,8 @@ $select-border-size: 2px;
     background: $color-palette-gray-200;
     color: $color-palette-primary;
     width: $field-height-md;
-    border-top-right-radius: $border-radius-md;
-    border-bottom-right-radius: $border-radius-md;
+    border-top-left-radius: $border-radius-md;
+    border-bottom-left-radius: $border-radius-md;
     height: 100%;
 }
 

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

@@ -1,20 +1,21 @@
 <div class="dialog__auto-complete-container field">
-    @let isJsonClasses = $isJsonClasses();
+    @let hasClasses = $hasClasses();
     <p-autoComplete
         (completeMethod)="filterClasses($event)"
         [(ngModel)]="$selectedClasses"
         [unique]="true"
         [suggestions]="$filteredSuggestions()"
-        [size]="446"
         [multiple]="true"
-        [dropdown]="isJsonClasses"
+        [dropdown]="hasClasses"
         [autofocus]="true"
+        dropdownMode="blank"
         class="p-fluid"
-        dotSelectItem
         data-testId="autocomplete"
         inputId="auto-complete-input"
-        appendTo="body" />
-    @if (isJsonClasses) {
+        appendTo="body"
+        dotSelectItem
+        />
+    @if (hasClasses) {
         <ul data-testId="list">
             <li>
                 <i class="pi pi-info-circle"></i>

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

@@ -10,9 +10,13 @@
     justify-content: flex-end;
 }
 
-p-autoComplete {
+:host ::ng-deep p-autoComplete {
     margin-bottom: $spacing-3;
     display: block;
+    .p-autocomplete-dropdown.p-element.p-button {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
 }
 
 ul {

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

@@ -1,7 +1,7 @@
 import { Meta, moduleMetadata, StoryObj, applicationConfig } from '@storybook/angular';
 import { of } from 'rxjs';
 
-import { HttpClient, provideHttpClient } from '@angular/common/http';
+import { provideHttpClient } from '@angular/common/http';
 import { FormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
@@ -46,18 +46,17 @@ const meta: Meta<AddStyleClassesDialogComponent> = {
                         }
                     }
                 },
-                {
-                    provide: HttpClient,
-                    useValue: {
-                        get: (_: string) => of(MOCK_STYLE_CLASSES_FILE)
-                    }
-                },
                 {
                     provide: DotMessageService,
                     useValue: DOT_MESSAGE_SERVICE_TB_MOCK
                 },
                 DynamicDialogRef,
-                JsonClassesService
+                {
+                    provide: JsonClassesService,
+                    useValue: {
+                        getClasses: () => of(MOCK_STYLE_CLASSES_FILE.classes)
+                    }
+                }
             ]
         })
     ]

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

@@ -1,5 +1,3 @@
-import { of } from 'rxjs';
-
 import {
     ChangeDetectionStrategy,
     Component,
@@ -11,16 +9,15 @@ import {
 import { toSignal } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
 
-import { AutoCompleteModule } from 'primeng/autocomplete';
+import { AutoCompleteCompleteEvent, AutoCompleteModule } from 'primeng/autocomplete';
 import { ButtonModule } from 'primeng/button';
 import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 
-import { catchError, map, shareReplay, tap } from 'rxjs/operators';
-
 import { DotMessagePipe, DotSelectItemDirective } from '@dotcms/ui';
 
 import { JsonClassesService } from './services/json-classes.service';
 
+
 @Component({
     selector: 'dotcms-add-style-classes-dialog',
     standalone: true,
@@ -49,84 +46,44 @@ export class AddStyleClassesDialogComponent implements OnInit {
      * @memberof AddStyleClassesDialogComponent
      */
     readonly #dialogRef = inject(DynamicDialogRef);
+    readonly #dynamicDialogConfig = inject(DynamicDialogConfig<{selectedClasses: string[]}>);
     /**
      * Selected classes to be added
      * @memberof AddStyleClassesDialogComponent
      */
     $selectedClasses = signal<string[]>([]);
-    /**
-     * Classes to be displayed
-     *
-     * @memberof AddStyleClassesDialogComponent
-     */
-    $classes = signal<string[]>([]);
     /**
      * Query to filter the classes
      *
      * @memberof AddStyleClassesDialogComponent
      */
     $query = signal<string | null>(null);
     /**
-     * Filtered suggestions based on the query
+     * Check if the JSON file has classes
      *
      * @memberof AddStyleClassesDialogComponent
      */
-    $filteredSuggestions = computed(() => {
-        const classes = this.$classes();
-        const query = this.$query();
-
-        if (!query) {
-            return classes;
-        }
-
-        return classes.filter((item) => item.includes(query));
+    $classes = toSignal(this.#jsonClassesService.getClasses(), {
+        initialValue: []
     });
     /**
-     * Check if there are classes in the JSON file
+     * Filtered suggestions based on the query
      *
      * @memberof AddStyleClassesDialogComponent
      */
-    isJsonClasses$ = this.#jsonClassesService.getClasses().pipe(
-        tap(({ classes }) => {
-            if (classes?.length) {
-                this.$classes.set(classes);
-            } else {
-                this.$classes.set([]);
-            }
-        }),
-        map(({ classes }) => !!classes?.length),
-        catchError(() => {
-            this.$classes.set([]);
+    $filteredSuggestions = signal<string[]>(this.$classes());
+
+    $hasClasses = computed(() => this.$classes().length > 0);
 
-            return of(false);
-        }),
-        shareReplay(1)
-    );
-    /**
-     * Check if the JSON file has classes
-     *
-     * @memberof AddStyleClassesDialogComponent
-     */
-    $isJsonClasses = toSignal(this.isJsonClasses$, {
-        initialValue: false
-    });
 
-    constructor(
-        public dynamicDialogConfig: DynamicDialogConfig<{
-            selectedClasses: string[];
-        }>
-    ) {}
 
     /**
      * Set the selected classes
      *
      * @memberof AddStyleClassesDialogComponent
      */
     ngOnInit() {
-        const data = this.dynamicDialogConfig.data;
-        if (data) {
-            this.$selectedClasses.set(data.selectedClasses);
-        }
+        this.$selectedClasses.set(this.#dynamicDialogConfig?.data?.selectedClasses || []);
     }
 
     /**
@@ -136,15 +93,10 @@ export class AddStyleClassesDialogComponent implements OnInit {
      * @return {*}
      * @memberof AddStyleClassesDialogComponent
      */
-    filterClasses({ query }: { query: string }): void {
-        /*
-            https://github.com/primefaces/primeng/blob/master/src/app/components/autocomplete/autocomplete.ts#L739
-
-            Sadly we need to pass suggestions all the time, even if they are empty because on the set is where the primeng remove the loading icon
-        */
-
-        // PrimeNG autocomplete doesn't support async pipe in the suggestions
-        this.$query.set(query);
+    filterClasses({ query }: AutoCompleteCompleteEvent): void {
+        const classes = this.$classes();
+        const filteredClasses = query ? classes.filter((item) => item.includes(query)) : classes;
+        this.$filteredSuggestions.set([...filteredClasses]);
     }
 
     /**

core-web/libs/template-builder/src/lib/components/template-builder/components/add-style-classes-dialog/services/json-classes.service.ts

@@ -1,15 +1,22 @@
-import { Observable } from 'rxjs';
+import { Observable, of } from 'rxjs';
 
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
+
+import { catchError, map } from 'rxjs/operators';
+
+import { MOCK_STYLE_CLASSES_FILE } from '../../../utils/mocks';
 
 export const STYLE_CLASSES_FILE_URL = '/application/templates/classes.json';
 
 @Injectable()
 export class JsonClassesService {
-    constructor(private http: HttpClient) {}
+    readonly #http = inject(HttpClient);
 
-    getClasses(): Observable<{ classes: string[] }> {
-        return this.http.get<{ classes: string[] }>(STYLE_CLASSES_FILE_URL);
+    getClasses(): Observable<string[]> {
+        return this.#http.get<{ classes: string[] }>(STYLE_CLASSES_FILE_URL).pipe(
+            map((res) => res.classes),
+            catchError(() => of(MOCK_STYLE_CLASSES_FILE.classes))
+        );
     }
 }