@acorex/platform 19.1.2 → 19.1.3

package/fesm2022/acorex-platform-themes-shared.mjs

@@ -14,23 +14,32 @@ import { signalStore, withState, withComputed, withMethods, patchState, withHook
 import { timer } from 'rxjs';
 import * as i5 from '@acorex/core/translation';
 import { AXTranslationModule } from '@acorex/core/translation';
+import { objectKeyValueTransforms } from '@acorex/platform/layout/builder';
 
 class AXPThemeLayoutBlockComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPThemeLayoutBlockComponent, isStandalone: true, selector: "\n    axp-page-content, \n    axp-page-body,\n    axp-page-title, \n    axp-page-description, \n    axp-page-navbar,\n    axp-page-breadcrumbs,\n    axp-page-side-title\n    ", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPThemeLayoutBlockComponent, isStandalone: true, selector: "\n    axp-layout-content, \n    axp-layout-header-container,\n    axp-layout-footer-container,\n    axp-layout-side-container,\n    axp-layout-sections,\n    axp-layout-section-container,\n    axp-layout-body,\n    axp-layout-suffix,\n    axp-layout-prefix,\n    axp-layout-title, \n    axp-layout-nav-button, \n    axp-layout-description, \n    axp-layout-toolbar,\n    axp-layout-title-bar,\n    axp-layout-breadcrumbs\n    ", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutBlockComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: `
-    axp-page-content, 
-    axp-page-body,
-    axp-page-title, 
-    axp-page-description, 
-    axp-page-navbar,
-    axp-page-breadcrumbs,
-    axp-page-side-title
+    axp-layout-content, 
+    axp-layout-header-container,
+    axp-layout-footer-container,
+    axp-layout-side-container,
+    axp-layout-sections,
+    axp-layout-section-container,
+    axp-layout-body,
+    axp-layout-suffix,
+    axp-layout-prefix,
+    axp-layout-title, 
+    axp-layout-nav-button, 
+    axp-layout-description, 
+    axp-layout-toolbar,
+    axp-layout-title-bar,
+    axp-layout-breadcrumbs
     `,
                     template: '<ng-content></ng-content>',
                     encapsulation: ViewEncapsulation.None,
@@ -40,33 +49,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
 
 class AXPThemeLayoutPagePrimaryActionsComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutPagePrimaryActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPThemeLayoutPagePrimaryActionsComponent, isStandalone: true, selector: "axp-page-actions-primary", ngImport: i0, template: `<ng-content select="ax-button"></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPThemeLayoutPagePrimaryActionsComponent, isStandalone: true, selector: "axp-layout-actions-primary", ngImport: i0, template: `<ng-content select="ax-button,ax-dropdown-button"></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutPagePrimaryActionsComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
-                    selector: 'axp-page-actions-primary',
-                    template: `<ng-content select="ax-button"></ng-content>`,
+                    selector: 'axp-layout-actions-primary',
+                    template: `<ng-content select="ax-button,ax-dropdown-button"></ng-content>`,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }] });
 class AXPThemeLayoutPageSecondaryActionsComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutPageSecondaryActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPThemeLayoutPageSecondaryActionsComponent, isStandalone: true, selector: "axp-page-actions-secondary", ngImport: i0, template: `<ng-content select="ax-button-item"></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPThemeLayoutPageSecondaryActionsComponent, isStandalone: true, selector: "axp-layout-actions-secondary", ngImport: i0, template: `<ng-content select="ax-button-item"></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutPageSecondaryActionsComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
-                    selector: 'axp-page-actions-secondary',
+                    selector: 'axp-layout-actions-secondary',
                     template: `<ng-content select="ax-button-item"></ng-content>`,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }] });
