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.

Nombre	Tipo	Por defecto	Descripción
`HubTranslationService`	`Service`	`-`	Servicio inyectable para gestionar las traducciones. Métodos: getTranslation(), setTranslations()
`OverlayService`	`Service`	`-`	Servicio para crear y gestionar overlays de forma programática
`PopupService<T>`	`Service`	`-`	Servicio simplificado para crear elementos popup
`HubTooltipDirective`	`Directive`	`-`	Directiva ([hubTooltip]) que muestra un tooltip posicionado y tematizable al pasar el ratón o al enfocar. Entradas: hubTooltip (texto), hubTooltipPlacement, hubTooltipDelay, hubTooltipOffset. Los nombres con prefijo le permiten convivir en el mismo elemento con directivas que declaran su propio placement, como [hubDropdown].

Outputs

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

Nombre	Tipo	Descripción
`TranslatePipe`	`Pipe`	Traduce una clave usando HubTranslationService. Uso: {{ "key" \| translate }}
`GetPipe`	`Pipe`	Obtiene el valor de una propiedad anidada. Uso: {{ object \| get:"path.to.property" }}
`IsStringPipe`	`Pipe`	Comprueba si el valor es un string. Uso: {{ value \| isString }}
`IsObjectPipe`	`Pipe`	Comprueba si el valor es un objeto. Uso: {{ value \| isObject }}
`IsObservablePipe`	`Pipe`	Comprueba si el valor es un Observable. Uso: {{ value \| isObservable }}
`UcfirstPipe`	`Pipe`	Pone en mayúscula la primera letra. Uso: {{ "hello" \| ucfirst }} → "Hello"
`UnwrapAsyncPipe`	`Pipe`	Desenvuelve valores Observable o Promise en las plantillas

Templates

Hazlo tuyo — 11 plantillas para proyectar tu propio marcado.

Nombre	Descripción	Ejemplo
`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 objeto	`interpolateString("Hello {{name}}", { name: "World" }) → "Hello World"`
`getValue()`	Obtiene una propiedad anidada usando notación de puntos	`getValue(obj, "user.profile.name")`
`equals()`	Comparación de igualdad profunda para objetos y arrays	`equals({ a: 1 }, { a: 1 }) → true`
`hubAnchorToViewport`	Coloca una caja contra un anclaje por el lado preferido, se da la vuelta al contrario solo cuando ese lado no la sostiene y el opuesto tiene más sitio, y la sujeta en el eje transversal.	`hubAnchorToViewport({ anchor, box, viewport, side: 'block-start', offset: 8 }) → { x, y, side, flipped }`
`hubViewportOf`	Lee la ventana a través de la vista del propio elemento; `null` donde no hay ninguna, como en un render de servidor.	`hubViewportOf(element) → { width, height } \| null`
`hubFitsInViewport`	Si una caja de ese tamaño puesta en ese punto cabe entera dentro de la ventana, descontado el margen.	`hubFitsInViewport({ x, y }, { width, height }, viewport, 8) → boolean`
`hubClampToViewport`	Mete una caja de vuelta dentro de la ventana sin moverla más de lo necesario, prefiriendo el borde cercano cuando la caja es más grande que la ventana.	`hubClampToViewport({ x, y }, { width, height }, viewport, 8) → { x, y }`
`hubOppositeSide`	El lado justo enfrente del anclaje, que es el único repuesto sensato para un lado que no cabe.	`hubOppositeSide('inline-start') → 'inline-end'`
`hubToAnchorSide / hubToPhysicalSide`	Lleva un borde físico al eje lógico y de vuelta, para que una API escrita en `top` / `bottom` / `left` / `right` conserve su sentido en escritura de derecha a izquierda mientras la vuelta se razona una sola vez.	`hubToAnchorSide('left', true) → 'inline-end'; hubToPhysicalSide('inline-end', true) → 'left'`
`HubAnchorOptions / HubAnchoredPosition`	Los tipos que toma y devuelve el solucionador; todo números pelados, así que la aritmética se puede probar sin motor de maquetación.	`HubAnchorRect · HubAnchorSide · HubPhysicalSide · HubAnchorAlign · HubViewportSize · HubBoxSize · HubPoint`