API リファレンス

utils の完全な仕様をここにまとめました。バインド、リッスン、プロジェクション、テーマ設定ができるすべてが一か所に集約されています。必要なものを接続し、好きなようにスタイリングしてください — standalone で signal フレンドリーです。

インプット

4 個のインプットで utils を調整。通常の Angular @Input と同じようにバインドできます。

名前	型	デフォルト	説明
`HubTranslationService`	`Service`	`-`	翻訳を管理するための注入可能なサービス。メソッド: getTranslation()、setTranslations()
`OverlayService`	`Service`	`-`	オーバーレイをプログラム的に作成・管理するためのサービス
`PopupService<T>`	`Service`	`-`	ポップアップ要素を作成するための簡易サービス
`HubTooltipDirective`	`Directive`	`-`	ホバーまたはフォーカス時に、配置可能でテーマ設定可能なツールチップを表示するディレクティブ（[hubTooltip]）。入力: hubTooltip（テキスト）、hubTooltipPlacement、hubTooltipDelay、hubTooltipOffset。接頭辞付きの名前により、[hubDropdown] のように独自の placement を宣言するディレクティブと同じ要素に共存できます。

アウトプット

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()`	要素内にキーボードフォーカスを閉じ込めます。モーダルやダイアログに役立ちます。	`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`	物理的な辺を論理軸へ往復させます。`top` / `bottom` / `left` / `right` で書かれた利用者向け API が RTL でも意味を保ち、反転の理屈は一度だけ考えれば済むようにするためです。	`hubToAnchorSide('left', true) → 'inline-end'; hubToPhysicalSide('inline-end', true) → 'left'`
`HubAnchorOptions / HubAnchoredPosition`	ソルバーが受け取り、返す型です。すべて素の数値なので、レイアウトエンジンなしで計算を検証できます。	`HubAnchorRect · HubAnchorSide · HubPhysicalSide · HubAnchorAlign · HubViewportSize · HubBoxSize · HubPoint`