Справочник API

Вот полный контракт utils: всё, что можно привязать, прослушать, спроецировать и тематизировать, собрано в одном месте. Подключите то, что нужно, и оформите так, как хотите — это standalone и дружит с сигналами.

Входные свойства

Настройте utils с помощью 4 входных свойств. Привязывайте их, как любой @Input в Angular.

Имя	Тип	По умолчанию	Описание
`HubTranslationService`	`Service`	`-`	Injectable service для управления переводами. Методы: getTranslation(), setTranslations()
`OverlayService`	`Service`	`-`	Service для программного создания и управления overlays
`PopupService<T>`	`Service`	`-`	Упрощённый service для создания popup-элементов
`HubTooltipDirective`	`Directive`	`-`	Директива ([hubTooltip]), показывающая позиционируемую и тематизируемую подсказку при наведении или фокусе. Входы: hubTooltip (текст), hubTooltipPlacement, hubTooltipDelay, hubTooltipOffset. Префиксы позволяют ей делить элемент с директивами, объявляющими собственный placement, например [hubDropdown].

События

Реагируйте на то, что делает utils, — 7 событий, к которым можно подключить вашу логику.

Имя	Тип	Описание
`TranslatePipe`	`Pipe`	Переводит ключ с помощью HubTranslationService. Использование: {{ "key" \| translate }}
`GetPipe`	`Pipe`	Получает значение вложенного свойства. Использование: {{ object \| get:"path.to.property" }}
`IsStringPipe`	`Pipe`	Проверяет, является ли значение строкой. Использование: {{ value \| isString }}
`IsObjectPipe`	`Pipe`	Проверяет, является ли значение объектом. Использование: {{ value \| isObject }}
`IsObservablePipe`	`Pipe`	Проверяет, является ли значение Observable. Использование: {{ value \| isObservable }}
`UcfirstPipe`	`Pipe`	Делает первую букву заглавной. Использование: {{ "hello" \| ucfirst }} → "Hello"
`UnwrapAsyncPipe`	`Pipe`	Разворачивает значения Observable или Promise в шаблонах

Шаблоны

Сделайте его своим — 11 слотов шаблона позволяют проецировать собственную разметку.

Имя	Описание	Пример
`hubFocusTrap()`	Удерживает фокус клавиатуры внутри элемента. Полезно для modals и диалогов.	`hubFocusTrap(zone, element, stopFocusTrap$, refocusOnClick)`
`interpolateString()`	Заменяет {{ placeholders }} значениями из объекта	`interpolateString("Hello {{name}}", { name: "World" }) → "Hello World"`
`getValue()`	Получает вложенное свойство с использованием точечной нотации	`getValue(obj, "user.profile.name")`
`equals()`	Глубокое сравнение на равенство для объектов и массивов	`equals({ a: 1 }, { a: 1 }) → true`
`hubAnchorToViewport`	Ставит блок у якоря с предпочитаемой стороны, переворачивает на противоположную только когда та сторона его не вмещает, а противоположная просторнее, и удерживает по поперечной оси.	`hubAnchorToViewport({ anchor, box, viewport, side: 'block-start', offset: 8 }) → { x, y, side, flipped }`
`hubViewportOf`	Читает область просмотра через собственное представление элемента; `null` там, где его нет, — например при серверном рендеринге.	`hubViewportOf(element) → { width, height } \| null`
`hubFitsInViewport`	Помещается ли блок такого размера, поставленный в эту точку, целиком в область просмотра после вычета отступа.	`hubFitsInViewport({ x, y }, { width, height }, viewport, 8) → boolean`
`hubClampToViewport`	Возвращает блок внутрь области просмотра, не сдвигая его дальше необходимого, и предпочитает ближний край, когда блок больше окна.	`hubClampToViewport({ x, y }, { width, height }, viewport, 8) → { x, y }`
`hubOppositeSide`	Сторона прямо напротив якоря — единственная разумная замена для стороны, которая не помещается.	`hubOppositeSide('inline-start') → 'inline-end'`
`hubToAnchorSide / hubToPhysicalSide`	Переводит физический край в логическую ось и обратно, чтобы API, записанный в `top` / `bottom` / `left` / `right`, сохранял смысл под RTL, а переворот продумывался один раз.	`hubToAnchorSide('left', true) → 'inline-end'; hubToPhysicalSide('inline-end', true) → 'left'`
`HubAnchorOptions / HubAnchoredPosition`	Типы, которые принимает и возвращает решатель; сплошь простые числа, поэтому арифметику можно проверить без движка вёрстки.	`HubAnchorRect · HubAnchorSide · HubPhysicalSide · HubAnchorAlign · HubViewportSize · HubBoxSize · HubPoint`