feat: offer standalone friendly API (#160)

Author: json-derulo

README.md

@@ -37,6 +37,24 @@ import { MaterialCssVarsModule } from "angular-material-css-vars";
 export class AppModule {}
 ```
 
+In standalone workspaces, add the following to your `app.config.ts`:
+
+```typescript
+import { ApplicationConfig } from "@angular/core";
+import { provideMaterialCssVars } from "angular-material-css-vars";
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideMaterialCssVars({
+      // all optional
+      isAutoContrast: true,
+      primary: "#3f51b5",
+      // ...
+    }),
+  ],
+};
+```
+
 5. If you want to adjust the theme at runtime, you can use `MaterialCssVarsService`:
 
    ```typescript

projects/material-css-vars/src/lib/material-css-vars.module.ts

@@ -1,11 +1,17 @@
-import { ModuleWithProviders, NgModule } from "@angular/core";
+import {
+  ENVIRONMENT_INITIALIZER,
+  EnvironmentProviders,
+  inject,
+  makeEnvironmentProviders,
+  ModuleWithProviders,
+  NgModule,
+} from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { MaterialCssVariablesConfig } from "./model";
 import { MATERIAL_CSS_VARS_CFG } from "../mat-css-config-token.const";
 import { MaterialCssVarsService } from "./material-css-vars.service";
 
 @NgModule({
-  declarations: [],
   imports: [CommonModule],
 })
 export class MaterialCssVarsModule {
@@ -18,6 +24,20 @@ export class MaterialCssVarsModule {
     };
   }
 
-  // This is necessary so the service is constructed, even if the service is never injected
+  // This is necessary, so the service is constructed, even if the service is never injected
+  // ToDo: change to environment initializer, like in the provideMaterialCssVars() function below
   constructor(private materialCssVarsService: MaterialCssVarsService) {}
 }
+
+export function provideMaterialCssVars(
+  config?: Partial<MaterialCssVariablesConfig>,
+): EnvironmentProviders {
+  return makeEnvironmentProviders([
+    { provide: MATERIAL_CSS_VARS_CFG, useValue: config },
+    {
+      provide: ENVIRONMENT_INITIALIZER,
+      useValue: () => inject(MaterialCssVarsService),
+      multi: true,
+    },
+  ]);
+}

src/app/app.config.ts

@@ -0,0 +1,16 @@
+import { ApplicationConfig } from "@angular/core";
+import { provideMaterialCssVars } from "../../projects/material-css-vars/src/lib/material-css-vars.module";
+import { APP_BASE_HREF } from "@angular/common";
+import { provideAnimations } from "@angular/platform-browser/animations";
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideMaterialCssVars({
+      primary: "#3f51b5",
+      accent: "#e91e63",
+      warn: "#f44336",
+    }),
+    { provide: APP_BASE_HREF, useValue: window._app_base ?? "/" },
+    provideAnimations(),
+  ],
+};

src/main.ts

@@ -1,29 +1,14 @@
-import { enableProdMode, importProvidersFrom } from "@angular/core";
-
+import { enableProdMode } from "@angular/core";
 import { environment } from "./environments/environment";
 import { AppComponent } from "./app/app.component";
-import { MaterialCssVarsModule } from "../projects/material-css-vars/src/lib/material-css-vars.module";
-import { provideAnimations } from "@angular/platform-browser/animations";
 import { bootstrapApplication } from "@angular/platform-browser";
-import { APP_BASE_HREF } from "@angular/common";
+import { appConfig } from "./app/app.config";
 
 if (environment.production) {
   enableProdMode();
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    importProvidersFrom(
-      MaterialCssVarsModule.forRoot({
-        primary: "#3f51b5",
-        accent: "#e91e63",
-        warn: "#f44336",
-      }),
-    ),
-    { provide: APP_BASE_HREF, useValue: window._app_base ?? "/" },
-    provideAnimations(),
-  ],
-}).catch((err) => {
+bootstrapApplication(AppComponent, appConfig).catch((err) => {
   console.error(err);
 });