Merge 18.0.x into main

.npmrc

@@ -1,3 +1 @@
-@dynamic-forms:registry=https://registry.npmjs.org
-
-legacy-peer-deps=true
+@dynamic-forms:registry=https://registry.npmjs.org

apps/demo/src/app/app-states.ts

@@ -0,0 +1,21 @@
+import { withNgxsStoragePlugin } from '@ngxs/storage-plugin';
+import { NgxsModuleOptions } from '@ngxs/store';
+import { environment } from '../environments/environment';
+import { ConfigState } from './state/config/config.state';
+import { ExamplesState } from './state/examples/examples.state';
+import { LayoutState } from './state/layout/layout.state';
+import { NotificationsState } from './state/notifications/notifications.state';
+import { PreferencesState } from './state/preferences/preferences.state';
+import { ProgressState } from './state/progress/progress.state';
+
+export const appStates = [ConfigState, ExamplesState, LayoutState, NotificationsState, PreferencesState, ProgressState];
+
+export const appStateOptions: NgxsModuleOptions = {
+  developmentMode: !environment.production,
+};
+
+export const appStateFeatures = [
+  withNgxsStoragePlugin({
+    keys: [PreferencesState],
+  }),
+];

apps/demo/src/app/layout/header/preferences-menu/preferences-menu.component.ts

@@ -29,7 +29,7 @@ export class PreferencesMenuComponent {
   dynamicForm: MaterialFormComponent;
 
   constructor(private store: Store) {
-    this.model$ = this.store.select(PreferencesState).pipe(
+    this.model$ = this.store.select(PreferencesState.preferences).pipe(
       filter(preferences => preferences !== this.dynamicForm?.form?.value),
       map((preferences: Preferences) => {
         if (preferences) {

apps/demo/src/app/state/preferences/preferences.state.ts

@@ -9,6 +9,11 @@ import { FormEditorPreferences, PREFERENCES, Preferences, ThemePreferences, defa
 })
 @Injectable()
 export class PreferencesState {
+  @Selector()
+  static preferences(state: Preferences): Preferences {
+    return state;
+  }
+
   @Selector()
   static theme(state: Preferences): ThemePreferences {
     return state?.theme;

apps/demo/src/main.ts

@@ -1,9 +1,10 @@
 import { HTTP_INTERCEPTORS, provideHttpClient } from '@angular/common/http';
-import { APP_INITIALIZER, enableProdMode, importProvidersFrom } from '@angular/core';
+import { APP_INITIALIZER, enableProdMode } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideRouter, withComponentInputBinding } from '@angular/router';
-import { AppStateModule } from './app/app-state.module';
+import { provideStore } from '@ngxs/store';
+import { appStateFeatures, appStateOptions, appStates } from './app/app-states';
 import { AppComponent } from './app/app.component';
 import { appRoutes } from './app/app.routes';
 import { AppService, appInitializer } from './app/app.service';
@@ -19,7 +20,7 @@ bootstrapApplication(AppComponent, {
     provideAnimations(),
     provideHttpClient(),
     provideRouter(appRoutes, withComponentInputBinding()),
-    importProvidersFrom(AppStateModule),
+    provideStore(appStates, appStateOptions, ...appStateFeatures),
     {
       provide: APP_INITIALIZER,
       useFactory: appInitializer,

libs/bootstrap/src/lib/dynamic-form-dialog/dynamic-form-dialog.component.html

@@ -10,15 +10,15 @@
       'max-width': maximized ? maxWidth || '100%' : maxWidth,
       'min-height': maximized ? '100%' : undefined,
       'max-height': maximized ? '100%' : undefined,
-      margin: maximized ? '0px auto' : undefined
+      margin: maximized ? '0px auto' : undefined,
     }"
   >
     <div
       class="modal-content"
       [ngStyle]="{
         height: maximized ? maxHeight || '100%' : height,
         'min-height': maximized ? maxHeight || '100%' : minHeight,
-        'max-height': maxHeight || '100%'
+        'max-height': maxHeight || '100%',
       }"
     >
       <div *ngIf="title || titleHtml || headerActions?.length" class="modal-header" [ngClass]="classNameHeader">