@ojiepermana/angular-theme 22.0.34 → 22.0.36

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 (61) hide show
  1. package/README.md +38 -19
  2. package/fesm2022/ojiepermana-angular-theme-layout-services.mjs +6 -6
  3. package/fesm2022/ojiepermana-angular-theme-layout-wrapper.mjs +51 -35
  4. package/fesm2022/ojiepermana-angular-theme-layout.mjs +24 -24
  5. package/fesm2022/ojiepermana-angular-theme-page.mjs +24 -24
  6. package/fesm2022/ojiepermana-angular-theme-styles.mjs +359 -56
  7. package/package.json +3 -3
  8. package/styles/README.md +10 -3
  9. package/styles/css/{seasonal/base → base}/tailwind.css +9 -5
  10. package/styles/css/{seasonal/base → base}/theme.css +1 -6
  11. package/styles/css/{seasonal/base → base}/tokens.css +26 -16
  12. package/styles/css/color/amber.css +50 -0
  13. package/styles/css/color/blue.css +50 -0
  14. package/styles/css/color/brand.css +16 -0
  15. package/styles/css/color/cyan.css +50 -0
  16. package/styles/css/color/emerald.css +50 -0
  17. package/styles/css/color/fuchsia.css +50 -0
  18. package/styles/css/color/green.css +50 -0
  19. package/styles/css/color/index.css +19 -0
  20. package/styles/css/color/indigo.css +50 -0
  21. package/styles/css/color/lime.css +50 -0
  22. package/styles/css/color/orange.css +50 -0
  23. package/styles/css/color/pink.css +50 -0
  24. package/styles/css/color/purple.css +50 -0
  25. package/styles/css/color/red.css +50 -0
  26. package/styles/css/color/rose.css +50 -0
  27. package/styles/css/color/sky.css +50 -0
  28. package/styles/css/color/teal.css +50 -0
  29. package/styles/css/color/violet.css +50 -0
  30. package/styles/css/color/yellow.css +50 -0
  31. package/styles/css/index.css +15 -6
  32. package/styles/css/neutral/gray.css +34 -0
  33. package/styles/css/neutral/index.css +11 -0
  34. package/styles/css/neutral/mauve.css +34 -0
  35. package/styles/css/neutral/mist.css +34 -0
  36. package/styles/css/neutral/neutral.css +34 -0
  37. package/styles/css/neutral/olive.css +34 -0
  38. package/styles/css/neutral/slate.css +34 -0
  39. package/styles/css/neutral/stone.css +34 -0
  40. package/styles/css/neutral/taupe.css +34 -0
  41. package/styles/css/neutral/zinc.css +34 -0
  42. package/styles/css/radius/index.css +29 -0
  43. package/styles/css/space/index.css +24 -0
  44. package/types/ojiepermana-angular-theme-layout-wrapper.d.ts +10 -2
  45. package/types/ojiepermana-angular-theme-styles.d.ts +168 -37
  46. package/styles/css/seasonal/ied/package.css +0 -4
  47. package/styles/css/seasonal/ied/theme.css +0 -78
  48. package/styles/css/seasonal/imlek/components.css +0 -87
  49. package/styles/css/seasonal/imlek/package.css +0 -6
  50. package/styles/css/seasonal/imlek/tailwind.css +0 -144
  51. package/styles/css/seasonal/imlek/theme.css +0 -95
  52. package/styles/css/seasonal/imlek/tokens.css +0 -152
  53. package/styles/css/seasonal/index.css +0 -6
  54. package/styles/css/seasonal/natal/package.css +0 -4
  55. package/styles/css/seasonal/natal/theme.css +0 -78
  56. package/styles/css/seasonal/new-year/package.css +0 -4
  57. package/styles/css/seasonal/new-year/theme.css +0 -78
  58. package/styles/css/seasonal/ramadhan/package.css +0 -4
  59. package/styles/css/seasonal/ramadhan/theme.css +0 -78
  60. /package/styles/css/{seasonal/base → base}/components.css +0 -0
  61. /package/styles/css/{seasonal/base → base}/package.css +0 -0
package/README.md CHANGED
@@ -1,8 +1,8 @@
1
1
  # @ojiepermana/angular-theme
2
2
 
3
3
  Theme layer for the `@ojiepermana/angular` design system: a runtime provider
4
- (mode / season), design tokens, and the Tailwind v4 CSS that the components are
5
- styled against.
4
+ (mode / color / neutral / brand), design tokens, and the Tailwind v4 CSS that the
5
+ components are styled against.
6
6
 
