refactor(dot-dropdown): Enhance dropdown component with signals and c…

…omputed properties for improved state management

core-web/apps/dotcms-ui/src/app/view/components/_common/dot-dropdown-component/dot-dropdown.component.html

@@ -1,3 +1,8 @@
+@let disabled = $disabledState();
+@let show = $show();
+@let icon = $icon();
+@let title = $title();
+
 @if (show) {
     <div (click)="onToggle()" class="dot-mask"></div>
 }
@@ -23,7 +28,7 @@
 }
 
 @if (show) {
-    <div [ngStyle]="positionStyle" class="dropdown-content" [@enterAnimation]="show">
-        <ng-content></ng-content>
+    <div [style]="$style()" class="dropdown-content" [@enterAnimation]="show">
+        <ng-content />
     </div>
 }

core-web/apps/dotcms-ui/src/app/view/components/_common/dot-dropdown-component/dot-dropdown.component.ts

@@ -1,14 +1,13 @@
 import { animate, style, transition, trigger } from '@angular/animations';
 import {
     Component,
+    computed,
     ElementRef,
-    EventEmitter,
     HostListener,
-    Input,
-    OnChanges,
-    OnInit,
-    Output,
-    SimpleChanges
+    inject,
+    input,
+    signal,
+    output
 } from '@angular/core';
 
 import { ButtonModule } from 'primeng/button';
@@ -32,75 +31,141 @@ import { ButtonModule } from 'primeng/button';
     standalone: true,
     imports: [ButtonModule]
 })
