@ojiepermana/angular 0.1.0 → 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.
Files changed (91) hide show
  1. package/README.md +41 -246
  2. package/chart/README.md +0 -0
  3. package/fesm2022/ojiepermana-angular-chart.mjs +3714 -0
  4. package/fesm2022/ojiepermana-angular-chart.mjs.map +1 -0
  5. package/fesm2022/ojiepermana-angular-component.mjs +3463 -0
  6. package/fesm2022/ojiepermana-angular-component.mjs.map +1 -0
  7. package/fesm2022/ojiepermana-angular-layout.mjs +272 -401
  8. package/fesm2022/ojiepermana-angular-layout.mjs.map +1 -1
  9. package/fesm2022/ojiepermana-angular-navigation.mjs +2225 -135
  10. package/fesm2022/ojiepermana-angular-navigation.mjs.map +1 -1
  11. package/fesm2022/ojiepermana-angular-theme.mjs +381 -1
  12. package/fesm2022/ojiepermana-angular-theme.mjs.map +1 -1
  13. package/fesm2022/ojiepermana-angular.mjs +15 -1
  14. package/fesm2022/ojiepermana-angular.mjs.map +1 -1
  15. package/package.json +49 -36
  16. package/theme/styles/etos.css +38 -0
  17. package/theme/styles/index.css +32 -8
  18. package/theme/styles/themes/brand/etos/color.css +21 -0
  19. package/theme/styles/themes/brand/etos/style.css +50 -0
  20. package/theme/styles/themes/library/_components.css +63 -0
  21. package/theme/styles/themes/library/_layers.css +15 -0
  22. package/theme/styles/themes/library/_material-overrides.css +254 -0
  23. package/theme/styles/themes/library/_tokens.css +54 -0
  24. package/theme/styles/themes/library/color/amber.css +18 -0
  25. package/theme/styles/themes/library/color/blue.css +23 -0
  26. package/theme/styles/themes/library/color/green.css +18 -0
  27. package/theme/styles/themes/library/color/index.css +9 -0
  28. package/theme/styles/themes/library/color/purple.css +18 -0
  29. package/theme/styles/themes/library/color/red.css +18 -0
  30. package/theme/styles/themes/library/style/brutal.css +47 -0
  31. package/theme/styles/themes/library/style/default.css +51 -0
  32. package/theme/styles/themes/library/style/index.css +8 -0
  33. package/theme/styles/themes/library/style/sharp.css +47 -0
  34. package/theme/styles/themes/library/style/soft.css +47 -0
  35. package/theme/styles/themes/mode/dark.css +20 -0
  36. package/theme/styles/themes/mode/index.css +6 -0
  37. package/theme/styles/themes/mode/light.css +24 -0
  38. package/theme/styles/themes/taildwind.css +109 -0
  39. package/types/ojiepermana-angular-chart.d.ts +1094 -0
  40. package/types/ojiepermana-angular-component.d.ts +1174 -0
  41. package/types/ojiepermana-angular-layout.d.ts +123 -76
  42. package/types/ojiepermana-angular-navigation.d.ts +257 -71
  43. package/types/ojiepermana-angular-theme.d.ts +170 -1
  44. package/types/ojiepermana-angular.d.ts +2 -1
  45. package/fesm2022/ojiepermana-angular-internal.mjs +0 -473
  46. package/fesm2022/ojiepermana-angular-internal.mjs.map +0 -1
  47. package/fesm2022/ojiepermana-angular-navigation-horizontal.mjs +0 -785
  48. package/fesm2022/ojiepermana-angular-navigation-horizontal.mjs.map +0 -1
  49. package/fesm2022/ojiepermana-angular-navigation-vertical.mjs +0 -1568
  50. package/fesm2022/ojiepermana-angular-navigation-vertical.mjs.map +0 -1
  51. package/fesm2022/ojiepermana-angular-shell.mjs +0 -14
  52. package/fesm2022/ojiepermana-angular-shell.mjs.map +0 -1
  53. package/fesm2022/ojiepermana-angular-theme-component.mjs +0 -235
  54. package/fesm2022/ojiepermana-angular-theme-component.mjs.map +0 -1
  55. package/fesm2022/ojiepermana-angular-theme-directive.mjs +0 -29
  56. package/fesm2022/ojiepermana-angular-theme-directive.mjs.map +0 -1
  57. package/fesm2022/ojiepermana-angular-theme-service.mjs +0 -241
  58. package/fesm2022/ojiepermana-angular-theme-service.mjs.map +0 -1
  59. package/layout/README.md +0 -144
  60. package/navigation/README.md +0 -215
  61. package/shell/README.md +0 -37
  62. package/styles/index.css +0 -2
  63. package/styles/resets.css +0 -22
  64. package/theme/README.md +0 -379
  65. package/theme/styles/adapters/material-ui/index.css +0 -205
  66. package/theme/styles/layout/horizontal.css +0 -109
  67. package/theme/styles/layout/index.css +0 -19
  68. package/theme/styles/layout/vertical.css +0 -75
  69. package/theme/styles/modes/dark.css +0 -84
  70. package/theme/styles/presets/colors/blue.css +0 -45
  71. package/theme/styles/presets/colors/brand.css +0 -52
  72. package/theme/styles/presets/colors/cyan.css +0 -45
  73. package/theme/styles/presets/colors/green.css +0 -45
  74. package/theme/styles/presets/colors/index.css +0 -7
  75. package/theme/styles/presets/colors/orange.css +0 -45
  76. package/theme/styles/presets/colors/purple.css +0 -45
  77. package/theme/styles/presets/colors/red.css +0 -45
  78. package/theme/styles/presets/styles/flat.css +0 -61
  79. package/theme/styles/presets/styles/glass.css +0 -28
  80. package/theme/styles/presets/styles/index.css +0 -2
  81. package/theme/styles/roles/index.css +0 -67
  82. package/theme/styles/tokens/foundation.css +0 -136
  83. package/theme/styles/tokens/semantic.css +0 -87
  84. package/theme/styles/utilities/index.css +0 -88
  85. package/types/ojiepermana-angular-internal.d.ts +0 -89
  86. package/types/ojiepermana-angular-navigation-horizontal.d.ts +0 -77
  87. package/types/ojiepermana-angular-navigation-vertical.d.ts +0 -260
  88. package/types/ojiepermana-angular-shell.d.ts +0 -12
  89. package/types/ojiepermana-angular-theme-component.d.ts +0 -46
  90. package/types/ojiepermana-angular-theme-directive.d.ts +0 -10
  91. package/types/ojiepermana-angular-theme-service.d.ts +0 -68