7
7
  ```bash
8
8
  bun add @ojiepermana/angular-theme
@@ -11,13 +11,13 @@ bun add @ojiepermana/angular-theme
11
11
 
12
12
  ## Entry points
13
13
 
14
- | Import path | Contents |
15
- | ---------------------------------------- | --------------------------------------------- |
16
- | `@ojiepermana/angular-theme/styles` | `provideUiTheme`, `ThemeModeService`, … |
17
- | `@ojiepermana/angular-theme/layout` | Layout shell building blocks |
18
- | `@ojiepermana/angular-theme/page` | Page-level scaffolding |
19
- | `@ojiepermana/angular-theme/theme.css` | Base tokens + component styles (CSS) |
20
- | `@ojiepermana/angular-theme/styles/css/*`| Raw CSS assets (seasonal themes, Tailwind map)|
14
+ | Import path | Contents |
15
+ | ----------------------------------------- | ------------------------------------------------------- |
16
+ | `@ojiepermana/angular-theme/styles` | `provideUiTheme`, `ThemeModeService`, … |
17
+ | `@ojiepermana/angular-theme/layout` | Layout shell building blocks |
18
+ | `@ojiepermana/angular-theme/page` | Page-level scaffolding |
19
+ | `@ojiepermana/angular-theme/theme.css` | Base tokens + component styles (CSS) |
20
+ | `@ojiepermana/angular-theme/styles/css/*` | Raw CSS assets (color + neutral palettes, Tailwind map) |
21
21
 
22
22
  ## Tailwind v4 setup
23
23
 
@@ -26,9 +26,9 @@ stylesheet:
26
26
 
27
27
  ```css
28
28
  /* styles.css */
29
- @import '@ojiepermana/angular-theme/theme.css'; /* base tokens + component styles */
29
+ @import '@ojiepermana/angular-theme/styles/css/index.css'; /* base + all color + neutral palettes */
30
30
  @import 'tailwindcss';
31
- @import '@ojiepermana/angular-theme/styles/css/seasonal/base/tailwind.css'; /* maps tokens → bg-primary, text-foreground, rounded-md, … */
31
+ @import '@ojiepermana/angular-theme/styles/css/base/tailwind.css'; /* maps tokens → bg-primary, bg-brand, text-foreground, … */
32
32
  ```
33
33
 
34
34
  Requires Tailwind CSS `^4.3.0`.
@@ -39,20 +39,39 @@ Requires Tailwind CSS `^4.3.0`.
39
39
  import { provideUiTheme } from '@ojiepermana/angular-theme/styles';
40
40
 
41
41
  export const appConfig = {
42
- providers: [provideUiTheme({ mode: 'light', season: 'base' })],
42
+ providers: [
43
+ provideUiTheme({
44
+ mode: 'light',
45
+ color: 'base', // accent palette (base, red…rose, brand)
46
+ neutral: 'base', // gray family (base, slate, gray, zinc, …)
47
+ brand: { color: '221 83% 53%', foreground: '0 0% 100%' }, // consumer brand
48
+ }),
49
+ ],
43
50
  };
44
51
  ```
45
52
 
46
53
  - `mode` — bootstraps `ThemeModeService` and persists the default mode.
47
- - `season` — bootstraps `ThemeSeasonService` and persists the default season.
48
- - `seasonalCssUrl` — resolver to lazy-load a season's CSS at runtime instead of
49
- bundling every season up front.
54
+ - `color` — bootstraps `ThemeColorService`; initial accent palette (`<html theme-color>`).
55
+ - `neutral` — initial neutral family (`<html theme-neutral>`); composes with any accent.
56
+ - `brand` — bootstraps `ThemeBrandService`; sets `--brand` / `bg-brand` and the
57
+ `theme-color='brand'` accent preset. Settable at runtime via `setBrand()`.
50
58
 
51
- ### Seasonal themes
59
+ A persisted choice (localStorage `theme-color` / `theme-neutral` / `theme-brand`)
60
+ always wins over the configured default.
52
61
 
53
- `theme.css` bundles only the **base** tokens/components (`index.css`). Seasonal
54
- variants live under `styles/css/seasonal/<season>/package.css` and can be imported
55
- manually, or loaded at runtime via the `seasonalCssUrl` option of `provideUiTheme`.
62
+ ### Color system (FluxUI-style)
63
+
64
+ Two independent axes switch at runtime via attribute selectors on `<html>`:
65
+
66
+ - **accent** (`theme-color`) — `base` (core), `red … rose`, and `brand`. Each
67
+ re-tints the full palette. `base` = no override.
68
+ - **neutral** (`theme-neutral`) — `base` (core), `slate`, `gray`, `zinc`, `neutral`,
69
+ `stone`, `mauve`, `olive`, `mist`, `taupe`. Overrides only the gray family and is
70
+ layered after accent so it wins the shared neutral tokens — letting you pair any
71
+ accent with any neutral.
72
+
73
+ `styles/css/index.css` bundles the core base theme plus every accent and neutral
74
+ palette, so switching needs no runtime CSS loading.
56
75
 
57
76
  ### Material Symbols icons (opt-in)
58
77
 
package/fesm2022/ojiepermana-angular-theme-layout-services.mjs CHANGED
@@ -149,10 +149,10 @@ class LayoutService {
149
149
  getStoredAppearanceOrDefault(fallback) {
150
150
  return this.readStoredAppearance() ?? fallback;
151
151
  }
152
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Service });
153
- static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.2", ngImport: i0, type: LayoutService });
152
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Service });
153
+ static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.3", ngImport: i0, type: LayoutService });
154
154
  }
155
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutService, decorators: [{
155
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutService, decorators: [{
156
156
  type: Service
157
157
  }] });
158
158
 
