@eui/core 23.0.0-alpha.6 → 23.0.0-alpha.8

package/docs/json/documentation.json

@@ -2092,12 +2092,12 @@
         },
         {
             "name": "Schema",
-            "id": "interface-Schema-5cd6db1920bd5b70a44c0b8a7f7e30f600bfd16a9950f218e6d451a1755ced95b462ef9a62ee87e39bcb8c392981b8d2597895bf0a272fd8aea71f03429ed976-1",
-            "file": "packages/core/schematics/icon-migrate/schema.ts",
+            "id": "interface-Schema-4fe31ff3e9f1d34845a6b865d605e215f33552094b88c3d0eab0b180187fe64ce4d68d687516cb3d62c57d2678a103969b2dacbb18a49b26060f78096678fcce-1",
+            "file": "packages/core/schematics/fix-no-multiple-empty-lines/index.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "interface",
-            "sourceCode": "export interface Schema {\n  /** The path to scan for files to migrate */\n  path?: string;\n  /** Whether to perform a dry run without making changes */\n  dryRun?: boolean;\n}\n",
+            "sourceCode": "import { DirEntry, Rule, SchematicContext, Tree } from '@angular-devkit/schematics';\nimport * as ts from 'typescript';\nimport { logDryRun, logDryRunNote } from '../utils/dry-run';\n\ninterface Schema {\n  path?: string;\n  dryRun?: boolean;\n}\n\nconst MULTIPLE_EMPTY_LINES = /\\n{3,}/g;\n\nexport function fixNoMultipleEmptyLines(options: Schema = {}): Rule {\n  return (tree: Tree, context: SchematicContext) => {\n    const scanPath = options.path ? '/' + options.path.replace(/^\\.?\\//, '').replace(/\\/$/, '') : '';\n    let count = 0;\n\n    const dir = tree.getDir(scanPath || '/');\n    visitDir(dir, (filePath) => {\n      const buffer = tree.read(filePath);\n      if (!buffer) return;\n\n      const original = buffer.toString('utf-8');\n      const result = original.replace(MULTIPLE_EMPTY_LINES, '\\n\\n');\n\n      if (result !== original) {\n        if (filePath.endsWith('.ts')) {\n          const sourceFile = ts.createSourceFile(filePath, result, ts.ScriptTarget.Latest, true);\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          if ((sourceFile as any).parseDiagnostics?.length) {\n            context.logger.warn(`Skipping ${filePath}: file would not parse after transformation.`);\n            return;\n          }\n        }\n        if (options.dryRun) {\n          logDryRun(context, `Would collapse multiple empty lines in ${filePath}`);\n        } else {\n          tree.overwrite(filePath, result);\n        }\n        count++;\n      }\n    });\n\n    context.logger.info(`Fixed multiple empty lines in ${count} file(s).`);\n    if (options.dryRun) {\n      logDryRunNote(context);\n    }\n    return tree;\n  };\n}\n\nfunction visitDir(dir: DirEntry, callback: (path: string) => void): void {\n  for (const file of dir.subfiles) {\n    if (file.endsWith('.d.ts')) continue;\n    if (!file.endsWith('.ts') && !file.endsWith('.html') && !file.endsWith('.scss') && !file.endsWith('.css')) continue;\n    callback(`${dir.path}/${file}`);\n  }\n  for (const sub of dir.subdirs) {\n    if (sub === 'node_modules' || sub === 'dist') continue;\n    visitDir(dir.dir(sub), callback);\n  }\n}\n",
             "displayName": "Schema",
             "properties": [
                 {
@@ -2108,9 +2108,9 @@
                     "type": "boolean",
                     "indexKey": "",
                     "optional": true,
-                    "description": "<p>Whether to perform a dry run without making changes</p>\n",
-                    "line": 5,
-                    "rawdescription": "\nWhether to perform a dry run without making changes"
+                    "description": "",
+                    "line": 7,
+                    "rawdescription": "\n"
                 },
                 {
                     "name": "path",
@@ -2120,9 +2120,9 @@
                     "type": "string",
                     "indexKey": "",
                     "optional": true,
-                    "description": "<p>The path to scan for files to migrate</p>\n",
-                    "line": 3,
-                    "rawdescription": "\nThe path to scan for files to migrate"
+                    "description": "",
+                    "line": 6,
+                    "rawdescription": "\n"
                 }
             ],
             "indexSignatures": [],
@@ -2139,12 +2139,12 @@
         },
         {
             "name": "Schema",
-            "id": "interface-Schema-56b9fe60701ca349dc90e152829b0a18bb7a8a9bb303c4bac05f9764cd2e933cce0879775ca17168b4c881e202d0258af3668a2a3a1b940e561f7e4b2349b5cc-2",
-            "file": "packages/core/schematics/migrate/schema.ts",
+            "id": "interface-Schema-5cd6db1920bd5b70a44c0b8a7f7e30f600bfd16a9950f218e6d451a1755ced95b462ef9a62ee87e39bcb8c392981b8d2597895bf0a272fd8aea71f03429ed976-2",
+            "file": "packages/core/schematics/icon-migrate/schema.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "interface",
-            "sourceCode": "export interface Schema {\n  /** The path to scan for files to migrate */\n  path?: string;\n  /** Whether to apply MyWorkplace-specific replacements */\n  mwp?: boolean;\n  /** Whether to perform a dry run without making changes */\n  dryRun?: boolean;\n}\n",
+            "sourceCode": "export interface Schema {\n  /** The path to scan for files to migrate */\n  path?: string;\n  /** Whether to perform a dry run without making changes */\n  dryRun?: boolean;\n}\n",
             "displayName": "Schema",
             "properties": [
                 {
@@ -2156,20 +2156,8 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "<p>Whether to perform a dry run without making changes</p>\n",
-                    "line": 7,
-                    "rawdescription": "\nWhether to perform a dry run without making changes"
-                },
-                {
-                    "name": "mwp",
-                    "coverageIgnore": false,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "boolean",
-                    "indexKey": "",
-                    "optional": true,
-                    "description": "<p>Whether to apply MyWorkplace-specific replacements</p>\n",
                     "line": 5,
-                    "rawdescription": "\nWhether to apply MyWorkplace-specific replacements"
+                    "rawdescription": "\nWhether to perform a dry run without making changes"
                 },
                 {
                     "name": "path",
@@ -2198,12 +2186,12 @@
         },
         {
             "name": "Schema",
-            "id": "interface-Schema-4fe31ff3e9f1d34845a6b865d605e215f33552094b88c3d0eab0b180187fe64ce4d68d687516cb3d62c57d2678a103969b2dacbb18a49b26060f78096678fcce-3",
-            "file": "packages/core/schematics/fix-no-multiple-empty-lines/index.ts",
+            "id": "interface-Schema-56b9fe60701ca349dc90e152829b0a18bb7a8a9bb303c4bac05f9764cd2e933cce0879775ca17168b4c881e202d0258af3668a2a3a1b940e561f7e4b2349b5cc-3",
+            "file": "packages/core/schematics/migrate/schema.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "interface",
-            "sourceCode": "import { DirEntry, Rule, SchematicContext, Tree } from '@angular-devkit/schematics';\nimport * as ts from 'typescript';\nimport { logDryRun, logDryRunNote } from '../utils/dry-run';\n\ninterface Schema {\n  path?: string;\n  dryRun?: boolean;\n}\n\nconst MULTIPLE_EMPTY_LINES = /\\n{3,}/g;\n\nexport function fixNoMultipleEmptyLines(options: Schema = {}): Rule {\n  return (tree: Tree, context: SchematicContext) => {\n    const scanPath = options.path ? '/' + options.path.replace(/^\\.?\\//, '').replace(/\\/$/, '') : '';\n    let count = 0;\n\n    const dir = tree.getDir(scanPath || '/');\n    visitDir(dir, (filePath) => {\n      const buffer = tree.read(filePath);\n      if (!buffer) return;\n\n      const original = buffer.toString('utf-8');\n      const result = original.replace(MULTIPLE_EMPTY_LINES, '\\n\\n');\n\n      if (result !== original) {\n        if (filePath.endsWith('.ts')) {\n          const sourceFile = ts.createSourceFile(filePath, result, ts.ScriptTarget.Latest, true);\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          if ((sourceFile as any).parseDiagnostics?.length) {\n            context.logger.warn(`Skipping ${filePath}: file would not parse after transformation.`);\n            return;\n          }\n        }\n        if (options.dryRun) {\n          logDryRun(context, `Would collapse multiple empty lines in ${filePath}`);\n        } else {\n          tree.overwrite(filePath, result);\n        }\n        count++;\n      }\n    });\n\n    context.logger.info(`Fixed multiple empty lines in ${count} file(s).`);\n    if (options.dryRun) {\n      logDryRunNote(context);\n    }\n    return tree;\n  };\n}\n\nfunction visitDir(dir: DirEntry, callback: (path: string) => void): void {\n  for (const file of dir.subfiles) {\n    if (file.endsWith('.d.ts')) continue;\n    if (!file.endsWith('.ts') && !file.endsWith('.html') && !file.endsWith('.scss') && !file.endsWith('.css')) continue;\n    callback(`${dir.path}/${file}`);\n  }\n  for (const sub of dir.subdirs) {\n    if (sub === 'node_modules' || sub === 'dist') continue;\n    visitDir(dir.dir(sub), callback);\n  }\n}\n",
+            "sourceCode": "export interface Schema {\n  /** The path to scan for files to migrate */\n  path?: string;\n  /** Whether to apply MyWorkplace-specific replacements */\n  mwp?: boolean;\n  /** Whether to perform a dry run without making changes */\n  dryRun?: boolean;\n}\n",
             "displayName": "Schema",
             "properties": [
                 {
@@ -2214,9 +2202,21 @@
                     "type": "boolean",
                     "indexKey": "",
                     "optional": true,
-                    "description": "",
+                    "description": "<p>Whether to perform a dry run without making changes</p>\n",
                     "line": 7,
-                    "rawdescription": "\n"
+                    "rawdescription": "\nWhether to perform a dry run without making changes"
+                },
+                {
+                    "name": "mwp",
+                    "coverageIgnore": false,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "boolean",
+                    "indexKey": "",
+                    "optional": true,
+                    "description": "<p>Whether to apply MyWorkplace-specific replacements</p>\n",
+                    "line": 5,
+                    "rawdescription": "\nWhether to apply MyWorkplace-specific replacements"
                 },
                 {
                     "name": "path",
@@ -2226,9 +2226,9 @@
                     "type": "string",
                     "indexKey": "",
                     "optional": true,
-                    "description": "",
-                    "line": 6,
-                    "rawdescription": "\n"
+                    "description": "<p>The path to scan for files to migrate</p>\n",
+                    "line": 3,
+                    "rawdescription": "\nThe path to scan for files to migrate"
                 }
             ],
             "indexSignatures": [],
@@ -3424,12 +3424,12 @@
         },
         {
             "name": "UIState",
-            "id": "interface-UIState-bfaa9f6270d915c4863163b9e4ecefb08375cb6aa213f37d6112501a800ecb988315566a096e4f16f380bf9ca862b10c87dcf84348591cf9fabd6814ab659923",
+            "id": "interface-UIState-2b10e519e4a4b60702c2f5da03d8ea5dc23dbec19cc7d660553b4aac90c5bdcd38a9eee6e4f6c9e5e9f468f5f00d106dcd82a7d9667028ef3f85483af3b8ffee",
             "file": "packages/core/src/lib/services/eui-app-shell.service.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "interface",
-            "sourceCode": "import { Injectable, PLATFORM_ID, inject } from '@angular/core';\nimport { HttpClient } from '@angular/common/http';\nimport { DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport { BehaviorSubject, defer, firstValueFrom, Observable } from 'rxjs';\nimport { EuiEuLanguages, GlobalConfig, getActiveLang, EuiLanguage, EuiMenuItem } from '@eui/base';\nimport { GLOBAL_CONFIG_TOKEN } from './config/tokens';\nimport { I18nService } from './i18n';\nimport { Router, NavigationEnd } from '@angular/router';\nimport { StoreService } from './store/store.service';\nimport { distinctUntilChanged, filter, map } from 'rxjs/operators';\nimport { isEqual, get } from 'lodash-es';\nimport { CssUtils } from '../helpers/css-utils';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport interface UIState<BP = any, DI = any, AMD =any, BPV = any> {\n    // app state\n    appName?: string;\n    appShortName?: string;\n    appSubTitle?: string;\n    appBaseFontSize?: string;\n\n    // Sidebar state\n    isSidebarOpen?: boolean;\n    isSidebarActive?: boolean;\n    hasSidebar?: boolean;\n    hasSideContainer?: boolean;\n    hasBreadcrumb?: boolean;\n    hasHeader?: boolean;\n    hasHeaderLogo?: boolean;\n    hasHeaderEnvironment?: boolean;\n    hasToolbar?: boolean;\n    hasToolbarMegaMenu?: boolean;\n    hasToolbarMenu?: boolean;\n    environmentValue?: string;\n    isSidebarHidden?: boolean;\n    isSidebarFocused?: boolean;\n    hasSidebarCollapsedVariant?: boolean;\n    hasTopMessage?: boolean;\n\n    // window state\n    windowWidth?: number;\n    windowHeight?: number;\n    mainContentHeight?: number;\n    pageHeaderHeight?: number;\n    breakpoint?: string;\n    wrapperClasses?: string;\n    breakpoints?: BP;\n    breakpointValues?: BPV;\n\n    // navigation state\n    menuLinks?: EuiMenuItem[];\n    sidebarLinks?: EuiMenuItem[];\n    combinedLinks?: EuiMenuItem[];\n\n    // other states\n    isBlockDocumentActive?: boolean;\n\n    // device info\n    deviceInfo: DI;\n\n    // language infos\n    activeLanguage: string;\n    languages: (string | EuiLanguage)[];\n\n    // app metadata\n    appMetadata: AMD;\n\n    // various dynamic state\n    hasModalActive?: boolean;\n    isDimmerActive?: boolean; // Usage: map to eui base directive input coerce euiHighlighted\n}\n\nconst initialState: UIState = {\n    appName: '',\n    appShortName: '',\n    appSubTitle: '',\n    appBaseFontSize: '',\n\n    isSidebarOpen: true,\n    isSidebarActive: false,\n    hasSidebar: false,\n    hasSideContainer: false,\n    hasHeader: false,\n    hasBreadcrumb: false,\n    hasHeaderLogo: false,\n    hasHeaderEnvironment: false,\n    hasToolbar: false,\n    hasToolbarMegaMenu: false,\n    hasToolbarMenu: false,\n    environmentValue: '',\n    isSidebarHidden: false,\n    isSidebarFocused: false,\n    hasSidebarCollapsedVariant: false,\n    hasTopMessage: false,\n    windowWidth: 0,\n    windowHeight: 0,\n    mainContentHeight: 0,\n    pageHeaderHeight: 0,\n    wrapperClasses: '',\n    breakpoint: '',\n    breakpoints: {\n        isMobile: false,\n        isTablet: false,\n        isLtLargeTablet: false,\n        isLtDesktop: false,\n        isDesktop: false,\n        isXL: false,\n        isXXL: false,\n        isFHD: false,\n        is2K: false,\n        is4K: false,\n    },\n    breakpointValues: [],\n    menuLinks: [],\n    sidebarLinks: [],\n    combinedLinks: [],\n    isBlockDocumentActive: false,\n    deviceInfo: null,\n    activeLanguage: 'en',\n    languages: EuiEuLanguages.getLanguages(),\n    appMetadata: null,\n    hasModalActive: false,\n    isDimmerActive: false,\n};\n\n@Injectable({\n    providedIn: 'root',\n})\nexport class EuiAppShellService {\n    navigationStartCustomHandler: () => void;\n    navigationEndCustomHandler: () => void;\n    protected config = inject<GlobalConfig>(GLOBAL_CONFIG_TOKEN, { optional: true });\n    private http = inject(HttpClient);\n    private platformId = inject(PLATFORM_ID);\n    private document = inject<Document>(DOCUMENT);\n    private router = inject(Router);\n    private storeService = inject(StoreService);\n    private i18nService = inject(I18nService, { optional: true });\n\n    // -------------------\n    get state$(): Observable<UIState> {\n        return this._state$.asObservable();\n    }\n\n    // -------------------\n    // exposed observables\n\n    get breakpoint$(): Observable<string> {\n        return this._breakpoint$.asObservable();\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    get breakpoints$(): Observable<any> {\n        return this._breakpoints$.asObservable();\n    }\n\n    // ----------------\n    // state operations\n    // ----------------\n    get state(): UIState {\n        return this._state$.getValue();\n    }\n\n    // ----------------------------\n    // public setters and functions\n    // ----------------------------\n    set isSidebarOpen(isOpen: boolean) {\n        this.setState({\n            ...this.state,\n            isSidebarOpen: isOpen,\n        });\n    }\n\n    get isSidebarOpen(): boolean {\n        return this.state.isSidebarOpen;\n    }\n\n    set isSidebarActive(isActive: boolean) {\n        this.setState({\n            ...this.state,\n            isSidebarActive: isActive,\n        });\n    }\n\n    set sidebarLinks(links: EuiMenuItem[]) {\n        this.setState({\n            ...this.state,\n            sidebarLinks: links,\n        });\n    }\n\n    set hasSidebarCollapsedVariant(isActive: boolean) {\n        this.setState({\n            ...this.state,\n            hasSidebarCollapsedVariant: isActive,\n        });\n        CssUtils.activateSidebarCssVars(this.document, this.platformId, isActive);\n    }\n\n    set menuLinks(links: EuiMenuItem[]) {\n        this.setState({\n            ...this.state,\n            menuLinks: links,\n        });\n    }\n\n    set isBlockDocumentActive(isActive: boolean) {\n        this.setState({\n            ...this.state,\n            isBlockDocumentActive: isActive,\n        });\n    }\n\n    get hasHeader(): boolean {\n        return this.state.hasHeader;\n    }\n\n    // Edit mode\n    get isDimmerActive(): boolean {\n        return this.state.isDimmerActive;\n    }\n\n    set isDimmerActive(isActive: boolean) {\n        this.setState({\n            ...this.state,\n            isDimmerActive: isActive,\n        });\n    }\n\n    private _state$: BehaviorSubject<UIState>;\n    private _breakpoint$: BehaviorSubject<string>;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    private _breakpoints$: BehaviorSubject<any>;\n\n    constructor() {\n        const config = this.config;\n\n        let stateWithConfig = initialState;\n        const languages = config?.i18n?.i18nService?.languages || initialState.languages;\n        const defaultLanguage = config?.i18n?.i18nService?.defaultLanguage || initialState.activeLanguage;\n        stateWithConfig = {\n            ...stateWithConfig,\n            ...{\n                languages,\n                activeLanguage: defaultLanguage,\n            },\n        };\n        this._state$ = new BehaviorSubject(stateWithConfig);\n        this._breakpoint$ = new BehaviorSubject('');\n        this._breakpoints$ = new BehaviorSubject({});\n        this.bindActiveLanguageToAppShellState();\n    }\n\n    setState(nextState: UIState, updateI18 = true): void {\n        let breakpoint, breakpoints;\n        let combinedLinks;\n\n        const state = this.state;\n\n        // check if window width has been updated from previous state\n        if (this.state.windowWidth !== nextState.windowWidth) {\n            breakpoint = this.getBreakpoint(nextState.windowWidth);\n            breakpoints = this.getBreakpoints(breakpoint);\n\n            this._breakpoint$.next(breakpoint);\n            this._breakpoints$.next(breakpoints);\n\n            // if not propagate the old ones without doing any calculations\n        } else {\n            breakpoint = state.breakpoint;\n            breakpoints = state.breakpoints;\n        }\n\n        // finally get the wrapper classes when both the state and breakpoint are known\n        const wrapperClasses = this.getWrapperClasses(nextState, breakpoint);\n\n        // check if the menuLinks or sidebarLinks have changed from previous state\n        if (this.state.menuLinks !== nextState.menuLinks || this.state.sidebarLinks !== nextState.sidebarLinks) {\n            combinedLinks = [...nextState.menuLinks, ...nextState.sidebarLinks];\n        } else {\n            combinedLinks = this.state.combinedLinks;\n        }\n\n        const stateBeforeUpdate = { ...this.state };\n\n        // we put it all together with the calculated properties\n        this._state$.next({\n            ...nextState,\n            wrapperClasses,\n            breakpoint,\n            breakpoints,\n            combinedLinks,\n        });\n\n        // update the Store Language\n        if (updateI18 && nextState.activeLanguage !== stateBeforeUpdate.activeLanguage) {\n            this.i18nService.updateState({ activeLang: nextState.activeLanguage });\n        }\n    }\n\n    /**\n     * Emits a slice from the state whether that changes\n     *\n     * @param key can be 'key' or 'key.sub.sub'\n     */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    getState<T = any>(key?: string): Observable<T> {\n        return defer(() =>\n            // check if key exists\n            key\n                ? this.state$.pipe(\n                      map((state) => get(state, key)),\n                      // filter((state) => state),\n                      distinctUntilChanged((x, y) => isEqual(x, y)),\n                  )\n                : this.state$,\n        );\n    }\n\n    public sidebarToggle(): void {\n        this.isSidebarOpen = !this.state.isSidebarOpen;\n    }\n\n    // Edit mode\n    public dimmerActiveToggle(): void {\n        const isActive = this.isDimmerActive;\n        this.setState({\n            ...this.state,\n            isDimmerActive: !isActive,\n        });\n        CssUtils.activateEditModeCssVars(!isActive, this.document);\n    }\n\n    public setDimmerActiveState(activeState: boolean): void {\n        this.setState({\n            ...this.state,\n            isDimmerActive: activeState,\n        });\n        CssUtils.activateEditModeCssVars(activeState, this.document);\n    }\n\n    // --------------\n    // public methods\n    // --------------\n    public fetchAppMetadata(metadataFilePath = 'assets/app-metadata.json'): void {\n        this.getJson(metadataFilePath).then((data) => {\n            this.setState({\n                ...this.state,\n                appMetadata: data,\n            });\n        });\n    }\n\n    public activateSidebar(): void {\n        this.setState({\n            ...this.state,\n            hasSidebar: true,\n        });\n\n        if (!this.state.isSidebarHidden) {\n            CssUtils.activateSidebarCssVars(this.document, this.platformId, this.state.hasSidebarCollapsedVariant);\n        }\n    }\n\n    public activateSideContainer(): void {\n        this.setState({\n            ...this.state,\n            hasSideContainer: true,\n        });\n\n        CssUtils.activateSideContainerCssVars(this.document, this.platformId);\n    }    \n\n    public deactivateSideContainer(): void {\n        this.setState({\n            ...this.state,\n            hasSideContainer: false,\n        });\n\n        CssUtils.deactivateSideContainerCssVars(this.document, this.platformId);\n    }    \n\n    public activateSidebarHeader(): void {\n        CssUtils.activateSidebarHeaderCssVars(this.document, this.platformId);\n    }\n\n    public activateSidebarFooter(): void {\n        CssUtils.activateSidebarFooterCssVars(this.document, this.platformId);\n    }\n\n    public activateHeader(): void {\n        this.setState({\n            ...this.state,\n            hasHeader: true,\n        });\n        CssUtils.activateHeaderCssVars(this.document, this.platformId);\n    }\n\n    public activateBreadcrumb(): void {\n        this.setState({\n            ...this.state,\n            hasBreadcrumb: true,\n        });\n        CssUtils.activateBreadcrumbCssVars(this.document, this.platformId);\n    }\n\n    public activateTopMessage(height: number): void {\n        this.setState({\n            ...this.state,\n            hasTopMessage: true,\n        });\n        CssUtils.activateTopMessageCssVars(height, this.document);\n    }\n\n    public activateToolbar(): void {\n        this.setState({\n            ...this.state,\n            hasToolbar: true,\n        });\n        CssUtils.activateToolbarCssVars(this.document, this.platformId);\n    }\n\n    public activateToolbarMegaMenu(): void {\n        this.setState({\n            ...this.state,\n            hasToolbarMegaMenu: true,\n        });\n        CssUtils.activateToolbarMegaMenuCssVars(this.document, this.platformId);\n    }\n\n    public activateToolbarMenu(): void {\n        this.setState({\n            ...this.state,\n            hasToolbarMenu: true,\n        });\n    }\n\n    /**\n     * Returns the current value of --eui-f-size-base CSS variable\n     */\n    public getBaseFontSize(): string {\n        return this.state.appBaseFontSize || CssUtils.getCssVarValue('--eui-f-size-base', this.document, this.platformId);\n    }\n\n    /**\n     * Updates the current value of --eui-f-size-base CSS variable and the UIState appBaseFontSize\n     */\n    public setBaseFontSize(newsize: string): void {\n        this.setState(\n            {\n                ...this.state,\n                appBaseFontSize: newsize,\n            },\n            false,\n        );\n        CssUtils.setCssVarValue('--eui-f-size-base', newsize, this.document);\n    }\n\n    // ---------------\n    // private getters\n    // ---------------\n    private getWrapperClasses(state: UIState, breakpoint: string): string {\n        const classes: string[] = [];\n\n        classes.push(breakpoint);\n\n        if (state.hasSidebar) {\n            if (state.isSidebarHidden) {\n                classes.push('sidebar--hidden');\n            }\n            if (state.isSidebarOpen) {\n                classes.push('sidebar--open');\n            } else {\n                classes.push('sidebar--close');\n            }\n        }\n        if (state.deviceInfo?.isFF) {\n            classes.push('ff');\n        }\n        if (state.deviceInfo?.isIE) {\n            classes.push('ie');\n        }\n        if (state.deviceInfo?.isChrome) {\n            classes.push('chrome');\n        }\n        return classes.join(' ');\n    }\n\n    private getBreakpoint(windowWidth: number): string {\n        let bkp = '';\n\n        if (this.state.breakpointValues.length === 0) {\n            this.setState({\n                ...this.state,\n                breakpointValues: CssUtils.getBreakpointValues(this.document, this.platformId),\n            });\n        }\n\n        this.state.breakpointValues.forEach((b, i) => {\n            if (i < this.state.breakpointValues.length) {\n                if (windowWidth >= b.value && windowWidth < this.state.breakpointValues[i+1]?.value) {\n                    bkp = b.bkp;\n                }\n            } else if(windowWidth >= b.value) {\n                bkp = b.bkp;\n            }\n        });\n\n        return bkp;\n    }\n\n    private getBreakpoints(bkp: string): object {\n        return {\n            isMobile: bkp === 'xs' || bkp === 'sm',\n            isTablet: bkp === 'md',\n            isLtLargeTablet: bkp === 'xs' || bkp === 'sm' || bkp === 'md' || bkp === 'lg',\n            isLtDesktop: bkp === 'xs' || bkp === 'sm' || bkp === 'md' || bkp === 'lg' || bkp === 'xl',\n            isDesktop: bkp === 'xxl',\n            isXL: bkp === 'xl',\n            isXXL: bkp === 'xxl',\n            isFHD: bkp === 'fhd',\n            is2K: bkp === '2k',\n            is4K: bkp === '4k',\n        };\n    }\n\n    private getJson(url: string): Promise<object> {\n        return firstValueFrom(this.http.get(url)).then(this.extractData).catch(this.handleError);\n    }\n\n    private extractData(res: Response): object {\n        const body = res;\n        return body || {};\n    }\n\n    private handleError<T extends Error>(error: T): Promise<T> {\n        console.error('An error occurred', error);\n        return Promise.reject(error.message || error);\n    }\n\n    private bindActiveLanguageToAppShellState(): void {\n        this.i18nService.getState((s) => s.activeLang).subscribe((activeLang) => {\n            if (activeLang !== this.state.activeLanguage) {\n                this.setState(\n                    {\n                        ...this.state,\n                        activeLanguage: activeLang,\n                    },\n                    false,\n                );\n            }\n        });\n    }\n}\n",
+            "sourceCode": "import { Injectable, PLATFORM_ID, inject } from '@angular/core';\nimport { HttpClient } from '@angular/common/http';\nimport { DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport { BehaviorSubject, defer, firstValueFrom, Observable } from 'rxjs';\nimport { EuiEuLanguages, GlobalConfig, getActiveLang, EuiLanguage, EuiMenuItem } from '@eui/base';\nimport { GLOBAL_CONFIG_TOKEN } from './config/tokens';\nimport { I18nService } from './i18n';\nimport { Router, NavigationEnd } from '@angular/router';\nimport { StoreService } from './store/store.service';\nimport { distinctUntilChanged, filter, map } from 'rxjs/operators';\nimport { isEqual, get } from 'lodash-es';\nimport { CssUtils } from '../helpers/css-utils';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport interface UIState<BP = any, DI = any, AMD =any, BPV = any> {\n    // app state\n    appName?: string;\n    appShortName?: string;\n    appSubTitle?: string;\n    appBaseFontSize?: string;\n\n    // Sidebar state\n    isSidebarOpen?: boolean;\n    isSidebarActive?: boolean;\n    hasFixedPosition?: boolean;\n    hasSidebar?: boolean;\n    hasSideContainer?: boolean;\n    hasBreadcrumb?: boolean;\n    hasHeader?: boolean;\n    hasHeaderLogo?: boolean;\n    hasHeaderEnvironment?: boolean;\n    hasToolbar?: boolean;\n    hasToolbarMegaMenu?: boolean;\n    hasToolbarMenu?: boolean;\n    environmentValue?: string;\n    isSidebarHidden?: boolean;\n    isSidebarFocused?: boolean;\n    hasSidebarCollapsedVariant?: boolean;\n    hasTopMessage?: boolean;\n\n    // window state\n    windowWidth?: number;\n    windowHeight?: number;\n    mainContentHeight?: number;\n    pageHeaderHeight?: number;\n    breakpoint?: string;\n    wrapperClasses?: string;\n    breakpoints?: BP;\n    breakpointValues?: BPV;\n\n    // navigation state\n    menuLinks?: EuiMenuItem[];\n    sidebarLinks?: EuiMenuItem[];\n    combinedLinks?: EuiMenuItem[];\n\n    // other states\n    isBlockDocumentActive?: boolean;\n\n    // device info\n    deviceInfo: DI;\n\n    // language infos\n    activeLanguage: string;\n    languages: (string | EuiLanguage)[];\n\n    // app metadata\n    appMetadata: AMD;\n\n    // various dynamic state\n    hasModalActive?: boolean;\n    isDimmerActive?: boolean; // Usage: map to eui base directive input coerce euiHighlighted\n}\n\nconst initialState: UIState = {\n    appName: '',\n    appShortName: '',\n    appSubTitle: '',\n    appBaseFontSize: '',\n\n    isSidebarOpen: true,\n    isSidebarActive: false,\n    hasFixedPosition: true,\n    hasSidebar: false,\n    hasSideContainer: false,\n    hasHeader: false,\n    hasBreadcrumb: false,\n    hasHeaderLogo: false,\n    hasHeaderEnvironment: false,\n    hasToolbar: false,\n    hasToolbarMegaMenu: false,\n    hasToolbarMenu: false,\n    environmentValue: '',\n    isSidebarHidden: false,\n    isSidebarFocused: false,\n    hasSidebarCollapsedVariant: false,\n    hasTopMessage: false,\n    windowWidth: 0,\n    windowHeight: 0,\n    mainContentHeight: 0,\n    pageHeaderHeight: 0,\n    wrapperClasses: '',\n    breakpoint: '',\n    breakpoints: {\n        isMobile: false,\n        isTablet: false,\n        isLtLargeTablet: false,\n        isLtDesktop: false,\n        isDesktop: false,\n        isXL: false,\n        isXXL: false,\n        isFHD: false,\n        is2K: false,\n        is4K: false,\n    },\n    breakpointValues: [],\n    menuLinks: [],\n    sidebarLinks: [],\n    combinedLinks: [],\n    isBlockDocumentActive: false,\n    deviceInfo: null,\n    activeLanguage: 'en',\n    languages: EuiEuLanguages.getLanguages(),\n    appMetadata: null,\n    hasModalActive: false,\n    isDimmerActive: false,\n};\n\n@Injectable({\n    providedIn: 'root',\n})\nexport class EuiAppShellService {\n    navigationStartCustomHandler: () => void;\n    navigationEndCustomHandler: () => void;\n    protected config = inject<GlobalConfig>(GLOBAL_CONFIG_TOKEN, { optional: true });\n    private http = inject(HttpClient);\n    private platformId = inject(PLATFORM_ID);\n    private document = inject<Document>(DOCUMENT);\n    private router = inject(Router);\n    private storeService = inject(StoreService);\n    private i18nService = inject(I18nService, { optional: true });\n\n    // -------------------\n    get state$(): Observable<UIState> {\n        return this._state$.asObservable();\n    }\n\n    // -------------------\n    // exposed observables\n\n    get breakpoint$(): Observable<string> {\n        return this._breakpoint$.asObservable();\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    get breakpoints$(): Observable<any> {\n        return this._breakpoints$.asObservable();\n    }\n\n    // ----------------\n    // state operations\n    // ----------------\n    get state(): UIState {\n        return this._state$.getValue();\n    }\n\n    // ----------------------------\n    // public setters and functions\n    // ----------------------------\n    set isSidebarOpen(isOpen: boolean) {\n        this.setState({\n            ...this.state,\n            isSidebarOpen: isOpen,\n        });\n    }\n\n    get isSidebarOpen(): boolean {\n        return this.state.isSidebarOpen;\n    }\n\n    set isSidebarActive(isActive: boolean) {\n        this.setState({\n            ...this.state,\n            isSidebarActive: isActive,\n        });\n    }\n\n    set sidebarLinks(links: EuiMenuItem[]) {\n        this.setState({\n            ...this.state,\n            sidebarLinks: links,\n        });\n    }\n\n    set hasSidebarCollapsedVariant(isActive: boolean) {\n        this.setState({\n            ...this.state,\n            hasSidebarCollapsedVariant: isActive,\n        });\n        CssUtils.activateSidebarCssVars(this.document, this.platformId, isActive);\n    }\n\n    set menuLinks(links: EuiMenuItem[]) {\n        this.setState({\n            ...this.state,\n            menuLinks: links,\n        });\n    }\n\n    set isBlockDocumentActive(isActive: boolean) {\n        this.setState({\n            ...this.state,\n            isBlockDocumentActive: isActive,\n        });\n    }\n\n    get hasHeader(): boolean {\n        return this.state.hasHeader;\n    }\n\n    // Edit mode\n    get isDimmerActive(): boolean {\n        return this.state.isDimmerActive;\n    }\n\n    set isDimmerActive(isActive: boolean) {\n        this.setState({\n            ...this.state,\n            isDimmerActive: isActive,\n        });\n    }\n\n    private _state$: BehaviorSubject<UIState>;\n    private _breakpoint$: BehaviorSubject<string>;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    private _breakpoints$: BehaviorSubject<any>;\n\n    constructor() {\n        const config = this.config;\n\n        let stateWithConfig = initialState;\n        const languages = config?.i18n?.i18nService?.languages || initialState.languages;\n        const defaultLanguage = config?.i18n?.i18nService?.defaultLanguage || initialState.activeLanguage;\n        stateWithConfig = {\n            ...stateWithConfig,\n            ...{\n                languages,\n                activeLanguage: defaultLanguage,\n            },\n        };\n        this._state$ = new BehaviorSubject(stateWithConfig);\n        this._breakpoint$ = new BehaviorSubject('');\n        this._breakpoints$ = new BehaviorSubject({});\n        this.bindActiveLanguageToAppShellState();\n    }\n\n    setState(nextState: UIState, updateI18 = true): void {\n        let breakpoint, breakpoints;\n        let combinedLinks;\n\n        const state = this.state;\n\n        // check if window width has been updated from previous state\n        if (this.state.windowWidth !== nextState.windowWidth) {\n            breakpoint = this.getBreakpoint(nextState.windowWidth);\n            breakpoints = this.getBreakpoints(breakpoint);\n\n            this._breakpoint$.next(breakpoint);\n            this._breakpoints$.next(breakpoints);\n\n            // if not propagate the old ones without doing any calculations\n        } else {\n            breakpoint = state.breakpoint;\n            breakpoints = state.breakpoints;\n        }\n\n        // finally get the wrapper classes when both the state and breakpoint are known\n        const wrapperClasses = this.getWrapperClasses(nextState, breakpoint);\n\n        // check if the menuLinks or sidebarLinks have changed from previous state\n        if (this.state.menuLinks !== nextState.menuLinks || this.state.sidebarLinks !== nextState.sidebarLinks) {\n            combinedLinks = [...nextState.menuLinks, ...nextState.sidebarLinks];\n        } else {\n            combinedLinks = this.state.combinedLinks;\n        }\n\n        const stateBeforeUpdate = { ...this.state };\n\n        // we put it all together with the calculated properties\n        this._state$.next({\n            ...nextState,\n            wrapperClasses,\n            breakpoint,\n            breakpoints,\n            combinedLinks,\n        });\n\n        // update the Store Language\n        if (updateI18 && nextState.activeLanguage !== stateBeforeUpdate.activeLanguage) {\n            this.i18nService.updateState({ activeLang: nextState.activeLanguage });\n        }\n    }\n\n    /**\n     * Emits a slice from the state whether that changes\n     *\n     * @param key can be 'key' or 'key.sub.sub'\n     */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    getState<T = any>(key?: string): Observable<T> {\n        return defer(() =>\n            // check if key exists\n            key\n                ? this.state$.pipe(\n                      map((state) => get(state, key)),\n                      // filter((state) => state),\n                      distinctUntilChanged((x, y) => isEqual(x, y)),\n                  )\n                : this.state$,\n        );\n    }\n\n    public sidebarToggle(): void {\n        this.isSidebarOpen = !this.state.isSidebarOpen;\n    }\n\n    // Edit mode\n    public dimmerActiveToggle(): void {\n        const isActive = this.isDimmerActive;\n        this.setState({\n            ...this.state,\n            isDimmerActive: !isActive,\n        });\n        CssUtils.activateEditModeCssVars(!isActive, this.document);\n    }\n\n    public setDimmerActiveState(activeState: boolean): void {\n        this.setState({\n            ...this.state,\n            isDimmerActive: activeState,\n        });\n        CssUtils.activateEditModeCssVars(activeState, this.document);\n    }\n\n    // --------------\n    // public methods\n    // --------------\n    public fetchAppMetadata(metadataFilePath = 'assets/app-metadata.json'): void {\n        this.getJson(metadataFilePath).then((data) => {\n            this.setState({\n                ...this.state,\n                appMetadata: data,\n            });\n        });\n    }\n\n    public activateSidebar(): void {\n        this.setState({\n            ...this.state,\n            hasSidebar: true,\n        });\n\n        if (!this.state.isSidebarHidden) {\n            CssUtils.activateSidebarCssVars(this.document, this.platformId, this.state.hasSidebarCollapsedVariant);\n        }\n    }\n\n    public activateSideContainer(): void {\n        this.setState({\n            ...this.state,\n            hasSideContainer: true,\n        });\n\n        CssUtils.activateSideContainerCssVars(this.document, this.platformId);\n    }    \n\n    public deactivateSideContainer(): void {\n        this.setState({\n            ...this.state,\n            hasSideContainer: false,\n        });\n\n        CssUtils.deactivateSideContainerCssVars(this.document, this.platformId);\n    }    \n\n    public activateSidebarHeader(): void {\n        CssUtils.activateSidebarHeaderCssVars(this.document, this.platformId);\n    }\n\n    public activateSidebarFooter(): void {\n        CssUtils.activateSidebarFooterCssVars(this.document, this.platformId);\n    }\n\n    public activateHeader(): void {\n        this.setState({\n            ...this.state,\n            hasHeader: true,\n        });\n        CssUtils.activateHeaderCssVars(this.document, this.platformId);\n    }\n\n    public activateBreadcrumb(): void {\n        this.setState({\n            ...this.state,\n            hasBreadcrumb: true,\n        });\n        CssUtils.activateBreadcrumbCssVars(this.document, this.platformId);\n    }\n\n    public activateTopMessage(height: number): void {\n        this.setState({\n            ...this.state,\n            hasTopMessage: true,\n        });\n        CssUtils.activateTopMessageCssVars(height, this.document);\n    }\n\n    public activateToolbar(): void {\n        this.setState({\n            ...this.state,\n            hasToolbar: true,\n        });\n        CssUtils.activateToolbarCssVars(this.document, this.platformId);\n    }\n\n    public activateToolbarMegaMenu(): void {\n        this.setState({\n            ...this.state,\n            hasToolbarMegaMenu: true,\n        });\n        CssUtils.activateToolbarMegaMenuCssVars(this.document, this.platformId);\n    }\n\n    public activateToolbarMenu(): void {\n        this.setState({\n            ...this.state,\n            hasToolbarMenu: true,\n        });\n    }\n\n    /**\n     * Returns the current value of --eui-f-size-base CSS variable\n     */\n    public getBaseFontSize(): string {\n        return this.state.appBaseFontSize || CssUtils.getCssVarValue('--eui-f-size-base', this.document, this.platformId);\n    }\n\n    /**\n     * Updates the current value of --eui-f-size-base CSS variable and the UIState appBaseFontSize\n     */\n    public setBaseFontSize(newsize: string): void {\n        this.setState(\n            {\n                ...this.state,\n                appBaseFontSize: newsize,\n            },\n            false,\n        );\n        CssUtils.setCssVarValue('--eui-f-size-base', newsize, this.document);\n    }\n\n    // ---------------\n    // private getters\n    // ---------------\n    private getWrapperClasses(state: UIState, breakpoint: string): string {\n        const classes: string[] = [];\n\n        classes.push(breakpoint);\n\n        if (state.hasSidebar) {\n            if (state.isSidebarHidden) {\n                classes.push('sidebar--hidden');\n            }\n            if (state.isSidebarOpen) {\n                classes.push('sidebar--open');\n            } else {\n                classes.push('sidebar--close');\n            }\n        }\n        if (state.deviceInfo?.isFF) {\n            classes.push('ff');\n        }\n        if (state.deviceInfo?.isIE) {\n            classes.push('ie');\n        }\n        if (state.deviceInfo?.isChrome) {\n            classes.push('chrome');\n        }\n        if (state.hasFixedPosition) {\n            classes.push('fixed-position');\n        } else {\n            classes.push('relative-position');\n        }\n        return classes.join(' ');\n    }\n\n    private getBreakpoint(windowWidth: number): string {\n        let bkp = '';\n\n        if (this.state.breakpointValues.length === 0) {\n            this.setState({\n                ...this.state,\n                breakpointValues: CssUtils.getBreakpointValues(this.document, this.platformId),\n            });\n        }\n\n        this.state.breakpointValues.forEach((b, i) => {\n            if (i < this.state.breakpointValues.length) {\n                if (windowWidth >= b.value && windowWidth < this.state.breakpointValues[i+1]?.value) {\n                    bkp = b.bkp;\n                }\n            } else if(windowWidth >= b.value) {\n                bkp = b.bkp;\n            }\n        });\n\n        return bkp;\n    }\n\n    private getBreakpoints(bkp: string): object {\n        return {\n            isMobile: bkp === 'xs' || bkp === 'sm',\n            isTablet: bkp === 'md',\n            isLtLargeTablet: bkp === 'xs' || bkp === 'sm' || bkp === 'md' || bkp === 'lg',\n            isLtDesktop: bkp === 'xs' || bkp === 'sm' || bkp === 'md' || bkp === 'lg' || bkp === 'xl',\n            isDesktop: bkp === 'xxl',\n            isXL: bkp === 'xl',\n            isXXL: bkp === 'xxl',\n            isFHD: bkp === 'fhd',\n            is2K: bkp === '2k',\n            is4K: bkp === '4k',\n        };\n    }\n\n    private getJson(url: string): Promise<object> {\n        return firstValueFrom(this.http.get(url)).then(this.extractData).catch(this.handleError);\n    }\n\n    private extractData(res: Response): object {\n        const body = res;\n        return body || {};\n    }\n\n    private handleError<T extends Error>(error: T): Promise<T> {\n        console.error('An error occurred', error);\n        return Promise.reject(error.message || error);\n    }\n\n    private bindActiveLanguageToAppShellState(): void {\n        this.i18nService.getState((s) => s.activeLang).subscribe((activeLang) => {\n            if (activeLang !== this.state.activeLanguage) {\n                this.setState(\n                    {\n                        ...this.state,\n                        activeLanguage: activeLang,\n                    },\n                    false,\n                );\n            }\n        });\n    }\n}\n",
             "displayName": "UIState<BP = any, DI = any, AMD =any, BPV = any>",
             "typeParameters": [
                 "BP = any",
@@ -3447,7 +3447,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 62,
+                    "line": 63,
                     "rawdescription": "\n"
                 },
                 {
@@ -3471,7 +3471,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 66,
+                    "line": 67,
                     "rawdescription": "\n"
                 },
                 {
@@ -3519,7 +3519,7 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 45,
+                    "line": 46,
                     "rawdescription": "\n"
                 },
                 {
@@ -3531,7 +3531,7 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 47,
+                    "line": 48,
                     "rawdescription": "\n"
                 },
                 {
@@ -3543,7 +3543,7 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 48,
+                    "line": 49,
                     "rawdescription": "\n"
                 },
                 {
@@ -3555,7 +3555,7 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 53,
+                    "line": 54,
                     "rawdescription": "\n"
                 },
                 {
@@ -3567,7 +3567,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 59,
+                    "line": 60,
                     "rawdescription": "\n"
                 },
                 {
@@ -3579,7 +3579,7 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 34,
+                    "line": 35,
                     "rawdescription": "\n"
                 },
                 {
@@ -3591,7 +3591,19 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 27,
+                    "line": 28,
+                    "rawdescription": "\n"
+                },
+                {
+                    "name": "hasFixedPosition",
+                    "coverageIgnore": false,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "boolean",
+                    "indexKey": "",
+                    "optional": true,
+                    "description": "",
+                    "line": 25,
                     "rawdescription": "\n"
                 },
                 {
@@ -3603,7 +3615,7 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 28,
+                    "line": 29,
                     "rawdescription": "\n"
                 },
                 {
@@ -3615,7 +3627,7 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 30,
+                    "line": 31,
                     "rawdescription": "\n"
                 },
                 {
@@ -3627,7 +3639,7 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 29,
+                    "line": 30,
                     "rawdescription": "\n"
                 },
                 {
@@ -3639,7 +3651,7 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 69,
+                    "line": 70,
                     "rawdescription": "\n"
                 },
                 {
@@ -3651,7 +3663,7 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 25,
+                    "line": 26,
                     "rawdescription": "\n"
                 },
                 {
@@ -3663,7 +3675,7 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 37,
+                    "line": 38,
                     "rawdescription": "\n"
                 },
                 {
@@ -3675,7 +3687,7 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 26,
+                    "line": 27,
                     "rawdescription": "\n"
                 },
                 {
@@ -3687,7 +3699,7 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 31,
+                    "line": 32,
                     "rawdescription": "\n"
                 },
                 {
@@ -3699,7 +3711,7 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 32,
+                    "line": 33,
                     "rawdescription": "\n"
                 },
                 {
@@ -3711,7 +3723,7 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 33,
+                    "line": 34,
                     "rawdescription": "\n"
                 },
                 {
@@ -3723,7 +3735,7 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 38,
+                    "line": 39,
                     "rawdescription": "\n"
                 },
                 {
@@ -3735,7 +3747,7 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 56,
+                    "line": 57,
                     "rawdescription": "\n"
                 },
                 {
@@ -3747,7 +3759,7 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 70,
+                    "line": 71,
                     "rawdescription": "\n"
                 },
                 {
@@ -3771,7 +3783,7 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 36,
+                    "line": 37,
                     "rawdescription": "\n"
                 },
                 {
@@ -3783,7 +3795,7 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 35,
+                    "line": 36,
                     "rawdescription": "\n"
                 },
                 {
@@ -3807,7 +3819,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 63,
+                    "line": 64,
                     "rawdescription": "\n"
                 },
                 {
@@ -3819,7 +3831,7 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 43,
+                    "line": 44,
                     "rawdescription": "\n"
                 },
                 {
@@ -3831,7 +3843,7 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 51,
+                    "line": 52,
                     "rawdescription": "\n"
                 },
                 {
@@ -3843,7 +3855,7 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 44,
+                    "line": 45,
                     "rawdescription": "\n"
                 },
                 {
@@ -3855,7 +3867,7 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 52,
+                    "line": 53,
                     "rawdescription": "\n"
                 },
                 {
@@ -3867,7 +3879,7 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 42,
+                    "line": 43,
                     "rawdescription": "\n"
                 },
                 {
@@ -3879,7 +3891,7 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 41,
+                    "line": 42,
                     "rawdescription": "\n"
                 },
                 {
@@ -3891,7 +3903,7 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 46,
+                    "line": 47,
                     "rawdescription": "\n"
                 }
             ],
@@ -4873,7 +4885,7 @@
         },
         {
             "name": "EuiAppShellService",
-            "id": "injectable-EuiAppShellService-bfaa9f6270d915c4863163b9e4ecefb08375cb6aa213f37d6112501a800ecb988315566a096e4f16f380bf9ca862b10c87dcf84348591cf9fabd6814ab659923",
+            "id": "injectable-EuiAppShellService-2b10e519e4a4b60702c2f5da03d8ea5dc23dbec19cc7d660553b4aac90c5bdcd38a9eee6e4f6c9e5e9f468f5f00d106dcd82a7d9667028ef3f85483af3b8ffee",
             "file": "packages/core/src/lib/services/eui-app-shell.service.ts",
             "coverageIgnore": false,
             "properties": [
@@ -4887,7 +4899,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 132,
+                    "line": 134,
                     "rawdescription": "\n",
                     "modifierKind": [
                         124
@@ -4902,7 +4914,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 131,
+                    "line": 133,
                     "rawdescription": "\n"
                 },
                 {
@@ -4914,7 +4926,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 130,
+                    "line": 132,
                     "rawdescription": "\n"
                 }
             ],
@@ -4926,7 +4938,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 399,
+                    "line": 401,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -4942,7 +4954,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 391,
+                    "line": 393,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -4958,7 +4970,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 354,
+                    "line": 356,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -4974,7 +4986,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 387,
+                    "line": 389,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -4990,7 +5002,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 383,
+                    "line": 385,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -5006,7 +5018,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 365,
+                    "line": 367,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -5022,7 +5034,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 415,
+                    "line": 417,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -5038,7 +5050,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 423,
+                    "line": 425,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -5054,7 +5066,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 431,
+                    "line": 433,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -5079,7 +5091,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 407,
+                    "line": 409,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -5108,7 +5120,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 374,
+                    "line": 376,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -5124,7 +5136,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 325,
+                    "line": 327,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -5150,7 +5162,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 345,
+                    "line": 347,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -5180,7 +5192,7 @@
                     "optional": false,
                     "returnType": "string",
                     "typeParameters": [],
-                    "line": 441,
+                    "line": 443,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nReturns the current value of --eui-f-size-base CSS variable\n",
@@ -5207,7 +5219,7 @@
                     "typeParameters": [
                         "T"
                     ],
-                    "line": 307,
+                    "line": 309,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits a slice from the state whether that changes\n\n",
@@ -5215,8 +5227,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 8924,
-                                "end": 8927,
+                                "pos": 8984,
+                                "end": 8987,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -5229,8 +5241,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 8918,
-                                "end": 8923,
+                                "pos": 8978,
+                                "end": 8983,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -5257,7 +5269,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 448,
+                    "line": 450,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nUpdates the current value of --eui-f-size-base CSS variable and the UIState appBaseFontSize\n",
@@ -5295,7 +5307,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 334,
+                    "line": 336,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -5342,7 +5354,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 254,
+                    "line": 256,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -5380,7 +5392,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 320,
+                    "line": 322,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -5394,14 +5406,14 @@
             "deprecationMessage": "",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import { Injectable, PLATFORM_ID, inject } from '@angular/core';\nimport { HttpClient } from '@angular/common/http';\nimport { DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport { BehaviorSubject, defer, firstValueFrom, Observable } from 'rxjs';\nimport { EuiEuLanguages, GlobalConfig, getActiveLang, EuiLanguage, EuiMenuItem } from '@eui/base';\nimport { GLOBAL_CONFIG_TOKEN } from './config/tokens';\nimport { I18nService } from './i18n';\nimport { Router, NavigationEnd } from '@angular/router';\nimport { StoreService } from './store/store.service';\nimport { distinctUntilChanged, filter, map } from 'rxjs/operators';\nimport { isEqual, get } from 'lodash-es';\nimport { CssUtils } from '../helpers/css-utils';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport interface UIState<BP = any, DI = any, AMD =any, BPV = any> {\n    // app state\n    appName?: string;\n    appShortName?: string;\n    appSubTitle?: string;\n    appBaseFontSize?: string;\n\n    // Sidebar state\n    isSidebarOpen?: boolean;\n    isSidebarActive?: boolean;\n    hasSidebar?: boolean;\n    hasSideContainer?: boolean;\n    hasBreadcrumb?: boolean;\n    hasHeader?: boolean;\n    hasHeaderLogo?: boolean;\n    hasHeaderEnvironment?: boolean;\n    hasToolbar?: boolean;\n    hasToolbarMegaMenu?: boolean;\n    hasToolbarMenu?: boolean;\n    environmentValue?: string;\n    isSidebarHidden?: boolean;\n    isSidebarFocused?: boolean;\n    hasSidebarCollapsedVariant?: boolean;\n    hasTopMessage?: boolean;\n\n    // window state\n    windowWidth?: number;\n    windowHeight?: number;\n    mainContentHeight?: number;\n    pageHeaderHeight?: number;\n    breakpoint?: string;\n    wrapperClasses?: string;\n    breakpoints?: BP;\n    breakpointValues?: BPV;\n\n    // navigation state\n    menuLinks?: EuiMenuItem[];\n    sidebarLinks?: EuiMenuItem[];\n    combinedLinks?: EuiMenuItem[];\n\n    // other states\n    isBlockDocumentActive?: boolean;\n\n    // device info\n    deviceInfo: DI;\n\n    // language infos\n    activeLanguage: string;\n    languages: (string | EuiLanguage)[];\n\n    // app metadata\n    appMetadata: AMD;\n\n    // various dynamic state\n    hasModalActive?: boolean;\n    isDimmerActive?: boolean; // Usage: map to eui base directive input coerce euiHighlighted\n}\n\nconst initialState: UIState = {\n    appName: '',\n    appShortName: '',\n    appSubTitle: '',\n    appBaseFontSize: '',\n\n    isSidebarOpen: true,\n    isSidebarActive: false,\n    hasSidebar: false,\n    hasSideContainer: false,\n    hasHeader: false,\n    hasBreadcrumb: false,\n    hasHeaderLogo: false,\n    hasHeaderEnvironment: false,\n    hasToolbar: false,\n    hasToolbarMegaMenu: false,\n    hasToolbarMenu: false,\n    environmentValue: '',\n    isSidebarHidden: false,\n    isSidebarFocused: false,\n    hasSidebarCollapsedVariant: false,\n    hasTopMessage: false,\n    windowWidth: 0,\n    windowHeight: 0,\n    mainContentHeight: 0,\n    pageHeaderHeight: 0,\n    wrapperClasses: '',\n    breakpoint: '',\n    breakpoints: {\n        isMobile: false,\n        isTablet: false,\n        isLtLargeTablet: false,\n        isLtDesktop: false,\n        isDesktop: false,\n        isXL: false,\n        isXXL: false,\n        isFHD: false,\n        is2K: false,\n        is4K: false,\n    },\n    breakpointValues: [],\n    menuLinks: [],\n    sidebarLinks: [],\n    combinedLinks: [],\n    isBlockDocumentActive: false,\n    deviceInfo: null,\n    activeLanguage: 'en',\n    languages: EuiEuLanguages.getLanguages(),\n    appMetadata: null,\n    hasModalActive: false,\n    isDimmerActive: false,\n};\n\n@Injectable({\n    providedIn: 'root',\n})\nexport class EuiAppShellService {\n    navigationStartCustomHandler: () => void;\n    navigationEndCustomHandler: () => void;\n    protected config = inject<GlobalConfig>(GLOBAL_CONFIG_TOKEN, { optional: true });\n    private http = inject(HttpClient);\n    private platformId = inject(PLATFORM_ID);\n    private document = inject<Document>(DOCUMENT);\n    private router = inject(Router);\n    private storeService = inject(StoreService);\n    private i18nService = inject(I18nService, { optional: true });\n\n    // -------------------\n    get state$(): Observable<UIState> {\n        return this._state$.asObservable();\n    }\n\n    // -------------------\n    // exposed observables\n\n    get breakpoint$(): Observable<string> {\n        return this._breakpoint$.asObservable();\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    get breakpoints$(): Observable<any> {\n        return this._breakpoints$.asObservable();\n    }\n\n    // ----------------\n    // state operations\n    // ----------------\n    get state(): UIState {\n        return this._state$.getValue();\n    }\n\n    // ----------------------------\n    // public setters and functions\n    // ----------------------------\n    set isSidebarOpen(isOpen: boolean) {\n        this.setState({\n            ...this.state,\n            isSidebarOpen: isOpen,\n        });\n    }\n\n    get isSidebarOpen(): boolean {\n        return this.state.isSidebarOpen;\n    }\n\n    set isSidebarActive(isActive: boolean) {\n        this.setState({\n            ...this.state,\n            isSidebarActive: isActive,\n        });\n    }\n\n    set sidebarLinks(links: EuiMenuItem[]) {\n        this.setState({\n            ...this.state,\n            sidebarLinks: links,\n        });\n    }\n\n    set hasSidebarCollapsedVariant(isActive: boolean) {\n        this.setState({\n            ...this.state,\n            hasSidebarCollapsedVariant: isActive,\n        });\n        CssUtils.activateSidebarCssVars(this.document, this.platformId, isActive);\n    }\n\n    set menuLinks(links: EuiMenuItem[]) {\n        this.setState({\n            ...this.state,\n            menuLinks: links,\n        });\n    }\n\n    set isBlockDocumentActive(isActive: boolean) {\n        this.setState({\n            ...this.state,\n            isBlockDocumentActive: isActive,\n        });\n    }\n\n    get hasHeader(): boolean {\n        return this.state.hasHeader;\n    }\n\n    // Edit mode\n    get isDimmerActive(): boolean {\n        return this.state.isDimmerActive;\n    }\n\n    set isDimmerActive(isActive: boolean) {\n        this.setState({\n            ...this.state,\n            isDimmerActive: isActive,\n        });\n    }\n\n    private _state$: BehaviorSubject<UIState>;\n    private _breakpoint$: BehaviorSubject<string>;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    private _breakpoints$: BehaviorSubject<any>;\n\n    constructor() {\n        const config = this.config;\n\n        let stateWithConfig = initialState;\n        const languages = config?.i18n?.i18nService?.languages || initialState.languages;\n        const defaultLanguage = config?.i18n?.i18nService?.defaultLanguage || initialState.activeLanguage;\n        stateWithConfig = {\n            ...stateWithConfig,\n            ...{\n                languages,\n                activeLanguage: defaultLanguage,\n            },\n        };\n        this._state$ = new BehaviorSubject(stateWithConfig);\n        this._breakpoint$ = new BehaviorSubject('');\n        this._breakpoints$ = new BehaviorSubject({});\n        this.bindActiveLanguageToAppShellState();\n    }\n\n    setState(nextState: UIState, updateI18 = true): void {\n        let breakpoint, breakpoints;\n        let combinedLinks;\n\n        const state = this.state;\n\n        // check if window width has been updated from previous state\n        if (this.state.windowWidth !== nextState.windowWidth) {\n            breakpoint = this.getBreakpoint(nextState.windowWidth);\n            breakpoints = this.getBreakpoints(breakpoint);\n\n            this._breakpoint$.next(breakpoint);\n            this._breakpoints$.next(breakpoints);\n\n            // if not propagate the old ones without doing any calculations\n        } else {\n            breakpoint = state.breakpoint;\n            breakpoints = state.breakpoints;\n        }\n\n        // finally get the wrapper classes when both the state and breakpoint are known\n        const wrapperClasses = this.getWrapperClasses(nextState, breakpoint);\n\n        // check if the menuLinks or sidebarLinks have changed from previous state\n        if (this.state.menuLinks !== nextState.menuLinks || this.state.sidebarLinks !== nextState.sidebarLinks) {\n            combinedLinks = [...nextState.menuLinks, ...nextState.sidebarLinks];\n        } else {\n            combinedLinks = this.state.combinedLinks;\n        }\n\n        const stateBeforeUpdate = { ...this.state };\n\n        // we put it all together with the calculated properties\n        this._state$.next({\n            ...nextState,\n            wrapperClasses,\n            breakpoint,\n            breakpoints,\n            combinedLinks,\n        });\n\n        // update the Store Language\n        if (updateI18 && nextState.activeLanguage !== stateBeforeUpdate.activeLanguage) {\n            this.i18nService.updateState({ activeLang: nextState.activeLanguage });\n        }\n    }\n\n    /**\n     * Emits a slice from the state whether that changes\n     *\n     * @param key can be 'key' or 'key.sub.sub'\n     */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    getState<T = any>(key?: string): Observable<T> {\n        return defer(() =>\n            // check if key exists\n            key\n                ? this.state$.pipe(\n                      map((state) => get(state, key)),\n                      // filter((state) => state),\n                      distinctUntilChanged((x, y) => isEqual(x, y)),\n                  )\n                : this.state$,\n        );\n    }\n\n    public sidebarToggle(): void {\n        this.isSidebarOpen = !this.state.isSidebarOpen;\n    }\n\n    // Edit mode\n    public dimmerActiveToggle(): void {\n        const isActive = this.isDimmerActive;\n        this.setState({\n            ...this.state,\n            isDimmerActive: !isActive,\n        });\n        CssUtils.activateEditModeCssVars(!isActive, this.document);\n    }\n\n    public setDimmerActiveState(activeState: boolean): void {\n        this.setState({\n            ...this.state,\n            isDimmerActive: activeState,\n        });\n        CssUtils.activateEditModeCssVars(activeState, this.document);\n    }\n\n    // --------------\n    // public methods\n    // --------------\n    public fetchAppMetadata(metadataFilePath = 'assets/app-metadata.json'): void {\n        this.getJson(metadataFilePath).then((data) => {\n            this.setState({\n                ...this.state,\n                appMetadata: data,\n            });\n        });\n    }\n\n    public activateSidebar(): void {\n        this.setState({\n            ...this.state,\n            hasSidebar: true,\n        });\n\n        if (!this.state.isSidebarHidden) {\n            CssUtils.activateSidebarCssVars(this.document, this.platformId, this.state.hasSidebarCollapsedVariant);\n        }\n    }\n\n    public activateSideContainer(): void {\n        this.setState({\n            ...this.state,\n            hasSideContainer: true,\n        });\n\n        CssUtils.activateSideContainerCssVars(this.document, this.platformId);\n    }    \n\n    public deactivateSideContainer(): void {\n        this.setState({\n            ...this.state,\n            hasSideContainer: false,\n        });\n\n        CssUtils.deactivateSideContainerCssVars(this.document, this.platformId);\n    }    \n\n    public activateSidebarHeader(): void {\n        CssUtils.activateSidebarHeaderCssVars(this.document, this.platformId);\n    }\n\n    public activateSidebarFooter(): void {\n        CssUtils.activateSidebarFooterCssVars(this.document, this.platformId);\n    }\n\n    public activateHeader(): void {\n        this.setState({\n            ...this.state,\n            hasHeader: true,\n        });\n        CssUtils.activateHeaderCssVars(this.document, this.platformId);\n    }\n\n    public activateBreadcrumb(): void {\n        this.setState({\n            ...this.state,\n            hasBreadcrumb: true,\n        });\n        CssUtils.activateBreadcrumbCssVars(this.document, this.platformId);\n    }\n\n    public activateTopMessage(height: number): void {\n        this.setState({\n            ...this.state,\n            hasTopMessage: true,\n        });\n        CssUtils.activateTopMessageCssVars(height, this.document);\n    }\n\n    public activateToolbar(): void {\n        this.setState({\n            ...this.state,\n            hasToolbar: true,\n        });\n        CssUtils.activateToolbarCssVars(this.document, this.platformId);\n    }\n\n    public activateToolbarMegaMenu(): void {\n        this.setState({\n            ...this.state,\n            hasToolbarMegaMenu: true,\n        });\n        CssUtils.activateToolbarMegaMenuCssVars(this.document, this.platformId);\n    }\n\n    public activateToolbarMenu(): void {\n        this.setState({\n            ...this.state,\n            hasToolbarMenu: true,\n        });\n    }\n\n    /**\n     * Returns the current value of --eui-f-size-base CSS variable\n     */\n    public getBaseFontSize(): string {\n        return this.state.appBaseFontSize || CssUtils.getCssVarValue('--eui-f-size-base', this.document, this.platformId);\n    }\n\n    /**\n     * Updates the current value of --eui-f-size-base CSS variable and the UIState appBaseFontSize\n     */\n    public setBaseFontSize(newsize: string): void {\n        this.setState(\n            {\n                ...this.state,\n                appBaseFontSize: newsize,\n            },\n            false,\n        );\n        CssUtils.setCssVarValue('--eui-f-size-base', newsize, this.document);\n    }\n\n    // ---------------\n    // private getters\n    // ---------------\n    private getWrapperClasses(state: UIState, breakpoint: string): string {\n        const classes: string[] = [];\n\n        classes.push(breakpoint);\n\n        if (state.hasSidebar) {\n            if (state.isSidebarHidden) {\n                classes.push('sidebar--hidden');\n            }\n            if (state.isSidebarOpen) {\n                classes.push('sidebar--open');\n            } else {\n                classes.push('sidebar--close');\n            }\n        }\n        if (state.deviceInfo?.isFF) {\n            classes.push('ff');\n        }\n        if (state.deviceInfo?.isIE) {\n            classes.push('ie');\n        }\n        if (state.deviceInfo?.isChrome) {\n            classes.push('chrome');\n        }\n        return classes.join(' ');\n    }\n\n    private getBreakpoint(windowWidth: number): string {\n        let bkp = '';\n\n        if (this.state.breakpointValues.length === 0) {\n            this.setState({\n                ...this.state,\n                breakpointValues: CssUtils.getBreakpointValues(this.document, this.platformId),\n            });\n        }\n\n        this.state.breakpointValues.forEach((b, i) => {\n            if (i < this.state.breakpointValues.length) {\n                if (windowWidth >= b.value && windowWidth < this.state.breakpointValues[i+1]?.value) {\n                    bkp = b.bkp;\n                }\n            } else if(windowWidth >= b.value) {\n                bkp = b.bkp;\n            }\n        });\n\n        return bkp;\n    }\n\n    private getBreakpoints(bkp: string): object {\n        return {\n            isMobile: bkp === 'xs' || bkp === 'sm',\n            isTablet: bkp === 'md',\n            isLtLargeTablet: bkp === 'xs' || bkp === 'sm' || bkp === 'md' || bkp === 'lg',\n            isLtDesktop: bkp === 'xs' || bkp === 'sm' || bkp === 'md' || bkp === 'lg' || bkp === 'xl',\n            isDesktop: bkp === 'xxl',\n            isXL: bkp === 'xl',\n            isXXL: bkp === 'xxl',\n            isFHD: bkp === 'fhd',\n            is2K: bkp === '2k',\n            is4K: bkp === '4k',\n        };\n    }\n\n    private getJson(url: string): Promise<object> {\n        return firstValueFrom(this.http.get(url)).then(this.extractData).catch(this.handleError);\n    }\n\n    private extractData(res: Response): object {\n        const body = res;\n        return body || {};\n    }\n\n    private handleError<T extends Error>(error: T): Promise<T> {\n        console.error('An error occurred', error);\n        return Promise.reject(error.message || error);\n    }\n\n    private bindActiveLanguageToAppShellState(): void {\n        this.i18nService.getState((s) => s.activeLang).subscribe((activeLang) => {\n            if (activeLang !== this.state.activeLanguage) {\n                this.setState(\n                    {\n                        ...this.state,\n                        activeLanguage: activeLang,\n                    },\n                    false,\n                );\n            }\n        });\n    }\n}\n",
+            "sourceCode": "import { Injectable, PLATFORM_ID, inject } from '@angular/core';\nimport { HttpClient } from '@angular/common/http';\nimport { DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport { BehaviorSubject, defer, firstValueFrom, Observable } from 'rxjs';\nimport { EuiEuLanguages, GlobalConfig, getActiveLang, EuiLanguage, EuiMenuItem } from '@eui/base';\nimport { GLOBAL_CONFIG_TOKEN } from './config/tokens';\nimport { I18nService } from './i18n';\nimport { Router, NavigationEnd } from '@angular/router';\nimport { StoreService } from './store/store.service';\nimport { distinctUntilChanged, filter, map } from 'rxjs/operators';\nimport { isEqual, get } from 'lodash-es';\nimport { CssUtils } from '../helpers/css-utils';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport interface UIState<BP = any, DI = any, AMD =any, BPV = any> {\n    // app state\n    appName?: string;\n    appShortName?: string;\n    appSubTitle?: string;\n    appBaseFontSize?: string;\n\n    // Sidebar state\n    isSidebarOpen?: boolean;\n    isSidebarActive?: boolean;\n    hasFixedPosition?: boolean;\n    hasSidebar?: boolean;\n    hasSideContainer?: boolean;\n    hasBreadcrumb?: boolean;\n    hasHeader?: boolean;\n    hasHeaderLogo?: boolean;\n    hasHeaderEnvironment?: boolean;\n    hasToolbar?: boolean;\n    hasToolbarMegaMenu?: boolean;\n    hasToolbarMenu?: boolean;\n    environmentValue?: string;\n    isSidebarHidden?: boolean;\n    isSidebarFocused?: boolean;\n    hasSidebarCollapsedVariant?: boolean;\n    hasTopMessage?: boolean;\n\n    // window state\n    windowWidth?: number;\n    windowHeight?: number;\n    mainContentHeight?: number;\n    pageHeaderHeight?: number;\n    breakpoint?: string;\n    wrapperClasses?: string;\n    breakpoints?: BP;\n    breakpointValues?: BPV;\n\n    // navigation state\n    menuLinks?: EuiMenuItem[];\n    sidebarLinks?: EuiMenuItem[];\n    combinedLinks?: EuiMenuItem[];\n\n    // other states\n    isBlockDocumentActive?: boolean;\n\n    // device info\n    deviceInfo: DI;\n\n    // language infos\n    activeLanguage: string;\n    languages: (string | EuiLanguage)[];\n\n    // app metadata\n    appMetadata: AMD;\n\n    // various dynamic state\n    hasModalActive?: boolean;\n    isDimmerActive?: boolean; // Usage: map to eui base directive input coerce euiHighlighted\n}\n\nconst initialState: UIState = {\n    appName: '',\n    appShortName: '',\n    appSubTitle: '',\n    appBaseFontSize: '',\n\n    isSidebarOpen: true,\n    isSidebarActive: false,\n    hasFixedPosition: true,\n    hasSidebar: false,\n    hasSideContainer: false,\n    hasHeader: false,\n    hasBreadcrumb: false,\n    hasHeaderLogo: false,\n    hasHeaderEnvironment: false,\n    hasToolbar: false,\n    hasToolbarMegaMenu: false,\n    hasToolbarMenu: false,\n    environmentValue: '',\n    isSidebarHidden: false,\n    isSidebarFocused: false,\n    hasSidebarCollapsedVariant: false,\n    hasTopMessage: false,\n    windowWidth: 0,\n    windowHeight: 0,\n    mainContentHeight: 0,\n    pageHeaderHeight: 0,\n    wrapperClasses: '',\n    breakpoint: '',\n    breakpoints: {\n        isMobile: false,\n        isTablet: false,\n        isLtLargeTablet: false,\n        isLtDesktop: false,\n        isDesktop: false,\n        isXL: false,\n        isXXL: false,\n        isFHD: false,\n        is2K: false,\n        is4K: false,\n    },\n    breakpointValues: [],\n    menuLinks: [],\n    sidebarLinks: [],\n    combinedLinks: [],\n    isBlockDocumentActive: false,\n    deviceInfo: null,\n    activeLanguage: 'en',\n    languages: EuiEuLanguages.getLanguages(),\n    appMetadata: null,\n    hasModalActive: false,\n    isDimmerActive: false,\n};\n\n@Injectable({\n    providedIn: 'root',\n})\nexport class EuiAppShellService {\n    navigationStartCustomHandler: () => void;\n    navigationEndCustomHandler: () => void;\n    protected config = inject<GlobalConfig>(GLOBAL_CONFIG_TOKEN, { optional: true });\n    private http = inject(HttpClient);\n    private platformId = inject(PLATFORM_ID);\n    private document = inject<Document>(DOCUMENT);\n    private router = inject(Router);\n    private storeService = inject(StoreService);\n    private i18nService = inject(I18nService, { optional: true });\n\n    // -------------------\n    get state$(): Observable<UIState> {\n        return this._state$.asObservable();\n    }\n\n    // -------------------\n    // exposed observables\n\n    get breakpoint$(): Observable<string> {\n        return this._breakpoint$.asObservable();\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    get breakpoints$(): Observable<any> {\n        return this._breakpoints$.asObservable();\n    }\n\n    // ----------------\n    // state operations\n    // ----------------\n    get state(): UIState {\n        return this._state$.getValue();\n    }\n\n    // ----------------------------\n    // public setters and functions\n    // ----------------------------\n    set isSidebarOpen(isOpen: boolean) {\n        this.setState({\n            ...this.state,\n            isSidebarOpen: isOpen,\n        });\n    }\n\n    get isSidebarOpen(): boolean {\n        return this.state.isSidebarOpen;\n    }\n\n    set isSidebarActive(isActive: boolean) {\n        this.setState({\n            ...this.state,\n            isSidebarActive: isActive,\n        });\n    }\n\n    set sidebarLinks(links: EuiMenuItem[]) {\n        this.setState({\n            ...this.state,\n            sidebarLinks: links,\n        });\n    }\n\n    set hasSidebarCollapsedVariant(isActive: boolean) {\n        this.setState({\n            ...this.state,\n            hasSidebarCollapsedVariant: isActive,\n        });\n        CssUtils.activateSidebarCssVars(this.document, this.platformId, isActive);\n    }\n\n    set menuLinks(links: EuiMenuItem[]) {\n        this.setState({\n            ...this.state,\n            menuLinks: links,\n        });\n    }\n\n    set isBlockDocumentActive(isActive: boolean) {\n        this.setState({\n            ...this.state,\n            isBlockDocumentActive: isActive,\n        });\n    }\n\n    get hasHeader(): boolean {\n        return this.state.hasHeader;\n    }\n\n    // Edit mode\n    get isDimmerActive(): boolean {\n        return this.state.isDimmerActive;\n    }\n\n    set isDimmerActive(isActive: boolean) {\n        this.setState({\n            ...this.state,\n            isDimmerActive: isActive,\n        });\n    }\n\n    private _state$: BehaviorSubject<UIState>;\n    private _breakpoint$: BehaviorSubject<string>;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    private _breakpoints$: BehaviorSubject<any>;\n\n    constructor() {\n        const config = this.config;\n\n        let stateWithConfig = initialState;\n        const languages = config?.i18n?.i18nService?.languages || initialState.languages;\n        const defaultLanguage = config?.i18n?.i18nService?.defaultLanguage || initialState.activeLanguage;\n        stateWithConfig = {\n            ...stateWithConfig,\n            ...{\n                languages,\n                activeLanguage: defaultLanguage,\n            },\n        };\n        this._state$ = new BehaviorSubject(stateWithConfig);\n        this._breakpoint$ = new BehaviorSubject('');\n        this._breakpoints$ = new BehaviorSubject({});\n        this.bindActiveLanguageToAppShellState();\n    }\n\n    setState(nextState: UIState, updateI18 = true): void {\n        let breakpoint, breakpoints;\n        let combinedLinks;\n\n        const state = this.state;\n\n        // check if window width has been updated from previous state\n        if (this.state.windowWidth !== nextState.windowWidth) {\n            breakpoint = this.getBreakpoint(nextState.windowWidth);\n            breakpoints = this.getBreakpoints(breakpoint);\n\n            this._breakpoint$.next(breakpoint);\n            this._breakpoints$.next(breakpoints);\n\n            // if not propagate the old ones without doing any calculations\n        } else {\n            breakpoint = state.breakpoint;\n            breakpoints = state.breakpoints;\n        }\n\n        // finally get the wrapper classes when both the state and breakpoint are known\n        const wrapperClasses = this.getWrapperClasses(nextState, breakpoint);\n\n        // check if the menuLinks or sidebarLinks have changed from previous state\n        if (this.state.menuLinks !== nextState.menuLinks || this.state.sidebarLinks !== nextState.sidebarLinks) {\n            combinedLinks = [...nextState.menuLinks, ...nextState.sidebarLinks];\n        } else {\n            combinedLinks = this.state.combinedLinks;\n        }\n\n        const stateBeforeUpdate = { ...this.state };\n\n        // we put it all together with the calculated properties\n        this._state$.next({\n            ...nextState,\n            wrapperClasses,\n            breakpoint,\n            breakpoints,\n            combinedLinks,\n        });\n\n        // update the Store Language\n        if (updateI18 && nextState.activeLanguage !== stateBeforeUpdate.activeLanguage) {\n            this.i18nService.updateState({ activeLang: nextState.activeLanguage });\n        }\n    }\n\n    /**\n     * Emits a slice from the state whether that changes\n     *\n     * @param key can be 'key' or 'key.sub.sub'\n     */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    getState<T = any>(key?: string): Observable<T> {\n        return defer(() =>\n            // check if key exists\n            key\n                ? this.state$.pipe(\n                      map((state) => get(state, key)),\n                      // filter((state) => state),\n                      distinctUntilChanged((x, y) => isEqual(x, y)),\n                  )\n                : this.state$,\n        );\n    }\n\n    public sidebarToggle(): void {\n        this.isSidebarOpen = !this.state.isSidebarOpen;\n    }\n\n    // Edit mode\n    public dimmerActiveToggle(): void {\n        const isActive = this.isDimmerActive;\n        this.setState({\n            ...this.state,\n            isDimmerActive: !isActive,\n        });\n        CssUtils.activateEditModeCssVars(!isActive, this.document);\n    }\n\n    public setDimmerActiveState(activeState: boolean): void {\n        this.setState({\n            ...this.state,\n            isDimmerActive: activeState,\n        });\n        CssUtils.activateEditModeCssVars(activeState, this.document);\n    }\n\n    // --------------\n    // public methods\n    // --------------\n    public fetchAppMetadata(metadataFilePath = 'assets/app-metadata.json'): void {\n        this.getJson(metadataFilePath).then((data) => {\n            this.setState({\n                ...this.state,\n                appMetadata: data,\n            });\n        });\n    }\n\n    public activateSidebar(): void {\n        this.setState({\n            ...this.state,\n            hasSidebar: true,\n        });\n\n        if (!this.state.isSidebarHidden) {\n            CssUtils.activateSidebarCssVars(this.document, this.platformId, this.state.hasSidebarCollapsedVariant);\n        }\n    }\n\n    public activateSideContainer(): void {\n        this.setState({\n            ...this.state,\n            hasSideContainer: true,\n        });\n\n        CssUtils.activateSideContainerCssVars(this.document, this.platformId);\n    }    \n\n    public deactivateSideContainer(): void {\n        this.setState({\n            ...this.state,\n            hasSideContainer: false,\n        });\n\n        CssUtils.deactivateSideContainerCssVars(this.document, this.platformId);\n    }    \n\n    public activateSidebarHeader(): void {\n        CssUtils.activateSidebarHeaderCssVars(this.document, this.platformId);\n    }\n\n    public activateSidebarFooter(): void {\n        CssUtils.activateSidebarFooterCssVars(this.document, this.platformId);\n    }\n\n    public activateHeader(): void {\n        this.setState({\n            ...this.state,\n            hasHeader: true,\n        });\n        CssUtils.activateHeaderCssVars(this.document, this.platformId);\n    }\n\n    public activateBreadcrumb(): void {\n        this.setState({\n            ...this.state,\n            hasBreadcrumb: true,\n        });\n        CssUtils.activateBreadcrumbCssVars(this.document, this.platformId);\n    }\n\n    public activateTopMessage(height: number): void {\n        this.setState({\n            ...this.state,\n            hasTopMessage: true,\n        });\n        CssUtils.activateTopMessageCssVars(height, this.document);\n    }\n\n    public activateToolbar(): void {\n        this.setState({\n            ...this.state,\n            hasToolbar: true,\n        });\n        CssUtils.activateToolbarCssVars(this.document, this.platformId);\n    }\n\n    public activateToolbarMegaMenu(): void {\n        this.setState({\n            ...this.state,\n            hasToolbarMegaMenu: true,\n        });\n        CssUtils.activateToolbarMegaMenuCssVars(this.document, this.platformId);\n    }\n\n    public activateToolbarMenu(): void {\n        this.setState({\n            ...this.state,\n            hasToolbarMenu: true,\n        });\n    }\n\n    /**\n     * Returns the current value of --eui-f-size-base CSS variable\n     */\n    public getBaseFontSize(): string {\n        return this.state.appBaseFontSize || CssUtils.getCssVarValue('--eui-f-size-base', this.document, this.platformId);\n    }\n\n    /**\n     * Updates the current value of --eui-f-size-base CSS variable and the UIState appBaseFontSize\n     */\n    public setBaseFontSize(newsize: string): void {\n        this.setState(\n            {\n                ...this.state,\n                appBaseFontSize: newsize,\n            },\n            false,\n        );\n        CssUtils.setCssVarValue('--eui-f-size-base', newsize, this.document);\n    }\n\n    // ---------------\n    // private getters\n    // ---------------\n    private getWrapperClasses(state: UIState, breakpoint: string): string {\n        const classes: string[] = [];\n\n        classes.push(breakpoint);\n\n        if (state.hasSidebar) {\n            if (state.isSidebarHidden) {\n                classes.push('sidebar--hidden');\n            }\n            if (state.isSidebarOpen) {\n                classes.push('sidebar--open');\n            } else {\n                classes.push('sidebar--close');\n            }\n        }\n        if (state.deviceInfo?.isFF) {\n            classes.push('ff');\n        }\n        if (state.deviceInfo?.isIE) {\n            classes.push('ie');\n        }\n        if (state.deviceInfo?.isChrome) {\n            classes.push('chrome');\n        }\n        if (state.hasFixedPosition) {\n            classes.push('fixed-position');\n        } else {\n            classes.push('relative-position');\n        }\n        return classes.join(' ');\n    }\n\n    private getBreakpoint(windowWidth: number): string {\n        let bkp = '';\n\n        if (this.state.breakpointValues.length === 0) {\n            this.setState({\n                ...this.state,\n                breakpointValues: CssUtils.getBreakpointValues(this.document, this.platformId),\n            });\n        }\n\n        this.state.breakpointValues.forEach((b, i) => {\n            if (i < this.state.breakpointValues.length) {\n                if (windowWidth >= b.value && windowWidth < this.state.breakpointValues[i+1]?.value) {\n                    bkp = b.bkp;\n                }\n            } else if(windowWidth >= b.value) {\n                bkp = b.bkp;\n            }\n        });\n\n        return bkp;\n    }\n\n    private getBreakpoints(bkp: string): object {\n        return {\n            isMobile: bkp === 'xs' || bkp === 'sm',\n            isTablet: bkp === 'md',\n            isLtLargeTablet: bkp === 'xs' || bkp === 'sm' || bkp === 'md' || bkp === 'lg',\n            isLtDesktop: bkp === 'xs' || bkp === 'sm' || bkp === 'md' || bkp === 'lg' || bkp === 'xl',\n            isDesktop: bkp === 'xxl',\n            isXL: bkp === 'xl',\n            isXXL: bkp === 'xxl',\n            isFHD: bkp === 'fhd',\n            is2K: bkp === '2k',\n            is4K: bkp === '4k',\n        };\n    }\n\n    private getJson(url: string): Promise<object> {\n        return firstValueFrom(this.http.get(url)).then(this.extractData).catch(this.handleError);\n    }\n\n    private extractData(res: Response): object {\n        const body = res;\n        return body || {};\n    }\n\n    private handleError<T extends Error>(error: T): Promise<T> {\n        console.error('An error occurred', error);\n        return Promise.reject(error.message || error);\n    }\n\n    private bindActiveLanguageToAppShellState(): void {\n        this.i18nService.getState((s) => s.activeLang).subscribe((activeLang) => {\n            if (activeLang !== this.state.activeLanguage) {\n                this.setState(\n                    {\n                        ...this.state,\n                        activeLanguage: activeLang,\n                    },\n                    false,\n                );\n            }\n        });\n    }\n}\n",
             "constructorObj": {
                 "name": "constructor",
                 "description": "",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "args": [],
-                "line": 233,
+                "line": 235,
                 "rawdescription": "\n"
             },
             "accessors": {
@@ -5411,7 +5423,7 @@
                         "name": "state$",
                         "type": "unknown",
                         "returnType": "Observable<UIState>",
-                        "line": 141,
+                        "line": 143,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -5422,7 +5434,7 @@
                         "name": "breakpoint$",
                         "type": "unknown",
                         "returnType": "Observable<string>",
-                        "line": 148,
+                        "line": 150,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -5433,7 +5445,7 @@
                         "name": "breakpoints$",
                         "type": "unknown",
                         "returnType": "Observable<any>",
-                        "line": 153,
+                        "line": 155,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -5444,7 +5456,7 @@
                         "name": "state",
                         "type": "unknown",
                         "returnType": "UIState",
-                        "line": 160,
+                        "line": 162,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -5467,7 +5479,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 167,
+                        "line": 169,
                         "rawdescription": "\n",
                         "description": "",
                         "jsdoctags": [
@@ -5488,7 +5500,7 @@
                         "name": "isSidebarOpen",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 174,
+                        "line": 176,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -5511,7 +5523,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 178,
+                        "line": 180,
                         "rawdescription": "\n",
                         "description": "",
                         "jsdoctags": [
@@ -5547,7 +5559,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 185,
+                        "line": 187,
                         "rawdescription": "\n",
                         "description": "",
                         "jsdoctags": [
@@ -5583,7 +5595,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 192,
+                        "line": 194,
                         "rawdescription": "\n",
                         "description": "",
                         "jsdoctags": [
@@ -5619,7 +5631,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 200,
+                        "line": 202,
                         "rawdescription": "\n",
                         "description": "",
                         "jsdoctags": [
@@ -5655,7 +5667,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 207,
+                        "line": 209,
                         "rawdescription": "\n",
                         "description": "",
                         "jsdoctags": [
@@ -5679,7 +5691,7 @@
                         "name": "hasHeader",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 214,
+                        "line": 216,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -5702,7 +5714,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 223,
+                        "line": 225,
                         "rawdescription": "\n",
                         "description": "",
                         "jsdoctags": [
@@ -5723,7 +5735,7 @@
                         "name": "isDimmerActive",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 219,
+                        "line": 221,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -22648,7 +22660,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "UIState",
-                "defaultValue": "{\n    appName: '',\n    appShortName: '',\n    appSubTitle: '',\n    appBaseFontSize: '',\n\n    isSidebarOpen: true,\n    isSidebarActive: false,\n    hasSidebar: false,\n    hasSideContainer: false,\n    hasHeader: false,\n    hasBreadcrumb: false,\n    hasHeaderLogo: false,\n    hasHeaderEnvironment: false,\n    hasToolbar: false,\n    hasToolbarMegaMenu: false,\n    hasToolbarMenu: false,\n    environmentValue: '',\n    isSidebarHidden: false,\n    isSidebarFocused: false,\n    hasSidebarCollapsedVariant: false,\n    hasTopMessage: false,\n    windowWidth: 0,\n    windowHeight: 0,\n    mainContentHeight: 0,\n    pageHeaderHeight: 0,\n    wrapperClasses: '',\n    breakpoint: '',\n    breakpoints: {\n        isMobile: false,\n        isTablet: false,\n        isLtLargeTablet: false,\n        isLtDesktop: false,\n        isDesktop: false,\n        isXL: false,\n        isXXL: false,\n        isFHD: false,\n        is2K: false,\n        is4K: false,\n    },\n    breakpointValues: [],\n    menuLinks: [],\n    sidebarLinks: [],\n    combinedLinks: [],\n    isBlockDocumentActive: false,\n    deviceInfo: null,\n    activeLanguage: 'en',\n    languages: EuiEuLanguages.getLanguages(),\n    appMetadata: null,\n    hasModalActive: false,\n    isDimmerActive: false,\n}"
+                "defaultValue": "{\n    appName: '',\n    appShortName: '',\n    appSubTitle: '',\n    appBaseFontSize: '',\n\n    isSidebarOpen: true,\n    isSidebarActive: false,\n    hasFixedPosition: true,\n    hasSidebar: false,\n    hasSideContainer: false,\n    hasHeader: false,\n    hasBreadcrumb: false,\n    hasHeaderLogo: false,\n    hasHeaderEnvironment: false,\n    hasToolbar: false,\n    hasToolbarMegaMenu: false,\n    hasToolbarMenu: false,\n    environmentValue: '',\n    isSidebarHidden: false,\n    isSidebarFocused: false,\n    hasSidebarCollapsedVariant: false,\n    hasTopMessage: false,\n    windowWidth: 0,\n    windowHeight: 0,\n    mainContentHeight: 0,\n    pageHeaderHeight: 0,\n    wrapperClasses: '',\n    breakpoint: '',\n    breakpoints: {\n        isMobile: false,\n        isTablet: false,\n        isLtLargeTablet: false,\n        isLtDesktop: false,\n        isDesktop: false,\n        isXL: false,\n        isXXL: false,\n        isFHD: false,\n        is2K: false,\n        is4K: false,\n    },\n    breakpointValues: [],\n    menuLinks: [],\n    sidebarLinks: [],\n    combinedLinks: [],\n    isBlockDocumentActive: false,\n    deviceInfo: null,\n    activeLanguage: 'en',\n    languages: EuiEuLanguages.getLanguages(),\n    appMetadata: null,\n    hasModalActive: false,\n    isDimmerActive: false,\n}"
             },
             {
                 "name": "initialState",
@@ -38626,7 +38638,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "UIState",
-                    "defaultValue": "{\n    appName: '',\n    appShortName: '',\n    appSubTitle: '',\n    appBaseFontSize: '',\n\n    isSidebarOpen: true,\n    isSidebarActive: false,\n    hasSidebar: false,\n    hasSideContainer: false,\n    hasHeader: false,\n    hasBreadcrumb: false,\n    hasHeaderLogo: false,\n    hasHeaderEnvironment: false,\n    hasToolbar: false,\n    hasToolbarMegaMenu: false,\n    hasToolbarMenu: false,\n    environmentValue: '',\n    isSidebarHidden: false,\n    isSidebarFocused: false,\n    hasSidebarCollapsedVariant: false,\n    hasTopMessage: false,\n    windowWidth: 0,\n    windowHeight: 0,\n    mainContentHeight: 0,\n    pageHeaderHeight: 0,\n    wrapperClasses: '',\n    breakpoint: '',\n    breakpoints: {\n        isMobile: false,\n        isTablet: false,\n        isLtLargeTablet: false,\n        isLtDesktop: false,\n        isDesktop: false,\n        isXL: false,\n        isXXL: false,\n        isFHD: false,\n        is2K: false,\n        is4K: false,\n    },\n    breakpointValues: [],\n    menuLinks: [],\n    sidebarLinks: [],\n    combinedLinks: [],\n    isBlockDocumentActive: false,\n    deviceInfo: null,\n    activeLanguage: 'en',\n    languages: EuiEuLanguages.getLanguages(),\n    appMetadata: null,\n    hasModalActive: false,\n    isDimmerActive: false,\n}"
+                    "defaultValue": "{\n    appName: '',\n    appShortName: '',\n    appSubTitle: '',\n    appBaseFontSize: '',\n\n    isSidebarOpen: true,\n    isSidebarActive: false,\n    hasFixedPosition: true,\n    hasSidebar: false,\n    hasSideContainer: false,\n    hasHeader: false,\n    hasBreadcrumb: false,\n    hasHeaderLogo: false,\n    hasHeaderEnvironment: false,\n    hasToolbar: false,\n    hasToolbarMegaMenu: false,\n    hasToolbarMenu: false,\n    environmentValue: '',\n    isSidebarHidden: false,\n    isSidebarFocused: false,\n    hasSidebarCollapsedVariant: false,\n    hasTopMessage: false,\n    windowWidth: 0,\n    windowHeight: 0,\n    mainContentHeight: 0,\n    pageHeaderHeight: 0,\n    wrapperClasses: '',\n    breakpoint: '',\n    breakpoints: {\n        isMobile: false,\n        isTablet: false,\n        isLtLargeTablet: false,\n        isLtDesktop: false,\n        isDesktop: false,\n        isXL: false,\n        isXXL: false,\n        isFHD: false,\n        is2K: false,\n        is4K: false,\n    },\n    breakpointValues: [],\n    menuLinks: [],\n    sidebarLinks: [],\n    combinedLinks: [],\n    isBlockDocumentActive: false,\n    deviceInfo: null,\n    activeLanguage: 'en',\n    languages: EuiEuLanguages.getLanguages(),\n    appMetadata: null,\n    hasModalActive: false,\n    isDimmerActive: false,\n}"
                 }
             ],
             "packages/core/src/lib/services/eui-theme.service.ts": [