-class AXPThemeLayoutPageActionsComponent {
+class AXPThemeLayoutActionsComponent {
     constructor() {
         this.primaryTemplate = viewChild('primary');
         this.primaryContent = contentChild(AXPThemeLayoutPagePrimaryActionsComponent);
@@ -75,34 +84,34 @@ class AXPThemeLayoutPageActionsComponent {
         this.secondaryContent = contentChild(AXPThemeLayoutPageSecondaryActionsComponent);
         this.hasSecondary = computed(() => this.secondaryContent() != null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutPageActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.3", type: AXPThemeLayoutPageActionsComponent, isStandalone: true, selector: "axp-page-actions", queries: [{ propertyName: "primaryContent", first: true, predicate: AXPThemeLayoutPagePrimaryActionsComponent, descendants: true, isSignal: true }, { propertyName: "secondaryContent", first: true, predicate: AXPThemeLayoutPageSecondaryActionsComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "primaryTemplate", first: true, predicate: ["primary"], descendants: true, isSignal: true }, { propertyName: "secondaryTemplate", first: true, predicate: ["secondary"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.3", type: AXPThemeLayoutActionsComponent, isStandalone: true, selector: "axp-layout-actions", queries: [{ propertyName: "primaryContent", first: true, predicate: AXPThemeLayoutPagePrimaryActionsComponent, descendants: true, isSignal: true }, { propertyName: "secondaryContent", first: true, predicate: AXPThemeLayoutPageSecondaryActionsComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "primaryTemplate", first: true, predicate: ["primary"], descendants: true, isSignal: true }, { propertyName: "secondaryTemplate", first: true, predicate: ["secondary"], descendants: true, isSignal: true }], ngImport: i0, template: `
 
     <ng-template #primary>
-        <ng-content select="axp-page-actions-primary"></ng-content>
+        <ng-content select="axp-layout-actions-primary"></ng-content>
     </ng-template>
 
     <ng-template #secondary>
-        <ng-content select="axp-page-actions-secondary"></ng-content>
+        <ng-content select="axp-layout-actions-secondary"></ng-content>
     </ng-template>
 
     <ng-content></ng-content>
     `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutPageActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutActionsComponent, decorators: [{
             type: Component,
             args: [{
                     imports: [CommonModule],
                     standalone: true,
-                    selector: 'axp-page-actions',
+                    selector: 'axp-layout-actions',
                     template: `
 
     <ng-template #primary>
-        <ng-content select="axp-page-actions-primary"></ng-content>
+        <ng-content select="axp-layout-actions-primary"></ng-content>
     </ng-template>
 
     <ng-template #secondary>
-        <ng-content select="axp-page-actions-secondary"></ng-content>
+        <ng-content select="axp-layout-actions-secondary"></ng-content>
     </ng-template>
 
     <ng-content></ng-content>
@@ -112,95 +121,187 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                 }]
         }] });
 
-class AXPThemeLayoutPageSideComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutPageSideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPThemeLayoutPageSideComponent, isStandalone: true, selector: "axp-page-side", ngImport: i0, template: `
-    <ng-content></ng-content>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutPageSideComponent, decorators: [{
-            type: Component,
-            args: [{
-                    imports: [CommonModule],
-                    standalone: true,
-                    selector: 'axp-page-side',
-                    template: `
-    <ng-content></ng-content>
-    `,
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }] });
-
-class AXPThemeLayoutPageHeaderComponent {
+class AXPThemeLayoutHeaderTemplateComponent {
     constructor() {
         this.title = viewChild('title');
         this.description = viewChild('description');
         this.actions = viewChild('actions');
         this.navbar = viewChild('navbar');
         this.breadcrumbs = viewChild('breadcrumbs');
+        this.navButton = viewChild('navButton');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.3", type: AXPThemeLayoutPageHeaderComponent, isStandalone: true, selector: "axp-page-header", viewQueries: [{ propertyName: "title", first: true, predicate: ["title"], descendants: true, isSignal: true }, { propertyName: "description", first: true, predicate: ["description"], descendants: true, isSignal: true }, { propertyName: "actions", first: true, predicate: ["actions"], descendants: true, isSignal: true }, { propertyName: "navbar", first: true, predicate: ["navbar"], descendants: true, isSignal: true }, { propertyName: "breadcrumbs", first: true, predicate: ["breadcrumbs"], descendants: true, isSignal: true }], ngImport: i0, template: `
-
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutHeaderTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.3", type: AXPThemeLayoutHeaderTemplateComponent, isStandalone: true, selector: "axp-layout-header", viewQueries: [{ propertyName: "title", first: true, predicate: ["title"], descendants: true, isSignal: true }, { propertyName: "description", first: true, predicate: ["description"], descendants: true, isSignal: true }, { propertyName: "actions", first: true, predicate: ["actions"], descendants: true, isSignal: true }, { propertyName: "navbar", first: true, predicate: ["navbar"], descendants: true, isSignal: true }, { propertyName: "breadcrumbs", first: true, predicate: ["breadcrumbs"], descendants: true, isSignal: true }, { propertyName: "navButton", first: true, predicate: ["navButton"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-template #breadcrumbs>
-        <ng-content select="axp-page-breadcrumbs"></ng-content>
+        <ng-content select="axp-layout-breadcrumbs"></ng-content>
     </ng-template>
 
     <ng-template #navbar>
-        <ng-content select="axp-page-navbar"></ng-content>
+        <ng-content select="axp-layout-toolbar"></ng-content>
     </ng-template>
 
     <ng-template #actions>
-        <ng-content select="axp-page-actions"></ng-content>
+        <ng-content select="axp-layout-actions"></ng-content>
     </ng-template>
 
     <ng-template #description>
-        <ng-content select="axp-page-description"></ng-content>
+        <ng-content select="axp-layout-description"></ng-content>
     </ng-template>
 
     <ng-template #title>
-        <ng-content select="axp-page-title"></ng-content>
+        <ng-content select="axp-layout-title"></ng-content>
+    </ng-template>
+    <ng-template #navButton>
+        <ng-content select="axp-layout-nav-button"></ng-content>
     </ng-template>
-   
-    <ng-content></ng-content>
     `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutPageHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutHeaderTemplateComponent, decorators: [{
             type: Component,
             args: [{
                     imports: [CommonModule],
                     standalone: true,
-                    selector: 'axp-page-header',
+                    selector: 'axp-layout-header',
                     template: `
-
     <ng-template #breadcrumbs>
-        <ng-content select="axp-page-breadcrumbs"></ng-content>
+        <ng-content select="axp-layout-breadcrumbs"></ng-content>
     </ng-template>
 
     <ng-template #navbar>
-        <ng-content select="axp-page-navbar"></ng-content>
+        <ng-content select="axp-layout-toolbar"></ng-content>
     </ng-template>
 
     <ng-template #actions>
-        <ng-content select="axp-page-actions"></ng-content>
+        <ng-content select="axp-layout-actions"></ng-content>
     </ng-template>
 
     <ng-template #description>
-        <ng-content select="axp-page-description"></ng-content>
+        <ng-content select="axp-layout-description"></ng-content>
     </ng-template>
 
     <ng-template #title>
-        <ng-content select="axp-page-title"></ng-content>
+        <ng-content select="axp-layout-title"></ng-content>
+    </ng-template>
+    <ng-template #navButton>
+        <ng-content select="axp-layout-nav-button"></ng-content>
+    </ng-template>
+    `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+class AXPThemeLayoutSectionTemplateComponent {
+    constructor() {
+        this.header = contentChild(AXPThemeLayoutHeaderTemplateComponent);
+        this.content = viewChild('content');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutSectionTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.3", type: AXPThemeLayoutSectionTemplateComponent, isStandalone: true, selector: "axp-layout-section", queries: [{ propertyName: "header", first: true, predicate: AXPThemeLayoutHeaderTemplateComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <ng-template #header>
+        <ng-content select="axp-layout-header"></ng-content>
+    </ng-template>
+    <ng-template #content>
+        <ng-content select="axp-layout-content"></ng-content>
+    </ng-template>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutSectionTemplateComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [CommonModule],
+                    standalone: true,
+                    selector: 'axp-layout-section',
+                    template: `
+    <ng-template #header>
+        <ng-content select="axp-layout-header"></ng-content>
+    </ng-template>
+    <ng-template #content>
+        <ng-content select="axp-layout-content"></ng-content>
     </ng-template>
-   
-    <ng-content></ng-content>
     `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }] });
 
+class AXPThemeLayoutSideTemplateComponent {
+    constructor() {
+        this.header = contentChild(AXPThemeLayoutHeaderTemplateComponent);
+        this.content = viewChild('content');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutSideTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.3", type: AXPThemeLayoutSideTemplateComponent, isStandalone: true, selector: "axp-layout-side", queries: [{ propertyName: "header", first: true, predicate: AXPThemeLayoutHeaderTemplateComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <ng-template #header>
+        <ng-content select="axp-layout-header"></ng-content>
+    </ng-template>
+    <ng-template #content>
+        <ng-content select="axp-layout-content"></ng-content>
+    </ng-template>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutSideTemplateComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [CommonModule],
+                    standalone: true,
+                    selector: 'axp-layout-side',
+                    template: `
+    <ng-template #header>
+        <ng-content select="axp-layout-header"></ng-content>
+    </ng-template>
+    <ng-template #content>
+        <ng-content select="axp-layout-content"></ng-content>
+    </ng-template>
+    `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+class AXPThemeLayoutListComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPThemeLayoutListComponent, isStandalone: true, selector: "axp-layout-list", ngImport: i0, template: `<ng-content select="axp-layout-list-item,axp-layout-list-group"></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'axp-layout-list',
+                    template: `<ng-content select="axp-layout-list-item,axp-layout-list-group"></ng-content>`,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+class AXPThemeLayoutListItemsGroupComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutListItemsGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPThemeLayoutListItemsGroupComponent, isStandalone: true, selector: "axp-layout-list-group", ngImport: i0, template: `<ng-content select="axp-layout-list-item"></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutListItemsGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'axp-layout-list-group',
+                    template: `<ng-content select="axp-layout-list-item"></ng-content>`,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+class AXPThemeLayoutListItemComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPThemeLayoutListItemComponent, isStandalone: true, selector: "axp-layout-list-item", ngImport: i0, template: `<ng-content select="axp-layout-content,axp-layout-prefix,axp-layout-suffix"></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutListItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'axp-layout-list-item',
+                    template: `<ng-content select="axp-layout-content,axp-layout-prefix,axp-layout-suffix"></ng-content>`,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
 var AXPThemeLayoutSetting;
 (function (AXPThemeLayoutSetting) {
     AXPThemeLayoutSetting["ThemeVariant"] = "layout:theme:variant";
@@ -334,12 +435,6 @@ withMethods((store, settingService = inject(AXPSettingValueProviderService)) =>
             }
         }
     };
-    //
-    settingService.onChanged.subscribe((setting) => {
-        if (setting.keys.includes(AXPThemeLayoutSetting.ThemeVariant)) {
-            applySettings();
-        }
-    });
     const minimumDisplayTime = 500; // milliseconds
     return {
         // Change theme and update HTML class
@@ -439,11 +534,14 @@ withMethods((store, settingService = inject(AXPSettingValueProviderService)) =>
     };
 }), 
 // Lifecycle Hooks
-withHooks((store) => ({
+withHooks((store, settingService = inject(AXPSettingValueProviderService)) => ({
     onInit() {
-        (async () => {
-            store.loadSettings();
-        })();
+        //
+        settingService.onChanged.subscribe(async (setting) => {
+            if (setting.keys.includes(AXPThemeLayoutSetting.ThemeVariant)) {
+                await store.loadSettings();
+            }
+        });
         // Set up event listener for system theme changes
         const listener = store._setupSystemColorListener();
         patchState(store, { _listener: listener });
@@ -579,16 +677,10 @@ class AXPThemeSettingProvider {
             ?.addSetting({
             key: AXPThemeLayoutSetting.ThemeVariant,
             title: 'Default Theme',
-            scope: 'G',
+            scope: 'U',
+            isInherited: true,
             defaultValue: AXPThemeVariant.Light,
-            valueTransforms: {
-                getter: (value) => {
-                    return typeof value == 'object' ? value['id'] : value;
-                },
-                setter: (value) => {
-                    return typeof value == 'object' ? value['id'] : value;
-                }
-            },
+            valueTransforms: objectKeyValueTransforms('id'),
             widget: {
                 type: 'select-editor',
                 options: {
@@ -604,8 +696,17 @@ class AXPThemeSettingProvider {
 }
 
 class AXPThemesSharedModule {
-    constructor() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemesSharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    constructor(appInitService, injector) {
+        const service = injector.get(AXPLayoutThemeService);
+        appInitService.registerTask({
+            name: 'Settings',
+            statusText: 'Loading Settings ...',
+            run: async () => {
+                await service.loadSettings();
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemesSharedModule, deps: [{ token: i1$1.AXPAppStartUpService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: AXPThemesSharedModule, imports: [i1$1.AXPComponentSlotModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemesSharedModule, providers: [
             {
@@ -647,11 +748,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         }
                     ],
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [{ type: i1$1.AXPAppStartUpService }, { type: i0.Injector }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AXPDeviceType, AXPLayoutThemeService, AXPScreenSize, AXPSideMenuState, AXPThemeLayoutBlockComponent, AXPThemeLayoutPageActionsComponent, AXPThemeLayoutPageHeaderComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutPageSideComponent, AXPThemeSlotComponent, AXPThemeVariant, AXPThemesSharedModule };
+export { AXPDeviceType, AXPLayoutThemeService, AXPScreenSize, AXPSideMenuState, AXPThemeLayoutActionsComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutHeaderTemplateComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPThemeLayoutListItemsGroupComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutSectionTemplateComponent, AXPThemeLayoutSideTemplateComponent, AXPThemeSlotComponent, AXPThemeVariant, AXPThemesSharedModule };
 //# sourceMappingURL=acorex-platform-themes-shared.mjs.map