@@ -1,2 +1,171 @@
1
+ import * as _angular_core from '@angular/core';
2
+ import { InjectionToken, Provider, EnvironmentProviders } from '@angular/core';
1
3
 
2
- export { };
4
+ declare const MODES: readonly ["light", "dark"];
5
+ type ThemeMode = (typeof MODES)[number];
6
+ declare const COLOR_SCHEMES: readonly ["light", "dark", "system"];
7
+ type ColorScheme = (typeof COLOR_SCHEMES)[number];
8
+ declare const COLORS: readonly ["blue", "red", "green", "purple", "amber"];
9
+ type ThemeColor = (typeof COLORS)[number];
10
+ declare const STYLES: readonly ["default", "sharp", "brutal", "soft"];
11
+ type ThemeStyle = (typeof STYLES)[number];
12
+ declare const BRANDS: readonly ["etos"];
13
+ type ThemeBrand = (typeof BRANDS)[number];
14
+ interface ThemeConfig {
15
+ readonly mode: ThemeMode;
16
+ readonly brand: ThemeBrand | null;
17
+ readonly color: ThemeColor;
18
+ readonly style: ThemeStyle;
19
+ }
20
+ interface MaterialThemeConfig {
21
+ /** Initial mode preference. Supports `system` for first-visit OS detection. */
22
+ readonly mode?: ColorScheme;
23
+ /** Initial brand bundle. When set, it replaces the explicit color and style layers. */
24
+ readonly brand?: ThemeBrand | null;
25
+ /** Alias for `brand` to match the persisted `theme-brand` setting. */
26
+ readonly 'theme-brand'?: ThemeBrand | null;
27
+ /** Initial brand color layer. */
28
+ readonly color?: ThemeColor;
29
+ /** Initial style personality layer. */
30
+ readonly style?: ThemeStyle;
31
+ /** @deprecated Use `mode` instead. */
32
+ readonly defaultMode?: ColorScheme;
33
+ /** Default brand bundle. When set, it replaces the explicit color and style layers. */
34
+ readonly defaultBrand?: ThemeBrand | null;
35
+ /** @deprecated Use `color` instead. */
36
+ readonly defaultColor?: ThemeColor;
37
+ /** @deprecated Use `style` instead. */
38
+ readonly defaultStyle?: ThemeStyle;
39
+ /** @deprecated Use `defaultMode` instead. */
40
+ readonly defaultScheme?: ColorScheme;
41
+ /** @deprecated Use `defaultColor` instead. */
42
+ readonly defaultTheme?: ThemeColor | string;
43
+ /** @deprecated Use `modeStorageKey` instead. */
44
+ readonly storageKey?: string | null;
45
+ /** @deprecated Use `modeStorageKey` instead. */
46
+ readonly schemeStorageKey?: string | null;
47
+ /** @deprecated Use `colorStorageKey` instead. */
48
+ readonly themeStorageKey?: string | null;
49
+ /** localStorage key used to persist the mode preference. Set to `null` to disable persistence. */
50
+ readonly modeStorageKey?: string | null;
51
+ /** localStorage key used to persist the brand bundle. Set to `null` to disable persistence. */
52
+ readonly brandStorageKey?: string | null;
53
+ /** localStorage key used to persist the color layer. Set to `null` to disable persistence. */
54
+ readonly colorStorageKey?: string | null;
55
+ /** localStorage key used to persist the style layer. Set to `null` to disable persistence. */
56
+ readonly styleStorageKey?: string | null;
57
+ }
58
+ interface ResolvedMaterialThemeConfig {
59
+ readonly defaultMode: ColorScheme;
60
+ readonly defaultBrand: ThemeBrand | null;
61
+ readonly defaultColor: ThemeColor;
62
+ readonly defaultStyle: ThemeStyle;
63
+ readonly modeStorageKey: string | null;
64
+ readonly brandStorageKey: string | null;
65
+ readonly colorStorageKey: string | null;
66
+ readonly styleStorageKey: string | null;
67
+ }
68
+ declare const MATERIAL_THEME_CONFIG: InjectionToken<MaterialThemeConfig>;
69
+ declare const DEFAULT_MATERIAL_THEME_CONFIG: ResolvedMaterialThemeConfig;
70
+ declare function isColorScheme(value: string | null | undefined): value is ColorScheme;
71
+ declare function isThemeColor(value: string | null | undefined): value is ThemeColor;
72
+ declare function isThemeStyle(value: string | null | undefined): value is ThemeStyle;
73
+ declare function isThemeBrand(value: string | null | undefined): value is ThemeBrand;
74
+
75
+ declare class ThemeService {
76
+ private readonly document;
77
+ private readonly destroyRef;
78
+ private readonly config;
79
+ private readonly initialBrand;
80
+ private readonly _modePreference;
81
+ private readonly _brand;
82
+ private readonly _color;
83
+ private readonly _style;
84
+ private readonly _systemPrefersDark;
85
+ readonly scheme: _angular_core.Signal<"light" | "dark" | "system">;
86
+ readonly brand: _angular_core.Signal<"etos" | null>;
87
+ readonly color: _angular_core.Signal<"blue" | "red" | "green" | "purple" | "amber">;
88
+ readonly theme: _angular_core.Signal<"blue" | "red" | "green" | "purple" | "amber">;
89
+ readonly style: _angular_core.Signal<"default" | "sharp" | "brutal" | "soft">;
90
+ readonly mode: _angular_core.Signal<"light" | "dark">;
91
+ readonly snapshot: _angular_core.Signal<ThemeConfig>;
92
+ readonly isDark: _angular_core.Signal<boolean>;
93
+ constructor();
94
+ setMode(mode: ThemeMode): void;
95
+ setScheme(scheme: ColorScheme): void;
96
+ setBrand(brand: ThemeBrand | null): void;
97
+ setColor(color: ThemeColor): void;
98
+ setTheme(theme: ThemeColor | string): void;
99
+ setStyle(style: ThemeStyle): void;
100
+ setAll(config: Partial<ThemeConfig> & {
101
+ readonly scheme?: ColorScheme;
102
+ }): void;
103
+ toggleScheme(): void;
104
+ toggleMode(): void;
105
+ reset(): void;
106
+ private resolveConfig;
107
+ private resolveMode;
108
+ private prefersDark;
109
+ private watchSystemScheme;
110
+ private readPersistedMode;
111
+ private readPersistedBrand;
112
+ private readPersistedColor;
113
+ private readPersistedStyle;
114
+ private persistMode;
115
+ private persistBrand;
116
+ private persistColor;
117
+ private persistStyle;
118
+ private clearPersistedBrand;
119
+ private clearPersistedColor;
120
+ private clearPersistedStyle;
121
+ private clearPersistedItem;
122
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThemeService, never>;
123
+ static ɵprov: _angular_core.ɵɵInjectableDeclaration<ThemeService>;
124
+ }
125
+
126
+ /**
127
+ * Opaque feature unit consumed by {@link provideMaterialTheme}. Mirrors
128
+ * Angular's router/http feature pattern so add-ons can be composed without
129
+ * widening the primary provider signature.
130
+ */
131
+ interface MaterialThemeFeature {
132
+ readonly providers: Provider[];
133
+ }
134
+ /**
135
+ * Bootstrap the shared theme for any `@ojiepermana/angular/*` entry point.
136
+ *
137
+ * By default wires up the theme config token and eagerly initializes `ThemeService`
138
+ * so root theme attributes are applied during bootstrap. Opt in
139
+ * to Angular Material defaults (ripple / form-field) via
140
+ * {@link withMaterialDefaults}.
141
+ * Supports shorthand `mode`, `color`, and `style` config keys.
142
+ *
143
+ * @example
144
+ * export const appConfig: ApplicationConfig = {
145
+ * providers: [
146
+ * provideAnimations(),
147
+ * provideMaterialTheme(
148
+ * {
149
+ * mode: 'system',
150
+ * color: 'blue',
151
+ * style: 'soft',
152
+ * },
153
+ * withMaterialDefaults(),
154
+ * ),
155
+ * ],
156
+ * };
157
+ */
158
+ declare function provideMaterialTheme(config?: MaterialThemeConfig, ...features: MaterialThemeFeature[]): EnvironmentProviders;
159
+ /**
160
+ * Opt-in Angular Material defaults tuned for the shared theme layer:
161
+ *
162
+ * - Disables the global Material ripple.
163
+ * - Forces `appearance: 'outline'` + `subscriptSizing: 'dynamic'` on every
164
+ * `mat-form-field`.
165
+ *
166
+ * Only apply when your app actually renders Angular Material components.
167
+ */
168
+ declare function withMaterialDefaults(): MaterialThemeFeature;
169
+
170
+ export { BRANDS, COLORS, COLOR_SCHEMES, DEFAULT_MATERIAL_THEME_CONFIG, MATERIAL_THEME_CONFIG, MODES, STYLES, ThemeService, isColorScheme, isThemeBrand, isThemeColor, isThemeStyle, provideMaterialTheme, withMaterialDefaults };
171
+ export type { ColorScheme, MaterialThemeConfig, MaterialThemeFeature, ResolvedMaterialThemeConfig, ThemeBrand, ThemeColor, ThemeConfig, ThemeMode, ThemeStyle };
@@ -1,2 +1,3 @@
1
+ declare const MATERIAL_VERSION = "0.0.1";
1
2
 
