@foblex/m-render 2.7.0 → 2.7.3

package/fesm2022/foblex-m-render.mjs

@@ -1,18 +1,107 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, booleanAttribute, HostListener, Input, ViewChild, Output, ChangeDetectionStrategy, Component, input, output, viewChild, InjectionToken, inject, signal, Injectable, Renderer2, ElementRef, NgZone, Directive, ChangeDetectorRef, DestroyRef, computed, ViewContainerRef, Injector, forwardRef, effect, untracked } from '@angular/core';
-import { BrowserService, F_LOCAL_STORAGE } from '@foblex/platform';
-import { Subject, of, map, from, switchMap, startWith, filter, defer, Observable, EMPTY, debounceTime, fromEvent } from 'rxjs';
+import { inject, Injectable, InjectionToken, EventEmitter, booleanAttribute, HostListener, Input, ViewChild, Output, ChangeDetectionStrategy, Component, input, output, viewChild, signal, ElementRef, NgZone, Directive, Renderer2, ChangeDetectorRef, DestroyRef, computed, ViewContainerRef, Injector, forwardRef, effect, untracked } from '@angular/core';
+import { DOCUMENT, TitleCasePipe } from '@angular/common';
+import { of, map, Subject, startWith, filter, EMPTY, switchMap, debounceTime, fromEvent } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
-import { catchError, tap, filter as filter$1, shareReplay, take } from 'rxjs/operators';
+import { catchError, tap, filter as filter$1, take } from 'rxjs/operators';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Overlay, CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import { Router, RouterLink, NavigationEnd, ActivatedRoute, RouterOutlet } from '@angular/router';
-import { DOCUMENT, TitleCasePipe } from '@angular/common';
-import { createHighlighter } from 'shiki';
+import { LOCAL_STORAGE, WINDOW, DOCUMENT_ELEMENT, LOCATION, IS_BROWSER_PLATFORM, copyToClipboard } from '@foblex/mr-common';
+import { HighlightService, AVAILABLE_LANGUAGES } from '@foblex/mr-highlight';
 import MarkdownIt from 'markdown-it';
 import { DomSanitizer } from '@angular/platform-browser';
 import container from 'markdown-it-container';
 
