@ng-atomic/components 18.2.0 → 18.4.0

package/fesm2022/ng-atomic-components-extras-editor.mjs

@@ -1,87 +1,119 @@
 import * as i0 from '@angular/core';
-import { input, EventEmitter, inject, ElementRef, ChangeDetectorRef, effect, Component, ChangeDetectionStrategy, Output } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { history } from '@codemirror/commands';
-import { closeBrackets, autocompletion } from '@codemirror/autocomplete';
-import { bracketMatching, syntaxHighlighting } from '@codemirror/language';
+import { input, output, computed, signal, effect, Directive, inject, ElementRef, Component, ChangeDetectionStrategy } from '@angular/core';
+import { keymap } from '@codemirror/view';
+import { indentWithTab } from '@codemirror/commands';
+import { syntaxHighlighting } from '@codemirror/language';
 import { oneDark, oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
 import { EditorState } from '@codemirror/state';
-import { lineNumbers } from '@codemirror/view';
-import { EditorView, basicSetup } from 'codemirror';
-import { NgAtomicComponent } from '@ng-atomic/core';
-import { distinctUntilChanged } from 'rxjs';
+import { basicSetup, EditorView } from 'codemirror';
+import { InjectableComponent, NgAtomicComponent } from '@ng-atomic/core';
 import { json } from '@codemirror/lang-json';
+import { ReplaySubject, filter, map, distinctUntilChanged } from 'rxjs';
 
-class EditorComponent extends NgAtomicComponent {
+class EditorComponentStore extends InjectableComponent {
     constructor() {
         super();
         this.content = input('');
-        this._contentChange$ = new EventEmitter();
-        this.contentChange = new EventEmitter();
-        this.keyActions = input();
+        this.contentChange = output();
+        this.keyActions = input([]);
         this.extensions = input([
             json(),
         ]);
-        this.el = inject(ElementRef);
-        this.cd = inject(ChangeDetectorRef);
+        // readonly update = signal<ViewUpdate>(null);
+        // readonly update$ = toObservable(this.update);
+        this.update$ = new ReplaySubject(0);
+        this.defaultExtensions = computed(() => [
+            basicSetup,
+            oneDark,
+            syntaxHighlighting(oneDarkHighlightStyle),
+            EditorView.updateListener.of((update) => this.update$.next(update)),
+            keymap.of([
+                ...(this.keyActions()).map(({ key, actionId }) => ({
+                    key,
+                    run: () => {
+                        this.action.emit({ id: actionId });
+                        return true;
+                    },
+                })),
+                indentWithTab,
+            ]),
+        ]);
+        this.state = computed(() => EditorState.create({
+            ...this.editorView().state,
+            extensions: [
+                ...this.defaultExtensions(),
+                ...this.extensions(),
+            ],
+        }));
+        this.editorView = signal(null);
+        this.action = output();
+        this.update$.pipe(filter((update) => update?.docChanged), map((update) => (update.state.doc.toString())), distinctUntilChanged()).subscribe((content) => {
+            this.contentChange.emit(content);
+        });
         effect(() => {
-            const selection = this.editorView.state.selection;
-            this.editorView.dispatch(this.editorView.state.update({
+            if (this.content() === this.editorView().state.doc.toString())
+                return;
+            const selection = this.editorView().state.selection;
+            this.editorView().dispatch(this.editorView().state.update({
                 changes: {
                     from: 0,
-                    to: this.editorView.state.doc.length,
+                    to: this.editorView().state.doc.length,
                     insert: this.content() ?? '',
                 },
                 selection: selection,
                 scrollIntoView: true,
             }));
         });
+        effect(() => {
+            this.editorView().setState(this.state());
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: EditorComponentStore, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.1.2", type: EditorComponentStore, isStandalone: true, inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, keyActions: { classPropertyName: "keyActions", publicName: "keyActions", isSignal: true, isRequired: false, transformFunction: null }, extensions: { classPropertyName: "extensions", publicName: "extensions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contentChange: "contentChange", action: "action" }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: EditorComponentStore, decorators: [{
+            type: Directive,
+            args: [{ standalone: true }]
+        }], ctorParameters: () => [] });
+class EditorComponent extends NgAtomicComponent {
+    constructor() {
+        super(...arguments);
+        this.store = inject(EditorComponentStore);
+        this.el = inject(ElementRef);
     }
     ngOnInit() {
-        this._contentChange$.pipe(distinctUntilChanged()).subscribe((content) => {
-            this.contentChange.emit(content);
-        });
+        this.store.action.subscribe((action) => this.dispatch(action));
     }
     ngAfterViewInit() {
-        this.editorView?.destroy();
-        this.editorView = new EditorView({
+        this.store.editorView()?.destroy();
+        this.store.editorView.set(new EditorView({
             state: EditorState.create({
                 doc: ``,
                 extensions: [
-                    basicSetup,
-                    bracketMatching(),
-                    closeBrackets(),
-                    history(),
-                    autocompletion(),
-                    lineNumbers(),
-                    oneDark,
-                    syntaxHighlighting(oneDarkHighlightStyle),
-                    EditorView.updateListener.of((update) => {
-                        if (!update.docChanged)
-                            return;
-                        this._contentChange$.emit(update.state.doc.toString());
-                    }),
-                    ...this.extensions(),
+                    ...this.store.defaultExtensions(),
+                    ...this.store.extensions(),
                 ],
             }),
             parent: this.el.nativeElement,
-        });
+        }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: EditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.1.2", type: EditorComponent, isStandalone: true, selector: "extras-editor", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, keyActions: { classPropertyName: "keyActions", publicName: "keyActions", isSignal: true, isRequired: false, transformFunction: null }, extensions: { classPropertyName: "extensions", publicName: "extensions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contentChange: "contentChange" }, usesInheritance: true, ngImport: i0, template: ``, isInline: true, styles: [":host{display:block}:host{width:100%;height:100%}:host ::ng-deep>.cm-editor{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: EditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: EditorComponent, isStandalone: true, selector: "extras-editor", usesInheritance: true, hostDirectives: [{ directive: EditorComponentStore, inputs: ["content", "content", "keyActions", "keyActions", "extensions", "extensions"], outputs: ["contentChange", "contentChange"] }], ngImport: i0, template: ``, isInline: true, styles: [":host{display:block}:host{width:100%;height:100%}:host ::ng-deep>.cm-editor{width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: EditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'extras-editor', standalone: true, imports: [
-                        CommonModule
-                    ], template: ``, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}:host{width:100%;height:100%}:host ::ng-deep>.cm-editor{width:100%;height:100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { contentChange: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'extras-editor', standalone: true, template: ``, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        {
+                            directive: EditorComponentStore,
+                            inputs: ['content', 'keyActions', 'extensions'],
+                            outputs: ['contentChange'],
+                        }
+                    ], styles: [":host{display:block}:host{width:100%;height:100%}:host ::ng-deep>.cm-editor{width:100%;height:100%}\n"] }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { EditorComponent };
+export { EditorComponent, EditorComponentStore };
 //# sourceMappingURL=ng-atomic-components-extras-editor.mjs.map

package/fesm2022/ng-atomic-components-extras-editor.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-atomic-components-extras-editor.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/extras/editor/editor.component.ts","../../../../../packages/@ng-atomic/components/src/lib/extras/editor/ng-atomic-components-extras-editor.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, model, Directive, inject, input, effect, ElementRef, viewChild, Output, EventEmitter, Inject, ChangeDetectorRef, OnInit, AfterViewInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { keymap } from \"@codemirror/view\"\nimport { indentWithTab } from \"@codemirror/commands\"\nimport { history } from '@codemirror/commands';\nimport { autocompletion, closeBrackets } from '@codemirror/autocomplete';\nimport { bracketMatching, syntaxHighlighting } from '@codemirror/language';\nimport { oneDarkHighlightStyle, oneDark } from '@codemirror/theme-one-dark';\nimport { EditorSelection, EditorState, Extension } from '@codemirror/state';\nimport { lineNumbers } from '@codemirror/view';\nimport { basicSetup, EditorView } from \"codemirror\"\nimport { html } from \"@codemirror/lang-html\";\nimport prettier from \"prettier/standalone\";\nimport parserHtml from \"prettier/parser-html\";\nimport { NgAtomicComponent } from '@ng-atomic/core';\nimport { graphql } from 'cm6-graphql';\nimport { distinctUntilChanged } from 'rxjs';\nimport { json } from \"@codemirror/lang-json\";\n\n@Component({\n  selector: 'extras-editor',\n  standalone: true,\n  imports: [\n    CommonModule\n  ],\n  template: ``,\n  styleUrls: ['./editor.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class EditorComponent extends NgAtomicComponent implements OnInit, AfterViewInit {\n  readonly content = input<string>('');\n  readonly _contentChange$ = new EventEmitter<string>();\n  @Output() readonly contentChange = new EventEmitter<string>();\n  readonly keyActions = input<{key: string, actionId: string}[]>();\n  readonly extensions = input<Extension[]>([\n    json(),\n  ]);\n  readonly el = inject(ElementRef);\n\n  // readonly state = computed(() => {\n  //   return EditorState.create({\n  //     doc: this.content() ?? '',\n  //     extensions: [\n  //       keymap.of([\n  //         ...(this.keyActions() ?? []).map(({key, actionId}) => ({\n  //           key,\n  //           run: () => (this.dispatch({id: actionId}), true),\n  //         })),\n  //         indentWithTab,\n  //       ]),\n  //       html(),\n  //       ...this.extensions(),\n  //       graphql(),\n  //     ],\n  //   });\n  // });\n\n  editorView!: EditorView;\n\n  readonly cd = inject(ChangeDetectorRef);\n\n  constructor() {\n    super();\n    effect(() => {\n      const selection = this.editorView.state.selection;\n      this.editorView.dispatch(\n        this.editorView.state.update({\n          changes: {\n            from: 0,\n            to: this.editorView.state.doc.length,\n            insert: this.content() ?? '',\n          },\n          selection: selection,\n          scrollIntoView: true,\n        }),\n      );\n    });\n  }\n\n  ngOnInit(): void {\n    this._contentChange$.pipe(\n      distinctUntilChanged(),\n    ).subscribe((content) => {\n      this.contentChange.emit(content);\n    });\n  }\n\n  ngAfterViewInit() {\n    this.editorView?.destroy();\n    this.editorView = new EditorView({\n      state: EditorState.create({\n        doc: ``,\n        extensions: [\n          basicSetup,\n          bracketMatching(),\n          closeBrackets(),\n          history(),\n          autocompletion(),\n          lineNumbers(),\n          oneDark,\n          syntaxHighlighting(oneDarkHighlightStyle),\n          EditorView.updateListener.of((update) => {\n            if (!update.docChanged) return;\n            this._contentChange$.emit(update.state.doc.toString());\n          }),\n          ...this.extensions(),\n        ],\n      }),\n      parent: this.el.nativeElement,\n    })\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-atomic-components-extras-editor.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/extras/editor/editor.component.ts","../../../../../packages/@ng-atomic/components/src/lib/extras/editor/ng-atomic-components-extras-editor.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject, input, effect, ElementRef, OnInit, AfterViewInit, output, signal, Directive } from '@angular/core';\nimport { keymap, ViewUpdate } from \"@codemirror/view\"\nimport { indentWithTab } from \"@codemirror/commands\"\nimport { syntaxHighlighting } from '@codemirror/language';\nimport { oneDarkHighlightStyle, oneDark } from '@codemirror/theme-one-dark';\nimport { EditorState, Extension } from '@codemirror/state';\nimport { basicSetup, EditorView } from \"codemirror\"\nimport { Action, InjectableComponent, NgAtomicComponent } from '@ng-atomic/core';\nimport { json } from \"@codemirror/lang-json\";\nimport { distinctUntilChanged, filter, map, ReplaySubject } from 'rxjs';\nimport { toObservable } from '@angular/core/rxjs-interop';\n\n@Directive({ standalone: true })\nexport class EditorComponentStore extends InjectableComponent {\n  readonly content = input<string>('');\n  readonly contentChange = output<string>();\n  readonly keyActions = input<{key: string, actionId: string}[]>([]);\n  readonly extensions = input<Extension[]>([\n    json(),\n  ]);\n  // readonly update = signal<ViewUpdate>(null);\n  // readonly update$ = toObservable(this.update);\n  readonly update$ = new ReplaySubject<ViewUpdate>(0);\n  readonly defaultExtensions = computed(() => [\n    basicSetup,\n    oneDark,\n    syntaxHighlighting(oneDarkHighlightStyle),\n    EditorView.updateListener.of((update) => this.update$.next(update)),\n    keymap.of([\n      ...(this.keyActions()).map(({key, actionId}) => ({\n        key,\n        run: () => {\n          this.action.emit({id: actionId});\n          return true;\n        },\n      })),\n      indentWithTab,\n    ]),\n  ]);\n\n  readonly state = computed(() => EditorState.create({\n    ...this.editorView().state,\n    extensions: [\n      ...this.defaultExtensions(),\n      ...this.extensions(),\n    ],\n  }));\n\n  readonly editorView = signal<EditorView>(null);\n  readonly action = output<Action>();\n\n  constructor() {\n    super();\n\n    this.update$.pipe(\n      filter((update) => update?.docChanged),\n      map((update) => (update.state.doc.toString())),\n      distinctUntilChanged(),\n    ).subscribe((content) => {\n      this.contentChange.emit(content);\n    });\n\n    effect(() => {\n      if (this.content() === this.editorView().state.doc.toString()) return;\n      const selection = this.editorView().state.selection;\n      this.editorView().dispatch(\n        this.editorView().state.update({\n          changes: {\n            from: 0,\n            to: this.editorView().state.doc.length,\n            insert: this.content() ?? '',\n          },\n          selection: selection,\n          scrollIntoView: true,\n        }),\n      );\n    });\n\n    effect(() => {\n      this.editorView().setState(this.state());\n    });\n  }\n}\n\n@Component({\n  selector: 'extras-editor',\n  standalone: true,\n  template: ``,\n  styleUrls: ['./editor.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: EditorComponentStore,\n      inputs: ['content', 'keyActions', 'extensions'],\n      outputs: ['contentChange'],\n    }\n  ]\n})\nexport class EditorComponent extends NgAtomicComponent implements OnInit, AfterViewInit {\n  protected readonly store = inject(EditorComponentStore);\n  protected readonly el = inject(ElementRef);\n\n  ngOnInit(): void {\n    this.store.action.subscribe((action) => this.dispatch(action));\n  }\n\n  ngAfterViewInit() {\n    this.store.editorView()?.destroy();\n    this.store.editorView.set(new EditorView({\n      state: EditorState.create({\n        doc: ``,\n        extensions: [\n          ...this.store.defaultExtensions(),\n          ...this.store.extensions(),\n        ],\n      }),\n      parent: this.el.nativeElement,\n    }));\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ng-atomic-components-frames-app.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
 import { inject, computed, effect, input, Directive, PLATFORM_ID, Component, ChangeDetectionStrategy } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { ActivatedRoute, RouterOutlet } from '@angular/router';
 import { LoadingFrame } from '@ng-atomic/components/frames/loading';
 import { SideNavFrameStore, SideNavFrame } from '@ng-atomic/components/frames/side-nav';
 import { EntranceFrame } from '@ng-atomic/components/frames/entrance';
-import { InjectableComponent, applyToInput, provideEffect, _computed, NgAtomicComponent } from '@ng-atomic/core';
+import { InjectableComponent, applyToInput, provideEffect, createAction, _computed, NgAtomicComponent } from '@ng-atomic/core';
 import { FormBuilder } from '@angular/forms';
-import { makeConfig } from '@ng-atomic/common/services/ui';
+import { makeConfig, NavActionId } from '@ng-atomic/common/services/ui';
 import { isPlatformServer, isPlatformBrowser } from '@angular/common';
 import { DrawerFrame } from '@ng-atomic/components/frames/drawer';
 import { FabFrame } from '@ng-atomic/components/frames/fab';
@@ -15,7 +15,8 @@ import { SideAppService } from '@ng-atomic/common/services/side-app';
 import { AuthService } from '@ng-atomic/common/services/auth';
 import { RootPropertyService } from '@ng-atomic/common/services/root-property';
 import { makeInitializerConfig } from '@ng-atomic/common/services/initializer';
-import { injectPrimaryPaths } from '@ng-atomic/common/utils';
+import { injectPrimaryPaths, injectHasNext } from '@ng-atomic/common/utils';
+import { ProgressBarFrame } from '@ng-atomic/components/frames/progress-bar';
 
 var ActionId;
 (function (ActionId) {
@@ -25,6 +26,7 @@ var ActionId;
     ActionId["SIGN_UP_WITH_EMAIL"] = "[@ng-atomic/components:frames/app] Sign Up With Email";
     ActionId["NAVIGATE"] = "[@ng-atomic/components:frames/app] Navigate";
     ActionId["SIGN_OUT"] = "[@ng-atomic/components:frames/app] Sign Out";
+    ActionId["NAVIGATE_SIDE_APP"] = "[@ng-atomic/components:frames/app] Navigate Side App";
     ActionId["OPEN_SIDE_APP"] = "[@ng-atomic/components:frames/app] Open Side App";
 })(ActionId || (ActionId = {}));
 class AppFrameStore extends InjectableComponent {
@@ -35,6 +37,7 @@ class AppFrameStore extends InjectableComponent {
             fabHide: true,
             isEntrance: true,
             isLoading: false,
+            isProgress: false,
             sideAppOpened: false,
             title: 'title',
             form: inject(FormBuilder).group({}),
@@ -44,10 +47,11 @@ class AppFrameStore extends InjectableComponent {
             sideNavActions: [
                 { id: ActionId.SIGN_OUT, name: 'ログアウト', icon: 'exit_to_app' },
             ],
+            sideNavBottomActions: [],
             sideNavMode: 'collapsed',
             sideNavMenuType: SideNavFrameStore.getMenuType(context),
             sideNavMenuTitle: undefined,
-            sideAppOutletName: 'side-app',
+            sideAppOutletName: 'side',
         });
     }, ['components', 'frames', 'app']); }
     static { this.provideAppServiceConfig = () => AppFrameStore.Config.provide(() => {
@@ -56,6 +60,7 @@ class AppFrameStore extends InjectableComponent {
         return (config) => ({
             ...config,
             isLoading: app.loading.isLoading(),
+            isProgress: app.loading.isProgress(),
             sideNavMode: app.sideNavMode.sideNavMode(),
             sideAppOpened: app.sideApp.opened(),
             fabActions: app.fab.actions(),
@@ -117,7 +122,29 @@ class AppFrameStore extends InjectableComponent {
         return provideEffect(AppFrameStore.ActionId.NAVIGATE, () => {
             const app = inject(AppService);
             return (payload) => {
-                app.router.navigate(payload).then(() => app.sideNav.collapse());
+                if (Array.isArray(payload)) {
+                    app.sideApp.collapse();
+                    app.router.navigate(payload).then(() => app.sideNav.collapse());
+                }
+                else {
+                    app.sideApp.collapse();
+                    const { commands, extras } = payload;
+                    app.router.navigate(commands, extras ?? {}).then(() => app.sideNav.collapse());
+                }
+            };
+        });
+    }
+    static provideNavigateSideAppEffect() {
+        return provideEffect(AppFrameStore.ActionId.NAVIGATE_SIDE_APP, () => {
+            const app = inject(AppService);
+            return (payload) => {
+                if (Array.isArray(payload)) {
+                    app.sideApp.router.navigate(payload);
+                }
+                else {
+                    const { commands, extras } = payload;
+                    app.sideApp.router.navigate(commands, extras ?? {});
+                }
             };
         });
     }
@@ -137,11 +164,18 @@ class AppFrameStore extends InjectableComponent {
         return provideEffect(AppFrameStore.ActionId.OPEN_SIDE_APP, () => {
             const app = inject(AppService);
             return () => {
-                console.debug('open side app');
                 app.sideApp.expand();
             };
         });
     }
+    static provideCloseSideAppEffect() {
+        return provideEffect(NavActionId.CLOSE, () => {
+            const app = inject(AppService);
+            return () => {
+                app.sideApp.collapse();
+            };
+        });
+    }
     static provideSignUpWithEmailEffect() {
         return provideEffect(AppFrameStore.ActionId.SIGN_UP_WITH_EMAIL, () => {
             const app = inject(AppService);
@@ -213,10 +247,12 @@ class AppFrameStore extends InjectableComponent {
             AppFrameStore.provideNavigateEffect(),
             AppFrameStore.provideSignOutEffect(),
             AppFrameStore.provideOpenSideAppEffect(),
+            AppFrameStore.provideCloseSideAppEffect(),
             AppFrameStore.provideSignUpWithEmailEffect(),
             AppFrameStore.provideSignInWithEmailEffect(),
             AppFrameStore.provideSignInWithGoogleEffect(),
             AppFrameStore.provideSignInWithTwitterEffect(),
+            AppFrameStore.provideNavigateSideAppEffect(),
         ];
     }
     static provideDefault() {
@@ -226,16 +262,33 @@ class AppFrameStore extends InjectableComponent {
             AppFrameStore.provideDefaultEffects(),
         ];
     }
+    static injectNavActionFactory() {
+        const hasNext = injectHasNext();
+        const route = inject(ActivatedRoute);
+        const navigateActionBuilder = createAction(AppFrameStore.ActionId.NAVIGATE, undefined, {
+            icon: 'open_in_new',
+        });
+        return (commands, name) => {
+            return navigateActionBuilder.create({
+                commands,
+                extras: { relativeTo: route, replaceUrl: hasNext() }
+            }, {
+                name,
+            });
+        };
+    }
     constructor() {
         super();
         this.config = AppFrameStore.Config.inject();
         this.isLoading = input(_computed(() => this.config().isLoading));
+        this.isProgress = input(_computed(() => this.config().isProgress));
         this.isEntrance = input(_computed(() => this.config().isEntrance));
         this.sideAppOpened = input(_computed(() => this.config().sideAppOpened));
         this.title = input(_computed(() => this.config().title));
         this.form = input(_computed(() => this.config().form));
         this.entranceActions = input(_computed(() => this.config().entranceActions));
         this.sideNavActions = input(_computed(() => this.config().sideNavActions));
+        this.sideNavBottomActions = input(_computed(() => this.config().sideNavBottomActions));
         this.sideNavMode = input(_computed(() => this.config().sideNavMode));
         this.sideNavMenuType = input(_computed(() => this.config().sideNavMenuType));
         this.sideNavMenuTitle = input(_computed(() => this.config().sideNavMenuTitle));
@@ -245,7 +298,7 @@ class AppFrameStore extends InjectableComponent {
         AppFrameStore.Initializer.initializeStore(this);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: AppFrameStore, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.1.2", type: AppFrameStore, isStandalone: true, selector: "frames-app", inputs: { isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isEntrance: { classPropertyName: "isEntrance", publicName: "isEntrance", isSignal: true, isRequired: false, transformFunction: null }, sideAppOpened: { classPropertyName: "sideAppOpened", publicName: "sideAppOpened", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, entranceActions: { classPropertyName: "entranceActions", publicName: "entranceActions", isSignal: true, isRequired: false, transformFunction: null }, sideNavActions: { classPropertyName: "sideNavActions", publicName: "sideNavActions", isSignal: true, isRequired: false, transformFunction: null }, sideNavMode: { classPropertyName: "sideNavMode", publicName: "sideNavMode", isSignal: true, isRequired: false, transformFunction: null }, sideNavMenuType: { classPropertyName: "sideNavMenuType", publicName: "sideNavMenuType", isSignal: true, isRequired: false, transformFunction: null }, sideNavMenuTitle: { classPropertyName: "sideNavMenuTitle", publicName: "sideNavMenuTitle", isSignal: true, isRequired: false, transformFunction: null }, sideAppOutletName: { classPropertyName: "sideAppOutletName", publicName: "sideAppOutletName", isSignal: true, isRequired: false, transformFunction: null }, fabActions: { classPropertyName: "fabActions", publicName: "fabActions", isSignal: true, isRequired: false, transformFunction: null }, fabHide: { classPropertyName: "fabHide", publicName: "fabHide", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.1.2", type: AppFrameStore, isStandalone: true, selector: "frames-app", inputs: { isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isProgress: { classPropertyName: "isProgress", publicName: "isProgress", isSignal: true, isRequired: false, transformFunction: null }, isEntrance: { classPropertyName: "isEntrance", publicName: "isEntrance", isSignal: true, isRequired: false, transformFunction: null }, sideAppOpened: { classPropertyName: "sideAppOpened", publicName: "sideAppOpened", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, entranceActions: { classPropertyName: "entranceActions", publicName: "entranceActions", isSignal: true, isRequired: false, transformFunction: null }, sideNavActions: { classPropertyName: "sideNavActions", publicName: "sideNavActions", isSignal: true, isRequired: false, transformFunction: null }, sideNavBottomActions: { classPropertyName: "sideNavBottomActions", publicName: "sideNavBottomActions", isSignal: true, isRequired: false, transformFunction: null }, sideNavMode: { classPropertyName: "sideNavMode", publicName: "sideNavMode", isSignal: true, isRequired: false, transformFunction: null }, sideNavMenuType: { classPropertyName: "sideNavMenuType", publicName: "sideNavMenuType", isSignal: true, isRequired: false, transformFunction: null }, sideNavMenuTitle: { classPropertyName: "sideNavMenuTitle", publicName: "sideNavMenuTitle", isSignal: true, isRequired: false, transformFunction: null }, sideAppOutletName: { classPropertyName: "sideAppOutletName", publicName: "sideAppOutletName", isSignal: true, isRequired: false, transformFunction: null }, fabActions: { classPropertyName: "fabActions", publicName: "fabActions", isSignal: true, isRequired: false, transformFunction: null }, fabHide: { classPropertyName: "fabHide", publicName: "fabHide", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: AppFrameStore, decorators: [{
             type: Directive,
@@ -272,43 +325,46 @@ class AppFrame extends NgAtomicComponent {
     }
   }
   <frames-loading [isLoading]="store.isLoading()">
-    <frames-fab
-      [actions]="store.fabActions()"
-      [hide]="store.fabHide()"
-      (action)="dispatch($event)"
-    >
-      <frames-entrance
-        [isEntrance]="store.isEntrance()"
-        [form]="store.form()"
-        [title]="store.title()"
-        [actions]="store.entranceActions()"
+    <frames-progress-bar [isProgress]="store.isProgress()" [mode]="'query'">
+      <frames-fab
+        [actions]="store.fabActions()"
+        [hide]="store.fabHide()"
         (action)="dispatch($event)"
       >
-        <frames-drawer
-          [opened]="store.sideAppOpened()"
-          [position]="'end'"
-          [hasBackdrop]="false"
+        <frames-entrance
+          [isEntrance]="store.isEntrance()"
+          [form]="store.form()"
+          [title]="store.title()"
+          [actions]="store.entranceActions()"
+          (action)="dispatch($event)"
         >
-          <frames-side-nav
-            [actions]="store.sideNavActions()"
-            [mode]="store.sideNavMode()"
-            [menuType]="store.sideNavMenuType()"
-            [menuTitle]="store.sideNavMenuTitle()"
-            (action)="dispatch($event)"
-            contents
+          <frames-drawer
+            [opened]="store.sideAppOpened()"
+            [position]="'end'"
+            [hasBackdrop]="false"
           >
-            <router-outlet contents/>
-          </frames-side-nav>
-          <div drawer style="width: var(--page-width-lv1);height: 100%;">
-            <router-outlet [name]="store.sideAppOutletName()" />
-          </div>
-        </frames-drawer>
-      </frames-entrance>
-    </frames-fab>
+            <frames-side-nav
+              [actions]="store.sideNavActions()"
+              [bottomActions]="store.sideNavBottomActions()"
+              [mode]="store.sideNavMode()"
+              [menuType]="store.sideNavMenuType()"
+              [menuTitle]="store.sideNavMenuTitle()"
+              (action)="dispatch($event)"
+              contents
+            >
+              <router-outlet contents/>
+            </frames-side-nav>
+            <div drawer style="width: var(--page-width-lv1);height: 100%;">
+              <router-outlet [name]="store.sideAppOutletName()" />
+            </div>
+          </frames-drawer>
+        </frames-entrance>
+      </frames-fab>
+    </frames-progress-bar>
   </frames-loading>
-  `, isInline: true, styles: [":host{--primary-color-SCOPED-IN-frames-app-64hS: var(--primary-color);--on-primary-color-SCOPED-IN-frames-app-64hS: var(--on-primary-color);--surface-color-SCOPED-IN-frames-app-64hS: var(--surface-color);--on-surface-color-SCOPED-IN-frames-app-64hS: var(--on-surface-color);--background-color-SCOPED-IN-frames-app-64hS: var(--background-color);--on-background-color-SCOPED-IN-frames-app-64hS: var(--on-background-color);--menu-width-SCOPED-IN-frames-app-64hS: var(--menu-width);--menu-background-color-SCOPED-IN-frames-app-64hS: var(--menu-background-color);--menu-on-background-color-SCOPED-IN-frames-app-64hS: var(--menu-on-background-color);--background-primary-color-SCOPED-IN-frames-app-64hS: var(--background-primary-color);--background-on-primary-color-SCOPED-IN-frames-app-64hS: var(--background-on-primary-color);--background-background-color-SCOPED-IN-frames-app-64hS: var(--background-background-color);--loading-primary-color-SCOPED-IN-frames-app-64hS: var(--loading-primary-color);--page-width-lv1-SCOPED-IN-frames-app-64hS: var(--page-width-lv1);--menu-padding-top: 56px;--menu-padding-top-SCOPED-IN-frames-app-64hS: var(--menu-padding-top);--loading-z-index: 1000;--loading-z-index-SCOPED-IN-frames-app-64hS: var(--loading-z-index)}:host{display:block;width:100%;height:100%;position:fixed;color:var(--primary-color-SCOPED-IN-frames-app-64hS);touch-action:none}:host *{--primary-color: var(--primary-color-SCOPED-IN-frames-app-64hS);--on-primary-color: var(--on-primary-color-SCOPED-IN-frames-app-64hS);--surface-color: var(--surface-color-SCOPED-IN-frames-app-64hS);--on-surface-color: var(--on-surface-color-SCOPED-IN-frames-app-64hS);--background-color: var(--background-color-SCOPED-IN-frames-app-64hS);--on-background-color: var(--on-background-color-SCOPED-IN-frames-app-64hS);--menu-background-color: var(--menu-background-color-SCOPED-IN-frames-app-64hS);--menu-on-background-color: var(--menu-on-background-color-SCOPED-IN-frames-app-64hS)}:host frames-side-nav{color:#000;--menu-width: var(--menu-width-SCOPED-IN-frames-app-64hS)}:host frames-loading{--primary-color: var(--loading-primary-color-SCOPED-IN-frames-app-64hS)}:host templates-background{--primary-color: var(--background-primary-color-SCOPED-IN-frames-app-64hS);--on-primary-color: var(--background-on-primary-color-SCOPED-IN-frames-app-64hS);--background-color: var(--background-background-color-SCOPED-IN-frames-app-64hS);position:absolute;top:0;left:0}:host frames-side-nav .side-app{position:relative;width:var(--page-width-lv1-SCOPED-IN-frames-app-64hS);height:100%}\n"], dependencies: [{ kind: "component", type: FabFrame, selector: "frames-fab" }, { kind: "component", type: LoadingFrame, selector: "frames-loading" }, { kind: "component", type: SideNavFrame, selector: "frames-side-nav" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: EntranceFrame, selector: "frames-entrance" }, { kind: "component", type: 
+  `, isInline: true, styles: [":host{--primary-color-SCOPED-IN-frames-app-LMSh: var(--primary-color);--on-primary-color-SCOPED-IN-frames-app-LMSh: var(--on-primary-color);--surface-color-SCOPED-IN-frames-app-LMSh: var(--surface-color);--on-surface-color-SCOPED-IN-frames-app-LMSh: var(--on-surface-color);--background-color-SCOPED-IN-frames-app-LMSh: var(--background-color);--on-background-color-SCOPED-IN-frames-app-LMSh: var(--on-background-color);--menu-width-SCOPED-IN-frames-app-LMSh: var(--menu-width);--menu-background-color-SCOPED-IN-frames-app-LMSh: var(--menu-background-color);--menu-on-background-color-SCOPED-IN-frames-app-LMSh: var(--menu-on-background-color);--background-primary-color-SCOPED-IN-frames-app-LMSh: var(--background-primary-color);--background-on-primary-color-SCOPED-IN-frames-app-LMSh: var(--background-on-primary-color);--background-background-color-SCOPED-IN-frames-app-LMSh: var(--background-background-color);--loading-primary-color-SCOPED-IN-frames-app-LMSh: var(--loading-primary-color);--page-width-lv1-SCOPED-IN-frames-app-LMSh: var(--page-width-lv1);--menu-padding-top: 56px;--menu-padding-top-SCOPED-IN-frames-app-LMSh: var(--menu-padding-top);--loading-z-index: 1000;--loading-z-index-SCOPED-IN-frames-app-LMSh: var(--loading-z-index)}:host{display:block;width:100%;height:100%;position:fixed;color:var(--primary-color-SCOPED-IN-frames-app-LMSh);touch-action:none}:host *{--primary-color: var(--primary-color-SCOPED-IN-frames-app-LMSh);--on-primary-color: var(--on-primary-color-SCOPED-IN-frames-app-LMSh);--surface-color: var(--surface-color-SCOPED-IN-frames-app-LMSh);--on-surface-color: var(--on-surface-color-SCOPED-IN-frames-app-LMSh);--background-color: var(--background-color-SCOPED-IN-frames-app-LMSh);--on-background-color: var(--on-background-color-SCOPED-IN-frames-app-LMSh);--menu-background-color: var(--menu-background-color-SCOPED-IN-frames-app-LMSh);--menu-on-background-color: var(--menu-on-background-color-SCOPED-IN-frames-app-LMSh)}:host frames-side-nav{color:#000;--menu-width: var(--menu-width-SCOPED-IN-frames-app-LMSh)}:host frames-loading{--primary-color: var(--loading-primary-color-SCOPED-IN-frames-app-LMSh)}:host templates-background{--primary-color: var(--background-primary-color-SCOPED-IN-frames-app-LMSh);--on-primary-color: var(--background-on-primary-color-SCOPED-IN-frames-app-LMSh);--background-color: var(--background-background-color-SCOPED-IN-frames-app-LMSh);position:absolute;top:0;left:0}:host frames-side-nav .side-app{position:relative;width:var(--page-width-lv1-SCOPED-IN-frames-app-LMSh);height:100%}\n"], dependencies: [{ kind: "component", type: FabFrame, selector: "frames-fab" }, { kind: "component", type: LoadingFrame, selector: "frames-loading" }, { kind: "component", type: SideNavFrame, selector: "frames-side-nav" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: EntranceFrame, selector: "frames-entrance" }, { kind: "component", type: 
                 // DrawerFrameStore,
-                DrawerFrame, selector: "frames-drawer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [import('@ng-atomic/components/templates/background').then(m => m.BackgroundTemplateStore)]] }); }
+                DrawerFrame, selector: "frames-drawer" }, { kind: "component", type: ProgressBarFrame, selector: "frames-progress-bar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [import('@ng-atomic/components/templates/background').then(m => m.BackgroundTemplateStore)]] }); }
 }
 i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.1.2", ngImport: i0, type: AppFrame, resolveDeferredDeps: () => [import('@ng-atomic/components/templates/background').then(m => m.BackgroundTemplateStore)], resolveMetadata: BackgroundTemplateStore => ({ decorators: [{
                 type: Component,
@@ -321,6 +377,7 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.1.2", ng
                             // DrawerFrameStore,
                             DrawerFrame,
                             BackgroundTemplateStore,
+                            ProgressBarFrame,
                         ], template: `
   <router-outlet/>
   @if (isPlatformBrowser()) {
@@ -329,43 +386,46 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.1.2", ng
     }
   }
   <frames-loading [isLoading]="store.isLoading()">
-    <frames-fab
-      [actions]="store.fabActions()"
-      [hide]="store.fabHide()"
-      (action)="dispatch($event)"
-    >
-      <frames-entrance
-        [isEntrance]="store.isEntrance()"
-        [form]="store.form()"
-        [title]="store.title()"
-        [actions]="store.entranceActions()"
+    <frames-progress-bar [isProgress]="store.isProgress()" [mode]="'query'">
+      <frames-fab
+        [actions]="store.fabActions()"
+        [hide]="store.fabHide()"
         (action)="dispatch($event)"
       >
-        <frames-drawer
-          [opened]="store.sideAppOpened()"
-          [position]="'end'"
-          [hasBackdrop]="false"
+        <frames-entrance
+          [isEntrance]="store.isEntrance()"
+          [form]="store.form()"
+          [title]="store.title()"
+          [actions]="store.entranceActions()"
+          (action)="dispatch($event)"
         >
-          <frames-side-nav
-            [actions]="store.sideNavActions()"
-            [mode]="store.sideNavMode()"
-            [menuType]="store.sideNavMenuType()"
-            [menuTitle]="store.sideNavMenuTitle()"
-            (action)="dispatch($event)"
-            contents
+          <frames-drawer
+            [opened]="store.sideAppOpened()"
+            [position]="'end'"
+            [hasBackdrop]="false"
           >
-            <router-outlet contents/>
-          </frames-side-nav>
-          <div drawer style="width: var(--page-width-lv1);height: 100%;">
-            <router-outlet [name]="store.sideAppOutletName()" />
-          </div>
-        </frames-drawer>
-      </frames-entrance>
-    </frames-fab>
+            <frames-side-nav
+              [actions]="store.sideNavActions()"
+              [bottomActions]="store.sideNavBottomActions()"
+              [mode]="store.sideNavMode()"
+              [menuType]="store.sideNavMenuType()"
+              [menuTitle]="store.sideNavMenuTitle()"
+              (action)="dispatch($event)"
+              contents
+            >
+              <router-outlet contents/>
+            </frames-side-nav>
+            <div drawer style="width: var(--page-width-lv1);height: 100%;">
+              <router-outlet [name]="store.sideAppOutletName()" />
+            </div>
+          </frames-drawer>
+        </frames-entrance>
+      </frames-fab>
+    </frames-progress-bar>
   </frames-loading>
   `, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                             AppFrameStore,
-                        ], styles: [":host{--primary-color-SCOPED-IN-frames-app-64hS: var(--primary-color);--on-primary-color-SCOPED-IN-frames-app-64hS: var(--on-primary-color);--surface-color-SCOPED-IN-frames-app-64hS: var(--surface-color);--on-surface-color-SCOPED-IN-frames-app-64hS: var(--on-surface-color);--background-color-SCOPED-IN-frames-app-64hS: var(--background-color);--on-background-color-SCOPED-IN-frames-app-64hS: var(--on-background-color);--menu-width-SCOPED-IN-frames-app-64hS: var(--menu-width);--menu-background-color-SCOPED-IN-frames-app-64hS: var(--menu-background-color);--menu-on-background-color-SCOPED-IN-frames-app-64hS: var(--menu-on-background-color);--background-primary-color-SCOPED-IN-frames-app-64hS: var(--background-primary-color);--background-on-primary-color-SCOPED-IN-frames-app-64hS: var(--background-on-primary-color);--background-background-color-SCOPED-IN-frames-app-64hS: var(--background-background-color);--loading-primary-color-SCOPED-IN-frames-app-64hS: var(--loading-primary-color);--page-width-lv1-SCOPED-IN-frames-app-64hS: var(--page-width-lv1);--menu-padding-top: 56px;--menu-padding-top-SCOPED-IN-frames-app-64hS: var(--menu-padding-top);--loading-z-index: 1000;--loading-z-index-SCOPED-IN-frames-app-64hS: var(--loading-z-index)}:host{display:block;width:100%;height:100%;position:fixed;color:var(--primary-color-SCOPED-IN-frames-app-64hS);touch-action:none}:host *{--primary-color: var(--primary-color-SCOPED-IN-frames-app-64hS);--on-primary-color: var(--on-primary-color-SCOPED-IN-frames-app-64hS);--surface-color: var(--surface-color-SCOPED-IN-frames-app-64hS);--on-surface-color: var(--on-surface-color-SCOPED-IN-frames-app-64hS);--background-color: var(--background-color-SCOPED-IN-frames-app-64hS);--on-background-color: var(--on-background-color-SCOPED-IN-frames-app-64hS);--menu-background-color: var(--menu-background-color-SCOPED-IN-frames-app-64hS);--menu-on-background-color: var(--menu-on-background-color-SCOPED-IN-frames-app-64hS)}:host frames-side-nav{color:#000;--menu-width: var(--menu-width-SCOPED-IN-frames-app-64hS)}:host frames-loading{--primary-color: var(--loading-primary-color-SCOPED-IN-frames-app-64hS)}:host templates-background{--primary-color: var(--background-primary-color-SCOPED-IN-frames-app-64hS);--on-primary-color: var(--background-on-primary-color-SCOPED-IN-frames-app-64hS);--background-color: var(--background-background-color-SCOPED-IN-frames-app-64hS);position:absolute;top:0;left:0}:host frames-side-nav .side-app{position:relative;width:var(--page-width-lv1-SCOPED-IN-frames-app-64hS);height:100%}\n"] }]
+                        ], styles: [":host{--primary-color-SCOPED-IN-frames-app-LMSh: var(--primary-color);--on-primary-color-SCOPED-IN-frames-app-LMSh: var(--on-primary-color);--surface-color-SCOPED-IN-frames-app-LMSh: var(--surface-color);--on-surface-color-SCOPED-IN-frames-app-LMSh: var(--on-surface-color);--background-color-SCOPED-IN-frames-app-LMSh: var(--background-color);--on-background-color-SCOPED-IN-frames-app-LMSh: var(--on-background-color);--menu-width-SCOPED-IN-frames-app-LMSh: var(--menu-width);--menu-background-color-SCOPED-IN-frames-app-LMSh: var(--menu-background-color);--menu-on-background-color-SCOPED-IN-frames-app-LMSh: var(--menu-on-background-color);--background-primary-color-SCOPED-IN-frames-app-LMSh: var(--background-primary-color);--background-on-primary-color-SCOPED-IN-frames-app-LMSh: var(--background-on-primary-color);--background-background-color-SCOPED-IN-frames-app-LMSh: var(--background-background-color);--loading-primary-color-SCOPED-IN-frames-app-LMSh: var(--loading-primary-color);--page-width-lv1-SCOPED-IN-frames-app-LMSh: var(--page-width-lv1);--menu-padding-top: 56px;--menu-padding-top-SCOPED-IN-frames-app-LMSh: var(--menu-padding-top);--loading-z-index: 1000;--loading-z-index-SCOPED-IN-frames-app-LMSh: var(--loading-z-index)}:host{display:block;width:100%;height:100%;position:fixed;color:var(--primary-color-SCOPED-IN-frames-app-LMSh);touch-action:none}:host *{--primary-color: var(--primary-color-SCOPED-IN-frames-app-LMSh);--on-primary-color: var(--on-primary-color-SCOPED-IN-frames-app-LMSh);--surface-color: var(--surface-color-SCOPED-IN-frames-app-LMSh);--on-surface-color: var(--on-surface-color-SCOPED-IN-frames-app-LMSh);--background-color: var(--background-color-SCOPED-IN-frames-app-LMSh);--on-background-color: var(--on-background-color-SCOPED-IN-frames-app-LMSh);--menu-background-color: var(--menu-background-color-SCOPED-IN-frames-app-LMSh);--menu-on-background-color: var(--menu-on-background-color-SCOPED-IN-frames-app-LMSh)}:host frames-side-nav{color:#000;--menu-width: var(--menu-width-SCOPED-IN-frames-app-LMSh)}:host frames-loading{--primary-color: var(--loading-primary-color-SCOPED-IN-frames-app-LMSh)}:host templates-background{--primary-color: var(--background-primary-color-SCOPED-IN-frames-app-LMSh);--on-primary-color: var(--background-on-primary-color-SCOPED-IN-frames-app-LMSh);--background-color: var(--background-background-color-SCOPED-IN-frames-app-LMSh);position:absolute;top:0;left:0}:host frames-side-nav .side-app{position:relative;width:var(--page-width-lv1-SCOPED-IN-frames-app-LMSh);height:100%}\n"] }]
             }], ctorParameters: null, propDecorators: null }) });
 
 /**