2
- export { };
3
+ export { MATERIAL_VERSION };
@@ -1,473 +0,0 @@
1
- import { provideLucideConfig, icons, LucideDynamicIcon } from '@lucide/angular';
2
- import * as i0 from '@angular/core';
3
- import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, forwardRef } from '@angular/core';
4
- import { NgTemplateOutlet } from '@angular/common';
5
- import { getNavigationChildren, hasNavigationChildren, shouldRenderNavigationItem } from '@ojiepermana/angular/navigation';
6
-
7
- const libraryLucideConfigProvider = provideLucideConfig({
8
- absoluteStrokeWidth: true,
9
- strokeWidth: 1.35,
10
- });
11
-
12
- class LocalStorageStateAdapter {
13
- config;
14
- constructor(config) {
15
- this.config = config;
16
- }
17
- clear(axis) {
18
- if (!this.config.isBrowser || !this.config.storage) {
19
- return;
20
- }
21
- this.config.storage.removeItem(this.key(axis));
22
- this.config.storage.removeItem(this.legacyKey(axis));
23
- }
24
- persist(axis, value) {
25
- if (!this.config.isBrowser || !this.config.storage) {
26
- return;
27
- }
28
- this.config.storage.setItem(this.key(axis), value);
29
- this.config.storage.removeItem(this.legacyKey(axis));
30
- }
31
- read(axis, fallback, isValid) {
32
- if (!this.config.isBrowser || !this.config.storage) {
33
- return fallback;
34
- }
35
- const storedValue = this.config.storage.getItem(this.key(axis));
36
- if (storedValue && isValid(storedValue)) {
37
- return storedValue;
38
- }
39
- const legacyValue = this.config.storage.getItem(this.legacyKey(axis));
40
- if (legacyValue && isValid(legacyValue)) {
41
- this.config.storage.setItem(this.key(axis), legacyValue);
42
- this.config.storage.removeItem(this.legacyKey(axis));
43
- return legacyValue;
44
- }
45
- return fallback;
46
- }
47
- key(axis) {
48
- return this.config.keys[axis];
49
- }
50
- legacyKey(axis) {
51
- return `${this.config.legacyPrefix}:${axis}`;
52
- }
53
- }
54
-
55
- const navigationLucideIconRegistry = buildNavigationLucideIconRegistry();
56
- function buildNavigationLucideIconRegistry() {
57
- const registry = new Map();
58
- for (const icon of Object.values(icons)) {
59
- registry.set(icon.icon.name, icon);
60
- for (const alias of icon.icon.aliases ?? []) {
61
- registry.set(alias, icon);
62
- }
63
- }
64
- return registry;
65
- }
66
- class NavigationItemContent {
67
- item = input.required(...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
68
- level = input(0, ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
69
- variant = input('horizontal', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
70
- resolvedIcon = computed(() => {
71
- const iconName = this.item().icon;
72
- return iconName ? (navigationLucideIconRegistry.get(iconName) ?? null) : null;
73
- }, ...(ngDevMode ? [{ debugName: "resolvedIcon" }] : /* istanbul ignore next */ []));
74
- horizontalIconClass = computed(() => this.joinClasses('horizontal-navigation-item-icon', this.item().classes?.icon), ...(ngDevMode ? [{ debugName: "horizontalIconClass" }] : /* istanbul ignore next */ []));
75
- verticalIconClass = computed(() => this.joinClasses('kit-navigation-item-icon', this.item().classes?.icon), ...(ngDevMode ? [{ debugName: "verticalIconClass" }] : /* istanbul ignore next */ []));
76
- horizontalTitleClass = computed(() => this.joinClasses('horizontal-navigation-item-label', this.item().classes?.title), ...(ngDevMode ? [{ debugName: "horizontalTitleClass" }] : /* istanbul ignore next */ []));
77
- titleClass = computed(() => this.item().classes?.title ?? null, ...(ngDevMode ? [{ debugName: "titleClass" }] : /* istanbul ignore next */ []));
78
- subtitleClass = computed(() => this.item().classes?.subtitle ?? null, ...(ngDevMode ? [{ debugName: "subtitleClass" }] : /* istanbul ignore next */ []));
79
- horizontalBadgeClass = computed(() => this.joinClasses('horizontal-navigation-item-badge', !this.item().badge?.classes ? 'bg-primary text-primary-foreground' : null, this.item().badge?.classes), ...(ngDevMode ? [{ debugName: "horizontalBadgeClass" }] : /* istanbul ignore next */ []));
80
- verticalBadgeClass = computed(() => this.joinClasses('kit-navigation-item-badge-content', this.item().badge?.classes), ...(ngDevMode ? [{ debugName: "verticalBadgeClass" }] : /* istanbul ignore next */ []));
81
- titleContainerClass = computed(() => this.variant() === 'vertical-group' ? 'kit-navigation-group-title' : 'kit-navigation-item-title', ...(ngDevMode ? [{ debugName: "titleContainerClass" }] : /* istanbul ignore next */ []));
82
- subtitleContainerClass = computed(() => this.variant() === 'vertical-group' ? 'kit-navigation-group-subtitle' : 'kit-navigation-item-subtitle', ...(ngDevMode ? [{ debugName: "subtitleContainerClass" }] : /* istanbul ignore next */ []));
83
- joinClasses(...classNames) {
84
- const value = classNames.filter((className) => !!className).join(' ');
85
- return value || null;
86
- }
87
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NavigationItemContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
88
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: NavigationItemContent, isStandalone: true, selector: "navigation-item-content", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, providers: [libraryLucideConfigProvider], ngImport: i0, template: `
89
- @if (variant() === 'horizontal') {
90
- <span class="horizontal-navigation-item-body">
91
- <span
92
- class="horizontal-navigation-item-leading"
93
- [class.horizontal-navigation-item-leading--nested]="level() > 0">
94
- @if (resolvedIcon(); as icon) {
95
- <svg
96
- [lucideIcon]="icon"
97
- [absoluteStrokeWidth]="true"
98
- [attr.class]="horizontalIconClass()"
99
- aria-hidden="true"></svg>
100
- }
101
- <span [attr.class]="horizontalTitleClass()">
102
- {{ item().title }}
103
- </span>
104
- </span>
105
-
106
- @if (item().badge?.title) {
107
- <span [attr.class]="horizontalBadgeClass()">
108
- {{ item().badge?.title }}
109
- </span>
110
- }
111
- </span>
112
- } @else {
113
- <span class="kit-navigation-item-content">
114
- @if (resolvedIcon(); as icon) {
115
- <svg
116
- [lucideIcon]="icon"
117
- [absoluteStrokeWidth]="true"
118
- [attr.class]="verticalIconClass()"
119
- [size]="18"
120
- aria-hidden="true"></svg>
121
- }
122
-
123
- <div class="kit-navigation-item-title-wrapper">
124
- <div [class]="titleContainerClass()">
125
- <span [attr.class]="titleClass()">
126
- {{ item().title }}
127
- </span>
128
- </div>
129
-
130
- @if (item().subtitle) {
131
- <div [class]="subtitleContainerClass()">
132
- <span [attr.class]="subtitleClass()">
133
- {{ item().subtitle }}
134
- </span>
135
- </div>
136
- }
137
- </div>
138
-
139
- @if (item().badge?.title) {
140
- <div class="kit-navigation-item-badge">
141
- <div [attr.class]="verticalBadgeClass()">
142
- {{ item().badge?.title }}
143
- </div>
144
- </div>
145
- }
146
- </span>
147
- }
148
- `, isInline: true, styles: [":host{display:contents}.kit-navigation-item-content{display:flex;align-items:center;width:100%;min-width:0}.kit-navigation-item-title-wrapper{display:flex;flex:1 1 auto;min-width:0;flex-direction:column}.kit-navigation-item-title,.kit-navigation-group-title,.kit-navigation-item-subtitle,.kit-navigation-group-subtitle{min-width:0}\n"], dependencies: [{ kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
149
- }
150
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NavigationItemContent, decorators: [{
151
- type: Component,
152
- args: [{ selector: 'navigation-item-content', template: `
153
- @if (variant() === 'horizontal') {
154
- <span class="horizontal-navigation-item-body">
155
- <span
156
- class="horizontal-navigation-item-leading"
157
- [class.horizontal-navigation-item-leading--nested]="level() > 0">
158
- @if (resolvedIcon(); as icon) {
159
- <svg
160
- [lucideIcon]="icon"
161
- [absoluteStrokeWidth]="true"
162
- [attr.class]="horizontalIconClass()"
163
- aria-hidden="true"></svg>
164
- }
165
- <span [attr.class]="horizontalTitleClass()">
166
- {{ item().title }}
167
- </span>
168
- </span>
169
-
170
- @if (item().badge?.title) {
171
- <span [attr.class]="horizontalBadgeClass()">
172
- {{ item().badge?.title }}
173
- </span>
174
- }
175
- </span>
176
- } @else {
177
- <span class="kit-navigation-item-content">
178
- @if (resolvedIcon(); as icon) {
179
- <svg
180
- [lucideIcon]="icon"
181
- [absoluteStrokeWidth]="true"
182
- [attr.class]="verticalIconClass()"
183
- [size]="18"
184
- aria-hidden="true"></svg>
185
- }
186
-
187
- <div class="kit-navigation-item-title-wrapper">
188
- <div [class]="titleContainerClass()">
189
- <span [attr.class]="titleClass()">
190
- {{ item().title }}
191
- </span>
192
- </div>
193
-
194
- @if (item().subtitle) {
195
- <div [class]="subtitleContainerClass()">
196
- <span [attr.class]="subtitleClass()">
197
- {{ item().subtitle }}
198
- </span>
199
- </div>
200
- }
201
- </div>
202
-
203
- @if (item().badge?.title) {
204
- <div class="kit-navigation-item-badge">
205
- <div [attr.class]="verticalBadgeClass()">
206
- {{ item().badge?.title }}
207
- </div>
208
- </div>
209
- }
210
- </span>
211
- }
212
- `, imports: [LucideDynamicIcon], providers: [libraryLucideConfigProvider], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [":host{display:contents}.kit-navigation-item-content{display:flex;align-items:center;width:100%;min-width:0}.kit-navigation-item-title-wrapper{display:flex;flex:1 1 auto;min-width:0;flex-direction:column}.kit-navigation-item-title,.kit-navigation-group-title,.kit-navigation-item-subtitle,.kit-navigation-group-subtitle{min-width:0}\n"] }]
213
- }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
214
-
215
- function trackNavigationTreeItem(index, item) {
216
- return item.id || item.title || index;
217
- }
218
- function getNavigationTreePathKey(parentKey, item) {
219
- const key = item.id || item.title;
220
- if (!key) {
221
- return parentKey;
222
- }
223
- return `${parentKey}/${key}`;
224
- }
225
- function isNavigationTreeItemExpanded(expandedByParent, parentKey, item) {
226
- return expandedByParent[parentKey] === getNavigationTreePathKey(parentKey, item);
227
- }
228
- function toggleNavigationTreeItemExpanded(expandedByParent, parentKey, item) {
229
- const key = getNavigationTreePathKey(parentKey, item);
230
- if (expandedByParent[parentKey] === key) {
231
- const next = { ...expandedByParent };
232
- delete next[parentKey];
233
- return next;
234
- }
235
- return {
236
- ...expandedByParent,
237
- [parentKey]: key,
238
- };
239
- }
240
- function hasActiveNavigationDescendant(item, isItemActive) {
241
- for (const child of getNavigationChildren(item)) {
242
- if (isItemActive(child)) {
243
- return true;
244
- }
245
- if (hasNavigationChildren(child) && hasActiveNavigationDescendant(child, isItemActive)) {
246
- return true;
247
- }
248
- }
249
- return false;
250
- }
251
- function isNavigationTreeDescendant(parent, item) {
252
- for (const child of getNavigationChildren(parent)) {
253
- if (child === item) {
254
- return true;
255
- }
256
- if (hasNavigationChildren(child) && isNavigationTreeDescendant(child, item)) {
257
- return true;
258
- }
259
- }
260
- return false;
261
- }
262
-
263
- class NavigationTreeOutlet {
264
- items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
265
- level = input(0, ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
266
- parentKey = input('root', ...(ngDevMode ? [{ debugName: "parentKey" }] : /* istanbul ignore next */ []));
267
- data = input(null, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
268
- branchTemplate = input.required(...(ngDevMode ? [{ debugName: "branchTemplate" }] : /* istanbul ignore next */ []));
269
- leafTemplate = input.required(...(ngDevMode ? [{ debugName: "leafTemplate" }] : /* istanbul ignore next */ []));
270
- groupTemplate = input.required(...(ngDevMode ? [{ debugName: "groupTemplate" }] : /* istanbul ignore next */ []));
271
- dividerTemplate = input(null, ...(ngDevMode ? [{ debugName: "dividerTemplate" }] : /* istanbul ignore next */ []));
272
- spacerTemplate = input(null, ...(ngDevMode ? [{ debugName: "spacerTemplate" }] : /* istanbul ignore next */ []));
273
- trackByFn = input(trackNavigationTreeItem, ...(ngDevMode ? [{ debugName: "trackByFn" }] : /* istanbul ignore next */ []));
274
- shouldRenderItemFn = input(shouldRenderNavigationItem, ...(ngDevMode ? [{ debugName: "shouldRenderItemFn" }] : /* istanbul ignore next */ []));
275
- hasChildrenFn = input(hasNavigationChildren, ...(ngDevMode ? [{ debugName: "hasChildrenFn" }] : /* istanbul ignore next */ []));
276
- resolveParentKeyFn = input(getNavigationTreePathKey, ...(ngDevMode ? [{ debugName: "resolveParentKeyFn" }] : /* istanbul ignore next */ []));
277
- trackItem(index, item) {
278
- return this.trackByFn()(index, item);
279
- }
280
- shouldRender(item) {
281
- return this.shouldRenderItemFn()(item);
282
- }
283
- hasChildren(item) {
284
- return this.hasChildrenFn()(item);
285
- }
286
- resolveParentKey(parentKey, item) {
287
- return this.resolveParentKeyFn()(parentKey, item);
288
- }
289
- templateContext(item, isLast) {
290
- return {
291
- $implicit: item,
292
- level: this.level(),
293
- parentKey: this.parentKey(),
294
- isLast,
295
- data: this.data(),
296
- };
297
- }
298
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NavigationTreeOutlet, deps: [], target: i0.ɵɵFactoryTarget.Component });
299
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: NavigationTreeOutlet, isStandalone: true, selector: "navigation-tree-outlet", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, parentKey: { classPropertyName: "parentKey", publicName: "parentKey", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, branchTemplate: { classPropertyName: "branchTemplate", publicName: "branchTemplate", isSignal: true, isRequired: true, transformFunction: null }, leafTemplate: { classPropertyName: "leafTemplate", publicName: "leafTemplate", isSignal: true, isRequired: true, transformFunction: null }, groupTemplate: { classPropertyName: "groupTemplate", publicName: "groupTemplate", isSignal: true, isRequired: true, transformFunction: null }, dividerTemplate: { classPropertyName: "dividerTemplate", publicName: "dividerTemplate", isSignal: true, isRequired: false, transformFunction: null }, spacerTemplate: { classPropertyName: "spacerTemplate", publicName: "spacerTemplate", isSignal: true, isRequired: false, transformFunction: null }, trackByFn: { classPropertyName: "trackByFn", publicName: "trackByFn", isSignal: true, isRequired: false, transformFunction: null }, shouldRenderItemFn: { classPropertyName: "shouldRenderItemFn", publicName: "shouldRenderItemFn", isSignal: true, isRequired: false, transformFunction: null }, hasChildrenFn: { classPropertyName: "hasChildrenFn", publicName: "hasChildrenFn", isSignal: true, isRequired: false, transformFunction: null }, resolveParentKeyFn: { classPropertyName: "resolveParentKeyFn", publicName: "resolveParentKeyFn", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
300
- @for (child of items(); track trackItem($index, child); let isLast = $last) {
301
- @if (shouldRender(child)) {
302
- @switch (child.type) {
303
- @case ('basic') {
304
- <ng-container
305
- [ngTemplateOutlet]="leafTemplate()"
306
- [ngTemplateOutletContext]="templateContext(child, isLast)"></ng-container>
307
- }
308
-
309
- @case ('aside') {
310
- @if (hasChildren(child)) {
311
- <ng-container
312
- [ngTemplateOutlet]="branchTemplate()"
313
- [ngTemplateOutletContext]="templateContext(child, isLast)"></ng-container>
314
- } @else {
315
- <ng-container
316
- [ngTemplateOutlet]="leafTemplate()"
317
- [ngTemplateOutletContext]="templateContext(child, isLast)"></ng-container>
318
- }
319
- }
320
-
321
- @case ('collapsable') {
322
- @if (hasChildren(child)) {
323
- <ng-container
324
- [ngTemplateOutlet]="branchTemplate()"
325
- [ngTemplateOutletContext]="templateContext(child, isLast)"></ng-container>
326
- } @else {
327
- <ng-container
328
- [ngTemplateOutlet]="leafTemplate()"
329
- [ngTemplateOutletContext]="templateContext(child, isLast)"></ng-container>
330
- }
331
- }
332
-
333
- @case ('group') {
334
- @if (hasChildren(child)) {
335
- <ng-container
336
- [ngTemplateOutlet]="groupTemplate()"
337
- [ngTemplateOutletContext]="templateContext(child, isLast)"></ng-container>
338
- <navigation-tree-outlet
339
- [items]="child.children || []"
340
- [level]="level() + 1"
341
- [parentKey]="resolveParentKey(parentKey(), child)"
342
- [data]="data()"
343
- [branchTemplate]="branchTemplate()"
344
- [leafTemplate]="leafTemplate()"
345
- [groupTemplate]="groupTemplate()"
346
- [dividerTemplate]="dividerTemplate()"
347
- [spacerTemplate]="spacerTemplate()"
348
- [trackByFn]="trackByFn()"
349
- [shouldRenderItemFn]="shouldRenderItemFn()"
350
- [hasChildrenFn]="hasChildrenFn()"
351
- [resolveParentKeyFn]="resolveParentKeyFn()" />
352
- }
353
- }
354
-
355
- @case ('divider') {
356
- @if (dividerTemplate()) {
357
- <ng-container
358
- [ngTemplateOutlet]="dividerTemplate()"
359
- [ngTemplateOutletContext]="templateContext(child, isLast)"></ng-container>
360
- }
361
- }
362
-
363
- @case ('spacer') {
364
- @if (spacerTemplate()) {
365
- <ng-container
366
- [ngTemplateOutlet]="spacerTemplate()"
367
- [ngTemplateOutletContext]="templateContext(child, isLast)"></ng-container>
368
- }
369
- }
370
-
371
- @default {
372
- <ng-container
373
- [ngTemplateOutlet]="leafTemplate()"
374
- [ngTemplateOutletContext]="templateContext(child, isLast)"></ng-container>
375
- }
376
- }
377
- }
378
- }
379
- `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => NavigationTreeOutlet), selector: "navigation-tree-outlet", inputs: ["items", "level", "parentKey", "data", "branchTemplate", "leafTemplate", "groupTemplate", "dividerTemplate", "spacerTemplate", "trackByFn", "shouldRenderItemFn", "hasChildrenFn", "resolveParentKeyFn"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
380
- }
381
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NavigationTreeOutlet, decorators: [{
382
- type: Component,
383
- args: [{ selector: 'navigation-tree-outlet', template: `
384
- @for (child of items(); track trackItem($index, child); let isLast = $last) {
385
- @if (shouldRender(child)) {
386
- @switch (child.type) {
387
- @case ('basic') {
388
- <ng-container
389
- [ngTemplateOutlet]="leafTemplate()"
390
- [ngTemplateOutletContext]="templateContext(child, isLast)"></ng-container>
391
- }
392
-
393
- @case ('aside') {
394
- @if (hasChildren(child)) {
395
- <ng-container
396
- [ngTemplateOutlet]="branchTemplate()"
397
- [ngTemplateOutletContext]="templateContext(child, isLast)"></ng-container>
398
- } @else {
399
- <ng-container
400
- [ngTemplateOutlet]="leafTemplate()"
401
- [ngTemplateOutletContext]="templateContext(child, isLast)"></ng-container>
402
- }
403
- }
404
-
405
- @case ('collapsable') {
406
- @if (hasChildren(child)) {
407
- <ng-container
408
- [ngTemplateOutlet]="branchTemplate()"
409
- [ngTemplateOutletContext]="templateContext(child, isLast)"></ng-container>
410
- } @else {
411
- <ng-container
412
- [ngTemplateOutlet]="leafTemplate()"
413
- [ngTemplateOutletContext]="templateContext(child, isLast)"></ng-container>
414
- }
415
- }
416
-
417
- @case ('group') {
418
- @if (hasChildren(child)) {
419
- <ng-container
420
- [ngTemplateOutlet]="groupTemplate()"
421
- [ngTemplateOutletContext]="templateContext(child, isLast)"></ng-container>
422
- <navigation-tree-outlet
423
- [items]="child.children || []"
424
- [level]="level() + 1"
425
- [parentKey]="resolveParentKey(parentKey(), child)"
426
- [data]="data()"
427
- [branchTemplate]="branchTemplate()"
428
- [leafTemplate]="leafTemplate()"
429
- [groupTemplate]="groupTemplate()"
430
- [dividerTemplate]="dividerTemplate()"
431
- [spacerTemplate]="spacerTemplate()"
432
- [trackByFn]="trackByFn()"
433
- [shouldRenderItemFn]="shouldRenderItemFn()"
434
- [hasChildrenFn]="hasChildrenFn()"
435
- [resolveParentKeyFn]="resolveParentKeyFn()" />
436
- }
437
- }
438
-
439
- @case ('divider') {
440
- @if (dividerTemplate()) {
441
- <ng-container
442
- [ngTemplateOutlet]="dividerTemplate()"
443
- [ngTemplateOutletContext]="templateContext(child, isLast)"></ng-container>
444
- }
445
- }
446
-
447
- @case ('spacer') {
448
- @if (spacerTemplate()) {
449
- <ng-container
450
- [ngTemplateOutlet]="spacerTemplate()"
451
- [ngTemplateOutletContext]="templateContext(child, isLast)"></ng-container>
452
- }
453
- }
454
-
455
- @default {
456
- <ng-container
457
- [ngTemplateOutlet]="leafTemplate()"
458
- [ngTemplateOutletContext]="templateContext(child, isLast)"></ng-container>
459
- }
460
- }
461
- }
462
- }
463
- `, imports: [NgTemplateOutlet, forwardRef(() => NavigationTreeOutlet)], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [":host{display:block}\n"] }]
464
- }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], parentKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentKey", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], branchTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "branchTemplate", required: true }] }], leafTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "leafTemplate", required: true }] }], groupTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupTemplate", required: true }] }], dividerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "dividerTemplate", required: false }] }], spacerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacerTemplate", required: false }] }], trackByFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByFn", required: false }] }], shouldRenderItemFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldRenderItemFn", required: false }] }], hasChildrenFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasChildrenFn", required: false }] }], resolveParentKeyFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "resolveParentKeyFn", required: false }] }] } });
465
-
466
- /* Internal composition utilities for library entrypoints. Not part of the supported consumer API. */
467
-
468
- /**
469
- * Generated bundle index. Do not edit.
470
- */
471
-
472
- export { LocalStorageStateAdapter, NavigationItemContent, NavigationTreeOutlet, getNavigationTreePathKey, hasActiveNavigationDescendant, isNavigationTreeDescendant, isNavigationTreeItemExpanded, libraryLucideConfigProvider, toggleNavigationTreeItemExpanded, trackNavigationTreeItem };
473
- //# sourceMappingURL=ojiepermana-angular-internal.mjs.map