@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.
- package/README.md +2 -0
- package/fesm2022/edsis-ui-avatar.mjs +1 -1
- package/fesm2022/edsis-ui-avatar.mjs.map +1 -1
- package/fesm2022/edsis-ui-card.mjs +1 -1
- package/fesm2022/edsis-ui-card.mjs.map +1 -1
- package/fesm2022/edsis-ui-chart.mjs +12 -12
- package/fesm2022/edsis-ui-chart.mjs.map +1 -1
- package/fesm2022/edsis-ui-composer.mjs +2 -2
- package/fesm2022/edsis-ui-composer.mjs.map +1 -1
- package/fesm2022/edsis-ui-editor.mjs +9 -2
- package/fesm2022/edsis-ui-editor.mjs.map +1 -1
- package/fesm2022/edsis-ui-icon.mjs +78 -0
- package/fesm2022/edsis-ui-icon.mjs.map +1 -0
- package/fesm2022/edsis-ui-input-group.mjs +2 -2
- package/fesm2022/edsis-ui-input-group.mjs.map +1 -1
- package/fesm2022/edsis-ui-kbd.mjs +1 -1
- package/fesm2022/edsis-ui-kbd.mjs.map +1 -1
- package/fesm2022/edsis-ui-layout.mjs +4 -4
- package/fesm2022/edsis-ui-layout.mjs.map +1 -1
- package/fesm2022/edsis-ui-nav.mjs +30 -37
- package/fesm2022/edsis-ui-nav.mjs.map +1 -1
- package/fesm2022/edsis-ui-page.mjs +67 -15
- package/fesm2022/edsis-ui-page.mjs.map +1 -1
- package/fesm2022/edsis-ui-pillbox.mjs +1 -1
- package/fesm2022/edsis-ui-pillbox.mjs.map +1 -1
- package/fesm2022/edsis-ui-scroll-area.mjs +2 -2
- package/fesm2022/edsis-ui-scroll-area.mjs.map +1 -1
- package/fesm2022/edsis-ui-theme.mjs +11 -3
- package/fesm2022/edsis-ui-theme.mjs.map +1 -1
- package/fesm2022/edsis-ui-timeline.mjs +17 -17
- package/fesm2022/edsis-ui-timeline.mjs.map +1 -1
- package/icon/README.md +25 -0
- package/nav/README.md +9 -3
- package/package.json +5 -1
- package/page/README.md +198 -5
- package/theme/README.md +30 -0
- package/types/edsis-ui-editor.d.ts +1 -0
- package/types/edsis-ui-icon.d.ts +31 -0
- package/types/edsis-ui-page.d.ts +34 -3
- 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`
|
|
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
|
-
<
|
|
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
|
-
|
|
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.
|
|
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
|
-
##
|
|
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="
|
|
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="
|
|
39
|
-
<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>
|
|
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
|
+
```
|
package/theme/README.md
ADDED
|
@@ -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 };
|
package/types/edsis-ui-page.d.ts
CHANGED
|
@@ -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 };
|