# XWUIHrLeaveBalanceCards

Time-off summary widget (extends `XWUIComponent`) that renders a employee's leave entitlements as a grid of cards. It takes a `data.balances` array of `LeaveBalance` items and builds an `xwui-hr-card` block titled "Time off" ("الإجازات" in Arabic) containing an `xwui-hr-leave-grid`; each `xwui-hr-leave-card` shows the leave-type name and an `availed / entitled` count. Leave-type labels are locale-aware (`typeAr` used when `conf_comp.locale` is `'ar'`) and HTML-escaped. Use it inside an HR self-service page or dashboard to display per-type balances such as Sick, Hajj, or Bereavement.

## Basic Usage

Renders the time-off card grid from three in-memory `balances` (Bereavement, Sick, Hajj), each shown as an availed-over-entitled card.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Passes a balances array of Bereavement/Sick/Hajj LeaveBalance items so the widget renders the Time off card grid.
```

## Arabic Locale

Renders the cards in Arabic by setting `locale: 'ar'`, switching each card to its `typeAr` label and a right-to-left layout.

```example
file: examples/ArabicLocale.ts
html: examples/ArabicLocale.html
title: Arabic Locale
description: Sets locale to ar so the leave cards use their Arabic typeAr labels and flow right-to-left.
```

## Fully Availed

Exercises the exhausted-balance edge where Annual and Sick leave have `remaining: 0`.

```example
file: examples/FullyAvailed.ts
html: examples/FullyAvailed.html
title: Fully Availed
description: Renders balances with zero remaining days to show the fully-consumed leave state.
```

```api
```