-export class DotDropdownComponent implements OnChanges, OnInit {
-    @Input()
-    disabled = false;
-
-    @Input()
-    icon = null;
-
-    @Input()
-    title = null;
-
-    @Input() position: 'left' | 'right' = 'left';
-
-    @Input()
-    inverted = false;
-
-    @Output()
-    wasOpen = new EventEmitter<never>();
-
-    @Output()
-    toggle = new EventEmitter<boolean>();
-
-    @Output()
-    shutdown = new EventEmitter<never>();
-
-    show = false;
-    positionStyle = {};
-
-    constructor(private elementRef: ElementRef) {}
-
-    ngOnInit() {
-        this.positionStyle[this.position] = '0';
-    }
-
-    ngOnChanges(changes: SimpleChanges): void {
-        if (changes.disabled && this.icon) {
-            this.disabled = changes.disabled.currentValue ? true : null;
-        }
-    }
-
+export class DotDropdownComponent {
+    /** Reference to the component's DOM element for click detection */
+    readonly #elementRef = inject(ElementRef);
+
+    /**
+     * Controls whether the dropdown trigger button is disabled.
+     * When true, prevents user interaction with the dropdown.
+     * @default false
+     */
+    $disabled = input(false, { alias: 'disabled' });
+
+    /**
+     * Icon to display on the dropdown trigger button.
+     * Accepts PrimeNG icon classes or null for no icon.
+     * @default null
+     */
+    $icon = input(null, { alias: 'icon' });
+
+    /**
+     * Title text to display on the dropdown trigger button.
+     * Can be null if only an icon is desired.
+     * @default null
+     */
+    $title = input(null, { alias: 'title' });
+
+    /**
+     * Position of the dropdown content relative to the trigger button.
+     * 'left' aligns content to the left edge, 'right' to the right edge.
+     * @default 'left'
+     */
+    $position = input<'left' | 'right'>('left', { alias: 'position' });
+
+    /**
+     * Controls the visual styling theme of the dropdown.
+     * When true, applies inverted color scheme.
+     * @default false
+     */
+    $inverted = input(false, { alias: 'inverted' });
+
+    /**
+     * Computed CSS style object for positioning the dropdown content.
+     * Dynamically sets left or right positioning based on $position input.
+     * @returns CSS style object with positioning property
+     */
+    $style = computed(() => {
+        return {
+            [this.$position()]: '0'
+        };
+    });
+
+    /**
+     * Computed boolean indicating if the dropdown should be in disabled state.
+     * Returns true only when both disabled is true AND an icon is present.
+     * @returns true if dropdown should be disabled with icon, false otherwise
+     */
+    $disabledState = computed(() => {
+        const icon = this.$icon();
+        const disabled = this.$disabled();
+
+        return disabled && icon ? true : false;
+    });
+
+    /**
+     * Event emitted when the dropdown is opened.
+     * Useful for triggering actions when dropdown becomes visible.
+     */
+    wasOpen = output<void>();
+
+    /**
+     * Event emitted whenever the dropdown visibility state changes.
+     * Emits the current visibility state (true for open, false for closed).
+     */
+    toggle = output<boolean>();
+
+    /**
+     * Event emitted when the dropdown is closed.
+     * Useful for cleanup actions when dropdown becomes hidden.
+     */
+    shutdown = output<void>();
+
+    /**
+     * Signal tracking the current visibility state of the dropdown.
+     * true when dropdown is open, false when closed.
+     * @default false
+     */
+    $show = signal(false);
+
+    /**
+     * Host listener that handles clicks outside the dropdown component.
+     * Automatically closes the dropdown when user clicks outside of it.
+     * Traverses the DOM tree to determine if click occurred inside component.
+     *
+     * @param $event - The mouse click event from the document
+     */
     @HostListener('document:click', ['$event'])
     handleClick($event) {
         let clickedComponent = $event.target;
         let inside = false;
         do {
-            if (clickedComponent === this.elementRef.nativeElement) {
+            if (clickedComponent === this.#elementRef.nativeElement) {
                 inside = true;
             }
 
             clickedComponent = clickedComponent.parentNode;
         } while (clickedComponent);
 
         if (!inside) {
-            this.show = false;
+            this.$show.set(false);
         }
     }
 
+    /**
+     * Programmatically closes the dropdown by setting visibility to false.
+     * Can be called from parent components or internal logic to hide dropdown.
+     */
     closeIt(): void {
-        this.show = false;
+        this.$show.set(false);
     }
 
+    /**
+     * Toggles the dropdown visibility state and emits appropriate events.
+     * - Flips the current $show state
+     * - Emits wasOpen when dropdown opens
+     * - Emits shutdown when dropdown closes
+     * - Always emits toggle with current state
+     */
     onToggle(): void {
-        this.show = !this.show;
+        this.$show.update((value) => !value);
 
-        if (this.show) {
+        if (this.$show()) {
             this.wasOpen.emit();
         } else {
             this.shutdown.emit();
         }
 
-        this.toggle.emit(this.show);
+        this.toggle.emit(this.$show());
     }
 }

core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/components/dot-toolbar-announcements/dot-toolbar-announcements.component.ts

@@ -1,4 +1,4 @@
-import { DatePipe, LowerCasePipe, NgClass } from '@angular/common';
+import { CommonModule } from '@angular/common';
 import {
     Component,
     EventEmitter,
@@ -7,9 +7,9 @@ import {
     OnInit,
     Output,
     Signal,
-    ViewChild,
     inject,
-    signal
+    signal,
+    viewChild
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
@@ -30,14 +30,14 @@ import { DotMessagePipe } from '@dotcms/ui';
     templateUrl: './dot-toolbar-announcements.component.html',
     styleUrls: ['./dot-toolbar-announcements.component.scss'],
     standalone: true,
-    imports: [NgClass, DotMessagePipe, OverlayPanelModule, LowerCasePipe, DatePipe],
+    imports: [CommonModule, DotMessagePipe, OverlayPanelModule],
     providers: [AnnouncementsStore]
 })
 export class DotToolbarAnnouncementsComponent implements OnInit, OnChanges {
     announcementsStore = inject(AnnouncementsStore);
     dotMessageService = inject(DotMessageService);
     siteService = inject(SiteService);
-    @ViewChild('toolbarAnnouncements', { static: true }) toolbarAnnouncements: OverlayPanel;
+    $toolbarAnnouncements = viewChild.required<OverlayPanel>('toolbarAnnouncements');
     @Output() hideMenu = new EventEmitter();
 
     @Input() showUnreadAnnouncement: boolean;
@@ -85,7 +85,7 @@ export class DotToolbarAnnouncementsComponent implements OnInit, OnChanges {
      */
     toggleDialog(event): void {
         this.showMask.update((value) => !value);
-        this.toolbarAnnouncements.toggle(event);
+        this.$toolbarAnnouncements().toggle(event);
     }
 
     /**

core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/components/dot-toolbar-notifications/dot-toolbar-notifications.component.ts

@@ -12,7 +12,6 @@ import { FeaturedFlags } from '@dotcms/dotcms-models';
 import { DotMessagePipe } from '@dotcms/ui';
 import { INotification } from '@models/notifications';
 
-
 import { DotNotificationsListComponent } from './components/dot-notifications/dot-notifications.component';
 
 import { DotToolbarAnnouncementsComponent } from '../dot-toolbar-announcements/dot-toolbar-announcements.component';
@@ -34,6 +33,11 @@ import { DotToolbarAnnouncementsComponent } from '../dot-toolbar-announcements/d
     providers: [AnnouncementsStore]
 })
 export class DotToolbarNotificationsComponent implements OnInit {
+    iframeOverlayService = inject(IframeOverlayService);
+    private dotcmsEventsService = inject(DotcmsEventsService);
+    private loginService = inject(LoginService);
+    private notificationService = inject(NotificationsService);
+
     readonly #announcementsStore = inject(AnnouncementsStore);
 
     @ViewChild(DotDropdownComponent, { static: true }) dropdown: DotDropdownComponent;
@@ -51,13 +55,6 @@ export class DotToolbarNotificationsComponent implements OnInit {
 
     showUnreadAnnouncement = this.#announcementsStore.showUnreadAnnouncement;
 
-    constructor(
-        public iframeOverlayService: IframeOverlayService,
-        private dotcmsEventsService: DotcmsEventsService,
-        private loginService: LoginService,
-        private notificationService: NotificationsService
-    ) {}
-
     ngOnInit(): void {
         this.getNotifications();
         this.subscribeToNotifications();

core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/components/dot-toolbar-user/store/dot-toolbar-user.store.ts

@@ -1,7 +1,7 @@
 import { ComponentStore } from '@ngrx/component-store';
 import { Observable } from 'rxjs';
 
-import { Inject, Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 
 import { MenuItem } from 'primeng/api';
 
@@ -34,19 +34,19 @@ const INITIAL_STATE: DotToolbarUserState = {
 
 @Injectable()
 export class DotToolbarUserStore extends ComponentStore<DotToolbarUserState> {
+    private loginService = inject(LoginService);
+    private dotMessageService = inject(DotMessageService);
+    private dotNavigationService = inject(DotNavigationService);
+    private loggerService = inject(LoggerService);
+    private location = inject<Location>(LOCATION_TOKEN);
+
     private readonly FINAL_LOGOUT_URL = `${LOGOUT_URL}?r=${new Date().getTime()}`;
 
     readonly vm$: Observable<DotToolbarUserState> = this.select((state) => state).pipe(
         filter((vm) => !!vm.userData.email)
     );
 
-    constructor(
-        private loginService: LoginService,
-        private dotMessageService: DotMessageService,
-        private dotNavigationService: DotNavigationService,
-        private loggerService: LoggerService,
-        @Inject(LOCATION_TOKEN) private location: Location
-    ) {
+    constructor() {
         super(INITIAL_STATE);
     }
 

core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/dot-toolbar.component.html

@@ -9,7 +9,7 @@
                             ? 'pi pi-bars'
                             : 'pi pi-arrow-left'
                     "
-                    styleClass="p-button-rounded p-button-text"></p-button>
+                    styleClass="p-button-rounded p-button-text" />
             </div>
             <div
                 [class.toolbar__logo-wrapper--collapsed]="dotNavigationService.collapsed$ | async"
@@ -26,7 +26,7 @@
                 <span class="toolbar__logo-bg"></span>
             </div>
         </div>
-        <dot-crumbtrail class="toolbar__crumbtrail"></dot-crumbtrail>
+        <dot-crumbtrail class="toolbar__crumbtrail" />
     </div>
     <div class="p-toolbar-group-right">
         <dot-site-selector
@@ -37,8 +37,8 @@
             class="toolbar__site-selector"
             #siteSelector
             cssClass="d-secondary"
-            width="200px"></dot-site-selector>
-        <dot-toolbar-notifications></dot-toolbar-notifications>
-        <dot-toolbar-user></dot-toolbar-user>
+            width="200px" />
+        <dot-toolbar-notifications />
+        <dot-toolbar-user />
     </div>
 </p-toolbar>

core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/dot-toolbar.component.ts

@@ -35,20 +35,18 @@ import { DotNavigationService } from '../dot-navigation/services/dot-navigation.
     ]
 })
 export class DotToolbarComponent implements OnInit {
+    private dotRouterService = inject(DotRouterService);
+    private dotcmsEventsService = inject(DotcmsEventsService);
+    private siteService = inject(SiteService);
+    dotNavigationService = inject(DotNavigationService);
+    iframeOverlayService = inject(IframeOverlayService);
+
     readonly #dotNavLogoService = inject(DotNavLogoService);
 
     @Input()
     collapsed: boolean;
     logo$: BehaviorSubject<string> = this.#dotNavLogoService.navBarLogo$;
 
-    constructor(
-        private dotRouterService: DotRouterService,
-        private dotcmsEventsService: DotcmsEventsService,
-        private siteService: SiteService,
-        public dotNavigationService: DotNavigationService,
-        public iframeOverlayService: IframeOverlayService
-    ) {}
-
     ngOnInit(): void {
         this.dotcmsEventsService.subscribeTo<Site>('ARCHIVE_SITE').subscribe((data: Site) => {
             if (data.hostname === this.siteService.currentSite.hostname && data.archived) {