Librería de Utilidades para Angular | ng-hub-ui-utils

Librería de utilidades para Angular con pipes, focus management, overlays, transiciones y helpers de traducción compartidos entre componentes reutilizables.

Referencia API

Aquí tienes el contrato completo de utils: todo lo que puedes enlazar, escuchar, proyectar y personalizar, reunido en un solo sitio. Enlaza lo que necesites y dale el estilo que quieras — es standalone y reactivo con signals.

Inputs

Ajusta utils a tu gusto con 4 inputs. Se enlazan como cualquier @Input de Angular.

NombreTipoPor defectoDescripción
HubTranslationServiceService-Servicio inyectable para gestionar las traducciones. Métodos: getTranslation(), setTranslations()
HubOverlayServiceService-Servicio para crear y gestionar overlays de forma programática
HubPopupServiceService-Servicio simplificado para crear elementos popup
TooltipDirectiveDirective-Directiva ([tooltip]) que muestra un tooltip posicionado y tematizable al pasar el cursor o enfocar. Inputs: tooltip (texto), placement, delay, offset.

Outputs

Reacciona a lo que hace utils: 7 eventos a los que enganchar tu lógica.

NombreTipoDescripción
TranslatePipePipeTraduce una clave usando HubTranslationService. Uso: {{ "key" | translate }}
GetPipePipeObtiene el valor de una propiedad anidada. Uso: {{ object | get:"path.to.property" }}
IsStringPipePipeComprueba si el valor es un string. Uso: {{ value | isString }}
IsObjectPipePipeComprueba si el valor es un objeto. Uso: {{ value | isObject }}
IsObservablePipePipeComprueba si el valor es un Observable. Uso: {{ value | isObservable }}
UcfirstPipePipePone en mayúscula la primera letra. Uso: {{ "hello" | ucfirst }} → "Hello"
UnwrapAsyncPipePipeDesenvuelve valores Observable o Promise en las plantillas

Templates

Hazlo tuyo — 4 plantillas para proyectar tu propio marcado.

NombreDescripciónEjemplo
hubFocusTrap()Atrapa el foco del teclado dentro de un elemento. Útil para modals y diálogos.hubFocusTrap(zone, element, stopFocusTrap$, refocusOnClick)
interpolateString()Reemplaza los {{ placeholders }} con valores de un objetointerpolateString("Hello {{name}}", { name: "World" }) → "Hello World"
getValue()Obtiene una propiedad anidada usando notación de puntosgetValue(obj, "user.profile.name")
equals()Comparación de igualdad profunda para objetos y arraysequals({ a: 1 }, { a: 1 }) → true