@edsis/ui 21.3.7 → 21.3.9

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.
Files changed (40) hide show
  1. package/README.md +2 -0
  2. package/fesm2022/edsis-ui-avatar.mjs +1 -1
  3. package/fesm2022/edsis-ui-avatar.mjs.map +1 -1
  4. package/fesm2022/edsis-ui-card.mjs +1 -1
  5. package/fesm2022/edsis-ui-card.mjs.map +1 -1
  6. package/fesm2022/edsis-ui-chart.mjs +12 -12
  7. package/fesm2022/edsis-ui-chart.mjs.map +1 -1
  8. package/fesm2022/edsis-ui-composer.mjs +2 -2
  9. package/fesm2022/edsis-ui-composer.mjs.map +1 -1
  10. package/fesm2022/edsis-ui-editor.mjs +9 -2
  11. package/fesm2022/edsis-ui-editor.mjs.map +1 -1
  12. package/fesm2022/edsis-ui-icon.mjs +78 -0
  13. package/fesm2022/edsis-ui-icon.mjs.map +1 -0
  14. package/fesm2022/edsis-ui-input-group.mjs +2 -2
  15. package/fesm2022/edsis-ui-input-group.mjs.map +1 -1
  16. package/fesm2022/edsis-ui-kbd.mjs +1 -1
  17. package/fesm2022/edsis-ui-kbd.mjs.map +1 -1
  18. package/fesm2022/edsis-ui-layout.mjs +4 -4
  19. package/fesm2022/edsis-ui-layout.mjs.map +1 -1
  20. package/fesm2022/edsis-ui-nav.mjs +30 -37
  21. package/fesm2022/edsis-ui-nav.mjs.map +1 -1
  22. package/fesm2022/edsis-ui-page.mjs +67 -15
  23. package/fesm2022/edsis-ui-page.mjs.map +1 -1
  24. package/fesm2022/edsis-ui-pillbox.mjs +1 -1
  25. package/fesm2022/edsis-ui-pillbox.mjs.map +1 -1
  26. package/fesm2022/edsis-ui-scroll-area.mjs +2 -2
  27. package/fesm2022/edsis-ui-scroll-area.mjs.map +1 -1
  28. package/fesm2022/edsis-ui-theme.mjs +11 -3
  29. package/fesm2022/edsis-ui-theme.mjs.map +1 -1
  30. package/fesm2022/edsis-ui-timeline.mjs +17 -17
  31. package/fesm2022/edsis-ui-timeline.mjs.map +1 -1
  32. package/icon/README.md +25 -0
  33. package/nav/README.md +9 -3
  34. package/package.json +5 -1
  35. package/page/README.md +198 -5
  36. package/theme/README.md +30 -0
  37. package/types/edsis-ui-editor.d.ts +1 -0
  38. package/types/edsis-ui-icon.d.ts +31 -0
  39. package/types/edsis-ui-page.d.ts +34 -3
  40. package/types/edsis-ui-theme.d.ts +10 -2
package/icon/README.md ADDED
@@ -0,0 +1,25 @@
1
+ # Icon
2
+
3
+ `@edsis/ui/icon` menyediakan primitive icon berbasis Material Symbols untuk library UI ini.
4
+
5
+ ```ts
6
+ import { UiIconComponent } from '@edsis/ui/icon';
7
+ import { provideUiTheme } from '@edsis/ui/theme';
8
+ ```
9
+
10
+ ```html
11
+ <ui-icon name="dashboard" [size]="20" class="text-primary" />
12
+ ```
13
+
14
+ ## API Notes
15
+
16
+ - `name` menerima nama glyph Material Symbols, misalnya `dashboard` atau `left_panel_close`.
17
+ - `size` mengatur `font-size` dan `line-height` host dalam pixel.
18
+ - `fill`, `weight`, `grade`, dan `opticalSize` diteruskan ke `font-variation-settings`.
19
+ - `class` menerima utilitas Tailwind tambahan pada host.
20
+
21
+ ## Font Loading
22
+
23
+ - `UiIconComponent` akan memastikan stylesheet Material Symbols tersedia saat icon pertama dirender.
24
+ - `provideUiTheme()` juga mem-bootstrap stylesheet yang sama lebih awal pada level aplikasi.
25
+ - Gunakan `provideUiTheme({ icons: { materialSymbols: false } })` bila consumer ingin menonaktifkan preload global.
package/nav/README.md CHANGED
@@ -81,16 +81,22 @@ Instance preferences are stored under:
81
81
 
82
82
  ## Icons
83
83
 
