@a.nemreen/dga-ui 0.3.13 → 0.3.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +119 -0
- package/README.md +45 -11
- package/fesm2022/a.nemreen-dga-ui-chart.mjs +471 -0
- package/fesm2022/a.nemreen-dga-ui-chatbot.mjs +295 -0
- package/fesm2022/a.nemreen-dga-ui-cookies.mjs +1 -1
- package/fesm2022/a.nemreen-dga-ui-date-picker.mjs +3 -3
- package/fesm2022/a.nemreen-dga-ui-dga-icon-defaults-5A50haok.mjs +1 -0
- package/fesm2022/a.nemreen-dga-ui-header.mjs +26 -8
- package/fesm2022/a.nemreen-dga-ui-page-transition.mjs +1 -0
- package/fesm2022/a.nemreen-dga-ui-saudi-cities.mjs +1 -0
- package/fesm2022/a.nemreen-dga-ui.mjs +4105 -1328
- package/package.json +20 -2
- package/types/a.nemreen-dga-ui-chart.d.ts +169 -0
- package/types/a.nemreen-dga-ui-chatbot.d.ts +102 -0
- package/types/a.nemreen-dga-ui-cookies.d.ts +1 -2
- package/types/a.nemreen-dga-ui-date-picker.d.ts +4 -47
- package/types/a.nemreen-dga-ui-page-transition.d.ts +51 -0
- package/types/a.nemreen-dga-ui-saudi-cities.d.ts +19 -0
- package/types/a.nemreen-dga-ui.d.ts +1610 -350
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
What changed in the packages you install. The same notes are on the live docs: [nemreen.info/dga/docs/changelog](https://nemreen.info/dga/docs/changelog).
|
|
4
|
+
|
|
5
|
+
Versions below are the ones published to npm. Work that is only in this repository is listed under **Unreleased** until the next version bump.
|
|
6
|
+
|
|
7
|
+
## 2026-09-29
|
|
8
|
+
|
|
9
|
+
`@a.nemreen/dga-ui` **0.3.15** · `@a.nemreen/dga-tokens` **0.3.8** · `@a.nemreen/dga-dynamic-form` **0.2.5**
|
|
10
|
+
|
|
11
|
+
### Added
|
|
12
|
+
|
|
13
|
+
- `@a.nemreen/dga-ui` — choice group, tree, tree select, IBAN, national ID, password strength, confirm dialog, file preview, print, offline, search bar, QR, barcode, map embed, stat strip, FAQ, event calendar, virtual list, bottom sheet, popover, rich text, signature pad, notification inbox, locale toggle, and theme toggle.
|
|
14
|
+
- `@a.nemreen/dga-ui` — table data grid: pagination footer, column picker, row actions, debounced filters, typed sort, error and empty states, and auto, table, or cards on small screens.
|
|
15
|
+
- `@a.nemreen/dga-ui` — icon overrides through `provideDgaIcons`, using Hugeicons instead of `@platformscode/icons`.
|
|
16
|
+
- `@a.nemreen/dga-ui` — select and autocomplete can show a loading row, emit search for remote options, and offer a create row. Buttons can stretch with `fullWidth`. Menus have an icon appearance.
|
|
17
|
+
|
|
18
|
+
### Changed
|
|
19
|
+
|
|
20
|
+
- `@a.nemreen/dga-ui` — event calendar days follow the date picker: circular days, a ring for today, a solid fill for the selected day, and no glow. The number stays readable on hover.
|
|
21
|
+
- `@a.nemreen/dga-tokens` — `host-compat.css` lists the new component selectors so a host reset does not flatten them.
|
|
22
|
+
- `@a.nemreen/dga-dynamic-form` — the published package now includes `CHANGELOG.md`.
|
|
23
|
+
- Demo — lighter first load with `NgOptimizedImage`, WebP heroes, and a tighter font-loading path. Docs changelog is paginated.
|
|
24
|
+
|
|
25
|
+
### Fixed
|
|
26
|
+
|
|
27
|
+
- `@a.nemreen/dga-ui` — image popup is moved to the document body so it is not painted under a sticky header or sidebar.
|
|
28
|
+
|
|
29
|
+
## 2026-09-20
|
|
30
|
+
|
|
31
|
+
`@a.nemreen/dga-ui` **0.3.14** · `@a.nemreen/dga-tokens` **0.3.7**
|
|
32
|
+
|
|
33
|
+
### Added
|
|
34
|
+
|
|
35
|
+
- `@a.nemreen/dga-tokens` — `DGA_FONT_STYLESHEETS` and `dgaEnsureFontStylesheet` so a font stylesheet can be injected when the user switches families.
|
|
36
|
+
- `@a.nemreen/dga-tokens` **0.3.5** — National Day 96 brand pack.
|
|
37
|
+
|
|
38
|
+
### Changed
|
|
39
|
+
|
|
40
|
+
- `@a.nemreen/dga-ui` **0.3.14** — chart, chatbot, page transition, and Saudi cities moved to secondary entries (`@a.nemreen/dga-ui/chart`, `/chatbot`, `/page-transition`, `/saudi-cities`) so the main bundle stays smaller. Icons load on demand.
|
|
41
|
+
- `@a.nemreen/dga-ui` **0.3.13** / tokens **0.3.6** — portal footers follow the active brand in light and dark. Toast outlet updated alongside the National Day 96 demo.
|
|
42
|
+
|
|
43
|
+
## 2026-09-17
|
|
44
|
+
|
|
45
|
+
`@a.nemreen/dga-ui` **0.3.12** · `@a.nemreen/dga-dynamic-form` **0.2.4**
|
|
46
|
+
|
|
47
|
+
### Added
|
|
48
|
+
|
|
49
|
+
- `@a.nemreen/dga-ui` — age range on page feedback.
|
|
50
|
+
|
|
51
|
+
### Changed
|
|
52
|
+
|
|
53
|
+
- `@a.nemreen/dga-dynamic-form` **0.2.4** — follows `DgaLocaleService` and updates labels when the locale changes.
|
|
54
|
+
- `@a.nemreen/dga-dynamic-form` **0.2.3** / `@a.nemreen/dga-ui` **0.3.11** — field visibility can depend on the selected option. Select menu styling updated.
|
|
55
|
+
|
|
56
|
+
## 2026-09-16
|
|
57
|
+
|
|
58
|
+
`@a.nemreen/dga-ui` **0.3.10** · `@a.nemreen/dga-tokens` **0.3.4**
|
|
59
|
+
|
|
60
|
+
### Added
|
|
61
|
+
|
|
62
|
+
- `@a.nemreen/dga-ui` — weather on `dga-top-bar`.
|
|
63
|
+
- `@a.nemreen/dga-ui` — shared floating-action dock for the chatbot and scroll-to-top.
|
|
64
|
+
|
|
65
|
+
## 2026-09-14
|
|
66
|
+
|
|
67
|
+
`@a.nemreen/dga-ui` **0.3.10** · `@a.nemreen/dga-tokens` **0.3.3**
|
|
68
|
+
|
|
69
|
+
`0.3.8` and `0.3.9` were not published on their own. Those fixes shipped inside **0.3.10**.
|
|
70
|
+
|
|
71
|
+
### Added
|
|
72
|
+
|
|
73
|
+
- `@a.nemreen/dga-ui` **0.3.7** — footer link groups and accessibility links.
|
|
74
|
+
|
|
75
|
+
### Fixed
|
|
76
|
+
|
|
77
|
+
- `@a.nemreen/dga-ui` — top-bar stamp notices stack full width on small screens.
|
|
78
|
+
- `@a.nemreen/dga-ui` — `NG0950` when `dga-tab` (and the content switcher) read `value` before it was bound.
|
|
79
|
+
- `@a.nemreen/dga-tokens` **0.3.2** / `@a.nemreen/dga-ui` **0.3.6** — `host-compat.css` so a host reset (`*` or `a`) no longer flattens DGA components. Top-bar clock lifecycle cleaned up. Broader locale coverage.
|
|
80
|
+
|
|
81
|
+
## 2026-09-03
|
|
82
|
+
|
|
83
|
+
`@a.nemreen/dga-ui` **0.3.5** · `@a.nemreen/dga-dynamic-form` **0.2.0**
|
|
84
|
+
|
|
85
|
+
### Added
|
|
86
|
+
|
|
87
|
+
- `@a.nemreen/dga-ui` — phone input with more countries and locale-aware formatting.
|
|
88
|
+
|
|
89
|
+
### Changed
|
|
90
|
+
|
|
91
|
+
- Dynamic form labels and validators follow the active locale. Locale helpers expanded in tokens and UI.
|
|
92
|
+
|
|
93
|
+
## 2026-09-01
|
|
94
|
+
|
|
95
|
+
`@a.nemreen/dga-ui` **0.3.4** · `@a.nemreen/dga-dynamic-form` **0.1.8** · `@a.nemreen/dga-tokens` **0.3.1**
|
|
96
|
+
|
|
97
|
+
### Added
|
|
98
|
+
|
|
99
|
+
- `@a.nemreen/dga-dynamic-form` **0.1.8** — cross-field validators (password, Saudi phone, date range), staged uploads, and visibility fixes across the 18 field types.
|
|
100
|
+
|
|
101
|
+
### Changed
|
|
102
|
+
|
|
103
|
+
- `@a.nemreen/dga-ui` **0.3.4** — chart tooltips.
|
|
104
|
+
|
|
105
|
+
## 2026-07-28
|
|
106
|
+
|
|
107
|
+
`@a.nemreen/dga-ui` **0.3.1**
|
|
108
|
+
|
|
109
|
+
### Fixed
|
|
110
|
+
|
|
111
|
+
- Overlay stacking, and the drawer releasing body scroll when it closes.
|
|
112
|
+
|
|
113
|
+
## 2026-07-25
|
|
114
|
+
|
|
115
|
+
`@a.nemreen/dga-ui` **0.3.0** · `@a.nemreen/dga-tokens` **0.3.0**
|
|
116
|
+
|
|
117
|
+
### Changed
|
|
118
|
+
|
|
119
|
+
- Accessibility panel redesign, stacked toasts, and portal chrome polish.
|
package/README.md
CHANGED
|
@@ -14,17 +14,23 @@ Standalone Angular UI components for the DGA design system — forms, overlays,
|
|
|
14
14
|
|
|
15
15
|
**Live demo:** [nemreen.info/dga](https://nemreen.info/dga/)
|
|
16
16
|
|
|
17
|
-
> Version **0.
|
|
17
|
+
> Version **0.3.x** until public API freeze (1.0).
|
|
18
|
+
|
|
19
|
+
## Changelog
|
|
20
|
+
|
|
21
|
+
[CHANGELOG.md](https://github.com/nemreen/dga-angular/blob/main/CHANGELOG.md) ships with this package. The same notes, in Arabic and English, are at [nemreen.info/dga/docs/changelog](https://nemreen.info/dga/docs/changelog).
|
|
18
22
|
|
|
19
23
|
## Features
|
|
20
24
|
|
|
21
|
-
- Standalone Angular 19 components (no NgModules)
|
|
25
|
+
- Standalone Angular 19+ components (no NgModules)
|
|
22
26
|
- RTL-first / Arabic-ready (logical CSS + locale-aware chrome)
|
|
23
|
-
- Forms: input, select, checkbox, radio, switch, OTP, upload, date picker, …
|
|
24
|
-
- Overlays: dialog, modal, drawer, toast, menu, tooltip
|
|
25
|
-
- Shell: header, top bar, hero, footer, preloader
|
|
26
|
-
- Feedback & a11y: alert, cookies, skip link (accessibility panel → `@a.nemreen/a11y`)
|
|
27
|
-
-
|
|
27
|
+
- Forms: input, select, autocomplete (async/creatable), checkbox, radio, switch, OTP, upload, date/time picker, signature pad, rich text, …
|
|
28
|
+
- Overlays: dialog, modal, drawer, bottom sheet, popover, toast, menu, tooltip, command
|
|
29
|
+
- Shell: header, top bar, hero, footer, preloader, theme toggle, locale toggle
|
|
30
|
+
- Feedback & a11y: alert, cookies, skip link, notification inbox (accessibility panel → `@a.nemreen/a11y`)
|
|
31
|
+
- Data: table (templates, filters, expand, bulk), virtual list, export, carousel, chart
|
|
32
|
+
- Content: timeline, calendar events, FAQ, QR/barcode, metrics
|
|
33
|
+
- Layout: card, section, grid, clamp, expandable, app shell
|
|
28
34
|
|
|
29
35
|
## Install
|
|
30
36
|
|
|
@@ -49,7 +55,7 @@ Sources live under `src/lib/<domain>/<component>/`. Place new work in the matchi
|
|
|
49
55
|
| `shell/` | Page chrome (header, footer, hero, …) |
|
|
50
56
|
| `content/` | Content presentation (list, quote, metric, …) |
|
|
51
57
|
| `data/` | Tables, charts, export |
|
|
52
|
-
| `domain/` | Locale/region data helpers (not UI) |
|
|
58
|
+
| `domain/` | Locale/region data helpers (not UI). Saudi cities ship as `@a.nemreen/dga-ui/saudi-cities`. |
|
|
53
59
|
| `utils/` | Internal helpers only (not exported) |
|
|
54
60
|
|
|
55
61
|
Import from the public package surface — do not deep-import `src/lib/...` paths.
|
|
@@ -64,6 +70,10 @@ Heavier shell pieces ship as separate FESMs so the primary bundle stays lean:
|
|
|
64
70
|
import { DgaHeader } from '@a.nemreen/dga-ui/header';
|
|
65
71
|
import { DgaCookies } from '@a.nemreen/dga-ui/cookies';
|
|
66
72
|
import { DgaDatePicker } from '@a.nemreen/dga-ui/date-picker';
|
|
73
|
+
import { DgaChart } from '@a.nemreen/dga-ui/chart';
|
|
74
|
+
import { DgaChatbot } from '@a.nemreen/dga-ui/chatbot';
|
|
75
|
+
import { DgaPageTransition } from '@a.nemreen/dga-ui/page-transition';
|
|
76
|
+
import { DGA_SAUDI_CITIES } from '@a.nemreen/dga-ui/saudi-cities';
|
|
67
77
|
```
|
|
68
78
|
|
|
69
79
|
Accessibility tools live in a separate package — [`@a.nemreen/a11y`](https://www.npmjs.com/package/@a.nemreen/a11y) — mount with `Accessibility.mount()`.
|
|
@@ -103,6 +113,11 @@ import {
|
|
|
103
113
|
DgaCard,
|
|
104
114
|
DgaDivider,
|
|
105
115
|
DgaIcon,
|
|
116
|
+
DgaTable,
|
|
117
|
+
DgaBottomSheet,
|
|
118
|
+
DgaPopover,
|
|
119
|
+
DgaThemeToggle,
|
|
120
|
+
DgaLocaleToggle,
|
|
106
121
|
} from '@a.nemreen/dga-ui';
|
|
107
122
|
```
|
|
108
123
|
|
|
@@ -110,15 +125,16 @@ import {
|
|
|
110
125
|
|
|
111
126
|
### Icon
|
|
112
127
|
|
|
113
|
-
Two layers:
|
|
128
|
+
Two layers, both HugeIcons Stroke Rounded (DGA / Platforms Code family):
|
|
114
129
|
|
|
115
130
|
1. **Chrome** — curated inline SVG via `name` (paints with the first frame; use in buttons, fields, menus).
|
|
116
|
-
2. **Content** —
|
|
131
|
+
2. **Content** — optional font via `glyph` (opt into `@a.nemreen/dga-tokens/styles/icon-font.css`).
|
|
117
132
|
|
|
118
133
|
```html
|
|
119
134
|
<!-- Chrome (always available) -->
|
|
120
135
|
<dga-icon name="search" size="sm" />
|
|
121
136
|
<dga-icon name="arrowNext" size="sm" label="التالي" />
|
|
137
|
+
<dga-icon name="riyal" size="md" />
|
|
122
138
|
|
|
123
139
|
<!-- Content (requires icon-font.css) -->
|
|
124
140
|
<dga-icon glyph="search-01" size="xl" />
|
|
@@ -129,7 +145,25 @@ Use `arrowNext` / `arrowPrev` for forward/back — they mirror under `dir="rtl"`
|
|
|
129
145
|
|
|
130
146
|
Sizes (px): `2xs` 10 · `xs` 14 · `sm` 16 · `md` 18 · `lg` 20 · `xl` 24 · `2xl` 28 · `3xl` 32.
|
|
131
147
|
|
|
132
|
-
|
|
148
|
+
`DgaIcon` inlines a small HugeIcons core map (close / menu / search / chevrons / check / user / …) and lazy-loads the curated catalog on the first non-core `name`. Apps can add icons without forking the library:
|
|
149
|
+
|
|
150
|
+
```ts
|
|
151
|
+
import { provideDgaIcons } from '@a.nemreen/dga-ui';
|
|
152
|
+
|
|
153
|
+
bootstrapApplication(App, {
|
|
154
|
+
providers: [
|
|
155
|
+
provideDgaIcons({
|
|
156
|
+
myBrand: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">…</svg>`,
|
|
157
|
+
}),
|
|
158
|
+
],
|
|
159
|
+
});
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
```html
|
|
163
|
+
<dga-icon name="myBrand" size="md" />
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
Source: `@hugeicons/core-free-icons` (same family as design.dga.gov.sa). Regenerate with `node scripts/generate-dga-icons.mjs`.
|
|
133
167
|
|
|
134
168
|
### Scroll to top
|
|
135
169
|
|