@eui/core 22.0.0-alpha.37 → 22.0.0-alpha.39

package/docs/json/documentation.json

@@ -3574,12 +3574,12 @@
         },
         {
             "name": "UIState",
-            "id": "interface-UIState-4c61415cdeff5a7a75fdde5b834b027e0675b839b2b3fedc419445f7ab7a87cab30edea6bf5e4bfb88bdeefed11e734aeb6c3b741636e85a1c25065769b5c637",
+            "id": "interface-UIState-f1976eab5525bcef6ad2f5270074f44d49266217cac22255920e3a5be7eee4095f689d809e4fe56262d28a85ea12a19c67cf46a343134587fb48f0ce841014cf",
             "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    isShrinkHeaderActive?: 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    hasFixedPosition?: boolean;\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    isShrinkHeaderActive: 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    //eslint-disable-next-line @typescript-eslint/no-explicit-any\n    setState(nextState: UIState<any, any, any, any>, 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    hasSidebar?: boolean;\n    hasSideContainer?: boolean;\n    hasBreadcrumb?: boolean;\n    hasHeader?: boolean;\n    isShrinkHeaderActive?: 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    hasFixedPosition?: boolean;\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    isShrinkHeaderActive: 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    //eslint-disable-next-line @typescript-eslint/no-explicit-any\n    setState(nextState: UIState<any, any, any, any>, 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        if (!this.i18nService) {\n            return;\n        }\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",
@@ -5047,7 +5047,7 @@
         },
         {
             "name": "EuiAppShellService",
-            "id": "injectable-EuiAppShellService-4c61415cdeff5a7a75fdde5b834b027e0675b839b2b3fedc419445f7ab7a87cab30edea6bf5e4bfb88bdeefed11e734aeb6c3b741636e85a1c25065769b5c637",
+            "id": "injectable-EuiAppShellService-f1976eab5525bcef6ad2f5270074f44d49266217cac22255920e3a5be7eee4095f689d809e4fe56262d28a85ea12a19c67cf46a343134587fb48f0ce841014cf",
             "file": "packages/core/src/lib/services/eui-app-shell.service.ts",
             "coverageIgnore": false,
             "properties": [
@@ -5389,8 +5389,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 9111,
-                                "end": 9114,
+                                "pos": 9112,
+                                "end": 9115,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -5403,8 +5403,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 9105,
-                                "end": 9110,
+                                "pos": 9106,
+                                "end": 9111,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -5568,7 +5568,7 @@
             "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    isShrinkHeaderActive?: 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    hasFixedPosition?: boolean;\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    isShrinkHeaderActive: 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    //eslint-disable-next-line @typescript-eslint/no-explicit-any\n    setState(nextState: UIState<any, any, any, any>, 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    hasSidebar?: boolean;\n    hasSideContainer?: boolean;\n    hasBreadcrumb?: boolean;\n    hasHeader?: boolean;\n    isShrinkHeaderActive?: 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    hasFixedPosition?: boolean;\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    isShrinkHeaderActive: 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    //eslint-disable-next-line @typescript-eslint/no-explicit-any\n    setState(nextState: UIState<any, any, any, any>, 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        if (!this.i18nService) {\n            return;\n        }\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": "",

package/docs/llms.txt

@@ -1,6 +1,6 @@
 # eui documentation
 
-> Generated by compodoc 2.0.0 at 2026-10-01T14:06:59.093Z, llm-md export.
+> Generated by compodoc 2.0.0 at 2026-10-02T08:04:06.131Z, llm-md export.
 
 ## Modules
 
@@ -1138,7 +1138,7 @@ Properties:
 
 ### Schema
 
-File: `packages/core/schematics/migrate-eui-chip/index.ts`
+File: `packages/core/schematics/migrate-eui-button/index.ts`
 
 Properties:
 - `dryRun?: boolean`
@@ -1146,7 +1146,7 @@ Properties:
 
 ### Schema
 
-File: `packages/core/schematics/migrate-eui-button/index.ts`
+File: `packages/core/schematics/migrate-eui-chip/index.ts`
 
 Properties:
 - `dryRun?: boolean`
@@ -1162,7 +1162,7 @@ Properties:
 
 ### Schema
 
-File: `packages/core/schematics/migrate-eui-editor/index.ts`
+File: `packages/core/schematics/migrate-eui-discussion-thread/index.ts`
 
 Properties:
 - `dryRun?: boolean`
@@ -1170,7 +1170,7 @@ Properties:
 
 ### Schema
 
-File: `packages/core/schematics/migrate-eui-discussion-thread/index.ts`
+File: `packages/core/schematics/migrate-eui-editor/index.ts`
 
 Properties:
 - `dryRun?: boolean`
@@ -1734,16 +1734,16 @@ Properties:
   Defined in `packages/core/schematics/migrate-eui-alert/index.ts`
 - `migrateInlineTemplates(source: string): string`
   Defined in `packages/core/schematics/migrate-eui-avatar/index.ts`
-- `migrateInlineTemplates(source: string): string`
-  Defined in `packages/core/schematics/migrate-eui-chip/index.ts`
 - `migrateInlineTemplates(source: string): string`
   Defined in `packages/core/schematics/migrate-eui-button/index.ts`
 - `migrateInlineTemplates(source: string): string`
-  Defined in `packages/core/schematics/migrate-eui-chip-list/index.ts`
+  Defined in `packages/core/schematics/migrate-eui-chip/index.ts`
 - `migrateInlineTemplates(source: string): string`
-  Defined in `packages/core/schematics/migrate-eui-editor/index.ts`
+  Defined in `packages/core/schematics/migrate-eui-chip-list/index.ts`
 - `migrateInlineTemplates(source: string): string`
   Defined in `packages/core/schematics/migrate-eui-discussion-thread/index.ts`
+- `migrateInlineTemplates(source: string): string`
+  Defined in `packages/core/schematics/migrate-eui-editor/index.ts`
 - `migrateInlineTemplates(source: string): string`
   Defined in `packages/core/schematics/migrate-eui-fieldset/index.ts`
 - `migrateInlineTemplates(source: string): string`
@@ -1764,16 +1764,16 @@ Properties:
   Defined in `packages/core/schematics/migrate-eui-alert/index.ts`
 - `migrateTemplate(source: string): string`
   Defined in `packages/core/schematics/migrate-eui-avatar/index.ts`
-- `migrateTemplate(source: string): string`
-  Defined in `packages/core/schematics/migrate-eui-chip/index.ts`
 - `migrateTemplate(source: string): string`
   Defined in `packages/core/schematics/migrate-eui-button/index.ts`
 - `migrateTemplate(source: string): string`
-  Defined in `packages/core/schematics/migrate-eui-chip-list/index.ts`
+  Defined in `packages/core/schematics/migrate-eui-chip/index.ts`
 - `migrateTemplate(source: string): string`
-  Defined in `packages/core/schematics/migrate-eui-editor/index.ts`
+  Defined in `packages/core/schematics/migrate-eui-chip-list/index.ts`
 - `migrateTemplate(source: string): string`
   Defined in `packages/core/schematics/migrate-eui-discussion-thread/index.ts`
+- `migrateTemplate(source: string): string`
+  Defined in `packages/core/schematics/migrate-eui-editor/index.ts`
 - `migrateTemplate(source: string): string`
   Defined in `packages/core/schematics/migrate-eui-fieldset/index.ts`
 - `migrateTemplate(source: string): string`
@@ -1910,16 +1910,16 @@ Properties:
   Defined in `packages/core/schematics/migrate-eui-alert/index.ts`
 - `visitDir(dir: DirEntry, callback): void`
   Defined in `packages/core/schematics/migrate-eui-avatar/index.ts`
-- `visitDir(dir: DirEntry, callback): void`
-  Defined in `packages/core/schematics/migrate-eui-chip/index.ts`
 - `visitDir(dir: DirEntry, callback): void`
   Defined in `packages/core/schematics/migrate-eui-button/index.ts`
 - `visitDir(dir: DirEntry, callback): void`
-  Defined in `packages/core/schematics/migrate-eui-chip-list/index.ts`
+  Defined in `packages/core/schematics/migrate-eui-chip/index.ts`
 - `visitDir(dir: DirEntry, callback): void`
-  Defined in `packages/core/schematics/migrate-eui-editor/index.ts`
+  Defined in `packages/core/schematics/migrate-eui-chip-list/index.ts`
 - `visitDir(dir: DirEntry, callback): void`
   Defined in `packages/core/schematics/migrate-eui-discussion-thread/index.ts`
+- `visitDir(dir: DirEntry, callback): void`
+  Defined in `packages/core/schematics/migrate-eui-editor/index.ts`
 - `visitDir(dir: DirEntry, callback): void`
   Defined in `packages/core/schematics/migrate-eui-fieldset/index.ts`
 - `visitDir(dir: DirEntry, callback): void`
@@ -1950,16 +1950,16 @@ Properties:
   Defined in `packages/core/schematics/migrate-eui-alert/index.ts`
 - `visitNodes(nodes, removals): void`
   Defined in `packages/core/schematics/migrate-eui-avatar/index.ts`
-- `visitNodes(nodes, removals): void`
-  Defined in `packages/core/schematics/migrate-eui-chip/index.ts`
 - `visitNodes(nodes, edits): void`
   Defined in `packages/core/schematics/migrate-eui-button/index.ts`
+- `visitNodes(nodes, removals): void`
+  Defined in `packages/core/schematics/migrate-eui-chip/index.ts`
 - `visitNodes(nodes, source: string, edits): void`
   Defined in `packages/core/schematics/migrate-eui-chip-list/index.ts`
-- `visitNodes(nodes, edits): void`
-  Defined in `packages/core/schematics/migrate-eui-editor/index.ts`
 - `visitNodes(nodes, source: string, removals): void`
   Defined in `packages/core/schematics/migrate-eui-discussion-thread/index.ts`
+- `visitNodes(nodes, edits): void`
+  Defined in `packages/core/schematics/migrate-eui-editor/index.ts`
 - `visitNodes(nodes, edits): void`
   Defined in `packages/core/schematics/migrate-eui-fieldset/index.ts`
 - `visitNodes(nodes, edits): void`
@@ -2085,10 +2085,10 @@ Properties:
   Defined in `packages/core/schematics/migrate-eui-chip-list/index.ts`
 - `closestMatchingParent: unknown = (target: HTMLElement, className: string): HTMLElement | null => { let element = target; while (element && element.nodeType === Node.ELEMENT_NODE) { if (element.…`
   Defined in `packages/core/src/lib/helpers/dom-helpers.ts`
-- `COMPONENT_TAG: string = 'eui-editor'`
-  Defined in `packages/core/schematics/migrate-eui-editor/index.ts`
 - `COMPONENT_TAG: string = 'eui-discussion-thread'`
   Defined in `packages/core/schematics/migrate-eui-discussion-thread/index.ts`
+- `COMPONENT_TAG: string = 'eui-editor'`
+  Defined in `packages/core/schematics/migrate-eui-editor/index.ts`
 - `COMPONENT_TAG: string = 'eui-fieldset'`
   Defined in `packages/core/schematics/migrate-eui-fieldset/index.ts`
 - `COMPONENT_TAG: string = 'eui-icon-svg'`

package/docs/miscellaneous/functions.html

@@ -720,19 +720,19 @@
                             <a href="#migrateInlineTemplates" title="packages/core/schematics/migrate-eui-avatar/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>migrateInlineTemplates</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
                         </li>
                         <li>
-                            <a href="#migrateInlineTemplates" title="packages/core/schematics/migrate-eui-chip/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>migrateInlineTemplates</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
+                            <a href="#migrateInlineTemplates" title="packages/core/schematics/migrate-eui-button/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>migrateInlineTemplates</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
                         </li>
                         <li>
-                            <a href="#migrateInlineTemplates" title="packages/core/schematics/migrate-eui-button/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>migrateInlineTemplates</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
+                            <a href="#migrateInlineTemplates" title="packages/core/schematics/migrate-eui-chip/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>migrateInlineTemplates</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
                         </li>
                         <li>
                             <a href="#migrateInlineTemplates" title="packages/core/schematics/migrate-eui-chip-list/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>migrateInlineTemplates</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
                         </li>
                         <li>
-                            <a href="#migrateInlineTemplates" title="packages/core/schematics/migrate-eui-editor/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>migrateInlineTemplates</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
+                            <a href="#migrateInlineTemplates" title="packages/core/schematics/migrate-eui-discussion-thread/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>migrateInlineTemplates</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
                         </li>
                         <li>
-                            <a href="#migrateInlineTemplates" title="packages/core/schematics/migrate-eui-discussion-thread/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>migrateInlineTemplates</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
+                            <a href="#migrateInlineTemplates" title="packages/core/schematics/migrate-eui-editor/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>migrateInlineTemplates</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
                         </li>
                         <li>
                             <a href="#migrateInlineTemplates" title="packages/core/schematics/migrate-eui-fieldset/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>migrateInlineTemplates</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
@@ -765,19 +765,19 @@
                             <a href="#migrateTemplate" title="packages/core/schematics/migrate-eui-avatar/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>migrateTemplate</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
                         </li>
                         <li>
-                            <a href="#migrateTemplate" title="packages/core/schematics/migrate-eui-chip/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>migrateTemplate</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
+                            <a href="#migrateTemplate" title="packages/core/schematics/migrate-eui-button/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>migrateTemplate</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
                         </li>
                         <li>
-                            <a href="#migrateTemplate" title="packages/core/schematics/migrate-eui-button/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>migrateTemplate</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
+                            <a href="#migrateTemplate" title="packages/core/schematics/migrate-eui-chip/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>migrateTemplate</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
                         </li>
                         <li>
                             <a href="#migrateTemplate" title="packages/core/schematics/migrate-eui-chip-list/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>migrateTemplate</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
                         </li>
                         <li>
-                            <a href="#migrateTemplate" title="packages/core/schematics/migrate-eui-editor/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>migrateTemplate</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
+                            <a href="#migrateTemplate" title="packages/core/schematics/migrate-eui-discussion-thread/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>migrateTemplate</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
                         </li>
                         <li>
-                            <a href="#migrateTemplate" title="packages/core/schematics/migrate-eui-discussion-thread/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>migrateTemplate</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
+                            <a href="#migrateTemplate" title="packages/core/schematics/migrate-eui-editor/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>migrateTemplate</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
                         </li>
                         <li>
                             <a href="#migrateTemplate" title="packages/core/schematics/migrate-eui-fieldset/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>migrateTemplate</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
@@ -984,19 +984,19 @@
                             <a href="#visitDir" title="packages/core/schematics/migrate-eui-avatar/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>visitDir</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
                         </li>
                         <li>
-                            <a href="#visitDir" title="packages/core/schematics/migrate-eui-chip/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>visitDir</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
+                            <a href="#visitDir" title="packages/core/schematics/migrate-eui-button/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>visitDir</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
                         </li>
                         <li>
-                            <a href="#visitDir" title="packages/core/schematics/migrate-eui-button/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>visitDir</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
+                            <a href="#visitDir" title="packages/core/schematics/migrate-eui-chip/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>visitDir</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
                         </li>
                         <li>
                             <a href="#visitDir" title="packages/core/schematics/migrate-eui-chip-list/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>visitDir</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
                         </li>
                         <li>
-                            <a href="#visitDir" title="packages/core/schematics/migrate-eui-editor/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>visitDir</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
+                            <a href="#visitDir" title="packages/core/schematics/migrate-eui-discussion-thread/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>visitDir</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
                         </li>
                         <li>
-                            <a href="#visitDir" title="packages/core/schematics/migrate-eui-discussion-thread/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>visitDir</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
+                            <a href="#visitDir" title="packages/core/schematics/migrate-eui-editor/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>visitDir</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
                         </li>
                         <li>
                             <a href="#visitDir" title="packages/core/schematics/migrate-eui-fieldset/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>visitDir</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
@@ -1044,19 +1044,19 @@
                             <a href="#visitNodes" title="packages/core/schematics/migrate-eui-avatar/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>visitNodes</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
                         </li>
                         <li>
-                            <a href="#visitNodes" title="packages/core/schematics/migrate-eui-chip/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>visitNodes</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
+                            <a href="#visitNodes" title="packages/core/schematics/migrate-eui-button/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>visitNodes</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
                         </li>
                         <li>
-                            <a href="#visitNodes" title="packages/core/schematics/migrate-eui-button/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>visitNodes</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
+                            <a href="#visitNodes" title="packages/core/schematics/migrate-eui-chip/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>visitNodes</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
                         </li>
                         <li>
                             <a href="#visitNodes" title="packages/core/schematics/migrate-eui-chip-list/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>visitNodes</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
                         </li>
                         <li>
-                            <a href="#visitNodes" title="packages/core/schematics/migrate-eui-editor/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>visitNodes</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
+                            <a href="#visitNodes" title="packages/core/schematics/migrate-eui-discussion-thread/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>visitNodes</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
                         </li>
                         <li>
-                            <a href="#visitNodes" title="packages/core/schematics/migrate-eui-discussion-thread/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>visitNodes</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
+                            <a href="#visitNodes" title="packages/core/schematics/migrate-eui-editor/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>visitNodes</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
                         </li>
                         <li>
                             <a href="#visitNodes" title="packages/core/schematics/migrate-eui-fieldset/index.ts" class="reference-link "><span class="reference-badge reference-badge--function" aria-hidden="true">F</span><span class="reference-link-label"><b>visitNodes</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>

package/docs/miscellaneous/variables.html

@@ -183,10 +183,10 @@
                             <a href="#closestMatchingParent" title="packages/core/src/lib/helpers/dom-helpers.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>closestMatchingParent</b>&nbsp;&nbsp;&nbsp;(packages/.../dom-helpers.ts)</span></a>
                         </li>
                         <li>
-                            <a href="#COMPONENT_TAG" title="packages/core/schematics/migrate-eui-editor/index.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>COMPONENT_TAG</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
+                            <a href="#COMPONENT_TAG" title="packages/core/schematics/migrate-eui-discussion-thread/index.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>COMPONENT_TAG</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
                         </li>
                         <li>
-                            <a href="#COMPONENT_TAG" title="packages/core/schematics/migrate-eui-discussion-thread/index.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>COMPONENT_TAG</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
+                            <a href="#COMPONENT_TAG" title="packages/core/schematics/migrate-eui-editor/index.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>COMPONENT_TAG</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
                         </li>
                         <li>
                             <a href="#COMPONENT_TAG" title="packages/core/schematics/migrate-eui-fieldset/index.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>COMPONENT_TAG</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
@@ -2626,7 +2626,7 @@
         </tbody>
     </table>
 </section>
-    <h3>packages/core/schematics/migrate-eui-editor/index.ts</h3>
+    <h3>packages/core/schematics/migrate-eui-discussion-thread/index.ts</h3>
     <section data-compodoc="block-properties">
     <h3></h3>    <table class="table table-sm table-bordered">
         <tbody>
@@ -2647,21 +2647,24 @@
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Default value : </i><code>&#x27;eui-editor&#x27;</code>
+                        <i>Default value : </i><code>&#x27;eui-discussion-thread&#x27;</code>
                     </td>
                 </tr>
 
 
         </tbody>
     </table>
-    <table class="table table-sm table-bordered">
+</section>
+    <h3>packages/core/schematics/migrate-eui-editor/index.ts</h3>
+    <section data-compodoc="block-properties">
+    <h3></h3>    <table class="table table-sm table-bordered">
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="NEW_NAME"></a>
+                    <a name="COMPONENT_TAG"></a>
                     <span class="name">
-                        <span ><b>NEW_NAME</b></span>
-                        <a href="#NEW_NAME"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>COMPONENT_TAG</b></span>
+                        <a href="#COMPONENT_TAG"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
@@ -2673,7 +2676,7 @@
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Default value : </i><code>&#x27;contentChange&#x27;</code>
+                        <i>Default value : </i><code>&#x27;eui-editor&#x27;</code>
                     </td>
                 </tr>
 
@@ -2684,10 +2687,10 @@
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="OLD_NAME"></a>
+                    <a name="NEW_NAME"></a>
                     <span class="name">
-                        <span ><b>OLD_NAME</b></span>
-                        <a href="#OLD_NAME"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>NEW_NAME</b></span>
+                        <a href="#NEW_NAME"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
@@ -2699,24 +2702,21 @@
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Default value : </i><code>&#x27;onEditorChanged&#x27;</code>
+                        <i>Default value : </i><code>&#x27;contentChange&#x27;</code>
                     </td>
                 </tr>
 
 
         </tbody>
     </table>
-</section>
-    <h3>packages/core/schematics/migrate-eui-discussion-thread/index.ts</h3>
-    <section data-compodoc="block-properties">
-    <h3></h3>    <table class="table table-sm table-bordered">
+    <table class="table table-sm table-bordered">
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="COMPONENT_TAG"></a>
+                    <a name="OLD_NAME"></a>
                     <span class="name">
-                        <span ><b>COMPONENT_TAG</b></span>
-                        <a href="#COMPONENT_TAG"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>OLD_NAME</b></span>
+                        <a href="#OLD_NAME"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
@@ -2728,7 +2728,7 @@
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Default value : </i><code>&#x27;eui-discussion-thread&#x27;</code>
+                        <i>Default value : </i><code>&#x27;onEditorChanged&#x27;</code>
                     </td>
                 </tr>
 

package/docs/properties.html

@@ -128,7 +128,7 @@
     </ol>
     <ul class="properties-list">
         <li>
-            <b>Version</b> : 22.0.0-alpha.37</li>
+            <b>Version</b> : 22.0.0-alpha.39</li>
     </ul>