@ojiepermana/angular-theme 22.0.43 → 22.0.45
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +28 -13
- package/fesm2022/ojiepermana-angular-theme-layout-services.mjs +6 -6
- package/fesm2022/ojiepermana-angular-theme-layout-wrapper.mjs +59 -39
- package/fesm2022/ojiepermana-angular-theme-layout.mjs +41 -42
- package/fesm2022/ojiepermana-angular-theme-page.mjs +550 -59
- package/fesm2022/ojiepermana-angular-theme-styles.mjs +16 -16
- package/package.json +21 -4
- package/page/README.md +157 -11
- package/styles/css/base/index.css +14 -0
- package/types/ojiepermana-angular-theme-layout-wrapper.d.ts +28 -12
- package/types/ojiepermana-angular-theme-page.d.ts +188 -43
package/README.md
CHANGED
|
@@ -11,26 +11,39 @@ bun add @ojiepermana/angular-theme
|
|
|
11
11
|
|
|
12
12
|
## Entry points
|
|
13
13
|
|
|
14
|
-
| Import path
|
|
15
|
-
|
|
|
16
|
-
| `@ojiepermana/angular-theme/styles`
|
|
17
|
-
| `@ojiepermana/angular-theme/layout`
|
|
18
|
-
| `@ojiepermana/angular-theme/page`
|
|
19
|
-
| `@ojiepermana/angular-theme/theme.css`
|
|
20
|
-
| `@ojiepermana/angular-theme/
|
|
14
|
+
| Import path | Contents |
|
|
15
|
+
| ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
|
|
16
|
+
| `@ojiepermana/angular-theme/styles` | `provideUiTheme`, `ThemeModeService`, `ThemeColorService`, `ThemeBrandService`, `ThemeRadiusService`, `ThemeSpaceService`, … |
|
|
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 only — lightweight, no runtime axes |
|
|
20
|
+
| `@ojiepermana/angular-theme/theme-full.css` | Base + every runtime axis (color, neutral, radius, space) — needed for `ThemeColorService`/`ThemeNeutralService` switching |
|
|
21
|
+
| `@ojiepermana/angular-theme/styles/css/*` | Raw CSS assets (per-axis color + neutral palettes, Tailwind map) |
|
|
21
22
|
|
|
22
23
|
## Tailwind v4 setup
|
|
23
24
|
|
|
24
|
-
The CSS is published with the package and addressable by name.
|
|
25
|
-
|
|
25
|
+
The CSS is published with the package and addressable by name. Use `theme-full.css`
|
|
26
|
+
for the full design system (runtime color/neutral switching); use the lightweight
|
|
27
|
+
`theme.css` plus only the axes you need for a smaller bundle.
|
|
26
28
|
|
|
27
29
|
```css
|
|
28
|
-
/* styles.css */
|
|
29
|
-
@import '@ojiepermana/angular-theme/
|
|
30
|
+
/* styles.css — full design system */
|
|
31
|
+
@import '@ojiepermana/angular-theme/theme-full.css'; /* base + all color + neutral palettes */
|
|
30
32
|
@import 'tailwindcss';
|
|
31
33
|
@import '@ojiepermana/angular-theme/styles/css/base/tailwind.css'; /* maps tokens → bg-primary, bg-brand, text-foreground, … */
|
|
32
34
|
```
|
|
33
35
|
|
|
36
|
+
For a lightweight setup, import the base then opt in to specific axes:
|
|
37
|
+
|
|
38
|
+
```css
|
|
39
|
+
/* styles.css — base + only the axes you use */
|
|
40
|
+
@import '@ojiepermana/angular-theme/theme.css'; /* base tokens + components, no axes */
|
|
41
|
+
@import 'tailwindcss';
|
|
42
|
+
@import '@ojiepermana/angular-theme/styles/css/base/tailwind.css';
|
|
43
|
+
@import '@ojiepermana/angular-theme/styles/css/color/index.css'; /* opt in to accent palettes */
|
|
44
|
+
@import '@ojiepermana/angular-theme/styles/css/neutral/index.css'; /* opt in to neutral families */
|
|
45
|
+
```
|
|
46
|
+
|
|
34
47
|
Requires Tailwind CSS `^4.3.0`.
|
|
35
48
|
|
|
36
49
|
## Provider
|
|
@@ -83,8 +96,10 @@ Four independent axes switch at runtime via attribute selectors on `<html>`:
|
|
|
83
96
|
- **space** (`theme-space`) — `compact`, `normal` (default), `relaxed`, `spacious`.
|
|
84
97
|
Sets the `--spacing-base` knob; every `p-*` / `m-*` / `gap-*` / `w-*` / `h-*` utility follows.
|
|
85
98
|
|
|
86
|
-
`styles/css/index.css` bundles the core base theme plus
|
|
87
|
-
palette, so switching needs no runtime CSS loading.
|
|
99
|
+
`theme-full.css` (i.e. `styles/css/index.css`) bundles the core base theme plus
|
|
100
|
+
every accent and neutral palette, so switching needs no runtime CSS loading. The
|
|
101
|
+
lightweight `theme.css` ships base only — import the axis files you need on top of
|
|
102
|
+
it (or use `theme-full.css`) to enable runtime switching.
|
|
88
103
|
|
|
89
104
|
### Material Symbols icons (opt-in)
|
|
90
105
|
|
|
@@ -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.
|
|
153
|
-
static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.
|
|
152
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Service });
|
|
153
|
+
static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.4", ngImport: i0, type: LayoutService });
|
|
154
154
|
}
|
|
155
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
155
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", 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.
|
|
315
|
-
static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.
|
|
314
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutLoadingService, deps: [], target: i0.ɵɵFactoryTarget.Service });
|
|
315
|
+
static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.4", ngImport: i0, type: LayoutLoadingService });
|
|
316
316
|
}
|
|
317
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
317
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutLoadingService, decorators: [{
|
|
318
318
|
type: Service
|
|
319
319
|
}], ctorParameters: () => [] });
|
|
320
320
|
|
|
@@ -30,10 +30,10 @@ class LayoutIdentityService {
|
|
|
30
30
|
setUser(user) {
|
|
31
31
|
this.userState.set(user);
|
|
32
32
|
}
|
|
33
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
34
|
-
static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.
|
|
33
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutIdentityService, deps: [], target: i0.ɵɵFactoryTarget.Service });
|
|
34
|
+
static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.4", ngImport: i0, type: LayoutIdentityService });
|
|
35
35
|
}
|
|
36
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
36
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutIdentityService, decorators: [{
|
|
37
37
|
type: Service
|
|
38
38
|
}] });
|
|
39
39
|
|
|
@@ -51,15 +51,15 @@ class LayoutBrand {
|
|
|
51
51
|
...(ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []));
|
|
52
52
|
/** Sembunyikan judul, sisakan inisial saja (dockbar / rail ikon-only). */
|
|
53
53
|
compact = input(false, { ...(ngDevMode ? { debugName: "compact" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
54
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
55
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
54
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutBrand, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
55
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", 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: `
|
|
56
56
|
<NavigationHeaderInitial [name]="brand().name" [icon]="brand().icon" />
|
|
57
57
|
@if (!compact()) {
|
|
58
58
|
<NavigationHeaderTitle [title]="brand().title" [subtitle]="brand().subtitle" />
|
|
59
59
|
}
|
|
60
60
|
`, 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"] }] });
|
|
61
61
|
}
|
|
62
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
62
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutBrand, decorators: [{
|
|
63
63
|
type: Component,
|
|
64
64
|
args: [{
|
|
65
65
|
selector: 'LayoutBrand',
|
|
@@ -93,8 +93,8 @@ class LayoutUser {
|
|
|
93
93
|
/** Material symbol untuk tombol logout. */
|
|
94
94
|
logoutIcon = input('logout', /* @ts-ignore */
|
|
95
95
|
...(ngDevMode ? [{ debugName: "logoutIcon" }] : /* istanbul ignore next */ []));
|
|
96
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
97
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
96
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutUser, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
97
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", 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: `
|
|
98
98
|
@if (detailed()) {
|
|
99
99
|
<NavigationFooterInitial [name]="user().name" />
|
|
100
100
|
<NavigationFooterTitle [title]="user().name" [subtitle]="user().email" />
|
|
@@ -112,7 +112,7 @@ class LayoutUser {
|
|
|
112
112
|
</NavigationFooterAction>
|
|
113
113
|
`, 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"] }] });
|
|
114
114
|
}
|
|
115
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
115
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutUser, decorators: [{
|
|
116
116
|
type: Component,
|
|
117
117
|
args: [{
|
|
118
118
|
selector: 'LayoutUser',
|
|
@@ -160,17 +160,27 @@ class LayoutNavSidebar {
|
|
|
160
160
|
...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
161
161
|
isBorderRail = computed(() => this.appearance() === 'border-rail', /* @ts-ignore */
|
|
162
162
|
...(ngDevMode ? [{ debugName: "isBorderRail" }] : /* istanbul ignore next */ []));
|
|
163
|
-
/** Border kanan pemisah; ketebalan ikut appearance: `border-rail` 1.
|
|
164
|
-
shellClass = computed(() => this.isBorderRail()
|
|
163
|
+
/** Border kanan pemisah; ketebalan ikut appearance: `border-rail` = `--layout-rail-width` (1.21px, selaras rail layout), `flat` 1px. */
|
|
164
|
+
shellClass = computed(() => this.isBorderRail()
|
|
165
|
+
? 'border-r-[length:var(--layout-rail-width)] border-border'
|
|
166
|
+
: 'border-r border-border', /* @ts-ignore */
|
|
165
167
|
...(ngDevMode ? [{ debugName: "shellClass" }] : /* istanbul ignore next */ []));
|
|
166
|
-
/**
|
|
167
|
-
|
|
168
|
+
/**
|
|
169
|
+
* Header divider: di `border-rail` border bawaan dimatikan (`border-b-0`) karena pemisahnya
|
|
170
|
+
* diambil-alih rail inset accent Layout (`data-layout-horizontal-top-rail` di `top-12`) — supaya
|
|
171
|
+
* tidak dempet/dobel dengan garis itu. `flat` pakai default (border bawaan NavigationHeader).
|
|
172
|
+
*/
|
|
173
|
+
headerClass = computed(() => (this.isBorderRail() ? 'border-b-0' : ''), /* @ts-ignore */
|
|
168
174
|
...(ngDevMode ? [{ debugName: "headerClass" }] : /* istanbul ignore next */ []));
|
|
169
|
-
/**
|
|
170
|
-
|
|
175
|
+
/**
|
|
176
|
+
* Footer divider: di `border-rail` border bawaan dimatikan (`border-t-0`) karena pemisahnya
|
|
177
|
+
* diambil-alih rail inset accent Layout (`data-layout-horizontal-bottom-rail` di `bottom-12`);
|
|
178
|
+
* `px-3` tetap dipertahankan.
|
|
179
|
+
*/
|
|
180
|
+
footerClass = computed(() => this.isBorderRail() ? 'px-3 border-t-0' : 'px-3', /* @ts-ignore */
|
|
171
181
|
...(ngDevMode ? [{ debugName: "footerClass" }] : /* istanbul ignore next */ []));
|
|
172
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
173
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.
|
|
182
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutNavSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
183
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", 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: `
|
|
174
184
|
<NavigationSidebar nav-sidebar-collapse [class]="shellClass()">
|
|
175
185
|
<NavigationHeader [class]="headerClass()">
|
|
176
186
|
<LayoutBrand [brand]="brand()" />
|
|
@@ -181,7 +191,7 @@ class LayoutNavSidebar {
|
|
|
181
191
|
</NavigationSidebar>
|
|
182
192
|
`, 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"] }] });
|
|
183
193
|
}
|
|
184
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
194
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutNavSidebar, decorators: [{
|
|
185
195
|
type: Component,
|
|
186
196
|
args: [{
|
|
187
197
|
selector: 'LayoutNavSidebar',
|
|
@@ -220,17 +230,27 @@ class LayoutNavDockbar {
|
|
|
220
230
|
...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
221
231
|
isBorderRail = computed(() => this.appearance() === 'border-rail', /* @ts-ignore */
|
|
222
232
|
...(ngDevMode ? [{ debugName: "isBorderRail" }] : /* istanbul ignore next */ []));
|
|
223
|
-
/** Border kanan pemisah; ketebalan ikut appearance: `border-rail` 1.
|
|
224
|
-
shellClass = computed(() => this.isBorderRail()
|
|
233
|
+
/** Border kanan pemisah; ketebalan ikut appearance: `border-rail` = `--layout-rail-width` (1.21px, selaras rail layout), `flat` 1px. */
|
|
234
|
+
shellClass = computed(() => this.isBorderRail()
|
|
235
|
+
? 'border-r-[length:var(--layout-rail-width)] border-border'
|
|
236
|
+
: 'border-r border-border', /* @ts-ignore */
|
|
225
237
|
...(ngDevMode ? [{ debugName: "shellClass" }] : /* istanbul ignore next */ []));
|
|
226
|
-
/**
|
|
227
|
-
|
|
238
|
+
/**
|
|
239
|
+
* Header divider: di `border-rail` border bawaan dimatikan (`border-b-0`) karena pemisahnya
|
|
240
|
+
* diambil-alih rail inset accent Layout (`data-layout-horizontal-top-rail` di `top-12`) — supaya
|
|
241
|
+
* tidak dempet/dobel dengan garis itu. `flat` pakai default (border bawaan NavigationHeader).
|
|
242
|
+
*/
|
|
243
|
+
headerClass = computed(() => (this.isBorderRail() ? 'border-b-0' : ''), /* @ts-ignore */
|
|
228
244
|
...(ngDevMode ? [{ debugName: "headerClass" }] : /* istanbul ignore next */ []));
|
|
229
|
-
/**
|
|
230
|
-
|
|
245
|
+
/**
|
|
246
|
+
* Footer divider: di `border-rail` border bawaan dimatikan (`border-t-0`) karena pemisahnya
|
|
247
|
+
* diambil-alih rail inset accent Layout (`data-layout-horizontal-bottom-rail` di `bottom-12`);
|
|
248
|
+
* `px-3` tetap dipertahankan.
|
|
249
|
+
*/
|
|
250
|
+
footerClass = computed(() => this.isBorderRail() ? 'px-3 border-t-0' : 'px-3', /* @ts-ignore */
|
|
231
251
|
...(ngDevMode ? [{ debugName: "footerClass" }] : /* istanbul ignore next */ []));
|
|
232
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
233
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.
|
|
252
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutNavDockbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
253
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", 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: `
|
|
234
254
|
<NavigationDockbar [class]="shellClass()">
|
|
235
255
|
<NavigationHeader [class]="headerClass()">
|
|
236
256
|
<LayoutBrand [brand]="brand()" compact />
|
|
@@ -241,7 +261,7 @@ class LayoutNavDockbar {
|
|
|
241
261
|
</NavigationDockbar>
|
|
242
262
|
`, 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"] }] });
|
|
243
263
|
}
|
|
244
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
264
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutNavDockbar, decorators: [{
|
|
245
265
|
type: Component,
|
|
246
266
|
args: [{
|
|
247
267
|
selector: 'LayoutNavDockbar',
|
|
@@ -278,8 +298,8 @@ class LayoutNavNavbar {
|
|
|
278
298
|
/** Appearance dari shell (`[nav-appearance]`). */
|
|
279
299
|
appearance = input('flat', /* @ts-ignore */
|
|
280
300
|
...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
281
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
282
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.
|
|
301
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutNavNavbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
302
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", 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: `
|
|
283
303
|
<NavigationNavbar [nav-appearance]="appearance()" class="border-b-[1.5px] border-border">
|
|
284
304
|
<NavigationHeader>
|
|
285
305
|
<LayoutBrand [brand]="brand()" />
|
|
@@ -290,7 +310,7 @@ class LayoutNavNavbar {
|
|
|
290
310
|
</NavigationNavbar>
|
|
291
311
|
`, 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"] }] });
|
|
292
312
|
}
|
|
293
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
313
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutNavNavbar, decorators: [{
|
|
294
314
|
type: Component,
|
|
295
315
|
args: [{
|
|
296
316
|
selector: 'LayoutNavNavbar',
|
|
@@ -327,8 +347,8 @@ class LayoutNavFlyout {
|
|
|
327
347
|
/** Appearance dari shell (`[nav-appearance]`). */
|
|
328
348
|
appearance = input('flat', /* @ts-ignore */
|
|
329
349
|
...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
330
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
331
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.
|
|
350
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutNavFlyout, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
351
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", 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: `
|
|
332
352
|
<NavigationFlyout
|
|
333
353
|
[nav-appearance]="appearance()"
|
|
334
354
|
label="Menu"
|
|
@@ -344,7 +364,7 @@ class LayoutNavFlyout {
|
|
|
344
364
|
</NavigationFlyout>
|
|
345
365
|
`, 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"] }] });
|
|
346
366
|
}
|
|
347
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
367
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutNavFlyout, decorators: [{
|
|
348
368
|
type: Component,
|
|
349
369
|
args: [{
|
|
350
370
|
selector: 'LayoutNavFlyout',
|
|
@@ -382,8 +402,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
382
402
|
class LayoutNavMinimal {
|
|
383
403
|
brand = input.required(/* @ts-ignore */
|
|
384
404
|
...(ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []));
|
|
385
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
386
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.
|
|
405
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutNavMinimal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
406
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: LayoutNavMinimal, isStandalone: true, selector: "LayoutNavMinimal", inputs: { brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
|
|
387
407
|
<NavigationSidebar>
|
|
388
408
|
<NavigationHeader>
|
|
389
409
|
<LayoutBrand [brand]="brand()" />
|
|
@@ -391,7 +411,7 @@ class LayoutNavMinimal {
|
|
|
391
411
|
</NavigationSidebar>
|
|
392
412
|
`, 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"] }] });
|
|
393
413
|
}
|
|
394
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
414
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutNavMinimal, decorators: [{
|
|
395
415
|
type: Component,
|
|
396
416
|
args: [{
|
|
397
417
|
selector: 'LayoutNavMinimal',
|
|
@@ -481,8 +501,8 @@ class LayoutWrapperDefault {
|
|
|
481
501
|
/** Kelas `<LayoutContent>`: `fluid` membatasi lebar & memusatkan; padding diserahkan ke consumer. */
|
|
482
502
|
contentClass = computed(() => cn(this.effectiveLayoutType() === 'fluid' ? 'w-full max-w-3xl' : '', this.contentClassInput()), /* @ts-ignore */
|
|
483
503
|
...(ngDevMode ? [{ debugName: "contentClass" }] : /* istanbul ignore next */ []));
|
|
484
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
485
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
504
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutWrapperDefault, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
505
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", 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 }, contentClassInput: { classPropertyName: "contentClassInput", publicName: "content-class", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
|
|
486
506
|
<Layout
|
|
487
507
|
[surface]="surface()"
|
|
488
508
|
[layout-appearance]="appearance()"
|
|
@@ -543,7 +563,7 @@ class LayoutWrapperDefault {
|
|
|
543
563
|
</Layout>
|
|
544
564
|
`, 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"] }] });
|
|
545
565
|
}
|
|
546
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
566
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutWrapperDefault, decorators: [{
|
|
547
567
|
type: Component,
|
|
548
568
|
args: [{
|
|
549
569
|
selector: 'LayoutWrapperDefault',
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, input, computed, DestroyRef, Component, effect,
|
|
2
|
+
import { inject, input, computed, DestroyRef, Component, effect, contentChild } from '@angular/core';
|
|
3
3
|
import { cn } from '@ojiepermana/angular-component/utils';
|
|
4
4
|
import { LayoutLoadingService, LayoutService } from '@ojiepermana/angular-theme/layout/services';
|
|
5
5
|
export { LAYOUT_LOADING_HIDE_DELAY_MS, LAYOUT_LOADING_INITIAL_PROGRESS, LAYOUT_LOADING_SKIP, LAYOUT_LOADING_TRICKLE_CEILING, LAYOUT_LOADING_TRICKLE_INTERVAL_MS, LayoutLoadingService, LayoutService, layoutLoadingInterceptor } from '@ojiepermana/angular-theme/layout/services';
|
|
@@ -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.
|
|
43
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
42
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
43
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", 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.
|
|
61
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutLoadingComponent, decorators: [{
|
|
62
62
|
type: Component,
|
|
63
63
|
args: [{
|
|
64
64
|
selector: 'LayoutLoading',
|
|
@@ -271,8 +271,8 @@ class LayoutComponent {
|
|
|
271
271
|
? 'h-full w-full lg:container lg:mx-auto'
|
|
272
272
|
: 'h-full w-full';
|
|
273
273
|
}
|
|
274
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
275
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
274
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
275
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", 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: `
|
|
276
276
|
<LayoutLoading />
|
|
277
277
|
|
|
278
278
|
<div data-layout-stage [class]="frameStageClasses()">
|
|
@@ -377,13 +377,12 @@ class LayoutComponent {
|
|
|
377
377
|
</div>
|
|
378
378
|
</div>
|
|
379
379
|
</div>
|
|
380
|
-
`, isInline: true, dependencies: [{ kind: "component", type: LayoutLoadingComponent, selector: "LayoutLoading", inputs: ["class", "ariaLabel"] }]
|
|
380
|
+
`, isInline: true, dependencies: [{ kind: "component", type: LayoutLoadingComponent, selector: "LayoutLoading", inputs: ["class", "ariaLabel"] }] });
|
|
381
381
|
}
|
|
382
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
382
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutComponent, decorators: [{
|
|
383
383
|
type: Component,
|
|
384
384
|
args: [{
|
|
385
385
|
selector: 'Layout',
|
|
386
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
387
386
|
imports: [LayoutLoadingComponent],
|
|
388
387
|
host: {
|
|
389
388
|
'[class]': 'hostClasses()',
|
|
@@ -510,14 +509,13 @@ class LayoutVerticalComponent {
|
|
|
510
509
|
constructor() {
|
|
511
510
|
this.layout.setType('vertical', { persist: false });
|
|
512
511
|
}
|
|
513
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
514
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.
|
|
512
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutVerticalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
513
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", 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 });
|
|
515
514
|
}
|
|
516
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
515
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutVerticalComponent, decorators: [{
|
|
517
516
|
type: Component,
|
|
518
517
|
args: [{
|
|
519
518
|
selector: 'LayoutVertical',
|
|
520
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
521
519
|
host: {
|
|
522
520
|
'[class]': 'classes()',
|
|
523
521
|
'data-layout-type': 'vertical',
|
|
@@ -535,14 +533,13 @@ class LayoutHorizontalComponent {
|
|
|
535
533
|
constructor() {
|
|
536
534
|
this.layout.setType('horizontal', { persist: false });
|
|
537
535
|
}
|
|
538
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
539
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.
|
|
536
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutHorizontalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
537
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", 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 });
|
|
540
538
|
}
|
|
541
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
539
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutHorizontalComponent, decorators: [{
|
|
542
540
|
type: Component,
|
|
543
541
|
args: [{
|
|
544
542
|
selector: 'LayoutHorizontal',
|
|
545
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
546
543
|
host: {
|
|
547
544
|
'[class]': 'classes()',
|
|
548
545
|
'data-layout-type': 'horizontal',
|
|
@@ -560,14 +557,13 @@ class LayoutEmptyComponent {
|
|
|
560
557
|
constructor() {
|
|
561
558
|
this.layout.setType('empty', { persist: false });
|
|
562
559
|
}
|
|
563
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
564
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.
|
|
560
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
561
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", 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 });
|
|
565
562
|
}
|
|
566
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
563
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutEmptyComponent, decorators: [{
|
|
567
564
|
type: Component,
|
|
568
565
|
args: [{
|
|
569
566
|
selector: 'LayoutEmpty',
|
|
570
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
571
567
|
host: {
|
|
572
568
|
'[class]': 'classes()',
|
|
573
569
|
'data-layout-type': 'empty',
|
|
@@ -585,14 +581,13 @@ class LayoutFluidComponent {
|
|
|
585
581
|
constructor() {
|
|
586
582
|
this.layout.setType('fluid', { persist: false });
|
|
587
583
|
}
|
|
588
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
589
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.
|
|
584
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutFluidComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
585
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", 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 });
|
|
590
586
|
}
|
|
591
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
587
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutFluidComponent, decorators: [{
|
|
592
588
|
type: Component,
|
|
593
589
|
args: [{
|
|
594
590
|
selector: 'LayoutFluid',
|
|
595
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
596
591
|
host: {
|
|
597
592
|
'[class]': 'classes()',
|
|
598
593
|
'data-layout-type': 'fluid',
|
|
@@ -629,35 +624,37 @@ class LayoutNavigationComponent {
|
|
|
629
624
|
(layoutType === 'empty' || layoutType === 'fluid') && 'hidden', this.class());
|
|
630
625
|
}, /* @ts-ignore */
|
|
631
626
|
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
632
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
633
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
627
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
628
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", 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: `
|
|
634
629
|
@if (showsVerticalRail()) {
|
|
635
630
|
<div
|
|
636
631
|
aria-hidden="true"
|
|
637
632
|
data-layout-nav-rail
|
|
638
|
-
class="pointer-events-none absolute inset-y-0 right-0 z-20 w-
|
|
633
|
+
class="pointer-events-none absolute inset-y-0 right-0 z-20 w-(--layout-rail-width) transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none"
|
|
639
634
|
[style.transform]="railTransform()"
|
|
640
635
|
>
|
|
641
|
-
<div
|
|
636
|
+
<div
|
|
637
|
+
data-layout-nav-rail-line
|
|
638
|
+
class="absolute inset-y-0 right-0 w-(--layout-rail-width) bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
639
|
+
></div>
|
|
642
640
|
<div
|
|
643
641
|
data-layout-nav-rail-top
|
|
644
|
-
class="absolute bottom-full right-0 h-[calc((100dvh-100%)/2)] w-
|
|
642
|
+
class="absolute bottom-full right-0 h-[calc((100dvh-100%)/2)] w-(--layout-rail-width) bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
645
643
|
></div>
|
|
646
644
|
<div
|
|
647
645
|
data-layout-nav-rail-bottom
|
|
648
|
-
class="absolute top-full right-0 h-[calc((100dvh-100%)/2)] w-
|
|
646
|
+
class="absolute top-full right-0 h-[calc((100dvh-100%)/2)] w-(--layout-rail-width) bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
649
647
|
></div>
|
|
650
648
|
</div>
|
|
651
649
|
}
|
|
652
650
|
|
|
653
651
|
<ng-content />
|
|
654
|
-
`, isInline: true
|
|
652
|
+
`, isInline: true });
|
|
655
653
|
}
|
|
656
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
654
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutNavigationComponent, decorators: [{
|
|
657
655
|
type: Component,
|
|
658
656
|
args: [{
|
|
659
657
|
selector: 'LayoutNavigation',
|
|
660
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
661
658
|
host: {
|
|
662
659
|
'[class]': 'classes()',
|
|
663
660
|
role: 'navigation',
|
|
@@ -671,17 +668,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
671
668
|
<div
|
|
672
669
|
aria-hidden="true"
|
|
673
670
|
data-layout-nav-rail
|
|
674
|
-
class="pointer-events-none absolute inset-y-0 right-0 z-20 w-
|
|
671
|
+
class="pointer-events-none absolute inset-y-0 right-0 z-20 w-(--layout-rail-width) transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none"
|
|
675
672
|
[style.transform]="railTransform()"
|
|
676
673
|
>
|
|
677
|
-
<div
|
|
674
|
+
<div
|
|
675
|
+
data-layout-nav-rail-line
|
|
676
|
+
class="absolute inset-y-0 right-0 w-(--layout-rail-width) bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
677
|
+
></div>
|
|
678
678
|
<div
|
|
679
679
|
data-layout-nav-rail-top
|
|
680
|
-
class="absolute bottom-full right-0 h-[calc((100dvh-100%)/2)] w-
|
|
680
|
+
class="absolute bottom-full right-0 h-[calc((100dvh-100%)/2)] w-(--layout-rail-width) bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
681
681
|
></div>
|
|
682
682
|
<div
|
|
683
683
|
data-layout-nav-rail-bottom
|
|
684
|
-
class="absolute top-full right-0 h-[calc((100dvh-100%)/2)] w-
|
|
684
|
+
class="absolute top-full right-0 h-[calc((100dvh-100%)/2)] w-(--layout-rail-width) bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
685
685
|
></div>
|
|
686
686
|
</div>
|
|
687
687
|
}
|
|
@@ -702,14 +702,13 @@ class LayoutContentComponent {
|
|
|
702
702
|
layoutType === 'fluid' && 'max-h-full max-w-full', this.layout.width() === 'container' && 'w-full lg:container lg:mx-auto', this.class());
|
|
703
703
|
}, /* @ts-ignore */
|
|
704
704
|
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
705
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
706
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.
|
|
705
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
706
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", 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 });
|
|
707
707
|
}
|
|
708
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
708
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutContentComponent, decorators: [{
|
|
709
709
|
type: Component,
|
|
710
710
|
args: [{
|
|
711
711
|
selector: 'LayoutContent',
|
|
712
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
713
712
|
host: {
|
|
714
713
|
'[class]': 'classes()',
|
|
715
714
|
'[attr.data-layout-type]': 'layout.type()',
|