@rxap/layout 18.1.1 → 18.1.2-dev.1
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/CHANGELOG.md +10 -0
- package/esm2022/lib/default-header/default-header.component.mjs +3 -4
- package/esm2022/lib/default-header/settings-button/settings-button.component.mjs +6 -4
- package/esm2022/lib/layout/layout.component.mjs +2 -24
- package/esm2022/lib/navigation/navigation-item/navigation-item.component.mjs +10 -5
- package/esm2022/lib/navigation/navigation-item.mjs +1 -1
- package/esm2022/lib/provide.mjs +16 -2
- package/esm2022/lib/tokens.mjs +6 -1
- package/fesm2022/rxap-layout.mjs +32 -30
- package/fesm2022/rxap-layout.mjs.map +1 -1
- package/lib/default-header/default-header.component.d.ts +1 -3
- package/lib/default-header/settings-button/settings-button.component.d.ts +2 -1
- package/lib/layout/layout.component.d.ts +2 -6
- package/lib/layout.service.d.ts +1 -1
- package/lib/navigation/navigation-item.d.ts +1 -1
- package/lib/provide.d.ts +3 -0
- package/lib/tokens.d.ts +2 -1
- package/package.json +31 -41
package/fesm2022/rxap-layout.mjs
CHANGED
|
@@ -15,6 +15,7 @@ import { ObserveCurrentThemeDensity, ThemeService } from '@rxap/ngx-theme';
|
|
|
15
15
|
import { Observable, ReplaySubject, of, from, combineLatest, Subscription, debounceTime } from 'rxjs';
|
|
16
16
|
import * as i2$1 from '@angular/cdk/portal';
|
|
17
17
|
import { ComponentPortal, PortalModule, CdkPortalOutlet, TemplatePortal } from '@angular/cdk/portal';
|
|
18
|
+
import { staticDataSource } from '@rxap/data-source';
|
|
18
19
|
import { coerceArray, JoinPath } from '@rxap/utilities';
|
|
19
20
|
import { switchMap, catchError, map, filter, startWith, tap } from 'rxjs/operators';
|
|
20
21
|
import { trigger, transition, style, animate } from '@angular/animations';
|
|
@@ -28,7 +29,6 @@ import * as i1$1 from '@angular/material/toolbar';
|
|
|
28
29
|
import { MatToolbarModule, MatToolbar, MatToolbarRow } from '@angular/material/toolbar';
|
|
29
30
|
import * as i1$2 from '@angular/material/menu';
|
|
30
31
|
import { MatMenuModule, MatMenu, MatMenuTrigger, MatMenuItem } from '@angular/material/menu';
|
|
31
|
-
import { UserSettingsThemeService, IsThemeDensity, ThemeDensity, UserProfileDataSource } from '@rxap/ngx-user';
|
|
32
32
|
import { PubSubService } from '@rxap/ngx-pub-sub';
|
|
33
33
|
import { ClickOnLink } from '@rxap/browser-utilities';
|
|
34
34
|
|
|
@@ -79,6 +79,10 @@ const EXTRACT_USERNAME_FROM_PROFILE = new InjectionToken('extract-username-from-
|
|
|
79
79
|
providedIn: 'root',
|
|
80
80
|
factory: () => (profile) => (profile ? profile.username ?? profile.email ?? profile.name : null) ?? null,
|
|
81
81
|
});
|
|
82
|
+
const RXAP_USER_PROFILE_DATA_SOURCE = new InjectionToken('rxap/layout/user-profile-data-source', {
|
|
83
|
+
providedIn: 'root',
|
|
84
|
+
factory: () => staticDataSource(null),
|
|
85
|
+
});
|
|
82
86
|
const RXAP_EXTERNAL_APP = new InjectionToken('rxap/layout/external-app');
|
|
83
87
|
const RXAP_RELEASE_INFO_MODULE = new InjectionToken('rxap/layout/release-info-module');
|
|
84
88
|
const RXAP_SETTINGS_MENU_ITEM_COMPONENT = new InjectionToken('rxap/layout/settings-menu-item-component');
|
|
@@ -456,8 +460,12 @@ class NavigationItemComponent {
|
|
|
456
460
|
if (urlParts[0] === '') {
|
|
457
461
|
urlParts[0] = '/';
|
|
458
462
|
}
|
|
459
|
-
|
|
460
|
-
|
|
463
|
+
const routerLink = coerceArray(this.item().routerLink).map(fragment => fragment.split('/')).flat();
|
|
464
|
+
if (routerLink[0] === '') {
|
|
465
|
+
routerLink[0] = '/';
|
|
466
|
+
}
|
|
467
|
+
for (let i = 0; i < routerLink.length; i++) {
|
|
468
|
+
if (urlParts[i] !== routerLink[i]) {
|
|
461
469
|
isActive = false;
|
|
462
470
|
break;
|
|
463
471
|
}
|
|
@@ -490,7 +498,7 @@ class NavigationItemComponent {
|
|
|
490
498
|
return item;
|
|
491
499
|
}
|
|
492
500
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: NavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
493
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: NavigationItemComponent, isStandalone: true, selector: "li[rxap-navigation-item]", inputs: { level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"{\n 'border-l-4 text-accent-400 border-accent-600': active(),\n }\">\n <a [routerLink]=\"item().routerLink\"\n class=\"h-12 pl-4 pr-5 flex flex-row justify-between items-center gap-x-4\"\n matRipple\n routerLinkActive\n\n >\n <span\n [ngClass]=\"itemClasses()\"\n class=\"grow whitespace-nowrap\"\n >\n {{ item().label }}\n </span>\n <mat-icon *ngIf=\"item().icon\" [rxapIcon]=\"
|
|
501
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: NavigationItemComponent, isStandalone: true, selector: "li[rxap-navigation-item]", inputs: { level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"{\n 'border-l-4 text-accent-400 border-accent-600': active(),\n }\">\n <a [routerLink]=\"item().routerLink\"\n class=\"h-12 pl-4 pr-5 flex flex-row justify-between items-center gap-x-4\"\n matRipple\n routerLinkActive\n\n >\n <span\n [ngClass]=\"itemClasses()\"\n class=\"grow whitespace-nowrap\"\n >\n {{ item().label }}\n </span>\n <mat-icon *ngIf=\"item().icon as icon\" [rxapIcon]=\"icon\"></mat-icon>\n </a>\n\n <ng-container *ngIf=\"item().children?.length && active()\">\n\n <mat-divider></mat-divider>\n\n <ul [@sub-nav]\n [items]=\"children ?? []\"\n [level]=\"level() + 1\"\n rxap-navigation\n >\n </ul>\n\n <mat-divider></mat-divider>\n\n </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i0.forwardRef(() => RouterLinkActive), selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i0.forwardRef(() => RouterLink), selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i0.forwardRef(() => NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatRippleModule) }, { kind: "directive", type: i0.forwardRef(() => i1.MatRipple), selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i2.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i0.forwardRef(() => IconDirective), selector: "mat-icon[rxapIcon]", inputs: ["rxapIcon"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatDividerModule) }, { kind: "component", type: i0.forwardRef(() => i3.MatDivider), selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i0.forwardRef(() => NavigationComponent), selector: "ul[rxap-navigation]", inputs: ["items", "level", "root"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
|
|
494
502
|
trigger('sub-nav', [
|
|
495
503
|
transition(':enter', [
|
|
496
504
|
style({
|
|
@@ -536,7 +544,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
|
|
|
536
544
|
MatDividerModule,
|
|
537
545
|
forwardRef(() => NavigationComponent),
|
|
538
546
|
NgClass,
|
|
539
|
-
], template: "<div [ngClass]=\"{\n 'border-l-4 text-accent-400 border-accent-600': active(),\n }\">\n <a [routerLink]=\"item().routerLink\"\n class=\"h-12 pl-4 pr-5 flex flex-row justify-between items-center gap-x-4\"\n matRipple\n routerLinkActive\n\n >\n <span\n [ngClass]=\"itemClasses()\"\n class=\"grow whitespace-nowrap\"\n >\n {{ item().label }}\n </span>\n <mat-icon *ngIf=\"item().icon\" [rxapIcon]=\"
|
|
547
|
+
], template: "<div [ngClass]=\"{\n 'border-l-4 text-accent-400 border-accent-600': active(),\n }\">\n <a [routerLink]=\"item().routerLink\"\n class=\"h-12 pl-4 pr-5 flex flex-row justify-between items-center gap-x-4\"\n matRipple\n routerLinkActive\n\n >\n <span\n [ngClass]=\"itemClasses()\"\n class=\"grow whitespace-nowrap\"\n >\n {{ item().label }}\n </span>\n <mat-icon *ngIf=\"item().icon as icon\" [rxapIcon]=\"icon\"></mat-icon>\n </a>\n\n <ng-container *ngIf=\"item().children?.length && active()\">\n\n <mat-divider></mat-divider>\n\n <ul [@sub-nav]\n [items]=\"children ?? []\"\n [level]=\"level() + 1\"\n rxap-navigation\n >\n </ul>\n\n <mat-divider></mat-divider>\n\n </ng-container>\n</div>\n" }]
|
|
540
548
|
}] });
|
|
541
549
|
|
|
542
550
|
class NavigationComponent {
|
|
@@ -748,31 +756,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
|
|
|
748
756
|
|
|
749
757
|
class LayoutComponent {
|
|
750
758
|
constructor() {
|
|
751
|
-
this.userSettingsThemeService = inject(UserSettingsThemeService);
|
|
752
|
-
this.themeService = inject(ThemeService);
|
|
753
759
|
this.logoService = inject(LogoService);
|
|
754
760
|
this.logoSrc = computed(() => this.logoService.src());
|
|
755
761
|
this.logoWidth = computed(() => this.logoService.width());
|
|
756
762
|
this.logoHeight = computed(() => this.logoService.height());
|
|
757
763
|
}
|
|
758
|
-
ngOnDestroy() {
|
|
759
|
-
this.userSettingsThemeService.stopSync();
|
|
760
|
-
}
|
|
761
|
-
ngOnInit() {
|
|
762
|
-
this.userSettingsThemeService.startSync().then(() => {
|
|
763
|
-
this.userSettingsThemeService.get().then(theme => {
|
|
764
|
-
if (theme.preset && theme.preset !== 'default') {
|
|
765
|
-
this.themeService.setTheme(theme.preset, true);
|
|
766
|
-
}
|
|
767
|
-
if (theme.density && IsThemeDensity(theme.density) && theme.density !== ThemeDensity.Normal) {
|
|
768
|
-
this.themeService.setDensity(theme.density, true);
|
|
769
|
-
}
|
|
770
|
-
if (theme.typography && theme.typography !== 'default') {
|
|
771
|
-
this.themeService.setTypography(theme.typography, true);
|
|
772
|
-
}
|
|
773
|
-
});
|
|
774
|
-
});
|
|
775
|
-
}
|
|
776
764
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
777
765
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: LayoutComponent, isStandalone: true, selector: "rxap-layout", ngImport: i0, template: "<rxap-header class=\"z-10 w-full fixed top-0\"></rxap-header>\n<rxap-navigation-progress-bar></rxap-navigation-progress-bar>\n<rxap-sidenav>\n <router-outlet></router-outlet>\n <ng-template rxapSidenavFooter>\n <img\n [src]=\"logoSrc()\"\n [routerLink]=\"['/']\"\n [width]=\"logoWidth()\"\n [height]=\"logoHeight()\"\n alt=\"logo\"\n class=\"grow-0 mx-16 cursor-pointer\"\n />\n <div class=\"grow-0 px-16 mt-4\">\n <rxap-release-info></rxap-release-info>\n </div>\n </ng-template>\n</rxap-sidenav>\n<rxap-footer class=\"z-10 w-full fixed bottom-0\"></rxap-footer>\n", styles: [""], dependencies: [{ kind: "component", type: HeaderComponent, selector: "rxap-header", inputs: ["color"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: FooterComponent, selector: "rxap-footer" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: SidenavComponent, selector: "rxap-sidenav" }, { kind: "component", type: ReleaseInfoComponent, selector: "rxap-release-info" }, { kind: "directive", type: SidenavFooterDirective, selector: "[rxapSidenavFooter]" }, { kind: "component", type: NavigationProgressBarComponent, selector: "rxap-navigation-progress-bar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
778
766
|
}
|
|
@@ -946,7 +934,7 @@ class SettingsButtonComponent {
|
|
|
946
934
|
runInInjectionContext(this.injector, () => item.action());
|
|
947
935
|
}
|
|
948
936
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SettingsButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
949
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: SettingsButtonComponent, isStandalone: true, selector: "rxap-settings-button", ngImport: i0, template: "<button [matMenuTriggerFor]=\"menu\" mat-icon-button>\n <mat-icon svgIcon=\"cog\"></mat-icon>\n</button>\n\n<mat-menu #menu=\"matMenu\">\n <button (click)=\"theme.toggleDarkTheme()\" mat-menu-item>\n @if (theme.darkMode()) {\n <mat-icon svgIcon=\"brightness-2\"></mat-icon>\n } @else {\n <mat-icon svgIcon=\"brightness-5\"></mat-icon>\n }\n <span i18n>Mode</span>\n </button>\n <button [matMenuTriggerFor]=\"themeMenu\" mat-menu-item>\n <mat-icon svgIcon=\"compare\"></mat-icon>\n <span i18n>Theme</span>\n </button>\n @for (item of customItems(); track item.label) {\n <button (click)=\"clickItem(item)\" mat-menu-item>\n <mat-icon [rxapIcon]=\"
|
|
937
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: SettingsButtonComponent, isStandalone: true, selector: "rxap-settings-button", ngImport: i0, template: "<button [matMenuTriggerFor]=\"menu\" mat-icon-button>\n <mat-icon svgIcon=\"cog\"></mat-icon>\n</button>\n\n<mat-menu #menu=\"matMenu\">\n <button (click)=\"theme.toggleDarkTheme()\" mat-menu-item>\n @if (theme.darkMode()) {\n <mat-icon svgIcon=\"brightness-2\"></mat-icon>\n } @else {\n <mat-icon svgIcon=\"brightness-5\"></mat-icon>\n }\n <span i18n>Mode</span>\n </button>\n <button [matMenuTriggerFor]=\"themeMenu\" mat-menu-item>\n <mat-icon svgIcon=\"compare\"></mat-icon>\n <span i18n>Theme</span>\n </button>\n @for (item of customItems(); track item.label) {\n <button (click)=\"clickItem(item)\" mat-menu-item>\n <mat-icon *ngIf=\"item.icon as icon\" [rxapIcon]=\"icon\"></mat-icon>\n <span>{{ item.label }}</span>\n </button>\n }\n @for (item of customItemComponents(); track item) {\n <ng-template [cdkPortalOutlet]=\"item\"></ng-template>\n }\n</mat-menu>\n\n<mat-menu #themeMenu=\"matMenu\" xPosition=\"before\">\n <button [matMenuTriggerFor]=\"themeDensityMenu\" mat-menu-item>\n <mat-icon svgIcon=\"move-resize\"></mat-icon>\n <span i18n>Density</span>\n </button>\n @if (availableTypographies?.length) {\n <button [matMenuTriggerFor]=\"themeFontMenu\" mat-menu-item>\n <mat-icon svgIcon=\"format-font\"></mat-icon>\n <span i18n>Font</span>\n </button>\n }\n @if (availableThemes?.length) {\n <button [matMenuTriggerFor]=\"themePresetMenu\" mat-menu-item>\n <mat-icon svgIcon=\"shape-outline\"></mat-icon>\n <span i18n>Preset</span>\n </button>\n }\n</mat-menu>\n\n<mat-menu #themeDensityMenu=\"matMenu\" xPosition=\"before\">\n <button (click)=\"setDensity(0)\" (mouseenter)=\"previewDensity(0)\" (mouseleave)=\"restoreDensity()\" mat-menu-item>\n <mat-icon svgIcon=\"size-l\"></mat-icon>\n <span i18n>Normal</span>\n </button>\n <button (click)=\"setDensity(-1)\" (mouseenter)=\"previewDensity(-1)\" (mouseleave)=\"restoreDensity()\" mat-menu-item>\n <mat-icon svgIcon=\"size-m\"></mat-icon>\n <span i18n>Dense</span>\n </button>\n <button (click)=\"setDensity(-2)\" (mouseenter)=\"previewDensity(-2)\" (mouseleave)=\"restoreDensity()\" mat-menu-item>\n <mat-icon svgIcon=\"size-s\"></mat-icon>\n <span i18n>Very Dense</span>\n </button>\n <button (click)=\"setDensity(-3)\" (mouseenter)=\"previewDensity(-3)\" (mouseleave)=\"restoreDensity()\" mat-menu-item>\n <mat-icon svgIcon=\"size-xs\"></mat-icon>\n <span i18n>Extreme Dense</span>\n </button>\n</mat-menu>\n<mat-menu #themeFontMenu=\"matMenu\" xPosition=\"before\">\n @for (typographyName of availableTypographies ?? []; track typographyName) {\n <button (click)=\"setTypography(typographyName)\"\n (mouseenter)=\"previewTypography(typographyName)\"\n (mouseleave)=\"restoreTypography()\"\n mat-menu-item>\n {{ typographyName }}\n </button>\n }\n</mat-menu>\n\n<mat-menu #themePresetMenu=\"matMenu\" xPosition=\"before\">\n @for (themeName of availableThemes ?? []; track themeName) {\n <button (click)=\"setTheme(themeName)\"\n (mouseenter)=\"previewTheme(themeName)\"\n (mouseleave)=\"restoreTheme()\"\n mat-menu-item>\n {{ themeName }}\n </button>\n }\n</mat-menu>\n", styles: [""], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: IconDirective, selector: "mat-icon[rxapIcon]", inputs: ["rxapIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
950
938
|
}
|
|
951
939
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SettingsButtonComponent, decorators: [{
|
|
952
940
|
type: Component,
|
|
@@ -958,7 +946,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
|
|
|
958
946
|
MatMenuItem,
|
|
959
947
|
CdkPortalOutlet,
|
|
960
948
|
IconDirective,
|
|
961
|
-
|
|
949
|
+
NgIf,
|
|
950
|
+
], template: "<button [matMenuTriggerFor]=\"menu\" mat-icon-button>\n <mat-icon svgIcon=\"cog\"></mat-icon>\n</button>\n\n<mat-menu #menu=\"matMenu\">\n <button (click)=\"theme.toggleDarkTheme()\" mat-menu-item>\n @if (theme.darkMode()) {\n <mat-icon svgIcon=\"brightness-2\"></mat-icon>\n } @else {\n <mat-icon svgIcon=\"brightness-5\"></mat-icon>\n }\n <span i18n>Mode</span>\n </button>\n <button [matMenuTriggerFor]=\"themeMenu\" mat-menu-item>\n <mat-icon svgIcon=\"compare\"></mat-icon>\n <span i18n>Theme</span>\n </button>\n @for (item of customItems(); track item.label) {\n <button (click)=\"clickItem(item)\" mat-menu-item>\n <mat-icon *ngIf=\"item.icon as icon\" [rxapIcon]=\"icon\"></mat-icon>\n <span>{{ item.label }}</span>\n </button>\n }\n @for (item of customItemComponents(); track item) {\n <ng-template [cdkPortalOutlet]=\"item\"></ng-template>\n }\n</mat-menu>\n\n<mat-menu #themeMenu=\"matMenu\" xPosition=\"before\">\n <button [matMenuTriggerFor]=\"themeDensityMenu\" mat-menu-item>\n <mat-icon svgIcon=\"move-resize\"></mat-icon>\n <span i18n>Density</span>\n </button>\n @if (availableTypographies?.length) {\n <button [matMenuTriggerFor]=\"themeFontMenu\" mat-menu-item>\n <mat-icon svgIcon=\"format-font\"></mat-icon>\n <span i18n>Font</span>\n </button>\n }\n @if (availableThemes?.length) {\n <button [matMenuTriggerFor]=\"themePresetMenu\" mat-menu-item>\n <mat-icon svgIcon=\"shape-outline\"></mat-icon>\n <span i18n>Preset</span>\n </button>\n }\n</mat-menu>\n\n<mat-menu #themeDensityMenu=\"matMenu\" xPosition=\"before\">\n <button (click)=\"setDensity(0)\" (mouseenter)=\"previewDensity(0)\" (mouseleave)=\"restoreDensity()\" mat-menu-item>\n <mat-icon svgIcon=\"size-l\"></mat-icon>\n <span i18n>Normal</span>\n </button>\n <button (click)=\"setDensity(-1)\" (mouseenter)=\"previewDensity(-1)\" (mouseleave)=\"restoreDensity()\" mat-menu-item>\n <mat-icon svgIcon=\"size-m\"></mat-icon>\n <span i18n>Dense</span>\n </button>\n <button (click)=\"setDensity(-2)\" (mouseenter)=\"previewDensity(-2)\" (mouseleave)=\"restoreDensity()\" mat-menu-item>\n <mat-icon svgIcon=\"size-s\"></mat-icon>\n <span i18n>Very Dense</span>\n </button>\n <button (click)=\"setDensity(-3)\" (mouseenter)=\"previewDensity(-3)\" (mouseleave)=\"restoreDensity()\" mat-menu-item>\n <mat-icon svgIcon=\"size-xs\"></mat-icon>\n <span i18n>Extreme Dense</span>\n </button>\n</mat-menu>\n<mat-menu #themeFontMenu=\"matMenu\" xPosition=\"before\">\n @for (typographyName of availableTypographies ?? []; track typographyName) {\n <button (click)=\"setTypography(typographyName)\"\n (mouseenter)=\"previewTypography(typographyName)\"\n (mouseleave)=\"restoreTypography()\"\n mat-menu-item>\n {{ typographyName }}\n </button>\n }\n</mat-menu>\n\n<mat-menu #themePresetMenu=\"matMenu\" xPosition=\"before\">\n @for (themeName of availableThemes ?? []; track themeName) {\n <button (click)=\"setTheme(themeName)\"\n (mouseenter)=\"previewTheme(themeName)\"\n (mouseleave)=\"restoreTheme()\"\n mat-menu-item>\n {{ themeName }}\n </button>\n }\n</mat-menu>\n" }]
|
|
962
951
|
}] });
|
|
963
952
|
|
|
964
953
|
class ExternalAppsService {
|
|
@@ -1089,8 +1078,7 @@ class DefaultHeaderComponent {
|
|
|
1089
1078
|
this.layoutComponentService = inject(LayoutService);
|
|
1090
1079
|
this.collapsable = computed(() => this.layoutComponentService.collapsable());
|
|
1091
1080
|
this.opened = computed(() => this.layoutComponentService.opened());
|
|
1092
|
-
this.
|
|
1093
|
-
this.profile = toSignal(this.userProfileService.connect('user-profile'), { initialValue: null });
|
|
1081
|
+
this.profile = toSignal(inject(RXAP_USER_PROFILE_DATA_SOURCE).connect('user-profile'), { initialValue: null });
|
|
1094
1082
|
}
|
|
1095
1083
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DefaultHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1096
1084
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: DefaultHeaderComponent, isStandalone: true, selector: "rxap-default-header", host: { classAttribute: "grow" }, ngImport: i0, template: "<div class=\"w-full flex flex-row gap-x-4 justify-between items-center\">\n @if (!collapsable()) {\n <rxap-sidenav-toggle-button></rxap-sidenav-toggle-button>\n }\n <div class=\"grow\">\n <ng-content></ng-content>\n </div>\n <rxap-apps-button class=\"grow-0\"></rxap-apps-button>\n <rxap-settings-button class=\"grow-0\"></rxap-settings-button>\n @if (this.profile(); as profile) {\n <rxap-user-profile-icon [profile]=\"profile\" class=\"grow-0\"></rxap-user-profile-icon>\n }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: AppsButtonComponent, selector: "rxap-apps-button" }, { kind: "component", type: SettingsButtonComponent, selector: "rxap-settings-button" }, { kind: "component", type: SidenavToggleButtonComponent, selector: "rxap-sidenav-toggle-button" }, { kind: "component", type: UserProfileIconComponent, selector: "rxap-user-profile-icon", inputs: ["profile"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
@@ -1178,6 +1166,20 @@ function withDefaultHeaderComponent() {
|
|
|
1178
1166
|
useValue: DefaultHeaderComponent,
|
|
1179
1167
|
};
|
|
1180
1168
|
}
|
|
1169
|
+
function withUserProfileDataSource(dataSource, useClass = false) {
|
|
1170
|
+
if (useClass) {
|
|
1171
|
+
return {
|
|
1172
|
+
provide: RXAP_USER_PROFILE_DATA_SOURCE,
|
|
1173
|
+
useClass: dataSource
|
|
1174
|
+
};
|
|
1175
|
+
}
|
|
1176
|
+
else {
|
|
1177
|
+
return {
|
|
1178
|
+
provide: RXAP_USER_PROFILE_DATA_SOURCE,
|
|
1179
|
+
useExisting: dataSource
|
|
1180
|
+
};
|
|
1181
|
+
}
|
|
1182
|
+
}
|
|
1181
1183
|
|
|
1182
1184
|
// region sidenav
|
|
1183
1185
|
// endregion
|
|
@@ -1186,5 +1188,5 @@ function withDefaultHeaderComponent() {
|
|
|
1186
1188
|
* Generated bundle index. Do not edit.
|
|
1187
1189
|
*/
|
|
1188
1190
|
|
|
1189
|
-
export { AppsButtonComponent, BaseLayoutComponent, DefaultHeaderComponent, EXTRACT_USERNAME_FROM_PROFILE, ExternalAppsService, FooterComponent, FooterDirective, FooterService, HeaderComponent, HeaderDirective, HeaderService, IsNavigationDividerItem, IsNavigationInsertItem, IsNavigationItem, LayoutComponent, LayoutService, LogoService, MinimalLayoutComponent, NavigationComponent, NavigationItemComponent, NavigationProgressBarComponent, NavigationService, RXAP_EXTERNAL_APP, RXAP_EXTERNAL_APP_FILTER, RXAP_FOOTER_COMPONENT, RXAP_HEADER_COMPONENT, RXAP_LAYOUT_APPS_GRID, RXAP_LOGO_CONFIG, RXAP_NAVIGATION_CONFIG, RXAP_NAVIGATION_CONFIG_INSERTS, RXAP_RELEASE_INFO_MODULE, RXAP_SETTINGS_MENU_ITEM, RXAP_SETTINGS_MENU_ITEM_COMPONENT, ReleaseInfoComponent, SettingsButtonComponent, SidenavComponent, SidenavFooterDirective, SidenavHeaderDirective, SidenavToggleButtonComponent, UserProfileIconComponent, provideLayout, withDefaultHeaderComponent, withExternalApps, withFooterComponents, withHeaderComponents, withNavigationConfig, withNavigationInserts, withReleaseInfoModules, withSettingsMenuItems };
|
|
1191
|
+
export { AppsButtonComponent, BaseLayoutComponent, DefaultHeaderComponent, EXTRACT_USERNAME_FROM_PROFILE, ExternalAppsService, FooterComponent, FooterDirective, FooterService, HeaderComponent, HeaderDirective, HeaderService, IsNavigationDividerItem, IsNavigationInsertItem, IsNavigationItem, LayoutComponent, LayoutService, LogoService, MinimalLayoutComponent, NavigationComponent, NavigationItemComponent, NavigationProgressBarComponent, NavigationService, RXAP_EXTERNAL_APP, RXAP_EXTERNAL_APP_FILTER, RXAP_FOOTER_COMPONENT, RXAP_HEADER_COMPONENT, RXAP_LAYOUT_APPS_GRID, RXAP_LOGO_CONFIG, RXAP_NAVIGATION_CONFIG, RXAP_NAVIGATION_CONFIG_INSERTS, RXAP_RELEASE_INFO_MODULE, RXAP_SETTINGS_MENU_ITEM, RXAP_SETTINGS_MENU_ITEM_COMPONENT, RXAP_USER_PROFILE_DATA_SOURCE, ReleaseInfoComponent, SettingsButtonComponent, SidenavComponent, SidenavFooterDirective, SidenavHeaderDirective, SidenavToggleButtonComponent, UserProfileIconComponent, provideLayout, withDefaultHeaderComponent, withExternalApps, withFooterComponents, withHeaderComponents, withNavigationConfig, withNavigationInserts, withReleaseInfoModules, withSettingsMenuItems, withUserProfileDataSource };
|
|
1190
1192
|
//# sourceMappingURL=rxap-layout.mjs.map
|