@@ -311,10 +311,10 @@ class LayoutLoadingService {
311
311
  isBrowser() {
312
312
  return isPlatformBrowser(this.platformId);
313
313
  }
314
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutLoadingService, deps: [], target: i0.ɵɵFactoryTarget.Service });
315
- static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.2", ngImport: i0, type: LayoutLoadingService });
314
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutLoadingService, deps: [], target: i0.ɵɵFactoryTarget.Service });
315
+ static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.3", ngImport: i0, type: LayoutLoadingService });
316
316
  }
317
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutLoadingService, decorators: [{
317
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutLoadingService, decorators: [{
318
318
  type: Service
319
319
  }], ctorParameters: () => [] });
320
320
 
package/fesm2022/ojiepermana-angular-theme-layout-wrapper.mjs CHANGED
@@ -25,15 +25,15 @@ class LayoutBrand {
25
25
  ...(ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []));
26
26
  /** Sembunyikan judul, sisakan inisial saja (dockbar / rail ikon-only). */
27
27
  compact = input(false, { ...(ngDevMode ? { debugName: "compact" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
28
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutBrand, deps: [], target: i0.ɵɵFactoryTarget.Component });
29
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: LayoutBrand, isStandalone: true, selector: "LayoutBrand", inputs: { brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: true, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
28
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutBrand, deps: [], target: i0.ɵɵFactoryTarget.Component });
29
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: LayoutBrand, isStandalone: true, selector: "LayoutBrand", inputs: { brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: true, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
30
30
  <NavigationHeaderInitial [name]="brand().name" [icon]="brand().icon" />
31
31
  @if (!compact()) {
32
32
  <NavigationHeaderTitle [title]="brand().title" [subtitle]="brand().subtitle" />
33
33
  }
34
34
  `, isInline: true, dependencies: [{ kind: "component", type: NavigationHeaderInitialComponent, selector: "NavigationHeaderInitial", inputs: ["name", "src", "initials", "icon", "class"] }, { kind: "component", type: NavigationHeaderTitleComponent, selector: "NavigationHeaderTitle", inputs: ["title", "subtitle", "class"] }] });
35
35
  }
36
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutBrand, decorators: [{
36
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutBrand, decorators: [{
37
37
  type: Component,
38
38
  args: [{
39
39
  selector: 'LayoutBrand',
@@ -67,8 +67,8 @@ class LayoutUser {
67
67
  /** Material symbol untuk tombol logout. */
68
68
  logoutIcon = input('logout', /* @ts-ignore */
69
69
  ...(ngDevMode ? [{ debugName: "logoutIcon" }] : /* istanbul ignore next */ []));
70
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutUser, deps: [], target: i0.ɵɵFactoryTarget.Component });
71
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: LayoutUser, isStandalone: true, selector: "LayoutUser", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: true, transformFunction: null }, detailed: { classPropertyName: "detailed", publicName: "detailed", isSignal: true, isRequired: false, transformFunction: null }, logoutLabel: { classPropertyName: "logoutLabel", publicName: "logoutLabel", isSignal: true, isRequired: false, transformFunction: null }, logoutIcon: { classPropertyName: "logoutIcon", publicName: "logoutIcon", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
70
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutUser, deps: [], target: i0.ɵɵFactoryTarget.Component });
71
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: LayoutUser, isStandalone: true, selector: "LayoutUser", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: true, transformFunction: null }, detailed: { classPropertyName: "detailed", publicName: "detailed", isSignal: true, isRequired: false, transformFunction: null }, logoutLabel: { classPropertyName: "logoutLabel", publicName: "logoutLabel", isSignal: true, isRequired: false, transformFunction: null }, logoutIcon: { classPropertyName: "logoutIcon", publicName: "logoutIcon", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
72
72
  @if (detailed()) {
73
73
  <NavigationFooterInitial [name]="user().name" />
74
74
  <NavigationFooterTitle [title]="user().name" [subtitle]="user().email" />
@@ -86,7 +86,7 @@ class LayoutUser {
86
86
  </NavigationFooterAction>
87
87
  `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: NavigationFooterActionComponent, selector: "NavigationFooterAction", inputs: ["class"] }, { kind: "component", type: NavigationFooterInitialComponent, selector: "NavigationFooterInitial", inputs: ["name", "src", "initials", "icon", "class"] }, { kind: "component", type: NavigationFooterTitleComponent, selector: "NavigationFooterTitle", inputs: ["title", "subtitle", "class"] }] });
88
88
  }