84
- `ui-nav` does not load icon fonts or depend on an icon package. Pass an optional icon template when you need custom rendering.
84
+ Saat `item.icon` tersedia, `ui-nav` akan merender Material Symbols secara default melalui `@edsis/ui/icon`. Jalankan `provideUiTheme()` untuk preload global, atau biarkan `UiIconComponent` melakukan lazy-load saat icon pertama dipakai.
85
+
86
+ ```html
87
+ <ui-nav [items]="items" />
88
+ ```
89
+
90
+ Gunakan template `uiNavIcon` hanya bila consumer ingin override renderer bawaan.
85
91
 
86
92
  ```html
87
93
  <ui-nav [items]="items">
88
94
  <ng-template uiNavIcon let-icon>
89
- <span class="material-symbols-outlined" aria-hidden="true">{{ icon }}</span>
95
+ <ui-icon [name]="icon" class="text-primary" />
90
96
  </ng-template>
91
97
  </ui-nav>
92
98
  ```
93
99
 
94
100
  ## Boundaries
95
101
 
96
- This entry point must stay consumer-agnostic. Layout and theme composition belong to the consumer layer, while nav appearance defaults, instance registration, and overlay state now live inside `NavService`.
102
+ Entry point ini tetap extensible di layer consumer. Appearance defaults, instance registration, overlay state, dan affordance icon bawaan dikelola di library, sementara consumer masih bisa mengganti renderer icon dan komposisi layout sesuai kebutuhan.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@edsis/ui",
3
- "version": "21.3.7",
3
+ "version": "21.3.9",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/edsis/angular.git"
@@ -174,6 +174,10 @@
174
174
  "types": "./types/edsis-ui-hover-card.d.ts",
175
175
  "default": "./fesm2022/edsis-ui-hover-card.mjs"
176
176
  },
