Add DropdownCoordinatorService

Author: jose-web

CLAUDE.md

@@ -15,7 +15,7 @@ Este repo es además una evolución de lo que antes era `@some-angular-utils/fil
 
 La librería pasó por un rename que dejó residuos. El componente actual (`SAUDateRangePickerModule`, selector `sau-date-range-picker`, archivo `date-range-picker.component.ts`) antes se llamaba `SAUDateRangePickerModule` con selector `<sau-date-range-picker>`, y vivía en `projects/some-angular-utils/date-picker/.../components/sau-date-range-picker/`. El nombre de carpeta del proyecto Angular pasó de `date-picker` a `date-range-picker` (ahora sí coincide con el nombre del paquete npm), y la clase pasó de `sau-date-range-picker` a `date-range-picker`. Pero el rename quedó **incompleto**:
 
-- `angular.json` (target de librería, líneas ~67-90) y `tsconfig.json` (`references`) todavía apuntan a `projects/some-angular-utils/date-picker/...`, una ruta que **ya no existe en disco** (ahora es `projects/some-angular-utils/date-range-picker/...`). El build real (`npm run build:lib`) no pasa por ahí — invoca `ng-packagr` directamente sobre `projects/some-angular-utils/date-range-picker/ng-package.json` — así que el build funciona a pesar de la referencia rota, pero cualquier tooling que sí use esas referencias (IDE, `ng test` del proyecto librería, etc.) puede fallar o resolver mal.
+- ~~`angular.json` (target de librería) y `tsconfig.json` (`references`) apuntaban a `projects/some-angular-utils/date-picker/...`~~ — **corregido** (2026-08-23): ambos ya apuntan a `projects/some-angular-utils/date-range-picker/...`. Antes de la corrección, el build real (`npm run build:lib`) funcionaba igual porque invoca `ng-packagr` directamente sobre `ng-package.json` sin pasar por esas referencias, pero cualquier tooling que sí las usara (IDE/tsserver, `ng test` del proyecto librería) resolvía mal — en concreto, el `tsconfig.json` raíz no lograba asociar los archivos de la librería a un proyecto con `experimentalDecorators: true`, lo que producía errores falsos tipo `Decorators are not valid here.ts(1206)` en decoradores de parámetro (p. ej. `@Optional()` en el constructor de `date-range-picker.component.ts`) aunque el código fuera válido. Si reaparece ese error, reinicia el TS server del IDE.
 - `src/app/components/installation/installation.ts` (snippet de uso) y `src/app/components/demos/demos.html` (texto de la sección "See it in action") todavía muestran/mencionan `<sau-date-range-picker>` y `SAUDateRangePickerModule` en vez del nombre real `<sau-date-range-picker>` / `SAUDateRangePickerModule`. Es texto de la showcase desactualizado, no refleja cómo se usa la librería realmente — si tocas esos archivos, vale la pena corregirlo de paso.
 
 Si vuelves a encontrar `sau-date-range-picker`/`SAUDateRangePickerModule` en algún sitio no listado arriba, asume que es otro resquicio del mismo rename incompleto, no una API alternativa vigente.
@@ -26,11 +26,10 @@ Si vuelves a encontrar `sau-date-range-picker`/`SAUDateRangePickerModule` en alg
 date-input/
 ├── CLAUDE.md
 ├── README.md
-├── angular.json                          # ⚠️ el target de librería referencia la ruta vieja "date-picker" (ver arriba)
+├── angular.json
 ├── package.json
 ├── .postcssrc.json                      # Tailwind v4 vía @tailwindcss/postcss
 ├── tsconfig.json                        # mapea "@some-angular-utils/date-range-picker" -> dist/some-angular-utils/date-range-picker
-│                                         # (su "references" también apunta a la ruta vieja "date-picker", ver arriba)
 │
 ├── src/                                  # app showcase (proyecto "date-range-picker")
 │   ├── index.html

angular.json

@@ -66,26 +66,26 @@
     },
     "@some-angular-utils/date-range-picker": {
       "projectType": "library",
-      "root": "projects/some-angular-utils/date-picker",
-      "sourceRoot": "projects/some-angular-utils/date-picker/src",
+      "root": "projects/some-angular-utils/date-range-picker",
+      "sourceRoot": "projects/some-angular-utils/date-range-picker/src",
       "prefix": "lib",
       "architect": {
         "build": {
           "builder": "@angular/build:ng-packagr",
           "configurations": {
             "production": {
-              "tsConfig": "projects/some-angular-utils/date-picker/tsconfig.lib.prod.json"
+              "tsConfig": "projects/some-angular-utils/date-range-picker/tsconfig.lib.prod.json"
             },
             "development": {
-              "tsConfig": "projects/some-angular-utils/date-picker/tsconfig.lib.json"
+              "tsConfig": "projects/some-angular-utils/date-range-picker/tsconfig.lib.json"
             }
           },
           "defaultConfiguration": "production"
         },
         "test": {
           "builder": "@angular/build:unit-test",
           "options": {
-            "tsConfig": "projects/some-angular-utils/date-picker/tsconfig.spec.json"
+            "tsConfig": "projects/some-angular-utils/date-range-picker/tsconfig.spec.json"
           }
         }
       }

projects/some-angular-utils/date-range-picker/src/lib/date-range-picker.component.ts

@@ -1,6 +1,9 @@
-import { Component, Input, Output, EventEmitter, signal, computed, effect, ElementRef, HostListener } from '@angular/core';
+import { Component, Input, Output, EventEmitter, signal, computed, effect, ElementRef, HostListener, OnInit, OnDestroy, Optional } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { AbstractControl, FormControl, ReactiveFormsModule } from '@angular/forms';
+import { Subscription } from 'rxjs';
+
+import { DropdownCoordinatorService } from './dropdown-coordinator.service';
 
 export interface DateRangeOption {
     label: string;
@@ -14,7 +17,7 @@ export interface DateRangeOption {
     styleUrl: './date-range-picker.component.scss',
     imports: [CommonModule, ReactiveFormsModule]
 })
-export class SAUDateRangePickerModule {
+export class SAUDateRangePickerModule implements OnInit, OnDestroy {
     @Input() label = '';
     @Input() placeholder = 'Selecciona rango de fechas';
 
@@ -59,14 +62,31 @@ export class SAUDateRangePickerModule {
         return `${this.formatDate(start)} - ${this.formatDate(end)}`;
     });
 
-    constructor(private elementRef: ElementRef) {
+    private openedSubscription?: Subscription;
+
+    constructor(private elementRef: ElementRef, @Optional() private coordinator?: DropdownCoordinatorService) {
         effect(() => {
             if (this.showCalendar()) {
                 this.selectingEndDate.set(false);
             }
         });
     }
 
+    ngOnInit() {
+        // Si un custom-select/custom-input del mismo host se abre, cerramos este
+        this.openedSubscription = this.coordinator?.opened$.subscribe(source => {
+            if (source !== this && (this.showDropdown() || this.showCalendar())) {
+                this.showDropdown.set(false);
+                this.showCalendar.set(false);
+                this.hoveredDate.set(null);
+            }
+        });
+    }
+
+    ngOnDestroy() {
+        this.openedSubscription?.unsubscribe();
+    }
+
     @HostListener('document:click', ['$event'])
     clickOut(event: MouseEvent) {
         if (!this.elementRef.nativeElement.contains(event.target)) {
@@ -152,7 +172,14 @@ export class SAUDateRangePickerModule {
             this.showCalendar.set(false);
             this.showDropdown.set(false);
         } else {
-            this.showDropdown.set(!this.showDropdown());
+            const opening = !this.showDropdown();
+            this.showDropdown.set(opening);
+            // stopPropagation() de arriba impide que el clickOut() de document de otros
+            // custom-select/custom-input/sau-date-range-picker se dispare, así que avisamos
+            // explícitamente para que se cierren
+            if (opening) {
+                this.coordinator?.notifyOpened(this);
+            }
         }
     }
 

projects/some-angular-utils/date-range-picker/src/lib/dropdown-coordinator.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+/**
+ * Coordina el cierre de los distintos desplegables (sau-date-range-picker,
+ * custom-select, custom-input) que convivan dentro de un mismo host (p.ej. <sau-filter>).
+ * Cada uno hace stopPropagation() al abrirse, así que el clickOut() de document
+ * de los demás nunca se dispara; sin este servicio, dos desplegables abiertos
+ * a la vez se quedan ambos abiertos.
+ */
+@Injectable()
+export class DropdownCoordinatorService {
+  private readonly openedSource = new Subject<unknown>();
+  readonly opened$ = this.openedSource.asObservable();
+
+  notifyOpened(source: unknown): void {
+    this.openedSource.next(source);
+  }
+}

projects/some-angular-utils/date-range-picker/src/public-api.ts

@@ -3,3 +3,4 @@
  */
 
 export * from './lib/date-range-picker.component';
+export * from './lib/dropdown-coordinator.service';

tsconfig.json

@@ -35,10 +35,10 @@
       "path": "./tsconfig.spec.json"
     },
     {
-      "path": "./projects/some-angular-utils/date-picker/tsconfig.lib.json"
+      "path": "./projects/some-angular-utils/date-range-picker/tsconfig.lib.json"
     },
     {
-      "path": "./projects/some-angular-utils/date-picker/tsconfig.spec.json"
+      "path": "./projects/some-angular-utils/date-range-picker/tsconfig.spec.json"
     }
   ]
 }