@acorex/platform 19.1.2 → 19.1.4

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, viewChild, contentChild, computed, inject, NgModule } from '@angular/core';
+import { Component, ViewEncapsulation, ChangeDetectionStrategy, viewChild, contentChild, computed, InjectionToken, inject, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@acorex/components/button';
@@ -8,29 +8,43 @@ import * as i3 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i4 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
-import * as i1$1 from '@acorex/platform/common';
-import { AXPSettingValueProviderService, AXP_SETTING_DEFINITION_PROVIDER, AXPComponentSlotModule } from '@acorex/platform/common';
+import * as i1$2 from '@acorex/platform/common';
+import { AXPSettingScope, AXPSettingValueProviderService, AXP_SETTING_DEFINITION_PROVIDER, AXPComponentSlotModule } from '@acorex/platform/common';
 import { signalStore, withState, withComputed, withMethods, patchState, withHooks } from '@ngrx/signals';
-import { timer } from 'rxjs';
+import { timer, filter } from 'rxjs';
 import * as i5 from '@acorex/core/translation';
 import { AXTranslationModule } from '@acorex/core/translation';
+import * as i2$1 from '@acorex/platform/layout/builder';
+import { objectKeyValueTransforms, AXPWidgetsCatalog, AXPWidgetComponent, AXP_WIDGETS_LAYOUT_GROUP, AXPLayoutBuilderModule } from '@acorex/platform/layout/builder';
+import { FormsModule } from '@angular/forms';
+import * as i1$1 from '@acorex/cdk/selection';
+import { AXSelectionModule } from '@acorex/cdk/selection';
+import { AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY } from '@acorex/platform/widgets';
 
 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 +54,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 +89,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,108 +126,205 @@ 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>
-   
-    <ng-content></ng-content>
     `,
                     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>
+    `,
+                    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";
-    AXPThemeLayoutSetting["ThemeSideMenu"] = "layout:theme:sidemenu";
+    AXPThemeLayoutSetting["Name"] = "layout:theme:name";
+    AXPThemeLayoutSetting["Layout"] = "layout:theme:layout";
+    AXPThemeLayoutSetting["Font"] = "layout:theme:font:family";
+    AXPThemeLayoutSetting["FontSize"] = "layout:theme:font:size";
+    AXPThemeLayoutSetting["Palette"] = "layout:theme:palette";
+    AXPThemeLayoutSetting["Mode"] = "layout:theme:mode";
+    AXPThemeLayoutSetting["SideMenuStatus"] = "layout:theme:sidemenu";
 })(AXPThemeLayoutSetting || (AXPThemeLayoutSetting = {}));
 
 // Theme Enum
-var AXPThemeVariant;
-(function (AXPThemeVariant) {
-    AXPThemeVariant["Light"] = "light";
-    AXPThemeVariant["Dark"] = "dark";
-    AXPThemeVariant["System"] = "system";
-})(AXPThemeVariant || (AXPThemeVariant = {}));
+var AXPThemeMode;
+(function (AXPThemeMode) {
+    AXPThemeMode["Light"] = "light";
+    AXPThemeMode["Dark"] = "dark";
+    AXPThemeMode["System"] = "system";
+})(AXPThemeMode || (AXPThemeMode = {}));
 // Screen Size Enum
 var AXPScreenSize;
 (function (AXPScreenSize) {
@@ -234,12 +345,31 @@ var AXPSideMenuState;
     AXPSideMenuState["Opened"] = "opened";
     AXPSideMenuState["Closed"] = "closed";
 })(AXPSideMenuState || (AXPSideMenuState = {}));