89
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutUser, decorators: [{
89
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutUser, decorators: [{
90
90
  type: Component,
91
91
  args: [{
92
92
  selector: 'LayoutUser',
@@ -129,9 +129,17 @@ class LayoutNavSidebar {
129
129
  ...(ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []));
130
130
  user = input.required(/* @ts-ignore */
131
131
  ...(ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []));
132
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutNavSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
133
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: LayoutNavSidebar, isStandalone: true, selector: "LayoutNavSidebar", inputs: { brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: true, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
134
- <NavigationSidebar nav-sidebar-collapse>
132
+ /** Appearance dari shell (`[appearance]`); menentukan ketebalan border kanan pemisah konten. */
133
+ appearance = input('flat', /* @ts-ignore */
134
+ ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
135
+ /** Border kanan pemisah; ketebalan ikut appearance: `border-rail` 1.5px, `flat` 1px. */
136
+ shellClass = computed(() => this.appearance() === 'border-rail'
137
+ ? 'border-r-[1.5px] border-border'
138
+ : 'border-r border-border', /* @ts-ignore */
139
+ ...(ngDevMode ? [{ debugName: "shellClass" }] : /* istanbul ignore next */ []));
140
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutNavSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
141
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: LayoutNavSidebar, isStandalone: true, selector: "LayoutNavSidebar", inputs: { brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: true, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
142
+ <NavigationSidebar nav-sidebar-collapse [class]="shellClass()">
135
143
  <NavigationHeader>
136
144
  <LayoutBrand [brand]="brand()" />
137
145
  </NavigationHeader>
@@ -141,7 +149,7 @@ class LayoutNavSidebar {
141
149
  </NavigationSidebar>
142
150
  `, isInline: true, dependencies: [{ kind: "component", type: NavigationSidebarComponent, selector: "NavigationSidebar", inputs: ["position", "collapsed", "nav-sidebar-collapse", "previewExpanded", "class"] }, { kind: "component", type: NavigationHeaderComponent, selector: "NavigationHeader", inputs: ["toggle", "class"] }, { kind: "component", type: NavigationFooterComponent, selector: "NavigationFooter", inputs: ["class"] }, { kind: "component", type: LayoutBrand, selector: "LayoutBrand", inputs: ["brand", "compact"] }, { kind: "component", type: LayoutUser, selector: "LayoutUser", inputs: ["user", "detailed", "logoutLabel", "logoutIcon"] }] });
143
151
  }
144
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutNavSidebar, decorators: [{
152
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutNavSidebar, decorators: [{
145
153
  type: Component,
146
154
  args: [{
147
155
  selector: 'LayoutNavSidebar',
@@ -154,7 +162,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
154
162
  ],
155
163
  host: { class: 'contents' },
156
164
  template: `
157
- <NavigationSidebar nav-sidebar-collapse>
165
+ <NavigationSidebar nav-sidebar-collapse [class]="shellClass()">
158
166
  <NavigationHeader>
159
167
  <LayoutBrand [brand]="brand()" />
160
168
  </NavigationHeader>
@@ -164,7 +172,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
164
172
  </NavigationSidebar>
165
173
  `,
166
174
  }]
167
- }], propDecorators: { brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: true }] }], user: [{ type: i0.Input, args: [{ isSignal: true, alias: "user", required: true }] }] } });
175
+ }], propDecorators: { brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: true }] }], user: [{ type: i0.Input, args: [{ isSignal: true, alias: "user", required: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }] } });
168
176
 
169
177
  /**
170
178
  * Tipe nav: rail ikon vertikal (dockbar). Brand compact (inisial saja) + aksi logout.
@@ -175,9 +183,17 @@ class LayoutNavDockbar {
175
183
  ...(ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []));
176
184
  user = input.required(/* @ts-ignore */
177
185
  ...(ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []));
178
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutNavDockbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
179
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: LayoutNavDockbar, isStandalone: true, selector: "LayoutNavDockbar", inputs: { brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: true, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
180
- <NavigationDockbar>
186
+ /** Appearance dari shell (`[appearance]`); menentukan ketebalan border kanan pemisah konten. */
187
+ appearance = input('flat', /* @ts-ignore */
188
+ ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
189
+ /** Border kanan pemisah; ketebalan ikut appearance: `border-rail` 1.5px, `flat` 1px. */
190
+ shellClass = computed(() => this.appearance() === 'border-rail'
191
+ ? 'border-r-[1.5px] border-border'
192
+ : 'border-r border-border', /* @ts-ignore */
193
+ ...(ngDevMode ? [{ debugName: "shellClass" }] : /* istanbul ignore next */ []));
194
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutNavDockbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
195
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: LayoutNavDockbar, isStandalone: true, selector: "LayoutNavDockbar", inputs: { brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: true, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
196
+ <NavigationDockbar [class]="shellClass()">
181
197
  <NavigationHeader>
182
198
  <LayoutBrand [brand]="brand()" compact />
183
199
  </NavigationHeader>
@@ -187,7 +203,7 @@ class LayoutNavDockbar {
187
203
  </NavigationDockbar>
188
204
  `, isInline: true, dependencies: [{ kind: "component", type: NavigationDockbarComponent, selector: "NavigationDockbar", inputs: ["mode", "position", "class"] }, { kind: "component", type: NavigationHeaderComponent, selector: "NavigationHeader", inputs: ["toggle", "class"] }, { kind: "component", type: NavigationFooterComponent, selector: "NavigationFooter", inputs: ["class"] }, { kind: "component", type: LayoutBrand, selector: "LayoutBrand", inputs: ["brand", "compact"] }, { kind: "component", type: LayoutUser, selector: "LayoutUser", inputs: ["user", "detailed", "logoutLabel", "logoutIcon"] }] });
189
205
  }
190
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutNavDockbar, decorators: [{
206
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutNavDockbar, decorators: [{
191
207
  type: Component,
192
208
  args: [{
193
209
  selector: 'LayoutNavDockbar',
@@ -200,7 +216,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
200
216
  ],
201
217
  host: { class: 'contents' },
202
218
  template: `
203
- <NavigationDockbar>
219
+ <NavigationDockbar [class]="shellClass()">
204
220
  <NavigationHeader>
205
221
  <LayoutBrand [brand]="brand()" compact />
206
222
  </NavigationHeader>
@@ -210,7 +226,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
210
226
  </NavigationDockbar>
211
227
  `,
212
228
  }]
213
- }], propDecorators: { brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: true }] }], user: [{ type: i0.Input, args: [{ isSignal: true, alias: "user", required: true }] }] } });
229
+ }], propDecorators: { brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: true }] }], user: [{ type: i0.Input, args: [{ isSignal: true, alias: "user", required: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }] } });
214
230
 
