# @edsis/component

Angular library ini berada di `library/component` dan dipublikasikan dengan nama paket `@edsis/component`.

Library ini menggunakan pola secondary entry point per folder. Import yang disarankan adalah langsung ke subpath yang dibutuhkan, misalnya `@edsis/component/button` atau `@edsis/chart/bar`.

## Build

Jalankan build library dengan perintah berikut:

```bash
bunx ng build component
```

Artefak build akan ditulis ke `dist/component`.

## Penggunaan Lokal

Untuk import dari workspace ini, gunakan path berikut:

```bash
@edsis/component
```

Untuk komponen atau utilitas spesifik, gunakan subpath secondary entry point:

```bash
@edsis/component/button
@edsis/chart/bar
@edsis/component/icon
@edsis/theme/styles
```

Untuk helper internal yang juga berguna di aplikasi, gunakan subpath paling
kecil yang sesuai:

```ts
import { cn } from '@edsis/component/class';
import { uniqueId } from '@edsis/component/id';
import { overlayDismissals } from '@edsis/component/overlay';
```

`@edsis/component/utils` tetap tersedia untuk kompatibilitas, tetapi komponen
baru sebaiknya mengimpor dari subpath kecil agar bundle tidak menarik helper
overlay ketika hanya butuh class merge.

## Unit Test

Jalankan unit test library dengan perintah berikut:

```bash
bunx ng test component --watch=false
```

Runner test di workspace ini menggunakan Vitest melalui Angular build tooling.

## Konvensi Selector

Aturan baku agar semua tim memakai mental model yang sama:

| Jenis primitif                                                            | Selector                     | Contoh                             |
| ------------------------------------------------------------------------- | ---------------------------- | ---------------------------------- |
| Menempel ke elemen HTML semantik (button, input, label, textarea, select) | Attribute selector           | `<button Button>`, `<input Input>` |
| Container/komposit tanpa padanan elemen native                            | Element selector             | `<Card>`, `<Dialog>`, `<Tabs>`     |
| Behavior tanpa render (trigger, content marker)                           | Directive `[Xxx]` PascalCase | `[PopoverTrigger]`, `[Tooltip]`    |

Beberapa komponen menyediakan keduanya (`Label, label[Label]`) untuk
markup fleksibel — gunakan bentuk attribute bila elemen native tersedia karena
semantik & aksesibilitasnya gratis dari browser.

## Status Dependensi @angular/material

Library ini memakai `@angular/material` untuk `@edsis/component/select`, yang
mempertahankan interaksi combobox/listbox Material sambil menerapkan skin shadcn.
Calendar dan date picker tetap menggunakan primitive native/CDK:

- `@edsis/component/select` — turunan `MatSelect`/`MatOption`
  (`SelectField`/`SelectItem`, `mat-optgroup`, typeahead, dan pencarian opt-in).
- `@edsis/component/calendar` — grid tanggal native (`role="grid"`, navigasi
  panah/Home/End/PageUp/PageDown, tampilan month/year/multi-year, locale via
  `LOCALE_ID` + `Intl`).
- `@edsis/component/date-picker` — komposisi input + `Calendar` dalam CDK
  overlay (`touchUi` = dialog terpusat dengan backdrop).

Konsumen yang memakai entry point select perlu menyediakan `@angular/material`
beserta peer dependencies Angular-nya.