+class GTagService {
+    _config = inject(GTAG_CONFIG);
+    _document = inject(DOCUMENT);
+    _initialized = false;
+    initialize() {
+        console.log('[GTag] Initializing with ID:', this._config.id);
+        if (this._initialized) {
+            return;
+        }
+        this._initialized = true;
+        const window = this._getGtagWindow();
+        if (!window) {
+            console.warn('[GTag] Initialization failed: No window available.');
+            this._initialized = false;
+            return;
+        }
+        window.dataLayer = window.dataLayer || [];
+        window.gtag = (...args) => {
+            window.dataLayer?.push(args);
+        };
+        this._loadGtagScript(this._config.id);
+        window.gtag('js', new Date());
+        window.gtag('config', this._config.id);
+    }
+    _getGtagWindow() {
+        const result = this._document.defaultView;
+        if (!result?.gtag) {
+            console.warn('[GTag] gtag function is not available. Ensure the script is loaded.');
+        }
+        return result;
+    }
+    _loadGtagScript(id) {
+        if (this._document.querySelector('#gtag-script'))
+            return;
+        const script = this._document.createElement('script');
+        script.id = 'gtag-script';
+        script.async = true;
+        script.src = `https://www.googletagmanager.com/gtag/js?id=${id}`;
+        this._document.head.appendChild(script);
+    }
+    updateConsent(granted) {
+        const window = this._getGtagWindow();
+        if (!window?.gtag) {
+            console.warn('[GTag] Cannot update consent: gtag not available.');
+            return;
+        }
+        const state = granted ? 'granted' : 'denied';
+        const consentOptions = {
+            ad_user_data: state,
+            ad_personalization: state,
+            ad_storage: state,
+            analytics_storage: state,
+        };
+        if (state === 'denied') {
+            window.gtag('consent', 'default', {
+                ...consentOptions,
+                wait_for_update: 500,
+            });
+        }
+        else {
+            window.gtag('consent', 'update', {
+                ...consentOptions,
+            });
+        }
+    }
+    trackEvent(action, params) {
+        this._getGtagWindow()?.gtag?.('event', action, params || {});
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: GTagService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: GTagService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: GTagService, decorators: [{
+            type: Injectable
+        }] });
+
+function provideGTag(config) {
+    return [
+        {
+            provide: GTAG_CONFIG,
+            useValue: config,
+        },
+        {
+            provide: GTagService,
+            useClass: GTagService,
+        },
+    ];
+}
+const GTAG_CONFIG = new InjectionToken('GTAG_CONFIG');
+
 let uniqueId$1 = 0;
 class FCheckboxComponent {
     changeDetectorRef;
@@ -58,10 +147,10 @@ class FCheckboxComponent {
             event.stopPropagation();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.14", type: FCheckboxComponent, isStandalone: true, selector: "f-checkbox", inputs: { id: "id", checked: ["checked", "checked", booleanAttribute] }, outputs: { change: "change" }, host: { listeners: { "click": "preventBubblingFromLabel($event)" }, properties: { "class.f-checkbox-checked": "checked" } }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }, { propertyName: "labelElement", first: true, predicate: ["label"], descendants: true }], ngImport: i0, template: "<input #input\n       [id]=\"id\"\n       type=\"checkbox\"\n       [checked]=\"checked\"\n       (click)=\"onInputClick()\"\n       (change)=\"onInteractionEvent($event)\"/>\n<div class=\"f-checkbox-container\" (click)=\"onTouchTargetClick()\">\n  <svg class=\"f-checkbox-checkmark\" focusable=\"false\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n    <path class=\"f-checkbox-checkmark-path\" fill=\"none\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"/>\n  </svg>\n</div>\n<label [for]=\"id\" #label>\n  <ng-content></ng-content>\n</label>\n", styles: [":host{position:relative;display:flex;align-items:center;font-weight:400;white-space:nowrap;font-size:14px;cursor:pointer;background-color:var(--checkbox-container-background);border-radius:var(--checkbox-border-radius);padding:0 8px;color:var(--checkbox-text);transition:color .25s,background-color .25s}:host input{position:absolute;inset:0;opacity:0;cursor:pointer}:host .f-checkbox-container{position:relative;display:flex;align-items:center;justify-content:center;width:var(--checkbox-size);height:var(--checkbox-size);margin-right:6px;border-radius:var(--checkbox-border-radius);background-color:var(--checkbox-background);padding:2px}:host .f-checkbox-container .f-checkbox-checkmark{position:absolute;top:calc(var(--checkbox-size) / 8);right:calc(var(--checkbox-size) / 8);bottom:calc(var(--checkbox-size) / 8);left:calc(var(--checkbox-size) / 8);opacity:0}:host .f-checkbox-container .f-checkbox-checkmark .f-checkbox-checkmark-path{stroke:currentColor;stroke-width:3}:host label{-webkit-user-select:none;user-select:none}:host.f-checkbox-checked .f-checkbox-container{background-color:var(--checkbox-checked-background)}:host.f-checkbox-checked .f-checkbox-container .f-checkbox-checkmark{color:var(--checkbox-checkmark-color);opacity:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.11", type: FCheckboxComponent, isStandalone: true, selector: "f-checkbox", inputs: { id: "id", checked: ["checked", "checked", booleanAttribute] }, outputs: { change: "change" }, host: { listeners: { "click": "preventBubblingFromLabel($event)" }, properties: { "class.f-checkbox-checked": "checked" } }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }, { propertyName: "labelElement", first: true, predicate: ["label"], descendants: true }], ngImport: i0, template: "<input #input\n       [id]=\"id\"\n       type=\"checkbox\"\n       [checked]=\"checked\"\n       (click)=\"onInputClick()\"\n       (change)=\"onInteractionEvent($event)\"/>\n<div class=\"f-checkbox-container\" (click)=\"onTouchTargetClick()\">\n  <svg class=\"f-checkbox-checkmark\" focusable=\"false\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n    <path class=\"f-checkbox-checkmark-path\" fill=\"none\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"/>\n  </svg>\n</div>\n<label [for]=\"id\" #label>\n  <ng-content></ng-content>\n</label>\n", styles: [":host{position:relative;display:flex;align-items:center;font-weight:400;white-space:nowrap;font-size:14px;cursor:pointer;background-color:var(--checkbox-container-background);border-radius:var(--checkbox-border-radius);padding:0 8px;color:var(--checkbox-text);transition:color .25s,background-color .25s}:host input{position:absolute;inset:0;opacity:0;cursor:pointer}:host .f-checkbox-container{position:relative;display:flex;align-items:center;justify-content:center;width:var(--checkbox-size);height:var(--checkbox-size);margin-right:6px;border-radius:var(--checkbox-border-radius);background-color:var(--checkbox-background);padding:2px}:host .f-checkbox-container .f-checkbox-checkmark{position:absolute;top:calc(var(--checkbox-size) / 8);right:calc(var(--checkbox-size) / 8);bottom:calc(var(--checkbox-size) / 8);left:calc(var(--checkbox-size) / 8);opacity:0}:host .f-checkbox-container .f-checkbox-checkmark .f-checkbox-checkmark-path{stroke:currentColor;stroke-width:3}:host label{-webkit-user-select:none;user-select:none}:host.f-checkbox-checked .f-checkbox-container{background-color:var(--checkbox-checked-background)}:host.f-checkbox-checked .f-checkbox-container .f-checkbox-checkmark{color:var(--checkbox-checkmark-color);opacity:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-checkbox', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.f-checkbox-checked]': 'checked',
@@ -110,10 +199,10 @@ class FRadioButtonComponent {
             event.stopPropagation();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FRadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.14", type: FRadioButtonComponent, isStandalone: true, selector: "f-radio-button", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { listeners: { "click": "preventBubblingFromLabel($event)" }, properties: { "class.f-radio-button-checked": "checked()" } }, viewQueries: [{ propertyName: "labelElement", first: true, predicate: ["label"], descendants: true, isSignal: true }], ngImport: i0, template: "<input [id]=\"id()\"\n       type=\"radio\"\n       [checked]=\"checked()\"\n       (click)=\"onInputClick()\"\n       (change)=\"onInteractionEvent($event)\"/>\n<div class=\"f-radio-button-container\" (click)=\"onTouchTargetClick()\">\n  <div class=\"f-radio-button-inner-circle\"></div>\n</div>\n<label [for]=\"id()\" #label>\n  <ng-content></ng-content>\n</label>\n", styles: [":host{position:relative;display:flex;align-items:center;font-weight:400;white-space:nowrap;font-size:14px;cursor:pointer;background-color:var(--radio-button-container-background);border-radius:var(--radio-button-container-border-radius);padding:0 8px;color:var(--radio-button-text);transition:color .25s,background-color .25s}:host input{position:absolute;inset:0;opacity:0;cursor:pointer}:host .f-radio-button-container{position:relative;display:flex;align-items:center;justify-content:center;width:var(--radio-button-size);height:var(--radio-button-size);margin-right:6px;border-radius:50%;border:1px solid var(--radio-button-border-color);background-color:var(--radio-button-background)}:host .f-radio-button-container .f-radio-button-inner-circle{position:absolute;top:calc(var(--radio-button-size) / 4);right:calc(var(--radio-button-size) / 4);bottom:calc(var(--radio-button-size) / 4);left:calc(var(--radio-button-size) / 4);border-radius:50%}:host label{-webkit-user-select:none;user-select:none}:host.f-radio-button-checked .f-radio-button-container{background-color:var(--radio-button-checked-background)}:host.f-radio-button-checked .f-radio-button-container .f-radio-button-inner-circle{background-color:var(--radio-button-inner-circle-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FRadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.11", type: FRadioButtonComponent, isStandalone: true, selector: "f-radio-button", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { listeners: { "click": "preventBubblingFromLabel($event)" }, properties: { "class.f-radio-button-checked": "checked()" } }, viewQueries: [{ propertyName: "labelElement", first: true, predicate: ["label"], descendants: true, isSignal: true }], ngImport: i0, template: "<input [id]=\"id()\"\n       type=\"radio\"\n       [checked]=\"checked()\"\n       (click)=\"onInputClick()\"\n       (change)=\"onInteractionEvent($event)\"/>\n<div class=\"f-radio-button-container\" (click)=\"onTouchTargetClick()\">\n  <div class=\"f-radio-button-inner-circle\"></div>\n</div>\n<label [for]=\"id()\" #label>\n  <ng-content></ng-content>\n</label>\n", styles: [":host{position:relative;display:flex;align-items:center;font-weight:400;white-space:nowrap;font-size:14px;cursor:pointer;background-color:var(--radio-button-container-background);border-radius:var(--radio-button-container-border-radius);padding:0 8px;color:var(--radio-button-text);transition:color .25s,background-color .25s}:host input{position:absolute;inset:0;opacity:0;cursor:pointer}:host .f-radio-button-container{position:relative;display:flex;align-items:center;justify-content:center;width:var(--radio-button-size);height:var(--radio-button-size);margin-right:6px;border-radius:50%;border:1px solid var(--radio-button-border-color);background-color:var(--radio-button-background)}:host .f-radio-button-container .f-radio-button-inner-circle{position:absolute;top:calc(var(--radio-button-size) / 4);right:calc(var(--radio-button-size) / 4);bottom:calc(var(--radio-button-size) / 4);left:calc(var(--radio-button-size) / 4);border-radius:50%}:host label{-webkit-user-select:none;user-select:none}:host.f-radio-button-checked .f-radio-button-container{background-color:var(--radio-button-checked-background)}:host.f-radio-button-checked .f-radio-button-container .f-radio-button-inner-circle{background-color:var(--radio-button-inner-circle-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FRadioButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FRadioButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-radio-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.f-radio-button-checked]': 'checked()',
@@ -127,95 +216,14 @@ const F_SOCIAL_LINKS_PROVIDER = new InjectionToken('F_SOCIAL_LINKS_PROVIDER');
 
 class FSocialLinksComponent {
     links = inject(F_SOCIAL_LINKS_PROVIDER).getSocialLinks();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FSocialLinksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FSocialLinksComponent, isStandalone: true, selector: "f-social-links", ngImport: i0, template: "@for (link of links; track link.link) {\n  <a href=\"{{ link.link }}\" class=\"header-link\">\n    <div class=\"f-icon {{ link.icon }}\"></div>\n  </a>\n}\n", styles: [":host{display:flex;justify-content:flex-start;align-items:center}.header-link{width:36px;height:36px;padding:7.5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FSocialLinksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: FSocialLinksComponent, isStandalone: true, selector: "f-social-links", ngImport: i0, template: "@for (link of links; track link.link) {\n  <a href=\"{{ link.link }}\" class=\"header-link\">\n    <div class=\"f-icon {{ link.icon }}\"></div>\n  </a>\n}\n", styles: [":host{display:flex;justify-content:flex-start;align-items:center}.header-link{width:36px;height:36px;padding:7.5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FSocialLinksComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FSocialLinksComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-social-links', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (link of links; track link.link) {\n  <a href=\"{{ link.link }}\" class=\"header-link\">\n    <div class=\"f-icon {{ link.icon }}\"></div>\n  </a>\n}\n", styles: [":host{display:flex;justify-content:flex-start;align-items:center}.header-link{width:36px;height:36px;padding:7.5px}\n"] }]
         }] });
 
-class PopoverService {
-    _message = signal(null);
-    get message() {
-        return this._message.asReadonly();
-    }
-    show(message, timeout = 2000) {
-        this._message.set(message);
-        setTimeout(() => this._message.set(null), timeout);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PopoverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PopoverService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PopoverService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-class ThemeService {
-    _browser = inject(BrowserService);
-    _theme = new Subject();
-    get theme$() {
-        return this._theme.asObservable();
-    }
-    updateTheme() {
-        this._theme.next();
-    }
-    getPreferredTheme() {
-        return this._browser.localStorage.getItem('preferred-theme')
-            || (this._browser.window.isMediaQuery('(prefers-color-scheme: dark)') ? 'dark' : 'light');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ThemeService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ThemeService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-class FThemeButtonComponent {
-    _renderer = inject(Renderer2);
-    _fState = inject(ThemeService);
-    _browser = inject(BrowserService);
-    get _localStorage() {
-        return this._browser.localStorage;
-    }
-    get _documentElement() {
-        return this._browser.document.documentElement;
-    }
-    ngOnInit() {
-        if (this._fState.getPreferredTheme() === 'dark' && !this._isDocumentContainsDarkTheme()) {
-            this._renderer.addClass(this._documentElement, 'dark');
-            this._localStorage.setItem('preferred-theme', 'dark');
-        }
-    }
-    _isDocumentContainsDarkTheme() {
-        return this._documentElement.classList.contains('dark');
-    }
-    _onClick() {
-        if (this._fState.getPreferredTheme() === 'light' && !this._isDocumentContainsDarkTheme()) {
-            this._renderer.addClass(this._documentElement, 'dark');
-            this._localStorage.setItem('preferred-theme', 'dark');
-        }
-        else {
-            this._renderer.removeClass(this._documentElement, 'dark');
-            this._localStorage.setItem('preferred-theme', 'light');
-        }
-        this._fState.updateTheme();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FThemeButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FThemeButtonComponent, isStandalone: true, selector: "button[f-theme-button]", host: { listeners: { "click": "_onClick()" } }, ngImport: i0, template: "<div class=\"f-icon-container\">\n  <div class=\"f-icon moon\"></div>\n  <div class=\"f-icon sun\"></div>\n</div>\n", styles: [":host{margin:0 8px;position:relative;border-radius:11px;display:block;width:44px;min-width:44px;height:22px;border:1px solid var(--theme-button-border-color);background-color:var(--theme-button-background);cursor:pointer}:host:hover{border-color:var(--theme-button-hovered-border-color)}.f-icon-container{position:absolute;top:1px;left:1px;width:18px;height:18px;padding:3px;border-radius:50%;background-color:var(--theme-button-icon-background);transition:transform .4s}.f-icon-container .f-icon{position:absolute;top:3px;left:3px;width:12px;height:12px}.f-icon-container .sun{display:block}.f-icon-container .moon{display:none}.dark :host .f-icon-container{transform:translate(22px)}.dark :host .f-icon-container .sun{display:none}.dark :host .f-icon-container .moon{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FThemeButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'button[f-theme-button]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"f-icon-container\">\n  <div class=\"f-icon moon\"></div>\n  <div class=\"f-icon sun\"></div>\n</div>\n", styles: [":host{margin:0 8px;position:relative;border-radius:11px;display:block;width:44px;min-width:44px;height:22px;border:1px solid var(--theme-button-border-color);background-color:var(--theme-button-background);cursor:pointer}:host:hover{border-color:var(--theme-button-hovered-border-color)}.f-icon-container{position:absolute;top:1px;left:1px;width:18px;height:18px;padding:3px;border-radius:50%;background-color:var(--theme-button-icon-background);transition:transform .4s}.f-icon-container .f-icon{position:absolute;top:3px;left:3px;width:12px;height:12px}.f-icon-container .sun{display:block}.f-icon-container .moon{display:none}.dark :host .f-icon-container{transform:translate(22px)}.dark :host .f-icon-container .sun{display:none}.dark :host .f-icon-container .moon{display:block}\n"] }]
-        }], propDecorators: { _onClick: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
-
 class NpmVersionComponent {
     value = input();
     _http = inject(HttpClient);
@@ -236,10 +244,10 @@ class NpmVersionComponent {
     _npmRegistry(name) {
         return `https://registry.npmjs.org/${encodeURIComponent(name)}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NpmVersionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: NpmVersionComponent, isStandalone: true, selector: "npm-version", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (version()) {\n  <span class=\"version\">v{{ version() }}</span>\n} @else {\n  <div class=\"spinner\"></div>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NpmVersionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: NpmVersionComponent, isStandalone: true, selector: "npm-version", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (version()) {\n  <span class=\"version\">v{{ version() }}</span>\n} @else {\n  <div class=\"spinner\"></div>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NpmVersionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NpmVersionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'npm-version', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (version()) {\n  <span class=\"version\">v{{ version() }}</span>\n} @else {\n  <div class=\"spinner\"></div>\n}\n" }]
         }] });
@@ -300,10 +308,10 @@ class DropdownMenuComponent {
     ngOnDestroy() {
         clearTimeout(this._hoverTimeout);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DropdownMenuComponent, isStandalone: true, selector: "dropdown-menu", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span class=\"label\" cdk-overlay-origin\n      (click)=\"toggle()\"\n      (mouseenter)=\"mouseEnter()\"\n      (mouseleave)=\"mouseLeave()\"\n      #overlayOrigin=\"cdkOverlayOrigin\">\n   <span class=\"text\">{{ label() }}</span>\n   <span class=\"f-icon chevron-down\"></span>\n</span>\n\n<ng-template\n  cdk-connected-overlay\n  [cdkConnectedOverlayLockPosition]=\"true\"\n  [cdkConnectedOverlayHasBackdrop]=\"false\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayDisableClose]=\"false\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayOffsetY]=\"-10\"\n  (backdropClick)=\"close()\"\n>\n  <div class=\"dropdown-panel\"\n       (mouseenter)=\"mouseEnter()\"\n       (mouseleave)=\"mouseLeave()\">\n    <div class=\"items\">\n      @for (link of links(); track link.link) {\n        <div class=\"menu-item\">\n          <a class=\"menu-link\" [href]=\"link.link\">{{ link.text }}</a>\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n", styles: [":host{overflow:hidden}.label{margin-left:8px;margin-right:8px;display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--primary-text);cursor:pointer;line-height:64px}.label .text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.label .f-icon{margin-left:4px;width:14px;min-width:14px;height:14px;color:inherit}.label:hover{color:var(--secondary-text)}.dropdown-panel{border-radius:6px;padding:12px;min-width:128px;border:1px solid var(--divider-color);background-color:var(--background-color);box-shadow:var(--shadow-3);max-height:calc(100vh - var(--header-height));overflow-y:auto}.menu-link{display:block;border-radius:4px;padding:0 12px;line-height:32px;font-size:14px;font-weight:500;color:var(--primary-text);white-space:nowrap;cursor:pointer}.menu-link:hover{color:var(--primary-1);background-color:var(--gray-soft)}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: DropdownMenuComponent, isStandalone: true, selector: "dropdown-menu", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span class=\"label\" cdk-overlay-origin\n      (click)=\"toggle()\"\n      (mouseenter)=\"mouseEnter()\"\n      (mouseleave)=\"mouseLeave()\"\n      #overlayOrigin=\"cdkOverlayOrigin\">\n   <span class=\"text\">{{ label() }}</span>\n   <span class=\"f-icon chevron-down\"></span>\n</span>\n\n<ng-template\n  cdk-connected-overlay\n  [cdkConnectedOverlayLockPosition]=\"true\"\n  [cdkConnectedOverlayHasBackdrop]=\"false\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayDisableClose]=\"false\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayOffsetY]=\"-10\"\n  (backdropClick)=\"close()\"\n>\n  <div class=\"dropdown-panel\"\n       (mouseenter)=\"mouseEnter()\"\n       (mouseleave)=\"mouseLeave()\">\n    <div class=\"items\">\n      @for (link of links(); track link.link) {\n        <div class=\"menu-item\">\n          <a class=\"menu-link\" [href]=\"link.link\">{{ link.text }}</a>\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n", styles: [":host{overflow:hidden}.label{margin-left:8px;margin-right:8px;display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--primary-text);cursor:pointer;line-height:64px}.label .text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.label .f-icon{margin-left:4px;width:14px;min-width:14px;height:14px;color:inherit}.label:hover{color:var(--secondary-text)}.dropdown-panel{border-radius:6px;padding:12px;min-width:128px;border:1px solid var(--divider-color);background-color:var(--background-color);box-shadow:var(--shadow-3);max-height:calc(100vh - var(--header-height));overflow-y:auto}.menu-link{display:block;border-radius:4px;padding:0 12px;line-height:32px;font-size:14px;font-weight:500;color:var(--primary-text);white-space:nowrap;cursor:pointer}.menu-link:hover{color:var(--primary-1);background-color:var(--gray-soft)}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DropdownMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DropdownMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dropdown-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CdkConnectedOverlay,
@@ -366,10 +374,10 @@ class InlineMenuComponent {
     overflowed(event) {
         this.isOverflowed.set(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InlineMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: InlineMenuComponent, isStandalone: true, selector: "inline-menu", ngImport: i0, template: "<!--<div class=\"inline-menu-wrapper\" [element]=\"element\" overflowObserver (overflowed)=\"overflowed($event)\">-->\n<!--  <div #element class=\"inline-menu-container\" [class.hidden]=\"isOverflowed()\">-->\n<!--    @for (item of navigation; track item.link) {-->\n<!--      <a class=\"inline-menu-link\" [routerLink]=\"item.link\" [class.active]=\"item.isActive\">-->\n<!--        <span>{{ item.text }}</span>-->\n<!--      </a>-->\n<!--    }-->\n<!--  </div>-->\n\n<!--  @if (isOverflowed()) {-->\n\n<!--  }-->\n<!--  <dropdown-menu label=\"\"/>-->\n<!--</div>-->\n\n\n\n<div class=\"inline-menu-wrapper\" >\n  <div #element class=\"inline-menu-container\" [class.hidden]=\"isOverflowed()\">\n    @for (item of navigation; track item.link) {\n      <a class=\"inline-menu-link\" [routerLink]=\"item.link\" [class.active]=\"item.isActive\">\n        <span>{{ item.text }}</span>\n      </a>\n    }\n  </div>\n</div>\n\n", styles: [":host{flex:1;max-width:100%}.inline-menu-wrapper{display:flex;justify-content:end;width:100%}.inline-menu-container{display:flex;justify-content:flex-start;align-items:center;overflow:hidden}.inline-menu-container.hidden{visibility:hidden;position:absolute}.inline-menu-link{padding:0 12px;line-height:var(--header-height);font-size:14px;font-weight:500;color:var(--primary-text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inline-menu-link:hover,.inline-menu-link.active{color:var(--primary-1)}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: InlineMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: InlineMenuComponent, isStandalone: true, selector: "inline-menu", ngImport: i0, template: "<!--<div class=\"inline-menu-wrapper\" [element]=\"element\" overflowObserver (overflowed)=\"overflowed($event)\">-->\n<!--  <div #element class=\"inline-menu-container\" [class.hidden]=\"isOverflowed()\">-->\n<!--    @for (item of navigation; track item.link) {-->\n<!--      <a class=\"inline-menu-link\" [routerLink]=\"item.link\" [class.active]=\"item.isActive\">-->\n<!--        <span>{{ item.text }}</span>-->\n<!--      </a>-->\n<!--    }-->\n<!--  </div>-->\n\n<!--  @if (isOverflowed()) {-->\n\n<!--  }-->\n<!--  <dropdown-menu label=\"\"/>-->\n<!--</div>-->\n\n\n\n<div class=\"inline-menu-wrapper\" >\n  <div #element class=\"inline-menu-container\" [class.hidden]=\"isOverflowed()\">\n    @for (item of navigation; track item.link) {\n      <a class=\"inline-menu-link\" [routerLink]=\"item.link\" [class.active]=\"item.isActive\">\n        <span>{{ item.text }}</span>\n      </a>\n    }\n  </div>\n</div>\n\n", styles: [":host{flex:1;max-width:100%}.inline-menu-wrapper{display:flex;justify-content:end;width:100%}.inline-menu-container{display:flex;justify-content:flex-start;align-items:center;overflow:hidden}.inline-menu-container.hidden{visibility:hidden;position:absolute}.inline-menu-link{padding:0 12px;line-height:var(--header-height);font-size:14px;font-weight:500;color:var(--primary-text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inline-menu-link:hover,.inline-menu-link.active{color:var(--primary-1)}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InlineMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: InlineMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'inline-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         RouterLink,
@@ -409,10 +417,10 @@ class OverflowObserverDirective {
     ngOnDestroy() {
         this._resizeObserver.disconnect();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OverflowObserverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.14", type: OverflowObserverDirective, isStandalone: true, selector: "[overflowObserver]", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { overflowed: "overflowed" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: OverflowObserverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: OverflowObserverDirective, isStandalone: true, selector: "[overflowObserver]", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { overflowed: "overflowed" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OverflowObserverDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: OverflowObserverDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[overflowObserver]',
@@ -420,121 +428,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }] });
 
-function copyToClipboard(value) {
-    const blob = new Blob([value], { type: 'text/plain' });
-    const data = [new ClipboardItem({ [blob.type]: blob })];
-    // @ts-ignore
-    return from(window?.navigator.permissions.query({ name: 'clipboard-write' })).pipe(map((permission) => permission.state !== 'denied'), switchMap((isGranted) => {
-        if (isGranted) {
-            return from(navigator.clipboard.write(data));
-        }
-        return of(undefined);
-    }));
+class PopoverService {
+    _message = signal(null);
+    get message() {
+        return this._message.asReadonly();
+    }
+    show(message, timeout = 2000) {
+        this._message.set(message);
+        setTimeout(() => this._message.set(null), timeout);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: PopoverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: PopoverService, providedIn: 'root' });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: PopoverService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
 
-const F_ACCEPT_COOKIES_KEY = 'm-render-accepts-cookies';
-
-const setCookieConsent = (state) => {
-    try {
-        if (window.gtag) {
-            const consentOptions = {
-                ad_user_data: state,
-                ad_personalization: state,
-                ad_storage: state,
-                analytics_storage: state,
-            };
-            if (state === 'denied') {
-                window.gtag('consent', 'default', {
-                    ...consentOptions,
-                    wait_for_update: 500,
-                });
-            }
-            else if (state === 'granted') {
-                window.gtag('consent', 'update', {
-                    ...consentOptions,
-                });
-            }
-        }
+class ThemeService {
+    _localStorage = inject(LOCAL_STORAGE, { optional: true });
+    _window = inject(WINDOW, { optional: true });
+    _theme = new Subject();
+    _docElement = inject(DOCUMENT_ELEMENT);
+    get theme$() {
+        return this._theme.asObservable();
     }
-    catch {
-        if (state === 'denied') {
-            console.error('Unable to set default cookie consent.');
-        }
-        else if (state === 'granted') {
-            console.error('Unable to grant cookie consent.');
+    initialize() {
+        if (this.getPreferredTheme() === 'dark' && !this._isDocumentContainsDarkTheme()) {
+            this._docElement.classList.add('dark');
+            this._localStorage?.setItem('preferred-theme', 'dark');
         }
     }
-};
-
-class FCookiePopupComponent {
-    _storage = inject(F_LOCAL_STORAGE);
-    hasAccepted = signal(false);
-    constructor() {
-        try {
-            this.hasAccepted.set(this._storage?.getItem(F_ACCEPT_COOKIES_KEY) === 'true');
-        }
-        catch {
-            this.hasAccepted.set(false);
-        }
+    updateTheme() {
+        this._theme.next();
     }
-    accept() {
-        try {
-            this._storage?.setItem(F_ACCEPT_COOKIES_KEY, 'true');
-        }
-        catch { /* empty */ }
-        this.hasAccepted.set(true);
-        setCookieConsent('granted');
+    getPreferredTheme() {
+        return this._getItem('preferred-theme')
+            || (this._matchMedia('(prefers-color-scheme: dark)')?.matches ? 'dark' : 'light');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FCookiePopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FCookiePopupComponent, isStandalone: true, selector: "f-cookie-popup", ngImport: i0, template: "@if (!hasAccepted()) {\n  <div class=\"docs-cookies-popup docs-invert-mode\">\n    <p>This site uses cookies from Google to deliver its services and to analyze traffic.</p>\n\n    <div>\n      <a href=\"https://policies.google.com/technologies/cookies\" target=\"_blank\" rel=\"noopener\">\n        <button class=\"f-button\" [attr.text]=\"'Learn more'\" aria-label=\"Learn More\">\n          Learn more\n        </button>\n      </a>\n      <button\n        (click)=\"accept()\"\n        class=\"f-button\"\n        [attr.text]=\"'Ok, Got it'\"\n        aria-label=\"Ok, Got it\">\n        Ok, Got it\n      </button>\n    </div>\n  </div>\n}\n", styles: [":host{position:fixed;bottom:16px;right:16px;z-index:99999;opacity:0;visibility:hidden;animation:1s linear forwards .5s fadeIn}.docs-cookies-popup{padding:1rem;background-color:var(--background-color);border:1px solid var(--divider-color);color:var(--primary-text);border-radius:var(--border-radius);font-size:14px;max-width:310px;transition:background-color .3s ease,border-color .3s ease,color .3s ease;box-shadow:var(--shadow-3)}.docs-cookies-popup>div{display:flex;gap:8px;align-items:center;width:100%;margin-block-start:1rem}.f-button{outline:none;border:none;height:unset;line-height:26px;font-size:14px;font-weight:500;border-radius:var(--border-radius)}@keyframes fadeIn{to{opacity:100%;visibility:visible}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FCookiePopupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'f-cookie-popup', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!hasAccepted()) {\n  <div class=\"docs-cookies-popup docs-invert-mode\">\n    <p>This site uses cookies from Google to deliver its services and to analyze traffic.</p>\n\n    <div>\n      <a href=\"https://policies.google.com/technologies/cookies\" target=\"_blank\" rel=\"noopener\">\n        <button class=\"f-button\" [attr.text]=\"'Learn more'\" aria-label=\"Learn More\">\n          Learn more\n        </button>\n      </a>\n      <button\n        (click)=\"accept()\"\n        class=\"f-button\"\n        [attr.text]=\"'Ok, Got it'\"\n        aria-label=\"Ok, Got it\">\n        Ok, Got it\n      </button>\n    </div>\n  </div>\n}\n", styles: [":host{position:fixed;bottom:16px;right:16px;z-index:99999;opacity:0;visibility:hidden;animation:1s linear forwards .5s fadeIn}.docs-cookies-popup{padding:1rem;background-color:var(--background-color);border:1px solid var(--divider-color);color:var(--primary-text);border-radius:var(--border-radius);font-size:14px;max-width:310px;transition:background-color .3s ease,border-color .3s ease,color .3s ease;box-shadow:var(--shadow-3)}.docs-cookies-popup>div{display:flex;gap:8px;align-items:center;width:100%;margin-block-start:1rem}.f-button{outline:none;border:none;height:unset;line-height:26px;font-size:14px;font-weight:500;border-radius:var(--border-radius)}@keyframes fadeIn{to{opacity:100%;visibility:visible}}\n"] }]
-        }], ctorParameters: () => [] });
-
-class FAnalyticsService {
-    fLocalStorage = inject(F_LOCAL_STORAGE);
-    document = inject(DOCUMENT);
-    initialize(analyticsId) {
-        this._installGtag(analyticsId);
+    _getItem(key) {
+        return this._localStorage?.getItem?.(key) || null;
     }
-    _installGtag(analyticsId) {
-        const window = this.document.defaultView;
-        window.dataLayer = window.dataLayer || [];
-        window.gtag = function () {
-            window.dataLayer?.push(arguments);
-        };
-        if (this.fLocalStorage) {
-            if (this.fLocalStorage.getItem(F_ACCEPT_COOKIES_KEY) === 'true') {
-                setCookieConsent('granted');
-            }
-            else {
-                setCookieConsent('denied');
-            }
-        }
-        else {
-            setCookieConsent('denied');
-        }
-        window.gtag('js', new Date());
-        window.gtag('config', analyticsId);
-        if (this.document.querySelector('#gtag-script') === null) {
-            this.document.head.appendChild(this._getGtmScript(analyticsId));
-        }
+    _matchMedia(query) {
+        return this._window?.matchMedia?.(query) || { matches: false };
     }
-    _getGtmScript(analyticsId) {
-        const gtmScript = this.document.createElement('script');
-        gtmScript.async = true;
-        gtmScript.src = `https://www.googletagmanager.com/gtag/js?id=${analyticsId}`;
-        gtmScript.id = 'gtag-script';
-        return gtmScript;
+    _isDocumentContainsDarkTheme() {
+        return this._docElement.classList.contains('dark');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FAnalyticsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FAnalyticsService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ThemeService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FAnalyticsService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ThemeService, decorators: [{
+            type: Injectable
         }] });
 
 class FHeadTagService {
@@ -572,10 +519,10 @@ class FHeadTagService {
         head.appendChild(element);
         return element;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FHeadTagService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FHeadTagService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FHeadTagService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FHeadTagService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FHeadTagService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FHeadTagService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -590,7 +537,7 @@ class HandleNavigationLinksHandler {
                 this._navigateInternalLink(href, request.router);
             }
             else {
-                this._navigateExternalLink(href, request.browser);
+                window.open(href, '_blank');
             }
         }
     }
@@ -612,18 +559,15 @@ class HandleNavigationLinksHandler {
         }
         router.navigate([href]).then();
     }
-    _navigateExternalLink(href, browser) {
-        browser.window.open(href, '_blank');
-    }
 }
 
 class HandleNavigationLinksRequest {
     event;
-    browser;
+    window;
     router;
-    constructor(event, browser, router) {
+    constructor(event, window, router) {
         this.event = event;
-        this.browser = browser;
+        this.window = window;
         this.router = router;
     }
 }
@@ -702,9 +646,9 @@ function provideTocData(toC) {
 }
 
 class FMetaService {
+    _location = inject(LOCATION);
     _router = inject(Router);
     _headTag = inject(FHeadTagService);
-    _browser = inject(BrowserService);
     _configuration = inject(DOCUMENTATION_CONFIGURATION);
     changes() {
         return this._router.events.pipe(startWith(new NavigationEnd(1, '', '')), filter(event => event instanceof NavigationEnd), map(() => void 0), tap(() => {
@@ -718,7 +662,7 @@ class FMetaService {
             const item = this._findDocItemByUrl(this._findDocGroupByUrl(this._router.url), this._router.url);
             if (item) {
                 data.title = `${item.text} - ${defaultData.app_name}`;
-                data.url = this._browser.window.location.href;
+                data.url = this._location.href;
                 data.description = item.description || defaultData.description;
                 data.image = item.image || defaultData.image;
                 data.image_width = item.image_width || defaultData.image_width;
@@ -726,14 +670,14 @@ class FMetaService {
                 data.image_type = item.image_type || defaultData.image_type;
             }
             if (!data.url) {
-                data.url = this._browser.window.location.origin + this._router.url;
+                data.url = this._location.origin + this._router.url;
             }
             if (!data.image.startsWith('http') && !data.image.startsWith('www')) {
                 if (data.image.startsWith('.')) {
-                    data.image = this._browser.window.location.origin + data.image.slice(1);
+                    data.image = this._location.origin + data.image.slice(1);
                 }
                 else {
-                    data.image = this._browser.window.location.origin + data.image;
+                    data.image = this._location.origin + data.image;
                 }
             }
             if (!data.url.endsWith('/')) {
@@ -770,10 +714,10 @@ class FMetaService {
         this._headTag.updateTag({ property: 'og:image:width', content: item.image_width.toString() });
         this._headTag.updateTag({ property: 'og:image:height', content: item.image_height.toString() });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FMetaService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FMetaService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FMetaService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FMetaService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FMetaService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FMetaService, decorators: [{
             type: Injectable
         }] });
 
@@ -786,10 +730,10 @@ class HamburgerButtonComponent {
     _onShowNavigation() {
         this._parent?.onToggleNavigation(true);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HamburgerButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: HamburgerButtonComponent, isStandalone: true, selector: "button[hamburger-button]", host: { listeners: { "click": "_onShowNavigation()" } }, ngImport: i0, template: "<span class=\"f-icon hamburger\"></span>\n\n", styles: [":host{background-color:transparent;border:0;display:flex;padding:0;margin-right:16px;color:var(--secondary-text);cursor:pointer}@media (min-width: 960px){:host{display:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HamburgerButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: HamburgerButtonComponent, isStandalone: true, selector: "button[hamburger-button]", host: { listeners: { "click": "_onShowNavigation()" } }, ngImport: i0, template: "<span class=\"f-icon hamburger\"></span>\n\n", styles: [":host{background-color:transparent;border:0;display:flex;padding:0;margin-right:16px;color:var(--secondary-text);cursor:pointer}@media (min-width: 960px){:host{display:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HamburgerButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HamburgerButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'button[hamburger-button]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '(click)': '_onShowNavigation()',
@@ -855,26 +799,71 @@ class DocumentationStore {
     getHeader() {
         return this._configuration.header;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentationStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentationStore });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DocumentationStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DocumentationStore });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentationStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DocumentationStore, decorators: [{
             type: Injectable
         }] });
 
+class ThemeButtonComponent {
+    _renderer = inject(Renderer2);
+    _themeService = inject(ThemeService, { optional: true });
+    _localStorage = inject(LOCAL_STORAGE);
+    _documentElement = inject(DOCUMENT_ELEMENT);
+    _isBrowser = inject(IS_BROWSER_PLATFORM);
+    ngOnInit() {
+        if (!this._themeService && this._isBrowser) {
+            throw new Error('Theme is not provided. Please provide it using provideTheme() provider in your application config.');
+        }
+    }
+    _isDocumentContainsDarkTheme() {
+        return this._documentElement.classList.contains('dark');
+    }
+    _onClick() {
+        if (this._themeService?.getPreferredTheme() === 'light' && !this._isDocumentContainsDarkTheme()) {
+            this._renderer.addClass(this._documentElement, 'dark');
+            this._localStorage.setItem('preferred-theme', 'dark');
+        }
+        else {
+            this._renderer.removeClass(this._documentElement, 'dark');
+            this._localStorage.setItem('preferred-theme', 'light');
+        }
+        this._themeService?.updateTheme();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ThemeButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: ThemeButtonComponent, isStandalone: true, selector: "button[theme-button]", host: { listeners: { "click": "_onClick()" } }, ngImport: i0, template: "<div class=\"f-icon-container\">\n  <div class=\"f-icon moon\"></div>\n  <div class=\"f-icon sun\"></div>\n</div>\n", styles: [":host{margin:0 8px;position:relative;border-radius:11px;display:block;width:44px;min-width:44px;height:22px;border:1px solid var(--theme-button-border-color);background-color:var(--theme-button-background);cursor:pointer}:host:hover{border-color:var(--theme-button-hovered-border-color)}.f-icon-container{position:absolute;top:1px;left:1px;width:18px;height:18px;padding:3px;border-radius:50%;background-color:var(--theme-button-icon-background);transition:transform .4s}.f-icon-container .f-icon{position:absolute;top:3px;left:3px;width:12px;height:12px}.f-icon-container .sun{display:block}.f-icon-container .moon{display:none}.dark :host .f-icon-container{transform:translate(22px)}.dark :host .f-icon-container .sun{display:none}.dark :host .f-icon-container .moon{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ThemeButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[theme-button]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"f-icon-container\">\n  <div class=\"f-icon moon\"></div>\n  <div class=\"f-icon sun\"></div>\n</div>\n", styles: [":host{margin:0 8px;position:relative;border-radius:11px;display:block;width:44px;min-width:44px;height:22px;border:1px solid var(--theme-button-border-color);background-color:var(--theme-button-background);cursor:pointer}:host:hover{border-color:var(--theme-button-hovered-border-color)}.f-icon-container{position:absolute;top:1px;left:1px;width:18px;height:18px;padding:3px;border-radius:50%;background-color:var(--theme-button-icon-background);transition:transform .4s}.f-icon-container .f-icon{position:absolute;top:3px;left:3px;width:12px;height:12px}.f-icon-container .sun{display:block}.f-icon-container .moon{display:none}.dark :host .f-icon-container{transform:translate(22px)}.dark :host .f-icon-container .sun{display:none}.dark :host .f-icon-container .moon{display:block}\n"] }]
+        }], propDecorators: { _onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+function provideTheme() {
+    return [
+        {
+            provide: ThemeService,
+            useClass: ThemeService,
+        },
+    ];
+}
+
 class HeaderComponent {
     title = inject(DocumentationStore).getTitle();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: HeaderComponent, isStandalone: true, selector: "f-header", ngImport: i0, template: "<button hamburger-button></button>\n<div class=\"title text-ellipsis\">{{ title }}</div>\n<inline-menu/>\n<!--<npm-version/>-->\n<div class=\"divider\"></div>\n<button f-theme-button></button>\n<div class=\"divider\"></div>\n<f-social-links/>\n\n", styles: [":host{position:sticky;width:100%;top:0;display:flex;justify-content:flex-start;align-items:center;padding:20px 32px;font-weight:600;color:var(--primary-text);height:calc(var(--header-height) + 1px);background-color:var(--background-color);border-bottom:1px solid var(--divider-color);z-index:var(--z-index-header)}@media (min-width: 1280px){:host{padding-right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 3);padding-left:max(var(--page-padding),(100vw - var(--layout-max-width)) / 4)}}.title{display:none;justify-content:flex-start;align-items:center;padding:20px 0;font-weight:600;color:var(--primary-text);height:var(--header-height)}@media (min-width: 460px){.title{display:block}}@media (min-width: 960px){.title{display:none}}.divider{margin-right:8px;margin-left:8px;width:1px;height:24px;background-color:var(--divider-color);content:\"\"}\n"], dependencies: [{ kind: "component", type: HamburgerButtonComponent, selector: "button[hamburger-button]" }, { kind: "component", type: FSocialLinksComponent, selector: "f-social-links" }, { kind: "component", type: FThemeButtonComponent, selector: "button[f-theme-button]" }, { kind: "component", type: InlineMenuComponent, selector: "inline-menu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: HeaderComponent, isStandalone: true, selector: "f-header", ngImport: i0, template: "<button hamburger-button></button>\n<div class=\"title text-ellipsis\">{{ title }}</div>\n<inline-menu/>\n<!--<npm-version/>-->\n<div class=\"divider\"></div>\n<button theme-button></button>\n<div class=\"divider\"></div>\n<f-social-links/>\n\n", styles: [":host{position:sticky;width:100%;top:0;display:flex;justify-content:flex-start;align-items:center;padding:20px 32px;font-weight:600;color:var(--primary-text);height:calc(var(--header-height) + 1px);background-color:var(--background-color);border-bottom:1px solid var(--divider-color);z-index:var(--z-index-header)}@media (min-width: 1280px){:host{padding-right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 3);padding-left:max(var(--page-padding),(100vw - var(--layout-max-width)) / 4)}}.title{display:none;justify-content:flex-start;align-items:center;padding:20px 0;font-weight:600;color:var(--primary-text);height:var(--header-height)}@media (min-width: 460px){.title{display:block}}@media (min-width: 960px){.title{display:none}}.divider{margin-right:8px;margin-left:8px;width:1px;height:24px;background-color:var(--divider-color);content:\"\"}\n"], dependencies: [{ kind: "component", type: HamburgerButtonComponent, selector: "button[hamburger-button]" }, { kind: "component", type: FSocialLinksComponent, selector: "f-social-links" }, { kind: "component", type: ThemeButtonComponent, selector: "button[theme-button]" }, { kind: "component", type: InlineMenuComponent, selector: "inline-menu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-header', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         HamburgerButtonComponent,
                         FSocialLinksComponent,
-                        FThemeButtonComponent,
+                        ThemeButtonComponent,
                         InlineMenuComponent,
-                    ], template: "<button hamburger-button></button>\n<div class=\"title text-ellipsis\">{{ title }}</div>\n<inline-menu/>\n<!--<npm-version/>-->\n<div class=\"divider\"></div>\n<button f-theme-button></button>\n<div class=\"divider\"></div>\n<f-social-links/>\n\n", styles: [":host{position:sticky;width:100%;top:0;display:flex;justify-content:flex-start;align-items:center;padding:20px 32px;font-weight:600;color:var(--primary-text);height:calc(var(--header-height) + 1px);background-color:var(--background-color);border-bottom:1px solid var(--divider-color);z-index:var(--z-index-header)}@media (min-width: 1280px){:host{padding-right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 3);padding-left:max(var(--page-padding),(100vw - var(--layout-max-width)) / 4)}}.title{display:none;justify-content:flex-start;align-items:center;padding:20px 0;font-weight:600;color:var(--primary-text);height:var(--header-height)}@media (min-width: 460px){.title{display:block}}@media (min-width: 960px){.title{display:none}}.divider{margin-right:8px;margin-left:8px;width:1px;height:24px;background-color:var(--divider-color);content:\"\"}\n"] }]
+                    ], template: "<button hamburger-button></button>\n<div class=\"title text-ellipsis\">{{ title }}</div>\n<inline-menu/>\n<!--<npm-version/>-->\n<div class=\"divider\"></div>\n<button theme-button></button>\n<div class=\"divider\"></div>\n<f-social-links/>\n\n", styles: [":host{position:sticky;width:100%;top:0;display:flex;justify-content:flex-start;align-items:center;padding:20px 32px;font-weight:600;color:var(--primary-text);height:calc(var(--header-height) + 1px);background-color:var(--background-color);border-bottom:1px solid var(--divider-color);z-index:var(--z-index-header)}@media (min-width: 1280px){:host{padding-right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 3);padding-left:max(var(--page-padding),(100vw - var(--layout-max-width)) / 4)}}.title{display:none;justify-content:flex-start;align-items:center;padding:20px 0;font-weight:600;color:var(--primary-text);height:var(--header-height)}@media (min-width: 460px){.title{display:block}}@media (min-width: 960px){.title{display:none}}.divider{margin-right:8px;margin-left:8px;width:1px;height:24px;background-color:var(--divider-color);content:\"\"}\n"] }]
         }] });
 
 class NavigationGroupComponent {
@@ -883,10 +872,10 @@ class NavigationGroupComponent {
     toggle() {
         this.isCollapsed.set(!this.isCollapsed());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NavigationGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: NavigationGroupComponent, isStandalone: true, selector: "f-navigation-group", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.collapsed": "isCollapsed()", "class.no-title": "!title()" } }, ngImport: i0, template: "@if (title()) {\n  <header (click)=\"toggle()\">\n    <span>{{ title() }}</span>\n    <div class=\"flex-space\"></div>\n    <div class=\"caret\">\n      <span class=\"chevron-right caret-icon\"></span>\n    </div>\n  </header>\n}\n@if (!isCollapsed()) {\n  <ng-content></ng-content>\n}\n\n\n\n", styles: [":host{padding-top:10px;padding-bottom:24px;border-top:1px solid var(--divider-color);display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;width:100%;max-width:240px;margin-left:auto}:host.collapsed,:host.no-title{padding-top:10px;padding-bottom:10px}header{font-weight:600;color:var(--primary-text);flex-grow:1;padding:4px 0;line-height:24px;font-size:14px;cursor:pointer;display:flex;justify-content:flex-start;align-items:center;width:100%}.caret{display:flex;justify-content:center;align-items:center;margin-right:-7px;width:32px;height:32px;color:var(--tertiary-text);cursor:pointer;transition:color .25s;flex-shrink:0}:host:hover .caret{color:var(--secondary-text)}:host:hover .caret:hover{color:var(--primary-text)}:host .caret-icon{font-size:18px;transform:rotate(90deg);transition:transform .25s;mask-size:100% 100%;background-color:currentColor;color:inherit;width:18px;height:18px}:host.collapsed .caret-icon{transform:rotate(0)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NavigationGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: NavigationGroupComponent, isStandalone: true, selector: "f-navigation-group", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.collapsed": "isCollapsed()", "class.no-title": "!title()" } }, ngImport: i0, template: "@if (title()) {\n  <header (click)=\"toggle()\">\n    <span>{{ title() }}</span>\n    <div class=\"flex-space\"></div>\n    <div class=\"caret\">\n      <span class=\"chevron-right caret-icon\"></span>\n    </div>\n  </header>\n}\n@if (!isCollapsed()) {\n  <ng-content></ng-content>\n}\n\n\n\n", styles: [":host{padding-top:10px;padding-bottom:24px;border-top:1px solid var(--divider-color);display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;width:100%;max-width:240px;margin-left:auto}:host.collapsed,:host.no-title{padding-top:10px;padding-bottom:10px}header{font-weight:600;color:var(--primary-text);flex-grow:1;padding:4px 0;line-height:24px;font-size:14px;cursor:pointer;display:flex;justify-content:flex-start;align-items:center;width:100%}.caret{display:flex;justify-content:center;align-items:center;margin-right:-7px;width:32px;height:32px;color:var(--tertiary-text);cursor:pointer;transition:color .25s;flex-shrink:0}:host:hover .caret{color:var(--secondary-text)}:host:hover .caret:hover{color:var(--primary-text)}:host .caret-icon{font-size:18px;transform:rotate(90deg);transition:transform .25s;mask-size:100% 100%;background-color:currentColor;color:inherit;width:18px;height:18px}:host.collapsed .caret-icon{transform:rotate(0)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NavigationGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NavigationGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-navigation-group', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.collapsed]': 'isCollapsed()',
@@ -895,10 +884,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
         }] });
 
 class FNavigationItemComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FNavigationItemComponent, isStandalone: true, selector: "a[f-navigation-item]", ngImport: i0, template: "<ng-content></ng-content>\n\n\n\n", styles: [":host{font-weight:500;color:var(--secondary-text);flex-grow:1;padding:4px 0;line-height:24px;font-size:14px;cursor:pointer;width:100%;display:flex;align-items:center;justify-content:flex-start;gap:2px}:host:hover{text-decoration:none;color:var(--primary-1)}:host.active{color:var(--primary-1)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: FNavigationItemComponent, isStandalone: true, selector: "a[f-navigation-item]", ngImport: i0, template: "<ng-content></ng-content>\n\n\n\n", styles: [":host{font-weight:500;color:var(--secondary-text);flex-grow:1;padding:4px 0;line-height:24px;font-size:14px;cursor:pointer;width:100%;display:flex;align-items:center;justify-content:flex-start;gap:2px}:host:hover{text-decoration:none;color:var(--primary-1)}:host.active{color:var(--primary-1)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FNavigationItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FNavigationItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'a[f-navigation-item]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n\n\n\n", styles: [":host{font-weight:500;color:var(--secondary-text);flex-grow:1;padding:4px 0;line-height:24px;font-size:14px;cursor:pointer;width:100%;display:flex;align-items:center;justify-content:flex-start;gap:2px}:host:hover{text-decoration:none;color:var(--primary-1)}:host.active{color:var(--primary-1)}\n"] }]
         }] });
@@ -911,7 +900,7 @@ class NavigationPanelComponent {
     _router = inject(Router);
     _changeDetectorRef = inject(ChangeDetectorRef);
     _destroyRef = inject(DestroyRef);
-    _browser = inject(BrowserService);
+    _window = inject(WINDOW);
     value;
     navigation = this._provider.getNavigation();
     title = this._provider.getTitle();
@@ -960,12 +949,12 @@ class NavigationPanelComponent {
         });
     }
     _onDocumentClick(event) {
-        new HandleNavigationLinksHandler().handle(new HandleNavigationLinksRequest(event, this._browser, this._router));
+        new HandleNavigationLinksHandler().handle(new HandleNavigationLinksRequest(event, this._window, this._router));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NavigationPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: NavigationPanelComponent, isStandalone: true, selector: "f-navigation-panel", host: { listeners: { "click": "_onDocumentClick($event)" } }, ngImport: i0, template: "<a routerLink class=\"navigation-header\">\n  <img [src]=\"image\" width=\"24\" height=\"24\" alt=\"logo\" class=\"logo\"/> {{ title }}\n</a>\n\n@for (group of navigation; track group) {\n  <f-navigation-group [title]=\"group.text\">\n    @for (item of group.items; track item.link) {\n      <a f-navigation-item [href]=\"item.link\" [class.active]=\"item.link === value\">\n        <div class=\"text-ellipsis\">{{ item.text }}</div>\n        @if (item.badge) {\n          <span class=\"f-badge {{ item.badge.type }}\">{{ item.badge.text }}</span>\n        }\n      </a>\n    }\n  </f-navigation-group>\n}\n", styles: [":host{height:100%;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:0 var(--navigation-panel-padding);background-color:var(--navigation-panel-background);overflow:hidden;overflow-y:auto;position:fixed;width:var(--navigation-panel-width);top:0;left:calc(-1 * var(--navigation-panel-width));transition:transform .2s ease-in-out;z-index:var(--z-index-navigation);transform:none}@media (min-width: 960px){:host{position:unset;display:flex;min-width:var(--navigation-panel-width);width:fit-content;transform:none!important}}@media (min-width: 1440px){:host{min-width:calc((100% - (var(--layout-max-width) - 64px)) / 3 + var(--navigation-panel-width) - var(--navigation-panel-padding))}}:host.visible{transform:translate(var(--navigation-panel-width))}.navigation-header{display:flex;justify-content:flex-start;align-items:center;padding:20px 0;font-weight:600;color:var(--primary-text);height:var(--header-height);width:100%;max-width:240px;margin-left:auto;cursor:pointer}.navigation-header img{margin-right:8px}\n"], dependencies: [{ kind: "component", type: FNavigationItemComponent, selector: "a[f-navigation-item]" }, { kind: "component", type: NavigationGroupComponent, selector: "f-navigation-group", inputs: ["title"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NavigationPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: NavigationPanelComponent, isStandalone: true, selector: "f-navigation-panel", host: { listeners: { "click": "_onDocumentClick($event)" } }, ngImport: i0, template: "<a routerLink class=\"navigation-header\">\n  <img [src]=\"image\" width=\"24\" height=\"24\" alt=\"logo\" class=\"logo\"/> {{ title }}\n</a>\n\n@for (group of navigation; track group) {\n  <f-navigation-group [title]=\"group.text\">\n    @for (item of group.items; track item.link) {\n      <a f-navigation-item [href]=\"item.link\" [class.active]=\"item.link === value\">\n        <div class=\"text-ellipsis\">{{ item.text }}</div>\n        @if (item.badge) {\n          <span class=\"f-badge {{ item.badge.type }}\">{{ item.badge.text }}</span>\n        }\n      </a>\n    }\n  </f-navigation-group>\n}\n", styles: [":host{height:100%;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:0 var(--navigation-panel-padding);background-color:var(--navigation-panel-background);overflow:hidden;overflow-y:auto;position:fixed;width:var(--navigation-panel-width);top:0;left:calc(-1 * var(--navigation-panel-width));transition:transform .2s ease-in-out;z-index:var(--z-index-navigation);transform:none}@media (min-width: 960px){:host{position:unset;display:flex;min-width:var(--navigation-panel-width);width:fit-content;transform:none!important}}@media (min-width: 1440px){:host{min-width:calc((100% - (var(--layout-max-width) - 64px)) / 3 + var(--navigation-panel-width) - var(--navigation-panel-padding))}}:host.visible{transform:translate(var(--navigation-panel-width))}.navigation-header{display:flex;justify-content:flex-start;align-items:center;padding:20px 0;font-weight:600;color:var(--primary-text);height:var(--header-height);width:100%;max-width:240px;margin-left:auto;cursor:pointer}.navigation-header img{margin-right:8px}\n"], dependencies: [{ kind: "component", type: FNavigationItemComponent, selector: "a[f-navigation-item]" }, { kind: "component", type: NavigationGroupComponent, selector: "f-navigation-group", inputs: ["title"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NavigationPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NavigationPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-navigation-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         FNavigationItemComponent,
@@ -989,10 +978,10 @@ class FCodeGroupTabsComponent {
         this.index.set(index);
         this.tabIndex.emit(index);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FCodeGroupTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FCodeGroupTabsComponent, isStandalone: true, selector: "f-code-group-tabs", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabIndex: "tabIndex" }, host: { properties: { "style.display": "display()" }, classAttribute: "f-code-group-tabs" }, ngImport: i0, template: "@for (data of data(); track data) {\n  <button class=\"f-tab-button\" [class.active]=\"$index === index()\"\n          (click)=\"onTabClick($index)\">\n    {{ data.tab }}\n  </button>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FCodeGroupTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: FCodeGroupTabsComponent, isStandalone: true, selector: "f-code-group-tabs", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabIndex: "tabIndex" }, host: { properties: { "style.display": "display()" }, classAttribute: "f-code-group-tabs" }, ngImport: i0, template: "@for (data of data(); track data) {\n  <button class=\"f-tab-button\" [class.active]=\"$index === index()\"\n          (click)=\"onTabClick($index)\">\n    {{ data.tab }}\n  </button>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FCodeGroupTabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FCodeGroupTabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-code-group-tabs', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'f-code-group-tabs',
@@ -1000,375 +989,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                     }, template: "@for (data of data(); track data) {\n  <button class=\"f-tab-button\" [class.active]=\"$index === index()\"\n          (click)=\"onTabClick($index)\">\n    {{ data.tab }}\n  </button>\n}\n" }]
         }] });
 
-class MarkCodeFocusedBlocksPostProcessor {
-    _browser;
-    constructor(_browser) {
-        this._browser = _browser;
-    }
-    handle(element) {
-        const html = element.innerHTML;
-        if (!FOCUS_REGEX.test(html)) {
-            return of(element);
-        }
-        element.innerHTML = html.replace(FOCUS_REGEX, (_match, content) => {
-            return `<focus class="focused"><div class="inline-focus">${content}</div></focus>`;
-        });
-        const focused = element.querySelector('.focused');
-        if (focused) {
-            this._applyOpacity(element.parentElement);
-        }
-        return of(element);
-    }
-    _applyOpacity(element) {
-        if (!element.classList.contains('focused')) {
-            element.style.color = this._createRgbaString(this._getElementColor(element), 0.5);
-            element.childNodes.forEach((child) => {
-                if (child.nodeType === Node.ELEMENT_NODE) {
-                    this._applyOpacity(child);
-                }
-            });
-        }
-        else {
-            element.style.color = this._createRgbaString(this._getElementColor(element), 1, true);
-        }
-    }
-    _getElementColor(element) {
-        return this._browser.window.getComputedStyle(element).color;
-    }
-    _createRgbaString(color, opacity, isRgb = false) {
-        const [r, g, b, a] = this._getRgbValues(color);
-        const alpha = Number(a) || 1;
-        return isRgb ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${opacity * alpha})`;
-    }
-    _getRgbValues(color) {
-        return color.match(/\d+/g);
-    }
-}
-const FOCUS_REGEX = /ƒƒƒ([\s\S]*?)¢¢¢/g;
-
-const UNIVERSAL_THEME = {
-    name: 'universal',
-    colors: {
-        'editor.background': 'transparent',
-        'editor.foreground': 'var(--code-view-text-color)',
-    },
-    settings: [
-        {
-            scope: ['comment', 'punctuation.definition.comment', 'string.comment'],
-            settings: {
-                foreground: 'var(--token-comment)',
-            },
-        },
-        {
-            scope: ['constant', 'entity.name.constant', 'variable.other.constant', 'variable.other.enummember', 'variable.language'],
-            settings: {
-                foreground: 'var(--token-number)',
-            },
-        },
-        {
-            scope: ['entity', 'entity.name'],
-            settings: {
-                foreground: 'var(--token-tag)',
-            },
-        },
-        {
-            scope: 'variable.parameter.function',
-            settings: {
-                foreground: 'var(--primary-text)',
-            },
-        },
-        {
-            scope: 'entity.name.tag',
-            settings: {
-                foreground: 'var(--token-tag)',
-            },
-        },
-        {
-            scope: 'keyword',
-            settings: {
-                foreground: 'var(--token-keyword)',
-            },
-        },
-        {
-            scope: ['storage', 'storage.type'],
-            settings: {
-                foreground: 'var(--token-keyword)',
-            },
-        },
-        {
-            scope: ['storage.modifier.package', 'storage.modifier.import', 'storage.type.java'],
-            settings: {
-                foreground: 'var(--primary-text)',
-            },
-        },
-        {
-            scope: ['string', 'punctuation.definition.string', 'string punctuation.section.embedded source'],
-            settings: {
-                foreground: 'var(--token-string)',
-            },
-        },
-        {
-            scope: 'support',
-            settings: {
-                foreground: 'var(--token-function)',
-            },
-        },
-        {
-            scope: 'meta.property-name',
-            settings: {
-                foreground: 'var(--token-function)',
-            },
-        },
-        {
-            scope: 'variable',
-            settings: {
-                foreground: 'var(--token-variable)',
-            },
-        },
-        {
-            scope: 'variable.other',
-            settings: {
-                foreground: 'var(--token-function)',
-            },
-        },
-        {
-            scope: [
-                'invalid.broken',
-                'invalid.deprecated',
-                'invalid.illegal',
-                'invalid.unimplemented',
-            ],
-            settings: {
-                fontStyle: 'italic',
-                foreground: 'var(--danger-2)',
-            },
-        },
-        {
-            scope: 'carriage-return',
-            settings: {
-                fontStyle: 'italic underline',
-                foreground: 'var(--background-color)',
-                background: 'var(--token-keyword)',
-            },
-        },
-        {
-            scope: 'message.error',
-            settings: {
-                foreground: 'var(--danger-2)',
-            },
-        },
-        {
-            scope: 'string variable',
-            settings: {
-                foreground: 'var(--token-function)',
-            },
-        },
-        {
-            scope: ['source.regexp', 'string.regexp'],
-            settings: {
-                foreground: 'var(--token-interpolation)',
-            },
-        },
-        {
-            scope: [
-                'string.regexp.character-class',
-                'string.regexp constant.character.escape',
-                'string.regexp source.ruby.embedded',
-                'string.regexp string.regexp.arbitrary-repitition',
-            ],
-            settings: {
-                foreground: 'var(--token-interpolation)',
-            },
-        },
-        {
-            scope: 'string.regexp constant.character.escape',
-            settings: {
-                fontStyle: 'bold',
-                foreground: 'var(--token-attr-value)',
-            },
-        },
-        {
-            scope: ['support.constant', 'support.variable', 'meta.module-reference'],
-            settings: {
-                foreground: 'var(--token-function)',
-            },
-        },
-        {
-            scope: 'punctuation.definition.list.begin.markdown',
-            settings: {
-                foreground: 'var(--token-variable)',
-            },
-        },
-        {
-            scope: ['markup.heading', 'markup.heading entity.name'],
-            settings: {
-                fontStyle: 'bold',
-                foreground: 'var(--token-function)',
-            },
-        },
-        {
-            scope: 'markup.quote',
-            settings: {
-                foreground: 'var(--token-attr-value)',
-            },
-        },
-        {
-            scope: 'markup.italic',
-            settings: {
-                fontStyle: 'italic',
-                foreground: 'var(--primary-text)',
-            },
-        },
-        {
-            scope: 'markup.bold',
-            settings: {
-                fontStyle: 'bold',
-                foreground: 'var(--primary-text)',
-            },
-        },
-        {
-            scope: 'markup.underline',
-            settings: {
-                fontStyle: 'underline',
-            },
-        },
-        {
-            scope: 'markup.strikethrough',
-            settings: {
-                fontStyle: 'strikethrough',
-            },
-        },
-        {
-            scope: 'markup.inline.raw',
-            settings: {
-                foreground: 'var(--token-function)',
-            },
-        },
-        {
-            scope: ['markup.deleted', 'meta.diff.header.from-file', 'punctuation.definition.deleted'],
-            settings: {
-                background: 'var(--danger-3)',
-                foreground: 'var(--danger-2)',
-            },
-        },
-        {
-            scope: ['markup.inserted', 'meta.diff.header.to-file', 'punctuation.definition.inserted'],
-            settings: {
-                background: 'var(--success-3)',
-                foreground: 'var(--token-attr-value)',
-            },
-        },
-        {
-            scope: ['markup.changed', 'punctuation.definition.changed'],
-            settings: {
-                background: 'var(--warning-3)',
-                foreground: 'var(--token-variable)',
-            },
-        },
-        {
-            scope: ['markup.ignored', 'markup.untracked'],
-            settings: {
-                background: 'var(--token-function)',
-                foreground: 'var(--alt-background)',
-            },
-        },
-        {
-            scope: 'meta.diff.range',
-            settings: {
-                fontStyle: 'bold',
-                foreground: 'var(--token-attr-name)',
-            },
-        },
-        {
-            scope: 'meta.diff.header',
-            settings: {
-                foreground: 'var(--token-function)',
-            },
-        },
-        {
-            scope: 'meta.separator',
-            settings: {
-                fontStyle: 'bold',
-                foreground: 'var(--token-function)',
-            },
-        },
-        {
-            scope: 'meta.output',
-            settings: {
-                foreground: 'var(--token-function)',
-            },
-        },
-        {
-            scope: [
-                'brackethighlighter.tag',
-                'brackethighlighter.curly',
-                'brackethighlighter.round',
-                'brackethighlighter.square',
-                'brackethighlighter.angle',
-                'brackethighlighter.quote',
-            ],
-            settings: {
-                foreground: 'var(--gray-1)',
-            },
-        },
-        {
-            scope: 'brackethighlighter.unmatched',
-            settings: {
-                foreground: 'var(--danger-2)',
-            },
-        },
-        {
-            scope: ['constant.other.reference.link', 'string.other.link'],
-            settings: {
-                fontStyle: 'underline',
-                foreground: 'var(--token-interpolation)',
-            },
-        },
-    ],
-};
-
-class HighlightService {
-    _browser = inject(BrowserService);
-    _highlighter$ = defer(() => from(createHighlighter({ themes: [UNIVERSAL_THEME], langs: LANGUAGES }))).pipe(shareReplay(1));
-    highlight(element, lang, content) {
-        if (!this._browser.isBrowser()) {
-            console.warn('[HighlightService] Skipping highlight on server.');
-            return of(element);
-        }
-        return this._highlightCodeBlock(element, lang, content).pipe(switchMap((x) => this._postProcess(x)), catchError((err) => {
-            console.error('[HighlightService] Failed to highlight:', err);
-            return of(element);
-        }));
-    }
-    _highlightCodeBlock(element, lang, content) {
-        return this._highlighter$.pipe(switchMap((highlighter) => this._renderCode(element, highlighter, lang, content)));
-    }
-    _renderCode(element, highlighter, lang, content) {
-        return new Observable((observer) => {
-            const processedContent = this._preprocessFocus(content);
-            element.innerHTML = highlighter.codeToHtml(processedContent, { lang, theme: 'universal', defaultColor: false });
-            requestAnimationFrame(() => {
-                observer.next(element);
-                observer.complete();
-            });
-        });
-    }
-    _preprocessFocus(code) {
-        return code.replace(/\|\:\|([\s\S]*?)\|\:\|/g, (_, p1) => `ƒƒƒ${p1}¢¢¢`);
-    }
-    _postProcess(element) {
-        return of(element).pipe(switchMap((x) => new MarkCodeFocusedBlocksPostProcessor(this._browser).handle(x)));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HighlightService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HighlightService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HighlightService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
 class HighlightComponent {
     _highlightService = inject(HighlightService);
     _elementRef = inject(ElementRef);
@@ -1381,10 +1001,10 @@ class HighlightComponent {
                 .pipe(take(1), takeUntilDestroyed(this._destroyRef)).subscribe();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HighlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: HighlightComponent, isStandalone: true, selector: "highlight", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HighlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.11", type: HighlightComponent, isStandalone: true, selector: "highlight", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HighlightComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HighlightComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'highlight',
@@ -1405,19 +1025,6 @@ function parseLanguageFromFileExtension(url) {
     }
     return '';
 }
-const LANGUAGES = [
-    'javascript',
-    'typescript',
-    'angular-html',
-    'angular-ts',
-    'shell',
-    'html',
-    'bash',
-    'css',
-    'scss',
-    'markdown',
-    'text',
-];
 function parseSyntaxLanguage(language) {
     let result;
     switch (language) {
@@ -1437,7 +1044,7 @@ function parseSyntaxLanguage(language) {
         default:
             result = extractLanguage(language);
     }
-    if (!LANGUAGES.includes(result)) {
+    if (!AVAILABLE_LANGUAGES.includes(result)) {
         result = 'text';
     }
     return result;
@@ -1467,10 +1074,10 @@ class FInsertComponentDirective {
         this._componentRef?.destroy();
         this._viewContainerRef.clear();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FInsertComponentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.14", type: FInsertComponentDirective, isStandalone: true, selector: "ng-container[fInsertComponent]", inputs: { component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FInsertComponentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: FInsertComponentDirective, isStandalone: true, selector: "ng-container[fInsertComponent]", inputs: { component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FInsertComponentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FInsertComponentDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -1543,10 +1150,10 @@ class FExampleViewComponent {
             }
         }).catch(error => this._logComponentLoadingError(tag, error));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FExampleViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FExampleViewComponent, isStandalone: true, selector: "f-example-view", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style.height": "data().height" }, classAttribute: "f-example-view" }, ngImport: i0, template: "{{ errors() }}\n@if (component()) {\n  <ng-container fInsertComponent [component]=\"component()\"/>\n}\n\n", dependencies: [{ kind: "directive", type: FInsertComponentDirective, selector: "ng-container[fInsertComponent]", inputs: ["component"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FExampleViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: FExampleViewComponent, isStandalone: true, selector: "f-example-view", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style.height": "data().height" }, classAttribute: "f-example-view" }, ngImport: i0, template: "{{ errors() }}\n@if (component()) {\n  <ng-container fInsertComponent [component]=\"component()\"/>\n}\n\n", dependencies: [{ kind: "directive", type: FInsertComponentDirective, selector: "ng-container[fInsertComponent]", inputs: ["component"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FExampleViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FExampleViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-example-view', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         FInsertComponentDirective,
@@ -1599,10 +1206,10 @@ class FCodeViewComponent {
     _copyContentToClipboard(content) {
         copyToClipboard(content).pipe(take(1), takeUntilDestroyed(this._destroyRef)).subscribe(() => this._popoverService.show('Copied!'));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FCodeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FCodeViewComponent, isStandalone: true, selector: "f-code-view", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.height": "height()" }, classAttribute: "f-code-view" }, ngImport: i0, template: "<span class=\"f-code-language\">{{ visibleLanguage() }}</span>\n<button class=\"f-copy-button\" (click)=\"onCopyClick()\"></button>\n@if (content()) {\n  <highlight [content]=\"content()\" [language]=\"syntaxLanguage()\"/>\n}\n\n", dependencies: [{ kind: "component", type: HighlightComponent, selector: "highlight", inputs: ["content", "language"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FCodeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: FCodeViewComponent, isStandalone: true, selector: "f-code-view", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.height": "height()" }, classAttribute: "f-code-view" }, ngImport: i0, template: "<span class=\"f-code-language\">{{ visibleLanguage() }}</span>\n<button class=\"f-copy-button\" (click)=\"onCopyClick()\"></button>\n@if (content()) {\n  <highlight [content]=\"content()\" [language]=\"syntaxLanguage()\"/>\n}\n\n", dependencies: [{ kind: "component", type: HighlightComponent, selector: "highlight", inputs: ["content", "language"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FCodeViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FCodeViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-code-view', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'f-code-view',
@@ -1680,10 +1287,10 @@ class MarkdownService {
     _cleanupWasteParagraphFromPreviewGroup(html) {
         return html.replace(/<p>(\[[^\]]+\](\s*\[[^\]]+\])*)<\/p>/g, '');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MarkdownService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MarkdownService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MarkdownService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MarkdownService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MarkdownService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MarkdownService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -1908,10 +1515,10 @@ class FCodeGroupComponent {
     onTabClick(index) {
         this.index.set(index);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FCodeGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FCodeGroupComponent, isStandalone: true, selector: "f-code-group", host: { classAttribute: "f-code-group" }, ngImport: i0, template: "<f-code-group-tabs [data]=\"data()\" (tabIndex)=\"onTabClick($event)\"/>\n<div class=\"f-code-group-body\">\n  @for (data of data(); track data) {\n    @let isExampleView = data.type === containerType.EXAMPLE;\n    @let display = $index === index() ? 'block' : 'none';\n    @if (isExampleView) {\n      <f-example-view [style.display]=\"display\" [data]=\"data\"/>\n    } @else {\n      <f-code-view [style.display]=\"display\" [data]=\"data\"/>\n    }\n  }\n</div>\n", dependencies: [{ kind: "component", type: FCodeGroupTabsComponent, selector: "f-code-group-tabs", inputs: ["data"], outputs: ["tabIndex"] }, { kind: "component", type: FCodeViewComponent, selector: "f-code-view", inputs: ["data"] }, { kind: "component", type: FExampleViewComponent, selector: "f-example-view", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FCodeGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: FCodeGroupComponent, isStandalone: true, selector: "f-code-group", host: { classAttribute: "f-code-group" }, ngImport: i0, template: "<f-code-group-tabs [data]=\"data()\" (tabIndex)=\"onTabClick($event)\"/>\n<div class=\"f-code-group-body\">\n  @for (data of data(); track data) {\n    @let isExampleView = data.type === containerType.EXAMPLE;\n    @let display = $index === index() ? 'block' : 'none';\n    @if (isExampleView) {\n      <f-example-view [style.display]=\"display\" [data]=\"data\"/>\n    } @else {\n      <f-code-view [style.display]=\"display\" [data]=\"data\"/>\n    }\n  }\n</div>\n", dependencies: [{ kind: "component", type: FCodeGroupTabsComponent, selector: "f-code-group-tabs", inputs: ["data"], outputs: ["tabIndex"] }, { kind: "component", type: FCodeViewComponent, selector: "f-code-view", inputs: ["data"] }, { kind: "component", type: FExampleViewComponent, selector: "f-example-view", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FCodeGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FCodeGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-code-group', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         FCodeGroupTabsComponent,
@@ -1975,10 +1582,10 @@ class GetPreviousNextPageNavigationRequest {
 }
 
 class FFooterEditInformationComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FFooterEditInformationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FFooterEditInformationComponent, isStandalone: true, selector: "f-footer-edit-information", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{padding-bottom:18px}@media (min-width: 640px){:host{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FFooterEditInformationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: FFooterEditInformationComponent, isStandalone: true, selector: "f-footer-edit-information", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{padding-bottom:18px}@media (min-width: 640px){:host{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FFooterEditInformationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FFooterEditInformationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-footer-edit-information', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<ng-content></ng-content>\n", styles: [":host{padding-bottom:18px}@media (min-width: 640px){:host{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px}}\n"] }]
         }] });
@@ -1986,10 +1593,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 class FFooterNavigationButtonComponent {
     description;
     link;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FFooterNavigationButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FFooterNavigationButtonComponent, isStandalone: true, selector: "a[f-footer-navigation-button]", inputs: { description: "description", link: "link" }, ngImport: i0, template: "<span class=\"description\">{{ description }}</span>\n<span class=\"page-title\">{{ link.text }}</span>\n", styles: [":host{display:block;border:1px solid var(--divider-color);border-radius:2px;padding:12px 16px;flex:1;max-width:50%;min-width:260px;text-decoration:none!important;cursor:pointer;pointer-events:all}:host:hover{border-color:var(--dark-divider-color)}:host:active{border-color:var(--primary-1)}:host.next{margin-left:auto;text-align:right}:host .description{display:block;line-height:20px;font-size:12px;font-weight:500;color:var(--secondary-text);pointer-events:none}:host .page-title{display:block;line-height:20px;font-size:14px;font-weight:500;color:var(--primary-1);pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FFooterNavigationButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: FFooterNavigationButtonComponent, isStandalone: true, selector: "a[f-footer-navigation-button]", inputs: { description: "description", link: "link" }, ngImport: i0, template: "<span class=\"description\">{{ description }}</span>\n<span class=\"page-title\">{{ link.text }}</span>\n", styles: [":host{display:block;border:1px solid var(--divider-color);border-radius:2px;padding:12px 16px;flex:1;max-width:50%;min-width:260px;text-decoration:none!important;cursor:pointer;pointer-events:all}:host:hover{border-color:var(--dark-divider-color)}:host:active{border-color:var(--primary-1)}:host.next{margin-left:auto;text-align:right}:host .description{display:block;line-height:20px;font-size:12px;font-weight:500;color:var(--secondary-text);pointer-events:none}:host .page-title{display:block;line-height:20px;font-size:14px;font-weight:500;color:var(--primary-1);pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FFooterNavigationButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FFooterNavigationButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'a[f-footer-navigation-button]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<span class=\"description\">{{ description }}</span>\n<span class=\"page-title\">{{ link.text }}</span>\n", styles: [":host{display:block;border:1px solid var(--divider-color);border-radius:2px;padding:12px 16px;flex:1;max-width:50%;min-width:260px;text-decoration:none!important;cursor:pointer;pointer-events:all}:host:hover{border-color:var(--dark-divider-color)}:host:active{border-color:var(--primary-1)}:host.next{margin-left:auto;text-align:right}:host .description{display:block;line-height:20px;font-size:12px;font-weight:500;color:var(--secondary-text);pointer-events:none}:host .page-title{display:block;line-height:20px;font-size:14px;font-weight:500;color:var(--primary-1);pointer-events:none}\n"] }]
         }], propDecorators: { description: [{
@@ -2001,19 +1608,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             }] } });
 
 class FFooterNavigationComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FFooterNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FFooterNavigationComponent, isStandalone: true, selector: "nav[f-footer-navigation]", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{border-top:1px solid var(--divider-color);padding-top:24px;display:flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;gap:16px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FFooterNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: FFooterNavigationComponent, isStandalone: true, selector: "nav[f-footer-navigation]", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{border-top:1px solid var(--divider-color);padding-top:24px;display:flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;gap:16px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FFooterNavigationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FFooterNavigationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nav[f-footer-navigation]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<ng-content></ng-content>\n", styles: [":host{border-top:1px solid var(--divider-color);padding-top:24px;display:flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;gap:16px}\n"] }]
         }] });
 
 class FFooterEditLinkComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FFooterEditLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FFooterEditLinkComponent, isStandalone: true, selector: "a[f-footer-edit-link]", ngImport: i0, template: "<span class=\"edit-link-icon f-icon edit\"></span>\n<ng-content></ng-content>\n", styles: [":host{display:flex;align-items:center;border:0;line-height:32px;font-size:14px;font-weight:500;color:var(--primary-1);cursor:pointer}:host .edit-link-icon{margin-right:8px;width:14px;height:14px;color:inherit}:host:hover{color:var(--primary-2)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FFooterEditLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: FFooterEditLinkComponent, isStandalone: true, selector: "a[f-footer-edit-link]", ngImport: i0, template: "<span class=\"edit-link-icon f-icon edit\"></span>\n<ng-content></ng-content>\n", styles: [":host{display:flex;align-items:center;border:0;line-height:32px;font-size:14px;font-weight:500;color:var(--primary-1);cursor:pointer}:host .edit-link-icon{margin-right:8px;width:14px;height:14px;color:inherit}:host:hover{color:var(--primary-2)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FFooterEditLinkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FFooterEditLinkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'a[f-footer-edit-link]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<span class=\"edit-link-icon f-icon edit\"></span>\n<ng-content></ng-content>\n", styles: [":host{display:flex;align-items:center;border:0;line-height:32px;font-size:14px;font-weight:500;color:var(--primary-1);cursor:pointer}:host .edit-link-icon{margin-right:8px;width:14px;height:14px;color:inherit}:host:hover{color:var(--primary-2)}\n"] }]
         }] });
@@ -2024,7 +1631,7 @@ class FMarkdownFooterComponent {
     _activatedRoute = inject(ActivatedRoute);
     _changeDetectorRef = inject(ChangeDetectorRef);
     _destroyRef = inject(DestroyRef);
-    _browser = inject(BrowserService);
+    _window = inject(WINDOW);
     navigation = {};
     editLink;
     previousLink;
@@ -2065,12 +1672,12 @@ class FMarkdownFooterComponent {
         return this._activatedRoute.snapshot.url.map((x) => x.path).join('/');
     }
     _onDocumentClick(event) {
-        new HandleNavigationLinksHandler().handle(new HandleNavigationLinksRequest(event, this._browser, this._router));
+        new HandleNavigationLinksHandler().handle(new HandleNavigationLinksRequest(event, this._window, this._router));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FMarkdownFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FMarkdownFooterComponent, isStandalone: true, selector: "footer [f-markdown-footer]", host: { listeners: { "click": "_onDocumentClick($event)" } }, ngImport: i0, template: "@if (editLink) {\n  <f-footer-edit-information>\n    <a f-footer-edit-link [href]=\"editLink\">\n      {{ navigation.editLink?.text || 'Edit this page on GitHub' }}\n    </a>\n\n<!--      <f-footer-last-updated>-->\n<!--        Last updated: <span>111</span>-->\n<!--      </f-footer-last-updated>-->\n  </f-footer-edit-information>\n}\n\n@if (previousLink || nextLink) {\n  <nav f-footer-navigation>\n    @if (previousLink) {\n      <a f-footer-navigation-button\n         [href]=\"previousLink.link\"\n         [description]=\"navigation.previous\"\n         [link]=\"previousLink\">\n      </a>\n    }\n    @if (nextLink) {\n      <a f-footer-navigation-button class=\"next\"\n         [href]=\"nextLink.link\"\n         [description]=\"navigation.next\"\n         [link]=\"nextLink\">\n      </a>\n    }\n  </nav>\n}\n\n", styles: [":host{display:block;margin-top:64px}\n"], dependencies: [{ kind: "component", type: FFooterNavigationComponent, selector: "nav[f-footer-navigation]" }, { kind: "component", type: FFooterNavigationButtonComponent, selector: "a[f-footer-navigation-button]", inputs: ["description", "link"] }, { kind: "component", type: FFooterEditInformationComponent, selector: "f-footer-edit-information" }, { kind: "component", type: FFooterEditLinkComponent, selector: "a[f-footer-edit-link]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FMarkdownFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: FMarkdownFooterComponent, isStandalone: true, selector: "footer [f-markdown-footer]", host: { listeners: { "click": "_onDocumentClick($event)" } }, ngImport: i0, template: "@if (editLink) {\n  <f-footer-edit-information>\n    <a f-footer-edit-link [href]=\"editLink\">\n      {{ navigation.editLink?.text || 'Edit this page on GitHub' }}\n    </a>\n\n<!--      <f-footer-last-updated>-->\n<!--        Last updated: <span>111</span>-->\n<!--      </f-footer-last-updated>-->\n  </f-footer-edit-information>\n}\n\n@if (previousLink || nextLink) {\n  <nav f-footer-navigation>\n    @if (previousLink) {\n      <a f-footer-navigation-button\n         [href]=\"previousLink.link\"\n         [description]=\"navigation.previous\"\n         [link]=\"previousLink\">\n      </a>\n    }\n    @if (nextLink) {\n      <a f-footer-navigation-button class=\"next\"\n         [href]=\"nextLink.link\"\n         [description]=\"navigation.next\"\n         [link]=\"nextLink\">\n      </a>\n    }\n  </nav>\n}\n\n", styles: [":host{display:block;margin-top:64px}\n"], dependencies: [{ kind: "component", type: FFooterNavigationComponent, selector: "nav[f-footer-navigation]" }, { kind: "component", type: FFooterNavigationButtonComponent, selector: "a[f-footer-navigation-button]", inputs: ["description", "link"] }, { kind: "component", type: FFooterEditInformationComponent, selector: "f-footer-edit-information" }, { kind: "component", type: FFooterEditLinkComponent, selector: "a[f-footer-edit-link]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FMarkdownFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FMarkdownFooterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'footer [f-markdown-footer]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         FFooterNavigationComponent,
@@ -2090,7 +1697,7 @@ class FPreviewComponent extends FPreviewBase {
     _elementReference = inject(ElementRef);
     _fEnvironment = inject(DocumentationStore);
     _fPreviewGroupService = inject(FPreviewGroupService);
-    _fState = inject(ThemeService);
+    _themeService = inject(ThemeService, { optional: true });
     _router = inject(Router);
     _destroyRef = inject(DestroyRef);
     item;
@@ -2113,7 +1720,7 @@ class FPreviewComponent extends FPreviewBase {
         this._subscribeToThemeChanges();
     }
     _subscribeToThemeChanges() {
-        this._fState.theme$.pipe(startWith(null), takeUntilDestroyed(this._destroyRef)).subscribe(() => this._updateTheme());
+        this._themeService?.theme$.pipe(startWith(null), takeUntilDestroyed(this._destroyRef)).subscribe(() => this._updateTheme());
     }
     ngOnInit() {
         this._fPreviewGroupService.add(this);
@@ -2125,7 +1732,7 @@ class FPreviewComponent extends FPreviewBase {
         return group.items.find((x) => x.link === this.item);
     }
     _updateTheme() {
-        this.src.set(this._fState.getPreferredTheme() === 'dark' ? this.viewModel?.image_dark : this.viewModel?.image);
+        this.src.set(this._themeService?.getPreferredTheme() === 'dark' ? this.viewModel?.image_dark : this.viewModel?.image);
         if (!this.src()) {
             this.src.set(this.viewModel?.image);
         }
@@ -2145,10 +1752,10 @@ class FPreviewComponent extends FPreviewBase {
     ngOnDestroy() {
         this._fPreviewGroupService.remove(this);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FPreviewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FPreviewComponent, isStandalone: true, selector: "a[f-preview]", host: { properties: { "attr.href": "url", "attr.title": "viewModel?.text" } }, usesInheritance: true, ngImport: i0, template: "@if (viewModel) {\n  <img [src]=\"src()\" [alt]=\"viewModel.description\" [title]=\"viewModel.text\">\n  <div class=\"title\">\n    {{ viewModel.text }}\n    @if (viewModel.badge) {\n      <span class=\"f-badge {{viewModel.badge.type}}\">{{ viewModel.badge.text }}</span>\n    }\n  </div>\n  <div class=\"description\">{{ viewModel.description }}</div>\n}\n\n\n\n", styles: [":host{display:block;border-radius:4px;background-color:var(--soft-background);padding:24px;width:100%;text-decoration:none!important;color:inherit!important;line-height:24px;font-size:14px;cursor:pointer}:host:hover img{transform:scale(1.1)}:host img{display:block;margin-bottom:16px;width:100%;height:180px;border-radius:4px;object-fit:cover;transition:transform .3s}:host .title{line-height:inherit;font-weight:600;text-transform:uppercase;color:var(--primary-text);display:flex;justify-content:space-between;align-items:center}:host .description{margin:8px 0!important;line-height:inherit;color:var(--secondary-text);width:100%;word-wrap:break-word;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media (min-width: 640px){:host{width:calc((100% - 32px)/2)}}.f-badge{padding:0 6px;line-height:14px;text-transform:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FPreviewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: FPreviewComponent, isStandalone: true, selector: "a[f-preview]", host: { properties: { "attr.href": "url", "attr.title": "viewModel?.text" } }, usesInheritance: true, ngImport: i0, template: "@if (viewModel) {\n  <img [src]=\"src()\" [alt]=\"viewModel.description\" [title]=\"viewModel.text\">\n  <div class=\"title\">\n    {{ viewModel.text }}\n    @if (viewModel.badge) {\n      <span class=\"f-badge {{viewModel.badge.type}}\">{{ viewModel.badge.text }}</span>\n    }\n  </div>\n  <div class=\"description\">{{ viewModel.description }}</div>\n}\n\n\n\n", styles: [":host{display:block;border-radius:4px;background-color:var(--soft-background);padding:24px;width:100%;text-decoration:none!important;color:inherit!important;line-height:24px;font-size:14px;cursor:pointer}:host:hover img{transform:scale(1.1)}:host img{display:block;margin-bottom:16px;width:100%;height:180px;border-radius:4px;object-fit:cover;transition:transform .3s}:host .title{line-height:inherit;font-weight:600;text-transform:uppercase;color:var(--primary-text);display:flex;justify-content:space-between;align-items:center}:host .description{margin:8px 0!important;line-height:inherit;color:var(--secondary-text);width:100%;word-wrap:break-word;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media (min-width: 640px){:host{width:calc((100% - 32px)/2)}}.f-badge{padding:0 6px;line-height:14px;text-transform:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FPreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FPreviewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'a[f-preview]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.href]': 'url',
@@ -2191,10 +1798,10 @@ class FPreviewGroupFiltersComponent {
         this.isSortByDateChecked.set(event);
         this._fPreviewGroupService.sortByDate(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FPreviewGroupFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FPreviewGroupFiltersComponent, isStandalone: true, selector: "div[f-preview-group-filters]", ngImport: i0, template: "@if (filters().length) {\n  <div class=\"filters-row\">\n    @for (filter of filters(); track filter) {\n      <f-radio-button [checked]=\"activeFilter() === filter\"\n                      (change)=\"onFilterChange(filter)\">{{ filter | titlecase }}\n      </f-radio-button>\n    }\n    <div class=\"flex-space\"></div>\n    <f-checkbox [checked]=\"isSortByDateChecked()\" (change)=\"onSortByDateChange($event)\">Sort by Newness</f-checkbox>\n  </div>\n}\n\n\n\n", styles: [".filters-row{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;width:100%;padding-top:20px;gap:8px}\n"], dependencies: [{ kind: "component", type: FCheckboxComponent, selector: "f-checkbox", inputs: ["id", "checked"], outputs: ["change"] }, { kind: "component", type: FRadioButtonComponent, selector: "f-radio-button", inputs: ["id", "checked"], outputs: ["change"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FPreviewGroupFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: FPreviewGroupFiltersComponent, isStandalone: true, selector: "div[f-preview-group-filters]", ngImport: i0, template: "@if (filters().length) {\n  <div class=\"filters-row\">\n    @for (filter of filters(); track filter) {\n      <f-radio-button [checked]=\"activeFilter() === filter\"\n                      (change)=\"onFilterChange(filter)\">{{ filter | titlecase }}\n      </f-radio-button>\n    }\n    <div class=\"flex-space\"></div>\n    <f-checkbox [checked]=\"isSortByDateChecked()\" (change)=\"onSortByDateChange($event)\">Sort by Newness</f-checkbox>\n  </div>\n}\n\n\n\n", styles: [".filters-row{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;width:100%;padding-top:20px;gap:8px}\n"], dependencies: [{ kind: "component", type: FCheckboxComponent, selector: "f-checkbox", inputs: ["id", "checked"], outputs: ["change"] }, { kind: "component", type: FRadioButtonComponent, selector: "f-radio-button", inputs: ["id", "checked"], outputs: ["change"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FPreviewGroupFiltersComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FPreviewGroupFiltersComponent, decorators: [{
             type: Component,
             args: [{ selector: 'div[f-preview-group-filters]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         FCheckboxComponent,
@@ -2267,19 +1874,19 @@ class FPreviewGroupService {
             x.hostElement.style.display = 'block';
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FPreviewGroupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FPreviewGroupService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FPreviewGroupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FPreviewGroupService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FPreviewGroupService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FPreviewGroupService, decorators: [{
             type: Injectable
         }] });
 
 class TableOfContentItemsComponent {
     items = input.required();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableOfContentItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TableOfContentItemsComponent, isStandalone: true, selector: "ul[f-table-of-content-items]", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@for (item of items(); track item.hash) {\n  <li [class.active]=\"item.isActive\"><a class=\"text-ellipsis\" [href]=\"item.hash\">{{ item.title }}</a></li>\n  @if (item.children) {\n    <ul f-table-of-content-items [items]=\"item.children\"></ul>\n  }\n}\n", styles: [":host{list-style:none;margin:0;padding:0}:host li{overflow-wrap:break-word;color:var(--secondary-text);max-width:180px}:host li a{display:block;line-height:var(--on-page-navigation-item-height);font-size:14px;color:inherit;font-weight:400}:host li.active{color:var(--primary-text)}:host li+ul{padding:0 16px}\n"], dependencies: [{ kind: "component", type: TableOfContentItemsComponent, selector: "ul[f-table-of-content-items]", inputs: ["items"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TableOfContentItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: TableOfContentItemsComponent, isStandalone: true, selector: "ul[f-table-of-content-items]", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@for (item of items(); track item.hash) {\n  <li [class.active]=\"item.isActive\"><a class=\"text-ellipsis\" [href]=\"item.hash\">{{ item.title }}</a></li>\n  @if (item.children) {\n    <ul f-table-of-content-items [items]=\"item.children\"></ul>\n  }\n}\n", styles: [":host{list-style:none;margin:0;padding:0}:host li{overflow-wrap:break-word;color:var(--secondary-text);max-width:180px}:host li a{display:block;line-height:var(--on-page-navigation-item-height);font-size:14px;color:inherit;font-weight:400}:host li.active{color:var(--primary-text)}:host li+ul{padding:0 16px}\n"], dependencies: [{ kind: "component", type: TableOfContentItemsComponent, selector: "ul[f-table-of-content-items]", inputs: ["items"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableOfContentItemsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TableOfContentItemsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ul[f-table-of-content-items]', changeDetection: ChangeDetectionStrategy.Default, standalone: true, template: "@for (item of items(); track item.hash) {\n  <li [class.active]=\"item.isActive\"><a class=\"text-ellipsis\" [href]=\"item.hash\">{{ item.title }}</a></li>\n  @if (item.children) {\n    <ul f-table-of-content-items [items]=\"item.children\"></ul>\n  }\n}\n", styles: [":host{list-style:none;margin:0;padding:0}:host li{overflow-wrap:break-word;color:var(--secondary-text);max-width:180px}:host li a{display:block;line-height:var(--on-page-navigation-item-height);font-size:14px;color:inherit;font-weight:400}:host li.active{color:var(--primary-text)}:host li+ul{padding:0 16px}\n"] }]
         }] });
@@ -2334,12 +1941,14 @@ class GetAbsoluteTopToContainerRequest {
 
 class CalculateHashFromScrollPositionAndActivateTocHandler {
     _injector;
-    _browser;
+    _docElement;
+    _window;
     _provider;
     _scrollableContainer;
     constructor(_injector) {
         this._injector = _injector;
-        this._browser = _injector.get(BrowserService);
+        this._docElement = _injector.get(DOCUMENT_ELEMENT);
+        this._window = _injector.get(WINDOW);
         this._provider = _injector.get(DocumentationStore);
         this._scrollableContainer = _injector.get(SCROLLABLE_CONTAINER);
     }
@@ -2361,8 +1970,8 @@ class CalculateHashFromScrollPositionAndActivateTocHandler {
         return this._scrollableContainer.htmlElement.scrollTop + this._getHeaderHeight();
     }
     _getHeaderHeight() {
-        return parseInt(this._browser.window
-            .getComputedStyle(this._browser.document.documentElement)
+        return parseInt(this._window
+            .getComputedStyle(this._docElement)
             .getPropertyValue('--header-height'), 10);
     }
     _calculateElementsTopPositions() {
@@ -2593,9 +2202,9 @@ const SCROLLABLE_CONTAINER = new InjectionToken('SCROLLABLE_CONTAINER');
 
 class TableOfContentComponent {
     _elementRef = inject((ElementRef));
-    _browser = inject(BrowserService);
     _provider = inject(DocumentationStore);
     _injector = inject(Injector);
+    _window = inject(WINDOW);
     tocData = computed(() => {
         return this._provider.tocData();
     });
@@ -2609,7 +2218,7 @@ class TableOfContentComponent {
         return (activeIndex + 1) * itemHeight + itemHeight / 4;
     }
     _getComputedStyle(element) {
-        return this._browser.window.getComputedStyle(element);
+        return this._window.getComputedStyle(element);
     }
     _onDocumentClick(event) {
         const target = event.target;
@@ -2622,10 +2231,10 @@ class TableOfContentComponent {
         new ActivateTocByHashHandler(this._injector).handle(new ActivateTocByHashRequest(hash));
         new ScrollToElementInContainerHandler(this._injector).handle(new ScrollToElementInContainerRequest(hash));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableOfContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TableOfContentComponent, isStandalone: true, selector: "aside[f-table-of-content]", host: { listeners: { "click": "_onDocumentClick($event)" } }, ngImport: i0, template: "@let data = tocData();\n@if (data) {\n  <div class=\"title\">{{ title || 'In this article' }}</div>\n  <ul f-table-of-content-items [items]=\"data.tree\"></ul>\n  <div class=\"active-marker\" [style.top]=\"activeMarkerPosition() + 'px'\"></div>\n}\n\n", styles: [":host{--on-page-navigation-item-height: 32px;display:none;padding-left:16px;border-left:1px solid var(--divider-color);font-size:13px;font-weight:500;position:relative}:host .title{line-height:32px;font-size:14px;font-weight:600}@media (min-width: 1280px){:host{display:block;width:var(--on-page-navigation-width);position:fixed;top:calc(var(--header-height) + 48px);right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 3)}}:host .active-marker{position:absolute;top:0;left:0;width:2px;height:calc(var(--on-page-navigation-item-height) / 2);border-radius:2px;background-color:var(--primary-1);transition:top .25s cubic-bezier(0,1,.5,1),opacity .25s}\n"], dependencies: [{ kind: "component", type: TableOfContentItemsComponent, selector: "ul[f-table-of-content-items]", inputs: ["items"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TableOfContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: TableOfContentComponent, isStandalone: true, selector: "aside[f-table-of-content]", host: { listeners: { "click": "_onDocumentClick($event)" } }, ngImport: i0, template: "@let data = tocData();\n@if (data) {\n  <div class=\"title\">{{ title || 'In this article' }}</div>\n  <ul f-table-of-content-items [items]=\"data.tree\"></ul>\n  <div class=\"active-marker\" [style.top]=\"activeMarkerPosition() + 'px'\"></div>\n}\n\n", styles: [":host{--on-page-navigation-item-height: 32px;display:none;padding-left:16px;border-left:1px solid var(--divider-color);font-size:13px;font-weight:500;position:relative}:host .title{line-height:32px;font-size:14px;font-weight:600}@media (min-width: 1280px){:host{display:block;width:var(--on-page-navigation-width);position:fixed;top:calc(var(--header-height) + 48px);right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 3)}}:host .active-marker{position:absolute;top:0;left:0;width:2px;height:calc(var(--on-page-navigation-item-height) / 2);border-radius:2px;background-color:var(--primary-1);transition:top .25s cubic-bezier(0,1,.5,1),opacity .25s}\n"], dependencies: [{ kind: "component", type: TableOfContentItemsComponent, selector: "ul[f-table-of-content-items]", inputs: ["items"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableOfContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TableOfContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'aside[f-table-of-content]', standalone: true, imports: [TableOfContentItemsComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let data = tocData();\n@if (data) {\n  <div class=\"title\">{{ title || 'In this article' }}</div>\n  <ul f-table-of-content-items [items]=\"data.tree\"></ul>\n  <div class=\"active-marker\" [style.top]=\"activeMarkerPosition() + 'px'\"></div>\n}\n\n", styles: [":host{--on-page-navigation-item-height: 32px;display:none;padding-left:16px;border-left:1px solid var(--divider-color);font-size:13px;font-weight:500;position:relative}:host .title{line-height:32px;font-size:14px;font-weight:600}@media (min-width: 1280px){:host{display:block;width:var(--on-page-navigation-width);position:fixed;top:calc(var(--header-height) + 48px);right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 3)}}:host .active-marker{position:absolute;top:0;left:0;width:2px;height:calc(var(--on-page-navigation-item-height) / 2);border-radius:2px;background-color:var(--primary-1);transition:top .25s cubic-bezier(0,1,.5,1),opacity .25s}\n"] }]
         }], propDecorators: { _onDocumentClick: [{
@@ -2645,15 +2254,15 @@ class ScrollableContainerComponent {
     _calculateHashAndActivate() {
         new CalculateHashFromScrollPositionAndActivateTocHandler(this._injector).handle();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ScrollableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ScrollableContainerComponent, isStandalone: true, selector: "f-scrollable-container", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ScrollableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: ScrollableContainerComponent, isStandalone: true, selector: "f-scrollable-container", providers: [
             {
                 provide: SCROLLABLE_CONTAINER,
                 useExisting: forwardRef(() => ScrollableContainerComponent),
             },
         ], ngImport: i0, template: "<ng-content></ng-content>\n<aside f-table-of-content></aside>\n\n\n", styles: [":host{position:relative;width:100%;height:100%;overflow:hidden;overflow-y:auto}\n"], dependencies: [{ kind: "component", type: TableOfContentComponent, selector: "aside[f-table-of-content]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ScrollableContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ScrollableContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-scrollable-container', standalone: true, providers: [
                         {
@@ -2672,7 +2281,8 @@ class FMarkdownRendererComponent {
     _activatedRoute = inject(ActivatedRoute);
     _destroyRef = inject(DestroyRef);
     _injector = inject(Injector);
-    _browser = inject(BrowserService);
+    _isBrowser = inject(IS_BROWSER_PLATFORM);
+    _window = inject(WINDOW);
     _markdown = inject(MarkdownService);
     _provider = inject(DocumentationStore);
     get _markdownPath() {
@@ -2693,7 +2303,7 @@ class FMarkdownRendererComponent {
     _updateRenderDependencies() {
         effect(() => {
             const html = this.value();
-            if (html && this._browser.isBrowser()) {
+            if (html && this._isBrowser) {
                 untracked(() => {
                     raf(() => {
                         new RenderDynamicComponentsHandler(this._injector).handle(new RenderDynamicComponentsRequest(this._hostElement));
@@ -2704,17 +2314,17 @@ class FMarkdownRendererComponent {
         }, { injector: this._injector });
     }
     _onDocumentClick(event) {
-        new HandleNavigationLinksHandler().handle(new HandleNavigationLinksRequest(event, this._browser, this._router));
+        new HandleNavigationLinksHandler().handle(new HandleNavigationLinksRequest(event, this._window, this._router));
     }
     ngOnDestroy() {
         this._provider.disposeDComponents();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FMarkdownRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FMarkdownRendererComponent, isStandalone: true, selector: "f-markdown-renderer", host: { listeners: { "click": "_onDocumentClick($event)" }, classAttribute: "m-render" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FMarkdownRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: FMarkdownRendererComponent, isStandalone: true, selector: "f-markdown-renderer", host: { listeners: { "click": "_onDocumentClick($event)" }, classAttribute: "m-render" }, providers: [
             MarkdownService,
         ], ngImport: i0, template: "<div [innerHTML]=\"value()\"></div>\n@if (value()) {\n  <footer f-markdown-footer></footer>\n}\n\n", styles: [":host{display:block;width:100%}@media (min-width: 1280px){:host{width:calc(100% - var(--on-page-navigation-width) - var(--page-padding))}}\n"], dependencies: [{ kind: "component", type: FMarkdownFooterComponent, selector: "footer [f-markdown-footer]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FMarkdownRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FMarkdownRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-markdown-renderer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         MarkdownService,
@@ -2730,10 +2340,10 @@ const raf = typeof requestAnimationFrame === 'function'
     : (fn) => setTimeout(fn);
 
 class MarkdownContainerComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MarkdownContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MarkdownContainerComponent, isStandalone: true, selector: "f-markdown-container", host: { attributes: { "ngSkipHydration": "" } }, ngImport: i0, template: "<f-markdown-renderer></f-markdown-renderer>\n\n", styles: [":host{display:block;width:100%;padding:48px var(--page-padding) 140px}:host [fMarkdownRenderer]{width:100%}@media (min-width: 1280px){:host{padding-right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2);padding-left:max(var(--page-padding),(100vw - var(--layout-max-width)) / 4)}:host [fMarkdownRenderer]{width:calc(100% - var(--on-page-navigation-width) - var(--page-padding))}}\n"], dependencies: [{ kind: "component", type: FMarkdownRendererComponent, selector: "f-markdown-renderer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MarkdownContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: MarkdownContainerComponent, isStandalone: true, selector: "f-markdown-container", host: { attributes: { "ngSkipHydration": "" } }, ngImport: i0, template: "<f-markdown-renderer></f-markdown-renderer>\n\n", styles: [":host{display:block;width:100%;padding:48px var(--page-padding) 140px}:host [fMarkdownRenderer]{width:100%}@media (min-width: 1280px){:host{padding-right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2);padding-left:max(var(--page-padding),(100vw - var(--layout-max-width)) / 4)}:host [fMarkdownRenderer]{width:calc(100% - var(--on-page-navigation-width) - var(--page-padding))}}\n"], dependencies: [{ kind: "component", type: FMarkdownRendererComponent, selector: "f-markdown-renderer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MarkdownContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MarkdownContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-markdown-container', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         FMarkdownRendererComponent,
@@ -2765,9 +2375,6 @@ var index$2 = /*#__PURE__*/Object.freeze({
     GetPreviousNextPageNavigationRequest: GetPreviousNextPageNavigationRequest,
     GetPreviousNextPageNavigationResponse: GetPreviousNextPageNavigationResponse,
     HighlightComponent: HighlightComponent,
-    HighlightService: HighlightService,
-    LANGUAGES: LANGUAGES,
-    MarkCodeFocusedBlocksPostProcessor: MarkCodeFocusedBlocksPostProcessor,
     MarkdownContainerComponent: MarkdownContainerComponent,
     MarkdownService: MarkdownService,
     ParseAlerts: ParseAlerts,
@@ -2792,7 +2399,15 @@ class DocumentationRootComponent {
     popover = inject(PopoverService).message;
     _metaService = inject(FMetaService);
     _destroyRef = inject(DestroyRef);
+    _gTagService = inject(GTagService, { optional: true });
+    _themeService = inject(ThemeService, { optional: true });
+    isBrowser = inject(IS_BROWSER_PLATFORM);
     ngOnInit() {
+        if (!this.isBrowser) {
+            return;
+        }
+        this._themeService?.initialize();
+        this._gTagService?.initialize();
         this._metaService.changes().pipe(takeUntilDestroyed(this._destroyRef))
             .subscribe();
     }
@@ -2803,8 +2418,9 @@ class DocumentationRootComponent {
         this._metaService.dispose();
         // Cleanup logic if needed
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentationRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DocumentationRootComponent, isStandalone: true, selector: "documentation-root", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DocumentationRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: DocumentationRootComponent, isStandalone: true, selector: "documentation-root", providers: [
+            HighlightService,
             DocumentationStore,
             FMetaService,
             {
@@ -2824,37 +2440,39 @@ class DocumentationRootComponent {
                 provide: TOGGLE_NAVIGATION_COMPONENT,
                 useExisting: DocumentationRootComponent,
             },
-        ], ngImport: i0, template: "<f-navigation-panel [class.visible]=\"isNavigationVisible()\"></f-navigation-panel>\n<div class=\"f-backdrop\" [class.visible]=\"isNavigationVisible()\" (click)=\"onToggleNavigation(false)\"></div>\n\n<f-scrollable-container>\n  <f-header></f-header>\n  <router-outlet></router-outlet>\n</f-scrollable-container>\n\n@if (popover()) {\n  <div class=\"popover\">{{ popover() }}</div>\n}\n", styles: [":host{display:flex;justify-content:flex-start;align-items:flex-start;height:100%;gap:5px}.f-backdrop{position:fixed;inset:0;opacity:0;z-index:var(--z-index-backdrop);background:var(--backdrop-color);transition:opacity .2s ease-in-out;pointer-events:none}.f-backdrop.visible{opacity:1;pointer-events:all}@media (min-width: 960px){.f-backdrop{position:unset}}.popover{position:fixed;min-width:120px;bottom:50%;left:50%;text-align:center;transform:translate(-50%,-50%);background-color:var(--code-view-copy-button-hover-background);border:1px solid var(--code-view-copy-button-border-color);box-shadow:var(--shadow-3);color:var(--primary-text);font-size:14px;padding:4px 8px;border-radius:4px;z-index:var(--z-index-popover);opacity:1}\n"], dependencies: [{ kind: "component", type: NavigationPanelComponent, selector: "f-navigation-panel" }, { kind: "component", type: ScrollableContainerComponent, selector: "f-scrollable-container" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: HeaderComponent, selector: "f-header" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentationRootComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'documentation-root', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        DocumentationStore,
-                        FMetaService,
-                        {
-                            provide: F_PREVIEW_NAVIGATION_PROVIDER,
-                            useExisting: DocumentationStore,
-                        },
-                        {
-                            provide: F_SOCIAL_LINKS_PROVIDER,
-                            useExisting: DocumentationStore,
-                        },
-                        {
-                            provide: HEADER_CONFIGURATION_STORE,
-                            useExisting: DocumentationStore,
-                        },
-                        FPreviewGroupService,
-                        {
-                            provide: TOGGLE_NAVIGATION_COMPONENT,
-                            useExisting: DocumentationRootComponent,
-                        },
-                    ], imports: [
-                        NavigationPanelComponent,
-                        ScrollableContainerComponent,
-                        RouterOutlet,
-                        HeaderComponent,
-                    ], template: "<f-navigation-panel [class.visible]=\"isNavigationVisible()\"></f-navigation-panel>\n<div class=\"f-backdrop\" [class.visible]=\"isNavigationVisible()\" (click)=\"onToggleNavigation(false)\"></div>\n\n<f-scrollable-container>\n  <f-header></f-header>\n  <router-outlet></router-outlet>\n</f-scrollable-container>\n\n@if (popover()) {\n  <div class=\"popover\">{{ popover() }}</div>\n}\n", styles: [":host{display:flex;justify-content:flex-start;align-items:flex-start;height:100%;gap:5px}.f-backdrop{position:fixed;inset:0;opacity:0;z-index:var(--z-index-backdrop);background:var(--backdrop-color);transition:opacity .2s ease-in-out;pointer-events:none}.f-backdrop.visible{opacity:1;pointer-events:all}@media (min-width: 960px){.f-backdrop{position:unset}}.popover{position:fixed;min-width:120px;bottom:50%;left:50%;text-align:center;transform:translate(-50%,-50%);background-color:var(--code-view-copy-button-hover-background);border:1px solid var(--code-view-copy-button-border-color);box-shadow:var(--shadow-3);color:var(--primary-text);font-size:14px;padding:4px 8px;border-radius:4px;z-index:var(--z-index-popover);opacity:1}\n"] }]
-        }] });
+        ], ngImport: i0, template: "<f-navigation-panel [class.visible]=\"isNavigationVisible()\"></f-navigation-panel>\n<div class=\"f-backdrop\" [class.visible]=\"isNavigationVisible()\" (click)=\"onToggleNavigation(false)\"></div>\n\n<f-scrollable-container>\n  <f-header></f-header>\n  <router-outlet></router-outlet>\n</f-scrollable-container>\n\n@if (popover()) {\n  <div class=\"popover\">{{ popover() }}</div>\n}\n@defer (when isBrowser) {\n  <cookie-popup/>\n}\n", styles: [":host{display:flex;justify-content:flex-start;align-items:flex-start;height:100%;gap:5px}.f-backdrop{position:fixed;inset:0;opacity:0;z-index:var(--z-index-backdrop);background:var(--backdrop-color);transition:opacity .2s ease-in-out;pointer-events:none}.f-backdrop.visible{opacity:1;pointer-events:all}@media (min-width: 960px){.f-backdrop{position:unset}}.popover{position:fixed;min-width:120px;bottom:50%;left:50%;text-align:center;transform:translate(-50%,-50%);background-color:var(--code-view-copy-button-hover-background);border:1px solid var(--code-view-copy-button-border-color);box-shadow:var(--shadow-3);color:var(--primary-text);font-size:14px;padding:4px 8px;border-radius:4px;z-index:var(--z-index-popover);opacity:1}\n"], dependencies: [{ kind: "component", type: NavigationPanelComponent, selector: "f-navigation-panel" }, { kind: "component", type: ScrollableContainerComponent, selector: "f-scrollable-container" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: HeaderComponent, selector: "f-header" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [import('./foblex-m-render-cookie-popup.component-CqwZv5lc.mjs').then(m => m.CookiePopupComponent)]] });
+}
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.11", ngImport: i0, type: DocumentationRootComponent, resolveDeferredDeps: () => [import('./foblex-m-render-cookie-popup.component-CqwZv5lc.mjs').then(m => m.CookiePopupComponent)], resolveMetadata: CookiePopupComponent => ({ decorators: [{
+                type: Component,
+                args: [{ selector: 'documentation-root', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                            HighlightService,
+                            DocumentationStore,
+                            FMetaService,
+                            {
+                                provide: F_PREVIEW_NAVIGATION_PROVIDER,
+                                useExisting: DocumentationStore,
+                            },
+                            {
+                                provide: F_SOCIAL_LINKS_PROVIDER,
+                                useExisting: DocumentationStore,
+                            },
+                            {
+                                provide: HEADER_CONFIGURATION_STORE,
+                                useExisting: DocumentationStore,
+                            },
+                            FPreviewGroupService,
+                            {
+                                provide: TOGGLE_NAVIGATION_COMPONENT,
+                                useExisting: DocumentationRootComponent,
+                            },
+                        ], imports: [
+                            NavigationPanelComponent,
+                            ScrollableContainerComponent,
+                            RouterOutlet,
+                            HeaderComponent,
+                            CookiePopupComponent,
+                        ], template: "<f-navigation-panel [class.visible]=\"isNavigationVisible()\"></f-navigation-panel>\n<div class=\"f-backdrop\" [class.visible]=\"isNavigationVisible()\" (click)=\"onToggleNavigation(false)\"></div>\n\n<f-scrollable-container>\n  <f-header></f-header>\n  <router-outlet></router-outlet>\n</f-scrollable-container>\n\n@if (popover()) {\n  <div class=\"popover\">{{ popover() }}</div>\n}\n@defer (when isBrowser) {\n  <cookie-popup/>\n}\n", styles: [":host{display:flex;justify-content:flex-start;align-items:flex-start;height:100%;gap:5px}.f-backdrop{position:fixed;inset:0;opacity:0;z-index:var(--z-index-backdrop);background:var(--backdrop-color);transition:opacity .2s ease-in-out;pointer-events:none}.f-backdrop.visible{opacity:1;pointer-events:all}@media (min-width: 960px){.f-backdrop{position:unset}}.popover{position:fixed;min-width:120px;bottom:50%;left:50%;text-align:center;transform:translate(-50%,-50%);background-color:var(--code-view-copy-button-hover-background);border:1px solid var(--code-view-copy-button-border-color);box-shadow:var(--shadow-3);color:var(--primary-text);font-size:14px;padding:4px 8px;border-radius:4px;z-index:var(--z-index-popover);opacity:1}\n"] }]
+            }], ctorParameters: null, propDecorators: null }) });
 
 const DOCUMENTATION_ROUTES = [
     {
@@ -2883,11 +2501,9 @@ var index$1 = /*#__PURE__*/Object.freeze({
     DocumentationStore: DocumentationStore,
     get EMarkdownContainerType () { return EMarkdownContainerType; },
     get EParsedContainerType () { return EParsedContainerType; },
-    FAnalyticsService: FAnalyticsService,
     FCodeGroupComponent: FCodeGroupComponent,
     FCodeGroupTabsComponent: FCodeGroupTabsComponent,
     FCodeViewComponent: FCodeViewComponent,
-    FCookiePopupComponent: FCookiePopupComponent,
     FExampleViewComponent: FExampleViewComponent,
     FFooterEditInformationComponent: FFooterEditInformationComponent,
     FFooterNavigationButtonComponent: FFooterNavigationButtonComponent,
@@ -2901,7 +2517,6 @@ var index$1 = /*#__PURE__*/Object.freeze({
     FPreviewComponent: FPreviewComponent,
     FPreviewGroupFiltersComponent: FPreviewGroupFiltersComponent,
     FPreviewGroupService: FPreviewGroupService,
-    F_ACCEPT_COOKIES_KEY: F_ACCEPT_COOKIES_KEY,
     F_PREVIEW_NAVIGATION_PROVIDER: F_PREVIEW_NAVIGATION_PROVIDER,
     GetAbsoluteTopToContainerHandler: GetAbsoluteTopToContainerHandler,
     GetAbsoluteTopToContainerRequest: GetAbsoluteTopToContainerRequest,
@@ -2913,9 +2528,6 @@ var index$1 = /*#__PURE__*/Object.freeze({
     HandleNavigationLinksRequest: HandleNavigationLinksRequest,
     HeaderComponent: HeaderComponent,
     HighlightComponent: HighlightComponent,
-    HighlightService: HighlightService,
-    LANGUAGES: LANGUAGES,
-    MarkCodeFocusedBlocksPostProcessor: MarkCodeFocusedBlocksPostProcessor,
     MarkdownContainerComponent: MarkdownContainerComponent,
     MarkdownService: MarkdownService,
     NavigationGroupComponent: NavigationGroupComponent,
@@ -2955,8 +2567,7 @@ var index$1 = /*#__PURE__*/Object.freeze({
     provideDocumentationMeta: provideDocumentationMeta,
     provideFooterNavigation: provideFooterNavigation,
     provideNavigation: provideNavigation,
-    provideTocData: provideTocData,
-    setCookieConsent: setCookieConsent
+    provideTocData: provideTocData
 });
 
 function provideBackground(background) {
@@ -3035,19 +2646,19 @@ class HomeStore {
     getHeader() {
         return this._configuration.header;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HomeStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HomeStore });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HomeStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HomeStore });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HomeStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HomeStore, decorators: [{
             type: Injectable
         }] });
 
 class FHomePageButtonsRowComponent {
     viewModel = inject(HomeStore).getButtons();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FHomePageButtonsRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FHomePageButtonsRowComponent, isStandalone: true, selector: "f-home-page-buttons-row", host: { properties: { "class.display-none": "!viewModel.length" } }, ngImport: i0, template: "@for (button of viewModel; track button.text) {\n  @if (button.routerLink) {\n    <a class=\"f-button\" [class.primary]=\"button.primary\" routerLink=\"{{ button.routerLink }}\">\n      @if (button.icon) {\n        <span class=\"f-icon {{ button.icon }}\"></span>\n      }\n      {{ button.text }}\n    </a>\n  } @else if(button.href) {\n    <a class=\"f-button\" [class.primary]=\"button.primary\" href=\"{{ button.href }}\" target=\"_blank\" rel=\"noopener noreferrer\">\n      @if (button.icon) {\n        <span class=\"f-icon {{ button.icon }}\"></span>\n      }\n      {{ button.text }}\n    </a>\n  }\n}\n\n", styles: [":host{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:fit-content;margin:0 auto;padding:32px 10px 0}@media (min-width: 960px){:host{margin:0;padding:32px 0 0;justify-content:flex-start}}.f-button{display:flex;align-items:center;gap:6px}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FHomePageButtonsRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: FHomePageButtonsRowComponent, isStandalone: true, selector: "f-home-page-buttons-row", host: { properties: { "class.display-none": "!viewModel.length" } }, ngImport: i0, template: "@for (button of viewModel; track button.text) {\n  @if (button.routerLink) {\n    <a class=\"f-button\" [class.primary]=\"button.primary\" routerLink=\"{{ button.routerLink }}\">\n      @if (button.icon) {\n        <span class=\"f-icon {{ button.icon }}\"></span>\n      }\n      {{ button.text }}\n    </a>\n  } @else if(button.href) {\n    <a class=\"f-button\" [class.primary]=\"button.primary\" href=\"{{ button.href }}\" target=\"_blank\" rel=\"noopener noreferrer\">\n      @if (button.icon) {\n        <span class=\"f-icon {{ button.icon }}\"></span>\n      }\n      {{ button.text }}\n    </a>\n  }\n}\n\n", styles: [":host{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:fit-content;margin:0 auto;padding:32px 10px 0}@media (min-width: 960px){:host{margin:0;padding:32px 0 0;justify-content:flex-start}}.f-button{display:flex;align-items:center;gap:6px}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FHomePageButtonsRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FHomePageButtonsRowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-home-page-buttons-row', standalone: true, imports: [
                         RouterLink,
@@ -3058,10 +2669,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class FHomePageFeaturesComponent {
     viewModel = inject(HomeStore).getFeatures();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FHomePageFeaturesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FHomePageFeaturesComponent, isStandalone: true, selector: "f-home-page-features", host: { properties: { "class.display-none": "!viewModel.length" } }, ngImport: i0, template: "<div class=\"feature-list\">\n  @for (feature of viewModel; track feature.headline) {\n    <div class=\"feature\">\n      <h2>{{ feature.headline }}</h2>\n      <p>{{ feature.description }}</p>\n    </div>\n  }\n</div>\n\n", styles: [":host{margin-top:64px;margin-bottom:64px;width:100%;display:block;padding:0 24px}:host .feature-list{margin:0 auto;display:flex;flex-wrap:wrap;gap:16px;max-width:1248px;pointer-events:none}:host .feature{width:100%;border-radius:4px;background-color:var(--soft-background);display:flex;flex-direction:column;padding:24px;pointer-events:all}:host .feature h2{margin:0;line-height:24px;font-size:16px;font-weight:600}:host .feature p{flex-grow:1;padding-top:8px;line-height:24px;font-size:14px;font-weight:500;color:var(--secondary-text)}@media (min-width: 640px){:host{padding:0 48px}:host .feature{width:calc(50% - 12px)}}@media (min-width: 960px){:host{padding:0 64px}:host .feature{width:calc(25% - 12px)}}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FHomePageFeaturesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: FHomePageFeaturesComponent, isStandalone: true, selector: "f-home-page-features", host: { properties: { "class.display-none": "!viewModel.length" } }, ngImport: i0, template: "<div class=\"feature-list\">\n  @for (feature of viewModel; track feature.headline) {\n    <div class=\"feature\">\n      <h2>{{ feature.headline }}</h2>\n      <p>{{ feature.description }}</p>\n    </div>\n  }\n</div>\n\n", styles: [":host{margin-top:64px;margin-bottom:64px;width:100%;display:block;padding:0 24px}:host .feature-list{margin:0 auto;display:flex;flex-wrap:wrap;gap:16px;max-width:1248px;pointer-events:none}:host .feature{width:100%;border-radius:4px;background-color:var(--soft-background);display:flex;flex-direction:column;padding:24px;pointer-events:all}:host .feature h2{margin:0;line-height:24px;font-size:16px;font-weight:600}:host .feature p{flex-grow:1;padding-top:8px;line-height:24px;font-size:14px;font-weight:500;color:var(--secondary-text)}@media (min-width: 640px){:host{padding:0 48px}:host .feature{width:calc(50% - 12px)}}@media (min-width: 960px){:host{padding:0 64px}:host .feature{width:calc(25% - 12px)}}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FHomePageFeaturesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FHomePageFeaturesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-home-page-features', standalone: true, host: {
                         '[class.display-none]': '!viewModel.length',
@@ -3070,10 +2681,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class FHomePageFooterComponent {
     viewModel = inject(HomeStore).getFooter();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FHomePageFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FHomePageFooterComponent, isStandalone: true, selector: "footer[f-home-page-footer]", ngImport: i0, template: "<div class=\"content\">\n  <div class=\"flex-space\"></div>\n  <div>\n    <div class=\"item\">Created with Foblex <a href=\"https://m-render.foblex.com/\" target=\"_blank\">MRender</a></div>\n    <div class=\"item\">{{ viewModel.text }}</div>\n  </div>\n</div>\n\n", styles: [":host{position:relative;z-index:5;padding:0 24px}:host .content{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;width:100%;height:64px;max-width:1376px;margin:0 auto}:host .item{line-height:20px;font-size:12px;font-weight:500;color:var(--secondary-text);text-align:right}@media (min-width: 640px){:host{padding:0 48px}}@media (min-width: 960px){:host{padding:0 64px}}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FHomePageFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: FHomePageFooterComponent, isStandalone: true, selector: "footer[f-home-page-footer]", ngImport: i0, template: "<div class=\"content\">\n  <div class=\"flex-space\"></div>\n  <div>\n    <div class=\"item\">Created with Foblex <a href=\"https://m-render.foblex.com/\" target=\"_blank\">MRender</a></div>\n    <div class=\"item\">{{ viewModel.text }}</div>\n  </div>\n</div>\n\n", styles: [":host{position:relative;z-index:5;padding:0 24px}:host .content{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;width:100%;height:64px;max-width:1376px;margin:0 auto}:host .item{line-height:20px;font-size:12px;font-weight:500;color:var(--secondary-text);text-align:right}@media (min-width: 640px){:host{padding:0 48px}}@media (min-width: 960px){:host{padding:0 64px}}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FHomePageFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FHomePageFooterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'footer[f-home-page-footer]', standalone: true, template: "<div class=\"content\">\n  <div class=\"flex-space\"></div>\n  <div>\n    <div class=\"item\">Created with Foblex <a href=\"https://m-render.foblex.com/\" target=\"_blank\">MRender</a></div>\n    <div class=\"item\">{{ viewModel.text }}</div>\n  </div>\n</div>\n\n", styles: [":host{position:relative;z-index:5;padding:0 24px}:host .content{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;width:100%;height:64px;max-width:1376px;margin:0 auto}:host .item{line-height:20px;font-size:12px;font-weight:500;color:var(--secondary-text);text-align:right}@media (min-width: 640px){:host{padding:0 48px}}@media (min-width: 960px){:host{padding:0 64px}}\n"] }]
         }] });
@@ -3081,22 +2692,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 class FHomePageHeaderComponent {
     logo = inject(HomeStore).getLogo();
     title = inject(HomeStore).getTitle();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FHomePageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FHomePageHeaderComponent, isStandalone: true, selector: "header[f-home-page-header]", ngImport: i0, template: "<div class=\"content\">\n  <a class=\"logo-link\" href=\"/libs/public\" aria-label=\"Home\">\n    <img [src]=\"logo\" class=\"logo\" alt=\"{{ title }} Logo\" width=\"24\" height=\"24\"/>\n    <span class=\"title\">{{ title }}</span>\n  </a>\n\n  <div class=\"flex-space\"></div>\n  <button f-theme-button aria-label=\"Change theme\"></button>\n</div>\n\n", styles: [":host{position:relative;z-index:5;padding:0 24px}:host .logo-link{display:flex;align-items:center;text-decoration:none}:host .content{display:flex;justify-content:flex-start;align-items:center;width:100%;height:64px;max-width:1376px;margin:0 auto}:host .logo{margin-right:8px}:host .title{display:flex;align-items:center;border-bottom:1px solid transparent;width:100%;font-size:16px;font-weight:600;color:var(--primary-text)}@media (min-width: 640px){:host{padding:0 48px}}@media (min-width: 960px){:host{padding:0 64px}}\n"], dependencies: [{ kind: "component", type: FThemeButtonComponent, selector: "button[f-theme-button]" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FHomePageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: FHomePageHeaderComponent, isStandalone: true, selector: "header[f-home-page-header]", ngImport: i0, template: "<div class=\"content\">\n  <a class=\"logo-link\" href=\"\" aria-label=\"Home\">\n    <img [src]=\"logo\" class=\"logo\" alt=\"{{ title }} Logo\" width=\"24\" height=\"24\"/>\n    <span class=\"title\">{{ title }}</span>\n  </a>\n\n  <div class=\"flex-space\"></div>\n  <button theme-button aria-label=\"Change theme\"></button>\n</div>\n\n", styles: [":host{position:relative;z-index:5;padding:0 24px}:host .logo-link{display:flex;align-items:center;text-decoration:none}:host .content{display:flex;justify-content:flex-start;align-items:center;width:100%;height:64px;max-width:1376px;margin:0 auto}:host .logo{margin-right:8px}:host .title{display:flex;align-items:center;border-bottom:1px solid transparent;width:100%;font-size:16px;font-weight:600;color:var(--primary-text)}@media (min-width: 640px){:host{padding:0 48px}}@media (min-width: 960px){:host{padding:0 64px}}\n"], dependencies: [{ kind: "component", type: ThemeButtonComponent, selector: "button[theme-button]" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FHomePageHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FHomePageHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'header[f-home-page-header]', standalone: true, imports: [
-                        FThemeButtonComponent,
-                    ], template: "<div class=\"content\">\n  <a class=\"logo-link\" href=\"/libs/public\" aria-label=\"Home\">\n    <img [src]=\"logo\" class=\"logo\" alt=\"{{ title }} Logo\" width=\"24\" height=\"24\"/>\n    <span class=\"title\">{{ title }}</span>\n  </a>\n\n  <div class=\"flex-space\"></div>\n  <button f-theme-button aria-label=\"Change theme\"></button>\n</div>\n\n", styles: [":host{position:relative;z-index:5;padding:0 24px}:host .logo-link{display:flex;align-items:center;text-decoration:none}:host .content{display:flex;justify-content:flex-start;align-items:center;width:100%;height:64px;max-width:1376px;margin:0 auto}:host .logo{margin-right:8px}:host .title{display:flex;align-items:center;border-bottom:1px solid transparent;width:100%;font-size:16px;font-weight:600;color:var(--primary-text)}@media (min-width: 640px){:host{padding:0 48px}}@media (min-width: 960px){:host{padding:0 64px}}\n"] }]
+                        ThemeButtonComponent,
+                    ], template: "<div class=\"content\">\n  <a class=\"logo-link\" href=\"\" aria-label=\"Home\">\n    <img [src]=\"logo\" class=\"logo\" alt=\"{{ title }} Logo\" width=\"24\" height=\"24\"/>\n    <span class=\"title\">{{ title }}</span>\n  </a>\n\n  <div class=\"flex-space\"></div>\n  <button theme-button aria-label=\"Change theme\"></button>\n</div>\n\n", styles: [":host{position:relative;z-index:5;padding:0 24px}:host .logo-link{display:flex;align-items:center;text-decoration:none}:host .content{display:flex;justify-content:flex-start;align-items:center;width:100%;height:64px;max-width:1376px;margin:0 auto}:host .logo{margin-right:8px}:host .title{display:flex;align-items:center;border-bottom:1px solid transparent;width:100%;font-size:16px;font-weight:600;color:var(--primary-text)}@media (min-width: 640px){:host{padding:0 48px}}@media (min-width: 960px){:host{padding:0 64px}}\n"] }]
         }] });
 
 class FHomePageHeroComponent {
     viewModel = inject(HomeStore).getHero();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FHomePageHeroComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FHomePageHeroComponent, isStandalone: true, selector: "f-home-page-hero", ngImport: i0, template: "<h1>{{ viewModel.headline }}</h1>\n<p class=\"powered\">{{ viewModel.tagline1 }}</p>\n<p class=\"powered\">{{ viewModel.tagline2 }}</p>\n<p class=\"second-description\">{{ viewModel.subDescription }}</p>\n<f-home-page-buttons-row></f-home-page-buttons-row>\n", styles: [":host{display:block;width:100%;padding:0 10px}@media (min-width: 640px){:host{padding:0;width:100%}}@media (min-width: 960px){:host{width:50%}}.powered,h1{letter-spacing:-.4px;line-height:40px;font-size:32px;font-weight:700;width:fit-content;margin:0 auto;text-align:center;white-space:pre-wrap;pointer-events:all}@media (min-width: 640px){.powered,h1{line-height:56px;font-size:48px}}@media (min-width: 960px){.powered,h1{line-height:64px;font-size:56px;margin:0;text-align:left}}h1{background:-webkit-linear-gradient(120deg,#bd34fe 30%,#41d1ff);background-clip:text;color:transparent}.second-description{line-height:28px;font-size:18px;font-weight:500;white-space:pre-wrap;color:var(--secondary-text);margin:0 auto;width:fit-content;pointer-events:all;text-align:center;padding:8px 16px 0}@media (min-width: 640px){.second-description{padding-top:12px;line-height:32px;font-size:20px}}@media (min-width: 960px){.second-description{line-height:36px;font-size:24px;margin:0;text-align:left;padding:8px 0 0}}\n"], dependencies: [{ kind: "component", type: FHomePageButtonsRowComponent, selector: "f-home-page-buttons-row" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FHomePageHeroComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: FHomePageHeroComponent, isStandalone: true, selector: "f-home-page-hero", ngImport: i0, template: "<h1>{{ viewModel.headline }}</h1>\n<p class=\"powered\">{{ viewModel.tagline1 }}</p>\n<p class=\"powered\">{{ viewModel.tagline2 }}</p>\n<p class=\"second-description\">{{ viewModel.subDescription }}</p>\n<f-home-page-buttons-row></f-home-page-buttons-row>\n", styles: [":host{display:block;width:100%;padding:0 10px}@media (min-width: 640px){:host{padding:0;width:100%}}@media (min-width: 960px){:host{width:50%}}.powered,h1{letter-spacing:-.4px;line-height:40px;font-size:32px;font-weight:700;width:fit-content;margin:0 auto;text-align:center;white-space:pre-wrap;pointer-events:all}@media (min-width: 640px){.powered,h1{line-height:56px;font-size:48px}}@media (min-width: 960px){.powered,h1{line-height:64px;font-size:56px;margin:0;text-align:left}}h1{background:-webkit-linear-gradient(120deg,#bd34fe 30%,#41d1ff);background-clip:text;color:transparent}.second-description{line-height:28px;font-size:18px;font-weight:500;white-space:pre-wrap;color:var(--secondary-text);margin:0 auto;width:fit-content;pointer-events:all;text-align:center;padding:8px 16px 0}@media (min-width: 640px){.second-description{padding-top:12px;line-height:32px;font-size:20px}}@media (min-width: 960px){.second-description{line-height:36px;font-size:24px;margin:0;text-align:left;padding:8px 0 0}}\n"], dependencies: [{ kind: "component", type: FHomePageButtonsRowComponent, selector: "f-home-page-buttons-row" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FHomePageHeroComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FHomePageHeroComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-home-page-hero', standalone: true, imports: [
                         FHomePageButtonsRowComponent,
@@ -3105,10 +2716,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class FHomePageMembershipsComponent {
     viewModel = inject(HomeStore).getMemberships();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FHomePageMembershipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FHomePageMembershipsComponent, isStandalone: true, selector: "f-home-page-memberships", host: { properties: { "class.display-none": "!viewModel.length" } }, ngImport: i0, template: "<div class=\"membership-list\">\n  @for (membership of viewModel; track membership.id) {\n    <div class=\"membership\">\n      <h2>{{ membership.name }}</h2>\n      <p>{{ membership.description }}</p>\n      <div class=\"benefit-list\">\n        @for (benefit of membership.benefits; track benefit) {\n          <p class=\"benefit\">\u2705 {{ benefit }}</p>\n        }\n      </div>\n      <a class=\"f-button\" [href]=\"membership.buttonRef\">{{ membership.buttonText }}</a>\n    </div>\n  }\n</div>\n", styles: [":host{margin-top:64px;margin-bottom:64px;width:100%;display:block;padding:0 24px}:host .membership-list{margin:0 auto;display:flex;flex-wrap:wrap;gap:16px;max-width:1248px;pointer-events:none}:host .membership{width:100%;border-radius:4px;background-color:var(--soft-background);display:flex;flex-direction:column;padding:24px;position:relative;pointer-events:all}:host .membership h2{margin:0;line-height:24px;font-size:16px;font-weight:600}:host .membership p{flex-grow:1;padding-top:8px;line-height:24px;font-size:14px;font-weight:500;color:var(--secondary-text)}:host .membership .price{color:var(--primary-text);font-size:1.2rem;font-weight:700;padding-top:16px}:host .membership .price span{font-weight:600;color:var(--primary-color)}:host .membership .benefit-list{display:flex;flex-direction:column;padding:16px 0}@media (min-width: 640px){:host{padding:0 48px}:host .membership{width:calc(50% - 12px);min-width:unset}}@media (min-width: 960px){:host{padding:0 64px}:host .membership{width:calc(25% - 12px);min-width:300px}}.ribbon{position:absolute;top:-10px;right:-10px;color:var(--button-primary-text);background-color:var(--button-primary-bg);padding:4px 8px;font-size:.8rem;border-radius:2px}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FHomePageMembershipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: FHomePageMembershipsComponent, isStandalone: true, selector: "f-home-page-memberships", host: { properties: { "class.display-none": "!viewModel.length" } }, ngImport: i0, template: "<div class=\"membership-list\">\n  @for (membership of viewModel; track membership.id) {\n    <div class=\"membership\">\n      <h2>{{ membership.name }}</h2>\n      <p>{{ membership.description }}</p>\n      <div class=\"benefit-list\">\n        @for (benefit of membership.benefits; track benefit) {\n          <p class=\"benefit\">\u2705 {{ benefit }}</p>\n        }\n      </div>\n      <a class=\"f-button\" [href]=\"membership.buttonRef\">{{ membership.buttonText }}</a>\n    </div>\n  }\n</div>\n", styles: [":host{margin-top:64px;margin-bottom:64px;width:100%;display:block;padding:0 24px}:host .membership-list{margin:0 auto;display:flex;flex-wrap:wrap;gap:16px;max-width:1248px;pointer-events:none}:host .membership{width:100%;border-radius:4px;background-color:var(--soft-background);display:flex;flex-direction:column;padding:24px;position:relative;pointer-events:all}:host .membership h2{margin:0;line-height:24px;font-size:16px;font-weight:600}:host .membership p{flex-grow:1;padding-top:8px;line-height:24px;font-size:14px;font-weight:500;color:var(--secondary-text)}:host .membership .price{color:var(--primary-text);font-size:1.2rem;font-weight:700;padding-top:16px}:host .membership .price span{font-weight:600;color:var(--primary-color)}:host .membership .benefit-list{display:flex;flex-direction:column;padding:16px 0}@media (min-width: 640px){:host{padding:0 48px}:host .membership{width:calc(50% - 12px);min-width:unset}}@media (min-width: 960px){:host{padding:0 64px}:host .membership{width:calc(25% - 12px);min-width:300px}}.ribbon{position:absolute;top:-10px;right:-10px;color:var(--button-primary-text);background-color:var(--button-primary-bg);padding:4px 8px;font-size:.8rem;border-radius:2px}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FHomePageMembershipsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FHomePageMembershipsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-home-page-memberships', standalone: true, host: {
                         '[class.display-none]': '!viewModel.length',
@@ -3117,8 +2728,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class HomeRootComponent {
     _environment = inject(HomeStore);
+    _gTagService = inject(GTagService, { optional: true });
+    _themeService = inject(ThemeService, { optional: true });
+    isBrowser = inject(IS_BROWSER_PLATFORM);
     _backgroundContainer;
     _heroImageContainer;
+    ngOnInit() {
+        if (!this.isBrowser) {
+            return;
+        }
+        this._themeService?.initialize();
+        this._gTagService?.initialize();
+    }
     ngAfterViewInit() {
         this._renderImageComponent(this._environment.getImageComponent());
         this._renderBackgroundComponent(this._environment.getBackgroundComponent());
@@ -3142,37 +2763,38 @@ class HomeRootComponent {
     _requestComponentRedraw(componentRef) {
         componentRef.changeDetectorRef.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HomeRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: HomeRootComponent, isStandalone: true, selector: "home-root", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HomeRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: HomeRootComponent, isStandalone: true, selector: "home-root", providers: [
             HomeStore,
             {
                 provide: HEADER_CONFIGURATION_STORE,
                 useExisting: HomeStore,
             },
-        ], viewQueries: [{ propertyName: "_backgroundContainer", first: true, predicate: ["backgroundContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_heroImageContainer", first: true, predicate: ["heroImageContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<ng-container #backgroundContainer></ng-container>\n<header f-home-page-header></header>\n\n<div class=\"body\">\n  <div class=\"hero-row\">\n    <f-home-page-hero></f-home-page-hero>\n    <ng-container #heroImageContainer></ng-container>\n  </div>\n  <f-home-page-features></f-home-page-features>\n  <f-home-page-memberships></f-home-page-memberships>\n</div>\n\n<div class=\"flex-space\"></div>\n<footer f-home-page-footer></footer>\n", styles: [":host{display:flex;flex-direction:column;position:relative;width:100%;height:100%;min-height:100%;overflow:hidden;overflow-y:auto}.body{position:relative;z-index:3;pointer-events:none}@media (min-width: 960px){.body{margin-top:50px}}@media (min-width: 1376px){.body{margin-top:100px}}.hero-row{display:flex;flex-direction:column-reverse;justify-content:space-between;align-items:center;margin:0 auto}@media (min-width: 960px){.hero-row{flex-direction:row;margin-left:64px;margin-right:64px}}@media (min-width: 1376px){.hero-row{flex-direction:row;margin-left:calc(50% - 624px);margin-right:calc(50% - 624px)}}\n"], dependencies: [{ kind: "component", type: FHomePageFooterComponent, selector: "footer[f-home-page-footer]" }, { kind: "component", type: FHomePageHeaderComponent, selector: "header[f-home-page-header]" }, { kind: "component", type: FHomePageFeaturesComponent, selector: "f-home-page-features" }, { kind: "component", type: FHomePageHeroComponent, selector: "f-home-page-hero" }, { kind: "component", type: FHomePageMembershipsComponent, selector: "f-home-page-memberships" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HomeRootComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'home-root', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        HomeStore,
-                        {
-                            provide: HEADER_CONFIGURATION_STORE,
-                            useExisting: HomeStore,
-                        },
-                    ], imports: [
-                        FHomePageFooterComponent,
-                        FHomePageHeaderComponent,
-                        FHomePageFeaturesComponent,
-                        FHomePageHeroComponent,
-                        FHomePageMembershipsComponent,
-                    ], template: "<ng-container #backgroundContainer></ng-container>\n<header f-home-page-header></header>\n\n<div class=\"body\">\n  <div class=\"hero-row\">\n    <f-home-page-hero></f-home-page-hero>\n    <ng-container #heroImageContainer></ng-container>\n  </div>\n  <f-home-page-features></f-home-page-features>\n  <f-home-page-memberships></f-home-page-memberships>\n</div>\n\n<div class=\"flex-space\"></div>\n<footer f-home-page-footer></footer>\n", styles: [":host{display:flex;flex-direction:column;position:relative;width:100%;height:100%;min-height:100%;overflow:hidden;overflow-y:auto}.body{position:relative;z-index:3;pointer-events:none}@media (min-width: 960px){.body{margin-top:50px}}@media (min-width: 1376px){.body{margin-top:100px}}.hero-row{display:flex;flex-direction:column-reverse;justify-content:space-between;align-items:center;margin:0 auto}@media (min-width: 960px){.hero-row{flex-direction:row;margin-left:64px;margin-right:64px}}@media (min-width: 1376px){.hero-row{flex-direction:row;margin-left:calc(50% - 624px);margin-right:calc(50% - 624px)}}\n"] }]
-        }], propDecorators: { _backgroundContainer: [{
-                type: ViewChild,
-                args: ['backgroundContainer', { read: ViewContainerRef }]
-            }], _heroImageContainer: [{
-                type: ViewChild,
-                args: ['heroImageContainer', { read: ViewContainerRef }]
-            }] } });
+        ], viewQueries: [{ propertyName: "_backgroundContainer", first: true, predicate: ["backgroundContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_heroImageContainer", first: true, predicate: ["heroImageContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<ng-container #backgroundContainer></ng-container>\n<header f-home-page-header></header>\n\n<div class=\"body\">\n  <div class=\"hero-row\">\n    <f-home-page-hero></f-home-page-hero>\n    <ng-container #heroImageContainer></ng-container>\n  </div>\n  <f-home-page-features></f-home-page-features>\n  <f-home-page-memberships></f-home-page-memberships>\n</div>\n\n<div class=\"flex-space\"></div>\n<footer f-home-page-footer></footer>\n\n@defer (when isBrowser) {\n  <cookie-popup/>\n}\n", styles: [":host{display:flex;flex-direction:column;position:relative;width:100%;height:100%;min-height:100%;overflow:hidden;overflow-y:auto}.body{position:relative;z-index:3;pointer-events:none}@media (min-width: 960px){.body{margin-top:50px}}@media (min-width: 1376px){.body{margin-top:100px}}.hero-row{display:flex;flex-direction:column-reverse;justify-content:space-between;align-items:center;margin:0 auto}@media (min-width: 960px){.hero-row{flex-direction:row;margin-left:64px;margin-right:64px}}@media (min-width: 1376px){.hero-row{flex-direction:row;margin-left:calc(50% - 624px);margin-right:calc(50% - 624px)}}\n"], dependencies: [{ kind: "component", type: FHomePageFooterComponent, selector: "footer[f-home-page-footer]" }, { kind: "component", type: FHomePageHeaderComponent, selector: "header[f-home-page-header]" }, { kind: "component", type: FHomePageFeaturesComponent, selector: "f-home-page-features" }, { kind: "component", type: FHomePageHeroComponent, selector: "f-home-page-hero" }, { kind: "component", type: FHomePageMembershipsComponent, selector: "f-home-page-memberships" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [import('./foblex-m-render-cookie-popup.component-CqwZv5lc.mjs').then(m => m.CookiePopupComponent)]] });
+}
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.11", ngImport: i0, type: HomeRootComponent, resolveDeferredDeps: () => [import('./foblex-m-render-cookie-popup.component-CqwZv5lc.mjs').then(m => m.CookiePopupComponent)], resolveMetadata: CookiePopupComponent => ({ decorators: [{
+                type: Component,
+                args: [{ selector: 'home-root', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                            HomeStore,
+                            {
+                                provide: HEADER_CONFIGURATION_STORE,
+                                useExisting: HomeStore,
+                            },
+                        ], imports: [
+                            FHomePageFooterComponent,
+                            FHomePageHeaderComponent,
+                            FHomePageFeaturesComponent,
+                            FHomePageHeroComponent,
+                            FHomePageMembershipsComponent,
+                            CookiePopupComponent,
+                        ], template: "<ng-container #backgroundContainer></ng-container>\n<header f-home-page-header></header>\n\n<div class=\"body\">\n  <div class=\"hero-row\">\n    <f-home-page-hero></f-home-page-hero>\n    <ng-container #heroImageContainer></ng-container>\n  </div>\n  <f-home-page-features></f-home-page-features>\n  <f-home-page-memberships></f-home-page-memberships>\n</div>\n\n<div class=\"flex-space\"></div>\n<footer f-home-page-footer></footer>\n\n@defer (when isBrowser) {\n  <cookie-popup/>\n}\n", styles: [":host{display:flex;flex-direction:column;position:relative;width:100%;height:100%;min-height:100%;overflow:hidden;overflow-y:auto}.body{position:relative;z-index:3;pointer-events:none}@media (min-width: 960px){.body{margin-top:50px}}@media (min-width: 1376px){.body{margin-top:100px}}.hero-row{display:flex;flex-direction:column-reverse;justify-content:space-between;align-items:center;margin:0 auto}@media (min-width: 960px){.hero-row{flex-direction:row;margin-left:64px;margin-right:64px}}@media (min-width: 1376px){.hero-row{flex-direction:row;margin-left:calc(50% - 624px);margin-right:calc(50% - 624px)}}\n"] }]
+            }], ctorParameters: null, propDecorators: { _backgroundContainer: [{
+                    type: ViewChild,
+                    args: ['backgroundContainer', { read: ViewContainerRef }]
+                }], _heroImageContainer: [{
+                    type: ViewChild,
+                    args: ['heroImageContainer', { read: ViewContainerRef }]
+                }] } }) });
 
 const HOME_ROUTES = [
     {
@@ -3206,5 +2828,5 @@ var index = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { ActivateTocByHashHandler, ActivateTocByHashRequest, CalculateHashFromScrollPositionAndActivateTocHandler, CalculateHashFromScrollPositionAndActivateTocRequest, CalculateTableOfContentDataHandler, CalculateTableOfContentDataRequest, DOCUMENTATION_CONFIGURATION, DOCUMENTATION_ROUTES, DocumentationRootComponent, DocumentationStore, DropdownMenuComponent, EMarkdownContainerType, EParsedContainerType, FAnalyticsService, FCheckboxComponent, FCodeGroupComponent, FCodeGroupTabsComponent, FCodeViewComponent, FCookiePopupComponent, FExampleViewComponent, FFooterEditInformationComponent, FFooterNavigationButtonComponent, FFooterNavigationComponent, FHomePageButtonsRowComponent, FHomePageFeaturesComponent, FHomePageFooterComponent, FHomePageHeaderComponent, FHomePageHeroComponent, FHomePageMembershipsComponent, FInsertComponentDirective, FMarkdownFooterComponent, FMarkdownRendererComponent, FMetaService, FNavigationItemComponent, FPreviewBase, FPreviewComponent, FPreviewGroupFiltersComponent, FPreviewGroupService, FRadioButtonComponent, FSocialLinksComponent, FThemeButtonComponent, F_ACCEPT_COOKIES_KEY, F_PREVIEW_NAVIGATION_PROVIDER, F_SOCIAL_LINKS_PROVIDER, GetAbsoluteTopToContainerHandler, GetAbsoluteTopToContainerRequest, GetPreviousNextPageNavigationHandler, GetPreviousNextPageNavigationRequest, GetPreviousNextPageNavigationResponse, HEADER_CONFIGURATION, HEADER_CONFIGURATION_STORE, HOME_PAGE_CONFIGURATION, HOME_ROUTES, HamburgerButtonComponent, HandleNavigationLinksHandler, HandleNavigationLinksRequest, HeaderComponent, HighlightComponent, HighlightService, HomeRootComponent, HomeStore, InlineMenuComponent, LANGUAGES, MarkCodeFocusedBlocksPostProcessor, MarkdownContainerComponent, MarkdownService, NavigationGroupComponent, NavigationPanelComponent, NpmVersionComponent, OverflowObserverDirective, ParseAlerts, ParseAngularExampleWithCodeLinks, ParseGroupedCodeItems, ParsePreviewGroup, ParseSingleCodeItem, PopoverService, RIGHT_TOP_OVERLAY_POSITION, RenderDynamicComponentsHandler, RenderDynamicComponentsRequest, SCROLLABLE_CONTAINER, ScrollToElementInContainerHandler, ScrollToElementInContainerRequest, ScrollableContainerComponent, TOGGLE_NAVIGATION_COMPONENT, TableOfContentComponent, TableOfContentData, TableOfContentItemsComponent, ThemeService, coerceComponentHeight, copyToClipboard, defineLazyComponent, defineNavigationGroup, encodeDataAttr, extractComponent, getContent, isClosingToken, isOpeningToken, parseComponentTag, parseFileLinkLine, parseLanguageFromFileExtension, parseSingleBracketText, parseSyntaxLanguage, provide404Markdown, provideBackground, provideComponents, provideDirectory, provideDocumentation, provideDocumentationMeta, provideFooterNavigation, provideHeader, provideHeaderMediaLinks, provideHeaderNavigation, provideHero, provideHomeButtons, provideHomeFeatures, provideHomeFooter, provideHomePage, provideImage, provideLanguage, provideLogo, provideNavigation, provideTitle, provideTocData, setCookieConsent };
+export { ActivateTocByHashHandler, ActivateTocByHashRequest, CalculateHashFromScrollPositionAndActivateTocHandler, CalculateHashFromScrollPositionAndActivateTocRequest, CalculateTableOfContentDataHandler, CalculateTableOfContentDataRequest, DOCUMENTATION_CONFIGURATION, DOCUMENTATION_ROUTES, DocumentationRootComponent, DocumentationStore, DropdownMenuComponent, EMarkdownContainerType, EParsedContainerType, FCheckboxComponent, FCodeGroupComponent, FCodeGroupTabsComponent, FCodeViewComponent, FExampleViewComponent, FFooterEditInformationComponent, FFooterNavigationButtonComponent, FFooterNavigationComponent, FHomePageButtonsRowComponent, FHomePageFeaturesComponent, FHomePageFooterComponent, FHomePageHeaderComponent, FHomePageHeroComponent, FHomePageMembershipsComponent, FInsertComponentDirective, FMarkdownFooterComponent, FMarkdownRendererComponent, FMetaService, FNavigationItemComponent, FPreviewBase, FPreviewComponent, FPreviewGroupFiltersComponent, FPreviewGroupService, FRadioButtonComponent, FSocialLinksComponent, F_PREVIEW_NAVIGATION_PROVIDER, F_SOCIAL_LINKS_PROVIDER, GTAG_CONFIG, GTagService, GetAbsoluteTopToContainerHandler, GetAbsoluteTopToContainerRequest, GetPreviousNextPageNavigationHandler, GetPreviousNextPageNavigationRequest, GetPreviousNextPageNavigationResponse, HEADER_CONFIGURATION, HEADER_CONFIGURATION_STORE, HOME_PAGE_CONFIGURATION, HOME_ROUTES, HamburgerButtonComponent, HandleNavigationLinksHandler, HandleNavigationLinksRequest, HeaderComponent, HighlightComponent, HomeRootComponent, HomeStore, InlineMenuComponent, MarkdownContainerComponent, MarkdownService, NavigationGroupComponent, NavigationPanelComponent, NpmVersionComponent, OverflowObserverDirective, ParseAlerts, ParseAngularExampleWithCodeLinks, ParseGroupedCodeItems, ParsePreviewGroup, ParseSingleCodeItem, PopoverService, RIGHT_TOP_OVERLAY_POSITION, RenderDynamicComponentsHandler, RenderDynamicComponentsRequest, SCROLLABLE_CONTAINER, ScrollToElementInContainerHandler, ScrollToElementInContainerRequest, ScrollableContainerComponent, TOGGLE_NAVIGATION_COMPONENT, TableOfContentComponent, TableOfContentData, TableOfContentItemsComponent, ThemeButtonComponent, ThemeService, coerceComponentHeight, defineLazyComponent, defineNavigationGroup, encodeDataAttr, extractComponent, getContent, isClosingToken, isOpeningToken, parseComponentTag, parseFileLinkLine, parseLanguageFromFileExtension, parseSingleBracketText, parseSyntaxLanguage, provide404Markdown, provideBackground, provideComponents, provideDirectory, provideDocumentation, provideDocumentationMeta, provideFooterNavigation, provideGTag, provideHeader, provideHeaderMediaLinks, provideHeaderNavigation, provideHero, provideHomeButtons, provideHomeFeatures, provideHomeFooter, provideHomePage, provideImage, provideLanguage, provideLogo, provideNavigation, provideTheme, provideTitle, provideTocData };
 //# sourceMappingURL=foblex-m-render.mjs.map