@acorex/platform 19.2.17-next.0 → 19.2.19

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

@@ -1,7 +1,7 @@
-import * as i0 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 i0 from '@angular/core';
+import { ChangeDetectionStrategy, ViewEncapsulation, Component, viewChild, contentChild, computed, InjectionToken, inject, NgModule, input, signal, effect, Directive } from '@angular/core';
 import * as i2 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
 import * as i3 from '@acorex/components/decorators';
@@ -9,49 +9,19 @@ import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i4 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
 import * as i1$2 from '@acorex/platform/common';
-import { AXPSettingScope, AXPSettingService, AXP_SETTING_DEFINITION_PROVIDER, AXPComponentSlotModule } from '@acorex/platform/common';
+import { AXPSettingScope, AXPSettingService, AXPComponentSlotModule, AXP_SETTING_DEFINITION_PROVIDER } from '@acorex/platform/common';
 import { signalStore, withState, withComputed, withMethods, patchState, withHooks } from '@ngrx/signals';
 import { timer, firstValueFrom, filter } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 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 { AXPWidgetsCatalog, objectKeyValueTransforms, 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-layout-content, \n    axp-layout-header-container,\n    axp-layout-side-container,\n    axp-layout-sections,\n    axp-layout-section-container,\n    axp-layout-body,\n    axp-layout-prefix,\n    axp-layout-suffix,\n    axp-layout-title, \n    axp-layout-nav-button, \n    axp-layout-description, \n    axp-layout-title-bar,\n    axp-layout-breadcrumbs,\n    axp-layout-list-action,\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-layout-content, 
-    axp-layout-header-container,
-    axp-layout-side-container,
-    axp-layout-sections,
-    axp-layout-section-container,
-    axp-layout-body,
-    axp-layout-prefix,
-    axp-layout-suffix,
-    axp-layout-title, 
-    axp-layout-nav-button, 
-    axp-layout-description, 
-    axp-layout-title-bar,
-    axp-layout-breadcrumbs,
-    axp-layout-list-action,
-    `,
-                    template: '<ng-content></ng-content>',
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }] });
-
 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-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 }); }
@@ -68,14 +38,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
         }] });
 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-layout-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,ax-divider,ng-container"></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-layout-actions-secondary',
-                    template: `<ng-content select="ax-button-item"></ng-content>`,
+                    template: `<ng-content select="ax-button-item,ax-divider,ng-container"></ng-content>`,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
@@ -126,7 +96,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                 }]
         }] });
 
-class AXPThemeLayoutHeaderTemplateComponent {
+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-layout-content, \n    axp-layout-page-content, \n    axp-layout-sections,\n    axp-layout-body,\n    axp-layout-page-body,\n    axp-layout-prefix,\n    axp-layout-suffix,\n    axp-layout-title, \n    axp-layout-nav-button, \n    axp-layout-description, \n    axp-layout-title-bar,\n    axp-layout-breadcrumbs,\n    axp-layout-list-action,\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-layout-content, 
+    axp-layout-page-content, 
+    axp-layout-sections,
+    axp-layout-body,
+    axp-layout-page-body,
+    axp-layout-prefix,
+    axp-layout-suffix,
+    axp-layout-title, 
+    axp-layout-nav-button, 
+    axp-layout-description, 
+    axp-layout-title-bar,
+    axp-layout-breadcrumbs,
+    axp-layout-list-action,
+    `,
+                    template: '<ng-content></ng-content>',
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class AXPThemeLayoutFooterComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPThemeLayoutFooterComponent, isStandalone: true, selector: "axp-layout-footer, axp-layout-page-footer", ngImport: i0, template: `
+     <ng-content select="axp-layout-prefix"></ng-content>
+     <ng-content select="axp-layout-suffix"></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: AXPThemeLayoutFooterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [CommonModule],
+                    standalone: true,
+                    selector: 'axp-layout-footer, axp-layout-page-footer',
+                    template: `
+     <ng-content select="axp-layout-prefix"></ng-content>
+     <ng-content select="axp-layout-suffix"></ng-content>
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class AXPThemeLayoutPageHeaderComponent {
     constructor() {
         this.title = viewChild('title');
         this.description = viewChild('description');
@@ -135,198 +156,199 @@ class AXPThemeLayoutHeaderTemplateComponent {
         this.breadcrumbs = viewChild('breadcrumbs');
         this.navButton = viewChild('navButton');
     }
-    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: `
+    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-layout-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 }, { propertyName: "navButton", first: true, predicate: ["navButton"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-template #breadcrumbs>
-        <ng-content select="axp-layout-breadcrumbs"></ng-content>
+      <ng-content select="axp-layout-breadcrumbs"></ng-content>
     </ng-template>
 
     <ng-template #navbar>
-        <ng-content select="axp-layout-toolbar"></ng-content>
+      <ng-content select="axp-layout-toolbar"></ng-content>
     </ng-template>
 
     <ng-template #actions>
-        <ng-content select="axp-layout-actions"></ng-content>
+      <ng-content select="axp-layout-actions"></ng-content>
     </ng-template>
 
     <ng-template #description>
-        <ng-content select="axp-layout-description"></ng-content>
+      <ng-content select="axp-layout-description"></ng-content>
     </ng-template>
 
     <ng-template #title>
-        <ng-content select="axp-layout-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-content select="axp-layout-nav-button"></ng-content>
     </ng-template>
-    <ng-content select="axp-layout-prefix"></ng-content>
-    <ng-content select="axp-layout-suffix"></ng-content>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, 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: AXPThemeLayoutHeaderTemplateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutPageHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     imports: [CommonModule],
                     standalone: true,
-                    selector: 'axp-layout-header',
+                    selector: 'axp-layout-page-header',
                     template: `
     <ng-template #breadcrumbs>
-        <ng-content select="axp-layout-breadcrumbs"></ng-content>
+      <ng-content select="axp-layout-breadcrumbs"></ng-content>
     </ng-template>
 
     <ng-template #navbar>
-        <ng-content select="axp-layout-toolbar"></ng-content>
+      <ng-content select="axp-layout-toolbar"></ng-content>
     </ng-template>
 
     <ng-template #actions>
-        <ng-content select="axp-layout-actions"></ng-content>
+      <ng-content select="axp-layout-actions"></ng-content>
     </ng-template>
 
     <ng-template #description>
-        <ng-content select="axp-layout-description"></ng-content>
+      <ng-content select="axp-layout-description"></ng-content>
     </ng-template>
 
     <ng-template #title>
-        <ng-content select="axp-layout-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-content select="axp-layout-nav-button"></ng-content>
     </ng-template>
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+class AXPThemeLayoutHeaderComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPThemeLayoutHeaderComponent, isStandalone: true, selector: "axp-layout-header", ngImport: i0, template: `
     <ng-content select="axp-layout-prefix"></ng-content>
+    <ng-content></ng-content>
     <ng-content select="axp-layout-suffix"></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: AXPThemeLayoutHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [CommonModule],
+                    standalone: true,
+                    selector: 'axp-layout-header',
+                    template: `
+    <ng-content select="axp-layout-prefix"></ng-content>
+    <ng-content></ng-content>
+    <ng-content select="axp-layout-suffix"></ng-content>
+  `,
                     encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    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 }); }
+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-container"></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: AXPThemeLayoutSectionTemplateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutListComponent, 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>
-    `,
+                    selector: 'axp-layout-list',
+                    template: `<ng-content select="axp-layout-list-item,axp-layout-list-group,ng-container"></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, axp-layout-title, axp-layout-header ,ng-container"></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, axp-layout-title, axp-layout-header ,ng-container"></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-container"></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-container"></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>
+class AXPThemeLayoutSectionComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPThemeLayoutSectionComponent, isStandalone: true, selector: "axp-layout-section", ngImport: i0, template: `
       <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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutSectionComponent, decorators: [{
             type: Component,
             args: [{
                     imports: [CommonModule],
                     standalone: true,
-                    selector: 'axp-layout-side',
+                    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 AXPThemeLayoutEndSideTemplateComponent {
-    constructor() {
-        this.header = contentChild(AXPThemeLayoutHeaderTemplateComponent);
-        this.content = viewChild('content');
-        this.footer = viewChild('footer');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutEndSideTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.3", type: AXPThemeLayoutEndSideTemplateComponent, isStandalone: true, selector: "axp-layout-end-side", queries: [{ propertyName: "header", first: true, predicate: AXPThemeLayoutHeaderTemplateComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "footer", first: true, predicate: ["footer"], 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>
-    <ng-template #footer>
-      <ng-content select="axp-layout-footer"></ng-content>
-    </ng-template>
+
+class AXPThemeLayoutStartSideComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutStartSideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPThemeLayoutStartSideComponent, isStandalone: true, selector: "axp-layout-page-start-side", ngImport: i0, template: `
+    <ng-content select="axp-layout-header"></ng-content>
+    <ng-content select="axp-layout-content"></ng-content>
+    <ng-content select="axp-layout-footer"></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: AXPThemeLayoutEndSideTemplateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutStartSideComponent, decorators: [{
             type: Component,
             args: [{
                     imports: [CommonModule],
                     standalone: true,
-                    selector: 'axp-layout-end-side',
+                    selector: 'axp-layout-page-start-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>
-    <ng-template #footer>
-      <ng-content select="axp-layout-footer"></ng-content>
-    </ng-template>
+    <ng-content select="axp-layout-header"></ng-content>
+    <ng-content select="axp-layout-content"></ng-content>
+    <ng-content select="axp-layout-footer"></ng-content>
   `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }] });
-
-class AXPThemeLayoutFooterComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPThemeLayoutFooterComponent, isStandalone: true, selector: "axp-layout-footer", ngImport: i0, template: `
-    <ng-content select="axp-layout-prefix"></ng-content>
-    <ng-content select="axp-layout-suffix"></ng-content>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+class AXPThemeLayoutEndSideComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutEndSideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPThemeLayoutEndSideComponent, isStandalone: true, selector: "axp-layout-page-end-side", ngImport: i0, template: `
+    <ng-content select="axp-layout-header"></ng-content>
+    <ng-content select="axp-layout-content"></ng-content>
+    <ng-content select="axp-layout-footer"></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: AXPThemeLayoutFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutEndSideComponent, decorators: [{
             type: Component,
             args: [{
                     imports: [CommonModule],
                     standalone: true,
-                    selector: 'axp-layout-footer',
+                    selector: 'axp-layout-page-end-side',
                     template: `
-    <ng-content select="axp-layout-prefix"></ng-content>
-    <ng-content select="axp-layout-suffix"></ng-content>
-    `,
+    <ng-content select="axp-layout-header"></ng-content>
+    <ng-content select="axp-layout-content"></ng-content>
+    <ng-content select="axp-layout-footer"></ng-content>
+  `,
                     encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }] });
 
@@ -354,49 +376,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                 }]
         }] });
 
-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-container"></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-container"></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, axp-layout-title, axp-layout-header ,ng-container"></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, axp-layout-title, axp-layout-header ,ng-container"></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-container"></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-container"></ng-content>`,
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }] });
-
 var AXPThemeLayoutSetting;
 (function (AXPThemeLayoutSetting) {
     AXPThemeLayoutSetting["Name"] = "layout:theme:name";
@@ -407,6 +386,7 @@ var AXPThemeLayoutSetting;
     AXPThemeLayoutSetting["Mode"] = "layout:theme:mode";
     AXPThemeLayoutSetting["SideMenuStatus"] = "layout:theme:sidemenu:status";
     AXPThemeLayoutSetting["SideMenuWidth"] = "layout:theme:sidemenu:width";
+    AXPThemeLayoutSetting["MenuOrientation"] = "layout:theme:menu:orientation";
 })(AXPThemeLayoutSetting || (AXPThemeLayoutSetting = {}));
 
 // Theme Enum
@@ -436,6 +416,12 @@ var AXPSideMenuState;
     AXPSideMenuState["Opened"] = "opened";
     AXPSideMenuState["Closed"] = "closed";
 })(AXPSideMenuState || (AXPSideMenuState = {}));
+// Menu Orientation Enum
+var AXPMenuOrientation;
+(function (AXPMenuOrientation) {
+    AXPMenuOrientation["Vertical"] = "vertical";
+    AXPMenuOrientation["Horizontal"] = "horizontal";
+})(AXPMenuOrientation || (AXPMenuOrientation = {}));
 
 const AXP_THEME_PALETTE_PROVIDER = new InjectionToken('AXP_THEME_PALETTE_PROVIDER', {
     providedIn: 'root',
@@ -502,19 +488,21 @@ withState(() => {
         navigationLoadingTaskCount: 0,
         sideMenuState: (getScreenSize() === AXPScreenSize.Large ? AXPSideMenuState.Opened : AXPSideMenuState.Closed),
         sideMenuWidth: 288,
+        menuOrientation: 'vertical',
         _listener: null,
         _resizeListener: null,
     };
     return state;
 }), 
 // Computed Signals
-withComputed(({ currentMode: currentTheme, systemThemeMode: systemTheme, screenSize, deviceType, isTouchDevice, sideMenuState, overlayLoading, navigationLoading }) => ({
+withComputed(({ currentMode: currentTheme, systemThemeMode: systemTheme, screenSize, deviceType, isTouchDevice, sideMenuState, overlayLoading, navigationLoading, menuOrientation }) => ({
     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),
+    isSideMenuOverlay: computed(() => screenSize() === AXPScreenSize.Small || screenSize() === AXPScreenSize.Medium),
     isSmall: computed(() => screenSize() === AXPScreenSize.Small),
     isMedium: computed(() => screenSize() === AXPScreenSize.Medium),
     isLarge: computed(() => screenSize() === AXPScreenSize.Large),
@@ -524,6 +512,7 @@ withComputed(({ currentMode: currentTheme, systemThemeMode: systemTheme, screenS
     isTouchScreen: computed(() => isTouchDevice()),
     isOverlayLoading: computed(() => overlayLoading()),
     isNavigationLoading: computed(() => navigationLoading()),
+    isMenuHorizontal: computed(() => menuOrientation() === AXPMenuOrientation.Horizontal),
 })), 
 // Methods for State Management
 withMethods((store, http = inject(HttpClient), settingService = inject(AXPSettingService), pallets = inject(AXP_THEME_PALETTE_PROVIDER)) => {
@@ -538,6 +527,9 @@ withMethods((store, http = inject(HttpClient), settingService = inject(AXPSettin
         const settingSideMenu = (await settingService.get(AXPThemeLayoutSetting.SideMenuStatus)) ?? store.sideMenuState();
         patchState(store, { sideMenuState: settingSideMenu });
         //
+        const settingMenuOrientation = (await settingService.get(AXPThemeLayoutSetting.MenuOrientation)) ?? store.menuOrientation();
+        patchState(store, { menuOrientation: settingMenuOrientation });
+        //  
         const fontFamily = await settingService.get(AXPThemeLayoutSetting.Font);
         const fontSize = await settingService.get(AXPThemeLayoutSetting.FontSize);
         patchState(store, { font: { family: fontFamily, size: fontSize } });
@@ -576,6 +568,8 @@ withMethods((store, http = inject(HttpClient), settingService = inject(AXPSettin
                 patchState(store, { sideMenuState: newScreenSize === AXPScreenSize.Small ? AXPSideMenuState.Closed : AXPSideMenuState.Opened });
                 settingService.scope(AXPSettingScope.User).set(AXPThemeLayoutSetting.SideMenuStatus, store.sideMenuState());
             }
+            console.log('screenSize', newScreenSize);
+            console.log('deviceType', store.deviceType());
         }
     };
     const _setOverlayLoading = async (value, delay = 0) => {
@@ -811,7 +805,7 @@ class AXPThemeSlotComponent {
         </ax-button-item-list>
       </ax-dropdown-panel>
     </ax-button>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i4.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i5.AXTranslatorDirective, selector: "[translate]" }] }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i4.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i5.AXTranslatorDirective, selector: "[translate]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeSlotComponent, decorators: [{
             type: Component,
@@ -913,6 +907,25 @@ class AXPThemeSettingProvider {
             .endSection()
             // Add the 'Scale & Layout' section
             .addSection('layout', 'Scale & Layout', 'Customize the application’s layout and scaling options.')
+            // Add the 'Menu Orientation' setting
+            .addSetting({
+            key: AXPThemeLayoutSetting.MenuOrientation,
+            title: 'Menu Orientation',
+            scope: 'U',
+            isInherited: true,
+            defaultValue: 'vertical',
+            valueTransforms: objectKeyValueTransforms('id'),
+            widget: {
+                type: 'select-editor',
+                options: {
+                    dataSource: [
+                        { id: 'vertical', title: 'Vertical' },
+                        { id: 'horizontal', title: 'Horizontal' },
+                    ],
+                },
+            },
+            description: 'Set the menu orientation for the application.',
+        })
             // Add the 'Font Style' setting
             .addSetting({
             key: AXPThemeLayoutSetting.Font,
@@ -1093,9 +1106,91 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i1$2.AXPAppStartUpService }, { type: i0.Injector }] });
 
+class AXPDrawerDirective {
+    #effect;
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+        this.opened = input(false);
+        this._opened = signal(false);
+        this.#effect = effect(() => {
+            this._opened.set(this.opened());
+        });
+        this.isOpen = computed(() => this._opened());
+        this.position = input('start');
+        this.mode = input('overlay');
+        this.width = input('300px');
+    }
+    ngOnInit() {
+        // Set initial styles
+        this.renderer.setStyle(this.el.nativeElement, 'position', 'absolute');
+        this.renderer.setStyle(this.el.nativeElement, 'top', '0');
+        this.renderer.setStyle(this.el.nativeElement, 'bottom', '0');
+        this.renderer.setStyle(this.el.nativeElement, 'height', '100%');
+        this.renderer.setStyle(this.el.nativeElement, 'transition', 'transform 0.3s ease-in-out');
+        // Setup effects for reactive updates
+        effect(() => {
+            const position = this.position();
+            const width = this.width();
+            const isOpen = this.isOpen();
+            const mode = this.mode();
+            // Set width
+            this.renderer.setStyle(this.el.nativeElement, 'width', width);
+            // Set position
+            if (position === 'start') {
+                this.renderer.setStyle(this.el.nativeElement, 'left', '0');
+                this.renderer.setStyle(this.el.nativeElement, 'right', null);
+                this.renderer.setStyle(this.el.nativeElement, 'transform', isOpen ? 'translateX(0)' : `translateX(-100%)`);
+            }
+            else {
+                this.renderer.setStyle(this.el.nativeElement, 'right', '0');
+                this.renderer.setStyle(this.el.nativeElement, 'left', null);
+                this.renderer.setStyle(this.el.nativeElement, 'transform', isOpen ? 'translateX(0)' : `translateX(100%)`);
+            }
+            // Handle push mode
+            if (mode === 'push') {
+                const container = this.el.nativeElement.parentElement;
+                if (container) {
+                    const translateX = isOpen ? (position === 'start' ? width : `-${width}`) : '0';
+                    this.renderer.setStyle(container, 'transition', 'transform 0.3s ease-in-out');
+                    this.renderer.setStyle(container, 'transform', `translateX(${translateX})`);
+                }
+            }
+        });
+    }
+    toggle() {
+        this._opened.set(!this._opened());
+    }
+    open() {
+        this._opened.set(true);
+    }
+    close() {
+        this._opened.set(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPDrawerDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.3", type: AXPDrawerDirective, isStandalone: true, selector: "[axpDrawer]", inputs: { opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.axp-drawer": "true", "class.axp-drawer-opened": "isOpen()", "class.axp-drawer-closed": "!isOpen()", "class.axp-drawer-overlay": "mode() === \"overlay\"", "class.axp-drawer-push": "mode() === \"push\"", "class.axp-drawer-start": "position() === \"start\"", "class.axp-drawer-end": "position() === \"end\"" } }, exportAs: ["axpDrawer"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPDrawerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[axpDrawer]',
+                    standalone: true,
+                    host: {
+                        '[class.axp-drawer]': 'true',
+                        '[class.axp-drawer-opened]': 'isOpen()',
+                        '[class.axp-drawer-closed]': '!isOpen()',
+                        '[class.axp-drawer-overlay]': 'mode() === "overlay"',
+                        '[class.axp-drawer-push]': 'mode() === "push"',
+                        '[class.axp-drawer-start]': 'position() === "start"',
+                        '[class.axp-drawer-end]': 'position() === "end"',
+                    },
+                    exportAs: 'axpDrawer'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AXPDeviceType, AXPLayoutThemeService, AXPScreenSize, AXPSideMenuState, AXPThemeLayoutActionsComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutEndSideTemplateComponent, AXPThemeLayoutFooterComponent, AXPThemeLayoutHeaderTemplateComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPThemeLayoutListItemsGroupComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutSectionTemplateComponent, AXPThemeLayoutSetting, AXPThemeLayoutSideTemplateComponent, AXPThemeLayoutToolbarComponent, AXPThemeMode, AXPThemePaletteProviderDefault, AXPThemeSlotComponent, AXPThemesSharedModule, AXP_THEME_PALETTE_PROVIDER };
+export { AXPDeviceType, AXPDrawerDirective, AXPLayoutThemeService, AXPMenuOrientation, AXPScreenSize, AXPSideMenuState, AXPThemeLayoutActionsComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutEndSideComponent, AXPThemeLayoutFooterComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPThemeLayoutListItemsGroupComponent, AXPThemeLayoutPageHeaderComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutSectionComponent, AXPThemeLayoutSetting, AXPThemeLayoutStartSideComponent, AXPThemeLayoutToolbarComponent, AXPThemeMode, AXPThemePaletteProviderDefault, AXPThemeSlotComponent, AXPThemesSharedModule, AXP_THEME_PALETTE_PROVIDER };
 //# sourceMappingURL=acorex-platform-themes-shared.mjs.map