@flusys/ng-layout 3.0.0 → 4.0.0-rc

package/fesm2022/flusys-ng-layout.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { inject, PLATFORM_ID, Injectable, DOCUMENT, signal, computed, effect, ChangeDetectionStrategy, Component, afterNextRender, InjectionToken, DestroyRef, ElementRef, viewChild, input, Renderer2 } from '@angular/core';
-import { isPlatformBrowser, NgClass, DOCUMENT as DOCUMENT$1 } from '@angular/common';
-import { APP_CONFIG, DEFAULT_APP_NAME, DEFAULT_AUTHOR, isCompanyFeatureEnabled } from '@flusys/ng-core';
+import { inject, PLATFORM_ID, Injectable, DOCUMENT, signal, computed, effect, Component, afterNextRender, InjectionToken, DestroyRef, ElementRef, viewChild, input, Renderer2 } from '@angular/core';
 import * as i2$2 from '@flusys/ng-shared';
-import { evaluateLogicNode, PermissionValidatorService, AngularModule, IconComponent } from '@flusys/ng-shared';
+import { evaluateLogicNode, PermissionValidatorService, TranslatePipe, AngularModule, IconComponent } from '@flusys/ng-shared';
+import { isPlatformBrowser, NgComponentOutlet, DOCUMENT as DOCUMENT$1, NgClass } from '@angular/common';
+import { APP_CONFIG, TRANSLATE_ADAPTER, DEFAULT_APP_NAME, DEFAULT_AUTHOR, isCompanyFeatureEnabled } from '@flusys/ng-core';
 import { Subject, fromEvent, filter as filter$1 } from 'rxjs';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
