@ojiepermana/angular 0.1.1 → 21.0.0
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 +41 -249
- package/fesm2022/ojiepermana-angular-chart.mjs +3714 -0
- package/fesm2022/ojiepermana-angular-chart.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component.mjs +3463 -0
- package/fesm2022/ojiepermana-angular-component.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-layout.mjs +276 -408
- package/fesm2022/ojiepermana-angular-layout.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-navigation.mjs +2198 -404
- package/fesm2022/ojiepermana-angular-navigation.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-theme.mjs +381 -1
- package/fesm2022/ojiepermana-angular-theme.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular.mjs +15 -1
- package/fesm2022/ojiepermana-angular.mjs.map +1 -1
- package/package.json +49 -36
- package/theme/styles/etos.css +38 -0
- package/theme/styles/index.css +32 -8
- package/theme/styles/themes/brand/etos/color.css +21 -0
- package/theme/styles/themes/brand/etos/style.css +50 -0
- package/theme/styles/themes/library/_components.css +63 -0
- package/theme/styles/themes/library/_layers.css +15 -0
- package/theme/styles/themes/library/_material-overrides.css +254 -0
- package/theme/styles/themes/library/_tokens.css +54 -0
- package/theme/styles/themes/library/color/amber.css +18 -0
- package/theme/styles/themes/library/color/blue.css +23 -0
- package/theme/styles/themes/library/color/green.css +18 -0
- package/theme/styles/themes/library/color/index.css +9 -0
- package/theme/styles/themes/library/color/purple.css +18 -0
- package/theme/styles/themes/library/color/red.css +18 -0
- package/theme/styles/themes/library/style/brutal.css +47 -0
- package/theme/styles/themes/library/style/default.css +51 -0
- package/theme/styles/themes/library/style/index.css +8 -0
- package/theme/styles/themes/library/style/sharp.css +47 -0
- package/theme/styles/themes/library/style/soft.css +47 -0
- package/theme/styles/themes/mode/dark.css +20 -0
- package/theme/styles/themes/mode/index.css +6 -0
- package/theme/styles/themes/mode/light.css +24 -0
- package/theme/styles/themes/taildwind.css +109 -0
- package/types/ojiepermana-angular-chart.d.ts +1094 -0
- package/types/ojiepermana-angular-component.d.ts +1174 -0
- package/types/ojiepermana-angular-layout.d.ts +123 -76
- package/types/ojiepermana-angular-navigation.d.ts +256 -116
- package/types/ojiepermana-angular-theme.d.ts +170 -1
- package/types/ojiepermana-angular.d.ts +2 -1
- package/fesm2022/ojiepermana-angular-internal.mjs +0 -489
- package/fesm2022/ojiepermana-angular-internal.mjs.map +0 -1
- package/fesm2022/ojiepermana-angular-navigation-horizontal.mjs +0 -721
- package/fesm2022/ojiepermana-angular-navigation-horizontal.mjs.map +0 -1
- package/fesm2022/ojiepermana-angular-navigation-vertical.mjs +0 -1647
- package/fesm2022/ojiepermana-angular-navigation-vertical.mjs.map +0 -1
- package/fesm2022/ojiepermana-angular-shell.mjs +0 -19
- package/fesm2022/ojiepermana-angular-shell.mjs.map +0 -1
- package/fesm2022/ojiepermana-angular-theme-component.mjs +0 -235
- package/fesm2022/ojiepermana-angular-theme-component.mjs.map +0 -1
- package/fesm2022/ojiepermana-angular-theme-directive.mjs +0 -29
- package/fesm2022/ojiepermana-angular-theme-directive.mjs.map +0 -1
- package/fesm2022/ojiepermana-angular-theme-service.mjs +0 -241
- package/fesm2022/ojiepermana-angular-theme-service.mjs.map +0 -1
- package/layout/README.md +0 -144
- package/layout/src/component/horizontal/horizontal.css +0 -130
- package/layout/src/component/vertical/vertical.css +0 -75
- package/layout/src/layout.css +0 -16
- package/navigation/README.md +0 -301
- package/navigation/horizontal/README.md +0 -49
- package/shell/README.md +0 -41
- package/styles/index.css +0 -2
- package/styles/resets.css +0 -22
- package/theme/README.md +0 -379
- package/theme/styles/adapters/material-ui/index.css +0 -205
- package/theme/styles/modes/dark.css +0 -84
- package/theme/styles/presets/colors/blue.css +0 -45
- package/theme/styles/presets/colors/brand.css +0 -52
- package/theme/styles/presets/colors/cyan.css +0 -45
- package/theme/styles/presets/colors/green.css +0 -45
- package/theme/styles/presets/colors/index.css +0 -7
- package/theme/styles/presets/colors/orange.css +0 -45
- package/theme/styles/presets/colors/purple.css +0 -45
- package/theme/styles/presets/colors/red.css +0 -45
- package/theme/styles/presets/styles/flat.css +0 -61
- package/theme/styles/presets/styles/glass.css +0 -28
- package/theme/styles/presets/styles/index.css +0 -2
- package/theme/styles/roles/index.css +0 -67
- package/theme/styles/tokens/foundation.css +0 -136
- package/theme/styles/tokens/semantic.css +0 -87
- package/theme/styles/utilities/index.css +0 -88
- package/types/ojiepermana-angular-internal.d.ts +0 -90
- package/types/ojiepermana-angular-navigation-horizontal.d.ts +0 -81
- package/types/ojiepermana-angular-navigation-vertical.d.ts +0 -262
- package/types/ojiepermana-angular-shell.d.ts +0 -14
- package/types/ojiepermana-angular-theme-component.d.ts +0 -46
- package/types/ojiepermana-angular-theme-directive.d.ts +0 -10
- package/types/ojiepermana-angular-theme-service.d.ts +0 -68
- /package/{navigation/vertical → chart}/README.md +0 -0
|
@@ -1,90 +1,137 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import {
|
|
1
|
+
import * as _angular_core from '@angular/core';
|
|
2
|
+
import { InjectionToken, EnvironmentProviders } from '@angular/core';
|
|
3
|
+
import { SidebarAppearance, SidebarPosition, SidebarMode, TopbarAppearance } from '@ojiepermana/angular/navigation';
|
|
3
4
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
readonly
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
private applyToDOM;
|
|
34
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<LayoutService, never>;
|
|
35
|
-
static ɵprov: i0.ɵɵInjectableDeclaration<LayoutService>;
|
|
5
|
+
/**
|
|
6
|
+
* Vertical layout — sidebar + main (scrollable).
|
|
7
|
+
*
|
|
8
|
+
* Data navigasi diambil dari `NavigationService` (register via
|
|
9
|
+
* `NavigationService.registerItems()` di bootstrap). Main memegang
|
|
10
|
+
* `<router-outlet>` dan scroll jika konten panjang.
|
|
11
|
+
*
|
|
12
|
+
* Markup:
|
|
13
|
+
* ```html
|
|
14
|
+
* <vertical>
|
|
15
|
+
* <!-- sidebar + router-outlet dirender oleh komponen -->
|
|
16
|
+
* </vertical>
|
|
17
|
+
* ```
|
|
18
|
+
*/
|
|
19
|
+
declare class VerticalLayoutComponent {
|
|
20
|
+
private readonly layout;
|
|
21
|
+
private readonly theme;
|
|
22
|
+
readonly sidebarAppearance: _angular_core.InputSignal<SidebarAppearance>;
|
|
23
|
+
readonly sidebarPosition: _angular_core.InputSignal<SidebarPosition>;
|
|
24
|
+
readonly sidebarMode: _angular_core.InputSignal<SidebarMode>;
|
|
25
|
+
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
26
|
+
protected readonly layoutWidth: _angular_core.Signal<"full" | "fixed">;
|
|
27
|
+
protected readonly themeStyle: _angular_core.Signal<"default" | "sharp" | "brutal" | "soft">;
|
|
28
|
+
protected readonly shellBorderWidth: _angular_core.Signal<"var(--border-width)" | null>;
|
|
29
|
+
protected readonly dividerBorderWidth: _angular_core.Signal<string>;
|
|
30
|
+
protected readonly hostClasses: _angular_core.Signal<string>;
|
|
31
|
+
protected readonly mainClasses: _angular_core.Signal<string>;
|
|
32
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<VerticalLayoutComponent, never>;
|
|
33
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<VerticalLayoutComponent, "vertical", never, { "sidebarAppearance": { "alias": "sidebarAppearance"; "required": false; "isSignal": true; }; "sidebarPosition": { "alias": "sidebarPosition"; "required": false; "isSignal": true; }; "sidebarMode": { "alias": "sidebarMode"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
36
34
|
}
|
|
37
35
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
36
|
+
/**
|
|
37
|
+
* Horizontal layout — topbar (h-12) + main (scrollable).
|
|
38
|
+
*
|
|
39
|
+
* Data navigasi diambil dari `NavigationService`.
|
|
40
|
+
* Consumer app dapat memproyeksikan brand kiri dan profile kanan.
|
|
41
|
+
*
|
|
42
|
+
* Markup:
|
|
43
|
+
* ```html
|
|
44
|
+
* <horizontal>
|
|
45
|
+
* <a ui-layout-brand>Brand</a>
|
|
46
|
+
* <button ui-layout-profile type="button">Profile</button>
|
|
47
|
+
* </horizontal>
|
|
48
|
+
* ```
|
|
49
|
+
*/
|
|
50
|
+
declare class HorizontalLayoutComponent {
|
|
51
|
+
private readonly layout;
|
|
52
|
+
private readonly theme;
|
|
53
|
+
readonly topbarAppearance: _angular_core.InputSignal<TopbarAppearance>;
|
|
54
|
+
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
55
|
+
protected readonly layoutWidth: _angular_core.Signal<"full" | "fixed">;
|
|
56
|
+
protected readonly themeStyle: _angular_core.Signal<"default" | "sharp" | "brutal" | "soft">;
|
|
57
|
+
protected readonly shellBorderWidth: _angular_core.Signal<"var(--border-width)" | null>;
|
|
58
|
+
protected readonly dividerBorderWidth: _angular_core.Signal<string>;
|
|
59
|
+
protected readonly hostClasses: _angular_core.Signal<string>;
|
|
60
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<HorizontalLayoutComponent, never>;
|
|
61
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<HorizontalLayoutComponent, "horizontal", never, { "topbarAppearance": { "alias": "topbarAppearance"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["[ui-layout-brand],[ui-topbar-start]", "[ui-layout-profile],[ui-topbar-end]"], true, never>;
|
|
42
62
|
}
|
|
43
63
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
64
|
+
/**
|
|
65
|
+
* Empty layout — full-viewport, flex-centered main.
|
|
66
|
+
*
|
|
67
|
+
* Cocok untuk halaman login / error / onboarding (pola shadcn `login-05`).
|
|
68
|
+
* Konten dirender lewat `<router-outlet>`; consumer men-style card / form
|
|
69
|
+
* milik halaman route sendiri.
|
|
70
|
+
*
|
|
71
|
+
* Markup:
|
|
72
|
+
* ```html
|
|
73
|
+
* <empty>
|
|
74
|
+
* <!-- router-outlet dirender oleh komponen -->
|
|
75
|
+
* </empty>
|
|
76
|
+
* ```
|
|
77
|
+
*/
|
|
78
|
+
declare class EmptyLayoutComponent {
|
|
79
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<EmptyLayoutComponent, never>;
|
|
80
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<EmptyLayoutComponent, "empty", never, {}, {}, never, never, true, never>;
|
|
47
81
|
}
|
|
48
82
|
|
|
49
|
-
declare
|
|
50
|
-
|
|
51
|
-
|
|
83
|
+
declare const LAYOUT_MODES: readonly ["vertical", "horizontal"];
|
|
84
|
+
type LayoutMode = (typeof LAYOUT_MODES)[number];
|
|
85
|
+
declare const LAYOUT_WIDTHS: readonly ["full", "fixed"];
|
|
86
|
+
type LayoutWidth = (typeof LAYOUT_WIDTHS)[number];
|
|
87
|
+
interface MaterialLayoutConfig {
|
|
88
|
+
/** Initial layout mode. */
|
|
89
|
+
readonly mode?: LayoutMode;
|
|
90
|
+
/** Initial layout width. */
|
|
91
|
+
readonly width?: LayoutWidth;
|
|
92
|
+
/** @deprecated Use `mode` instead. */
|
|
93
|
+
/** Initial layout mode. Defaults to `vertical`. */
|
|
94
|
+
readonly defaultMode?: LayoutMode;
|
|
95
|
+
/** localStorage key used to persist the layout mode. Set to `null` to disable persistence. */
|
|
96
|
+
readonly storageKey?: string | null;
|
|
97
|
+
/** localStorage key used to persist the layout width. Set to `null` to disable persistence. */
|
|
98
|
+
readonly widthStorageKey?: string | null;
|
|
52
99
|
}
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<LayoutContainerSwitcherComponent, never>;
|
|
59
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<LayoutContainerSwitcherComponent, "layout-container-switcher", never, {}, {}, never, never, true, never>;
|
|
100
|
+
interface ResolvedMaterialLayoutConfig {
|
|
101
|
+
readonly defaultMode: LayoutMode;
|
|
102
|
+
readonly defaultWidth: LayoutWidth;
|
|
103
|
+
readonly storageKey: string | null;
|
|
104
|
+
readonly widthStorageKey: string | null;
|
|
60
105
|
}
|
|
106
|
+
declare const MATERIAL_LAYOUT_CONFIG: InjectionToken<MaterialLayoutConfig>;
|
|
107
|
+
declare const DEFAULT_MATERIAL_LAYOUT_CONFIG: ResolvedMaterialLayoutConfig;
|
|
108
|
+
declare function isLayoutMode(value: string | null | undefined): value is LayoutMode;
|
|
109
|
+
declare function isLayoutWidth(value: string | null | undefined): value is LayoutWidth;
|
|
61
110
|
|
|
62
|
-
declare class
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<LayoutModeSwitcherComponent, never>;
|
|
82
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<LayoutModeSwitcherComponent, "layout-mode-switcher", never, {}, {}, never, never, true, never>;
|
|
111
|
+
declare class LayoutService {
|
|
112
|
+
private readonly document;
|
|
113
|
+
private readonly config;
|
|
114
|
+
private readonly _mode;
|
|
115
|
+
private readonly _width;
|
|
116
|
+
readonly mode: _angular_core.Signal<"vertical" | "horizontal">;
|
|
117
|
+
readonly width: _angular_core.Signal<"full" | "fixed">;
|
|
118
|
+
constructor();
|
|
119
|
+
setMode(mode: LayoutMode): void;
|
|
120
|
+
toggleMode(): void;
|
|
121
|
+
setWidth(width: LayoutWidth): void;
|
|
122
|
+
toggleWidth(): void;
|
|
123
|
+
private resolveConfig;
|
|
124
|
+
private readPersistedMode;
|
|
125
|
+
private readPersistedWidth;
|
|
126
|
+
private persistMode;
|
|
127
|
+
private persistWidth;
|
|
128
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LayoutService, never>;
|
|
129
|
+
static ɵprov: _angular_core.ɵɵInjectableDeclaration<LayoutService>;
|
|
83
130
|
}
|
|
84
131
|
|
|
85
|
-
declare function
|
|
132
|
+
declare function provideMaterialLayout(config?: MaterialLayoutConfig): EnvironmentProviders;
|
|
86
133
|
|
|
87
|
-
declare const
|
|
134
|
+
declare const LAYOUT_VERSION = "0.0.1";
|
|
88
135
|
|
|
89
|
-
export {
|
|
90
|
-
export type {
|
|
136
|
+
export { DEFAULT_MATERIAL_LAYOUT_CONFIG, EmptyLayoutComponent, HorizontalLayoutComponent, LAYOUT_MODES, LAYOUT_VERSION, LAYOUT_WIDTHS, LayoutService, MATERIAL_LAYOUT_CONFIG, VerticalLayoutComponent, isLayoutMode, isLayoutWidth, provideMaterialLayout };
|
|
137
|
+
export type { LayoutMode, LayoutWidth, MaterialLayoutConfig, ResolvedMaterialLayoutConfig };
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
|
-
import { EnvironmentProviders, InjectionToken } from '@angular/core';
|
|
3
2
|
import { Params, QueryParamsHandling, IsActiveMatchOptions } from '@angular/router';
|
|
3
|
+
import { ClassValue } from 'clsx';
|
|
4
4
|
|
|
5
|
-
type NavigationItemType = 'aside' | 'basic' | 'collapsable' | 'divider' | 'group' | 'spacer';
|
|
5
|
+
type NavigationItemType = 'aside' | 'basic' | 'collapsable' | 'divider' | 'group' | 'mega' | 'spacer';
|
|
6
6
|
interface NavigationItemClasses {
|
|
7
7
|
title?: string;
|
|
8
8
|
subtitle?: string;
|
|
@@ -30,7 +30,7 @@ interface NavigationItemBase {
|
|
|
30
30
|
tooltip?: string;
|
|
31
31
|
/** Custom CSS classes */
|
|
32
32
|
classes?: NavigationItemClasses;
|
|
33
|
-
/** Material icon name */
|
|
33
|
+
/** Material Symbols icon name (ligature, e.g. `dashboard`, `menu_book`) */
|
|
34
34
|
icon?: string;
|
|
35
35
|
/** Badge configuration */
|
|
36
36
|
badge?: NavigationItemBadge;
|
|
@@ -77,6 +77,16 @@ interface NavigationGroupItem extends NavigationItemBase {
|
|
|
77
77
|
type: 'group';
|
|
78
78
|
children: NavigationItem[];
|
|
79
79
|
}
|
|
80
|
+
/**
|
|
81
|
+
* Mega menu branch — dirender sebagai panel full-width multi-kolom pada topbar.
|
|
82
|
+
* Children biasanya berupa `NavigationGroupItem` (per kolom) berisi `basic` items.
|
|
83
|
+
*/
|
|
84
|
+
interface NavigationMegaItem extends NavigationItemBase {
|
|
85
|
+
type: 'mega';
|
|
86
|
+
/** Jumlah kolom saat viewport >= md (default: 4) */
|
|
87
|
+
columns?: number;
|
|
88
|
+
children: NavigationItem[];
|
|
89
|
+
}
|
|
80
90
|
interface NavigationDividerItem extends NavigationItemBase {
|
|
81
91
|
type: 'divider';
|
|
82
92
|
children?: never;
|
|
@@ -85,7 +95,7 @@ interface NavigationSpacerItem extends NavigationItemBase {
|
|
|
85
95
|
type: 'spacer';
|
|
86
96
|
children?: never;
|
|
87
97
|
}
|
|
88
|
-
type NavigationBranchItem = NavigationAsideItem | NavigationCollapsableItem | NavigationGroupItem;
|
|
98
|
+
type NavigationBranchItem = NavigationAsideItem | NavigationCollapsableItem | NavigationGroupItem | NavigationMegaItem;
|
|
89
99
|
type NavigationLeafItem = NavigationBasicItem | NavigationDividerItem | NavigationSpacerItem;
|
|
90
100
|
type NavigationItem = NavigationBranchItem | NavigationLeafItem;
|
|
91
101
|
/**
|
|
@@ -96,133 +106,263 @@ type NavigationItem = NavigationBranchItem | NavigationLeafItem;
|
|
|
96
106
|
*/
|
|
97
107
|
type NavigationStructuredItem = NavigationItem;
|
|
98
108
|
/**
|
|
99
|
-
*
|
|
100
|
-
* - default:
|
|
101
|
-
* -
|
|
102
|
-
*/
|
|
103
|
-
type HorizontalNavigationVariant = 'default' | 'mega';
|
|
104
|
-
/**
|
|
105
|
-
* Vertical Navigation Appearances
|
|
106
|
-
* - default: 280px width, full labels & icons
|
|
107
|
-
* - collapsible: alias variant that currently reuses the default layout
|
|
109
|
+
* Sidebar Appearance
|
|
110
|
+
* - default: full width (lebar penuh) dengan label + icon
|
|
111
|
+
* - thin: icon-only, expand overlay saat hover
|
|
108
112
|
*/
|
|
109
|
-
type
|
|
113
|
+
type SidebarAppearance = 'default' | 'thin';
|
|
110
114
|
/**
|
|
111
|
-
*
|
|
112
|
-
* -
|
|
113
|
-
* -
|
|
115
|
+
* Topbar Appearance
|
|
116
|
+
* - default: horizontal dengan dropdown untuk collapsable
|
|
117
|
+
* - megamenu: full-width panel multi-kolom untuk item `mega`
|
|
114
118
|
*/
|
|
115
|
-
type
|
|
116
|
-
/**
|
|
117
|
-
|
|
118
|
-
*/
|
|
119
|
-
type
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
defaultVerticalVariant: VerticalNavigationAppearance;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
declare function provideNgNavigation(config?: Partial<NgNavigationConfig>): EnvironmentProviders;
|
|
127
|
-
|
|
128
|
-
declare class NavigationPreferencesService {
|
|
129
|
-
private readonly config;
|
|
130
|
-
private readonly document;
|
|
131
|
-
private readonly isBrowser;
|
|
132
|
-
private readonly storage;
|
|
133
|
-
private readonly _horizontalVariant;
|
|
134
|
-
private readonly _verticalAppearance;
|
|
135
|
-
private readonly _activeItemId;
|
|
136
|
-
private readonly _expandedItemIds;
|
|
137
|
-
readonly horizontalVariant: _angular_core.Signal<HorizontalNavigationVariant>;
|
|
138
|
-
readonly verticalAppearance: _angular_core.Signal<VerticalNavigationAppearance>;
|
|
139
|
-
readonly activeItemId: _angular_core.Signal<string | null>;
|
|
140
|
-
readonly expandedItemIds: _angular_core.Signal<string[]>;
|
|
141
|
-
setHorizontalVariant(value: HorizontalNavigationVariant): void;
|
|
142
|
-
setVerticalAppearance(value: VerticalNavigationAppearance): void;
|
|
143
|
-
setActiveItem(id: string | null): void;
|
|
144
|
-
clearActiveItem(): void;
|
|
145
|
-
setExpandedItemIds(ids: readonly string[]): void;
|
|
146
|
-
expandItem(id: string): void;
|
|
147
|
-
collapseItem(id: string): void;
|
|
148
|
-
toggleExpandedItem(id: string): void;
|
|
149
|
-
clearExpandedItems(): void;
|
|
150
|
-
reset(): void;
|
|
151
|
-
syncWithNavigation(navigation: readonly NavigationItem[]): void;
|
|
152
|
-
private readActiveItemId;
|
|
153
|
-
private readExpandedItemIds;
|
|
154
|
-
private readHorizontalVariant;
|
|
155
|
-
private readVerticalAppearance;
|
|
156
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<NavigationPreferencesService, never>;
|
|
157
|
-
static ɵprov: _angular_core.ɵɵInjectableDeclaration<NavigationPreferencesService>;
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
declare const DEFAULT_NG_NAVIGATION_CONFIG: NgNavigationConfig;
|
|
161
|
-
declare const NG_NAVIGATION_CONFIG: InjectionToken<NgNavigationConfig>;
|
|
162
|
-
|
|
163
|
-
declare function getNavigationItemAction(item: NavigationItem): NavigationActionHandler | undefined;
|
|
164
|
-
declare function getNavigationItemVisibilityHandler(item: NavigationItem): NavigationVisibilityHandler | undefined;
|
|
165
|
-
declare function isNavigationItemHidden(item: NavigationItem): boolean;
|
|
166
|
-
declare function shouldRenderNavigationItem(item: NavigationItem): boolean;
|
|
167
|
-
declare function hasNavigationChildren(item: NavigationItem): item is NavigationBranchItem;
|
|
168
|
-
declare function getNavigationChildren(item: NavigationItem): NavigationItem[];
|
|
169
|
-
declare function isNavigationRoutableItem(item: NavigationItem): item is NavigationItem & NavigationRoutableItemBase;
|
|
119
|
+
type TopbarAppearance = 'default' | 'megamenu';
|
|
120
|
+
/** Sidebar position */
|
|
121
|
+
type SidebarPosition = 'left' | 'right';
|
|
122
|
+
/** Sidebar display mode */
|
|
123
|
+
type SidebarMode = 'over' | 'side';
|
|
124
|
+
type VerticalNavigationAppearance = SidebarAppearance;
|
|
125
|
+
type VerticalNavigationMode = SidebarMode;
|
|
126
|
+
type VerticalNavigationPosition = SidebarPosition;
|
|
170
127
|
|
|
128
|
+
/** Default registry key used when no id is specified. */
|
|
129
|
+
declare const DEFAULT_NAVIGATION_ID = "main";
|
|
171
130
|
/**
|
|
172
|
-
*
|
|
131
|
+
* Signal-based global state untuk navigation (sidebar/topbar).
|
|
173
132
|
*
|
|
174
|
-
*
|
|
175
|
-
*
|
|
176
|
-
* 2. Menyediakan state aktif dan expanded item
|
|
177
|
-
* 3. Utility functions untuk navigation operations
|
|
133
|
+
* Items disimpan dalam registry ber-key. Key default adalah `'main'`.
|
|
134
|
+
* Komponen `ui-sidebar` / `ui-topbar` memilih registry via input `navigationId`.
|
|
178
135
|
*/
|
|
179
136
|
declare class NavigationService {
|
|
180
|
-
private readonly
|
|
181
|
-
private
|
|
182
|
-
|
|
183
|
-
readonly
|
|
184
|
-
|
|
185
|
-
readonly
|
|
186
|
-
/**
|
|
187
|
-
* Store navigation data
|
|
188
|
-
* Biasanya dipanggil saat app initialization
|
|
189
|
-
*/
|
|
190
|
-
storeNavigation(navigation: NavigationItem[]): void;
|
|
137
|
+
private readonly router;
|
|
138
|
+
private readonly destroyRef;
|
|
139
|
+
/** Internal version counter — incremented on every registry mutation. */
|
|
140
|
+
private readonly _version;
|
|
141
|
+
/** Internal map of registered navigation trees. */
|
|
142
|
+
private readonly _registry;
|
|
191
143
|
/**
|
|
192
|
-
*
|
|
144
|
+
* Backward-compatible accessor — returns items for the default (`'main'`) key.
|
|
145
|
+
* Prefer `getItems(id)` when working with named registries.
|
|
193
146
|
*/
|
|
194
|
-
|
|
147
|
+
readonly items: _angular_core.Signal<readonly NavigationItem[]>;
|
|
148
|
+
/** Sidebar collapsed (default ↔ thin) toggle untuk desktop. */
|
|
149
|
+
readonly collapsed: _angular_core.WritableSignal<boolean>;
|
|
150
|
+
/** Sheet drawer terbuka di mobile. */
|
|
151
|
+
readonly mobileOpen: _angular_core.WritableSignal<boolean>;
|
|
152
|
+
/** Set id grup / collapsable yang sedang terbuka. */
|
|
153
|
+
readonly openGroups: _angular_core.WritableSignal<ReadonlySet<string>>;
|
|
154
|
+
/** URL aktif terakhir. Update otomatis dari Router `NavigationEnd`. */
|
|
155
|
+
readonly activeUrl: _angular_core.WritableSignal<string>;
|
|
156
|
+
/** Trail id item yang sedang match dengan URL aktif (across ALL registries). */
|
|
157
|
+
readonly activeTrail: _angular_core.Signal<ReadonlySet<string>>;
|
|
158
|
+
constructor();
|
|
195
159
|
/**
|
|
196
|
-
*
|
|
160
|
+
* Register items di registry.
|
|
161
|
+
*
|
|
162
|
+
* Overload:
|
|
163
|
+
* - `registerItems(items)` → key `'main'`
|
|
164
|
+
* - `registerItems(id, items)` → key spesifik
|
|
197
165
|
*/
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
expandItem(id: string): void;
|
|
203
|
-
collapseItem(id: string): void;
|
|
204
|
-
toggleItemExpanded(id: string): void;
|
|
205
|
-
isItemExpanded(id: string): boolean;
|
|
206
|
-
clearExpandedItems(): void;
|
|
166
|
+
registerItems(items: NavigationItem[]): void;
|
|
167
|
+
registerItems(id: string, items: NavigationItem[]): void;
|
|
168
|
+
/** Remove a named registry entry. */
|
|
169
|
+
removeItems(id: string): void;
|
|
207
170
|
/**
|
|
208
|
-
*
|
|
209
|
-
*
|
|
210
|
-
* Berguna untuk search, analytics, atau operations lainnya
|
|
171
|
+
* Computed yang mengembalikan items untuk key tertentu.
|
|
172
|
+
* Reactive terhadap perubahan registry.
|
|
211
173
|
*/
|
|
212
|
-
|
|
213
|
-
/**
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
174
|
+
getItems(id: string): () => readonly NavigationItem[];
|
|
175
|
+
/** Toggle sidebar collapsed (default ↔ thin). */
|
|
176
|
+
toggleCollapsed(): void;
|
|
177
|
+
setCollapsed(value: boolean): void;
|
|
178
|
+
openMobile(): void;
|
|
179
|
+
closeMobile(): void;
|
|
180
|
+
toggleMobile(): void;
|
|
181
|
+
isGroupOpen(id: string): boolean;
|
|
182
|
+
toggleGroup(id: string): void;
|
|
183
|
+
setGroupOpen(id: string, open: boolean): void;
|
|
184
|
+
/** Apakah id termasuk dalam active trail saat ini. */
|
|
185
|
+
isActive(id: string | undefined): boolean;
|
|
223
186
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<NavigationService, never>;
|
|
224
187
|
static ɵprov: _angular_core.ɵɵInjectableDeclaration<NavigationService>;
|
|
225
188
|
}
|
|
226
189
|
|
|
227
|
-
|
|
228
|
-
|
|
190
|
+
/**
|
|
191
|
+
* Material Symbols icon renderer.
|
|
192
|
+
* Menyuntikkan stylesheet font sekali saat dipakai agar consumer tidak perlu
|
|
193
|
+
* menambahkan `<link>` manual di `index.html`.
|
|
194
|
+
*/
|
|
195
|
+
declare class UiNavIconComponent {
|
|
196
|
+
private readonly doc;
|
|
197
|
+
private readonly platformId;
|
|
198
|
+
readonly name: _angular_core.InputSignal<string>;
|
|
199
|
+
readonly class: _angular_core.InputSignal<string>;
|
|
200
|
+
readonly size: _angular_core.InputSignal<number | null>;
|
|
201
|
+
protected readonly fontVariationSettings = "\"FILL\" 0, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24";
|
|
202
|
+
constructor();
|
|
203
|
+
protected readonly classes: _angular_core.Signal<string>;
|
|
204
|
+
private ensureFontStylesheet;
|
|
205
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiNavIconComponent, never>;
|
|
206
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiNavIconComponent, "ui-nav-icon", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
/** Concatenate and dedupe Tailwind class names. */
|
|
210
|
+
declare function cn(...inputs: ClassValue[]): string;
|
|
211
|
+
|
|
212
|
+
/**
|
|
213
|
+
* Recursive navigation item renderer (vertical context).
|
|
214
|
+
*
|
|
215
|
+
* Menerima item polymorphic dan delegasi ke template sesuai `type`.
|
|
216
|
+
* Mega dirender sebagai group biasa saat muncul di konteks vertical.
|
|
217
|
+
*/
|
|
218
|
+
declare class UiNavItemComponent {
|
|
219
|
+
private readonly nav;
|
|
220
|
+
protected readonly cn: typeof cn;
|
|
221
|
+
readonly item: _angular_core.InputSignal<NavigationItem>;
|
|
222
|
+
readonly level: _angular_core.InputSignal<number>;
|
|
223
|
+
/** Compact / icon-only rendering (sidebar `thin`). */
|
|
224
|
+
readonly compact: _angular_core.InputSignal<boolean>;
|
|
225
|
+
protected readonly exactMatch: {
|
|
226
|
+
readonly exact: true;
|
|
227
|
+
readonly paths: "exact";
|
|
228
|
+
readonly queryParams: "exact";
|
|
229
|
+
readonly fragment: "exact";
|
|
230
|
+
readonly matrixParams: "exact";
|
|
231
|
+
};
|
|
232
|
+
protected readonly inexactMatch: {
|
|
233
|
+
readonly paths: "subset";
|
|
234
|
+
readonly queryParams: "subset";
|
|
235
|
+
readonly fragment: "ignored";
|
|
236
|
+
readonly matrixParams: "ignored";
|
|
237
|
+
};
|
|
238
|
+
protected readonly type: _angular_core.Signal<"aside" | "basic" | "collapsable" | "divider" | "group" | "mega" | "spacer">;
|
|
239
|
+
protected readonly groupItem: _angular_core.Signal<NavigationGroupItem>;
|
|
240
|
+
protected readonly collapsableItem: _angular_core.Signal<NavigationCollapsableItem>;
|
|
241
|
+
protected readonly megaItem: _angular_core.Signal<NavigationMegaItem>;
|
|
242
|
+
protected readonly asideItem: _angular_core.Signal<NavigationAsideItem>;
|
|
243
|
+
protected readonly basicItem: _angular_core.Signal<NavigationBasicItem>;
|
|
244
|
+
protected readonly headingId: _angular_core.Signal<string>;
|
|
245
|
+
protected isGroupOpen(): boolean;
|
|
246
|
+
protected isTrailActive(): boolean;
|
|
247
|
+
protected toggleGroup(): void;
|
|
248
|
+
protected runAction(): void;
|
|
249
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiNavItemComponent, never>;
|
|
250
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiNavItemComponent, "ui-nav-item", never, { "item": { "alias": "item"; "required": true; "isSignal": true; }; "level": { "alias": "level"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
/**
|
|
254
|
+
* Vertical navigation (sidebar) — shadcn-styled.
|
|
255
|
+
*
|
|
256
|
+
* Variants:
|
|
257
|
+
* - `default`: 17.5rem, label + icon
|
|
258
|
+
* - `thin`: 4rem icon-only; hover memunculkan overlay expand (tidak push konten)
|
|
259
|
+
*
|
|
260
|
+
* Mobile (`< md`): saat `autoMobile=true` (default), host desktop disembunyikan
|
|
261
|
+
* dan konten dirender lewat CDK Overlay drawer dengan focus trap. State buka
|
|
262
|
+
* dikontrol lewat `NavigationService.mobileOpen`.
|
|
263
|
+
*/
|
|
264
|
+
declare class SidebarComponent {
|
|
265
|
+
private readonly nav;
|
|
266
|
+
private readonly bp;
|
|
267
|
+
private readonly overlay;
|
|
268
|
+
private readonly vcr;
|
|
269
|
+
private readonly focusTrapFactory;
|
|
270
|
+
private readonly doc;
|
|
271
|
+
private readonly destroyRef;
|
|
272
|
+
readonly items: _angular_core.InputSignal<NavigationItem[]>;
|
|
273
|
+
/** Registry key di `NavigationService`. Default `'main'`. */
|
|
274
|
+
readonly navigationId: _angular_core.InputSignal<string>;
|
|
275
|
+
readonly appearance: _angular_core.InputSignal<SidebarAppearance>;
|
|
276
|
+
readonly position: _angular_core.InputSignal<SidebarPosition>;
|
|
277
|
+
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
278
|
+
readonly header: _angular_core.InputSignal<boolean>;
|
|
279
|
+
readonly class: _angular_core.InputSignal<string>;
|
|
280
|
+
/** Auto switch ke CDK overlay drawer saat viewport `< md`. */
|
|
281
|
+
readonly autoMobile: _angular_core.InputSignal<boolean>;
|
|
282
|
+
/** Auto-register `items` ke `NavigationService` agar `activeTrail` bekerja. */
|
|
283
|
+
readonly autoRegister: _angular_core.InputSignal<boolean>;
|
|
284
|
+
/** Resolved items: input jika disediakan, fallback ke registry NavigationService. */
|
|
285
|
+
protected readonly resolvedItems: _angular_core.Signal<readonly NavigationItem[]>;
|
|
286
|
+
private readonly hovered;
|
|
287
|
+
private readonly drawerTpl;
|
|
288
|
+
private drawerRef;
|
|
289
|
+
private focusTrap;
|
|
290
|
+
private previouslyFocused;
|
|
291
|
+
/** True saat viewport `< md` (767.98px). */
|
|
292
|
+
protected readonly isMobileMedia: _angular_core.Signal<boolean>;
|
|
293
|
+
protected readonly isMobile: _angular_core.Signal<boolean>;
|
|
294
|
+
protected readonly isExpanded: _angular_core.Signal<boolean>;
|
|
295
|
+
protected readonly isCompact: _angular_core.Signal<boolean>;
|
|
296
|
+
constructor();
|
|
297
|
+
protected readonly hostClasses: _angular_core.Signal<string>;
|
|
298
|
+
protected readonly innerClasses: _angular_core.Signal<string>;
|
|
299
|
+
protected onHoverEnter(): void;
|
|
300
|
+
protected onHoverLeave(): void;
|
|
301
|
+
/** Touch fallback: tap pada strip thin (ketika belum expanded) untuk expand. */
|
|
302
|
+
protected onHostClick(event: MouseEvent): void;
|
|
303
|
+
private openDrawer;
|
|
304
|
+
private closeDrawer;
|
|
305
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarComponent, never>;
|
|
306
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SidebarComponent, "ui-sidebar", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "navigationId": { "alias": "navigationId"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "autoMobile": { "alias": "autoMobile"; "required": false; "isSignal": true; }; "autoRegister": { "alias": "autoRegister"; "required": false; "isSignal": true; }; }, {}, never, ["[ui-sidebar-header]", "[ui-sidebar-footer]"], true, never>;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
/**
|
|
310
|
+
* Horizontal navigation (topbar) — shadcn-styled.
|
|
311
|
+
*
|
|
312
|
+
* Variants:
|
|
313
|
+
* - `default`: horizontal list; item `collapsable` buka dropdown
|
|
314
|
+
* - `megamenu`: item `mega` buka panel full-width multi-kolom
|
|
315
|
+
*/
|
|
316
|
+
declare class TopbarComponent {
|
|
317
|
+
protected readonly nav: NavigationService;
|
|
318
|
+
private readonly overlay;
|
|
319
|
+
private readonly vcr;
|
|
320
|
+
private readonly host;
|
|
321
|
+
private readonly destroyRef;
|
|
322
|
+
readonly items: _angular_core.InputSignal<NavigationItem[]>;
|
|
323
|
+
/** Registry key di `NavigationService`. Default `'main'`. */
|
|
324
|
+
readonly navigationId: _angular_core.InputSignal<string>;
|
|
325
|
+
readonly appearance: _angular_core.InputSignal<TopbarAppearance>;
|
|
326
|
+
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
327
|
+
readonly class: _angular_core.InputSignal<string>;
|
|
328
|
+
/** Auto-register `items` ke `NavigationService` agar `activeTrail` bekerja. */
|
|
329
|
+
readonly autoRegister: _angular_core.InputSignal<boolean>;
|
|
330
|
+
/** Tampilkan hamburger di `< md` yang men-toggle mobile drawer sidebar. */
|
|
331
|
+
readonly showHamburger: _angular_core.InputSignal<boolean>;
|
|
332
|
+
readonly hamburgerLabel: _angular_core.InputSignal<string>;
|
|
333
|
+
/** Resolved items: input jika disediakan, fallback ke registry NavigationService. */
|
|
334
|
+
protected readonly resolvedItems: _angular_core.Signal<readonly NavigationItem[]>;
|
|
335
|
+
protected readonly openId: _angular_core.WritableSignal<string | null>;
|
|
336
|
+
private active;
|
|
337
|
+
private readonly dropdownTpl;
|
|
338
|
+
private readonly megaTpl;
|
|
339
|
+
constructor();
|
|
340
|
+
protected readonly hostClasses: _angular_core.Signal<string>;
|
|
341
|
+
protected asBasic(i: NavigationItem): NavigationBasicItem;
|
|
342
|
+
protected asCollapsable(i: NavigationItem): NavigationCollapsableItem;
|
|
343
|
+
protected asGroup(i: NavigationItem): NavigationGroupItem;
|
|
344
|
+
protected asMega(i: NavigationItem): NavigationMegaItem;
|
|
345
|
+
protected isItemActive(id: string | undefined): boolean;
|
|
346
|
+
protected megaColsClass(columns?: number): string;
|
|
347
|
+
protected toggleDropdown(trigger: HTMLElement, item: NavigationItem): void;
|
|
348
|
+
protected openDropdown(trigger: HTMLElement, item: NavigationItem): void;
|
|
349
|
+
protected toggleMega(trigger: HTMLElement, item: NavigationItem): void;
|
|
350
|
+
protected openMega(trigger: HTMLElement, item: NavigationItem): void;
|
|
351
|
+
private attach;
|
|
352
|
+
protected closeAll(): void;
|
|
353
|
+
/** Menubar keyboard navigation: ArrowLeft/Right antar trigger, Home/End, ArrowDown fokus panel. */
|
|
354
|
+
protected onMenubarKeydown(event: KeyboardEvent): void;
|
|
355
|
+
/** Arrow-key navigation dalam dropdown/mega panel. */
|
|
356
|
+
protected onPanelKeydown(event: KeyboardEvent): void;
|
|
357
|
+
private collectPanelFocusables;
|
|
358
|
+
private focusFirstInPanel;
|
|
359
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TopbarComponent, never>;
|
|
360
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TopbarComponent, "ui-topbar", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "navigationId": { "alias": "navigationId"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "autoRegister": { "alias": "autoRegister"; "required": false; "isSignal": true; }; "showHamburger": { "alias": "showHamburger"; "required": false; "isSignal": true; }; "hamburgerLabel": { "alias": "hamburgerLabel"; "required": false; "isSignal": true; }; }, {}, never, ["[ui-topbar-start]", "[ui-topbar-end]"], true, never>;
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
declare const DemoNavigationData: NavigationItem[];
|
|
364
|
+
|
|
365
|
+
declare const NAVIGATION_VERSION = "0.0.1";
|
|
366
|
+
|
|
367
|
+
export { DEFAULT_NAVIGATION_ID, DemoNavigationData, NAVIGATION_VERSION, NavigationService, SidebarComponent, TopbarComponent, UiNavIconComponent, UiNavItemComponent };
|
|
368
|
+
export type { NavigationActionHandler, NavigationAsideItem, NavigationBasicItem, NavigationBranchItem, NavigationCollapsableItem, NavigationDividerItem, NavigationGroupItem, NavigationItem, NavigationItemBadge, NavigationItemBase, NavigationItemClasses, NavigationItemType, NavigationLeafItem, NavigationMegaItem, NavigationRoutableItemBase, NavigationSpacerItem, NavigationStructuredItem, NavigationVisibilityHandler, SidebarAppearance, SidebarMode, SidebarPosition, TopbarAppearance, VerticalNavigationAppearance, VerticalNavigationMode, VerticalNavigationPosition };
|