@ojiepermana/angular 21.1.13 → 21.1.15
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/brand/etos/README.md +1 -1
- package/etos/styles/index.css +7 -7
- package/etos/styles/layout.css +11 -11
- package/fesm2022/ojiepermana-angular-brand-etos.mjs +56 -34
- package/fesm2022/ojiepermana-angular-brand-etos.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-chart.mjs +72 -72
- package/fesm2022/ojiepermana-angular-component.mjs +288 -288
- package/fesm2022/ojiepermana-angular-layout.mjs +13 -13
- package/fesm2022/ojiepermana-angular-layout.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-navigation.mjs +15 -15
- package/fesm2022/ojiepermana-angular-theme.mjs +3 -3
- package/package.json +1 -1
- package/theme/styles/etos.css +1 -1
- package/types/ojiepermana-angular-brand-etos.d.ts +1 -2
package/brand/etos/README.md
CHANGED
|
@@ -48,7 +48,7 @@ import {
|
|
|
48
48
|
Etos ships with these defaults:
|
|
49
49
|
|
|
50
50
|
- Theme defaults to brand `etos` with light mode.
|
|
51
|
-
- Layout defaults to `vertical` mode with `
|
|
51
|
+
- Layout defaults to `vertical` mode with `wide` width.
|
|
52
52
|
|
|
53
53
|
Recommended provider configuration:
|
|
54
54
|
|
package/etos/styles/index.css
CHANGED
|
@@ -3,13 +3,13 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Import before Tailwind, then import the shared Tailwind token bridge.
|
|
5
5
|
*/
|
|
6
|
-
@import '
|
|
7
|
-
@import '
|
|
8
|
-
@import '
|
|
9
|
-
@import '
|
|
6
|
+
@import '../../../theme/src/lib/styles/themes/library/_layers.css';
|
|
7
|
+
@import '../../../theme/src/lib/styles/themes/mode/index.css';
|
|
8
|
+
@import '../../../theme/src/lib/styles/themes/library/color/index.css';
|
|
9
|
+
@import '../../../theme/src/lib/styles/themes/library/style/index.css';
|
|
10
10
|
@import './color.css';
|
|
11
11
|
@import './style.css';
|
|
12
12
|
@import './layout.css';
|
|
13
|
-
@import '
|
|
14
|
-
@import '
|
|
15
|
-
@import '
|
|
13
|
+
@import '../../../theme/src/lib/styles/themes/library/_tokens.css';
|
|
14
|
+
@import '../../../theme/src/lib/styles/themes/library/_material-overrides.css';
|
|
15
|
+
@import '../../../theme/src/lib/styles/themes/library/_components.css';
|
package/etos/styles/layout.css
CHANGED
|
@@ -3,19 +3,19 @@
|
|
|
3
3
|
*/
|
|
4
4
|
@layer tokens {
|
|
5
5
|
[theme-brand='etos'] {
|
|
6
|
-
--
|
|
7
|
-
--
|
|
8
|
-
--
|
|
9
|
-
--
|
|
10
|
-
--
|
|
11
|
-
--
|
|
12
|
-
--
|
|
13
|
-
--
|
|
14
|
-
--
|
|
15
|
-
--
|
|
6
|
+
--layout-shell-padding: clamp(1rem, 2vw, 2rem);
|
|
7
|
+
--layout-frame-radius: var(--radius-lg);
|
|
8
|
+
--layout-frame-shadow: var(--shadow-sm);
|
|
9
|
+
--layout-sidebar-width: 17.5rem;
|
|
10
|
+
--layout-main-max-width: 80rem;
|
|
11
|
+
--layout-vertical-shell-max-width: calc(var(--layout-sidebar-width) + var(--layout-main-max-width));
|
|
12
|
+
--layout-empty-max-width: 24rem;
|
|
13
|
+
--layout-empty-padding: clamp(1.5rem, 4vw, 3rem);
|
|
14
|
+
--layout-topbar-inline: 0.875rem;
|
|
15
|
+
--layout-brand-mark-size: 2rem;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
[data-mode='dark'][theme-brand='etos'] {
|
|
19
|
-
--
|
|
19
|
+
--layout-frame-shadow: 0 0 0 1px hsl(var(--border));
|
|
20
20
|
}
|
|
21
21
|
}
|
|
@@ -14,7 +14,6 @@ const ETOS_THEME_CONFIG = {
|
|
|
14
14
|
};
|
|
15
15
|
const ETOS_LAYOUT_CONFIG = {
|
|
16
16
|
mode: 'vertical',
|
|
17
|
-
width: 'container',
|
|
18
17
|
};
|
|
19
18
|
|
|
20
19
|
function provideEtosTheme(config = {}, ...features) {
|
|
@@ -127,10 +126,10 @@ class EtosThemeSwitcherComponent {
|
|
|
127
126
|
return cn('relative h-8 w-8 rounded-full p-0 transition-colors duration-150 hover:bg-muted/40 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background', open && 'bg-muted/50');
|
|
128
127
|
}
|
|
129
128
|
notificationButtonClasses() {
|
|
130
|
-
return cn('h-8 w-8 rounded-[var(--
|
|
129
|
+
return cn('h-8 w-8 rounded-[var(--layout-frame-radius)] p-0 text-muted-foreground transition-colors duration-150 hover:bg-muted/50 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background');
|
|
131
130
|
}
|
|
132
131
|
segmentedOptionClasses(active) {
|
|
133
|
-
return cn('h-10 rounded-[var(--
|
|
132
|
+
return cn('h-10 rounded-[var(--layout-frame-radius)] border border-transparent px-[0.3125rem] py-[0.1875rem] text-foreground transition-colors', active ? 'bg-background shadow-sm' : 'text-muted-foreground hover:bg-background/70');
|
|
134
133
|
}
|
|
135
134
|
themeOptionClasses(active) {
|
|
136
135
|
return this.segmentedOptionClasses(active);
|
|
@@ -139,7 +138,7 @@ class EtosThemeSwitcherComponent {
|
|
|
139
138
|
return active ? 'text-foreground' : 'text-muted-foreground';
|
|
140
139
|
}
|
|
141
140
|
actionButtonClasses(tone = 'default') {
|
|
142
|
-
return cn('h-12 w-full justify-start gap-2.5 rounded-[var(--
|
|
141
|
+
return cn('h-12 w-full justify-start gap-2.5 rounded-[var(--layout-frame-radius)] border border-transparent px-2 py-1.5 text-left transition-colors hover:bg-muted/50', tone === 'destructive' && 'hover:bg-destructive/8 focus-visible:ring-destructive/30');
|
|
143
142
|
}
|
|
144
143
|
actionIconClasses(tone = 'default') {
|
|
145
144
|
return tone === 'destructive' ? 'text-destructive' : 'text-foreground';
|
|
@@ -196,8 +195,8 @@ class EtosThemeSwitcherComponent {
|
|
|
196
195
|
}
|
|
197
196
|
return `${segments[0][0] ?? ''}${segments[1][0] ?? ''}`.toUpperCase();
|
|
198
197
|
}
|
|
199
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
200
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
198
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: EtosThemeSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
199
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: EtosThemeSwitcherComponent, isStandalone: true, selector: "etos-theme-switcher", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: true, isRequired: false, transformFunction: null }, userSubtitle: { classPropertyName: "userSubtitle", publicName: "userSubtitle", isSignal: true, isRequired: false, transformFunction: null }, avatarSrc: { classPropertyName: "avatarSrc", publicName: "avatarSrc", isSignal: true, isRequired: false, transformFunction: null }, avatarAlt: { classPropertyName: "avatarAlt", publicName: "avatarAlt", isSignal: true, isRequired: false, transformFunction: null }, quickActions: { classPropertyName: "quickActions", publicName: "quickActions", isSignal: true, isRequired: true, transformFunction: null }, notificationShortcut: { classPropertyName: "notificationShortcut", publicName: "notificationShortcut", isSignal: true, isRequired: false, transformFunction: null }, showNotificationShortcut: { classPropertyName: "showNotificationShortcut", publicName: "showNotificationShortcut", isSignal: true, isRequired: false, transformFunction: null }, popoverSide: { classPropertyName: "popoverSide", publicName: "popoverSide", isSignal: true, isRequired: false, transformFunction: null }, popoverAlign: { classPropertyName: "popoverAlign", publicName: "popoverAlign", isSignal: true, isRequired: false, transformFunction: null }, popoverSideOffset: { classPropertyName: "popoverSideOffset", publicName: "popoverSideOffset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionSelected: "actionSelected" }, host: { properties: { "class": "hostClasses()" } }, viewQueries: [{ propertyName: "popoverTrigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
201
200
|
@if (notificationShortcutConfig(); as shortcut) {
|
|
202
201
|
<button
|
|
203
202
|
type="button"
|
|
@@ -269,7 +268,7 @@ class EtosThemeSwitcherComponent {
|
|
|
269
268
|
<section
|
|
270
269
|
data-setting="theme-scheme"
|
|
271
270
|
[attr.data-current]="themeScheme()"
|
|
272
|
-
class="rounded-(--
|
|
271
|
+
class="rounded-(--layout-frame-radius) bg-muted/65 p-0.5">
|
|
273
272
|
<div class="grid grid-cols-3 gap-1">
|
|
274
273
|
@for (option of themeSchemeOptions; track option.value) {
|
|
275
274
|
<button
|
|
@@ -297,7 +296,7 @@ class EtosThemeSwitcherComponent {
|
|
|
297
296
|
<div class="px-1">
|
|
298
297
|
<p class="text-[0.72rem] font-semibold uppercase tracking-[0.22em] text-muted-foreground">Layout</p>
|
|
299
298
|
</div>
|
|
300
|
-
<div class="rounded-(--
|
|
299
|
+
<div class="rounded-(--layout-frame-radius) bg-muted/65 p-0.5">
|
|
301
300
|
<div class="grid grid-cols-3 gap-1">
|
|
302
301
|
@for (option of layoutModeOptions; track option.value) {
|
|
303
302
|
<button
|
|
@@ -326,7 +325,7 @@ class EtosThemeSwitcherComponent {
|
|
|
326
325
|
<div class="px-1">
|
|
327
326
|
<p class="text-[0.72rem] font-semibold uppercase tracking-[0.22em] text-muted-foreground">Width</p>
|
|
328
327
|
</div>
|
|
329
|
-
<div class="rounded-(--
|
|
328
|
+
<div class="rounded-(--layout-frame-radius) bg-muted/65 p-0.5">
|
|
330
329
|
<div class="grid grid-cols-3 gap-1">
|
|
331
330
|
@for (option of layoutWidthOptions; track option.value) {
|
|
332
331
|
<button
|
|
@@ -381,7 +380,7 @@ class EtosThemeSwitcherComponent {
|
|
|
381
380
|
</ng-template>
|
|
382
381
|
`, isInline: true, dependencies: [{ kind: "component", type: AvatarComponent, selector: "ui-avatar", inputs: ["class"] }, { kind: "component", type: AvatarFallbackComponent, selector: "ui-avatar-fallback", inputs: ["class"] }, { kind: "component", type: AvatarImageComponent, selector: "ui-avatar-image", inputs: ["src", "alt", "class"] }, { kind: "component", type: ButtonComponent, selector: "button[ui-button], a[ui-button]", inputs: ["variant", "size", "class"] }, { kind: "directive", type: PopoverContentDirective, selector: "ng-template[uiPopoverContent]", exportAs: ["uiPopoverContent"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[uiPopoverTrigger]", inputs: ["uiPopoverTrigger", "side", "align", "sideOffset", "disabled"], outputs: ["openedChange"], exportAs: ["uiPopoverTrigger"] }, { kind: "component", type: UiNavIconComponent, selector: "ui-nav-icon", inputs: ["name", "class", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
383
382
|
}
|
|
384
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
383
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: EtosThemeSwitcherComponent, decorators: [{
|
|
385
384
|
type: Component,
|
|
386
385
|
args: [{
|
|
387
386
|
selector: 'etos-theme-switcher',
|
|
@@ -470,7 +469,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
470
469
|
<section
|
|
471
470
|
data-setting="theme-scheme"
|
|
472
471
|
[attr.data-current]="themeScheme()"
|
|
473
|
-
class="rounded-(--
|
|
472
|
+
class="rounded-(--layout-frame-radius) bg-muted/65 p-0.5">
|
|
474
473
|
<div class="grid grid-cols-3 gap-1">
|
|
475
474
|
@for (option of themeSchemeOptions; track option.value) {
|
|
476
475
|
<button
|
|
@@ -498,7 +497,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
498
497
|
<div class="px-1">
|
|
499
498
|
<p class="text-[0.72rem] font-semibold uppercase tracking-[0.22em] text-muted-foreground">Layout</p>
|
|
500
499
|
</div>
|
|
501
|
-
<div class="rounded-(--
|
|
500
|
+
<div class="rounded-(--layout-frame-radius) bg-muted/65 p-0.5">
|
|
502
501
|
<div class="grid grid-cols-3 gap-1">
|
|
503
502
|
@for (option of layoutModeOptions; track option.value) {
|
|
504
503
|
<button
|
|
@@ -527,7 +526,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
527
526
|
<div class="px-1">
|
|
528
527
|
<p class="text-[0.72rem] font-semibold uppercase tracking-[0.22em] text-muted-foreground">Width</p>
|
|
529
528
|
</div>
|
|
530
|
-
<div class="rounded-(--
|
|
529
|
+
<div class="rounded-(--layout-frame-radius) bg-muted/65 p-0.5">
|
|
531
530
|
<div class="grid grid-cols-3 gap-1">
|
|
532
531
|
@for (option of layoutWidthOptions; track option.value) {
|
|
533
532
|
<button
|
|
@@ -585,8 +584,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
585
584
|
}], propDecorators: { popoverTrigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], userInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInfo", required: false }] }], userName: [{ type: i0.Input, args: [{ isSignal: true, alias: "userName", required: false }] }], userSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "userSubtitle", required: false }] }], avatarSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarSrc", required: false }] }], avatarAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarAlt", required: false }] }], quickActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickActions", required: true }] }], notificationShortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "notificationShortcut", required: false }] }], showNotificationShortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNotificationShortcut", required: false }] }], popoverSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverSide", required: false }] }], popoverAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverAlign", required: false }] }], popoverSideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverSideOffset", required: false }] }], actionSelected: [{ type: i0.Output, args: ["actionSelected"] }] } });
|
|
586
585
|
|
|
587
586
|
class EmptyLayout {
|
|
588
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
589
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.
|
|
587
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: EmptyLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
588
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: EmptyLayout, isStandalone: true, selector: "empty", ngImport: i0, template: `
|
|
590
589
|
<div
|
|
591
590
|
class="h-dvh overflow-hidden bg-neutral-200 bg-[linear-gradient(rgba(212,212,212,0.45)_1px,transparent_1px),linear-gradient(to_right,rgba(212,212,212,0.45)_1px,transparent_1px)] bg-position-[center_center] bg-size-[2.775rem_2.775rem]">
|
|
592
591
|
<div class="relative isolate box-border h-full overflow-hidden py-3">
|
|
@@ -606,7 +605,7 @@ class EmptyLayout {
|
|
|
606
605
|
</div>
|
|
607
606
|
`, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
608
607
|
}
|
|
609
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
608
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: EmptyLayout, decorators: [{
|
|
610
609
|
type: Component,
|
|
611
610
|
args: [{ selector: 'empty', imports: [RouterOutlet], template: `
|
|
612
611
|
<div
|
|
@@ -701,8 +700,8 @@ class HorizontalLayout {
|
|
|
701
700
|
}
|
|
702
701
|
return classes.join(' ');
|
|
703
702
|
}, ...(ngDevMode ? [{ debugName: "contentClasses" }] : /* istanbul ignore next */ []));
|
|
704
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
705
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
703
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: HorizontalLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
704
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: HorizontalLayout, isStandalone: true, selector: "horizontal", inputs: { brandTemplate: { classPropertyName: "brandTemplate", publicName: "brandTemplate", isSignal: true, isRequired: false, transformFunction: null }, profileTemplate: { classPropertyName: "profileTemplate", publicName: "profileTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-layout-width": "layoutWidth()" }, classAttribute: "block" }, ngImport: i0, template: `
|
|
706
705
|
<div
|
|
707
706
|
class="min-h-screen bg-neutral-200 text-neutral-600 bg-[linear-gradient(rgba(212,212,212,0.45)_1px,transparent_1px),linear-gradient(to_right,rgba(212,212,212,0.45)_1px,transparent_1px)] bg-position-[center_center] bg-size-[2.775rem_2.775rem]">
|
|
708
707
|
<div [class]="shellClasses()">
|
|
@@ -746,7 +745,7 @@ class HorizontalLayout {
|
|
|
746
745
|
</div>
|
|
747
746
|
`, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: TopbarComponent, selector: "topbar", inputs: ["items", "navigationId", "appearance", "ariaLabel", "class", "autoRegister", "showHamburger", "hamburgerLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
748
747
|
}
|
|
749
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
748
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: HorizontalLayout, decorators: [{
|
|
750
749
|
type: Component,
|
|
751
750
|
args: [{ selector: 'horizontal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, RouterOutlet, TopbarComponent], host: {
|
|
752
751
|
class: 'block',
|
|
@@ -814,27 +813,50 @@ class VerticalLayout {
|
|
|
814
813
|
return 'relative isolate h-full overflow-hidden py-2 lg:py-18';
|
|
815
814
|
}
|
|
816
815
|
}, ...(ngDevMode ? [{ debugName: "shellClasses" }] : /* istanbul ignore next */ []));
|
|
816
|
+
frameClasses = computed(() => {
|
|
817
|
+
if (this.layoutWidth() === 'wide') {
|
|
818
|
+
return 'relative h-full border-y border-brand';
|
|
819
|
+
}
|
|
820
|
+
return '-mx-18 relative h-full border-y border-brand';
|
|
821
|
+
}, ...(ngDevMode ? [{ debugName: "frameClasses" }] : /* istanbul ignore next */ []));
|
|
822
|
+
frameBodyClasses = computed(() => {
|
|
823
|
+
if (this.layoutWidth() === 'wide') {
|
|
824
|
+
return 'h-full lg:px-10';
|
|
825
|
+
}
|
|
826
|
+
return 'h-full px-20';
|
|
827
|
+
}, ...(ngDevMode ? [{ debugName: "frameBodyClasses" }] : /* istanbul ignore next */ []));
|
|
817
828
|
gridClasses = computed(() => {
|
|
829
|
+
const classes = [
|
|
830
|
+
'relative',
|
|
831
|
+
'mx-auto',
|
|
832
|
+
'grid',
|
|
833
|
+
'h-full',
|
|
834
|
+
'w-full',
|
|
835
|
+
'max-w-full',
|
|
836
|
+
'grid-cols-[auto_minmax(0,1fr)]',
|
|
837
|
+
'items-stretch',
|
|
838
|
+
'bg-background/65',
|
|
839
|
+
];
|
|
818
840
|
switch (this.layoutWidth()) {
|
|
819
|
-
case '
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
return 'relative mx-auto grid h-full w-fit max-w-full grid-cols-[auto_minmax(0,100rem)] items-stretch bg-background/65 lg:grid-cols-[auto_minmax(0,96rem)]';
|
|
841
|
+
case 'container':
|
|
842
|
+
classes.push('lg:max-w-[var(--layout-vertical-shell-max-width)]');
|
|
843
|
+
break;
|
|
823
844
|
default:
|
|
824
|
-
|
|
845
|
+
break;
|
|
825
846
|
}
|
|
847
|
+
return classes.join(' ');
|
|
826
848
|
}, ...(ngDevMode ? [{ debugName: "gridClasses" }] : /* istanbul ignore next */ []));
|
|
827
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
828
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
849
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: VerticalLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
850
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: VerticalLayout, isStandalone: true, selector: "vertical", inputs: { sidebarAppearance: { classPropertyName: "sidebarAppearance", publicName: "sidebarAppearance", isSignal: true, isRequired: false, transformFunction: null }, sidebarPosition: { classPropertyName: "sidebarPosition", publicName: "sidebarPosition", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, sidebarHeaderTemplate: { classPropertyName: "sidebarHeaderTemplate", publicName: "sidebarHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, sidebarFooterTemplate: { classPropertyName: "sidebarFooterTemplate", publicName: "sidebarFooterTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-layout-width": "layoutWidth()" }, classAttribute: "block h-dvh overflow-hidden" }, ngImport: i0, template: `
|
|
829
851
|
<!-- prettier-ignore -->
|
|
830
852
|
<div class="h-full overflow-hidden bg-neutral-200 bg-[linear-gradient(rgba(212,212,212,0.65)_1px,transparent_1px),linear-gradient(to_right,rgba(212,212,212,0.65)_1px,transparent_1px)] bg-position-[center_center] bg-size-[2.775rem_2.775rem]">
|
|
831
853
|
<div [class]="shellClasses()">
|
|
832
|
-
<div class="
|
|
854
|
+
<div [class]="frameClasses()">
|
|
833
855
|
<div aria-hidden="true" class="pointer-events-none absolute inset-x-0 inset-y-8">
|
|
834
856
|
<div class="absolute inset-x-0 top-3.75 h-px bg-brand"></div>
|
|
835
857
|
<div class="absolute inset-x-0 bottom-3.75 h-px bg-brand"></div>
|
|
836
858
|
</div>
|
|
837
|
-
<div class="
|
|
859
|
+
<div [class]="frameBodyClasses()">
|
|
838
860
|
<div [class]="gridClasses()">
|
|
839
861
|
<div
|
|
840
862
|
aria-hidden="true"
|
|
@@ -883,7 +905,7 @@ class VerticalLayout {
|
|
|
883
905
|
</div>
|
|
884
906
|
`, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: SidebarComponent, selector: "sidebar", inputs: ["items", "navigationId", "appearance", "position", "ariaLabel", "header", "class", "autoMobile", "autoRegister"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
885
907
|
}
|
|
886
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
908
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: VerticalLayout, decorators: [{
|
|
887
909
|
type: Component,
|
|
888
910
|
args: [{ selector: 'vertical', imports: [NgTemplateOutlet, RouterOutlet, SidebarComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
889
911
|
class: 'block h-dvh overflow-hidden',
|
|
@@ -892,12 +914,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
892
914
|
<!-- prettier-ignore -->
|
|
893
915
|
<div class="h-full overflow-hidden bg-neutral-200 bg-[linear-gradient(rgba(212,212,212,0.65)_1px,transparent_1px),linear-gradient(to_right,rgba(212,212,212,0.65)_1px,transparent_1px)] bg-position-[center_center] bg-size-[2.775rem_2.775rem]">
|
|
894
916
|
<div [class]="shellClasses()">
|
|
895
|
-
<div class="
|
|
917
|
+
<div [class]="frameClasses()">
|
|
896
918
|
<div aria-hidden="true" class="pointer-events-none absolute inset-x-0 inset-y-8">
|
|
897
919
|
<div class="absolute inset-x-0 top-3.75 h-px bg-brand"></div>
|
|
898
920
|
<div class="absolute inset-x-0 bottom-3.75 h-px bg-brand"></div>
|
|
899
921
|
</div>
|
|
900
|
-
<div class="
|
|
922
|
+
<div [class]="frameBodyClasses()">
|
|
901
923
|
<div [class]="gridClasses()">
|
|
902
924
|
<div
|
|
903
925
|
aria-hidden="true"
|
|
@@ -955,8 +977,8 @@ class EtosLayoutComponent {
|
|
|
955
977
|
layoutProfileTemplate = input(null, ...(ngDevMode ? [{ debugName: "layoutProfileTemplate" }] : /* istanbul ignore next */ []));
|
|
956
978
|
layout = inject(LayoutService);
|
|
957
979
|
resolvedMode = computed(() => this.mode() ?? this.layout.mode(), ...(ngDevMode ? [{ debugName: "resolvedMode" }] : /* istanbul ignore next */ []));
|
|
958
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
959
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
980
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: EtosLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
981
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: EtosLayoutComponent, isStandalone: true, selector: "etos-layout", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, sidebarHeaderTemplate: { classPropertyName: "sidebarHeaderTemplate", publicName: "sidebarHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, sidebarFooterTemplate: { classPropertyName: "sidebarFooterTemplate", publicName: "sidebarFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, layoutBrandTemplate: { classPropertyName: "layoutBrandTemplate", publicName: "layoutBrandTemplate", isSignal: true, isRequired: false, transformFunction: null }, layoutProfileTemplate: { classPropertyName: "layoutProfileTemplate", publicName: "layoutProfileTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-layout-mode": "resolvedMode()" }, classAttribute: "contents" }, ngImport: i0, template: `
|
|
960
982
|
@switch (resolvedMode()) {
|
|
961
983
|
@case ('empty') {
|
|
962
984
|
<empty />
|
|
@@ -972,7 +994,7 @@ class EtosLayoutComponent {
|
|
|
972
994
|
}
|
|
973
995
|
`, isInline: true, dependencies: [{ kind: "component", type: EmptyLayout, selector: "empty" }, { kind: "component", type: HorizontalLayout, selector: "horizontal", inputs: ["brandTemplate", "profileTemplate"] }, { kind: "component", type: VerticalLayout, selector: "vertical", inputs: ["sidebarAppearance", "sidebarPosition", "ariaLabel", "sidebarHeaderTemplate", "sidebarFooterTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
974
996
|
}
|
|
975
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
997
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: EtosLayoutComponent, decorators: [{
|
|
976
998
|
type: Component,
|
|
977
999
|
args: [{
|
|
978
1000
|
selector: 'etos-layout',
|