177
+ "./icon": {
178
+ "types": "./types/edsis-ui-icon.d.ts",
179
+ "default": "./fesm2022/edsis-ui-icon.mjs"
180
+ },
177
181
  "./input": {
178
182
  "types": "./types/edsis-ui-input.d.ts",
179
183
  "default": "./fesm2022/edsis-ui-input.mjs"
package/page/README.md CHANGED
@@ -2,32 +2,186 @@
2
2
 
3
3
  Primitive page shell untuk layout halaman dengan pendekatan nested component.
4
4
 
5
+ Dokumentasi ini mengikuti API publik terbaru dari `@edsis/ui/page`, termasuk mode `height`, slot `ui-page-dashboard`, controlled side state, dan override untuk side rail.
6
+
5
7
  ## Components
6
8
 
7
9
  - `ui-page`
8
10
  - `ui-page-header`
9
11
  - `ui-page-content`
12
+ - `ui-page-dashboard`
10
13
  - `ui-page-footer`
11
14
  - `ui-page-side`
12
15
  - `ui-page-side-toggle`
13
16
 
14
17
  `ui-page-side-toggle` menerima projected content untuk label atau ikon kustom. Jika tidak ada projected content, komponen akan memakai ikon fallback bawaan.
18
+ `ui-page-dashboard` mengikuti perilaku layout dan scroll yang sama dengan `ui-page-content`, tetapi disediakan sebagai slot semantik untuk dashboard, board, dan surface analitik.
19
+
20
+ ## Root API
21
+
22
+ ### `ui-page`
23
+
24
+ | Input | Type | Default | Keterangan |
25
+ | ----------- | ----------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------- |
26
+ | `variant` | `'stacked' \| 'side'` | `'stacked'` | Menentukan struktur utama page shell. |
27
+ | `scroll` | `'content' \| 'page'` | `'content'` | Menentukan apakah body slot scroll sendiri atau seluruh root `ui-page` scroll bersama. |
28
+ | `height` | `'auto' \| 'fix'` | `'auto'` | Mengontrol tinggi `ui-page-header` dan `ui-page-footer`. |
29
+ | `position` | `'left' \| 'right'` | `'left'` | Posisi default untuk `ui-page-side` jika side tidak memberi override sendiri. |
30
+ | `sideMode` | `'sticky' \| 'drawer' \| 'overlay'` | `'sticky'` | Mode default untuk `ui-page-side` jika side tidak memberi override sendiri. |
31
+ | `sideWidth` | `string` | `'16rem'` | Lebar default side rail; dipakai juga untuk drawer dan overlay. |
32
+ | `sideOpen` | `boolean \| null` | `null` | Saat `null`, state side tidak dikontrol dari parent. Saat `true/false`, komponen masuk controlled mode. |
33
+ | `class` | `string` | `''` | Class tambahan pada host `ui-page`. |
34
+
35
+ | Output | Payload | Keterangan |
36
+ | ---------------- | --------- | -------------------------------------------------------------------------------------------- |
37
+ | `sideOpenChange` | `boolean` | Emit setiap ada permintaan buka/tutup side, baik dari toggle, backdrop, maupun tombol `Esc`. |
38
+
39
+ `ui-page` juga menambahkan atribut host `data-page-variant`, `data-page-height`, `data-page-scroll`, `data-page-position`, `data-page-side-mode`, dan `data-page-side-open` untuk styling atau inspeksi.
40
+
41
+ ## Slot API
42
+
43
+ ### Body slots
44
+
45
+ | Component | Input | Default | Keterangan |
46
+ | ------------------- | --------------- | ------- | ------------------------------------------------------------------------------------------ |
47
+ | `ui-page-header` | `class: string` | `''` | Slot header dengan border bawah. Saat `height="fix"`, tinggi dipaksa `h-12`. |
48
+ | `ui-page-content` | `class: string` | `''` | Body slot utama. Mengikuti mode `scroll` dari root `ui-page`. |
49
+ | `ui-page-dashboard` | `class: string` | `''` | Setara dengan `ui-page-content`, tetapi untuk kebutuhan dashboard/board/analytics surface. |
50
+ | `ui-page-footer` | `class: string` | `''` | Slot footer dengan border atas. Saat `height="fix"`, tinggi dipaksa `h-12`. |
51
+
52
+ ### `ui-page-side`
53
+
54
+ | Input | Type | Default | Keterangan |
55
+ | ------------ | ----------------------------------- | ---------- | -------------------------------------------------------------------------------------------------- |
56
+ | `mode` | `'sticky' \| 'drawer' \| 'overlay'` | `'sticky'` | Override mode side untuk instance tersebut. |
57
+ | `position` | `'left' \| 'right' \| null` | `null` | Override posisi side untuk instance tersebut. Jika `null`, memakai nilai dari root `ui-page`. |
58
+ | `width` | `string \| null` | `null` | Override lebar side untuk instance tersebut. Jika `null`, memakai `sideWidth` dari root `ui-page`. |
59
+ | `closeOnEsc` | `boolean` | `true` | Berlaku untuk `drawer` dan `overlay`; menutup side ketika tombol `Esc` ditekan. |
60
+ | `class` | `string` | `''` | Class tambahan pada host `ui-page-side`. |
61
+
62
+ ### `ui-page-side-toggle`
63
+
64
+ | Input / Output | Type | Default | Keterangan |
65
+ | -------------- | --------- | -------------------- | ----------------------------------------------------------- |
66
+ | `ariaLabel` | `string` | `'Toggle page side'` | Label aksesibilitas untuk tombol toggle. |
67
+ | `class` | `string` | `''` | Class tambahan pada host toggle. |
68
+ | `toggled` | `boolean` | - | Emit nilai open state terbaru setelah tombol toggle diklik. |
15
69
 
16
70
  ## Variants
17
71
 
18
72
  - `stacked`
19
73
  - `side`
20
74
 
75
+ ## Scroll Modes
76
+
77
+ - `content` (default): `ui-page-content` atau `ui-page-dashboard` menjadi area scroll. Pada variant `side`, `ui-page-side` dan body slot yang dipakai sama-sama stretch ke parent dan masing-masing punya scroll sendiri.
78
+ - `page`: seluruh isi `ui-page` menjadi area scroll. Header, content, footer, dan pada variant `side` juga `ui-page-side` akan mengikuti tinggi content induk tanpa scroll internal.
79
+
80
+ ## Height Modes
81
+
82
+ - `auto` (default): tinggi `ui-page-header` dan `ui-page-footer` mengikuti isi.
83
+ - `fix`: `ui-page-header` dan `ui-page-footer` dipaksa `h-12` dan `overflow-hidden`, sehingga isi yang melebihi tinggi tersebut akan terpotong.
84
+
85
+ Dalam mode `fix`, pastikan isi header/footer memang dirancang sebagai rail ringkas. Konten yang lebih tinggi dari `h-12` tidak akan ikut menambah tinggi slot.
86
+
87
+ ## Behavior Summary
88
+
89
+ | Variant | `scroll="content"` | `scroll="page"` |
90
+ | --------- | ------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
91
+ | `stacked` | `ui-page-content` atau `ui-page-dashboard` stretch ke tinggi yang tersedia dan menjadi area scroll | seluruh `ui-page` scroll bersama; header, content, footer ikut satu kanvas |
92
+ | `side` | `ui-page-side` dan body slot (`ui-page-content`/`ui-page-dashboard`) sama-sama stretch ke parent dan punya scroll sendiri | `ui-page-side` dan body slot mengikuti tinggi content induk tanpa scroll internal |
93
+
94
+ ## Header And Footer Height
95
+
96
+ Saat memakai `height="fix"`, slot berikut tidak boleh melebihi tinggi tetap yang disediakan:
97
+
98
+ - `ui-page-header`: `h-12` dengan `overflow-hidden`
99
+ - `ui-page-footer`: `h-12` dengan `overflow-hidden`
100
+
21
101
  ## Side Modes
22
102
 
23
103
  - `sticky`
24
104
  - `drawer`
25
105
  - `overlay`
26
106
 
27
- ## Example
107
+ ## Examples
108
+
109
+ ### Stacked with content scroll
110
+
111
+ ```html
112
+ <ui-page variant="stacked">
113
+ <ui-page-header>
114
+ <h1>Executive summary</h1>
115
+ </ui-page-header>
116
+
117
+ <ui-page-content>
118
+ <p>Secara default, slot content yang menjadi area scroll.</p>
119
+ </ui-page-content>
120
+
121
+ <ui-page-footer>
122
+ <button type="button">Save</button>
123
+ </ui-page-footer>
124
+ </ui-page>
125
+ ```
126
+
127
+ ### Stacked dashboard surface
28
128
 
29
129
  ```html
30
- <ui-page variant="side" position="left">
130
+ <ui-page variant="stacked">
131
+ <ui-page-header>
132
+ <h1>Executive dashboard</h1>
133
+ </ui-page-header>
134
+
135
+ <ui-page-dashboard>
136
+ <p>Gunakan slot ini ketika area utama secara semantik adalah dashboard atau board analitik.</p>
137
+ </ui-page-dashboard>
138
+
139
+ <ui-page-footer>
140
+ <button type="button">Open insight</button>
141
+ </ui-page-footer>
142
+ </ui-page>
143
+ ```
144
+
145
+ ### Stacked with fixed header and footer height
146
+
147
+ ```html
148
+ <ui-page variant="stacked" height="fix">
149
+ <ui-page-header>
150
+ <div class="h-20">Bagian ini akan terpotong ke tinggi h-12.</div>
151
+ </ui-page-header>
152
+
153
+ <ui-page-content>
154
+ <p>Content tetap mengikuti mode scroll yang aktif.</p>
155
+ </ui-page-content>
156
+
157
+ <ui-page-footer>
158
+ <div class="h-20">Footer juga tidak boleh melebihi h-12.</div>
159
+ </ui-page-footer>
160
+ </ui-page>
161
+ ```
162
+
163
+ ### Stacked with page scroll
164
+
165
+ ```html
166
+ <ui-page variant="stacked" scroll="page">
167
+ <ui-page-header>
168
+ <h1>Executive summary</h1>
169
+ </ui-page-header>
170
+
171
+ <ui-page-content>
172
+ <p>Semua area di dalam page ikut scroll bersama.</p>
173
+ </ui-page-content>
174
+
175
+ <ui-page-footer>
176
+ <button type="button">Save</button>
177
+ </ui-page-footer>
178
+ </ui-page>
179
+ ```
180
+
181
+ ### Side with content scroll
182
+
183
+ ```html
184
+ <ui-page variant="side" position="left" scroll="content">
31
185
  <ui-page-header>
32
186
  <ui-page-side-toggle ariaLabel="Toggle side">
33
187
  <span>Open filters</span>
@@ -35,12 +189,51 @@ Primitive page shell untuk layout halaman dengan pendekatan nested component.
35
189
  <h1>Page title</h1>
36
190
  </ui-page-header>
37
191
 
38
- <ui-page-side mode="overlay">
39
- <p>Filters</p>
192
+ <ui-page-side mode="sticky">
193
+ <p>Side rail scroll sendiri.</p>
194
+ </ui-page-side>
195
+
196
+ <ui-page-content>
197
+ <p>Main content juga scroll sendiri.</p>
198
+ </ui-page-content>
199
+ </ui-page>
200
+ ```
201
+
202
+ ### Side with page scroll
203
+
204
+ ```html
205
+ <ui-page variant="side" position="left" scroll="page">
206
+ <ui-page-header>
207
+ <h1>Executive detail</h1>
208
+ </ui-page-header>
209
+
210
+ <ui-page-side mode="sticky">
211
+ <p>Side mengikuti tinggi content induk.</p>
40
212
  </ui-page-side>
41
213
 
42
214
  <ui-page-content>
43
- <p>Main content</p>
215
+ <p>Root `ui-page` yang menjadi area scroll tunggal.</p>
44
216
  </ui-page-content>
45
217
  </ui-page>
46
218
  ```
219
+
220
+ ### Controlled side state
221
+
222
+ ```html
223
+ <ui-page variant="side" sideMode="drawer" [sideOpen]="filtersOpen()" (sideOpenChange)="filtersOpen.set($event)">
224
+ <ui-page-header>
225
+ <ui-page-side-toggle ariaLabel="Toggle filters">
226
+ <span>Filters</span>
227
+ </ui-page-side-toggle>
228
+ <h1>Pipeline board</h1>
229
+ </ui-page-header>
230
+
231
+ <ui-page-side>
232
+ <p>Drawer ini mengikuti state dari parent.</p>
233
+ </ui-page-side>
234
+
235
+ <ui-page-dashboard>
236
+ <p>Dashboard tetap memakai body behavior yang sama seperti ui-page-content.</p>
237
+ </ui-page-dashboard>
238
+ </ui-page>
239
+ ```
@@ -0,0 +1,30 @@
1
+ # Theme
2
+
3
+ `@edsis/ui/theme` menyediakan provider untuk brand, mode, season, dan preload aset tema global.
4
+
5
+ ```ts
6
+ import { provideUiTheme } from '@edsis/ui/theme';
7
+
8
+ export const appConfig = {
9
+ providers: [
10
+ provideUiTheme({
11
+ brand: 'etos',
12
+ mode: 'light',
13
+ season: 'base',
14
+ }),
15
+ ],
16
+ };
17
+ ```
18
+
19
+ ## API Notes
20
+
21
+ - `brand` mengatur atribut `theme-brand` pada `documentElement`.
22
+ - `mode` mem-bootstrap `ThemeModeService` dan default mode yang disimpan di storage.
23
+ - `season` mem-bootstrap `ThemeSeasonService` dan default season yang disimpan di storage.
24
+ - `icons.materialSymbols` mengontrol preload stylesheet Material Symbols pada bootstrap aplikasi.
25
+
26
+ ## Default Behavior
27
+
28
+ - Material Symbols di-preload secara default saat `provideUiTheme()` dijalankan.
29
+ - Untuk menonaktifkan preload global, set `icons.materialSymbols` ke `false`.
30
+ - Komponen dari `@edsis/ui/icon` tetap punya fallback lazy-load bila provider tema tidak dipakai.
@@ -114,6 +114,7 @@ declare class EditorContentComponent implements AfterViewInit, OnDestroy, Contro
114
114
  protected handleBlur(): void;
115
115
  protected handleKeydown(event: KeyboardEvent): void;
116
116
  private exec;
117
+ private highlightColor;
117
118
  private syncEmptyState;
118
119
  private shortcutCommand;
119
120
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<EditorContentComponent, never>;
@@ -0,0 +1,31 @@
1
+ import * as _angular_core from '@angular/core';
2
+
3
+ declare class UiIconComponent {
4
+ private readonly materialSymbols;
5
+ readonly name: _angular_core.InputSignal<string>;
6
+ readonly class: _angular_core.InputSignal<string>;
7
+ readonly size: _angular_core.InputSignal<number | null>;
8
+ readonly fill: _angular_core.InputSignal<number>;
9
+ readonly weight: _angular_core.InputSignal<number>;
10
+ readonly grade: _angular_core.InputSignal<number>;
11
+ readonly opticalSize: _angular_core.InputSignal<number>;
12
+ protected readonly resolvedSize: _angular_core.Signal<number>;
13
+ protected readonly fontVariationSettings: _angular_core.Signal<string>;
14
+ protected readonly classes: _angular_core.Signal<string>;
15
+ constructor();
16
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiIconComponent, never>;
17
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiIconComponent, "ui-icon", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "fill": { "alias": "fill"; "required": false; "isSignal": true; }; "weight": { "alias": "weight"; "required": false; "isSignal": true; }; "grade": { "alias": "grade"; "required": false; "isSignal": true; }; "opticalSize": { "alias": "opticalSize"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
18
+ }
19
+
20
+ declare const UI_MATERIAL_SYMBOLS_FONT_ATTR = "data-ui-icon-font";
21
+ declare const UI_MATERIAL_SYMBOLS_FONT_ID = "material-symbols-outlined";
22
+ declare const UI_MATERIAL_SYMBOLS_FONT_HREF = "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0";
23
+ declare class UiMaterialSymbolsService {
24
+ private readonly documentRef;
25
+ private readonly platformId;
26
+ ensureLoaded(): void;
27
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiMaterialSymbolsService, never>;
28
+ static ɵprov: _angular_core.ɵɵInjectableDeclaration<UiMaterialSymbolsService>;
29
+ }
30
+
31
+ export { UI_MATERIAL_SYMBOLS_FONT_ATTR, UI_MATERIAL_SYMBOLS_FONT_HREF, UI_MATERIAL_SYMBOLS_FONT_ID, UiIconComponent, UiMaterialSymbolsService };
@@ -3,19 +3,29 @@ import * as _angular_core from '@angular/core';
3
3
  declare const UI_PAGE_VARIANTS: readonly ["stacked", "side"];
4
4
  declare const UI_PAGE_SIDE_POSITIONS: readonly ["left", "right"];
5
5
  declare const UI_PAGE_SIDE_MODES: readonly ["sticky", "drawer", "overlay"];
6
+ declare const UI_PAGE_SCROLL_VALUES: readonly ["content", "page"];
7
+ declare const UI_PAGE_HEIGHT_VALUES: readonly ["auto", "fix"];
6
8
  type UiPageVariant = (typeof UI_PAGE_VARIANTS)[number];
7
9
  type UiPageSidePosition = (typeof UI_PAGE_SIDE_POSITIONS)[number];
8
10
  type UiPageSideMode = (typeof UI_PAGE_SIDE_MODES)[number];
11
+ type UiPageScroll = (typeof UI_PAGE_SCROLL_VALUES)[number];
12
+ type UiPageHeight = (typeof UI_PAGE_HEIGHT_VALUES)[number];
9
13
  declare const UI_PAGE_DEFAULT_VARIANT: UiPageVariant;
10
14
  declare const UI_PAGE_DEFAULT_SIDE_POSITION: UiPageSidePosition;
11
15
  declare const UI_PAGE_DEFAULT_SIDE_MODE: UiPageSideMode;
16
+ declare const UI_PAGE_DEFAULT_SCROLL: UiPageScroll;
17
+ declare const UI_PAGE_DEFAULT_HEIGHT: UiPageHeight;
12
18
  declare const UI_PAGE_DEFAULT_SIDE_WIDTH = "16rem";
13
19
  declare function isUiPageVariant(value: string | null): value is UiPageVariant;
14
20
  declare function isUiPageSidePosition(value: string | null): value is UiPageSidePosition;
15
21
  declare function isUiPageSideMode(value: string | null): value is UiPageSideMode;
22
+ declare function isUiPageScroll(value: string | null): value is UiPageScroll;
23
+ declare function isUiPageHeight(value: string | null): value is UiPageHeight;
16
24
 
17
25
  declare class UiPageStateService {
18
26
  private readonly variantState;
27
+ private readonly heightState;
28
+ private readonly scrollState;
19
29
  private readonly positionState;
20
30
  private readonly sideModeState;
21
31
  private readonly internalSideOpenState;
@@ -25,6 +35,8 @@ declare class UiPageStateService {
25
35
  private readonly sideOpenRequestState;
26
36
  private readonly sideOpenRequestVersionState;
27
37
  readonly variant: _angular_core.Signal<"stacked" | "side">;
38
+ readonly height: _angular_core.Signal<"auto" | "fix">;
39
+ readonly scroll: _angular_core.Signal<"content" | "page">;
28
40
  readonly position: _angular_core.Signal<"left" | "right">;
29
41
  readonly sideMode: _angular_core.Signal<"sticky" | "drawer" | "overlay">;
30
42
  readonly sideWidth: _angular_core.Signal<string>;
@@ -36,6 +48,8 @@ declare class UiPageStateService {
36
48
  readonly isSideVisible: _angular_core.Signal<boolean>;
37
49
  registerRoot(config: {
38
50
  variant: UiPageVariant;
51
+ height: UiPageHeight;
52
+ scroll: UiPageScroll;
39
53
  position: UiPageSidePosition;
40
54
  sideMode: UiPageSideMode;
41
55
  sideWidth: string;
@@ -71,6 +85,7 @@ declare class UiPageSideComponent {
71
85
  protected readonly isSticky: _angular_core.Signal<boolean>;
72
86
  protected readonly isDrawer: _angular_core.Signal<boolean>;
73
87
  protected readonly isOverlay: _angular_core.Signal<boolean>;
88
+ protected readonly resolvedScroll: _angular_core.Signal<"content" | "page">;
74
89
  protected readonly ariaHidden: _angular_core.Signal<"true" | null>;
75
90
  protected readonly classes: _angular_core.Signal<string>;
76
91
  constructor();
@@ -82,6 +97,8 @@ declare class UiPageComponent {
82
97
  protected readonly page: UiPageStateService;
83
98
  protected readonly projectedSide: _angular_core.Signal<UiPageSideComponent | undefined>;
84
99
  readonly variant: _angular_core.InputSignal<"stacked" | "side">;
100
+ readonly height: _angular_core.InputSignal<"auto" | "fix">;
101
+ readonly scroll: _angular_core.InputSignal<"content" | "page">;
85
102
  readonly position: _angular_core.InputSignal<"left" | "right">;
86
103
  readonly sideMode: _angular_core.InputSignal<"sticky" | "drawer" | "overlay">;
87
104
  readonly sideOpen: _angular_core.InputSignal<boolean | null>;
@@ -99,7 +116,7 @@ declare class UiPageComponent {
99
116
  constructor();
100
117
  protected handleBackdropClick(): void;
101
118
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiPageComponent, never>;
102
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiPageComponent, "ui-page", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "sideMode": { "alias": "sideMode"; "required": false; "isSignal": true; }; "sideOpen": { "alias": "sideOpen"; "required": false; "isSignal": true; }; "sideWidth": { "alias": "sideWidth"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, { "sideOpenChange": "sideOpenChange"; }, ["projectedSide"], ["ui-page-header", "ui-page-side-toggle", "ui-page-side", "ui-page-content", "ui-page-footer"], true, never>;
119
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiPageComponent, "ui-page", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "scroll": { "alias": "scroll"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "sideMode": { "alias": "sideMode"; "required": false; "isSignal": true; }; "sideOpen": { "alias": "sideOpen"; "required": false; "isSignal": true; }; "sideWidth": { "alias": "sideWidth"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, { "sideOpenChange": "sideOpenChange"; }, ["projectedSide"], ["ui-page-header", "ui-page-side-toggle", "ui-page-side", "ui-page-content, ui-page-dashboard", "ui-page-footer"], true, never>;
103
120
  }
104
121
 
105
122
  declare class UiPageSideToggleComponent {
@@ -115,23 +132,37 @@ declare class UiPageSideToggleComponent {
115
132
  }
116
133
 
117
134
  declare class UiPageHeaderComponent {
135
+ private readonly page;
118
136
  readonly class: _angular_core.InputSignal<string>;
137
+ protected readonly resolvedHeight: _angular_core.Signal<"auto" | "fix">;
119
138
  protected readonly classes: _angular_core.Signal<string>;
120
139
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiPageHeaderComponent, never>;
121
140
  static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiPageHeaderComponent, "ui-page-header", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
122
141
  }
123
142
  declare class UiPageContentComponent {
143
+ private readonly page;
124
144
  readonly class: _angular_core.InputSignal<string>;
145
+ protected readonly resolvedScroll: _angular_core.Signal<"content" | "page">;
125
146
  protected readonly classes: _angular_core.Signal<string>;
126
147
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiPageContentComponent, never>;
127
148
  static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiPageContentComponent, "ui-page-content", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
128
149
  }
150
+ declare class UiPageDashboardComponent {
151
+ private readonly page;
152
+ readonly class: _angular_core.InputSignal<string>;
153
+ protected readonly resolvedScroll: _angular_core.Signal<"content" | "page">;
154
+ protected readonly classes: _angular_core.Signal<string>;
155
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiPageDashboardComponent, never>;
156
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiPageDashboardComponent, "ui-page-dashboard", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
157
+ }
129
158
  declare class UiPageFooterComponent {
159
+ private readonly page;
130
160
  readonly class: _angular_core.InputSignal<string>;
161
+ protected readonly resolvedHeight: _angular_core.Signal<"auto" | "fix">;
131
162
  protected readonly classes: _angular_core.Signal<string>;
132
163
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiPageFooterComponent, never>;
133
164
  static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiPageFooterComponent, "ui-page-footer", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
134
165
  }
135
166
 
136
- export { UI_PAGE_DEFAULT_SIDE_MODE, UI_PAGE_DEFAULT_SIDE_POSITION, UI_PAGE_DEFAULT_SIDE_WIDTH, UI_PAGE_DEFAULT_VARIANT, UI_PAGE_SIDE_MODES, UI_PAGE_SIDE_POSITIONS, UI_PAGE_VARIANTS, UiPageComponent, UiPageContentComponent, UiPageFooterComponent, UiPageHeaderComponent, UiPageSideComponent, UiPageSideToggleComponent, isUiPageSideMode, isUiPageSidePosition, isUiPageVariant };
137
- export type { UiPageSideMode, UiPageSidePosition, UiPageVariant };
167
+ export { UI_PAGE_DEFAULT_HEIGHT, UI_PAGE_DEFAULT_SCROLL, UI_PAGE_DEFAULT_SIDE_MODE, UI_PAGE_DEFAULT_SIDE_POSITION, UI_PAGE_DEFAULT_SIDE_WIDTH, UI_PAGE_DEFAULT_VARIANT, UI_PAGE_HEIGHT_VALUES, UI_PAGE_SCROLL_VALUES, UI_PAGE_SIDE_MODES, UI_PAGE_SIDE_POSITIONS, UI_PAGE_VARIANTS, UiPageComponent, UiPageContentComponent, UiPageDashboardComponent, UiPageFooterComponent, UiPageHeaderComponent, UiPageSideComponent, UiPageSideToggleComponent, isUiPageHeight, isUiPageScroll, isUiPageSideMode, isUiPageSidePosition, isUiPageVariant };
168
+ export type { UiPageHeight, UiPageScroll, UiPageSideMode, UiPageSidePosition, UiPageVariant };
@@ -4,9 +4,11 @@ import { InjectionToken, EnvironmentProviders } from '@angular/core';
4
4
  declare const THEME_MODES: readonly ["light", "dark", "system"];
5
5
  declare const RESOLVED_THEME_MODES: readonly ["light", "dark"];
6
6
  declare const THEME_SEASONS: readonly ["base", "imlek", "ramadhan", "ied", "natal", "new-year"];
7
+ type ThemeBrand = string;
7
8
  type ThemeMode = (typeof THEME_MODES)[number];
8
9
  type ResolvedThemeMode = (typeof RESOLVED_THEME_MODES)[number];
9
10
  type ThemeSeason = (typeof THEME_SEASONS)[number];
11
+ declare const DEFAULT_THEME_BRAND: ThemeBrand;
10
12
  declare const DEFAULT_THEME_MODE: ThemeMode;
11
13
  declare const DEFAULT_THEME_SEASON: ThemeSeason;
12
14
  declare const THEME_MODE_STORAGE_KEY = "theme-mode";
@@ -15,11 +17,17 @@ declare function isThemeMode(value: string | null | undefined): value is ThemeMo
15
17
  declare function isResolvedThemeMode(value: string | null | undefined): value is ResolvedThemeMode;
16
18
  declare function isThemeSeason(value: string | null | undefined): value is ThemeSeason;
17
19
  declare function normalizeThemeMode(value: string | null | undefined): ThemeMode;
20
+ declare function normalizeThemeBrand(value: string | null | undefined): ThemeBrand;
18
21
  declare function normalizeThemeSeason(value: string | null | undefined): ThemeSeason;
19
22
 
23
+ interface UiThemeIconOptions {
24
+ readonly materialSymbols?: boolean;
25
+ }
20
26
  interface UiThemeOptions {
27
+ readonly brand?: ThemeBrand;
21
28
  readonly mode?: ThemeMode;
22
29
  readonly season?: ThemeSeason;
30
+ readonly icons?: UiThemeIconOptions;
23
31
  }
24
32
  declare const UI_THEME_OPTIONS: InjectionToken<Readonly<UiThemeOptions>>;
25
33
 
@@ -67,5 +75,5 @@ declare class ThemeSeasonService {
67
75
  static ɵprov: _angular_core.ɵɵInjectableDeclaration<ThemeSeasonService>;
68
76
  }
69
77
 
70
- export { DEFAULT_THEME_MODE, DEFAULT_THEME_SEASON, RESOLVED_THEME_MODES, THEME_MODES, THEME_MODE_STORAGE_KEY, THEME_SEASONS, THEME_SEASON_STORAGE_KEY, ThemeModeService, ThemeSeasonService, UI_THEME_OPTIONS, isResolvedThemeMode, isThemeMode, isThemeSeason, normalizeThemeMode, normalizeThemeSeason, provideUiTheme };
71
- export type { ResolvedThemeMode, ThemeMode, ThemeSeason, UiThemeOptions };
78
+ export { DEFAULT_THEME_BRAND, DEFAULT_THEME_MODE, DEFAULT_THEME_SEASON, RESOLVED_THEME_MODES, THEME_MODES, THEME_MODE_STORAGE_KEY, THEME_SEASONS, THEME_SEASON_STORAGE_KEY, ThemeModeService, ThemeSeasonService, UI_THEME_OPTIONS, isResolvedThemeMode, isThemeMode, isThemeSeason, normalizeThemeBrand, normalizeThemeMode, normalizeThemeSeason, provideUiTheme };
79
+ export type { ResolvedThemeMode, ThemeBrand, ThemeMode, ThemeSeason, UiThemeIconOptions, UiThemeOptions };