@ojiepermana/angular-theme 22.0.32 → 22.0.34
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/fesm2022/ojiepermana-angular-theme-layout-services.mjs +7 -27
- package/fesm2022/ojiepermana-angular-theme-layout-types.mjs +5 -6
- package/fesm2022/ojiepermana-angular-theme-layout-wrapper.mjs +577 -0
- package/fesm2022/ojiepermana-angular-theme-layout.mjs +147 -66
- package/layout/README.md +59 -57
- package/package.json +7 -3
- package/types/ojiepermana-angular-theme-layout-services.d.ts +6 -8
- package/types/ojiepermana-angular-theme-layout-types.d.ts +7 -9
- package/types/ojiepermana-angular-theme-layout-wrapper.d.ts +175 -0
- package/types/ojiepermana-angular-theme-layout.d.ts +9 -4
package/layout/README.md
CHANGED
|
@@ -18,7 +18,7 @@ import {
|
|
|
18
18
|
LayoutHorizontalComponent,
|
|
19
19
|
LayoutNavigationComponent,
|
|
20
20
|
LayoutVerticalComponent,
|
|
21
|
-
type
|
|
21
|
+
type LayoutAppearance,
|
|
22
22
|
type LayoutSurface,
|
|
23
23
|
type LayoutType,
|
|
24
24
|
type LayoutWidth,
|
|
@@ -30,25 +30,24 @@ Secondary entry point tetap tersedia bila consumer ingin import yang lebih ekspl
|
|
|
30
30
|
```ts
|
|
31
31
|
import { LayoutService } from '@ojiepermana/angular-theme/layout/services';
|
|
32
32
|
import {
|
|
33
|
-
|
|
33
|
+
LAYOUT_DEFAULT_APPEARANCE,
|
|
34
34
|
LAYOUT_DEFAULT_SURFACE,
|
|
35
35
|
LAYOUT_DEFAULT_TYPE,
|
|
36
36
|
LAYOUT_DEFAULT_WIDTH,
|
|
37
37
|
LAYOUT_APPEARANCE_STORAGE_KEY,
|
|
38
|
-
|
|
38
|
+
LAYOUT_APPEARANCES,
|
|
39
39
|
LAYOUT_SURFACE_STORAGE_KEY,
|
|
40
|
-
LAYOUT_STYLE_STORAGE_KEY,
|
|
41
40
|
LAYOUT_SURFACES,
|
|
42
41
|
LAYOUT_TYPES,
|
|
43
42
|
LAYOUT_TYPE_STORAGE_KEY,
|
|
44
43
|
LAYOUT_WIDTHS,
|
|
45
44
|
LAYOUT_WIDTH_STORAGE_KEY,
|
|
46
45
|
isUiLayoutSurface,
|
|
47
|
-
|
|
46
|
+
isUiLayoutAppearance,
|
|
48
47
|
isUiLayoutType,
|
|
49
48
|
isUiLayoutWidth,
|
|
50
49
|
type LayoutContextValue,
|
|
51
|
-
type
|
|
50
|
+
type LayoutAppearance,
|
|
52
51
|
type LayoutSurface,
|
|
53
52
|
type LayoutType,
|
|
54
53
|
type LayoutWidth,
|
|
@@ -149,9 +148,18 @@ import {
|
|
|
149
148
|
@Component({
|
|
150
149
|
selector: 'demo-board',
|
|
151
150
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
152
|
-
imports: [
|
|
151
|
+
imports: [
|
|
152
|
+
LayoutComponent,
|
|
153
|
+
LayoutHorizontalComponent,
|
|
154
|
+
LayoutNavigationComponent,
|
|
155
|
+
LayoutContentComponent,
|
|
156
|
+
],
|
|
153
157
|
template: `
|
|
154
|
-
<Layout
|
|
158
|
+
<Layout
|
|
159
|
+
[surface]="layout.surface()"
|
|
160
|
+
[appearance]="layout.appearance()"
|
|
161
|
+
[width]="layout.width()"
|
|
162
|
+
>
|
|
155
163
|
<LayoutHorizontal>
|
|
156
164
|
<LayoutNavigation ariaLabel="Board navigation">...</LayoutNavigation>
|
|
157
165
|
<LayoutContent>...</LayoutContent>
|
|
@@ -186,20 +194,20 @@ Selector: `Layout`
|
|
|
186
194
|
|
|
187
195
|
Inputs:
|
|
188
196
|
|
|
189
|
-
| Input
|
|
190
|
-
|
|
|
191
|
-
| `surface`
|
|
192
|
-
| `appearance`
|
|
193
|
-
| `layout-
|
|
194
|
-
| `width`
|
|
195
|
-
| `class`
|
|
197
|
+
| Input | Type | Default | Deskripsi |
|
|
198
|
+
| ------------------- | -------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
199
|
+
| `surface` | `LayoutSurface` | `'flat'` | Menentukan fallback background root layout. Jika local storage `layout-surface` berisi nilai valid, nilai storage yang dipakai. |
|
|
200
|
+
| `appearance` | `LayoutAppearance or null` | `null` | API template untuk menentukan fallback appearance frame. Jika input ini kosong, primitive mencoba alias `layout-appearance`, lalu fallback efektif akhirnya `flat`. |
|
|
201
|
+
| `layout-appearance` | `LayoutAppearance or null` | `null` | Alias simetris dengan `nav-appearance` pada navigation (kosakata sama `flat \| border-rail`). Memberi `appearance` yang sama ke shell & nav membuat keduanya seragam. |
|
|
202
|
+
| `width` | `LayoutWidth` | `'full'` | Menentukan fallback padding outer dan perilaku container frame. Jika local storage `layout-width` berisi nilai valid, nilai storage yang dipakai. |
|
|
203
|
+
| `class` | `string` | `''` | Menambahkan class pada host `Layout`. |
|
|
196
204
|
|
|
197
205
|
Behavior:
|
|
198
206
|
|
|
199
207
|
- Jika consumer memberi input manual `surface`, `appearance`, atau `width`, nilai itu dipakai sebagai override in-memory untuk instance aktif tanpa menulis `localStorage`.
|
|
200
208
|
- Jika input manual kosong, primitive mendaftarkan default `surface`, `appearance`, dan `width` ke `LayoutService` hanya saat local storage belum memiliki nilai valid.
|
|
201
209
|
- Nilai visual final selalu dibaca kembali dari `LayoutService`, sehingga child primitive tetap membaca state yang sama selama instance aktif.
|
|
202
|
-
- Menambahkan atribut host `data-surface`, `data-layout-appearance`, `data-layout-
|
|
210
|
+
- Menambahkan atribut host `data-surface`, `data-layout-appearance`, `data-layout-width`, dan `data-layout-type`.
|
|
203
211
|
- Root tidak menyediakan input `type`. Type aktif dikendalikan oleh variant layout yang dirender sebagai override in-memory, atau oleh consumer melalui `LayoutService.registerDefaults({ type })` sebelum template mengevaluasi `layout.type()`.
|
|
204
212
|
- Selalu merender frame border.
|
|
205
213
|
- Jika `appearance="border-rail"`, root menambah rail dekoratif di empat sudut frame, rail inset horizontal, dan rail vertikal sekunder di luar sisi kiri-kanan frame sehingga frame terlihat seperti memiliki double rail.
|
|
@@ -276,7 +284,7 @@ Inputs:
|
|
|
276
284
|
Behavior:
|
|
277
285
|
|
|
278
286
|
- Host selalu memiliki `role="navigation"`.
|
|
279
|
-
- Menambahkan atribut host `data-layout-type
|
|
287
|
+
- Menambahkan atribut host `data-layout-type` dan `data-layout-appearance`.
|
|
280
288
|
- Pada layout `horizontal`, nav menggunakan tinggi tetap `h-12`.
|
|
281
289
|
- Pada layout `vertical`, nav menggunakan `w-max max-w-full`, sehingga lebar nav mengikuti isi child.
|
|
282
290
|
- Pada layout `vertical` dengan `appearance="border-rail"`, komponen ini merender rail vertikal di sisi kanan nav, termasuk ekstensinya ke atas dan bawah viewport.
|
|
@@ -321,14 +329,14 @@ Nilai `surface` yang tersedia berasal dari `LAYOUT_SURFACES`.
|
|
|
321
329
|
|
|
322
330
|
## Appearance API
|
|
323
331
|
|
|
324
|
-
Nilai `appearance` yang tersedia berasal dari `
|
|
332
|
+
Nilai `appearance` yang tersedia berasal dari `LAYOUT_APPEARANCES`.
|
|
325
333
|
|
|
326
334
|
| Nilai | Efek visual |
|
|
327
335
|
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
328
336
|
| `'flat'` | Frame tetap memiliki border 1px tanpa rail luar. |
|
|
329
337
|
| `'border-rail'` | Frame memiliki border lebih tebal, rail dekoratif pada sudut frame, rail inset horizontal, serta rail vertikal sekunder di luar sisi kiri-kanan untuk efek double rail; untuk layout vertical, nav juga mendapat rail kanan yang mengekstensi ke atas dan bawah viewport. |
|
|
330
338
|
|
|
331
|
-
Gunakan `appearance`
|
|
339
|
+
Gunakan `appearance` atau alias `layout-appearance` (simetris dengan `nav-appearance` di navigation; kosakata sama `flat | border-rail`) di template Angular. Nilai persisted untuk appearance disimpan dengan key local storage `layout-appearance`.
|
|
332
340
|
|
|
333
341
|
## Width API
|
|
334
342
|
|
|
@@ -359,34 +367,30 @@ import { LayoutService } from '@ojiepermana/angular-theme/layout/services';
|
|
|
359
367
|
|
|
360
368
|
Readonly signals:
|
|
361
369
|
|
|
362
|
-
| Properti | Type
|
|
363
|
-
| ------------ |
|
|
364
|
-
| `surface` | `Signal<LayoutSurface>`
|
|
365
|
-
| `type` | `Signal<LayoutType>`
|
|
366
|
-
| `appearance` | `Signal<
|
|
367
|
-
| `
|
|
368
|
-
| `width` | `Signal<LayoutWidth>` | Width mode aktif. |
|
|
370
|
+
| Properti | Type | Deskripsi |
|
|
371
|
+
| ------------ | -------------------------- | ------------------------ |
|
|
372
|
+
| `surface` | `Signal<LayoutSurface>` | Surface layout aktif. |
|
|
373
|
+
| `type` | `Signal<LayoutType>` | Type layout aktif. |
|
|
374
|
+
| `appearance` | `Signal<LayoutAppearance>` | Appearance layout aktif. |
|
|
375
|
+
| `width` | `Signal<LayoutWidth>` | Width mode aktif. |
|
|
369
376
|
|
|
370
377
|
Methods:
|
|
371
378
|
|
|
372
|
-
| Method | Signature
|
|
373
|
-
| --------------------- |
|
|
374
|
-
| `registerSurface` | `(surface: LayoutSurface) => void`
|
|
375
|
-
| `registerType` | `(type: LayoutType) => void`
|
|
376
|
-
| `registerAppearance` | `(appearance:
|
|
377
|
-
| `
|
|
378
|
-
| `
|
|
379
|
-
| `
|
|
380
|
-
| `
|
|
381
|
-
| `
|
|
382
|
-
| `
|
|
383
|
-
| `
|
|
384
|
-
| `
|
|
385
|
-
| `
|
|
386
|
-
| `
|
|
387
|
-
| `getStoredAppearance` | `() => LayoutStyle` | Membaca appearance yang valid dari storage atau default. |
|
|
388
|
-
| `getStoredStyle` | `() => LayoutStyle` | Alias kompatibilitas untuk `getStoredAppearance()`. |
|
|
389
|
-
| `getStoredWidth` | `() => LayoutWidth` | Membaca width yang valid dari storage atau default. |
|
|
379
|
+
| Method | Signature | Deskripsi |
|
|
380
|
+
| --------------------- | ------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
381
|
+
| `registerSurface` | `(surface: LayoutSurface) => void` | Mendaftarkan fallback `layout-surface` ke local storage hanya jika storage belum memiliki nilai valid. Jika sudah ada nilai valid, service tetap memakai nilai yang tersimpan. |
|
|
382
|
+
| `registerType` | `(type: LayoutType) => void` | Mendaftarkan fallback `layout-type` ke local storage hanya jika storage belum memiliki nilai valid. Jika sudah ada nilai valid, service tetap memakai nilai yang tersimpan. |
|
|
383
|
+
| `registerAppearance` | `(appearance: LayoutAppearance) => void` | Mendaftarkan fallback `layout-appearance` ke local storage hanya jika storage belum memiliki nilai valid. Jika sudah ada nilai valid, service tetap memakai nilai yang tersimpan. |
|
|
384
|
+
| `registerWidth` | `(width: LayoutWidth) => void` | Mendaftarkan fallback `layout-width` ke local storage hanya jika storage belum memiliki nilai valid. Jika sudah ada nilai valid, service tetap memakai nilai yang tersimpan. |
|
|
385
|
+
| `registerDefaults` | `(defaults: { surface?, appearance?, type?, width? }) => this` | Mendaftarkan beberapa fallback sekaligus. Ini adalah API yang direkomendasikan untuk page-level default karena consumer cukup memanggil satu method dan tetap menghormati nilai storage yang sudah valid. |
|
|
386
|
+
| `setSurface` | `(surface: LayoutSurface, options?: { persist?: boolean }) => void` | Menulis surface ke signal. Secara default juga menulis `localStorage`, tetapi consumer dapat memakai `persist: false` untuk override sementara. |
|
|
387
|
+
| `setType` | `(type: LayoutType, options?: { persist?: boolean }) => void` | Menulis type ke signal. Secara default juga menulis `localStorage`, tetapi consumer dapat memakai `persist: false` untuk override sementara. |
|
|
388
|
+
| `setAppearance` | `(appearance: LayoutAppearance, options?: { persist?: boolean }) => void` | Menulis appearance ke signal. Secara default juga menulis `layout-appearance`, tetapi consumer dapat memakai `persist: false` untuk override sementara. |
|
|
389
|
+
| `setWidth` | `(width: LayoutWidth, options?: { persist?: boolean }) => void` | Menulis width ke signal. Secara default juga menulis `localStorage`, tetapi consumer dapat memakai `persist: false` untuk override sementara. |
|
|
390
|
+
| `getStoredSurface` | `() => LayoutSurface` | Membaca surface yang valid dari storage atau default. |
|
|
391
|
+
| `getStoredType` | `() => LayoutType` | Membaca type yang valid dari storage atau default. |
|
|
392
|
+
| `getStoredAppearance` | `() => LayoutAppearance` | Membaca appearance yang valid dari storage atau default. |
|
|
393
|
+
| `getStoredWidth` | `() => LayoutWidth` | Membaca width yang valid dari storage atau default. |
|
|
390
394
|
|
|
391
395
|
Persistence behavior:
|
|
392
396
|
|
|
@@ -395,7 +399,6 @@ Persistence behavior:
|
|
|
395
399
|
- `registerDefaults(...)` adalah API yang direkomendasikan untuk menetapkan default per halaman tanpa menimpa nilai valid yang sudah tersimpan sebelumnya.
|
|
396
400
|
- Manual template input pada `Layout` dan variant layout yang dirender consumer hanya mengubah state aktif; keduanya tidak lagi menulis `localStorage`.
|
|
397
401
|
- Method `registerSurface(...)`, `registerType(...)`, `registerAppearance(...)`, dan `registerWidth(...)` tetap tersedia bila consumer memang perlu registrasi yang lebih granular.
|
|
398
|
-
- Legacy storage key `layout-style` masih dibaca untuk kompatibilitas dan akan dibersihkan ketika appearance ditulis ulang ke `layout-appearance`.
|
|
399
402
|
- Aman untuk SSR karena hanya mengakses `localStorage` saat runtime browser tersedia.
|
|
400
403
|
|
|
401
404
|
Contoh penggunaan:
|
|
@@ -423,13 +426,13 @@ Seluruh symbol berikut diekspor dari `@ojiepermana/angular-theme/layout/types`.
|
|
|
423
426
|
|
|
424
427
|
### Types
|
|
425
428
|
|
|
426
|
-
| Symbol | Nilai
|
|
427
|
-
| -------------------- |
|
|
428
|
-
| `LayoutType` | `vertical`, `horizontal`, `empty`, `fluid`
|
|
429
|
-
| `LayoutSurface` | `flat`, `grid`, `honeycome`, `line-vertical`, `line-horizontal`
|
|
430
|
-
| `
|
|
431
|
-
| `LayoutWidth` | `full`, `wide`, `container`, `fluid`
|
|
432
|
-
| `LayoutContextValue` | Objekt berbentuk `{ surface, type, appearance,
|
|
429
|
+
| Symbol | Nilai |
|
|
430
|
+
| -------------------- | -------------------------------------------------------------------------------------------------- |
|
|
431
|
+
| `LayoutType` | `vertical`, `horizontal`, `empty`, `fluid` |
|
|
432
|
+
| `LayoutSurface` | `flat`, `grid`, `honeycome`, `line-vertical`, `line-horizontal` |
|
|
433
|
+
| `LayoutAppearance` | `flat`, `border-rail` |
|
|
434
|
+
| `LayoutWidth` | `full`, `wide`, `container`, `fluid` |
|
|
435
|
+
| `LayoutContextValue` | Objekt berbentuk `{ surface, type, appearance, width }` yang masing-masing berupa readonly signal. |
|
|
433
436
|
|
|
434
437
|
### Constants
|
|
435
438
|
|
|
@@ -437,16 +440,15 @@ Seluruh symbol berikut diekspor dari `@ojiepermana/angular-theme/layout/types`.
|
|
|
437
440
|
| ------------------------------- | ------------------------------------------------------------------- |
|
|
438
441
|
| `LAYOUT_TYPES` | `['vertical', 'horizontal', 'empty', 'fluid']` |
|
|
439
442
|
| `LAYOUT_SURFACES` | `['flat', 'grid', 'honeycome', 'line-vertical', 'line-horizontal']` |
|
|
440
|
-
| `
|
|
443
|
+
| `LAYOUT_APPEARANCES` | `['flat', 'border-rail']` |
|
|
441
444
|
| `LAYOUT_WIDTHS` | `['full', 'wide', 'container', 'fluid']` |
|
|
442
445
|
| `LAYOUT_DEFAULT_SURFACE` | `'flat'` |
|
|
443
446
|
| `LAYOUT_DEFAULT_TYPE` | `'vertical'` |
|
|
444
|
-
| `
|
|
447
|
+
| `LAYOUT_DEFAULT_APPEARANCE` | `'flat'` |
|
|
445
448
|
| `LAYOUT_DEFAULT_WIDTH` | `'full'` |
|
|
446
449
|
| `LAYOUT_SURFACE_STORAGE_KEY` | `'layout-surface'` |
|
|
447
450
|
| `LAYOUT_APPEARANCE_STORAGE_KEY` | `'layout-appearance'` |
|
|
448
451
|
| `LAYOUT_TYPE_STORAGE_KEY` | `'layout-type'` |
|
|
449
|
-
| `LAYOUT_STYLE_STORAGE_KEY` | `'layout-style'` `(legacy compatibility key)` |
|
|
450
452
|
| `LAYOUT_WIDTH_STORAGE_KEY` | `'layout-width'` |
|
|
451
453
|
|
|
452
454
|
### Guards
|
|
@@ -455,14 +457,14 @@ Seluruh symbol berikut diekspor dari `@ojiepermana/angular-theme/layout/types`.
|
|
|
455
457
|
Memvalidasi string terhadap daftar surface yang didukung.
|
|
456
458
|
- `isUiLayoutType(value: string | null): value is LayoutType`
|
|
457
459
|
Memvalidasi string terhadap daftar type yang didukung.
|
|
458
|
-
- `
|
|
460
|
+
- `isUiLayoutAppearance(value: string | null): value is LayoutAppearance`
|
|
459
461
|
Memvalidasi string terhadap daftar style yang didukung.
|
|
460
462
|
- `isUiLayoutWidth(value: string | null): value is LayoutWidth`
|
|
461
463
|
Memvalidasi string terhadap daftar width yang didukung.
|
|
462
464
|
|
|
463
465
|
## Consumer guidance
|
|
464
466
|
|
|
465
|
-
- Gunakan `appearance`
|
|
467
|
+
- Gunakan `appearance` atau alias `layout-appearance` di template (kosakata sama dengan `nav-appearance` pada navigation).
|
|
466
468
|
- Untuk halaman yang punya default layout sendiri, utamakan `inject(LayoutService).registerDefaults({...})` sekali di level page daripada memanggil empat method `register...` terpisah.
|
|
467
469
|
- Jika halaman harus merender variant berdasarkan preferensi yang tersimpan, pakai `layout.type()` sebagai sumber branching dan bind root `Layout` ke `layout.surface()`, `layout.appearance()`, dan `layout.width()`.
|
|
468
470
|
- Tempatkan scroll page utama di `LayoutContent`, bukan di root `Layout`.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ojiepermana/angular-theme",
|
|
3
|
-
"version": "22.0.
|
|
3
|
+
"version": "22.0.34",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+https://github.com/edsis/angular.git"
|
|
@@ -13,8 +13,8 @@
|
|
|
13
13
|
"@angular/common": ">=22.0.0",
|
|
14
14
|
"@angular/core": ">=22.0.0",
|
|
15
15
|
"@angular/router": ">=22.0.0",
|
|
16
|
-
"@ojiepermana/angular-navigation": "^22.0.
|
|
17
|
-
"@ojiepermana/angular-component": "^22.0.
|
|
16
|
+
"@ojiepermana/angular-navigation": "^22.0.34",
|
|
17
|
+
"@ojiepermana/angular-component": "^22.0.34",
|
|
18
18
|
"rxjs": ">=7.8.0"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
@@ -48,6 +48,10 @@
|
|
|
48
48
|
"types": "./types/ojiepermana-angular-theme-layout-types.d.ts",
|
|
49
49
|
"default": "./fesm2022/ojiepermana-angular-theme-layout-types.mjs"
|
|
50
50
|
},
|
|
51
|
+
"./layout/wrapper": {
|
|
52
|
+
"types": "./types/ojiepermana-angular-theme-layout-wrapper.d.ts",
|
|
53
|
+
"default": "./fesm2022/ojiepermana-angular-theme-layout-wrapper.mjs"
|
|
54
|
+
},
|
|
51
55
|
"./page": {
|
|
52
56
|
"types": "./types/ojiepermana-angular-theme-page.d.ts",
|
|
53
57
|
"default": "./fesm2022/ojiepermana-angular-theme-page.mjs"
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
|
-
import { LayoutSurface,
|
|
2
|
+
import { LayoutSurface, LayoutAppearance, LayoutType, LayoutWidth } from '@ojiepermana/angular-theme/layout/types';
|
|
3
3
|
import { HttpContextToken, HttpInterceptorFn } from '@angular/common/http';
|
|
4
4
|
|
|
5
5
|
interface LayoutMutationOptions {
|
|
@@ -9,7 +9,7 @@ declare class LayoutService {
|
|
|
9
9
|
private readonly platformId;
|
|
10
10
|
private readonly surfaceState;
|
|
11
11
|
private readonly typeState;
|
|
12
|
-
private readonly
|
|
12
|
+
private readonly appearanceState;
|
|
13
13
|
private readonly widthState;
|
|
14
14
|
readonly surface: _angular_core.Signal<"flat" | "grid" | "honeycome" | "line-vertical" | "line-horizontal">;
|
|
15
15
|
readonly type: _angular_core.Signal<"vertical" | "horizontal" | "empty" | "fluid">;
|
|
@@ -17,25 +17,23 @@ declare class LayoutService {
|
|
|
17
17
|
readonly width: _angular_core.Signal<"fluid" | "full" | "wide" | "container">;
|
|
18
18
|
registerDefaults(defaults: {
|
|
19
19
|
surface?: LayoutSurface;
|
|
20
|
-
appearance?:
|
|
20
|
+
appearance?: LayoutAppearance;
|
|
21
21
|
type?: LayoutType;
|
|
22
22
|
width?: LayoutWidth;
|
|
23
23
|
}): this;
|
|
24
24
|
registerSurface(surface: LayoutSurface): void;
|
|
25
25
|
registerType(type: LayoutType): void;
|
|
26
|
-
registerAppearance(appearance:
|
|
26
|
+
registerAppearance(appearance: LayoutAppearance): void;
|
|
27
27
|
registerWidth(width: LayoutWidth): void;
|
|
28
28
|
setSurface(surface: LayoutSurface, options?: LayoutMutationOptions): void;
|
|
29
29
|
setType(type: LayoutType, options?: LayoutMutationOptions): void;
|
|
30
|
-
setAppearance(appearance:
|
|
30
|
+
setAppearance(appearance: LayoutAppearance, options?: LayoutMutationOptions): void;
|
|
31
31
|
setWidth(width: LayoutWidth, options?: LayoutMutationOptions): void;
|
|
32
32
|
getStoredSurface(): LayoutSurface;
|
|
33
33
|
getStoredType(): LayoutType;
|
|
34
|
-
getStoredAppearance():
|
|
35
|
-
getStoredStyle(): LayoutStyle;
|
|
34
|
+
getStoredAppearance(): LayoutAppearance;
|
|
36
35
|
getStoredWidth(): LayoutWidth;
|
|
37
36
|
private readStorage;
|
|
38
|
-
private removeStorage;
|
|
39
37
|
private writeStorage;
|
|
40
38
|
private getStorage;
|
|
41
39
|
private readStoredAppearance;
|
|
@@ -2,32 +2,30 @@ import { Signal } from '@angular/core';
|
|
|
2
2
|
|
|
3
3
|
declare const LAYOUT_TYPES: readonly ["vertical", "horizontal", "empty", "fluid"];
|
|
4
4
|
declare const LAYOUT_SURFACES: readonly ["flat", "grid", "honeycome", "line-vertical", "line-horizontal"];
|
|
5
|
-
declare const
|
|
5
|
+
declare const LAYOUT_APPEARANCES: readonly ["flat", "border-rail"];
|
|
6
6
|
declare const LAYOUT_WIDTHS: readonly ["full", "wide", "container", "fluid"];
|
|
7
7
|
type LayoutType = (typeof LAYOUT_TYPES)[number];
|
|
8
8
|
type LayoutSurface = (typeof LAYOUT_SURFACES)[number];
|
|
9
|
-
type
|
|
9
|
+
type LayoutAppearance = (typeof LAYOUT_APPEARANCES)[number];
|
|
10
10
|
type LayoutWidth = (typeof LAYOUT_WIDTHS)[number];
|
|
11
11
|
declare const LAYOUT_DEFAULT_SURFACE: LayoutSurface;
|
|
12
12
|
declare const LAYOUT_DEFAULT_TYPE: LayoutType;
|
|
13
|
-
declare const
|
|
13
|
+
declare const LAYOUT_DEFAULT_APPEARANCE: LayoutAppearance;
|
|
14
14
|
declare const LAYOUT_DEFAULT_WIDTH: LayoutWidth;
|
|
15
15
|
declare const LAYOUT_SURFACE_STORAGE_KEY = "layout-surface";
|
|
16
16
|
declare const LAYOUT_APPEARANCE_STORAGE_KEY = "layout-appearance";
|
|
17
17
|
declare const LAYOUT_TYPE_STORAGE_KEY = "layout-type";
|
|
18
|
-
declare const LAYOUT_STYLE_STORAGE_KEY = "layout-style";
|
|
19
18
|
declare const LAYOUT_WIDTH_STORAGE_KEY = "layout-width";
|
|
20
19
|
interface LayoutContextValue {
|
|
21
20
|
surface: Signal<LayoutSurface>;
|
|
22
21
|
type: Signal<LayoutType>;
|
|
23
|
-
appearance: Signal<
|
|
24
|
-
style: Signal<LayoutStyle>;
|
|
22
|
+
appearance: Signal<LayoutAppearance>;
|
|
25
23
|
width: Signal<LayoutWidth>;
|
|
26
24
|
}
|
|
27
25
|
declare function isUiLayoutSurface(value: string | null): value is LayoutSurface;
|
|
28
26
|
declare function isUiLayoutType(value: string | null): value is LayoutType;
|
|
29
|
-
declare function
|
|
27
|
+
declare function isUiLayoutAppearance(value: string | null): value is LayoutAppearance;
|
|
30
28
|
declare function isUiLayoutWidth(value: string | null): value is LayoutWidth;
|
|
31
29
|
|
|
32
|
-
export { LAYOUT_APPEARANCE_STORAGE_KEY,
|
|
33
|
-
export type {
|
|
30
|
+
export { LAYOUT_APPEARANCES, LAYOUT_APPEARANCE_STORAGE_KEY, LAYOUT_DEFAULT_APPEARANCE, LAYOUT_DEFAULT_SURFACE, LAYOUT_DEFAULT_TYPE, LAYOUT_DEFAULT_WIDTH, LAYOUT_SURFACES, LAYOUT_SURFACE_STORAGE_KEY, LAYOUT_TYPES, LAYOUT_TYPE_STORAGE_KEY, LAYOUT_WIDTHS, LAYOUT_WIDTH_STORAGE_KEY, isUiLayoutAppearance, isUiLayoutSurface, isUiLayoutType, isUiLayoutWidth };
|
|
31
|
+
export type { LayoutAppearance, LayoutContextValue, LayoutSurface, LayoutType, LayoutWidth };
|
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
import * as _angular_core from '@angular/core';
|
|
2
|
+
import { NavigationType, NavigationItem } from '@ojiepermana/angular-navigation';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Bentuk identitas yang dikonsumsi wrapper layout. Library hanya mendefinisikan
|
|
6
|
+
* strukturnya; nilai konkret (brand/user) disediakan consumer sebagai input.
|
|
7
|
+
*/
|
|
8
|
+
interface BrandIdentity {
|
|
9
|
+
/** Nama untuk inisial/aria pada slot header. */
|
|
10
|
+
readonly name: string;
|
|
11
|
+
/** Material symbol untuk logo; `null` → pakai inisial dari `name`. */
|
|
12
|
+
readonly icon: string | null;
|
|
13
|
+
/** Judul brand. */
|
|
14
|
+
readonly title: string;
|
|
15
|
+
/** Subjudul brand. */
|
|
16
|
+
readonly subtitle: string;
|
|
17
|
+
}
|
|
18
|
+
interface UserIdentity {
|
|
19
|
+
/** Nama lengkap user (inisial + judul footer). */
|
|
20
|
+
readonly name: string;
|
|
21
|
+
/** Email / baris sekunder footer. */
|
|
22
|
+
readonly email: string;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* Slot brand untuk `<NavigationHeader>`: inisial/logo + judul. Murni input-driven.
|
|
27
|
+
*
|
|
28
|
+
* `compact` (dockbar / rail ikon-only) menyembunyikan judul. `host.class = 'contents'`
|
|
29
|
+
* membuat `NavigationHeaderInitial` + `NavigationHeaderTitle` tetap menjadi flex-child
|
|
30
|
+
* langsung baris header; auto-hide judul saat sidebar collapsed (via `NAVIGATION_SHELL`)
|
|
31
|
+
* tetap berlaku karena DI mengalir lewat live tree ke `<Navigation>`.
|
|
32
|
+
*/
|
|
33
|
+
declare class LayoutBrand {
|
|
34
|
+
/** Identitas brand (nama, ikon, judul, subjudul). */
|
|
35
|
+
readonly brand: _angular_core.InputSignal<BrandIdentity>;
|
|
36
|
+
/** Sembunyikan judul, sisakan inisial saja (dockbar / rail ikon-only). */
|
|
37
|
+
readonly compact: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
38
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LayoutBrand, never>;
|
|
39
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LayoutBrand, "LayoutBrand", never, { "brand": { "alias": "brand"; "required": true; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/**
|
|
43
|
+
* Slot user untuk `<NavigationFooter>`: identitas (opsional) + aksi logout. Murni input-driven.
|
|
44
|
+
*
|
|
45
|
+
* `detailed` menampilkan inisial + nama (sidebar penuh); tanpanya hanya tombol logout.
|
|
46
|
+
* `host.class = 'contents'` membuat anak menjadi flex-child langsung footer — `ml-auto` &
|
|
47
|
+
* auto-hide saat collapsed (via `NAVIGATION_SHELL`) tetap berlaku.
|
|
48
|
+
*/
|
|
49
|
+
declare class LayoutUser {
|
|
50
|
+
/** Identitas user (nama + email). */
|
|
51
|
+
readonly user: _angular_core.InputSignal<UserIdentity>;
|
|
52
|
+
/** Tampilkan identitas user (inisial + nama), bukan hanya tombol logout. */
|
|
53
|
+
readonly detailed: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
54
|
+
/** Label aksesibilitas tombol logout. */
|
|
55
|
+
readonly logoutLabel: _angular_core.InputSignal<string>;
|
|
56
|
+
/** Material symbol untuk tombol logout. */
|
|
57
|
+
readonly logoutIcon: _angular_core.InputSignal<string>;
|
|
58
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LayoutUser, never>;
|
|
59
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LayoutUser, "LayoutUser", never, { "user": { "alias": "user"; "required": true; "isSignal": true; }; "detailed": { "alias": "detailed"; "required": false; "isSignal": true; }; "logoutLabel": { "alias": "logoutLabel"; "required": false; "isSignal": true; }; "logoutIcon": { "alias": "logoutIcon"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/**
|
|
63
|
+
* Tipe nav: sidebar vertikal collapsible (default). Brand header + identitas user di footer.
|
|
64
|
+
*
|
|
65
|
+
* `host.class = 'contents'` membuat `<NavigationSidebar>` menjadi anak efektif `<Navigation>`
|
|
66
|
+
* (h-full, shell-classes), sementara DI `NAVIGATION_SHELL` tetap mengalir lewat live tree dan
|
|
67
|
+
* `<NavigationHeader>` tetap direct child untuk content-projection library.
|
|
68
|
+
*/
|
|
69
|
+
declare class LayoutNavSidebar {
|
|
70
|
+
readonly brand: _angular_core.InputSignal<BrandIdentity>;
|
|
71
|
+
readonly user: _angular_core.InputSignal<UserIdentity>;
|
|
72
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LayoutNavSidebar, never>;
|
|
73
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LayoutNavSidebar, "LayoutNavSidebar", never, { "brand": { "alias": "brand"; "required": true; "isSignal": true; }; "user": { "alias": "user"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/**
|
|
77
|
+
* Tipe nav: rail ikon vertikal (dockbar). Brand compact (inisial saja) + aksi logout.
|
|
78
|
+
* Lihat {@link LayoutNavSidebar} untuk alasan `host.class = 'contents'`.
|
|
79
|
+
*/
|
|
80
|
+
declare class LayoutNavDockbar {
|
|
81
|
+
readonly brand: _angular_core.InputSignal<BrandIdentity>;
|
|
82
|
+
readonly user: _angular_core.InputSignal<UserIdentity>;
|
|
83
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LayoutNavDockbar, never>;
|
|
84
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LayoutNavDockbar, "LayoutNavDockbar", never, { "brand": { "alias": "brand"; "required": true; "isSignal": true; }; "user": { "alias": "user"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
/**
|
|
88
|
+
* Tipe nav: top bar item inline (navbar, horizontal). `appearance` selaras shell
|
|
89
|
+
* (`flat | border-rail`). Lihat {@link LayoutNavSidebar} untuk alasan `host.class = 'contents'`.
|
|
90
|
+
*/
|
|
91
|
+
declare class LayoutNavNavbar {
|
|
92
|
+
readonly brand: _angular_core.InputSignal<BrandIdentity>;
|
|
93
|
+
readonly user: _angular_core.InputSignal<UserIdentity>;
|
|
94
|
+
/** Appearance dari shell (`[nav-appearance]`). */
|
|
95
|
+
readonly appearance: _angular_core.InputSignal<"flat" | "border-rail">;
|
|
96
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LayoutNavNavbar, never>;
|
|
97
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LayoutNavNavbar, "LayoutNavNavbar", never, { "brand": { "alias": "brand"; "required": true; "isSignal": true; }; "user": { "alias": "user"; "required": true; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
/**
|
|
101
|
+
* Tipe nav: top bar dengan tombol trigger flyout (horizontal). `appearance` selaras shell.
|
|
102
|
+
* Lihat {@link LayoutNavSidebar} untuk alasan `host.class = 'contents'`.
|
|
103
|
+
*/
|
|
104
|
+
declare class LayoutNavFlyout {
|
|
105
|
+
readonly brand: _angular_core.InputSignal<BrandIdentity>;
|
|
106
|
+
readonly user: _angular_core.InputSignal<UserIdentity>;
|
|
107
|
+
/** Appearance dari shell (`[nav-appearance]`). */
|
|
108
|
+
readonly appearance: _angular_core.InputSignal<"flat" | "border-rail">;
|
|
109
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LayoutNavFlyout, never>;
|
|
110
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LayoutNavFlyout, "LayoutNavFlyout", never, { "brand": { "alias": "brand"; "required": true; "isSignal": true; }; "user": { "alias": "user"; "required": true; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
/**
|
|
114
|
+
* Tipe nav: sidebar brand-only untuk varian `empty` / `fluid` (nav disembunyikan oleh
|
|
115
|
+
* `LayoutNavigation`, jadi tanpa collapse & footer). Lihat {@link LayoutNavSidebar} untuk
|
|
116
|
+
* alasan `host.class = 'contents'`.
|
|
117
|
+
*/
|
|
118
|
+
declare class LayoutNavMinimal {
|
|
119
|
+
readonly brand: _angular_core.InputSignal<BrandIdentity>;
|
|
120
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LayoutNavMinimal, never>;
|
|
121
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LayoutNavMinimal, "LayoutNavMinimal", never, { "brand": { "alias": "brand"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
/** Tipe nav yang dirender `@switch (navKind())`. `brand` = sidebar header-only (empty/fluid). */
|
|
125
|
+
type NavKind = NavigationType | 'brand';
|
|
126
|
+
/**
|
|
127
|
+
* Wrapper layout shell siap pakai — consumer cukup memberi data input, tidak perlu merakit
|
|
128
|
+
* `Layout > LayoutVertical/Horizontal/Empty/Fluid > LayoutNavigation > Navigation > tipe-nav`.
|
|
129
|
+
*
|
|
130
|
+
* ```html
|
|
131
|
+
* <LayoutWrapperDefault
|
|
132
|
+
* [surface]="surface" [layout-appearance]="appearance" [width]="width"
|
|
133
|
+
* [layout-type]="layoutType" [nav-type]="navType"
|
|
134
|
+
* [data]="navItems" [brand]="brand" [user]="user"
|
|
135
|
+
* >
|
|
136
|
+
* <router-outlet /> <!-- konten halaman diproyeksikan ke LayoutContent -->
|
|
137
|
+
* </LayoutWrapperDefault>
|
|
138
|
+
* ```
|
|
139
|
+
*
|
|
140
|
+
* `register*` default (LayoutService) tetap tanggung jawab consumer; wrapper ini murni
|
|
141
|
+
* presentational — dua sumbu (`effectiveLayoutType` → wrapper, `navKind` → tipe nav) di atas
|
|
142
|
+
* satu skeleton bersama. DI aman: `<Navigation>` mem-*provide* `NAVIGATION_SHELL` di dalam
|
|
143
|
+
* `#body`; tipe nav `display:contents` sehingga `<NavigationXxx>` jadi anak efektif `<Navigation>`.
|
|
144
|
+
*/
|
|
145
|
+
declare class LayoutWrapperDefault {
|
|
146
|
+
/** Surface latar shell (mis. `grid`, `flat`). */
|
|
147
|
+
readonly surface: _angular_core.InputSignal<"flat" | "grid" | "honeycome" | "line-vertical" | "line-horizontal">;
|
|
148
|
+
/** Appearance shell & nav (`flat | border-rail`). */
|
|
149
|
+
readonly appearance: _angular_core.InputSignal<"flat" | "border-rail">;
|
|
150
|
+
/** Lebar frame (`full`, `container`, dst.). */
|
|
151
|
+
readonly width: _angular_core.InputSignal<"full" | "wide" | "container" | "fluid">;
|
|
152
|
+
/** Tipe layout dasar (`vertical | horizontal | empty | fluid`); `empty`/`fluid` override nav. */
|
|
153
|
+
readonly layoutType: _angular_core.InputSignal<"fluid" | "vertical" | "horizontal" | "empty">;
|
|
154
|
+
/** Tipe navigasi (`sidebar | dockbar | navbar | flyout`); diabaikan saat `empty`/`fluid`. */
|
|
155
|
+
readonly navType: _angular_core.InputSignal<NavigationType>;
|
|
156
|
+
/** Item navigasi. */
|
|
157
|
+
readonly data: _angular_core.InputSignal<readonly NavigationItem[]>;
|
|
158
|
+
/** Identitas brand. */
|
|
159
|
+
readonly brand: _angular_core.InputSignal<BrandIdentity>;
|
|
160
|
+
/** Identitas user. */
|
|
161
|
+
readonly user: _angular_core.InputSignal<UserIdentity>;
|
|
162
|
+
/** Wrapper layout & nilai `<Layout [layout-type]>`: navbar/flyout = horizontal, sisanya vertical. */
|
|
163
|
+
protected readonly effectiveLayoutType: _angular_core.Signal<"fluid" | "vertical" | "horizontal" | "empty">;
|
|
164
|
+
/** Tipe nav di dalam `#body`: `empty`/`fluid` → `brand` (header-only); selain itu `nav-type`. */
|
|
165
|
+
protected readonly navKind: _angular_core.Signal<NavKind>;
|
|
166
|
+
/** Lebar host `<Navigation>`: penuh-tinggi (vertical) atau penuh-lebar (horizontal). */
|
|
167
|
+
protected readonly navClass: _angular_core.Signal<"w-full" | "h-full">;
|
|
168
|
+
/** Kelas `<LayoutContent>`: `fluid` membatasi lebar & memusatkan; selain itu padding biasa. */
|
|
169
|
+
protected readonly contentClass: _angular_core.Signal<"w-full max-w-3xl p-6" | "p-6">;
|
|
170
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LayoutWrapperDefault, never>;
|
|
171
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LayoutWrapperDefault, "LayoutWrapperDefault", never, { "surface": { "alias": "surface"; "required": false; "isSignal": true; }; "appearance": { "alias": "layout-appearance"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "layoutType": { "alias": "layout-type"; "required": false; "isSignal": true; }; "navType": { "alias": "nav-type"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": true; "isSignal": true; }; "brand": { "alias": "brand"; "required": true; "isSignal": true; }; "user": { "alias": "user"; "required": true; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
export { LayoutBrand, LayoutNavDockbar, LayoutNavFlyout, LayoutNavMinimal, LayoutNavNavbar, LayoutNavSidebar, LayoutUser, LayoutWrapperDefault };
|
|
175
|
+
export type { BrandIdentity, UserIdentity };
|
|
@@ -2,20 +2,25 @@ import * as _angular_core from '@angular/core';
|
|
|
2
2
|
import { LayoutService, LayoutLoadingService } from '@ojiepermana/angular-theme/layout/services';
|
|
3
3
|
export { LAYOUT_LOADING_HIDE_DELAY_MS, LAYOUT_LOADING_INITIAL_PROGRESS, LAYOUT_LOADING_SKIP, LAYOUT_LOADING_TRICKLE_CEILING, LAYOUT_LOADING_TRICKLE_INTERVAL_MS, LayoutLoadingService, LayoutService, layoutLoadingInterceptor } from '@ojiepermana/angular-theme/layout/services';
|
|
4
4
|
import { NavigationContainerComponent } from '@ojiepermana/angular-navigation';
|
|
5
|
-
export { LAYOUT_APPEARANCE_STORAGE_KEY,
|
|
5
|
+
export { LAYOUT_APPEARANCES, LAYOUT_APPEARANCE_STORAGE_KEY, LAYOUT_DEFAULT_APPEARANCE, LAYOUT_DEFAULT_SURFACE, LAYOUT_DEFAULT_TYPE, LAYOUT_DEFAULT_WIDTH, LAYOUT_SURFACES, LAYOUT_SURFACE_STORAGE_KEY, LAYOUT_TYPES, LAYOUT_TYPE_STORAGE_KEY, LAYOUT_WIDTHS, LAYOUT_WIDTH_STORAGE_KEY, LayoutAppearance, LayoutContextValue, LayoutSurface, LayoutType, LayoutWidth, isUiLayoutAppearance, isUiLayoutSurface, isUiLayoutType, isUiLayoutWidth } from '@ojiepermana/angular-theme/layout/types';
|
|
6
6
|
|
|
7
7
|
declare class LayoutComponent {
|
|
8
8
|
protected readonly layout: LayoutService;
|
|
9
9
|
readonly surface: _angular_core.InputSignal<"flat" | "grid" | "honeycome" | "line-vertical" | "line-horizontal" | null>;
|
|
10
10
|
readonly appearance: _angular_core.InputSignal<"flat" | "border-rail" | null>;
|
|
11
|
-
readonly
|
|
11
|
+
readonly layoutAppearanceAttribute: _angular_core.InputSignal<"flat" | "border-rail" | null>;
|
|
12
12
|
readonly width: _angular_core.InputSignal<"full" | "wide" | "container" | "fluid" | null>;
|
|
13
|
+
/**
|
|
14
|
+
* Tipe layout (`vertical` | `horizontal` | `empty` | `fluid`). Bila di-set, menjadi sumber
|
|
15
|
+
* kebenaran tipe (override variant `Layout*`); bila `null`, variant yang menetapkan.
|
|
16
|
+
*/
|
|
17
|
+
readonly type: _angular_core.InputSignal<"fluid" | "vertical" | "horizontal" | "empty" | null>;
|
|
13
18
|
readonly class: _angular_core.InputSignal<string>;
|
|
14
19
|
protected readonly appearanceInput: _angular_core.Signal<"flat" | "border-rail" | null>;
|
|
15
20
|
protected readonly resolvedSurface: _angular_core.Signal<"flat" | "grid" | "honeycome" | "line-vertical" | "line-horizontal">;
|
|
16
21
|
protected readonly resolvedAppearance: _angular_core.Signal<"flat" | "border-rail">;
|
|
17
|
-
protected readonly resolvedStyle: _angular_core.Signal<"flat" | "border-rail">;
|
|
18
22
|
protected readonly resolvedWidth: _angular_core.Signal<"full" | "wide" | "container" | "fluid">;
|
|
23
|
+
protected readonly resolvedType: _angular_core.Signal<"fluid" | "vertical" | "horizontal" | "empty">;
|
|
19
24
|
protected readonly isBorderRail: _angular_core.Signal<boolean>;
|
|
20
25
|
protected readonly isFluidFrame: _angular_core.Signal<boolean>;
|
|
21
26
|
protected readonly showsInsetRails: _angular_core.Signal<boolean>;
|
|
@@ -30,7 +35,7 @@ declare class LayoutComponent {
|
|
|
30
35
|
private widthPaddingClasses;
|
|
31
36
|
private frameSizeClasses;
|
|
32
37
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LayoutComponent, never>;
|
|
33
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LayoutComponent, "Layout", never, { "surface": { "alias": "surface"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "
|
|
38
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LayoutComponent, "Layout", never, { "surface": { "alias": "surface"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "layoutAppearanceAttribute": { "alias": "layout-appearance"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "type": { "alias": "layout-type"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
34
39
|
}
|
|
35
40
|
|
|
36
41
|
declare class LayoutVerticalComponent {
|