+
+const AXP_THEME_PALETTE_PROVIDER = new InjectionToken('AXP_THEME_PALETTE_PROVIDER', {
+    providedIn: 'root',
+    factory: () => {
+        return new AXPThemePaletteProviderDefault();
+    }
+});
+class AXPThemePaletteProviderDefault {
+    getList() {
+        return Promise.resolve([
+            {
+                name: 'default',
+                title: 'Default',
+                path: '/assets/themes/palletes/default.css',
+                colors: []
+            },
+        ]);
+    }
+}
+
 // ThemeStore - Manages theme settings, system changes, and loading states
 const AXPLayoutThemeService = signalStore({ providedIn: 'root' }, 
 // Initial State
 withState(() => {
-    const initialTheme = AXPThemeVariant.System;
-    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const isSystemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
     // Helper function to get the initial screen size
     const getScreenSize = () => {
         const width = window.innerWidth;
@@ -265,8 +395,13 @@ withState(() => {
         return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
     };
     const state = {
-        currentTheme: initialTheme,
-        systemTheme: (systemPrefersDark ? AXPThemeVariant.Dark : AXPThemeVariant.Light),
+        currentMode: AXPThemeMode.System,
+        currentPallete: 'default',
+        systemThemeMode: (isSystemDark ? AXPThemeMode.Dark : AXPThemeMode.Light),
+        font: {
+            family: 'system-ui',
+            size: 'medium'
+        },
         screenSize: getScreenSize(),
         deviceType: getDeviceType(),
         isTouchDevice: isTouchDevice(),
@@ -281,12 +416,12 @@ withState(() => {
     return state;
 }), 
 // Computed Signals
-withComputed(({ currentTheme, systemTheme, screenSize, deviceType, isTouchDevice, sideMenuState, overlayLoading, navigationLoading }) => ({
-    isDarkMode: computed(() => currentTheme() === AXPThemeVariant.Dark ||
-        (currentTheme() === AXPThemeVariant.System && systemTheme() === AXPThemeVariant.Dark)),
-    isLightMode: computed(() => currentTheme() === AXPThemeVariant.Light ||
-        (currentTheme() === AXPThemeVariant.System && systemTheme() === AXPThemeVariant.Light)),
-    isSystemMode: computed(() => currentTheme() === AXPThemeVariant.System),
+withComputed(({ currentMode: currentTheme, systemThemeMode: systemTheme, screenSize, deviceType, isTouchDevice, sideMenuState, overlayLoading, navigationLoading }) => ({
+    isDarkMode: computed(() => currentTheme() === AXPThemeMode.Dark ||
+        (currentTheme() === AXPThemeMode.System && systemTheme() === AXPThemeMode.Dark)),
+    isLightMode: computed(() => currentTheme() === AXPThemeMode.Light ||
+        (currentTheme() === AXPThemeMode.System && systemTheme() === AXPThemeMode.Light)),
+    isSystemMode: computed(() => currentTheme() === AXPThemeMode.System),
     isSideMenuOpen: computed(() => sideMenuState() === AXPSideMenuState.Opened),
     isSmall: computed(() => screenSize() === AXPScreenSize.Small),
     isMedium: computed(() => screenSize() === AXPScreenSize.Medium),
@@ -299,22 +434,37 @@ withComputed(({ currentTheme, systemTheme, screenSize, deviceType, isTouchDevice
     isNavigationLoading: computed(() => navigationLoading()),
 })), 
 // Methods for State Management
-withMethods((store, settingService = inject(AXPSettingValueProviderService)) => {
-    const applySettings = async () => {
+withMethods((store, settingService = inject(AXPSettingValueProviderService), pallets = inject(AXP_THEME_PALETTE_PROVIDER)) => {
+    const _applySettings = async () => {
         // Initialize theme and side menu setting from storage
-        const settingTheme = (await settingService.get(AXPThemeLayoutSetting.ThemeVariant)) ?? AXPThemeVariant.Light;
-        patchState(store, { currentTheme: settingTheme });
-        const settingSideMenu = (await settingService.get(AXPThemeLayoutSetting.ThemeSideMenu)) ?? store.sideMenuState();
+        const settingThemeMode = (await settingService.get(AXPThemeLayoutSetting.Mode)) ?? AXPThemeMode.Light;
+        patchState(store, { currentMode: settingThemeMode });
+        //
+        const settingThemePallete = (await settingService.get(AXPThemeLayoutSetting.Palette)) ?? 'default';
+        patchState(store, { currentPallete: settingThemePallete });
+        //
+        const settingSideMenu = (await settingService.get(AXPThemeLayoutSetting.SideMenuStatus)) ?? store.sideMenuState();
         patchState(store, { sideMenuState: settingSideMenu });
-        updateHtmlClass(store.isDarkMode());
+        //
+        const fontFamily = await settingService.get(AXPThemeLayoutSetting.Font);
+        const fontSize = await settingService.get(AXPThemeLayoutSetting.FontSize);
+        patchState(store, { font: { family: fontFamily, size: fontSize } });
+        //
+        await _updateHtmlClass();
     };
     // Update HTML class based on theme
-    const updateHtmlClass = (dark) => {
+    const _updateHtmlClass = async () => {
         const html = document.getElementsByTagName('html')[0];
-        dark ? html.classList.add('ax-dark') : html.classList.remove('ax-dark');
+        //
+        store.isDarkMode() ? html.classList.add('ax-dark') : html.classList.remove('ax-dark');
+        //
+        html.style.fontFamily = store.font().family;
+        html.style.fontSize = store.font().size;
+        //
+        await _applyThemePalette(store.currentPallete());
     };
     // Update screen size based on window width
-    const updateScreenSize = () => {
+    const _updateScreenSize = () => {
         const width = window.innerWidth;
         let newScreenSize;
         if (width <= 600) {
@@ -330,39 +480,53 @@ withMethods((store, settingService = inject(AXPSettingValueProviderService)) =>
             patchState(store, { screenSize: newScreenSize });
             if (store.sideMenuState() !== AXPSideMenuState.Closed) {
                 patchState(store, { sideMenuState: newScreenSize === AXPScreenSize.Small ? AXPSideMenuState.Closed : AXPSideMenuState.Opened });
-                settingService.set(AXPThemeLayoutSetting.ThemeSideMenu, store.sideMenuState());
+                settingService.scope(AXPSettingScope.User).set(AXPThemeLayoutSetting.SideMenuStatus, store.sideMenuState());
             }
         }
     };
-    //
-    settingService.onChanged.subscribe((setting) => {
-        if (setting.keys.includes(AXPThemeLayoutSetting.ThemeVariant)) {
-            applySettings();
+    // Helper method to apply a cached theme palette
+    const _applyThemePalette = async (name) => {
+        const pallete = (await pallets.getList()).find(c => c.name == name);
+        if (!pallete) {
+            return;
         }
-    });
+        // Remove all existing theme-related link elements
+        const existingLinks = document.querySelectorAll('link[data-theme]');
+        existingLinks.forEach(link => document.head.removeChild(link));
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = pallete.path;
+        link.setAttribute('data-theme', name);
+        document.head.appendChild(link);
+        // Wait for the CSS file to load
+        await new Promise((resolve, reject) => {
+            link.onload = () => resolve();
+            link.onerror = () => reject(new Error(`Failed to load CSS file: ${pallete.path}`));
+        });
+    };
     const minimumDisplayTime = 500; // milliseconds
     return {
         // Change theme and update HTML class
-        changeTheme(theme) {
-            settingService.set(AXPThemeLayoutSetting.ThemeVariant, theme);
-            patchState(store, { currentTheme: theme });
-            updateHtmlClass(store.isDarkMode());
+        changeThemeMode(theme) {
+            settingService.scope(AXPSettingScope.User).set(AXPThemeLayoutSetting.Mode, theme);
+            patchState(store, { currentMode: theme });
+            _updateHtmlClass();
         },
         // Open side menu
         openSideMenu() {
             patchState(store, { sideMenuState: AXPSideMenuState.Opened });
-            settingService.set(AXPThemeLayoutSetting.ThemeSideMenu, AXPSideMenuState.Opened);
+            settingService.scope(AXPSettingScope.User).set(AXPThemeLayoutSetting.SideMenuStatus, AXPSideMenuState.Opened);
         },
         // Close side menu
         closeSideMenu() {
             patchState(store, { sideMenuState: AXPSideMenuState.Closed });
-            settingService.set(AXPThemeLayoutSetting.ThemeSideMenu, AXPSideMenuState.Closed);
+            settingService.scope(AXPSettingScope.User).set(AXPThemeLayoutSetting.SideMenuStatus, AXPSideMenuState.Closed);
         },
         // Toggle side menu state
         toggleSideMenu() {
             const newSideMenuState = store.sideMenuState() === AXPSideMenuState.Opened ? AXPSideMenuState.Closed : AXPSideMenuState.Opened;
             patchState(store, { sideMenuState: newSideMenuState });
-            settingService.set(AXPThemeLayoutSetting.ThemeSideMenu, newSideMenuState);
+            settingService.scope(AXPSettingScope.User).set(AXPThemeLayoutSetting.SideMenuStatus, newSideMenuState);
         },
         // Set navigation loading state with a task counter
         setNavigationLoading(value) {
@@ -402,16 +566,15 @@ withMethods((store, settingService = inject(AXPSettingValueProviderService)) =>
                 }
             }
         },
-        // Apply the current theme to the HTML class
-        _applyCurrentTheme() {
-            updateHtmlClass(store.isDarkMode());
+        async loadSettings() {
+            await _applySettings();
         },
         // Set up event listener for system theme changes
         _setupSystemColorListener() {
             const mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
             const listener = (e) => {
-                patchState(store, { systemTheme: e.matches ? AXPThemeVariant.Dark : AXPThemeVariant.Light });
-                updateHtmlClass(store.isDarkMode());
+                patchState(store, { systemThemeMode: e.matches ? AXPThemeMode.Dark : AXPThemeMode.Light });
+                _updateHtmlClass();
             };
             mediaQueryList.addEventListener('change', listener);
             return listener;
@@ -424,7 +587,7 @@ withMethods((store, settingService = inject(AXPSettingValueProviderService)) =>
         // Set up event listener for window resize
         _setupResizeListener() {
             const listener = () => {
-                updateScreenSize();
+                _updateScreenSize();
             };
             window.addEventListener('resize', listener);
             return listener;
@@ -433,17 +596,18 @@ withMethods((store, settingService = inject(AXPSettingValueProviderService)) =>
         _removeResizeListener(listener) {
             window.removeEventListener('resize', listener);
         },
-        async loadSettings() {
-            applySettings();
-        }
     };
 }), 
 // Lifecycle Hooks
-withHooks((store) => ({
+withHooks((store, settingService = inject(AXPSettingValueProviderService)) => ({
     onInit() {
-        (async () => {
-            store.loadSettings();
-        })();
+        //
+        settingService.onChanged.pipe(filter(c => c.scope == AXPSettingScope.User)).subscribe(async (changes) => {
+            const keys = Object.values(AXPThemeLayoutSetting);
+            if (changes.keys.some((key) => keys.includes(key))) {
+                await store.loadSettings();
+            }
+        });
         // Set up event listener for system theme changes
         const listener = store._setupSystemColorListener();
         patchState(store, { _listener: listener });
@@ -466,7 +630,7 @@ withHooks((store) => ({
 class AXPThemeSlotComponent {
     constructor() {
         this.store = inject(AXPLayoutThemeService);
-        this.variants = AXPThemeVariant;
+        this.variants = AXPThemeMode;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPThemeSlotComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
@@ -483,7 +647,7 @@ class AXPThemeSlotComponent {
       <ax-dropdown-panel *translate="let t">
         <ax-button-item-list>
           <ax-button-item
-            (onClick)="store.changeTheme(variants.Light)"
+            (onClick)="store.changeThemeMode(variants.Light)"
             [text]="(t('theme.light') | async)!"
             [selected]="!store.isSystemMode() && !store.isDarkMode()"
           >
@@ -492,7 +656,7 @@ class AXPThemeSlotComponent {
             </ax-prefix>
           </ax-button-item>
           <ax-button-item
-            (onClick)="store.changeTheme(variants.Dark)"
+            (onClick)="store.changeThemeMode(variants.Dark)"
             [text]="(t('theme.dark') | async)!"
             [selected]="!store.isSystemMode() && store.isDarkMode()"
           >
@@ -501,7 +665,7 @@ class AXPThemeSlotComponent {
             </ax-prefix>
           </ax-button-item>
           <ax-button-item
-            (onClick)="store.changeTheme(variants.System)"
+            (onClick)="store.changeThemeMode(variants.System)"
             [text]="(t('theme.system') | async)!"
             [selected]="store.isSystemMode()"
           >
@@ -531,7 +695,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
       <ax-dropdown-panel *translate="let t">
         <ax-button-item-list>
           <ax-button-item
-            (onClick)="store.changeTheme(variants.Light)"
+            (onClick)="store.changeThemeMode(variants.Light)"
             [text]="(t('theme.light') | async)!"
             [selected]="!store.isSystemMode() && !store.isDarkMode()"
           >
@@ -540,7 +704,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
             </ax-prefix>
           </ax-button-item>
           <ax-button-item
-            (onClick)="store.changeTheme(variants.Dark)"
+            (onClick)="store.changeThemeMode(variants.Dark)"
             [text]="(t('theme.dark') | async)!"
             [selected]="!store.isSystemMode() && store.isDarkMode()"
           >
@@ -549,7 +713,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
             </ax-prefix>
           </ax-button-item>
           <ax-button-item
-            (onClick)="store.changeTheme(variants.System)"
+            (onClick)="store.changeThemeMode(variants.System)"
             [text]="(t('theme.system') | async)!"
             [selected]="store.isSystemMode()"
           >
@@ -566,47 +730,181 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
         }] });
 
 class AXPThemeSettingProvider {
+    constructor() {
+        this.pallets = inject(AXP_THEME_PALETTE_PROVIDER);
+    }
     async provide(context) {
-        context.addGroup('common-settings', 'General Settings', 'General application settings.', 'fa-solid fa-gear-complex')
-            // General Settings Section
-            .addSection('general', 'General', 'General configurations for the application.')
+        // Define the 'Appearance Settings' group
+        context.addGroup('appearance', 'Appearance Settings', 'Customize the overall look and feel of the application.', 'fa-solid fa-palette')
+            // Add the 'Brightness & Color' section
+            .addSection('color', 'Brightness & Color', 'Adjust the theme settings, including brightness, colors, and modes.')
+            // Add the 'Theme Mode' setting
+            .addSetting({
+            key: AXPThemeLayoutSetting.Mode,
+            title: 'Theme Mode',
+            scope: 'U',
+            isInherited: true,
+            defaultValue: AXPThemeMode.Light,
+            valueTransforms: objectKeyValueTransforms('id'),
+            widget: {
+                type: AXPWidgetsCatalog.select,
+                options: {
+                    dataSource: Object.entries(AXPThemeMode).map(([key, value]) => ({
+                        id: value,
+                        title: key.charAt(0).toUpperCase() + key.slice(1).toLowerCase(),
+                    })),
+                },
+            },
+            description: 'Switch between Light and Dark themes for the application.',
+        })
+            // Add the 'Palette' setting
+            .addSetting({
+            key: AXPThemeLayoutSetting.Palette,
+            title: 'Palette',
+            scope: 'U',
+            isInherited: true,
+            defaultValue: 'default',
+            valueTransforms: objectKeyValueTransforms('name'),
+            widget: {
+                type: AXPWidgetsCatalog.select,
+                options: {
+                    valueField: 'name',
+                    dataSource: await this.pallets.getList(),
+                },
+            },
+            description: 'Choose a color palette for the application interface.',
+        })
+            // End the 'Brightness & Color' section
             .endSection()
-            .endGroup();
-        //
-        context
-            .group('common-settings')
-            ?.section('general')
-            ?.addSetting({
-            key: AXPThemeLayoutSetting.ThemeVariant,
-            title: 'Default Theme',
-            scope: 'G',
-            defaultValue: AXPThemeVariant.Light,
-            valueTransforms: {
-                getter: (value) => {
-                    return typeof value == 'object' ? value['id'] : value;
+            // Add the 'Scale & Layout' section
+            .addSection('layout', 'Scale & Layout', 'Customize the application’s layout and scaling options.')
+            // Add the 'Font Style' setting
+            .addSetting({
+            key: AXPThemeLayoutSetting.Font,
+            title: 'Font Style',
+            scope: 'U',
+            isInherited: true,
+            defaultValue: 'system-ui',
+            valueTransforms: objectKeyValueTransforms('id'),
+            widget: {
+                type: 'select-editor',
+                options: {
+                    dataSource: [
+                        { id: 'system-ui', title: 'Default' },
+                        { id: 'serif', title: 'Serif' },
+                        { id: 'sans-serif', title: 'Sans-serif' },
+                        { id: 'monospace', title: 'Monospace' },
+                        { id: 'arial', title: 'Arial' },
+                        { id: 'verdana', title: 'Verdana' },
+                        { id: 'tahoma', title: 'Tahoma' },
+                        { id: 'times-new-roman', title: 'Times New Roman' },
+                        { id: 'georgia', title: 'Georgia' },
+                        { id: 'helvetica', title: 'Helvetica' },
+                        { id: 'calibri', title: 'Calibri' },
+                        { id: 'cursive', title: 'Cursive' },
+                    ],
                 },
-                setter: (value) => {
-                    return typeof value == 'object' ? value['id'] : value;
-                }
             },
+            description: 'Set the font style for application text.',
+        })
+            // Add the 'Font Size' setting
+            .addSetting({
+            key: AXPThemeLayoutSetting.FontSize,
+            title: 'Font Size',
+            scope: 'U',
+            isInherited: true,
+            defaultValue: 'medium',
+            valueTransforms: objectKeyValueTransforms('id'),
             widget: {
                 type: 'select-editor',
                 options: {
-                    dataSource: Object.entries(AXPThemeVariant).map(([key, value]) => ({
-                        id: value,
-                        title: key.charAt(0).toUpperCase() + key.slice(1).toLowerCase(),
-                    })),
+                    dataSource: [
+                        { id: 'small', title: 'Small' },
+                        { id: 'medium', title: 'Medium' },
+                        { id: 'large', title: 'Large' },
+                        { id: 'x-large', title: 'Extra Large' },
+                    ],
                 },
             },
-            description: 'Select the default theme for the application.',
-        });
+            description: 'Adjust the font size for application text.',
+        })
+            // End the 'Scale & Layout' section
+            .endSection()
+            // End the 'Appearance Settings' group
+            .endGroup();
     }
 }
 
+class AXPThemeColorSelectionWidgetEditComponent extends AXPWidgetComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeColorSelectionWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPThemeColorSelectionWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ` 
+    <div axSelectionGroup   [multiple]="false"  [selectedKeys]="'1'" >
+          <div axSelectionItem #a="axSelectionItem" key="1" [class.ax-text-primary-500]="a.isActive()">
+            item 1
+          </div>
+          <div axSelectionItem #b="axSelectionItem" key="2" [class.ax-text-primary-500]="b.isActive()">
+            item 1
+          </div>
+    </div>  
+    
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSelectionModule }, { kind: "directive", type: i1$1.AXSelectionGroupDirective, selector: "[axSelectionGroup]", inputs: ["multiple", "selectedKeys"], outputs: ["onSelectionChanged"], exportAs: ["axSelectionGroup"] }, { kind: "directive", type: i1$1.AXSelectionItemDirective, selector: "[axSelectionItem]", inputs: ["key"], outputs: ["onClick"], exportAs: ["axSelectionItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeColorSelectionWidgetEditComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: ` 
+    <div axSelectionGroup   [multiple]="false"  [selectedKeys]="'1'" >
+          <div axSelectionItem #a="axSelectionItem" key="1" [class.ax-text-primary-500]="a.isActive()">
+            item 1
+          </div>
+          <div axSelectionItem #b="axSelectionItem" key="2" [class.ax-text-primary-500]="b.isActive()">
+            item 1
+          </div>
+    </div>  
+    
+  `,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule, FormsModule, AXSelectionModule],
+                }]
+        }] });
+
+var themeColorSelectionWidgetEdit_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPThemeColorSelectionWidgetEditComponent: AXPThemeColorSelectionWidgetEditComponent
+});
+
+const AXPThemeColorSelectionWidget = {
+    name: "theme-color-selection",
+    title: "Theme Color Selection",
+    icon: "fa-solid fa-square",
+    type: 'editor',
+    group: AXP_WIDGETS_LAYOUT_GROUP,
+    properties: [
+        AXP_NAME_PROPERTY,
+        AXP_DATA_PATH_PROPERTY,
+        AXP_DISABLED_PROPERTY,
+    ],
+    components: {
+        edit: {
+            component: () => Promise.resolve().then(function () { return themeColorSelectionWidgetEdit_component; }).then((c) => c.AXPThemeColorSelectionWidgetEditComponent),
+        },
+    }
+};
+
 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 }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: AXPThemesSharedModule, imports: [i1$1.AXPComponentSlotModule] }); }
+    constructor(appInitService, injector) {
+        const service = injector.get(AXPLayoutThemeService);
+        appInitService.registerTask({
+            name: 'layout-theme',
+            statusText: 'Applying layout theme 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$2.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$2.AXPComponentSlotModule, i2$1.AXPLayoutBuilderModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemesSharedModule, providers: [
             {
                 provide: AXP_SETTING_DEFINITION_PROVIDER,
@@ -621,6 +919,11 @@ class AXPThemesSharedModule {
                         component: AXPThemeSlotComponent,
                     },
                 ],
+            }),
+            AXPLayoutBuilderModule.forChild({
+                widgets: [
+                    AXPThemeColorSelectionWidget
+                ]
             })] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemesSharedModule, decorators: [{
@@ -636,6 +939,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                                 },
                             ],
                         }),
+                        AXPLayoutBuilderModule.forChild({
+                            widgets: [
+                                AXPThemeColorSelectionWidget
+                            ]
+                        })
                     ],
                     exports: [],
                     declarations: [],
@@ -647,11 +955,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         }
                     ],
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [{ type: i1$2.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, AXPThemeMode, AXPThemePaletteProviderDefault, AXPThemeSlotComponent, AXPThemesSharedModule, AXP_THEME_PALETTE_PROVIDER };
 //# sourceMappingURL=acorex-platform-themes-shared.mjs.map