@@ -209,6 +209,7 @@ class LayoutService {
     isBrowser = isPlatformBrowser(this.platformId);
     persistence = inject(LayoutPersistenceService);
     appConfig = inject(APP_CONFIG, { optional: true });
+    translateAdapter = inject(TRANSLATE_ADAPTER, { optional: true });
     DEFAULT_CONFIG = {
         preset: 'Aura',
         primary: 'emerald',
@@ -255,7 +256,7 @@ class LayoutService {
     getSurface = computed(() => this._layoutConfig().surface, ...(ngDevMode ? [{ debugName: "getSurface" }] : []));
     isOverlay = computed(() => this._layoutConfig().menuMode === 'overlay', ...(ngDevMode ? [{ debugName: "isOverlay" }] : []));
     // User profile computed signals
-    userName = computed(() => this._userProfile()?.name ?? 'User', ...(ngDevMode ? [{ debugName: "userName" }] : []));
+    userName = computed(() => this._userProfile()?.name ?? this.translateAdapter?.translate('layout.profile.guest') ?? 'Guest', ...(ngDevMode ? [{ debugName: "userName" }] : []));
     userEmail = computed(() => this._userProfile()?.email ?? '', ...(ngDevMode ? [{ debugName: "userEmail" }] : []));
     userProfilePictureUrl = computed(() => this._userProfile()?.profilePictureUrl ?? null, ...(ngDevMode ? [{ debugName: "userProfilePictureUrl" }] : []));
     companyLogoUrl = computed(() => this._companyProfile()?.logoUrl ?? null, ...(ngDevMode ? [{ debugName: "companyLogoUrl" }] : []));
@@ -309,25 +310,27 @@ class LayoutService {
     }
     onMenuToggle() {
         const state = this._layoutState();
+        // Mobile always uses staticMenuMobileActive regardless of menu mode
+        if (!this.isDesktop()) {
+            const newMobileActive = !state.staticMenuMobileActive;
+            this._layoutState.update((prev) => ({ ...prev, staticMenuMobileActive: newMobileActive }));
+            if (newMobileActive)
+                this.overlayOpen.next();
+            return;
+        }
+        // Desktop: use overlay or static mode
         if (this.isOverlay()) {
             const newOverlayActive = !state.overlayMenuActive;
             this._layoutState.update((prev) => ({ ...prev, overlayMenuActive: newOverlayActive }));
             if (newOverlayActive)
                 this.overlayOpen.next();
-            return;
         }
-        if (this.isDesktop()) {
+        else {
             this._layoutState.update((prev) => ({
                 ...prev,
                 staticMenuDesktopInactive: !state.staticMenuDesktopInactive,
             }));
         }
-        else {
-            const newMobileActive = !state.staticMenuMobileActive;
-            this._layoutState.update((prev) => ({ ...prev, staticMenuMobileActive: newMobileActive }));
-            if (newMobileActive)
-                this.overlayOpen.next();
-        }
     }
     isDesktop() {
         return this.isBrowser ? window.innerWidth > 991 : true;
@@ -378,23 +381,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 
 class AppFooter {
     layoutService = inject(LayoutService);
-    // Footer shows product branding (appName), not user's company
     appName = this.layoutService.appName;
     authorName = this.layoutService.authorName;
     authorUrl = this.layoutService.authorUrl;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: AppFooter, isStandalone: true, selector: "app-footer", ngImport: i0, template: `<div class="layout-footer">
-        {{ appName }} by
+        {{ appName }} {{ 'layout.footer.by' | translate }}
         <a [href]="authorUrl" target="_blank" rel="noopener noreferrer" class="text-primary font-bold hover:underline">{{ authorName }}</a>
-    </div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    </div>`, isInline: true, dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppFooter, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-footer',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [TranslatePipe],
                     template: `<div class="layout-footer">
-        {{ appName }} by
+        {{ appName }} {{ 'layout.footer.by' | translate }}
         <a [href]="authorUrl" target="_blank" rel="noopener noreferrer" class="text-primary font-bold hover:underline">{{ authorName }}</a>
     </div>`,
                 }]
@@ -407,13 +409,14 @@ const presets = {
 };
 class AppConfigurator {
     router = inject(Router);
+    translateAdapter = inject(TRANSLATE_ADAPTER, { optional: true });
     layoutService = inject(LayoutService);
     presets = Object.keys(presets);
     showMenuModeButton = signal(!this.router.url.includes('auth'), ...(ngDevMode ? [{ debugName: "showMenuModeButton" }] : []));
-    menuModeOptions = [
-        { label: 'Static', value: 'static' },
-        { label: 'Overlay', value: 'overlay' },
-    ];
+    menuModeOptions = computed(() => [
+        { label: this.translate('layout.configurator.menu.mode.static'), value: 'static' },
+        { label: this.translate('layout.configurator.menu.mode.overlay'), value: 'overlay' },
+    ], ...(ngDevMode ? [{ debugName: "menuModeOptions" }] : []));
     constructor() {
         // Use afterNextRender for browser-only initialization (replaces isServer check)
         afterNextRender(() => {
@@ -563,6 +566,16 @@ class AppConfigurator {
         return this.layoutService.layoutConfig().primary;
     }, ...(ngDevMode ? [{ debugName: "selectedPrimaryColor" }] : []));
     selectedSurfaceColor = computed(() => this.layoutService.layoutConfig().surface, ...(ngDevMode ? [{ debugName: "selectedSurfaceColor" }] : []));
+    isSurfaceSelected(surfaceName) {
+        const selectedSurface = this.selectedSurfaceColor();
+        if (selectedSurface) {
+            return selectedSurface === surfaceName;
+        }
+        // Default: zinc for dark theme, slate for light theme
+        return this.layoutService.layoutConfig().darkTheme
+            ? surfaceName === 'zinc'
+            : surfaceName === 'slate';
+    }
     selectedPreset = computed(() => this.layoutService.layoutConfig().preset, ...(ngDevMode ? [{ debugName: "selectedPreset" }] : []));
     menuMode = computed(() => this.layoutService.layoutConfig().menuMode, ...(ngDevMode ? [{ debugName: "menuMode" }] : []));
     primaryColors = computed(() => {
@@ -757,53 +770,44 @@ class AppConfigurator {
     onMenuModeChange(event) {
         this.layoutService.updateLayoutConfig({ menuMode: event });
     }
+    translate(key) {
+        return this.translateAdapter?.translate(key) ?? key;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppConfigurator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AppConfigurator, isStandalone: true, selector: "app-configurator", host: { styleAttribute: "background-color: var(--surface-overlay)", classAttribute: "hidden absolute top-[3.25rem] right-0 w-[calc(100vw-2rem)] sm:w-72 max-w-72 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AppConfigurator, isStandalone: true, selector: "app-configurator", host: { styleAttribute: "background-color: var(--surface-overlay); inset-inline-end: 0;", classAttribute: "hidden absolute top-[3.25rem] w-[calc(100vw-2rem)] sm:w-72 max-w-72 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]" }, ngImport: i0, template: `
     <div class="flex flex-col gap-4">
       <div>
-        <span class="text-sm text-muted-color font-semibold">Primary</span>
+        <span class="text-sm text-muted-color font-semibold">{{ 'layout.configurator.primary' | translate }}</span>
         <div class="pt-2 flex gap-2 flex-wrap justify-start">
           @for (primaryColor of primaryColors(); track primaryColor.name) {
             <button
               type="button"
               [title]="primaryColor.name"
               (click)="updateColors($event, 'primary', primaryColor)"
-            [ngClass]="{
-              'outline-primary': primaryColor.name === selectedPrimaryColor()
-            }"
+              [class.outline-primary]="primaryColor.name === selectedPrimaryColor()"
               class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
-            [style]="{
-                                'background-color': primaryColor?.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette?.['500']
-                            }"
+              [style.background-color]="primaryColor?.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette?.['500']"
             ></button>
           }
         </div>
       </div>
       <div>
-        <span class="text-sm text-muted-color font-semibold">Surface</span>
+        <span class="text-sm text-muted-color font-semibold">{{ 'layout.configurator.surface' | translate }}</span>
         <div class="pt-2 flex gap-2 flex-wrap justify-start">
           @for (surface of surfaces; track surface.name) {
             <button
               type="button"
               [title]="surface.name"
               (click)="updateColors($event, 'surface', surface)"
-            [ngClass]="{
-              'outline-primary': selectedSurfaceColor()
-                ? selectedSurfaceColor() === surface.name
-                : layoutService.layoutConfig().darkTheme
-                ? surface.name === 'zinc'
-                : surface.name === 'slate'
-            }"
+              [class.outline-primary]="isSurfaceSelected(surface.name)"
               class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
-            [style]="{
-                                'background-color': surface?.name === 'noir' ? 'var(--text-color)' : surface?.palette?.['500']
-                            }"
+              [style.background-color]="surface?.name === 'noir' ? 'var(--text-color)' : surface?.palette?.['500']"
             ></button>
           }
         </div>
       </div>
       <div class="flex flex-col gap-2">
-        <span class="text-sm text-muted-color font-semibold">Presets</span>
+        <span class="text-sm text-muted-color font-semibold">{{ 'layout.configurator.presets' | translate }}</span>
         <p-selectbutton
           [options]="presets"
           [ngModel]="selectedPreset()"
@@ -814,71 +818,58 @@ class AppConfigurator {
       </div>
       @if (showMenuModeButton()) {
         <div class="flex flex-col gap-2">
-          <span class="text-sm text-muted-color font-semibold">Menu Mode</span>
+          <span class="text-sm text-muted-color font-semibold">{{ 'layout.configurator.menu.mode' | translate }}</span>
           <p-selectbutton
             [ngModel]="menuMode()"
             (ngModelChange)="onMenuModeChange($event)"
-            [options]="menuModeOptions"
+            [options]="menuModeOptions()"
             [allowEmpty]="false"
             size="small"
             />
         </div>
       }
     </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i2.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i2.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppConfigurator, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-configurator',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [NgClass, FormsModule, SelectButtonModule],
+                    imports: [FormsModule, SelectButtonModule, TranslatePipe],
                     template: `
     <div class="flex flex-col gap-4">
       <div>
-        <span class="text-sm text-muted-color font-semibold">Primary</span>
+        <span class="text-sm text-muted-color font-semibold">{{ 'layout.configurator.primary' | translate }}</span>
         <div class="pt-2 flex gap-2 flex-wrap justify-start">
           @for (primaryColor of primaryColors(); track primaryColor.name) {
             <button
               type="button"
               [title]="primaryColor.name"
               (click)="updateColors($event, 'primary', primaryColor)"
-            [ngClass]="{
-              'outline-primary': primaryColor.name === selectedPrimaryColor()
-            }"
+              [class.outline-primary]="primaryColor.name === selectedPrimaryColor()"
               class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
-            [style]="{
-                                'background-color': primaryColor?.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette?.['500']
-                            }"
+              [style.background-color]="primaryColor?.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette?.['500']"
             ></button>
           }
         </div>
       </div>
       <div>
-        <span class="text-sm text-muted-color font-semibold">Surface</span>
+        <span class="text-sm text-muted-color font-semibold">{{ 'layout.configurator.surface' | translate }}</span>
         <div class="pt-2 flex gap-2 flex-wrap justify-start">
           @for (surface of surfaces; track surface.name) {
             <button
               type="button"
               [title]="surface.name"
               (click)="updateColors($event, 'surface', surface)"
-            [ngClass]="{
-              'outline-primary': selectedSurfaceColor()
-                ? selectedSurfaceColor() === surface.name
-                : layoutService.layoutConfig().darkTheme
-                ? surface.name === 'zinc'
-                : surface.name === 'slate'
-            }"
+              [class.outline-primary]="isSurfaceSelected(surface.name)"
               class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
-            [style]="{
-                                'background-color': surface?.name === 'noir' ? 'var(--text-color)' : surface?.palette?.['500']
-                            }"
+              [style.background-color]="surface?.name === 'noir' ? 'var(--text-color)' : surface?.palette?.['500']"
             ></button>
           }
         </div>
       </div>
       <div class="flex flex-col gap-2">
-        <span class="text-sm text-muted-color font-semibold">Presets</span>
+        <span class="text-sm text-muted-color font-semibold">{{ 'layout.configurator.presets' | translate }}</span>
         <p-selectbutton
           [options]="presets"
           [ngModel]="selectedPreset()"
@@ -889,11 +880,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
       </div>
       @if (showMenuModeButton()) {
         <div class="flex flex-col gap-2">
-          <span class="text-sm text-muted-color font-semibold">Menu Mode</span>
+          <span class="text-sm text-muted-color font-semibold">{{ 'layout.configurator.menu.mode' | translate }}</span>
           <p-selectbutton
             [ngModel]="menuMode()"
             (ngModelChange)="onMenuModeChange($event)"
-            [options]="menuModeOptions"
+            [options]="menuModeOptions()"
             [allowEmpty]="false"
             size="small"
             />
@@ -902,51 +893,121 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
     </div>
     `,
                     host: {
-                        class: 'hidden absolute top-[3.25rem] right-0 w-[calc(100vw-2rem)] sm:w-72 max-w-72 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]',
-                        style: 'background-color: var(--surface-overlay)',
+                        class: 'hidden absolute top-[3.25rem] w-[calc(100vw-2rem)] sm:w-72 max-w-72 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]',
+                        style: 'background-color: var(--surface-overlay); inset-inline-end: 0;',
                     },
                 }]
         }], ctorParameters: () => [] });
 
+const LAYOUT_AUTH_STATE = new InjectionToken('LAYOUT_AUTH_STATE');
+const LAYOUT_AUTH_API = new InjectionToken('LAYOUT_AUTH_API');
+const LAYOUT_NOTIFICATION_BELL = new InjectionToken('LAYOUT_NOTIFICATION_BELL');
+const LAYOUT_LANGUAGE_SELECTOR = new InjectionToken('LAYOUT_LANGUAGE_SELECTOR');
+const LAYOUT_LANGUAGE_SELECTOR_PANEL = new InjectionToken('LAYOUT_LANGUAGE_SELECTOR_PANEL');
+const LAYOUT_IS_RTL = new InjectionToken('LAYOUT_IS_RTL');
+
 class AppFloatingConfigurator {
     layoutService = inject(LayoutService);
+    languageSelectorPanel = inject(LAYOUT_LANGUAGE_SELECTOR_PANEL, {
+        optional: true,
+    });
     isDarkTheme = computed(() => this.layoutService.layoutConfig().darkTheme, ...(ngDevMode ? [{ debugName: "isDarkTheme" }] : []));
     toggleDarkMode() {
         const currentDarkTheme = this.layoutService.layoutConfig().darkTheme;
         this.layoutService.updateLayoutConfig({ darkTheme: !currentDarkTheme });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppFloatingConfigurator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: AppFloatingConfigurator, isStandalone: true, selector: "app-floating-configurator", ngImport: i0, template: `
-        <div class="fixed flex flex-col md:flex-row gap-2 md:gap-4 top-4 md:top-8 right-2 md:right-8 z-50">
-            <p-button type="button" (onClick)="toggleDarkMode()" [rounded]="true" [icon]="isDarkTheme() ? 'pi pi-moon' : 'pi pi-sun'" severity="secondary" />
-            <div class="relative">
-                <p-button icon="pi pi-palette" pStyleClass="@next" enterFromClass="hidden" enterActiveClass="animate-scalein" leaveToClass="hidden" leaveActiveClass="animate-fadeout" [hideOnOutsideClick]="true" type="button" rounded />
-                <app-configurator />
-            </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AppFloatingConfigurator, isStandalone: true, selector: "app-floating-configurator", ngImport: i0, template: `
+    <div
+      class="floating-configurator fixed flex flex-col md:flex-row gap-2 md:gap-4 top-4 md:top-8 z-50"
+    >
+      <p-button
+        type="button"
+        (onClick)="toggleDarkMode()"
+        [rounded]="true"
+        [icon]="isDarkTheme() ? 'pi pi-moon' : 'pi pi-sun'"
+        severity="secondary"
+      />
+      @if (languageSelectorPanel) {
+        <div class="relative">
+          <p-button
+            icon="pi pi-globe"
+            pStyleClass="@next"
+            enterFromClass="hidden"
+            enterActiveClass="animate-scalein"
+            leaveToClass="hidden"
+            leaveActiveClass="animate-fadeout"
+            [hideOnOutsideClick]="true"
+            type="button"
+            rounded
+          />
+          <ng-container *ngComponentOutlet="languageSelectorPanel" />
         </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "component", type: AppConfigurator, selector: "app-configurator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+      }
+      <div class="relative">
+        <p-button
+          icon="pi pi-palette"
+          pStyleClass="@next"
+          enterFromClass="hidden"
+          enterActiveClass="animate-scalein"
+          leaveToClass="hidden"
+          leaveActiveClass="animate-fadeout"
+          [hideOnOutsideClick]="true"
+          type="button"
+          rounded
+        />
+        <app-configurator />
+      </div>
+    </div>
+  `, isInline: true, styles: [".floating-configurator{inset-inline-end:.5rem}@media(min-width:768px){.floating-configurator{inset-inline-end:2rem}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "component", type: AppConfigurator, selector: "app-configurator" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppFloatingConfigurator, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'app-floating-configurator',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [ButtonModule, StyleClassModule, AppConfigurator],
-                    template: `
-        <div class="fixed flex flex-col md:flex-row gap-2 md:gap-4 top-4 md:top-8 right-2 md:right-8 z-50">
-            <p-button type="button" (onClick)="toggleDarkMode()" [rounded]="true" [icon]="isDarkTheme() ? 'pi pi-moon' : 'pi pi-sun'" severity="secondary" />
-            <div class="relative">
-                <p-button icon="pi pi-palette" pStyleClass="@next" enterFromClass="hidden" enterActiveClass="animate-scalein" leaveToClass="hidden" leaveActiveClass="animate-fadeout" [hideOnOutsideClick]="true" type="button" rounded />
-                <app-configurator />
-            </div>
+            args: [{ selector: 'app-floating-configurator', imports: [NgComponentOutlet, ButtonModule, StyleClassModule, AppConfigurator], template: `
+    <div
+      class="floating-configurator fixed flex flex-col md:flex-row gap-2 md:gap-4 top-4 md:top-8 z-50"
+    >
+      <p-button
+        type="button"
+        (onClick)="toggleDarkMode()"
+        [rounded]="true"
+        [icon]="isDarkTheme() ? 'pi pi-moon' : 'pi pi-sun'"
+        severity="secondary"
+      />
+      @if (languageSelectorPanel) {
+        <div class="relative">
+          <p-button
+            icon="pi pi-globe"
+            pStyleClass="@next"
+            enterFromClass="hidden"
+            enterActiveClass="animate-scalein"
+            leaveToClass="hidden"
+            leaveActiveClass="animate-fadeout"
+            [hideOnOutsideClick]="true"
+            type="button"
+            rounded
+          />
+          <ng-container *ngComponentOutlet="languageSelectorPanel" />
         </div>
-    `
-                }]
+      }
+      <div class="relative">
+        <p-button
+          icon="pi pi-palette"
+          pStyleClass="@next"
+          enterFromClass="hidden"
+          enterActiveClass="animate-scalein"
+          leaveToClass="hidden"
+          leaveActiveClass="animate-fadeout"
+          [hideOnOutsideClick]="true"
+          type="button"
+          rounded
+        />
+        <app-configurator />
+      </div>
+    </div>
+  `, styles: [".floating-configurator{inset-inline-end:.5rem}@media(min-width:768px){.floating-configurator{inset-inline-end:2rem}}\n"] }]
         }] });
 
-const LAYOUT_AUTH_STATE = new InjectionToken('LAYOUT_AUTH_STATE');
-const LAYOUT_AUTH_API = new InjectionToken('LAYOUT_AUTH_API');
-
 /**
  * View Transitions API type definitions
  * @see https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API
@@ -958,6 +1019,7 @@ class AppCompanyBranchSelector {
     authState = inject(LAYOUT_AUTH_STATE, { optional: true });
     authApi = inject(LAYOUT_AUTH_API, { optional: true });
     messageService = inject(MessageService);
+    translateAdapter = inject(TRANSLATE_ADAPTER, { optional: true });
     document = inject(DOCUMENT$1);
     elementRef = inject(ElementRef);
     _isActive = signal(false, ...(ngDevMode ? [{ debugName: "_isActive" }] : []));
@@ -972,7 +1034,7 @@ class AppCompanyBranchSelector {
             }
         });
     }
-    currentCompanyName = computed(() => this.authState?.currentCompanyInfo()?.name ?? 'No Company', ...(ngDevMode ? [{ debugName: "currentCompanyName" }] : []));
+    currentCompanyName = computed(() => this.authState?.currentCompanyInfo()?.name ?? this.translate('layout.company.branch.selector.no.company'), ...(ngDevMode ? [{ debugName: "currentCompanyName" }] : []));
     currentBranchName = computed(() => this.authState?.currentBranchInfo()?.name ?? null, ...(ngDevMode ? [{ debugName: "currentBranchName" }] : []));
     _companies = signal([], ...(ngDevMode ? [{ debugName: "_companies" }] : []));
     companies = this._companies.asReadonly();
@@ -1064,8 +1126,8 @@ class AppCompanyBranchSelector {
         if (this.branches().length > 0 && !selectedBranch) {
             this.messageService.add({
                 severity: 'warn',
-                summary: 'Branch Required',
-                detail: 'Please select a branch',
+                summary: this.translate('layout.company.branch.selector.branch.required'),
+                detail: this.translate('layout.company.branch.selector.please.select.branch'),
             });
             return;
         }
@@ -1081,6 +1143,9 @@ class AppCompanyBranchSelector {
             },
         });
     }
+    translate(key) {
+        return this.translateAdapter?.translate(key) ?? key;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppCompanyBranchSelector, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AppCompanyBranchSelector, isStandalone: true, selector: "app-company-branch-selector", host: { classAttribute: "relative" }, ngImport: i0, template: `
     <button
@@ -1102,24 +1167,24 @@ class AppCompanyBranchSelector {
       }
     </button>
     <div
-      class="hidden absolute top-[3.25rem] right-0 z-50 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] w-[calc(100vw-2rem)] sm:w-auto sm:min-w-[300px] max-w-[360px]"
-      style="background-color: var(--surface-overlay)"
+      class="hidden absolute top-[3.25rem] z-50 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] w-[calc(100vw-2rem)] sm:w-auto sm:min-w-[300px] max-w-[360px]"
+      style="background-color: var(--surface-overlay); inset-inline-end: 0;"
     >
       <div class="flex flex-col gap-4">
         <span class="text-sm text-muted-color font-semibold"
-          >Switch Company & Branch</span
+          >{{ 'layout.company.branch.selector.title' | translate }}</span
         >
 
         <!-- Company Selector -->
         <div class="flex flex-col gap-2">
-          <label class="text-sm text-muted-color font-semibold">Company</label>
+          <label class="text-sm text-muted-color font-semibold">{{ 'layout.company.branch.selector.company' | translate }}</label>
           <p-select
             [options]="companies()"
             [ngModel]="selectedCompanyId()"
             (ngModelChange)="onCompanyChange($event)"
             optionLabel="name"
             optionValue="id"
-            placeholder="Select Company"
+            [placeholder]="'layout.company.branch.selector.select.company' | translate"
             class="w-full"
             [loading]="isLoadingCompanies()"
           />
@@ -1128,14 +1193,14 @@ class AppCompanyBranchSelector {
         <!-- Branch Selector -->
         @if (selectedCompanyId() && branches().length > 0) {
           <div class="flex flex-col gap-2">
-            <label class="text-sm text-muted-color font-semibold">Branch</label>
+            <label class="text-sm text-muted-color font-semibold">{{ 'layout.company.branch.selector.branch' | translate }}</label>
             <p-select
               [options]="branches()"
               [ngModel]="selectedBranchId()"
               (ngModelChange)="onBranchChange($event)"
               optionLabel="name"
               optionValue="id"
-              placeholder="Select Branch"
+              [placeholder]="'layout.company.branch.selector.select.branch' | translate"
               class="w-full"
               [loading]="isLoadingBranches()"
             />
@@ -1145,7 +1210,7 @@ class AppCompanyBranchSelector {
         <!-- Actions -->
         <div class="flex gap-2 pt-2">
           <p-button
-            label="Switch"
+            [label]="'layout.company.branch.selector.switch.button' | translate"
             icon="pi pi-sync"
             styleClass="flex-1"
             [loading]="isSwitching()"
@@ -1155,14 +1220,13 @@ class AppCompanyBranchSelector {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppCompanyBranchSelector, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-company-branch-selector',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AngularModule, StyleClassModule, ButtonModule, SelectModule],
+                    imports: [AngularModule, StyleClassModule, ButtonModule, SelectModule, TranslatePipe],
                     host: { class: 'relative' },
                     template: `
     <button
@@ -1184,24 +1248,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
       }
     </button>
     <div
-      class="hidden absolute top-[3.25rem] right-0 z-50 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] w-[calc(100vw-2rem)] sm:w-auto sm:min-w-[300px] max-w-[360px]"
-      style="background-color: var(--surface-overlay)"
+      class="hidden absolute top-[3.25rem] z-50 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] w-[calc(100vw-2rem)] sm:w-auto sm:min-w-[300px] max-w-[360px]"
+      style="background-color: var(--surface-overlay); inset-inline-end: 0;"
     >
       <div class="flex flex-col gap-4">
         <span class="text-sm text-muted-color font-semibold"
-          >Switch Company & Branch</span
+          >{{ 'layout.company.branch.selector.title' | translate }}</span
         >
 
         <!-- Company Selector -->
         <div class="flex flex-col gap-2">
-          <label class="text-sm text-muted-color font-semibold">Company</label>
+          <label class="text-sm text-muted-color font-semibold">{{ 'layout.company.branch.selector.company' | translate }}</label>
           <p-select
             [options]="companies()"
             [ngModel]="selectedCompanyId()"
             (ngModelChange)="onCompanyChange($event)"
             optionLabel="name"
             optionValue="id"
-            placeholder="Select Company"
+            [placeholder]="'layout.company.branch.selector.select.company' | translate"
             class="w-full"
             [loading]="isLoadingCompanies()"
           />
@@ -1210,14 +1274,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
         <!-- Branch Selector -->
         @if (selectedCompanyId() && branches().length > 0) {
           <div class="flex flex-col gap-2">
-            <label class="text-sm text-muted-color font-semibold">Branch</label>
+            <label class="text-sm text-muted-color font-semibold">{{ 'layout.company.branch.selector.branch' | translate }}</label>
             <p-select
               [options]="branches()"
               [ngModel]="selectedBranchId()"
               (ngModelChange)="onBranchChange($event)"
               optionLabel="name"
               optionValue="id"
-              placeholder="Select Branch"
+              [placeholder]="'layout.company.branch.selector.select.branch' | translate"
               class="w-full"
               [loading]="isLoadingBranches()"
             />
@@ -1227,7 +1291,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
         <!-- Actions -->
         <div class="flex gap-2 pt-2">
           <p-button
-            label="Switch"
+            [label]="'layout.company.branch.selector.switch.button' | translate"
             icon="pi pi-sync"
             styleClass="flex-1"
             [loading]="isSwitching()"
@@ -1276,14 +1340,14 @@ class AppLauncher {
       (click)="togglePanel()"
     >
       <i class="pi pi-th-large"></i>
-      <span>Apps</span>
+      <span>{{ 'layout.launcher.apps' | translate }}</span>
     </button>
     <div
-      class="hidden absolute top-[3.25rem] right-0 z-50 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] w-[calc(100vw-2rem)] sm:w-auto sm:min-w-[280px] max-w-[320px]"
-      style="background-color: var(--surface-overlay)"
+      class="hidden absolute top-[3.25rem] z-50 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] w-[calc(100vw-2rem)] sm:w-auto sm:min-w-[280px] max-w-[320px]"
+      style="background-color: var(--surface-overlay); inset-inline-end: 0;"
     >
       <div class="flex flex-col gap-2">
-        <span class="text-sm text-muted-color font-semibold">Applications</span>
+        <span class="text-sm text-muted-color font-semibold">{{ 'layout.launcher.applications' | translate }}</span>
         <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
           @for (app of layoutService.apps(); track app.id) {
             <a
@@ -1303,21 +1367,20 @@ class AppLauncher {
               </div>
               <span
                 class="text-xs mt-2 text-center text-muted-color group-hover:text-color transition-colors duration-200 truncate max-w-full"
-                >{{ app.name }}</span
+                >{{ app.nameKey ? (app.nameKey | translate) : app.name }}</span
               >
             </a>
           }
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["icon", "iconType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["icon", "iconType"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppLauncher, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-launcher',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [StyleClassModule, IconComponent],
+                    imports: [StyleClassModule, IconComponent, TranslatePipe],
                     host: { class: 'relative' },
                     template: `
     <button
@@ -1333,14 +1396,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
       (click)="togglePanel()"
     >
       <i class="pi pi-th-large"></i>
-      <span>Apps</span>
+      <span>{{ 'layout.launcher.apps' | translate }}</span>
     </button>
     <div
-      class="hidden absolute top-[3.25rem] right-0 z-50 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] w-[calc(100vw-2rem)] sm:w-auto sm:min-w-[280px] max-w-[320px]"
-      style="background-color: var(--surface-overlay)"
+      class="hidden absolute top-[3.25rem] z-50 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] w-[calc(100vw-2rem)] sm:w-auto sm:min-w-[280px] max-w-[320px]"
+      style="background-color: var(--surface-overlay); inset-inline-end: 0;"
     >
       <div class="flex flex-col gap-2">
-        <span class="text-sm text-muted-color font-semibold">Applications</span>
+        <span class="text-sm text-muted-color font-semibold">{{ 'layout.launcher.applications' | translate }}</span>
         <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
           @for (app of layoutService.apps(); track app.id) {
             <a
@@ -1360,7 +1423,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
               </div>
               <span
                 class="text-xs mt-2 text-center text-muted-color group-hover:text-color transition-colors duration-200 truncate max-w-full"
-                >{{ app.name }}</span
+                >{{ app.nameKey ? (app.nameKey | translate) : app.name }}</span
               >
             </a>
           }
@@ -1377,6 +1440,7 @@ class AppProfile {
     authApi = inject(LAYOUT_AUTH_API, { optional: true });
     layoutService = inject(LayoutService);
     messageService = inject(MessageService);
+    translateAdapter = inject(TRANSLATE_ADAPTER, { optional: true });
     document = inject(DOCUMENT$1);
     elementRef = inject(ElementRef);
     _isActive = signal(false, ...(ngDevMode ? [{ debugName: "_isActive" }] : []));
@@ -1394,7 +1458,7 @@ class AppProfile {
     togglePanel() {
         this._isActive.update((v) => !v);
     }
-    userName = computed(() => this.authState?.loginUserData()?.name ?? 'Guest', ...(ngDevMode ? [{ debugName: "userName" }] : []));
+    userName = computed(() => this.authState?.loginUserData()?.name ?? this.translate('layout.profile.guest'), ...(ngDevMode ? [{ debugName: "userName" }] : []));
     userEmail = computed(() => this.authState?.loginUserData()?.email ?? '', ...(ngDevMode ? [{ debugName: "userEmail" }] : []));
     profilePicture = computed(() => this.layoutService.userProfilePictureUrl() ?? '', ...(ngDevMode ? [{ debugName: "profilePicture" }] : []));
     logout() {
@@ -1407,7 +1471,7 @@ class AppProfile {
             next: (result) => {
                 this.messageService.add({
                     severity: 'success',
-                    summary: 'Success!',
+                    summary: this.translate('shared.success'),
                     detail: result.message,
                 });
                 this.authApi?.navigateLogin(false);
@@ -1425,18 +1489,21 @@ class AppProfile {
             .then(() => {
             this.messageService.add({
                 severity: 'success',
-                summary: 'Link Copied',
-                detail: 'Sign Up Link copied.',
+                summary: this.translate('layout.profile.link.copied'),
+                detail: this.translate('layout.profile.sign.up.link.copied'),
             });
         })
             .catch(() => {
             this.messageService.add({
                 severity: 'error',
-                summary: 'Sorry',
-                detail: 'Failed to copy signup link.',
+                summary: this.translate('shared.error'),
+                detail: this.translate('layout.profile.failed.copy.sign.up.link'),
             });
         });
     }
+    translate(key) {
+        return this.translateAdapter?.translate(key) ?? key;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppProfile, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AppProfile, isStandalone: true, selector: "app-profile", host: { classAttribute: "relative" }, ngImport: i0, template: `
     <button
@@ -1452,11 +1519,11 @@ class AppProfile {
       (click)="togglePanel()"
     >
       <i class="pi pi-user"></i>
-      <span>Profile</span>
+      <span>{{ 'layout.profile.title' | translate }}</span>
     </button>
     <div
-      class="hidden absolute top-[3.25rem] right-0 z-50 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] w-[calc(100vw-2rem)] sm:w-auto sm:min-w-[280px] max-w-[320px]"
-      style="background-color: var(--surface-overlay)"
+      class="hidden absolute top-[3.25rem] z-50 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] w-[calc(100vw-2rem)] sm:w-auto sm:min-w-[280px] max-w-[320px]"
+      style="background-color: var(--surface-overlay); inset-inline-end: 0;"
     >
       <div class="flex flex-col gap-3">
         <!-- User Info -->
@@ -1468,7 +1535,7 @@ class AppProfile {
             <img
               [src]="profilePicture()"
               class="w-12 h-12 rounded-border object-cover"
-              alt="Profile"
+              [alt]="'layout.profile.profile.picture.alt' | translate"
             />
           } @else {
             <div
@@ -1493,26 +1560,25 @@ class AppProfile {
             (click)="copySignUpLink()"
           >
             <i class="pi pi-link text-muted-color"></i>
-            <span>Copy SignUp Link</span>
+            <span>{{ 'layout.profile.copy.sign.up.link' | translate }}</span>
           </a>
           <a
             class="flex items-center gap-3 p-3 rounded-border cursor-pointer no-underline text-color hover:bg-emphasis transition-all duration-200"
             (click)="logout()"
           >
             <i class="pi pi-sign-out text-muted-color"></i>
-            <span>Logout</span>
+            <span>{{ 'layout.profile.logout' | translate }}</span>
           </a>
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$2.IsEmptyImageDirective, selector: "img", inputs: ["src"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$2.IsEmptyImageDirective, selector: "img", inputs: ["src"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppProfile, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-profile',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AngularModule, StyleClassModule],
+                    imports: [AngularModule, StyleClassModule, TranslatePipe],
                     host: { class: 'relative' },
                     template: `
     <button
@@ -1528,11 +1594,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
       (click)="togglePanel()"
     >
       <i class="pi pi-user"></i>
-      <span>Profile</span>
+      <span>{{ 'layout.profile.title' | translate }}</span>
     </button>
     <div
-      class="hidden absolute top-[3.25rem] right-0 z-50 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] w-[calc(100vw-2rem)] sm:w-auto sm:min-w-[280px] max-w-[320px]"
-      style="background-color: var(--surface-overlay)"
+      class="hidden absolute top-[3.25rem] z-50 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] w-[calc(100vw-2rem)] sm:w-auto sm:min-w-[280px] max-w-[320px]"
+      style="background-color: var(--surface-overlay); inset-inline-end: 0;"
     >
       <div class="flex flex-col gap-3">
         <!-- User Info -->
@@ -1544,7 +1610,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             <img
               [src]="profilePicture()"
               class="w-12 h-12 rounded-border object-cover"
-              alt="Profile"
+              [alt]="'layout.profile.profile.picture.alt' | translate"
             />
           } @else {
             <div
@@ -1569,14 +1635,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             (click)="copySignUpLink()"
           >
             <i class="pi pi-link text-muted-color"></i>
-            <span>Copy SignUp Link</span>
+            <span>{{ 'layout.profile.copy.sign.up.link' | translate }}</span>
           </a>
           <a
             class="flex items-center gap-3 p-3 rounded-border cursor-pointer no-underline text-color hover:bg-emphasis transition-all duration-200"
             (click)="logout()"
           >
             <i class="pi pi-sign-out text-muted-color"></i>
-            <span>Logout</span>
+            <span>{{ 'layout.profile.logout' | translate }}</span>
           </a>
         </div>
       </div>
@@ -1590,6 +1656,12 @@ class AppTopbar {
     document = inject(DOCUMENT$1);
     destroyRef = inject(DestroyRef);
     layoutService = inject(LayoutService);
+    notificationBellComponent = inject(LAYOUT_NOTIFICATION_BELL, {
+        optional: true,
+    });
+    languageSelectorComponent = inject(LAYOUT_LANGUAGE_SELECTOR, {
+        optional: true,
+    });
     configContainer = viewChild('configContainer', ...(ngDevMode ? [{ debugName: "configContainer" }] : []));
     activePanel = signal(null, ...(ngDevMode ? [{ debugName: "activePanel" }] : []));
     constructor() {
@@ -1600,9 +1672,7 @@ class AppTopbar {
         });
     }
     companyName = this.layoutService.companyName;
-    enableCompanyFeature = computed(() => {
-        return isCompanyFeatureEnabled(this.appConfig);
-    }, ...(ngDevMode ? [{ debugName: "enableCompanyFeature" }] : []));
+    enableCompanyFeature = isCompanyFeatureEnabled(this.appConfig);
     toggleDarkMode() {
         const currentDarkTheme = this.layoutService.layoutConfig().darkTheme;
         this.layoutService.updateLayoutConfig({ darkTheme: !currentDarkTheme });
@@ -1622,6 +1692,7 @@ class AppTopbar {
     <div class="layout-topbar-logo-container">
       <button
         class="layout-menu-button layout-topbar-action"
+        [attr.aria-label]="'layout.topbar.toggle.menu' | translate"
         (click)="layoutService.onMenuToggle()"
       >
         <i class="pi pi-bars"></i>
@@ -1636,6 +1707,7 @@ class AppTopbar {
         <button
           type="button"
           class="layout-topbar-action"
+          [attr.aria-label]="'layout.topbar.toggle.dark.mode' | translate"
           (click)="toggleDarkMode()"
         >
           <i
@@ -1648,6 +1720,7 @@ class AppTopbar {
           <button
             class="layout-topbar-action"
             [class.layout-topbar-action-highlight]="activePanel() === 'config'"
+            [attr.aria-label]="'layout.topbar.open.theme.settings' | translate"
             pStyleClass="@next"
             enterFromClass="hidden"
             enterActiveClass="animate-scalein"
@@ -1664,6 +1737,7 @@ class AppTopbar {
 
       <button
         class="layout-topbar-menu-button layout-topbar-action"
+        [attr.aria-label]="'layout.topbar.more.options' | translate"
         pStyleClass="@next"
         enterFromClass="hidden"
         enterActiveClass="animate-scalein"
@@ -1679,23 +1753,30 @@ class AppTopbar {
           @if (layoutService.hasApps()) {
             <app-launcher />
           }
-          @if (enableCompanyFeature()) {
+          @if (languageSelectorComponent) {
+            <ng-container *ngComponentOutlet="languageSelectorComponent" />
+          }
+          @if (enableCompanyFeature) {
             <app-company-branch-selector />
           }
+          @if (notificationBellComponent) {
+            <ng-container *ngComponentOutlet="notificationBellComponent" />
+          }
           <app-profile />
         </div>
       </div>
     </div>
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "component", type: AppConfigurator, selector: "app-configurator" }, { kind: "component", type: AppProfile, selector: "app-profile" }, { kind: "component", type: AppCompanyBranchSelector, selector: "app-company-branch-selector" }, { kind: "component", type: AppLauncher, selector: "app-launcher" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: AppConfigurator, selector: "app-configurator" }, { kind: "component", type: AppProfile, selector: "app-profile" }, { kind: "component", type: AppCompanyBranchSelector, selector: "app-company-branch-selector" }, { kind: "component", type: AppLauncher, selector: "app-launcher" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppTopbar, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-topbar',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [
                         RouterModule,
                         StyleClassModule,
+                        NgComponentOutlet,
+                        TranslatePipe,
                         AppConfigurator,
                         AppProfile,
                         AppCompanyBranchSelector,
@@ -1705,6 +1786,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
     <div class="layout-topbar-logo-container">
       <button
         class="layout-menu-button layout-topbar-action"
+        [attr.aria-label]="'layout.topbar.toggle.menu' | translate"
         (click)="layoutService.onMenuToggle()"
       >
         <i class="pi pi-bars"></i>
@@ -1719,6 +1801,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
         <button
           type="button"
           class="layout-topbar-action"
+          [attr.aria-label]="'layout.topbar.toggle.dark.mode' | translate"
           (click)="toggleDarkMode()"
         >
           <i
@@ -1731,6 +1814,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
           <button
             class="layout-topbar-action"
             [class.layout-topbar-action-highlight]="activePanel() === 'config'"
+            [attr.aria-label]="'layout.topbar.open.theme.settings' | translate"
             pStyleClass="@next"
             enterFromClass="hidden"
             enterActiveClass="animate-scalein"
@@ -1747,6 +1831,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 
       <button
         class="layout-topbar-menu-button layout-topbar-action"
+        [attr.aria-label]="'layout.topbar.more.options' | translate"
         pStyleClass="@next"
         enterFromClass="hidden"
         enterActiveClass="animate-scalein"
@@ -1762,9 +1847,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
           @if (layoutService.hasApps()) {
             <app-launcher />
           }
-          @if (enableCompanyFeature()) {
+          @if (languageSelectorComponent) {
+            <ng-container *ngComponentOutlet="languageSelectorComponent" />
+          }
+          @if (enableCompanyFeature) {
             <app-company-branch-selector />
           }
+          @if (notificationBellComponent) {
+            <ng-container *ngComponentOutlet="notificationBellComponent" />
+          }
           <app-profile />
         </div>
       </div>
@@ -1880,7 +1971,7 @@ class AppMenuitem {
               class="layout-menuitem-icon"
             />
           }
-          <span class="layout-menuitem-text">{{ item().label }}</span>
+          <span class="layout-menuitem-text">{{ item().labelKey ? (item().labelKey! | translate) : item().label }}</span>
           @if (item().children) {
             <i class="pi pi-fw pi-angle-down layout-submenu-toggler"></i>
           }
@@ -1902,7 +1993,7 @@ class AppMenuitem {
               class="layout-menuitem-icon"
             />
           }
-          <span class="layout-menuitem-text">{{ item().label }}</span>
+          <span class="layout-menuitem-text">{{ item().labelKey ? (item().labelKey! | translate) : item().label }}</span>
         </a>
       }
       @if (item().children) {
@@ -1925,11 +2016,11 @@ class AppMenuitem {
         </ul>
       }
     </ng-container>
-  `, isInline: true, styles: [":host ul{overflow:hidden;transition:max-height .4s cubic-bezier(.86,0,.07,1)}:host ul.submenu-collapsed{max-height:0}:host ul.submenu-expanded{max-height:1000px}\n"], dependencies: [{ kind: "component", type: AppMenuitem, selector: "[app-menuitem]", inputs: ["item", "index", "parentKey"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["icon", "iconType"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i2$3.Ripple, selector: "[pRipple]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host ul{overflow:hidden;transition:max-height .4s cubic-bezier(.86,0,.07,1)}:host ul.submenu-collapsed{max-height:0}:host ul.submenu-expanded{max-height:1000px}\n"], dependencies: [{ kind: "component", type: AppMenuitem, selector: "[app-menuitem]", inputs: ["item", "index", "parentKey"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["icon", "iconType"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i2$3.Ripple, selector: "[pRipple]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppMenuitem, decorators: [{
             type: Component,
-            args: [{ selector: '[app-menuitem]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, RouterModule, RippleModule], template: `
+            args: [{ selector: '[app-menuitem]', imports: [IconComponent, RouterModule, RippleModule, TranslatePipe], template: `
     <ng-container>
       @if (item().children?.length) {
         <a (click)="itemClick()" tabindex="0" pRipple>
@@ -1940,7 +2031,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
               class="layout-menuitem-icon"
             />
           }
-          <span class="layout-menuitem-text">{{ item().label }}</span>
+          <span class="layout-menuitem-text">{{ item().labelKey ? (item().labelKey! | translate) : item().label }}</span>
           @if (item().children) {
             <i class="pi pi-fw pi-angle-down layout-submenu-toggler"></i>
           }
@@ -1962,7 +2053,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
               class="layout-menuitem-icon"
             />
           }
-          <span class="layout-menuitem-text">{{ item().label }}</span>
+          <span class="layout-menuitem-text">{{ item().labelKey ? (item().labelKey! | translate) : item().label }}</span>
         </a>
       }
       @if (item().children) {
@@ -2015,13 +2106,12 @@ class AppMenu {
         <li app-menuitem [item]="item" [index]="i"></li>
       }
     </ul>
-  </div>`, isInline: true, dependencies: [{ kind: "component", type: AppMenuitem, selector: "[app-menuitem]", inputs: ["item", "index", "parentKey"] }, { kind: "ngmodule", type: RouterModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  </div>`, isInline: true, dependencies: [{ kind: "component", type: AppMenuitem, selector: "[app-menuitem]", inputs: ["item", "index", "parentKey"] }, { kind: "ngmodule", type: RouterModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppMenu, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-menu',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [AppMenuitem, RouterModule],
                     template: `<div class="layout-menu">
     <ul>
@@ -2043,13 +2133,12 @@ class AppSidebar {
     <div class="layout-sidebar">
       <app-menu />
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: AppMenu, selector: "app-menu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: AppMenu, selector: "app-menu" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppSidebar, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-sidebar',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [AppMenu],
                     template: `
     <div class="layout-sidebar">
@@ -2136,13 +2225,12 @@ class AppLayout {
       </div>
       <div class="layout-mask animate-fadein"></div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppTopbar, selector: "app-topbar" }, { kind: "component", type: AppSidebar, selector: "app-sidebar" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AppFooter, selector: "app-footer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppTopbar, selector: "app-topbar" }, { kind: "component", type: AppSidebar, selector: "app-sidebar" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AppFooter, selector: "app-footer" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppLayout, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-layout',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [NgClass, AppTopbar, AppSidebar, RouterModule, AppFooter],
                     template: `
     <div class="layout-wrapper" [ngClass]="containerClass()">
@@ -2202,11 +2290,71 @@ const GreenTheme = definePreset(Material, {
     },
 });
 
+const LAYOUT_MESSAGES = {
+    // Menu items
+    'menu.dashboard': 'Dashboard',
+    'menu.administration': 'Administration',
+    'menu.iam': 'IAM',
+    'menu.storage': 'Storage',
+    'menu.forms': 'Forms',
+    'menu.email': 'Email',
+    'menu.event.manager': 'Event Manager',
+    'menu.notifications': 'Notifications',
+    'menu.localization': 'Localization',
+    // Profile
+    'layout.profile.title': 'Profile',
+    'layout.profile.profile.picture.alt': 'Profile picture',
+    'layout.profile.copy.sign.up.link': 'Copy SignUp Link',
+    'layout.profile.logout': 'Logout',
+    'layout.profile.link.copied': 'Link Copied',
+    'layout.profile.sign.up.link.copied': 'Sign Up Link copied.',
+    'layout.profile.failed.copy.sign.up.link': 'Failed to copy signup link.',
+    'layout.profile.guest': 'Guest',
+    // Company/Branch Selector
+    'layout.company.branch.selector.title': 'Switch Company & Branch',
+    'layout.company.branch.selector.company': 'Company',
+    'layout.company.branch.selector.select.company': 'Select Company',
+    'layout.company.branch.selector.branch': 'Branch',
+    'layout.company.branch.selector.select.branch': 'Select Branch',
+    'layout.company.branch.selector.switch.button': 'Switch',
+    'layout.company.branch.selector.branch.required': 'Branch Required',
+    'layout.company.branch.selector.please.select.branch': 'Please select a branch',
+    'layout.company.branch.selector.no.company': 'No Company',
+    // Launcher
+    'layout.launcher.apps': 'Apps',
+    'layout.launcher.applications': 'Applications',
+    // Configurator
+    'layout.configurator.primary': 'Primary',
+    'layout.configurator.surface': 'Surface',
+    'layout.configurator.presets': 'Presets',
+    'layout.configurator.menu.mode': 'Menu Mode',
+    'layout.configurator.menu.mode.static': 'Static',
+    'layout.configurator.menu.mode.overlay': 'Overlay',
+    // Topbar accessibility
+    'layout.topbar.toggle.menu': 'Toggle menu',
+    'layout.topbar.toggle.dark.mode': 'Toggle dark mode',
+    'layout.topbar.open.theme.settings': 'Open theme settings',
+    'layout.topbar.more.options': 'More options',
+    // Footer
+    'layout.footer.by': 'by',
+    // Notifications
+    'notification.title': 'Notifications',
+    'notification.mark.all.read': 'Mark all as read',
+    'notification.view.all': 'View all',
+    'notification.time.just.now': 'Just now',
+    'notification.time.minutes.ago': '{{count}}m ago',
+    'notification.time.hours.ago': '{{count}}h ago',
+    'notification.time.days.ago': '{{count}}d ago',
+    'notification.empty': 'No notifications',
+    // Home/Dashboard
+    'home.where.users.from': 'Where users are from',
+};
+
 // Components
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AppCompanyBranchSelector, AppConfigurator, AppFloatingConfigurator, AppFooter, AppLauncher, AppLayout, AppMenu, AppMenuitem, AppProfile, AppSidebar, AppTopbar, GreenTheme, LAYOUT_AUTH_API, LAYOUT_AUTH_STATE, LayoutPersistenceService, LayoutService, NavyBlueTheme, filterAppsByPermissions, filterMenuByPermissions };
+export { AppCompanyBranchSelector, AppConfigurator, AppFloatingConfigurator, AppFooter, AppLauncher, AppLayout, AppMenu, AppMenuitem, AppProfile, AppSidebar, AppTopbar, GreenTheme, LAYOUT_AUTH_API, LAYOUT_AUTH_STATE, LAYOUT_IS_RTL, LAYOUT_LANGUAGE_SELECTOR, LAYOUT_LANGUAGE_SELECTOR_PANEL, LAYOUT_MESSAGES, LAYOUT_NOTIFICATION_BELL, LayoutPersistenceService, LayoutService, NavyBlueTheme, filterAppsByPermissions, filterMenuByPermissions };
 //# sourceMappingURL=flusys-ng-layout.mjs.map