Bibliothèque Utilitaire Angular | ng-hub-ui-utils
Bibliothèque utilitaire Angular avec pipes, gestion du focus, overlays, transitions et helpers de traduction partagés entre les composants UI réutilisables.
Référence API
Voici le contrat complet de utils : tout ce que vous pouvez lier, écouter, projeter et personnaliser, réuni au même endroit. Branchez ce dont vous avez besoin et stylisez ce que vous voulez — c’est standalone et compatible avec les signals.
Inputs
Réglez utils à votre goût avec 4 inputs. Liez-les comme n’importe quel @Input Angular.
| Nom | Type | Par défaut | Description |
|---|---|---|---|
HubTranslationService | Service | - | Service injectable pour gérer les traductions. Méthodes : getTranslation(), setTranslations(). |
HubOverlayService | Service | - | Service pour créer et gérer des overlays de manière programmatique. |
HubPopupService | Service | - | Service simplifié pour créer des éléments popup. |
TooltipDirective | Directive | - | Directive ([tooltip]) that shows a positioned, themeable tooltip on hover/focus. Inputs: tooltip (text), placement, delay, offset. |
Outputs
Réagissez à ce que fait utils — 7 événements sur lesquels accrocher votre logique.
| Nom | Type | Description |
|---|---|---|
TranslatePipe | Pipe | Traduit une clé à l'aide de HubTranslationService. Utilisation : {{ "key" | translate }}. |
GetPipe | Pipe | Obtient la valeur d'une propriété imbriquée. Utilisation : {{ object | get:"path.to.property" }}. |
IsStringPipe | Pipe | Vérifie si la valeur est une chaîne. Utilisation : {{ value | isString }}. |
IsObjectPipe | Pipe | Vérifie si la valeur est un objet. Utilisation : {{ value | isObject }}. |
IsObservablePipe | Pipe | Vérifie si la valeur est un Observable. Utilisation : {{ value | isObservable }}. |
UcfirstPipe | Pipe | Met en majuscule la première lettre. Utilisation : {{ "hello" | ucfirst }} → "Hello". |
UnwrapAsyncPipe | Pipe | Déballe les valeurs Observable ou Promise dans les modèles. |
Templates
Faites-le vôtre — 4 emplacements de template vous permettent de projeter votre propre balisage.
| Nom | Description | Exemple |
|---|---|---|
hubFocusTrap() | Piège le focus clavier au sein d'un élément. Utile pour les modals et les boîtes de dialogue. | hubFocusTrap(zone, element, stopFocusTrap$, refocusOnClick) |
interpolateString() | Remplace les {{ placeholders }} par des valeurs issues d'un objet. | interpolateString("Hello {{name}}", { name: "World" }) → "Hello World" |
getValue() | Obtient une propriété imbriquée à l'aide de la notation pointée. | getValue(obj, "user.profile.name") |
equals() | Comparaison d'égalité en profondeur pour les objets et les tableaux. | equals({ a: 1 }, { a: 1 }) → true |
Variables CSS
Personnalisez chaque pixel avec 19 variables CSS. Remplacez-les au niveau de :root ou limitez-les à un conteneur.
Tooltip
Theming tokens for the [tooltip] directive.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--hub-tooltip-bg | var(--hub-ref-color-black, #000) | color | Tooltip background colour. var(--hub-sys-color-primary)#212529 |
--hub-tooltip-color | var(--hub-ref-color-white, #fff) | color | Tooltip text colour. #fff#f8f9fa |
--hub-tooltip-opacity | 0.9 | number | Opacity of the shown tooltip. 10.85 |
--hub-tooltip-padding-x | var(--hub-ref-space-2, 0.5rem) | length | Horizontal padding inside the tooltip. 0.75rem1rem |
--hub-tooltip-padding-y | var(--hub-ref-space-1, 0.25rem) | length | Vertical padding inside the tooltip. 0.375rem0.5rem |
--hub-tooltip-border-radius | var(--hub-sys-radius-md, 0.375rem) | length | Corner radius of the tooltip. 0.25rem999px |
--hub-tooltip-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | Font size of the tooltip text. 0.75rem1rem |
--hub-tooltip-font-weight | var(--hub-ref-font-weight-base, 400) | number | Font weight of the tooltip text. 500600 |
--hub-tooltip-line-height | var(--hub-ref-line-height-base, 1.5) | number | Line height of the tooltip text. 1.41.6 |
--hub-tooltip-max-width | 200px | length | Maximum width before the text wraps. 160px320px |
--hub-tooltip-zindex | var(--hub-sys-zindex-tooltip, 1080) | number | Stacking order of the tooltip element. 10802000 |
--hub-tooltip-transition-duration | 0.15s | transition | Fade in/out duration. 0.1s0.25s |
--hub-tooltip-shadow | none | shadow | Box shadow of the tooltip. var(--hub-sys-shadow)0 2px 8px rgba(0,0,0,.2) |
--hub-tooltip-font-family | var(--hub-ref-font-family-base, inherit) | string | Font family of the tooltip text. inheritmonospace |
Overlay
CSS variables consumed by the overlay/popup system (`.hub-overlay-container` / `.hub-overlay-backdrop`).
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--hub-overlay-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Background of the overlay panel. #fffvar(--hub-sys-surface-page) |
--hub-overlay-border-radius | var(--hub-sys-radius-sm, 0.25rem) | length | Corner radius of the overlay panel. 0.5rem0 |
--hub-overlay-shadow | var(--hub-sys-shadow, 0 0.5rem 1rem rgba(0,0,0,.15)) | shadow | Elevation shadow of the overlay panel. var(--hub-sys-shadow-lg)none |
--hub-overlay-zindex | var(--hub-sys-zindex-dropdown, 1000) | number | Stacking order of the overlay panel. 10502000 |
--hub-overlay-backdrop-zindex | calc(var(--hub-sys-zindex-dropdown, 1000) - 1) | number | Stacking order of the overlay backdrop (just below the panel). 10491999 |
Styles et theming
Aucun exemple de style n’est encore documenté. Cette section inclura des recettes de personnalisation et des exemples de theming.