215
231
  /**
216
232
  * Tipe nav: top bar item inline (navbar, horizontal). `appearance` selaras shell
@@ -224,8 +240,8 @@ class LayoutNavNavbar {
224
240
  /** Appearance dari shell (`[nav-appearance]`). */
225
241
  appearance = input('flat', /* @ts-ignore */
226
242
  ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
227
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutNavNavbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
228
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: LayoutNavNavbar, isStandalone: true, selector: "LayoutNavNavbar", inputs: { brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: true, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
243
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutNavNavbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
244
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: LayoutNavNavbar, isStandalone: true, selector: "LayoutNavNavbar", inputs: { brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: true, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
229
245
  <NavigationNavbar [nav-appearance]="appearance()" class="border-b-[1.5px] border-border">
230
246
  <NavigationHeader>
231
247
  <LayoutBrand [brand]="brand()" />
@@ -236,7 +252,7 @@ class LayoutNavNavbar {
236
252
  </NavigationNavbar>
237
253
  `, isInline: true, dependencies: [{ kind: "component", type: NavigationNavbarComponent, selector: "NavigationNavbar", inputs: ["nav-position", "nav-appearance", "class"] }, { kind: "component", type: NavigationHeaderComponent, selector: "NavigationHeader", inputs: ["toggle", "class"] }, { kind: "component", type: NavigationFooterComponent, selector: "NavigationFooter", inputs: ["class"] }, { kind: "component", type: LayoutBrand, selector: "LayoutBrand", inputs: ["brand", "compact"] }, { kind: "component", type: LayoutUser, selector: "LayoutUser", inputs: ["user", "detailed", "logoutLabel", "logoutIcon"] }] });
238
254
  }
239
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutNavNavbar, decorators: [{
255
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutNavNavbar, decorators: [{
240
256
  type: Component,
241
257
  args: [{
242
258
  selector: 'LayoutNavNavbar',
@@ -273,8 +289,8 @@ class LayoutNavFlyout {
273
289
  /** Appearance dari shell (`[nav-appearance]`). */
274
290
  appearance = input('flat', /* @ts-ignore */
275
291
  ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
276
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutNavFlyout, deps: [], target: i0.ɵɵFactoryTarget.Component });
277
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: LayoutNavFlyout, isStandalone: true, selector: "LayoutNavFlyout", inputs: { brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: true, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
292
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutNavFlyout, deps: [], target: i0.ɵɵFactoryTarget.Component });
293
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: LayoutNavFlyout, isStandalone: true, selector: "LayoutNavFlyout", inputs: { brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: true, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
278
294
  <NavigationFlyout
279
295
  [nav-appearance]="appearance()"
280
296
  label="Menu"
@@ -290,7 +306,7 @@ class LayoutNavFlyout {
290
306
  </NavigationFlyout>
291
307
  `, isInline: true, dependencies: [{ kind: "component", type: NavigationFlyoutComponent, selector: "NavigationFlyout", inputs: ["label", "icon", "icon-only", "icon-position", "trigger-variant", "trigger-floating", "trigger-class", "nav-position", "nav-appearance", "class"] }, { kind: "component", type: NavigationHeaderComponent, selector: "NavigationHeader", inputs: ["toggle", "class"] }, { kind: "component", type: NavigationFooterComponent, selector: "NavigationFooter", inputs: ["class"] }, { kind: "component", type: LayoutBrand, selector: "LayoutBrand", inputs: ["brand", "compact"] }, { kind: "component", type: LayoutUser, selector: "LayoutUser", inputs: ["user", "detailed", "logoutLabel", "logoutIcon"] }] });
292
308
  }
293
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutNavFlyout, decorators: [{
309
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutNavFlyout, decorators: [{
294
310
  type: Component,
295
311
  args: [{
296
312
  selector: 'LayoutNavFlyout',
@@ -328,8 +344,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
328
344
  class LayoutNavMinimal {
329
345
  brand = input.required(/* @ts-ignore */
330
346
  ...(ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []));
331
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutNavMinimal, deps: [], target: i0.ɵɵFactoryTarget.Component });
332
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: LayoutNavMinimal, isStandalone: true, selector: "LayoutNavMinimal", inputs: { brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
347
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutNavMinimal, deps: [], target: i0.ɵɵFactoryTarget.Component });
348
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: LayoutNavMinimal, isStandalone: true, selector: "LayoutNavMinimal", inputs: { brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
333
349
  <NavigationSidebar>
334
350
  <NavigationHeader>
335
351
  <LayoutBrand [brand]="brand()" />
@@ -337,7 +353,7 @@ class LayoutNavMinimal {
337
353
  </NavigationSidebar>
338
354
  `, isInline: true, dependencies: [{ kind: "component", type: NavigationSidebarComponent, selector: "NavigationSidebar", inputs: ["position", "collapsed", "nav-sidebar-collapse", "previewExpanded", "class"] }, { kind: "component", type: NavigationHeaderComponent, selector: "NavigationHeader", inputs: ["toggle", "class"] }, { kind: "component", type: LayoutBrand, selector: "LayoutBrand", inputs: ["brand", "compact"] }] });
339
355
  }
340
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutNavMinimal, decorators: [{
356
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutNavMinimal, decorators: [{
341
357
  type: Component,
342
358
  args: [{
343
359
  selector: 'LayoutNavMinimal',
@@ -415,8 +431,8 @@ class LayoutWrapperDefault {
415
431
  /** Kelas `<LayoutContent>`: `fluid` membatasi lebar & memusatkan; selain itu padding biasa. */
416
432
  contentClass = computed(() => this.effectiveLayoutType() === 'fluid' ? 'w-full max-w-3xl p-6' : 'p-6', /* @ts-ignore */
417
433
  ...(ngDevMode ? [{ debugName: "contentClass" }] : /* istanbul ignore next */ []));
418
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutWrapperDefault, deps: [], target: i0.ɵɵFactoryTarget.Component });
419
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: LayoutWrapperDefault, isStandalone: true, selector: "LayoutWrapperDefault", inputs: { surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "layout-appearance", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, layoutType: { classPropertyName: "layoutType", publicName: "layout-type", isSignal: true, isRequired: false, transformFunction: null }, navType: { classPropertyName: "navType", publicName: "nav-type", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: true, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
434
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutWrapperDefault, deps: [], target: i0.ɵɵFactoryTarget.Component });
435
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: LayoutWrapperDefault, isStandalone: true, selector: "LayoutWrapperDefault", inputs: { surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "layout-appearance", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, layoutType: { classPropertyName: "layoutType", publicName: "layout-type", isSignal: true, isRequired: false, transformFunction: null }, navType: { classPropertyName: "navType", publicName: "nav-type", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: true, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
420
436
  <Layout
421
437
  [surface]="surface()"
422
438
  [layout-appearance]="appearance()"
@@ -435,13 +451,13 @@ class LayoutWrapperDefault {
435
451
  <LayoutNavFlyout [brand]="brand()" [user]="user()" [appearance]="appearance()" />
436
452
  }
437
453
  @case ('dockbar') {
438
- <LayoutNavDockbar [brand]="brand()" [user]="user()" />
454
+ <LayoutNavDockbar [brand]="brand()" [user]="user()" [appearance]="appearance()" />
439
455
  }
440
456
  @case ('brand') {
441
457
  <LayoutNavMinimal [brand]="brand()" />
442
458
  }
443
459
  @default {
444
- <LayoutNavSidebar [brand]="brand()" [user]="user()" />
460
+ <LayoutNavSidebar [brand]="brand()" [user]="user()" [appearance]="appearance()" />
445
461
  }
446
462
  }
447
463
  </Navigation>
@@ -475,9 +491,9 @@ class LayoutWrapperDefault {
475
491
  }
476
492
  }
477
493
  </Layout>
478
- `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LayoutComponent, selector: "Layout", inputs: ["surface", "appearance", "layout-appearance", "width", "layout-type", "class"] }, { kind: "component", type: LayoutVerticalComponent, selector: "LayoutVertical", inputs: ["class"] }, { kind: "component", type: LayoutHorizontalComponent, selector: "LayoutHorizontal", inputs: ["class"] }, { kind: "component", type: LayoutEmptyComponent, selector: "LayoutEmpty", inputs: ["class"] }, { kind: "component", type: LayoutFluidComponent, selector: "LayoutFluid", inputs: ["class"] }, { kind: "component", type: LayoutNavigationComponent, selector: "LayoutNavigation", inputs: ["ariaLabel", "railOffset", "class"] }, { kind: "component", type: LayoutContentComponent, selector: "LayoutContent", inputs: ["class"] }, { kind: "component", type: NavigationContainerComponent, selector: "Navigation", inputs: ["id", "data", "ariaLabel", "compact", "collapse-tree", "class", "itemClass", "nav-group-class", "activeIds", "activeUrl", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: LayoutNavSidebar, selector: "LayoutNavSidebar", inputs: ["brand", "user"] }, { kind: "component", type: LayoutNavDockbar, selector: "LayoutNavDockbar", inputs: ["brand", "user"] }, { kind: "component", type: LayoutNavNavbar, selector: "LayoutNavNavbar", inputs: ["brand", "user", "appearance"] }, { kind: "component", type: LayoutNavFlyout, selector: "LayoutNavFlyout", inputs: ["brand", "user", "appearance"] }, { kind: "component", type: LayoutNavMinimal, selector: "LayoutNavMinimal", inputs: ["brand"] }] });
494
+ `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LayoutComponent, selector: "Layout", inputs: ["surface", "appearance", "layout-appearance", "width", "layout-type", "class"] }, { kind: "component", type: LayoutVerticalComponent, selector: "LayoutVertical", inputs: ["class"] }, { kind: "component", type: LayoutHorizontalComponent, selector: "LayoutHorizontal", inputs: ["class"] }, { kind: "component", type: LayoutEmptyComponent, selector: "LayoutEmpty", inputs: ["class"] }, { kind: "component", type: LayoutFluidComponent, selector: "LayoutFluid", inputs: ["class"] }, { kind: "component", type: LayoutNavigationComponent, selector: "LayoutNavigation", inputs: ["ariaLabel", "railOffset", "class"] }, { kind: "component", type: LayoutContentComponent, selector: "LayoutContent", inputs: ["class"] }, { kind: "component", type: NavigationContainerComponent, selector: "Navigation", inputs: ["id", "data", "ariaLabel", "compact", "collapse-tree", "class", "itemClass", "nav-group-class", "activeIds", "activeUrl", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: LayoutNavSidebar, selector: "LayoutNavSidebar", inputs: ["brand", "user", "appearance"] }, { kind: "component", type: LayoutNavDockbar, selector: "LayoutNavDockbar", inputs: ["brand", "user", "appearance"] }, { kind: "component", type: LayoutNavNavbar, selector: "LayoutNavNavbar", inputs: ["brand", "user", "appearance"] }, { kind: "component", type: LayoutNavFlyout, selector: "LayoutNavFlyout", inputs: ["brand", "user", "appearance"] }, { kind: "component", type: LayoutNavMinimal, selector: "LayoutNavMinimal", inputs: ["brand"] }] });
479
495
  }
480
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutWrapperDefault, decorators: [{
496
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutWrapperDefault, decorators: [{
481
497
  type: Component,
482
498
  args: [{
483
499
  selector: 'LayoutWrapperDefault',
@@ -517,13 +533,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
517
533
  <LayoutNavFlyout [brand]="brand()" [user]="user()" [appearance]="appearance()" />
518
534
  }
519
535
  @case ('dockbar') {
520
- <LayoutNavDockbar [brand]="brand()" [user]="user()" />
536
+ <LayoutNavDockbar [brand]="brand()" [user]="user()" [appearance]="appearance()" />
521
537
  }
522
538
  @case ('brand') {
523
539
  <LayoutNavMinimal [brand]="brand()" />
524
540
  }
525
541
  @default {
526
- <LayoutNavSidebar [brand]="brand()" [user]="user()" />
542
+ <LayoutNavSidebar [brand]="brand()" [user]="user()" [appearance]="appearance()" />
527
543
  }
528
544
  }
529
545
  </Navigation>
package/fesm2022/ojiepermana-angular-theme-layout.mjs CHANGED
@@ -39,8 +39,8 @@ class LayoutLoadingComponent {
39
39
  constructor() {
40
40
  inject(DestroyRef).onDestroy(() => this.loading.unregisterHost(this.hostId));
41
41
  }
42
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
43
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: LayoutLoadingComponent, isStandalone: true, selector: "LayoutLoading", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-state": "state()" } }, ngImport: i0, template: `
42
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
43
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: LayoutLoadingComponent, isStandalone: true, selector: "LayoutLoading", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-state": "state()" } }, ngImport: i0, template: `
44
44
  @if (isPrimary() && loading.active()) {
45
45
  <div
46
46
  role="progressbar"
@@ -58,7 +58,7 @@ class LayoutLoadingComponent {
58
58
  }
59
59
  `, isInline: true });
60
60
  }
61
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutLoadingComponent, decorators: [{
61
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutLoadingComponent, decorators: [{
62
62
  type: Component,
63
63
  args: [{
64
64
  selector: 'LayoutLoading',
@@ -199,8 +199,8 @@ class LayoutComponent {
199
199
  ? 'h-full w-full lg:container lg:mx-auto'
200
200
  : 'h-full w-full';
201
201
  }
202
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
203
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: LayoutComponent, isStandalone: true, selector: "Layout", inputs: { surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, layoutAppearanceAttribute: { classPropertyName: "layoutAppearanceAttribute", publicName: "layout-appearance", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "layout-type", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-surface": "resolvedSurface()", "attr.data-layout-appearance": "resolvedAppearance()", "attr.data-layout-width": "resolvedWidth()", "attr.data-layout-type": "resolvedType()" } }, ngImport: i0, template: `
202
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
203
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: LayoutComponent, isStandalone: true, selector: "Layout", inputs: { surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, layoutAppearanceAttribute: { classPropertyName: "layoutAppearanceAttribute", publicName: "layout-appearance", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "layout-type", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-surface": "resolvedSurface()", "attr.data-layout-appearance": "resolvedAppearance()", "attr.data-layout-width": "resolvedWidth()", "attr.data-layout-type": "resolvedType()" } }, ngImport: i0, template: `
204
204
  <LayoutLoading />
205
205
 
206
206
  <div data-layout-stage [class]="frameStageClasses()">
@@ -307,7 +307,7 @@ class LayoutComponent {
307
307
  </div>
308
308
  `, isInline: true, dependencies: [{ kind: "component", type: LayoutLoadingComponent, selector: "LayoutLoading", inputs: ["class", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
309
309
  }
310
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutComponent, decorators: [{
310
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutComponent, decorators: [{
311
311
  type: Component,
312
312
  args: [{
313
313
  selector: 'Layout',
@@ -438,10 +438,10 @@ class LayoutVerticalComponent {
438
438
  constructor() {
439
439
  this.layout.setType('vertical', { persist: false });
440
440
  }
441
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutVerticalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
442
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: LayoutVerticalComponent, isStandalone: true, selector: "LayoutVertical", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-type": "vertical" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
441
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutVerticalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
442
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: LayoutVerticalComponent, isStandalone: true, selector: "LayoutVertical", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-type": "vertical" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
443
443
  }
444
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutVerticalComponent, decorators: [{
444
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutVerticalComponent, decorators: [{
445
445
  type: Component,
446
446
  args: [{
447
447
  selector: 'LayoutVertical',
@@ -463,10 +463,10 @@ class LayoutHorizontalComponent {
463
463
  constructor() {
464
464
  this.layout.setType('horizontal', { persist: false });
465
465
  }
466
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutHorizontalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
467
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: LayoutHorizontalComponent, isStandalone: true, selector: "LayoutHorizontal", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-type": "horizontal" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
466
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutHorizontalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
467
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: LayoutHorizontalComponent, isStandalone: true, selector: "LayoutHorizontal", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-type": "horizontal" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
468
468
  }
469
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutHorizontalComponent, decorators: [{
469
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutHorizontalComponent, decorators: [{
470
470
  type: Component,
471
471
  args: [{
472
472
  selector: 'LayoutHorizontal',
@@ -488,10 +488,10 @@ class LayoutEmptyComponent {
488
488
  constructor() {
489
489
  this.layout.setType('empty', { persist: false });
490
490
  }
491
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
492
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: LayoutEmptyComponent, isStandalone: true, selector: "LayoutEmpty", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-type": "empty" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
491
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
492
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: LayoutEmptyComponent, isStandalone: true, selector: "LayoutEmpty", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-type": "empty" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
493
493
  }
494
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutEmptyComponent, decorators: [{
494
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutEmptyComponent, decorators: [{
495
495
  type: Component,
496
496
  args: [{
497
497
  selector: 'LayoutEmpty',
@@ -513,10 +513,10 @@ class LayoutFluidComponent {
513
513
  constructor() {
514
514
  this.layout.setType('fluid', { persist: false });
515
515
  }
516
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutFluidComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
517
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: LayoutFluidComponent, isStandalone: true, selector: "LayoutFluid", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-type": "fluid" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
516
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutFluidComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
517
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: LayoutFluidComponent, isStandalone: true, selector: "LayoutFluid", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-type": "fluid" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
518
518
  }
519
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutFluidComponent, decorators: [{
519
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutFluidComponent, decorators: [{
520
520
  type: Component,
521
521
  args: [{
522
522
  selector: 'LayoutFluid',
@@ -557,8 +557,8 @@ class LayoutNavigationComponent {
557
557
  (layoutType === 'empty' || layoutType === 'fluid') && 'hidden', this.class());
558
558
  }, /* @ts-ignore */
559
559
  ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
560
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
561
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: LayoutNavigationComponent, isStandalone: true, selector: "LayoutNavigation", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, railOffset: { classPropertyName: "railOffset", publicName: "railOffset", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "class": "classes()", "attr.aria-label": "ariaLabel() || null", "attr.data-layout-type": "layout.type()", "attr.data-layout-appearance": "layout.appearance()", "attr.data-layout-nav-rail-offset": "resolvedRailOffset()" } }, queries: [{ propertyName: "projectedNav", first: true, predicate: NavigationContainerComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
560
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
561
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: LayoutNavigationComponent, isStandalone: true, selector: "LayoutNavigation", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, railOffset: { classPropertyName: "railOffset", publicName: "railOffset", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "class": "classes()", "attr.aria-label": "ariaLabel() || null", "attr.data-layout-type": "layout.type()", "attr.data-layout-appearance": "layout.appearance()", "attr.data-layout-nav-rail-offset": "resolvedRailOffset()" } }, queries: [{ propertyName: "projectedNav", first: true, predicate: NavigationContainerComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
562
562
  @if (showsVerticalRail()) {
563
563
  <div
564
564
  aria-hidden="true"
@@ -581,7 +581,7 @@ class LayoutNavigationComponent {
581
581
  <ng-content />
582
582
  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
583
583
  }
584
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutNavigationComponent, decorators: [{
584
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutNavigationComponent, decorators: [{
585
585
  type: Component,
586
586
  args: [{
587
587
  selector: 'LayoutNavigation',
@@ -630,10 +630,10 @@ class LayoutContentComponent {
630
630
  layoutType === 'fluid' && 'max-h-full max-w-full', this.layout.width() === 'container' && 'w-full lg:container lg:mx-auto', this.class());
631
631
  }, /* @ts-ignore */
632
632
  ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
633
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
634
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: LayoutContentComponent, isStandalone: true, selector: "LayoutContent", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-layout-type": "layout.type()", "attr.data-layout-width": "layout.width()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
633
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
634
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: LayoutContentComponent, isStandalone: true, selector: "LayoutContent", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-layout-type": "layout.type()", "attr.data-layout-width": "layout.width()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
635
635
  }
636
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutContentComponent, decorators: [{
636
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutContentComponent, decorators: [{
637
637
  type: Component,
638
638
  args: [{
639
639
  selector: 'LayoutContent',