API reference

Here's the full contract for utils: everything you can bind, listen to, project and theme, gathered in one place. Wire up what you need and style what you want — it's standalone and signal-friendly.

Inputs

Dial utils in with 4 inputs. Bind them like any Angular @Input.

Name	Type	Default	Description
`HubTranslationService`	`Service`	`-`	Injectable service for managing translations. Methods: getTranslation(), setTranslations()
`OverlayService`	`Service`	`-`	Service for creating and managing overlays programmatically
`PopupService<T>`	`Service`	`-`	Simplified service for creating popup elements
`HubTooltipDirective`	`Directive`	`-`	Directive ([hubTooltip]) that shows a positioned, themeable tooltip on hover/focus. Inputs: hubTooltip (text), hubTooltipPlacement, hubTooltipDelay, hubTooltipOffset. The prefixed names let it share an element with directives that declare their own placement, such as [hubDropdown].

Outputs

React to what utils does — 7 events to hook your logic onto.

Name	Type	Description
`TranslatePipe`	`Pipe`	Translates a key using HubTranslationService. Usage: {{ "key" \| translate }}
`GetPipe`	`Pipe`	Gets nested property value. Usage: {{ object \| get:"path.to.property" }}
`IsStringPipe`	`Pipe`	Checks if value is a string. Usage: {{ value \| isString }}
`IsObjectPipe`	`Pipe`	Checks if value is an object. Usage: {{ value \| isObject }}
`IsObservablePipe`	`Pipe`	Checks if value is an Observable. Usage: {{ value \| isObservable }}
`UcfirstPipe`	`Pipe`	Capitalizes first letter. Usage: {{ "hello" \| ucfirst }} → "Hello"
`UnwrapAsyncPipe`	`Pipe`	Unwraps Observable or Promise values in templates

Templates

Make it yours — 11 template slots let you project custom markup.

Name	Description	Example
`hubFocusTrap()`	Traps keyboard focus within an element. Useful for modals and dialogs.	`hubFocusTrap(zone, element, stopFocusTrap$, refocusOnClick)`
`interpolateString()`	Replaces {{ placeholders }} with values from an object	`interpolateString("Hello {{name}}", { name: "World" }) → "Hello World"`
`getValue()`	Gets nested property using dot notation	`getValue(obj, "user.profile.name")`
`equals()`	Deep equality comparison for objects and arrays	`equals({ a: 1 }, { a: 1 }) → true`
`hubAnchorToViewport`	Places a box against an anchor on the preferred side, flips to the opposite only when that side cannot hold it and the opposite has more room, and clamps on the cross axis.	`hubAnchorToViewport({ anchor, box, viewport, side: 'block-start', offset: 8 }) → { x, y, side, flipped }`
`hubViewportOf`	Reads the viewport through the element's own view; `null` where there is none, such as a server render.	`hubViewportOf(element) → { width, height } \| null`
`hubFitsInViewport`	Whether a box of that size placed at that point lies entirely inside the viewport, once the margin is paid.	`hubFitsInViewport({ x, y }, { width, height }, viewport, 8) → boolean`
`hubClampToViewport`	Pulls a box back inside the viewport without moving it further than it has to, preferring the near edge when it is larger than the window.	`hubClampToViewport({ x, y }, { width, height }, viewport, 8) → { x, y }`
`hubOppositeSide`	The side directly across the anchor, which is the only sensible fallback for a side that does not fit.	`hubOppositeSide('inline-start') → 'inline-end'`
`hubToAnchorSide / hubToPhysicalSide`	Round-trip a physical edge through the logical axis, so a consumer API spelled in `top` / `bottom` / `left` / `right` keeps its meaning under RTL while the flip is reasoned once.	`hubToAnchorSide('left', true) → 'inline-end'; hubToPhysicalSide('inline-end', true) → 'left'`
`HubAnchorOptions / HubAnchoredPosition`	The types the solver takes and returns; all plain numbers, so the arithmetic is testable without a layout engine.	`HubAnchorRect · HubAnchorSide · HubPhysicalSide · HubAnchorAlign · HubViewportSize · HubBoxSize · HubPoint`