Merge pull request #23750 from abpframework/issue-23113

Add logo provider and tokens to theme-shared package

npm/ng-packs/packages/theme-basic/src/lib/components/logo/logo.component.ts

@@ -1,24 +1,37 @@
-import { ApplicationInfo, EnvironmentService } from '@abp/ng.core';
+import { EnvironmentService } from '@abp/ng.core';
 import { RouterLink } from '@angular/router';
 import { Component, inject } from '@angular/core';
+import { LOGO_APP_NAME_TOKEN, LOGO_URL_TOKEN } from '@abp/ng.theme.shared';
 
 @Component({
   selector: 'abp-logo',
   template: `
     <a class="navbar-brand" routerLink="/">
-      @if (appInfo.logoUrl) {
+      @if (logoUrl) {
-        <img [src]="appInfo.logoUrl" [alt]="appInfo.name" width="100%" height="auto" />
+        <img [src]="logoUrl" [alt]="appName" width="100%" height="auto" />
       } @else {
-        {{ appInfo.name }}
+        {{ appName }}
       }
     </a>
   `,
+  standalone: true,
   imports: [RouterLink],
 })
 export class LogoComponent {
   private environment = inject(EnvironmentService);
 
-  get appInfo(): ApplicationInfo {
+  private readonly providedLogoUrl = inject(LOGO_URL_TOKEN, { optional: true });
-    return this.environment.getEnvironment().application;
+  private readonly providedAppName = inject(LOGO_APP_NAME_TOKEN, { optional: true });
+
+  get logoUrl(): string {
+    return (
+      this.providedLogoUrl ?? this.environment.getEnvironment().application?.logoUrl
+    );
+  }
+
+  get appName(): string {
+    return (
+      this.providedAppName ?? this.environment.getEnvironment().application?.name
+    );
   }
 }

npm/ng-packs/packages/theme-shared/src/lib/providers/index.ts

@@ -3,3 +3,4 @@ export * from './route.provider';
 export * from './tenant-not-found.provider';
 export * from './error-handlers.provider';
 export * from './theme-shared-config.provider';
+export * from './logo.provider';

npm/ng-packs/packages/theme-shared/src/lib/providers/logo.provider.ts

@@ -0,0 +1,51 @@
+import { Environment } from '@abp/ng.core';
+import {
+  EnvironmentProviders,
+  makeEnvironmentProviders,
+  Provider,
+} from '@angular/core';
+import { LOGO_APP_NAME_TOKEN, LOGO_URL_TOKEN } from '../tokens/logo.token';
+
+export enum LogoFeatureKind {
+  Options,
+}
+
+export interface LogoFeature<KindT extends LogoFeatureKind> {
+  ɵkind: KindT;
+  ɵproviders: (Provider | EnvironmentProviders)[];
+}
+
+function makeLogoFeature<KindT extends LogoFeatureKind>(
+  kind: KindT,
+  providers: (Provider | EnvironmentProviders)[],
+): LogoFeature<KindT> {
+  return {
+    ɵkind: kind,
+    ɵproviders: providers,
+  };
+}
+
+export function withEnvironmentOptions(
+  options = {} as Environment,
+): LogoFeature<LogoFeatureKind.Options> {
+  const { name, logoUrl } = options.application || {};
+
+  return makeLogoFeature(LogoFeatureKind.Options, [
+    {
+      provide: LOGO_URL_TOKEN,
+      useValue: logoUrl || '',
+    },
+    {
+      provide: LOGO_APP_NAME_TOKEN,
+      useValue: name || 'ProjectName',
+    },
+  ]);
+}
+
+export function provideLogo(
+  ...features: LogoFeature<LogoFeatureKind>[]
+): EnvironmentProviders {
+  const providers: (Provider | EnvironmentProviders)[] = [];
+  features.forEach(({ ɵproviders }) => providers.push(...ɵproviders));
+  return makeEnvironmentProviders(providers);
+}

npm/ng-packs/packages/theme-shared/src/lib/tokens/index.ts

@@ -3,3 +3,4 @@ export * from './http-error.token';
 export * from './ngx-datatable-messages.token';
 export * from './suppress-unsaved-changes-warning.token';
 export * from './confirmation-icons.token';
+export * from './logo.token';

npm/ng-packs/packages/theme-shared/src/lib/tokens/logo.token.ts

@@ -0,0 +1,6 @@
+import { InjectionToken } from '@angular/core';
+
+export const LOGO_URL_TOKEN = new InjectionToken<string>('LOGO_URL_TOKEN');
+export const LOGO_APP_NAME_TOKEN = new InjectionToken<string>(
+  'LOGO_APP_NAME_TOKEN',
+);

templates/app-nolayers/angular/src/app/app.config.ts

@@ -7,7 +7,7 @@ import { provideAbpCore, withOptions } from '@abp/ng.core';
 import { environment } from '../environments/environment';
 import { registerLocale } from '@abp/ng.core/locale';
 import { provideAbpOAuth } from '@abp/ng.oauth';
-import { provideAbpThemeShared } from '@abp/ng.theme.shared';
+import { provideAbpThemeShared, provideLogo, withEnvironmentOptions} from '@abp/ng.theme.shared';
 import { provideSettingManagementConfig } from '@abp/ng.setting-management/config';
 import { provideAccountConfig } from '@abp/ng.account/config';
 import { provideIdentityConfig } from '@abp/ng.identity/config';
@@ -15,7 +15,6 @@ import { provideTenantManagementConfig } from '@abp/ng.tenant-management/config'
 import { provideFeatureManagementConfig } from '@abp/ng.feature-management';
 import { provideThemeLeptonX } from '@abp/ng.theme.lepton-x';
 import { provideSideMenuLayout } from '@abp/ng.theme.lepton-x/layouts';
-import { provideLogo, withEnvironmentOptions } from '@volo/ngx-lepton-x.core';
 
 export const appConfig: ApplicationConfig = {
   providers: [

templates/app/angular/src/app/app.config.ts

@@ -8,7 +8,7 @@ import { provideAbpCore, withOptions } from '@abp/ng.core';
 import { environment } from '../environments/environment';
 import { registerLocale } from '@abp/ng.core/locale';
 import { provideAbpOAuth } from '@abp/ng.oauth';
-import { provideAbpThemeShared } from '@abp/ng.theme.shared';
+import { provideAbpThemeShared, provideLogo, withEnvironmentOptions} from '@abp/ng.theme.shared';
 import { provideSettingManagementConfig } from '@abp/ng.setting-management/config';
 import { provideAccountConfig } from '@abp/ng.account/config';
 import { provideIdentityConfig } from '@abp/ng.identity/config';
@@ -16,7 +16,6 @@ import { provideTenantManagementConfig } from '@abp/ng.tenant-management/config'
 import { provideFeatureManagementConfig } from '@abp/ng.feature-management';
 import { provideThemeLeptonX } from '@abp/ng.theme.lepton-x';
 import { provideSideMenuLayout } from '@abp/ng.theme.lepton-x/layouts';
-import { provideLogo, withEnvironmentOptions } from '@volo/ngx-lepton-x.core';
 
 export const appConfig: ApplicationConfig = {
   providers: [