@foblex/m-render 2.5.1 → 2.5.3

package/fesm2022/foblex-m-render.mjs

@@ -1,18 +1,90 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, Inject, Optional, InjectionToken, Component, ChangeDetectionStrategy, Input, EventEmitter, booleanAttribute, Output, ViewChild, HostListener, signal, ViewChildren, ViewContainerRef, ElementRef } from '@angular/core';
+import { EventEmitter, booleanAttribute, Component, ChangeDetectionStrategy, Input, Output, ViewChild, HostListener, inject, Injectable, Inject, signal, InjectionToken, Optional, ViewChildren, ViewContainerRef, ElementRef, DestroyRef, ChangeDetectorRef } from '@angular/core';
 import * as i2 from '@foblex/platform';
 import { F_LOCAL_STORAGE } from '@foblex/platform';
-import { DOCUMENT, ɵgetDOM as _getDOM, AsyncPipe, NgOptimizedImage, JsonPipe } from '@angular/common';
-import { of, map, startWith, filter, BehaviorSubject, Subject, Subscription, fromEvent, debounceTime, from, switchMap, Observable } from 'rxjs';
-import { catchError, filter as filter$1, take, tap } from 'rxjs/operators';
+import { DOCUMENT, ɵgetDOM as _getDOM, AsyncPipe, JsonPipe } from '@angular/common';
 import * as i1 from '@angular/router';
-import { NavigationEnd, RouterLink, RouterOutlet, Router, ActivatedRoute } from '@angular/router';
+import { NavigationEnd, Router, RouterLink, ActivatedRoute, RouterOutlet } from '@angular/router';
+import { startWith, filter, BehaviorSubject, Subject, of, map, Subscription, from, switchMap, Observable, fromEvent, debounceTime } from 'rxjs';
+import { catchError, filter as filter$1, take, tap } from 'rxjs/operators';
 import * as i1$1 from '@angular/common/http';
 import { HttpClient } from '@angular/common/http';
 import { deepClone } from '@foblex/utils';
 import container from 'markdown-it-container';
 import MarkdownIt from 'markdown-it';
 import * as i2$1 from '@angular/platform-browser';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+let uniqueId = 0;
+class FCheckboxComponent {
+    changeDetectorRef;
+    id = `f-checkbox-${uniqueId++}`;
+    change = new EventEmitter();
+    inputElement;
+    labelElement;
+    get checked() {
+        return this.isChecked;
+    }
+    set checked(value) {
+        if (value != this.checked) {
+            this.isChecked = value;
+            this.changeDetectorRef.markForCheck();
+        }
+    }
+    isChecked = false;
+    constructor(changeDetectorRef) {
+        this.changeDetectorRef = changeDetectorRef;
+    }
+    onInputClick() {
+        this.handleInputClick();
+    }
+    onTouchTargetClick() {
+        this.handleInputClick();
+        this.inputElement?.nativeElement.focus();
+    }
+    handleInputClick() {
+        this.isChecked = !this.isChecked;
+        this.emitChangeEvent();
+    }
+    emitChangeEvent() {
+        this.change.emit(this.isChecked);
+        if (this.inputElement) {
+            this.inputElement.nativeElement.checked = this.isChecked;
+        }
+    }
+    onInteractionEvent(event) {
+        event.stopPropagation();
+    }
+    preventBubblingFromLabel(event) {
+        if (!!event.target && this.labelElement?.nativeElement.contains(event.target)) {
+            event.stopPropagation();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.13", 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: "18.2.13", ngImport: i0, type: FCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'f-checkbox', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.f-checkbox-checked]': 'checked',
+                    }, 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"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { id: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }], inputElement: [{
+                type: ViewChild,
+                args: ['input']
+            }], labelElement: [{
+                type: ViewChild,
+                args: ['label']
+            }], checked: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], preventBubblingFromLabel: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
 
 const F_ACCEPT_COOKIES_KEY = 'm-render-accepts-cookies';
 
@@ -49,10 +121,8 @@ const setCookieConsent = (state) => {
 };
 
 class FAnalyticsService {
-    constructor() {
-        this.fLocalStorage = inject(F_LOCAL_STORAGE);
-        this.document = inject(DOCUMENT);
-    }
+    fLocalStorage = inject(F_LOCAL_STORAGE);
+    document = inject(DOCUMENT);
     initialize(analyticsId) {
         this.installGlobalSiteTag(analyticsId);
     }
@@ -86,15 +156,17 @@ class FAnalyticsService {
         gtmScript.id = 'gtag-script';
         return gtmScript;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FAnalyticsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FAnalyticsService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FAnalyticsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FAnalyticsService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FAnalyticsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FAnalyticsService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
 
 class FJsonLdService {
+    _document;
+    _dom;
     constructor(_document) {
         this._document = _document;
         this._dom = _getDOM();
@@ -131,10 +203,10 @@ class FJsonLdService {
         head.appendChild(element);
         return element;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FJsonLdService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FJsonLdService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FJsonLdService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FJsonLdService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FJsonLdService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FJsonLdService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -143,6 +215,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }] }] });
 
 class FHeadTagService {
+    _document;
+    _dom;
     constructor(_document) {
         this._document = _document;
         this._dom = _getDOM();
@@ -180,10 +254,10 @@ class FHeadTagService {
         head.appendChild(element);
         return element;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FHeadTagService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FHeadTagService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHeadTagService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHeadTagService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FHeadTagService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHeadTagService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -191,13 +265,202 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     args: [DOCUMENT]
                 }] }] });
 
+class FMetaService {
+    router;
+    fHeadTag;
+    fBrowser;
+    navigation = [];
+    constructor(router, fHeadTag, fBrowser) {
+        this.router = router;
+        this.fHeadTag = fHeadTag;
+        this.fBrowser = fBrowser;
+    }
+    subscribeOnRouteChanges(defaultData, environments) {
+        this.navigation = environments.reduce((result, e) => result.concat(...e.navigation), []);
+        return this.router.events.pipe(startWith(new NavigationEnd(1, '', '')), filter(event => event instanceof NavigationEnd)).subscribe((x) => {
+            let data = {
+                ...defaultData,
+            };
+            const item = this.findDocItemByUrl(this.findDocGroupByUrl(this.router.url), this.router.url);
+            if (item) {
+                data.title = `${item.text} - ${defaultData.app_name}`;
+                data.url = this.fBrowser.window.location.href;
+                data.description = item.description || defaultData.description;
+                data.image = item.image || defaultData.image;
+                data.image_width = item.image_width || defaultData.image_width;
+                data.image_height = item.image_height || defaultData.image_height;
+                data.image_type = item.image_type || defaultData.image_type;
+            }
+            if (!data.url) {
+                data.url = this.fBrowser.window.location.origin + this.router.url;
+            }
+            if (!data.image.startsWith('http') && !data.image.startsWith('www')) {
+                if (data.image.startsWith('.')) {
+                    data.image = this.fBrowser.window.location.origin + data.image.slice(1);
+                }
+                else {
+                    data.image = this.fBrowser.window.location.origin + data.image;
+                }
+            }
+            if (!data.url.endsWith('/')) {
+                data.url += '/';
+            }
+            this.updateMetaTags(data);
+        });
+    }
+    findDocGroupByUrl(url) {
+        return this.navigation.find((g) => g.items.find((i) => url.endsWith(i.link)));
+    }
+    findDocItemByUrl(group, url) {
+        return (group?.items || []).find((i) => url.endsWith(i.link));
+    }
+    updateMetaTags(item) {
+        this.fHeadTag.setTitle(item.title);
+        this.fHeadTag.setDescription(item.description);
+        this.fHeadTag.setCanonical(item.url);
+        this.fHeadTag.updateTag({ property: 'og:url', content: item.url });
+        this.fHeadTag.updateTag({ property: 'og:type', content: item.type });
+        this.fHeadTag.updateTag({ property: 'og:title', content: item.title });
+        this.fHeadTag.updateTag({ property: 'og:site_name', content: item.title });
+        this.fHeadTag.updateTag({ property: 'og:locale', content: item.locale });
+        this.fHeadTag.updateTag({ property: 'og:description', content: item.description });
+        this.fHeadTag.updateTag({ property: 'og:image', content: item.image });
+        this.fHeadTag.updateTag({ property: 'og:image:secure_url', content: item.image });
+        this.fHeadTag.updateTag({ property: 'og:image:type', content: item.image_type });
+        this.fHeadTag.updateTag({ property: 'og:image:width', content: item.image_width.toString() });
+        this.fHeadTag.updateTag({ property: 'og:image:height', content: item.image_height.toString() });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FMetaService, deps: [{ token: i1.Router }, { token: FHeadTagService }, { token: i2.BrowserService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FMetaService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FMetaService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1.Router }, { type: FHeadTagService }, { type: i2.BrowserService }] });
+
+class FPopoverService {
+    popover = new BehaviorSubject(null);
+    get popover$() {
+        return this.popover.asObservable();
+    }
+    show(message) {
+        this.popover.next(message);
+        setTimeout(() => this.popover.next(null), 2000);
+    }
+    dispose(destroyRef) {
+        destroyRef.onDestroy(() => {
+            this.popover.next(null);
+            this.popover.complete();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FPopoverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FPopoverService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FPopoverService, decorators: [{
+            type: Injectable
+        }] });
+
+class CookiePopup {
+    fLocalStorage = inject(F_LOCAL_STORAGE);
+    hasAccepted = signal(false);
+    constructor() {
+        try {
+            this.hasAccepted.set(this.fLocalStorage?.getItem(F_ACCEPT_COOKIES_KEY) === 'true');
+        }
+        catch {
+            this.hasAccepted.set(false);
+        }
+    }
+    accept() {
+        try {
+            this.fLocalStorage?.setItem(F_ACCEPT_COOKIES_KEY, 'true');
+        }
+        catch {
+        }
+        this.hasAccepted.set(true);
+        setCookieConsent('granted');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CookiePopup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CookiePopup, 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: "18.2.13", ngImport: i0, type: CookiePopup, 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 FStateService {
+    fBrowser;
+    theme = new Subject();
+    constructor(fBrowser) {
+        this.fBrowser = fBrowser;
+    }
+    get theme$() {
+        return this.theme.asObservable();
+    }
+    updateTheme() {
+        this.theme.next();
+    }
+    getPreferredTheme() {
+        return this.fBrowser.localStorage.getItem('preferred-theme')
+            || (this.fBrowser.window.isMediaQuery('(prefers-color-scheme: dark)') ? 'dark' : 'light');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FStateService, deps: [{ token: i2.BrowserService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FStateService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FStateService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i2.BrowserService }] });
+
+class FThemeButtonComponent {
+    renderer;
+    fState;
+    fBrowser;
+    constructor(renderer, fState, fBrowser) {
+        this.renderer = renderer;
+        this.fState = fState;
+        this.fBrowser = fBrowser;
+    }
+    ngOnInit() {
+        if (this.fState.getPreferredTheme() === 'dark' && !this.isDocumentContainsDarkTheme()) {
+            this.renderer.addClass(this.fBrowser.document.documentElement, 'dark');
+            this.fBrowser.localStorage.setItem('preferred-theme', 'dark');
+        }
+    }
+    isDocumentContainsDarkTheme() {
+        return this.fBrowser.document.documentElement.classList.contains('dark');
+    }
+    onClick() {
+        if (this.fState.getPreferredTheme() === 'light' && !this.isDocumentContainsDarkTheme()) {
+            this.renderer.addClass(this.fBrowser.document.documentElement, 'dark');
+            this.fBrowser.localStorage.setItem('preferred-theme', 'dark');
+        }
+        else {
+            this.renderer.removeClass(this.fBrowser.document.documentElement, 'dark');
+            this.fBrowser.localStorage.setItem('preferred-theme', 'light');
+        }
+        this.fState.updateTheme();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FThemeButtonComponent, deps: [{ token: i0.Renderer2 }, { token: FStateService }, { token: i2.BrowserService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: "18.2.13", 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"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: FStateService }, { type: i2.BrowserService }], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
 class GetVersionRequest {
+    version;
     constructor(version) {
         this.version = version;
     }
 }
 
 class GetVersionHandler {
+    http;
     constructor(http) {
         this.http = http;
     }
@@ -223,6 +486,8 @@ class GetVersionHandler {
 }
 
 class HandleNavigationLinksHandler {
+    router;
+    fBrowser;
     constructor(router, fBrowser) {
         this.router = router;
         this.fBrowser = fBrowser;
@@ -262,20 +527,65 @@ class HandleNavigationLinksHandler {
     openExternalLink(href) {
         this.fBrowser.window.open(href, '_blank');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleNavigationLinksHandler, deps: [{ token: i1.Router }, { token: i2.BrowserService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleNavigationLinksHandler }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HandleNavigationLinksHandler, deps: [{ token: i1.Router }, { token: i2.BrowserService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HandleNavigationLinksHandler });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleNavigationLinksHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HandleNavigationLinksHandler, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.Router }, { type: i2.BrowserService }] });
 
 class HandleNavigationLinksRequest {
+    event;
     constructor(event) {
         this.event = event;
     }
 }
 
-class FEnvironmentService {
+const INTERNAL_ENVIRONMENT_SERVICE = new InjectionToken('INTERNAL_ENVIRONMENT_SERVICE');
+
+class FBadgeComponent {
+    text = '';
+    type = 'tip';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FBadgeComponent, isStandalone: true, selector: "span[f-badge]", inputs: { text: "text", type: "type" }, host: { properties: { "class": "type" }, classAttribute: "f-badge" }, ngImport: i0, template: "{{ text }}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'span[f-badge]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'f-badge',
+                        '[class]': 'type',
+                    }, template: "{{ text }}\n" }]
+        }], propDecorators: { text: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }] } });
+
+class FHamburgerButtonComponent {
+    fDocumentation;
+    constructor(fDocumentation) {
+        this.fDocumentation = fDocumentation;
+    }
+    onShowNavigation() {
+        this.fDocumentation.onToggleNavigation(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHamburgerButtonComponent, deps: [{ token: F_DOCUMENTATION_COMPONENT }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FHamburgerButtonComponent, isStandalone: true, selector: "button[f-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: "18.2.13", ngImport: i0, type: FHamburgerButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[f-hamburger-button]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [F_DOCUMENTATION_COMPONENT]
+                }] }], propDecorators: { onShowNavigation: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class FDocumentationEnvironmentService {
+    environment;
+    http;
     constructor(environment, http) {
         this.environment = environment;
         this.http = http;
@@ -325,508 +635,143 @@ class FEnvironmentService {
             range: { start: 2, end: 6 },
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FEnvironmentService, deps: [{ token: F_ENVIRONMENT, optional: true }, { token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FEnvironmentService }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FDocumentationEnvironmentService, deps: [{ token: F_DOCS_ENVIRONMENT, optional: true }, { token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FDocumentationEnvironmentService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FEnvironmentService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FDocumentationEnvironmentService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
-                    args: [F_ENVIRONMENT]
+                    args: [F_DOCS_ENVIRONMENT]
                 }] }, { type: i1$1.HttpClient }] });
 
-class FMetaService {
-    constructor(router, fHeadTag, fBrowser) {
-        this.router = router;
-        this.fHeadTag = fHeadTag;
-        this.fBrowser = fBrowser;
-        this.navigation = [];
-    }
-    subscribeOnRouteChanges(defaultData, environments) {
-        this.navigation = environments.reduce((result, e) => result.concat(...e.navigation), []);
-        return this.router.events.pipe(startWith(new NavigationEnd(1, '', '')), filter(event => event instanceof NavigationEnd)).subscribe((x) => {
-            let data = {
-                ...defaultData,
-            };
-            const item = this.findDocItemByUrl(this.findDocGroupByUrl(this.router.url), this.router.url);
-            if (item) {
-                data.title = `${item.text} - ${defaultData.app_name}`;
-                data.url = this.fBrowser.window.location.href;
-                data.description = item.description || defaultData.description;
-                data.image = item.image || defaultData.image;
-                data.image_width = item.image_width || defaultData.image_width;
-                data.image_height = item.image_height || defaultData.image_height;
-                data.image_type = item.image_type || defaultData.image_type;
-            }
-            if (!data.url) {
-                data.url = this.fBrowser.window.location.origin + this.router.url;
-            }
-            if (!data.image.startsWith('http') && !data.image.startsWith('www')) {
-                if (data.image.startsWith('.')) {
-                    data.image = this.fBrowser.window.location.origin + data.image.slice(1);
-                }
-                else {
-                    data.image = this.fBrowser.window.location.origin + data.image;
-                }
-            }
-            if (!data.url.endsWith('/')) {
-                data.url += '/';
-            }
-            this.updateMetaTags(data);
-        });
-    }
-    findDocGroupByUrl(url) {
-        return this.navigation.find((g) => g.items.find((i) => url.endsWith(i.link)));
-    }
-    findDocItemByUrl(group, url) {
-        return (group?.items || []).find((i) => url.endsWith(i.link));
-    }
-    updateMetaTags(item) {
-        this.fHeadTag.setTitle(item.title);
-        this.fHeadTag.setDescription(item.description);
-        this.fHeadTag.setCanonical(item.url);
-        this.fHeadTag.updateTag({ property: 'og:url', content: item.url });
-        this.fHeadTag.updateTag({ property: 'og:type', content: item.type });
-        this.fHeadTag.updateTag({ property: 'og:title', content: item.title });
-        this.fHeadTag.updateTag({ property: 'og:site_name', content: item.title });
-        this.fHeadTag.updateTag({ property: 'og:locale', content: item.locale });
-        this.fHeadTag.updateTag({ property: 'og:description', content: item.description });
-        this.fHeadTag.updateTag({ property: 'og:image', content: item.image });
-        this.fHeadTag.updateTag({ property: 'og:image:secure_url', content: item.image });
-        this.fHeadTag.updateTag({ property: 'og:image:type', content: item.image_type });
-        this.fHeadTag.updateTag({ property: 'og:image:width', content: item.image_width.toString() });
-        this.fHeadTag.updateTag({ property: 'og:image:height', content: item.image_height.toString() });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FMetaService, deps: [{ token: i1.Router }, { token: FHeadTagService }, { token: i2.BrowserService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FMetaService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FMetaService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1.Router }, { type: FHeadTagService }, { type: i2.BrowserService }] });
-
-class FPopoverService {
-    constructor() {
-        this.popover = new BehaviorSubject(null);
-    }
-    get popover$() {
-        return this.popover.asObservable();
-    }
-    show(message) {
-        this.popover.next(message);
-        setTimeout(() => this.popover.next(null), 2000);
-    }
-    dispose() {
-        this.popover.next(null);
-        this.popover.complete();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FPopoverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FPopoverService }); }
+class FSocialLinksComponent {
+    links = inject(FDocumentationEnvironmentService).getSocialLinks();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FSocialLinksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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: "17.3.12", ngImport: i0, type: FPopoverService, decorators: [{
-            type: Injectable
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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"] }]
         }] });
 
-const F_ENVIRONMENT = new InjectionToken('F_ENVIRONMENT');
-
-const F_DOCUMENTATION_ROUTES = [
-    {
-        path: '',
-        loadComponent: () => Promise.resolve().then(function () { return index$1; }).then(m => m.FDocumentationComponent),
-        children: [
-            {
-                path: '**',
-                loadComponent: () => Promise.resolve().then(function () { return index; }).then(m => m.FPageComponent)
-            }
-        ]
-    }
-];
-
-class FBadgeComponent {
-    constructor() {
-        this.text = '';
-        this.type = 'tip';
+class FHeaderMenuComponent {
+    navigation = [];
+    _router = inject(Router);
+    _fEnvironmentService = inject(FDocumentationEnvironmentService);
+    ngOnInit() {
+        this.navigation = this._fEnvironmentService.getHeaderNavigation().map((x) => {
+            return {
+                ...x,
+                isActive: this._router.url.startsWith(x.link)
+            };
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FBadgeComponent, isStandalone: true, selector: "span[f-badge]", inputs: { text: "text", type: "type" }, host: { properties: { "class": "type" }, classAttribute: "f-badge" }, ngImport: i0, template: "{{ text }}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHeaderMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FHeaderMenuComponent, isStandalone: true, selector: "f-header-menu", ngImport: i0, template: "@for (item of navigation; track item.link) {\n  <a class=\"header-link\" [routerLink]=\"item.link\" [class.active]=\"item.isActive\">\n    <span>{{ item.text }}</span>\n  </a>\n}\n\n", styles: [":host{display:flex;justify-content:flex-start;align-items:center}.header-link{display:flex;align-items:center;padding:0 12px;line-height:var(--header-height);font-size:14px;font-weight:500;color:var(--primary-text);cursor:pointer}.header-link:hover,.header-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: "17.3.12", ngImport: i0, type: FBadgeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHeaderMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'span[f-badge]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        'class': 'f-badge',
-                        '[class]': 'type',
-                    }, template: "{{ text }}\n" }]
-        }], propDecorators: { text: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'f-header-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        RouterLink
+                    ], template: "@for (item of navigation; track item.link) {\n  <a class=\"header-link\" [routerLink]=\"item.link\" [class.active]=\"item.isActive\">\n    <span>{{ item.text }}</span>\n  </a>\n}\n\n", styles: [":host{display:flex;justify-content:flex-start;align-items:center}.header-link{display:flex;align-items:center;padding:0 12px;line-height:var(--header-height);font-size:14px;font-weight:500;color:var(--primary-text);cursor:pointer}.header-link:hover,.header-link.active{color:var(--primary-1)}\n"] }]
+        }] });
 
-let uniqueId = 0;
-class FCheckboxComponent {
-    get checked() {
-        return this.isChecked;
-    }
-    set checked(value) {
-        if (value != this.checked) {
-            this.isChecked = value;
-            this.changeDetectorRef.markForCheck();
-        }
-    }
-    constructor(changeDetectorRef) {
-        this.changeDetectorRef = changeDetectorRef;
-        this.id = `f-checkbox-${uniqueId++}`;
-        this.change = new EventEmitter();
-        this.isChecked = false;
-    }
-    onInputClick() {
-        this.handleInputClick();
-    }
-    onTouchTargetClick() {
-        this.handleInputClick();
-        this.inputElement?.nativeElement.focus();
-    }
-    handleInputClick() {
-        this.isChecked = !this.isChecked;
-        this.emitChangeEvent();
-    }
-    emitChangeEvent() {
-        this.change.emit(this.isChecked);
-        if (this.inputElement) {
-            this.inputElement.nativeElement.checked = this.isChecked;
-        }
-    }
-    onInteractionEvent(event) {
-        event.stopPropagation();
-    }
-    preventBubblingFromLabel(event) {
-        if (!!event.target && this.labelElement?.nativeElement.contains(event.target)) {
-            event.stopPropagation();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.12", 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 }); }
+class FVersionComponent {
+    version$ = inject(FDocumentationEnvironmentService).getVersion();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FVersionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FVersionComponent, isStandalone: true, selector: "f-version", ngImport: i0, template: "@if (version$ | async;as version) {\n  <span class=\"version\">v{{ version }}</span>\n}\n", styles: [".version{margin-left:8px;margin-right:8px;display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--primary-text)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FVersionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'f-checkbox', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[class.f-checkbox-checked]': 'checked',
-                    }, 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"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { id: [{
-                type: Input
-            }], change: [{
-                type: Output
-            }], inputElement: [{
-                type: ViewChild,
-                args: ['input']
-            }], labelElement: [{
-                type: ViewChild,
-                args: ['label']
-            }], checked: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], preventBubblingFromLabel: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
+            args: [{ selector: 'f-version', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        AsyncPipe
+                    ], template: "@if (version$ | async;as version) {\n  <span class=\"version\">v{{ version }}</span>\n}\n", styles: [".version{margin-left:8px;margin-right:8px;display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--primary-text)}\n"] }]
+        }] });
 
-class CookiePopup {
-    constructor() {
-        this.fLocalStorage = inject(F_LOCAL_STORAGE);
-        this.hasAccepted = signal(false);
-        try {
-            this.hasAccepted.set(this.fLocalStorage?.getItem(F_ACCEPT_COOKIES_KEY) === 'true');
-        }
-        catch {
-            this.hasAccepted.set(false);
-        }
-    }
-    accept() {
-        try {
-            this.fLocalStorage?.setItem(F_ACCEPT_COOKIES_KEY, 'true');
-        }
-        catch {
-        }
-        this.hasAccepted.set(true);
-        setCookieConsent('granted');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CookiePopup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CookiePopup, 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 }); }
+class FHeaderComponent {
+    title = inject(FDocumentationEnvironmentService).getTitle();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FHeaderComponent, isStandalone: true, selector: "f-header", ngImport: i0, template: "<button f-hamburger-button></button>\n<div class=\"title text-ellipsis\">{{ title }}</div>\n<div class=\"flex-space\"></div>\n<f-header-menu></f-header-menu>\n<f-version></f-version>\n<div class=\"divider\"></div>\n<button f-theme-button></button>\n<div class=\"divider\"></div>\n<f-social-links></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: FHamburgerButtonComponent, selector: "button[f-hamburger-button]" }, { kind: "component", type: FVersionComponent, selector: "f-version" }, { kind: "component", type: FSocialLinksComponent, selector: "f-social-links" }, { kind: "component", type: FThemeButtonComponent, selector: "button[f-theme-button]" }, { kind: "component", type: FHeaderMenuComponent, selector: "f-header-menu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CookiePopup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHeaderComponent, 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: () => [] });
-
-const F_DOCUMENTATION_COMPONENT = new InjectionToken('F_DOCUMENTATION_COMPONENT');
+            args: [{ selector: 'f-header', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        FHamburgerButtonComponent,
+                        FVersionComponent,
+                        FSocialLinksComponent,
+                        FThemeButtonComponent,
+                        FHeaderMenuComponent
+                    ], template: "<button f-hamburger-button></button>\n<div class=\"title text-ellipsis\">{{ title }}</div>\n<div class=\"flex-space\"></div>\n<f-header-menu></f-header-menu>\n<f-version></f-version>\n<div class=\"divider\"></div>\n<button f-theme-button></button>\n<div class=\"divider\"></div>\n<f-social-links></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 FHamburgerButtonComponent {
-    constructor(fDocumentation) {
-        this.fDocumentation = fDocumentation;
-    }
-    onShowNavigation() {
-        this.fDocumentation.onToggleNavigation(true);
+class FNavigationGroupComponent {
+    title;
+    isCollapsed = false;
+    toggle() {
+        this.isCollapsed = !this.isCollapsed;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FHamburgerButtonComponent, deps: [{ token: F_DOCUMENTATION_COMPONENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FHamburgerButtonComponent, isStandalone: true, selector: "button[f-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: "18.2.13", ngImport: i0, type: FNavigationGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FNavigationGroupComponent, isStandalone: true, selector: "f-navigation-group", inputs: { title: "title" }, 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: "17.3.12", ngImport: i0, type: FHamburgerButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FNavigationGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'button[f-hamburger-button]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [F_DOCUMENTATION_COMPONENT]
-                }] }], propDecorators: { onShowNavigation: [{
-                type: HostListener,
-                args: ['click']
+            args: [{ selector: 'f-navigation-group', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.collapsed]': 'isCollapsed',
+                        '[class.no-title]': '!title'
+                    }, 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"] }]
+        }], propDecorators: { title: [{
+                type: Input
             }] } });
 
-class FVersionComponent {
-    constructor(fEnvironmentService) {
+class FNavigationHeaderComponent {
+    router;
+    fEnvironmentService;
+    title = '';
+    image = '';
+    constructor(router, fEnvironmentService) {
+        this.router = router;
         this.fEnvironmentService = fEnvironmentService;
-        this.version$ = this.fEnvironmentService.getVersion();
+        this.title = this.fEnvironmentService.getTitle();
+        this.image = this.fEnvironmentService.getLogo();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FVersionComponent, deps: [{ token: FEnvironmentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FVersionComponent, isStandalone: true, selector: "f-version", ngImport: i0, template: "@if (version$ | async;as version) {\n  <span class=\"version\">v{{ version }}</span>\n}\n", styles: [".version{margin-left:8px;margin-right:8px;display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--primary-text)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FNavigationHeaderComponent, deps: [{ token: i1.Router }, { token: FDocumentationEnvironmentService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FNavigationHeaderComponent, isStandalone: true, selector: "a[f-navigation-header]", ngImport: i0, template: "<img [src]=\"image\" width=\"24\" height=\"24\" alt=\"logo\" class=\"logo\"/> {{ title }}\n\n\n\n", styles: [":host{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}:host img{margin-right:8px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FVersionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FNavigationHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'f-version', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        AsyncPipe
-                    ], template: "@if (version$ | async;as version) {\n  <span class=\"version\">v{{ version }}</span>\n}\n", styles: [".version{margin-left:8px;margin-right:8px;display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--primary-text)}\n"] }]
-        }], ctorParameters: () => [{ type: FEnvironmentService }] });
+            args: [{ selector: 'a[f-navigation-header]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        RouterLink
+                    ], template: "<img [src]=\"image\" width=\"24\" height=\"24\" alt=\"logo\" class=\"logo\"/> {{ title }}\n\n\n\n", styles: [":host{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}:host img{margin-right:8px}\n"] }]
+        }], ctorParameters: () => [{ type: i1.Router }, { type: FDocumentationEnvironmentService }] });
 
-class FSocialLinksComponent {
-    get links() {
-        return this.fEnvironmentService.getSocialLinks();
-    }
-    constructor(fEnvironmentService) {
-        this.fEnvironmentService = fEnvironmentService;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FSocialLinksComponent, deps: [{ token: FEnvironmentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", 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 }); }
+class FNavigationItemComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: "17.3.12", ngImport: i0, type: FSocialLinksComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FNavigationItemComponent, 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"] }]
-        }], ctorParameters: () => [{ type: FEnvironmentService }] });
-
-class FStateService {
-    constructor(fBrowser) {
-        this.fBrowser = fBrowser;
-        this.theme = new Subject();
-    }
-    get theme$() {
-        return this.theme.asObservable();
-    }
-    updateTheme() {
-        this.theme.next();
-    }
-    getPreferredTheme() {
-        return this.fBrowser.localStorage.getItem('preferred-theme')
-            || (this.fBrowser.window.isMediaQuery('(prefers-color-scheme: dark)') ? 'dark' : 'light');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FStateService, deps: [{ token: i2.BrowserService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FStateService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FStateService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i2.BrowserService }] });
-
-class FThemeButtonComponent {
-    constructor(renderer, fState, fBrowser) {
-        this.renderer = renderer;
-        this.fState = fState;
-        this.fBrowser = fBrowser;
-    }
-    ngOnInit() {
-        if (this.fState.getPreferredTheme() === 'dark' && !this.isDocumentContainsDarkTheme()) {
-            this.renderer.addClass(this.fBrowser.document.documentElement, 'dark');
-            this.fBrowser.localStorage.setItem('preferred-theme', 'dark');
-        }
-    }
-    isDocumentContainsDarkTheme() {
-        return this.fBrowser.document.documentElement.classList.contains('dark');
-    }
-    onClick() {
-        if (this.fState.getPreferredTheme() === 'light' && !this.isDocumentContainsDarkTheme()) {
-            this.renderer.addClass(this.fBrowser.document.documentElement, 'dark');
-            this.fBrowser.localStorage.setItem('preferred-theme', 'dark');
-        }
-        else {
-            this.renderer.removeClass(this.fBrowser.document.documentElement, 'dark');
-            this.fBrowser.localStorage.setItem('preferred-theme', 'light');
-        }
-        this.fState.updateTheme();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FThemeButtonComponent, deps: [{ token: i0.Renderer2 }, { token: FStateService }, { token: i2.BrowserService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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: "17.3.12", 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"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: FStateService }, { type: i2.BrowserService }], propDecorators: { onClick: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
-
-class FHeaderMenuComponent {
-    constructor(fEnvironmentService, router) {
-        this.fEnvironmentService = fEnvironmentService;
-        this.router = router;
-        this.navigation = [];
-    }
-    ngOnInit() {
-        this.navigation = this.fEnvironmentService.getHeaderNavigation().map((x) => {
-            return {
-                ...x,
-                isActive: this.router.url.startsWith(x.link)
-            };
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FHeaderMenuComponent, deps: [{ token: FEnvironmentService }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FHeaderMenuComponent, isStandalone: true, selector: "f-header-menu", ngImport: i0, template: "@for (item of navigation; track item.link) {\n  <a class=\"header-link\" [routerLink]=\"item.link\" [class.active]=\"item.isActive\">\n    <span>{{ item.text }}</span>\n  </a>\n}\n\n", styles: [":host{display:flex;justify-content:flex-start;align-items:center}.header-link{display:flex;align-items:center;padding:0 12px;line-height:var(--header-height);font-size:14px;font-weight:500;color:var(--primary-text);cursor:pointer}.header-link:hover,.header-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: "17.3.12", ngImport: i0, type: FHeaderMenuComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'f-header-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        RouterLink
-                    ], template: "@for (item of navigation; track item.link) {\n  <a class=\"header-link\" [routerLink]=\"item.link\" [class.active]=\"item.isActive\">\n    <span>{{ item.text }}</span>\n  </a>\n}\n\n", styles: [":host{display:flex;justify-content:flex-start;align-items:center}.header-link{display:flex;align-items:center;padding:0 12px;line-height:var(--header-height);font-size:14px;font-weight:500;color:var(--primary-text);cursor:pointer}.header-link:hover,.header-link.active{color:var(--primary-1)}\n"] }]
-        }], ctorParameters: () => [{ type: FEnvironmentService }, { type: i1.Router }] });
-
-class FHeaderComponent {
-    constructor(fEnvironmentService) {
-        this.fEnvironmentService = fEnvironmentService;
-        this.title = '';
-        this.title = this.fEnvironmentService.getTitle();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FHeaderComponent, deps: [{ token: FEnvironmentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FHeaderComponent, isStandalone: true, selector: "f-header", ngImport: i0, template: "<button f-hamburger-button></button>\n<div class=\"title text-ellipsis\">{{ title }}</div>\n<div class=\"flex-space\"></div>\n<f-header-menu></f-header-menu>\n<f-version></f-version>\n<div class=\"divider\"></div>\n<button f-theme-button></button>\n<div class=\"divider\"></div>\n<f-social-links></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: FHamburgerButtonComponent, selector: "button[f-hamburger-button]" }, { kind: "component", type: FVersionComponent, selector: "f-version" }, { kind: "component", type: FSocialLinksComponent, selector: "f-social-links" }, { kind: "component", type: FThemeButtonComponent, selector: "button[f-theme-button]" }, { kind: "component", type: FHeaderMenuComponent, selector: "f-header-menu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'f-header', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        NgOptimizedImage,
-                        FHamburgerButtonComponent,
-                        FVersionComponent,
-                        FSocialLinksComponent,
-                        FThemeButtonComponent,
-                        FHeaderMenuComponent
-                    ], template: "<button f-hamburger-button></button>\n<div class=\"title text-ellipsis\">{{ title }}</div>\n<div class=\"flex-space\"></div>\n<f-header-menu></f-header-menu>\n<f-version></f-version>\n<div class=\"divider\"></div>\n<button f-theme-button></button>\n<div class=\"divider\"></div>\n<f-social-links></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"] }]
-        }], ctorParameters: () => [{ type: FEnvironmentService }] });
-
-class FPreviewComponent {
-    constructor(fEnvironment, fState, router, changeDetectorRef) {
-        this.fEnvironment = fEnvironment;
-        this.fState = fState;
-        this.router = router;
-        this.changeDetectorRef = changeDetectorRef;
-        this.subscriptions$ = new Subscription();
-    }
-    initialize() {
-        this.viewModel = this.getNavigationItem(this.getNavigationGroup());
-        this.url = this.normalizeLink(this.viewModel.link, this.getUrlPrefix());
-        this.subscriptions$.add(this.fState.theme$.pipe(startWith(null)).subscribe(() => this.updateTheme()));
-    }
-    getNavigationGroup() {
-        return this.fEnvironment.getNavigation().find((x) => x.text === this.group);
-    }
-    getNavigationItem(group) {
-        return group.items.find((x) => x.link === this.item);
-    }
-    updateTheme() {
-        this.src = this.fState.getPreferredTheme() === 'dark' ? this.viewModel?.image_dark : this.viewModel?.image;
-        if (!this.src) {
-            this.src = this.viewModel?.image;
-        }
-        this.changeDetectorRef.markForCheck();
-    }
-    normalizeLink(link, prefix) {
-        if (!this.isExternalLink(link)) {
-            return link.startsWith('/') ? `${prefix}${link}` : `${prefix}/${link}`;
-        }
-        return link;
-    }
-    getUrlPrefix() {
-        return this.router.url.substring(0, this.router.url.lastIndexOf('/'));
-    }
-    isExternalLink(href) {
-        return href.startsWith('www') || href.startsWith('http');
-    }
-    ngOnDestroy() {
-        this.subscriptions$.unsubscribe();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FPreviewComponent, deps: [{ token: FEnvironmentService }, { token: FStateService }, { token: i1.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FPreviewComponent, isStandalone: true, selector: "a[f-preview]", host: { properties: { "attr.href": "url", "attr.title": "viewModel?.text" } }, ngImport: i0, template: "@if (viewModel) {\n  <img [src]=\"src\" [alt]=\"viewModel.description\" [title]=\"viewModel.text\">\n  <div class=\"title\">{{ viewModel.text }}</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)}: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)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FPreviewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'a[f-preview]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[attr.href]': 'url',
-                        '[attr.title]': 'viewModel?.text',
-                    }, template: "@if (viewModel) {\n  <img [src]=\"src\" [alt]=\"viewModel.description\" [title]=\"viewModel.text\">\n  <div class=\"title\">{{ viewModel.text }}</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)}: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)}}\n"] }]
-        }], ctorParameters: () => [{ type: FEnvironmentService }, { type: FStateService }, { type: i1.Router }, { type: i0.ChangeDetectorRef }] });
-
-class FNavigationGroupComponent {
-    constructor() {
-        this.isCollapsed = false;
-    }
-    toggle() {
-        this.isCollapsed = !this.isCollapsed;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FNavigationGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FNavigationGroupComponent, isStandalone: true, selector: "f-navigation-group", inputs: { title: "title" }, 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;-webkit-mask-size:100% 100%;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: "17.3.12", ngImport: i0, type: FNavigationGroupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'f-navigation-group', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[class.collapsed]': 'isCollapsed',
-                        '[class.no-title]': '!title'
-                    }, 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;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:18px;height:18px}:host.collapsed .caret-icon{transform:rotate(0)}\n"] }]
-        }], propDecorators: { title: [{
-                type: Input
-            }] } });
-
-class FNavigationHeaderComponent {
-    constructor(router, fEnvironmentService) {
-        this.router = router;
-        this.fEnvironmentService = fEnvironmentService;
-        this.title = '';
-        this.image = '';
-        this.title = this.fEnvironmentService.getTitle();
-        this.image = this.fEnvironmentService.getLogo();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FNavigationHeaderComponent, deps: [{ token: i1.Router }, { token: FEnvironmentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FNavigationHeaderComponent, isStandalone: true, selector: "a[f-navigation-header]", ngImport: i0, template: "<img [src]=\"image\" width=\"24\" height=\"24\" alt=\"logo\" class=\"logo\"/> {{ title }}\n\n\n\n", styles: [":host{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}:host img{margin-right:8px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FNavigationHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'a[f-navigation-header]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        RouterLink
-                    ], template: "<img [src]=\"image\" width=\"24\" height=\"24\" alt=\"logo\" class=\"logo\"/> {{ title }}\n\n\n\n", styles: [":host{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}:host img{margin-right:8px}\n"] }]
-        }], ctorParameters: () => [{ type: i1.Router }, { type: FEnvironmentService }] });
-
-class FNavigationItemComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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: "17.3.12", 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"] }]
-        }] });
+            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"] }]
+        }] });
 
 class FNavigationPanelComponent {
+    fEnvironmentService;
+    fDocumentation;
+    router;
+    injector;
+    changeDetectorRef;
+    subscription = new Subscription();
+    items;
+    value;
+    navigation = [];
     constructor(fEnvironmentService, fDocumentation, router, injector, changeDetectorRef) {
         this.fEnvironmentService = fEnvironmentService;
         this.fDocumentation = fDocumentation;
         this.router = router;
         this.injector = injector;
         this.changeDetectorRef = changeDetectorRef;
-        this.subscription = new Subscription();
-        this.navigation = [];
         this.navigation = this.fEnvironmentService.getNavigation();
     }
     ngOnInit() {
@@ -866,359 +811,46 @@ class FNavigationPanelComponent {
             })?.link || this.value;
         });
     }
-    onDocumentClick(event) {
-        this.injector.get(HandleNavigationLinksHandler).handle(new HandleNavigationLinksRequest(event));
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FNavigationPanelComponent, deps: [{ token: FEnvironmentService }, { token: F_DOCUMENTATION_COMPONENT }, { token: i1.Router }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FNavigationPanelComponent, isStandalone: true, selector: "f-navigation-panel", host: { listeners: { "click": "onDocumentClick($event)" } }, providers: [
-            HandleNavigationLinksHandler
-        ], viewQueries: [{ propertyName: "items", predicate: FNavigationItemComponent, descendants: true }], ngImport: i0, template: "<a f-navigation-header routerLink></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 f-badge [text]=\"item.badge.text\" [type]=\"item.badge.type\"></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))}\n"], dependencies: [{ kind: "component", type: FNavigationHeaderComponent, selector: "a[f-navigation-header]" }, { kind: "component", type: FNavigationItemComponent, selector: "a[f-navigation-item]" }, { kind: "component", type: FNavigationGroupComponent, selector: "f-navigation-group", inputs: ["title"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: FBadgeComponent, selector: "span[f-badge]", inputs: ["text", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FNavigationPanelComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'f-navigation-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        HandleNavigationLinksHandler
-                    ], imports: [
-                        FNavigationHeaderComponent,
-                        FNavigationItemComponent,
-                        FNavigationGroupComponent,
-                        RouterLink,
-                        FBadgeComponent,
-                    ], template: "<a f-navigation-header routerLink></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 f-badge [text]=\"item.badge.text\" [type]=\"item.badge.type\"></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))}\n"] }]
-        }], ctorParameters: () => [{ type: FEnvironmentService }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [F_DOCUMENTATION_COMPONENT]
-                }] }, { type: i1.Router }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }], propDecorators: { items: [{
-                type: ViewChildren,
-                args: [FNavigationItemComponent]
-            }], onDocumentClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
-
-class GetAbsoluteTopToContainerHandler {
-    handle(request) {
-        let element = request.element;
-        let result = 0;
-        while (element !== request.container) {
-            if (!element)
-                return NaN;
-            result += element.offsetTop;
-            element = element.offsetParent;
-        }
-        return result;
-    }
-}
-
-class GetAbsoluteTopToContainerRequest {
-    constructor(element, container) {
-        this.element = element;
-        this.container = container;
-    }
-}
-
-class TableOfContentData {
-    constructor(flat, tree) {
-        this.flat = flat;
-        this.tree = tree;
-    }
-}
-
-class GetTableOfContentDataHandler {
-    handle(request) {
-        const flat = [];
-        const tree = [];
-        const stack = [];
-        this.getNavigationSelectors(request.fMarkdownPage, request.tocRange).forEach((element) => {
-            const tocItem = this.createItem(element);
-            this.insertItemIntoTree(tocItem, tree, stack);
-            flat.push(tocItem);
-        });
-        return new TableOfContentData(flat, tree);
-    }
-    getNavigationSelectors(fMarkdownPage, tocRange) {
-        if (!tocRange || tocRange.start < 1 || tocRange.end > 6) {
-            tocRange = { start: 1, end: 6 };
-        }
-        let selectors = [];
-        for (let i = tocRange.start; i <= tocRange.end; i++) {
-            selectors.push(`h${i}`);
-        }
-        return Array.from(fMarkdownPage.querySelectorAll(selectors.join(', ')));
-    }
-    createItem(element) {
-        element.id = this.createNavigationId(element);
-        return {
-            hash: `#${element.id}`,
-            title: element.innerHTML,
-            element,
-            children: []
-        };
-    }
-    createNavigationId(element) {
-        return element.innerHTML.toLowerCase().replaceAll(' ', '-');
-    }
-    getLevel(element) {
-        return parseInt(element.tagName.substring(1));
-    }
-    insertItemIntoTree(tocItem, tree, stack) {
-        while (stack.length > 0 && this.getLevel(stack[stack.length - 1].element) >= this.getLevel(tocItem.element)) {
-            stack.pop();
-        }
-        if (stack.length === 0) {
-            tree.push(tocItem);
-        }
-        else {
-            stack[stack.length - 1].children.push(tocItem);
-        }
-        stack.push(tocItem);
-    }
-}
-
-class GetTableOfContentDataRequest {
-    constructor(fMarkdownPage, tocRange) {
-        this.fMarkdownPage = fMarkdownPage;
-        this.tocRange = tocRange;
-    }
-}
-
-class CalculateHashFromScrollPositionHandler {
-    constructor(scrollableContainer, fBrowser) {
-        this.scrollableContainer = scrollableContainer;
-        this.fBrowser = fBrowser;
-    }
-    handle(request) {
-        let result;
-        const containerScrollTop = this.getContainerScrollTop();
-        const elementsWithTopPosition = this.calculateElementsTopPositions(request.tocData);
-        if (elementsWithTopPosition.length) {
-            if (this.isScrollAtBottom(containerScrollTop)) {
-                result = elementsWithTopPosition[elementsWithTopPosition.length - 1].hash;
-            }
-            else {
-                result = this.findTargetHashByPosition(containerScrollTop, elementsWithTopPosition);
-            }
-        }
-        return result;
-    }
-    getContainerScrollTop() {
-        return this.scrollableContainer.scrollTop + this.getHeaderHeight();
-    }
-    getHeaderHeight() {
-        return parseInt(this.fBrowser.window.getComputedStyle(this.fBrowser.document.documentElement).getPropertyValue('--header-height'), 10);
-    }
-    calculateElementsTopPositions(items) {
-        return items.map((x) => {
-            return {
-                hash: x.hash,
-                top: this.getAbsoluteTopToContainer(x.element)
-            };
-        }).filter((x) => !Number.isNaN(x.top));
-    }
-    getAbsoluteTopToContainer(element) {
-        return new GetAbsoluteTopToContainerHandler().handle(new GetAbsoluteTopToContainerRequest(element, this.scrollableContainer));
-    }
-    isScrollAtBottom(containerScrollTop) {
-        return Math.abs(containerScrollTop - this.getHeaderHeight() + this.scrollableContainer.clientHeight - this.scrollableContainer.scrollHeight) < 1;
-    }
-    findTargetHashByPosition(containerScrollTop, elementsWithTopPosition) {
-        let result = elementsWithTopPosition[0].hash;
-        for (const { hash, top } of elementsWithTopPosition) {
-            if (top > containerScrollTop)
-                break;
-            result = hash;
-        }
-        return result;
-    }
-}
-
-class CalculateHashFromScrollPositionRequest {
-    constructor(tocData) {
-        this.tocData = tocData;
-    }
-}
-
-class ScrollToElementInContainer {
-    constructor(container) {
-        this.container = container;
-    }
-    handle(hash) {
-        this.container.scrollTo({
-            top: this.getScrollTo(this.getScrollToElement(hash)) - 64,
-            behavior: 'smooth'
-        });
-    }
-    getScrollToElement(hash) {
-        const element = this.container.querySelector(hash);
-        if (!element) {
-            throw new Error(`Element ${hash} not found`);
-        }
-        return element;
-    }
-    getScrollTo(element) {
-        return this.isFirstElementInContainer(element) ? 0 : this.calculateScrollTo(element);
-    }
-    isFirstElementInContainer(element) {
-        return element.parentElement.children[0] === element;
-    }
-    calculateScrollTo(element) {
-        return this.getElementTop(element) - this.getContainerTop() + this.container.scrollTop;
-    }
-    getElementTop(element) {
-        return element.getBoundingClientRect().top;
-    }
-    getContainerTop() {
-        return this.container.getBoundingClientRect().top;
-    }
-}
-
-class FScrollableService {
-    get onToc$() {
-        return this.onTocChanged$.asObservable().pipe(map(() => this.tocData));
-    }
-    constructor(fEnvironmentService, fBrowser) {
-        this.fEnvironmentService = fEnvironmentService;
-        this.fBrowser = fBrowser;
-        this.tocData = new TableOfContentData([], []);
-        this.onTocChanged$ = new Subject();
-        this.onScrollSubscription$ = Subscription.EMPTY;
-    }
-    setContainer(fScrollableContainer) {
-        this.fScrollableContainer = fScrollableContainer;
-        this.onScrollSubscription$ = this.subscribeOnScroll();
-    }
-    subscribeOnScroll() {
-        return fromEvent(this.fScrollableContainer, 'scroll').pipe(debounceTime(100)).subscribe((event) => {
-            this.calculateHashAndActivate();
-        });
-    }
-    scrollTo(hash) {
-        if (!this.fScrollableContainer) {
-            throw new Error('Scrollable container is not set');
-        }
-        this.activateHash(hash);
-        new ScrollToElementInContainer(this.fScrollableContainer).handle(hash);
-    }
-    setOnPageNavigation(fMarkdownPage) {
-        this.tocData = new GetTableOfContentDataHandler().handle(new GetTableOfContentDataRequest(fMarkdownPage, this.fEnvironmentService.getToC().range));
-        this.calculateHashAndActivate();
-    }
-    calculateHashAndActivate() {
-        this.activateHash(this.calculateHashFromScrollPosition());
-    }
-    calculateHashFromScrollPosition() {
-        return new CalculateHashFromScrollPositionHandler(this.fScrollableContainer, this.fBrowser).handle(new CalculateHashFromScrollPositionRequest(this.tocData.flat));
-    }
-    activateHash(hash) {
-        this.tocData.flat.forEach(x => x.isActive = x.hash === hash);
-        this.onTocChanged$.next();
-    }
-    dispose() {
-        this.onScrollSubscription$.unsubscribe();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FScrollableService, deps: [{ token: FEnvironmentService }, { token: i2.BrowserService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FScrollableService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FScrollableService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FEnvironmentService }, { type: i2.BrowserService }] });
-
-class FScrollableContainerComponent {
-    get hostElement() {
-        return this.elementRef.nativeElement;
-    }
-    constructor(elementRef, fScrollableService) {
-        this.elementRef = elementRef;
-        this.fScrollableService = fScrollableService;
-    }
-    ngOnInit() {
-        this.fScrollableService.setContainer(this.hostElement);
-    }
-    ngOnDestroy() {
-        this.fScrollableService.dispose();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FScrollableContainerComponent, deps: [{ token: i0.ElementRef }, { token: FScrollableService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FScrollableContainerComponent, isStandalone: true, selector: "f-scrollable-container", providers: [
-            FScrollableService
-        ], ngImport: i0, template: "<ng-content></ng-content>\n\n\n\n", styles: [":host{position:relative;width:100%;height:100%;overflow:hidden;overflow-y:auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FScrollableContainerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'f-scrollable-container', providers: [
-                        FScrollableService
-                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n\n\n\n", styles: [":host{position:relative;width:100%;height:100%;overflow:hidden;overflow-y:auto}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FScrollableService }] });
-
-class FDocumentationComponent {
-    constructor(fPopoverService, changeDetectorRef) {
-        this.fPopoverService = fPopoverService;
-        this.changeDetectorRef = changeDetectorRef;
-        this.subscriptions$ = new Subscription();
-        this.isNavigationVisible = false;
-        this.popoverMessage = null;
-    }
-    ngOnInit() {
-        this.subscriptions$.add(this.subscribeOnPopover());
-    }
-    subscribeOnPopover() {
-        return this.fPopoverService.popover$.subscribe((x) => {
-            this.popoverMessage = x;
-            this.changeDetectorRef.markForCheck();
-        });
-    }
-    onToggleNavigation(value) {
-        this.isNavigationVisible = value;
-        this.changeDetectorRef.markForCheck();
+    onDocumentClick(event) {
+        this.injector.get(HandleNavigationLinksHandler).handle(new HandleNavigationLinksRequest(event));
     }
     ngOnDestroy() {
-        this.fPopoverService.dispose();
-        this.subscriptions$.unsubscribe();
+        this.subscription.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FDocumentationComponent, deps: [{ token: FPopoverService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FDocumentationComponent, isStandalone: true, selector: "f-documentation", providers: [
-            FEnvironmentService,
-            FPopoverService,
-            { provide: F_DOCUMENTATION_COMPONENT, useExisting: FDocumentationComponent }
-        ], ngImport: i0, template: "<div class=\"f-backdrop\" [class.visible]=\"isNavigationVisible\" (click)=\"onToggleNavigation(false)\"></div>\n<f-navigation-panel [class.visible]=\"isNavigationVisible\"></f-navigation-panel>\n\n<f-scrollable-container>\n  <f-header></f-header>\n  <router-outlet></router-outlet>\n</f-scrollable-container>\n@if (popoverMessage) {\n  <div class=\"popover\">{{ popoverMessage }}</div>\n}\n", styles: [":host{display:flex;justify-content:flex-start;align-items:flex-start;height:100%;gap:10px}.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);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: FNavigationPanelComponent, selector: "f-navigation-panel" }, { kind: "component", type: FHeaderComponent, selector: "f-header" }, { kind: "component", type: FScrollableContainerComponent, selector: "f-scrollable-container" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FNavigationPanelComponent, deps: [{ token: FDocumentationEnvironmentService }, { token: F_DOCUMENTATION_COMPONENT }, { token: i1.Router }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FNavigationPanelComponent, isStandalone: true, selector: "f-navigation-panel", host: { listeners: { "click": "onDocumentClick($event)" } }, providers: [
+            HandleNavigationLinksHandler
+        ], viewQueries: [{ propertyName: "items", predicate: FNavigationItemComponent, descendants: true }], ngImport: i0, template: "<a f-navigation-header routerLink></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 f-badge [text]=\"item.badge.text\" [type]=\"item.badge.type\"></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))}\n"], dependencies: [{ kind: "component", type: FNavigationHeaderComponent, selector: "a[f-navigation-header]" }, { kind: "component", type: FNavigationItemComponent, selector: "a[f-navigation-item]" }, { kind: "component", type: FNavigationGroupComponent, selector: "f-navigation-group", inputs: ["title"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: FBadgeComponent, selector: "span[f-badge]", inputs: ["text", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FDocumentationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FNavigationPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'f-documentation', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        FEnvironmentService,
-                        FPopoverService,
-                        { provide: F_DOCUMENTATION_COMPONENT, useExisting: FDocumentationComponent }
+            args: [{ selector: 'f-navigation-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        HandleNavigationLinksHandler
                     ], imports: [
-                        FNavigationPanelComponent,
-                        FHeaderComponent,
-                        FScrollableContainerComponent,
-                        RouterOutlet
-                    ], template: "<div class=\"f-backdrop\" [class.visible]=\"isNavigationVisible\" (click)=\"onToggleNavigation(false)\"></div>\n<f-navigation-panel [class.visible]=\"isNavigationVisible\"></f-navigation-panel>\n\n<f-scrollable-container>\n  <f-header></f-header>\n  <router-outlet></router-outlet>\n</f-scrollable-container>\n@if (popoverMessage) {\n  <div class=\"popover\">{{ popoverMessage }}</div>\n}\n", styles: [":host{display:flex;justify-content:flex-start;align-items:flex-start;height:100%;gap:10px}.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);color:var(--primary-text);font-size:14px;padding:4px 8px;border-radius:4px;z-index:var(--z-index-popover);opacity:1}\n"] }]
-        }], ctorParameters: () => [{ type: FPopoverService }, { type: i0.ChangeDetectorRef }] });
-
-var index$1 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    CookiePopup: CookiePopup,
-    FBadgeComponent: FBadgeComponent,
-    FCheckboxComponent: FCheckboxComponent,
-    FDocumentationComponent: FDocumentationComponent,
-    FHamburgerButtonComponent: FHamburgerButtonComponent,
-    FHeaderComponent: FHeaderComponent,
-    FHeaderMenuComponent: FHeaderMenuComponent,
-    FPreviewComponent: FPreviewComponent,
-    FSocialLinksComponent: FSocialLinksComponent,
-    FThemeButtonComponent: FThemeButtonComponent,
-    FVersionComponent: FVersionComponent,
-    F_DOCUMENTATION_COMPONENT: F_DOCUMENTATION_COMPONENT
-});
+                        FNavigationHeaderComponent,
+                        FNavigationItemComponent,
+                        FNavigationGroupComponent,
+                        RouterLink,
+                        FBadgeComponent,
+                    ], template: "<a f-navigation-header routerLink></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 f-badge [text]=\"item.badge.text\" [type]=\"item.badge.type\"></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))}\n"] }]
+        }], ctorParameters: () => [{ type: FDocumentationEnvironmentService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [F_DOCUMENTATION_COMPONENT]
+                }] }, { type: i1.Router }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }], propDecorators: { items: [{
+                type: ViewChildren,
+                args: [FNavigationItemComponent]
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
 
 class HandleDynamicComponentsHandler {
+    fEnvironmentService;
+    injector;
+    componentRefs = [];
     constructor(fEnvironmentService, injector) {
         this.fEnvironmentService = fEnvironmentService;
         this.injector = injector;
-        this.componentRefs = [];
     }
     handle(request) {
         this.dispose();
@@ -1305,14 +937,15 @@ class HandleDynamicComponentsHandler {
         this.componentRefs.forEach((ref) => ref.destroy());
         this.componentRefs = [];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleDynamicComponentsHandler, deps: [{ token: FEnvironmentService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleDynamicComponentsHandler }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HandleDynamicComponentsHandler, deps: [{ token: FDocumentationEnvironmentService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HandleDynamicComponentsHandler });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleDynamicComponentsHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HandleDynamicComponentsHandler, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FEnvironmentService }, { type: i0.Injector }] });
+        }], ctorParameters: () => [{ type: FDocumentationEnvironmentService }, { type: i0.Injector }] });
 
 class HandleDynamicComponentsRequest {
+    hostElement;
     constructor(hostElement) {
         this.hostElement = hostElement;
     }
@@ -1403,6 +1036,7 @@ const RULE$1 = {
 };
 
 class MarkCodeFocusedBlocksPostProcessor {
+    fBrowser;
     constructor(fBrowser) {
         this.fBrowser = fBrowser;
     }
@@ -1454,6 +1088,8 @@ const RULE = {
 };
 
 class HighlightService {
+    fBrowser;
+    Prism;
     constructor(fBrowser) {
         this.fBrowser = fBrowser;
     }
@@ -1492,18 +1128,21 @@ class HighlightService {
         element.querySelectorAll('pre code:not([class*="language-"])').forEach((x) => x.classList.add('language-none'));
         return of(element);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HighlightService, deps: [{ token: i2.BrowserService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HighlightService }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HighlightService, deps: [{ token: i2.BrowserService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HighlightService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HighlightService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HighlightService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i2.BrowserService }] });
 
 class FCodeViewHandler {
+    element;
+    injector;
+    subscriptions$ = new Subscription();
+    fDocument;
     constructor(element, injector) {
         this.element = element;
         this.injector = injector;
-        this.subscriptions$ = new Subscription();
         this.fDocument = this.injector.get(DOCUMENT);
         this.initialize();
     }
@@ -1554,6 +1193,7 @@ class FCodeViewHandler {
 }
 
 class FExampleViewHandler {
+    element;
     constructor(element) {
         this.element = element;
     }
@@ -1605,6 +1245,9 @@ class FAsyncCodeViewHandler extends FCodeViewHandler {
 }
 
 class FCodeGroupBodyHandler {
+    element;
+    injector;
+    fContainerHandlers;
     constructor(element, injector) {
         this.element = element;
         this.injector = injector;
@@ -1647,6 +1290,10 @@ class FCodeGroupBodyHandler {
 }
 
 class FCodeGroupHandler {
+    element;
+    injector;
+    subscriptions$ = new Subscription();
+    body;
     get tabs() {
         return Array.from(this.element.querySelectorAll('.f-tab-button'));
     }
@@ -1660,7 +1307,6 @@ class FCodeGroupHandler {
     constructor(element, injector) {
         this.element = element;
         this.injector = injector;
-        this.subscriptions$ = new Subscription();
         this.body = new FCodeGroupBodyHandler(this.element, this.injector);
         this.initialize();
     }
@@ -1696,10 +1342,11 @@ class FCodeGroupHandler {
 }
 
 class HandleParsedContainersHandler {
+    injector;
+    fCodeGroupHandler = [];
+    fCodeViewHandler = [];
     constructor(injector) {
         this.injector = injector;
-        this.fCodeGroupHandler = [];
-        this.fCodeViewHandler = [];
     }
     handle(request) {
         this.dispose();
@@ -1719,14 +1366,15 @@ class HandleParsedContainersHandler {
         this.fCodeGroupHandler.forEach((x) => x.dispose?.());
         this.fCodeViewHandler.forEach((x) => x.dispose?.());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleParsedContainersHandler, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleParsedContainersHandler }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HandleParsedContainersHandler, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HandleParsedContainersHandler });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleParsedContainersHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HandleParsedContainersHandler, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i0.Injector }] });
 
 class HandleParsedContainersRequest {
+    hostElement;
     constructor(hostElement) {
         this.hostElement = hostElement;
     }
@@ -1937,6 +1585,7 @@ class ParseExampleGroup {
 }
 
 class ParsePreviewGroup {
+    navigation;
     constructor(navigation) {
         this.navigation = navigation;
     }
@@ -1983,12 +1632,16 @@ class ParsePreviewGroup {
 }
 
 class MarkdownService {
+    httpClient;
+    domSanitizer;
+    fEnvironment;
+    router;
+    markdown = new MarkdownIt({ html: true, linkify: true });
     constructor(httpClient, domSanitizer, fEnvironment, router) {
         this.httpClient = httpClient;
         this.domSanitizer = domSanitizer;
         this.fEnvironment = fEnvironment;
         this.router = router;
-        this.markdown = new MarkdownIt({ html: true, linkify: true });
         this.markdown
             .use((x) => new ParseCodeView().render(x))
             .use(...new ParseAlerts().render(EMarkdownContainerType.ALERT_TIP, this.markdown))
@@ -2018,26 +1671,268 @@ class MarkdownService {
             return match;
         });
     }
-    isExternalLink(href) {
-        return href.startsWith('www') || href.startsWith('http');
+    isExternalLink(href) {
+        return href.startsWith('www') || href.startsWith('http');
+    }
+    cleanupEmptyParagraphs(html) {
+        return html.replace(/<p>\s*<\/p>/g, '');
+    }
+    cleanupWasteParagraphFromExampleView(html) {
+        return html.replace(/<div class="f-code-group-body">\s*<p>[^<]*<\/p>/g, '<div class="f-code-group-body">');
+    }
+    cleanupWasteParagraphFromPreviewGroup(html) {
+        return html.replace(/<p>(\[[^\]]+\](\s*\[[^\]]+\])*)<\/p>/g, '');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MarkdownService, deps: [{ token: i1$1.HttpClient }, { token: i2$1.DomSanitizer }, { token: FDocumentationEnvironmentService }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MarkdownService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MarkdownService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i2$1.DomSanitizer }, { type: FDocumentationEnvironmentService }, { type: i1.Router }] });
+
+class GetAbsoluteTopToContainerHandler {
+    handle(request) {
+        let element = request.element;
+        let result = 0;
+        while (element !== request.container) {
+            if (!element)
+                return NaN;
+            result += element.offsetTop;
+            element = element.offsetParent;
+        }
+        return result;
+    }
+}
+
+class GetAbsoluteTopToContainerRequest {
+    element;
+    container;
+    constructor(element, container) {
+        this.element = element;
+        this.container = container;
+    }
+}
+
+class TableOfContentData {
+    flat;
+    tree;
+    constructor(flat, tree) {
+        this.flat = flat;
+        this.tree = tree;
+    }
+}
+
+class GetTableOfContentDataHandler {
+    handle(request) {
+        const flat = [];
+        const tree = [];
+        const stack = [];
+        this.getNavigationSelectors(request.fMarkdownPage, request.tocRange).forEach((element) => {
+            const tocItem = this.createItem(element);
+            this.insertItemIntoTree(tocItem, tree, stack);
+            flat.push(tocItem);
+        });
+        return new TableOfContentData(flat, tree);
+    }
+    getNavigationSelectors(fMarkdownPage, tocRange) {
+        if (!tocRange || tocRange.start < 1 || tocRange.end > 6) {
+            tocRange = { start: 1, end: 6 };
+        }
+        let selectors = [];
+        for (let i = tocRange.start; i <= tocRange.end; i++) {
+            selectors.push(`h${i}`);
+        }
+        return Array.from(fMarkdownPage.querySelectorAll(selectors.join(', ')));
+    }
+    createItem(element) {
+        element.id = this.createNavigationId(element);
+        return {
+            hash: `#${element.id}`,
+            title: element.innerHTML,
+            element,
+            children: []
+        };
+    }
+    createNavigationId(element) {
+        return element.innerHTML.toLowerCase().replaceAll(' ', '-');
+    }
+    getLevel(element) {
+        return parseInt(element.tagName.substring(1));
+    }
+    insertItemIntoTree(tocItem, tree, stack) {
+        while (stack.length > 0 && this.getLevel(stack[stack.length - 1].element) >= this.getLevel(tocItem.element)) {
+            stack.pop();
+        }
+        if (stack.length === 0) {
+            tree.push(tocItem);
+        }
+        else {
+            stack[stack.length - 1].children.push(tocItem);
+        }
+        stack.push(tocItem);
+    }
+}
+
+class GetTableOfContentDataRequest {
+    fMarkdownPage;
+    tocRange;
+    constructor(fMarkdownPage, tocRange) {
+        this.fMarkdownPage = fMarkdownPage;
+        this.tocRange = tocRange;
+    }
+}
+
+class CalculateHashFromScrollPositionHandler {
+    scrollableContainer;
+    fBrowser;
+    constructor(scrollableContainer, fBrowser) {
+        this.scrollableContainer = scrollableContainer;
+        this.fBrowser = fBrowser;
+    }
+    handle(request) {
+        let result;
+        const containerScrollTop = this.getContainerScrollTop();
+        const elementsWithTopPosition = this.calculateElementsTopPositions(request.tocData);
+        if (elementsWithTopPosition.length) {
+            if (this.isScrollAtBottom(containerScrollTop)) {
+                result = elementsWithTopPosition[elementsWithTopPosition.length - 1].hash;
+            }
+            else {
+                result = this.findTargetHashByPosition(containerScrollTop, elementsWithTopPosition);
+            }
+        }
+        return result;
+    }
+    getContainerScrollTop() {
+        return this.scrollableContainer.scrollTop + this.getHeaderHeight();
+    }
+    getHeaderHeight() {
+        return parseInt(this.fBrowser.window.getComputedStyle(this.fBrowser.document.documentElement).getPropertyValue('--header-height'), 10);
+    }
+    calculateElementsTopPositions(items) {
+        return items.map((x) => {
+            return {
+                hash: x.hash,
+                top: this.getAbsoluteTopToContainer(x.element)
+            };
+        }).filter((x) => !Number.isNaN(x.top));
+    }
+    getAbsoluteTopToContainer(element) {
+        return new GetAbsoluteTopToContainerHandler().handle(new GetAbsoluteTopToContainerRequest(element, this.scrollableContainer));
+    }
+    isScrollAtBottom(containerScrollTop) {
+        return Math.abs(containerScrollTop - this.getHeaderHeight() + this.scrollableContainer.clientHeight - this.scrollableContainer.scrollHeight) < 1;
+    }
+    findTargetHashByPosition(containerScrollTop, elementsWithTopPosition) {
+        let result = elementsWithTopPosition[0].hash;
+        for (const { hash, top } of elementsWithTopPosition) {
+            if (top > containerScrollTop)
+                break;
+            result = hash;
+        }
+        return result;
+    }
+}
+
+class CalculateHashFromScrollPositionRequest {
+    tocData;
+    constructor(tocData) {
+        this.tocData = tocData;
+    }
+}
+
+class ScrollToElementInContainer {
+    container;
+    constructor(container) {
+        this.container = container;
+    }
+    handle(hash) {
+        this.container.scrollTo({
+            top: this.getScrollTo(this.getScrollToElement(hash)) - 64,
+            behavior: 'smooth'
+        });
+    }
+    getScrollToElement(hash) {
+        const element = this.container.querySelector(hash);
+        if (!element) {
+            throw new Error(`Element ${hash} not found`);
+        }
+        return element;
+    }
+    getScrollTo(element) {
+        return this.isFirstElementInContainer(element) ? 0 : this.calculateScrollTo(element);
+    }
+    isFirstElementInContainer(element) {
+        return element.parentElement.children[0] === element;
+    }
+    calculateScrollTo(element) {
+        return this.getElementTop(element) - this.getContainerTop() + this.container.scrollTop;
+    }
+    getElementTop(element) {
+        return element.getBoundingClientRect().top;
+    }
+    getContainerTop() {
+        return this.container.getBoundingClientRect().top;
+    }
+}
+
+class FScrollableService {
+    fEnvironmentService;
+    fBrowser;
+    fScrollableContainer;
+    tocData = new TableOfContentData([], []);
+    onTocChanged$ = new Subject();
+    get onToc$() {
+        return this.onTocChanged$.asObservable().pipe(map(() => this.tocData));
+    }
+    onScrollSubscription$ = Subscription.EMPTY;
+    constructor(fEnvironmentService, fBrowser) {
+        this.fEnvironmentService = fEnvironmentService;
+        this.fBrowser = fBrowser;
+    }
+    setContainer(fScrollableContainer) {
+        this.fScrollableContainer = fScrollableContainer;
+        this.onScrollSubscription$ = this.subscribeOnScroll();
+    }
+    subscribeOnScroll() {
+        return fromEvent(this.fScrollableContainer, 'scroll').pipe(debounceTime(100)).subscribe((event) => {
+            this.calculateHashAndActivate();
+        });
+    }
+    scrollTo(hash) {
+        if (!this.fScrollableContainer) {
+            throw new Error('Scrollable container is not set');
+        }
+        this.activateHash(hash);
+        new ScrollToElementInContainer(this.fScrollableContainer).handle(hash);
+    }
+    setOnPageNavigation(fMarkdownPage) {
+        this.tocData = new GetTableOfContentDataHandler().handle(new GetTableOfContentDataRequest(fMarkdownPage, this.fEnvironmentService.getToC().range));
+        this.calculateHashAndActivate();
     }
-    cleanupEmptyParagraphs(html) {
-        return html.replace(/<p>\s*<\/p>/g, '');
+    calculateHashAndActivate() {
+        this.activateHash(this.calculateHashFromScrollPosition());
     }
-    cleanupWasteParagraphFromExampleView(html) {
-        return html.replace(/<div class="f-code-group-body">\s*<p>[^<]*<\/p>/g, '<div class="f-code-group-body">');
+    calculateHashFromScrollPosition() {
+        return new CalculateHashFromScrollPositionHandler(this.fScrollableContainer, this.fBrowser).handle(new CalculateHashFromScrollPositionRequest(this.tocData.flat));
     }
-    cleanupWasteParagraphFromPreviewGroup(html) {
-        return html.replace(/<p>(\[[^\]]+\](\s*\[[^\]]+\])*)<\/p>/g, '');
+    activateHash(hash) {
+        this.tocData.flat.forEach(x => x.isActive = x.hash === hash);
+        this.onTocChanged$.next();
+    }
+    dispose() {
+        this.onScrollSubscription$.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MarkdownService, deps: [{ token: i1$1.HttpClient }, { token: i2$1.DomSanitizer }, { token: FEnvironmentService }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MarkdownService }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FScrollableService, deps: [{ token: FDocumentationEnvironmentService }, { token: i2.BrowserService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FScrollableService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MarkdownService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FScrollableService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i2$1.DomSanitizer }, { type: FEnvironmentService }, { type: i1.Router }] });
+        }], ctorParameters: () => [{ type: FDocumentationEnvironmentService }, { type: i2.BrowserService }] });
 
 class GetPreviousNextPageNavigationResponse {
+    previousLink;
+    nextLink;
     constructor(previousLink, nextLink) {
         this.previousLink = previousLink;
         this.nextLink = nextLink;
@@ -2045,6 +1940,7 @@ class GetPreviousNextPageNavigationResponse {
 }
 
 class GetPreviousNextPageNavigationHandler {
+    fEnvironmentService;
     constructor(fEnvironmentService) {
         this.fEnvironmentService = fEnvironmentService;
     }
@@ -2080,25 +1976,28 @@ class GetPreviousNextPageNavigationHandler {
 }
 
 class GetPreviousNextPageNavigationRequest {
+    currentLink;
     constructor(currentLink) {
         this.currentLink = currentLink;
     }
 }
 
 class FFooterEditInformationComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FFooterEditInformationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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: "18.2.13", ngImport: i0, type: FFooterEditInformationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: "17.3.12", ngImport: i0, type: FFooterEditInformationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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"] }]
         }] });
 
 class FFooterNavigationButtonComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FFooterNavigationButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 }); }
+    description;
+    link;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FFooterNavigationButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: "17.3.12", ngImport: i0, type: FFooterNavigationButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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: [{
@@ -2110,40 +2009,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }] } });
 
 class FFooterNavigationComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FFooterNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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: "18.2.13", ngImport: i0, type: FFooterNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: "17.3.12", ngImport: i0, type: FFooterNavigationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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 { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FFooterEditLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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: "18.2.13", ngImport: i0, type: FFooterEditLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: "17.3.12", ngImport: i0, type: FFooterEditLinkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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"] }]
         }] });
 
 class FFooterLastUpdatedComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FFooterLastUpdatedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FFooterLastUpdatedComponent, isStandalone: true, selector: "f-footer-last-updated", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{line-height:24px;font-size:14px;font-weight:500;color:var(--secondary-text)}@media (min-width: 640px){:host{line-height:32px;font-size:14px;font-weight:500}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FFooterLastUpdatedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FFooterLastUpdatedComponent, isStandalone: true, selector: "f-footer-last-updated", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{line-height:24px;font-size:14px;font-weight:500;color:var(--secondary-text)}@media (min-width: 640px){:host{line-height:32px;font-size:14px;font-weight:500}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FFooterLastUpdatedComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FFooterLastUpdatedComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-footer-last-updated', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<ng-content></ng-content>\n", styles: [":host{line-height:24px;font-size:14px;font-weight:500;color:var(--secondary-text)}@media (min-width: 640px){:host{line-height:32px;font-size:14px;font-weight:500}}\n"] }]
         }] });
 
 class FMarkdownFooterComponent {
+    injector;
+    fEnvironmentService;
+    router;
+    changeDetectorRef;
+    subscriptions$ = new Subscription();
+    navigation = {};
+    editLink;
+    previousLink;
+    nextLink;
     constructor(injector, fEnvironmentService, router, changeDetectorRef) {
         this.injector = injector;
         this.fEnvironmentService = fEnvironmentService;
         this.router = router;
         this.changeDetectorRef = changeDetectorRef;
-        this.subscriptions$ = new Subscription();
-        this.navigation = {};
     }
     ngOnInit() {
         this.subscriptions$.add(this.subscribeOnRouteChanges());
@@ -2188,10 +2094,10 @@ class FMarkdownFooterComponent {
     ngOnDestroy() {
         this.subscriptions$.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FMarkdownFooterComponent, deps: [{ token: i0.Injector }, { token: FEnvironmentService }, { token: i1.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", 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>{{ lastUpdated.datetime }}</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: "18.2.13", ngImport: i0, type: FMarkdownFooterComponent, deps: [{ token: i0.Injector }, { token: FDocumentationEnvironmentService }, { token: i1.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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>{{ lastUpdated.datetime }}</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: "17.3.12", ngImport: i0, type: FMarkdownFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FMarkdownFooterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'footer [f-markdown-footer]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         FFooterNavigationComponent,
@@ -2201,27 +2107,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         FFooterLastUpdatedComponent,
                         RouterLink,
                     ], standalone: true, 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>{{ lastUpdated.datetime }}</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"] }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: FEnvironmentService }, { type: i1.Router }, { type: i0.ChangeDetectorRef }], propDecorators: { onDocumentClick: [{
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: FDocumentationEnvironmentService }, { type: i1.Router }, { type: i0.ChangeDetectorRef }], propDecorators: { onDocumentClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }] } });
 
 class FMarkdownRendererComponent {
+    injector;
+    changeDetectorRef;
+    subscriptions$ = new Subscription();
+    value;
+    hostElement = inject(ElementRef).nativeElement;
+    fScrollableService = inject(FScrollableService);
+    fContainersHandler = inject(HandleParsedContainersHandler);
+    fDynamicComponentsHandler = inject(HandleDynamicComponentsHandler);
+    isMarkdownChanged = false;
     constructor(injector, changeDetectorRef) {
         this.injector = injector;
         this.changeDetectorRef = changeDetectorRef;
-        this.subscriptions$ = new Subscription();
-        this.hostElement = inject(ElementRef).nativeElement;
-        this.fScrollableService = inject(FScrollableService);
-        this.fContainersHandler = inject(HandleParsedContainersHandler);
-        this.fDynamicComponentsHandler = inject(HandleDynamicComponentsHandler);
-        this.isMarkdownChanged = false;
     }
     ngOnInit() {
         this.subscriptions$.add(this.subscribeOnRouteChanges());
     }
     subscribeOnRouteChanges() {
-        return this.getRouterEvents().pipe(startWith(null), debounceTime(50), switchMap(() => this.injector.get(MarkdownService).parse(this.injector.get(FEnvironmentService).getMarkdownUrl(this.markdownPath))), tap((x) => this.renderMarkdown(x)), catchError((e, data) => data)).subscribe();
+        return this.getRouterEvents().pipe(startWith(null), debounceTime(50), switchMap(() => this.injector.get(MarkdownService).parse(this.injector.get(FDocumentationEnvironmentService).getMarkdownUrl(this.markdownPath))), tap((x) => this.renderMarkdown(x)), catchError((e, data) => data)).subscribe();
     }
     getRouterEvents() {
         return this.injector.get(Router).events;
@@ -2250,16 +2159,16 @@ class FMarkdownRendererComponent {
         this.fDynamicComponentsHandler.dispose();
         this.subscriptions$.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FMarkdownRendererComponent, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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: "18.2.13", ngImport: i0, type: FMarkdownRendererComponent, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FMarkdownRendererComponent, isStandalone: true, selector: "f-markdown-renderer", host: { listeners: { "click": "onDocumentClick($event)" }, classAttribute: "m-render" }, providers: [
             MarkdownService,
             HighlightService,
             HandleNavigationLinksHandler,
             HandleParsedContainersHandler,
             HandleDynamicComponentsHandler
-        ], ngImport: i0, template: "<div [innerHTML]=\"value\"></div>\n<footer f-markdown-footer></footer>\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 }); }
+        ], ngImport: i0, template: "<div [innerHTML]=\"value\"></div>\n<footer f-markdown-footer></footer>\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: "17.3.12", ngImport: i0, type: FMarkdownRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FMarkdownRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-markdown-renderer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         MarkdownService,
@@ -2278,32 +2187,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }] } });
 
 class FTableOfContentItemsComponent {
-    constructor() {
-        this.items = [];
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FTableOfContentItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FTableOfContentItemsComponent, isStandalone: true, selector: "ul[f-table-of-content-items]", inputs: { items: "items" }, 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: FTableOfContentItemsComponent, selector: "ul[f-table-of-content-items]", inputs: ["items"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
+    items = [];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FTableOfContentItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FTableOfContentItemsComponent, isStandalone: true, selector: "ul[f-table-of-content-items]", inputs: { items: "items" }, 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: FTableOfContentItemsComponent, selector: "ul[f-table-of-content-items]", inputs: ["items"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FTableOfContentItemsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FTableOfContentItemsComponent, 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"] }]
         }], propDecorators: { items: [{
                 type: Input
             }] } });
 
+class FScrollableContainerComponent {
+    elementRef;
+    fScrollableService;
+    get hostElement() {
+        return this.elementRef.nativeElement;
+    }
+    constructor(elementRef, fScrollableService) {
+        this.elementRef = elementRef;
+        this.fScrollableService = fScrollableService;
+    }
+    ngOnInit() {
+        this.fScrollableService.setContainer(this.hostElement);
+    }
+    ngOnDestroy() {
+        this.fScrollableService.dispose();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FScrollableContainerComponent, deps: [{ token: i0.ElementRef }, { token: FScrollableService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FScrollableContainerComponent, isStandalone: true, selector: "f-scrollable-container", providers: [
+            FScrollableService
+        ], ngImport: i0, template: "<ng-content></ng-content>\n\n\n\n", styles: [":host{position:relative;width:100%;height:100%;overflow:hidden;overflow-y:auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FScrollableContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'f-scrollable-container', providers: [
+                        FScrollableService
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n\n\n\n", styles: [":host{position:relative;width:100%;height:100%;overflow:hidden;overflow-y:auto}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FScrollableService }] });
+
 class FTableOfContentComponent {
+    fEnvironmentService;
+    elementRef;
+    fScrollableService;
+    changeDetectorRef;
+    fBrowser;
+    subscriptions$ = new Subscription();
     get onToc$() {
         return this.fScrollableService.onToc$;
     }
+    tocData = new TableOfContentData([], []);
+    activeMarkerPosition = 0;
+    title;
     constructor(fEnvironmentService, elementRef, fScrollableService, changeDetectorRef, fBrowser) {
         this.fEnvironmentService = fEnvironmentService;
         this.elementRef = elementRef;
         this.fScrollableService = fScrollableService;
         this.changeDetectorRef = changeDetectorRef;
         this.fBrowser = fBrowser;
-        this.subscriptions$ = new Subscription();
-        this.tocData = new TableOfContentData([], []);
-        this.activeMarkerPosition = 0;
         this.title = this.fEnvironmentService.getToC().title;
     }
     ngOnInit() {
@@ -2334,22 +2275,22 @@ class FTableOfContentComponent {
     ngOnDestroy() {
         this.subscriptions$.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FTableOfContentComponent, deps: [{ token: FEnvironmentService }, { token: i0.ElementRef }, { token: FScrollableService }, { token: i0.ChangeDetectorRef }, { token: i2.BrowserService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FTableOfContentComponent, isStandalone: true, selector: "aside[f-table-of-content]", host: { listeners: { "click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"title\">{{ title || 'In this article' }}</div>\n<ul f-table-of-content-items [items]=\"tocData.tree\"></ul>\n<div class=\"active-marker\" [style.top]=\"activeMarkerPosition + 'px'\"></div>\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: FTableOfContentItemsComponent, selector: "ul[f-table-of-content-items]", inputs: ["items"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FTableOfContentComponent, deps: [{ token: FDocumentationEnvironmentService }, { token: i0.ElementRef }, { token: FScrollableService }, { token: i0.ChangeDetectorRef }, { token: i2.BrowserService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FTableOfContentComponent, isStandalone: true, selector: "aside[f-table-of-content]", host: { listeners: { "click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"title\">{{ title || 'In this article' }}</div>\n<ul f-table-of-content-items [items]=\"tocData.tree\"></ul>\n<div class=\"active-marker\" [style.top]=\"activeMarkerPosition + 'px'\"></div>\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: FTableOfContentItemsComponent, selector: "ul[f-table-of-content-items]", inputs: ["items"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FTableOfContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FTableOfContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'aside[f-table-of-content]', standalone: true, imports: [AsyncPipe, JsonPipe, FTableOfContentItemsComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"title\">{{ title || 'In this article' }}</div>\n<ul f-table-of-content-items [items]=\"tocData.tree\"></ul>\n<div class=\"active-marker\" [style.top]=\"activeMarkerPosition + 'px'\"></div>\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"] }]
-        }], ctorParameters: () => [{ type: FEnvironmentService }, { type: i0.ElementRef }, { type: FScrollableService }, { type: i0.ChangeDetectorRef }, { type: i2.BrowserService }], propDecorators: { onDocumentClick: [{
+        }], ctorParameters: () => [{ type: FDocumentationEnvironmentService }, { type: i0.ElementRef }, { type: FScrollableService }, { type: i0.ChangeDetectorRef }, { type: i2.BrowserService }], propDecorators: { onDocumentClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }] } });
 
 class FPageComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FPageComponent, isStandalone: true, selector: "f-page", host: { attributes: { "ngSkipHydration": "" } }, ngImport: i0, template: "<f-markdown-renderer></f-markdown-renderer>\n<aside f-table-of-content></aside>\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: FTableOfContentComponent, selector: "aside[f-table-of-content]" }, { kind: "component", type: FMarkdownRendererComponent, selector: "f-markdown-renderer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FPageComponent, isStandalone: true, selector: "f-page", host: { attributes: { "ngSkipHydration": "" } }, ngImport: i0, template: "<f-markdown-renderer></f-markdown-renderer>\n<aside f-table-of-content></aside>\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: FTableOfContentComponent, selector: "aside[f-table-of-content]" }, { kind: "component", type: FMarkdownRendererComponent, selector: "f-markdown-renderer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-page', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         FTableOfContentComponent,
@@ -2359,26 +2300,208 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     }, template: "<f-markdown-renderer></f-markdown-renderer>\n<aside f-table-of-content></aside>\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"] }]
         }] });
 
-var index = /*#__PURE__*/Object.freeze({
+var index$2 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ChangeCodeFocusedSyntaxPreProcessor: ChangeCodeFocusedSyntaxPreProcessor,
+    get EMarkdownContainerType () { return EMarkdownContainerType; },
+    FAsyncCodeViewHandler: FAsyncCodeViewHandler,
+    FCodeGroupBodyHandler: FCodeGroupBodyHandler,
+    FCodeGroupHandler: FCodeGroupHandler,
+    FCodeViewHandler: FCodeViewHandler,
+    FExampleViewHandler: FExampleViewHandler,
+    FFooterEditInformationComponent: FFooterEditInformationComponent,
+    FFooterNavigationButtonComponent: FFooterNavigationButtonComponent,
+    FFooterNavigationComponent: FFooterNavigationComponent,
+    FMarkdownFooterComponent: FMarkdownFooterComponent,
+    FMarkdownRendererComponent: FMarkdownRendererComponent,
+    FPageComponent: FPageComponent,
+    FTableOfContentComponent: FTableOfContentComponent,
+    FTableOfContentItemsComponent: FTableOfContentItemsComponent,
+    GetPreviousNextPageNavigationHandler: GetPreviousNextPageNavigationHandler,
+    GetPreviousNextPageNavigationRequest: GetPreviousNextPageNavigationRequest,
+    GetPreviousNextPageNavigationResponse: GetPreviousNextPageNavigationResponse,
+    HandleDynamicComponentsHandler: HandleDynamicComponentsHandler,
+    HandleDynamicComponentsRequest: HandleDynamicComponentsRequest,
+    HandleParsedContainersHandler: HandleParsedContainersHandler,
+    HandleParsedContainersRequest: HandleParsedContainersRequest,
+    HighlightService: HighlightService,
+    MarkCodeFocusedBlocksPostProcessor: MarkCodeFocusedBlocksPostProcessor,
+    MarkdownService: MarkdownService,
+    ModifyPunctuationHighlightPostProcessor: ModifyPunctuationHighlightPostProcessor,
+    ParseAlerts: ParseAlerts,
+    ParseCodeGroup: ParseCodeGroup,
+    ParseCodeView: ParseCodeView,
+    ParseExampleGroup: ParseExampleGroup,
+    ParsePreviewGroup: ParsePreviewGroup,
+    SeparateCodeByLinesPostProcessor: SeparateCodeByLinesPostProcessor,
+    copyToClipboard: copyToClipboard,
+    getContent: getContent
+});
+
+class FPreviewComponent {
+    fEnvironment;
+    fState;
+    router;
+    changeDetectorRef;
+    subscriptions$ = new Subscription();
+    item;
+    group;
+    viewModel;
+    src;
+    url;
+    constructor(fEnvironment, fState, router, changeDetectorRef) {
+        this.fEnvironment = fEnvironment;
+        this.fState = fState;
+        this.router = router;
+        this.changeDetectorRef = changeDetectorRef;
+    }
+    initialize() {
+        this.viewModel = this.getNavigationItem(this.getNavigationGroup());
+        this.url = this.normalizeLink(this.viewModel.link, this.getUrlPrefix());
+        this.subscriptions$.add(this.fState.theme$.pipe(startWith(null)).subscribe(() => this.updateTheme()));
+    }
+    getNavigationGroup() {
+        return this.fEnvironment.getNavigation().find((x) => x.text === this.group);
+    }
+    getNavigationItem(group) {
+        return group.items.find((x) => x.link === this.item);
+    }
+    updateTheme() {
+        this.src = this.fState.getPreferredTheme() === 'dark' ? this.viewModel?.image_dark : this.viewModel?.image;
+        if (!this.src) {
+            this.src = this.viewModel?.image;
+        }
+        this.changeDetectorRef.markForCheck();
+    }
+    normalizeLink(link, prefix) {
+        if (!this.isExternalLink(link)) {
+            return link.startsWith('/') ? `${prefix}${link}` : `${prefix}/${link}`;
+        }
+        return link;
+    }
+    getUrlPrefix() {
+        return this.router.url.substring(0, this.router.url.lastIndexOf('/'));
+    }
+    isExternalLink(href) {
+        return href.startsWith('www') || href.startsWith('http');
+    }
+    ngOnDestroy() {
+        this.subscriptions$.unsubscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FPreviewComponent, deps: [{ token: FDocumentationEnvironmentService }, { token: FStateService }, { token: i1.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FPreviewComponent, isStandalone: true, selector: "a[f-preview]", host: { properties: { "attr.href": "url", "attr.title": "viewModel?.text" } }, ngImport: i0, template: "@if (viewModel) {\n  <img [src]=\"src\" [alt]=\"viewModel.description\" [title]=\"viewModel.text\">\n  <div class=\"title\">{{ viewModel.text }}</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)}: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)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FPreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'a[f-preview]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[attr.href]': 'url',
+                        '[attr.title]': 'viewModel?.text',
+                    }, template: "@if (viewModel) {\n  <img [src]=\"src\" [alt]=\"viewModel.description\" [title]=\"viewModel.text\">\n  <div class=\"title\">{{ viewModel.text }}</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)}: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)}}\n"] }]
+        }], ctorParameters: () => [{ type: FDocumentationEnvironmentService }, { type: FStateService }, { type: i1.Router }, { type: i0.ChangeDetectorRef }] });
+
+const F_DOCUMENTATION_COMPONENT = new InjectionToken('F_DOCUMENTATION_COMPONENT');
+
+class FDocumentationComponent {
+    isNavigationVisible = false;
+    popoverMessage = null;
+    _fPopover = inject(FPopoverService);
+    _destroyRef = inject(DestroyRef);
+    _changeDetectorRef = inject(ChangeDetectorRef);
+    ngOnInit() {
+        this._fPopover.dispose(this._destroyRef);
+        this._subscribeOnPopover();
+    }
+    _subscribeOnPopover() {
+        this._fPopover.popover$.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((x) => {
+            this.popoverMessage = x;
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+    onToggleNavigation(value) {
+        this.isNavigationVisible = value;
+        this._changeDetectorRef.markForCheck();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FDocumentationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FDocumentationComponent, isStandalone: true, selector: "f-documentation", providers: [
+            FDocumentationEnvironmentService,
+            FPopoverService,
+            { provide: INTERNAL_ENVIRONMENT_SERVICE, useExisting: FDocumentationEnvironmentService },
+            { provide: F_DOCUMENTATION_COMPONENT, useExisting: FDocumentationComponent }
+        ], ngImport: i0, template: "<div class=\"f-backdrop\" [class.visible]=\"isNavigationVisible\" (click)=\"onToggleNavigation(false)\"></div>\n<f-navigation-panel [class.visible]=\"isNavigationVisible\"></f-navigation-panel>\n\n<f-scrollable-container>\n  <f-header></f-header>\n  <router-outlet></router-outlet>\n</f-scrollable-container>\n@if (popoverMessage) {\n  <div class=\"popover\">{{ popoverMessage }}</div>\n}\n", styles: [":host{display:flex;justify-content:flex-start;align-items:flex-start;height:100%;gap:10px}.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);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: FNavigationPanelComponent, selector: "f-navigation-panel" }, { kind: "component", type: FHeaderComponent, selector: "f-header" }, { kind: "component", type: FScrollableContainerComponent, selector: "f-scrollable-container" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FDocumentationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'f-documentation', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        FDocumentationEnvironmentService,
+                        FPopoverService,
+                        { provide: INTERNAL_ENVIRONMENT_SERVICE, useExisting: FDocumentationEnvironmentService },
+                        { provide: F_DOCUMENTATION_COMPONENT, useExisting: FDocumentationComponent }
+                    ], imports: [
+                        FNavigationPanelComponent,
+                        FHeaderComponent,
+                        FScrollableContainerComponent,
+                        RouterOutlet
+                    ], template: "<div class=\"f-backdrop\" [class.visible]=\"isNavigationVisible\" (click)=\"onToggleNavigation(false)\"></div>\n<f-navigation-panel [class.visible]=\"isNavigationVisible\"></f-navigation-panel>\n\n<f-scrollable-container>\n  <f-header></f-header>\n  <router-outlet></router-outlet>\n</f-scrollable-container>\n@if (popoverMessage) {\n  <div class=\"popover\">{{ popoverMessage }}</div>\n}\n", styles: [":host{display:flex;justify-content:flex-start;align-items:flex-start;height:100%;gap:10px}.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);color:var(--primary-text);font-size:14px;padding:4px 8px;border-radius:4px;z-index:var(--z-index-popover);opacity:1}\n"] }]
+        }] });
+
+const F_DOCS_ENVIRONMENT = new InjectionToken('F_DOCS_ENVIRONMENT');
+
+const F_DOCS_ROUTES = [
+    {
+        path: '',
+        loadComponent: () => Promise.resolve().then(function () { return index$1; }).then(m => m.FDocumentationComponent),
+        children: [
+            {
+                path: '**',
+                loadComponent: () => Promise.resolve().then(function () { return index$2; }).then(m => m.FPageComponent)
+            }
+        ]
+    }
+];
+
+var index$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
+    CalculateHashFromScrollPositionHandler: CalculateHashFromScrollPositionHandler,
+    CalculateHashFromScrollPositionRequest: CalculateHashFromScrollPositionRequest,
     ChangeCodeFocusedSyntaxPreProcessor: ChangeCodeFocusedSyntaxPreProcessor,
     get EMarkdownContainerType () { return EMarkdownContainerType; },
     FAsyncCodeViewHandler: FAsyncCodeViewHandler,
+    FBadgeComponent: FBadgeComponent,
     FCodeGroupBodyHandler: FCodeGroupBodyHandler,
     FCodeGroupHandler: FCodeGroupHandler,
     FCodeViewHandler: FCodeViewHandler,
+    FDocumentationComponent: FDocumentationComponent,
+    FDocumentationEnvironmentService: FDocumentationEnvironmentService,
     FExampleViewHandler: FExampleViewHandler,
     FFooterEditInformationComponent: FFooterEditInformationComponent,
     FFooterNavigationButtonComponent: FFooterNavigationButtonComponent,
     FFooterNavigationComponent: FFooterNavigationComponent,
+    FHamburgerButtonComponent: FHamburgerButtonComponent,
+    FHeaderComponent: FHeaderComponent,
+    FHeaderMenuComponent: FHeaderMenuComponent,
     FMarkdownFooterComponent: FMarkdownFooterComponent,
     FMarkdownRendererComponent: FMarkdownRendererComponent,
+    FNavigationGroupComponent: FNavigationGroupComponent,
+    FNavigationHeaderComponent: FNavigationHeaderComponent,
+    FNavigationItemComponent: FNavigationItemComponent,
+    FNavigationPanelComponent: FNavigationPanelComponent,
     FPageComponent: FPageComponent,
+    FPreviewComponent: FPreviewComponent,
+    FScrollableContainerComponent: FScrollableContainerComponent,
+    FSocialLinksComponent: FSocialLinksComponent,
     FTableOfContentComponent: FTableOfContentComponent,
     FTableOfContentItemsComponent: FTableOfContentItemsComponent,
+    FVersionComponent: FVersionComponent,
+    F_DOCS_ENVIRONMENT: F_DOCS_ENVIRONMENT,
+    F_DOCS_ROUTES: F_DOCS_ROUTES,
+    F_DOCUMENTATION_COMPONENT: F_DOCUMENTATION_COMPONENT,
+    GetAbsoluteTopToContainerHandler: GetAbsoluteTopToContainerHandler,
+    GetAbsoluteTopToContainerRequest: GetAbsoluteTopToContainerRequest,
     GetPreviousNextPageNavigationHandler: GetPreviousNextPageNavigationHandler,
     GetPreviousNextPageNavigationRequest: GetPreviousNextPageNavigationRequest,
     GetPreviousNextPageNavigationResponse: GetPreviousNextPageNavigationResponse,
+    GetTableOfContentDataHandler: GetTableOfContentDataHandler,
+    GetTableOfContentDataRequest: GetTableOfContentDataRequest,
     HandleDynamicComponentsHandler: HandleDynamicComponentsHandler,
     HandleDynamicComponentsRequest: HandleDynamicComponentsRequest,
     HandleParsedContainersHandler: HandleParsedContainersHandler,
@@ -2392,14 +2515,192 @@ var index = /*#__PURE__*/Object.freeze({
     ParseCodeView: ParseCodeView,
     ParseExampleGroup: ParseExampleGroup,
     ParsePreviewGroup: ParsePreviewGroup,
+    ScrollToElementInContainer: ScrollToElementInContainer,
     SeparateCodeByLinesPostProcessor: SeparateCodeByLinesPostProcessor,
+    TableOfContentData: TableOfContentData,
     copyToClipboard: copyToClipboard,
     getContent: getContent
 });
 
+const F_HOME_PAGE_ENVIRONMENT = new InjectionToken('F_HOME_PAGE_ENVIRONMENT');
+
+class FHomePageEnvironmentService {
+    environment;
+    http;
+    constructor(environment, http) {
+        this.environment = environment;
+        this.http = http;
+    }
+    getLogo() {
+        return this.environment.logo;
+    }
+    getTitle() {
+        return this.environment.title;
+    }
+    getHero() {
+        return this.environment.hero;
+    }
+    getButtons() {
+        return this.environment.buttons;
+    }
+    getFeatures() {
+        return this.environment.features;
+    }
+    getFooter() {
+        return this.environment.footer;
+    }
+    getBackgroundComponent() {
+        return this.environment.backgroundComponent;
+    }
+    getImageComponent() {
+        return this.environment.heroImageComponent;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHomePageEnvironmentService, deps: [{ token: F_HOME_PAGE_ENVIRONMENT, optional: true }, { token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHomePageEnvironmentService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHomePageEnvironmentService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [F_HOME_PAGE_ENVIRONMENT]
+                }] }, { type: i1$1.HttpClient }] });
+
+class FHomePageFeaturesComponent {
+    viewModel = inject(FHomePageEnvironmentService).getFeatures();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHomePageFeaturesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FHomePageFeaturesComponent, isStandalone: true, selector: "f-home-page-features", 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:all}:host .feature{width:100%;border-radius:4px;background-color:var(--soft-background);display:flex;flex-direction:column;padding:24px}: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: "18.2.13", ngImport: i0, type: FHomePageFeaturesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'f-home-page-features', standalone: true, 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:all}:host .feature{width:100%;border-radius:4px;background-color:var(--soft-background);display:flex;flex-direction:column;padding:24px}: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"] }]
+        }] });
+
+class FHomePageHeaderComponent {
+    logo = inject(FHomePageEnvironmentService).getLogo();
+    title = inject(FHomePageEnvironmentService).getTitle();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHomePageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FHomePageHeaderComponent, isStandalone: true, selector: "header[f-home-page-header]", ngImport: i0, template: "<div class=\"content\">\n  <img [src]=\"logo\" class=\"logo\" alt=\"{{ title }} Logo\" width=\"24\" height=\"24\"/>\n  <span class=\"title\">{{ title }}</span>\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 .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]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHomePageHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'header[f-home-page-header]', standalone: true, imports: [
+                        FThemeButtonComponent
+                    ], template: "<div class=\"content\">\n  <img [src]=\"logo\" class=\"logo\" alt=\"{{ title }} Logo\" width=\"24\" height=\"24\"/>\n  <span class=\"title\">{{ title }}</span>\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 .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 FHomePageFooterComponent {
+    viewModel = inject(FHomePageEnvironmentService).getFooter();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHomePageFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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://github.com/Foblex/m-render\" 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: "18.2.13", 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://github.com/Foblex/m-render\" 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"] }]
+        }] });
+
+class FHomePageButtonsRowComponent {
+    viewModel = inject(FHomePageEnvironmentService).getButtons();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHomePageButtonsRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FHomePageButtonsRowComponent, isStandalone: true, selector: "f-home-page-buttons-row", 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 }}\">{{ button.text }}</a>\n  } @else if(button.href) {\n    <a class=\"f-button\" [class.primary]=\"button.primary\" href=\"{{ button.href }}\">{{ button.text }}</a>\n  }\n\n}\n<!--<a class=\"f-button primary\" routerLink=\"/docs/get-started\">Get Started</a>-->\n<!--<a class=\"f-button\" routerLink=\"/examples/overview\">Examples</a>-->\n<!--<a class=\"f-button\" href=\"https://github.com/Foblex/m-render\">Github</a>-->\n", styles: [":host{display:flex;padding-top:32px;gap:12px;width:fit-content;margin:0 auto}@media (min-width: 960px){:host{margin:0}}\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: "18.2.13", ngImport: i0, type: FHomePageButtonsRowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'f-home-page-buttons-row', standalone: true, imports: [
+                        RouterLink
+                    ], template: "@for (button of viewModel; track button.text) {\n  @if (button.routerLink) {\n    <a class=\"f-button\" [class.primary]=\"button.primary\" routerLink=\"{{ button.routerLink }}\">{{ button.text }}</a>\n  } @else if(button.href) {\n    <a class=\"f-button\" [class.primary]=\"button.primary\" href=\"{{ button.href }}\">{{ button.text }}</a>\n  }\n\n}\n<!--<a class=\"f-button primary\" routerLink=\"/docs/get-started\">Get Started</a>-->\n<!--<a class=\"f-button\" routerLink=\"/examples/overview\">Examples</a>-->\n<!--<a class=\"f-button\" href=\"https://github.com/Foblex/m-render\">Github</a>-->\n", styles: [":host{display:flex;padding-top:32px;gap:12px;width:fit-content;margin:0 auto}@media (min-width: 960px){:host{margin:0}}\n"] }]
+        }] });
+
+class FHomePageHeroComponent {
+    viewModel = inject(FHomePageEnvironmentService).getHero();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHomePageHeroComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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%}@media (min-width: 640px){:host{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: "18.2.13", ngImport: i0, type: FHomePageHeroComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'f-home-page-hero', standalone: true, imports: [
+                        FHomePageButtonsRowComponent
+                    ], 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%}@media (min-width: 640px){:host{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"] }]
+        }] });
+
+const F_HOME_PAGE_COMPONENT = new InjectionToken('F_HOME_PAGE_COMPONENT');
+class FHomePageComponent {
+    _environmentService = inject(FHomePageEnvironmentService);
+    _backgroundContainer;
+    _heroImageContainer;
+    ngAfterViewInit() {
+        this._renderImageComponent(this._environmentService.getImageComponent());
+        this._renderBackgroundComponent(this._environmentService.getBackgroundComponent());
+    }
+    _renderImageComponent(component) {
+        if (component) {
+            this.requestComponentRedraw(this._getImageComponentReference(component));
+        }
+    }
+    _renderBackgroundComponent(component) {
+        if (component) {
+            this.requestComponentRedraw(this._getBackgroundComponentReference(component));
+        }
+    }
+    _getBackgroundComponentReference(component) {
+        return this._backgroundContainer.createComponent(component);
+    }
+    _getImageComponentReference(component) {
+        return this._heroImageContainer.createComponent(component);
+    }
+    requestComponentRedraw(componentRef) {
+        componentRef.changeDetectorRef.markForCheck();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHomePageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FHomePageComponent, isStandalone: true, selector: "f-home-page", providers: [
+            FHomePageEnvironmentService,
+            { provide: INTERNAL_ENVIRONMENT_SERVICE, useExisting: FHomePageEnvironmentService },
+            { provide: F_HOME_PAGE_COMPONENT, useExisting: FHomePageComponent }
+        ], 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</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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHomePageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'f-home-page', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        FHomePageEnvironmentService,
+                        { provide: INTERNAL_ENVIRONMENT_SERVICE, useExisting: FHomePageEnvironmentService },
+                        { provide: F_HOME_PAGE_COMPONENT, useExisting: FHomePageComponent }
+                    ], imports: [
+                        FHomePageFooterComponent,
+                        FHomePageHeaderComponent,
+                        FHomePageFeaturesComponent,
+                        FHomePageHeroComponent,
+                    ], 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</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 }]
+            }] } });
+
+const F_HOME_PAGE_ROUTES = [
+    {
+        path: '',
+        loadComponent: () => Promise.resolve().then(function () { return index; }).then(m => m.FHomePageComponent),
+    }
+];
+
+var index = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    FHomePageComponent: FHomePageComponent,
+    FHomePageEnvironmentService: FHomePageEnvironmentService,
+    FHomePageFeaturesComponent: FHomePageFeaturesComponent,
+    FHomePageFooterComponent: FHomePageFooterComponent,
+    FHomePageHeaderComponent: FHomePageHeaderComponent,
+    F_HOME_PAGE_COMPONENT: F_HOME_PAGE_COMPONENT,
+    F_HOME_PAGE_ENVIRONMENT: F_HOME_PAGE_ENVIRONMENT,
+    F_HOME_PAGE_ROUTES: F_HOME_PAGE_ROUTES
+});
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CalculateHashFromScrollPositionHandler, CalculateHashFromScrollPositionRequest, ChangeCodeFocusedSyntaxPreProcessor, CookiePopup, EMarkdownContainerType, FAnalyticsService, FAsyncCodeViewHandler, FBadgeComponent, FCheckboxComponent, FCodeGroupBodyHandler, FCodeGroupHandler, FCodeViewHandler, FDocumentationComponent, FEnvironmentService, FExampleViewHandler, FFooterEditInformationComponent, FFooterNavigationButtonComponent, FFooterNavigationComponent, FHamburgerButtonComponent, FHeadTagService, FHeaderComponent, FHeaderMenuComponent, FJsonLdService, FMarkdownFooterComponent, FMarkdownRendererComponent, FMetaService, FNavigationGroupComponent, FNavigationHeaderComponent, FNavigationItemComponent, FNavigationPanelComponent, FPageComponent, FPopoverService, FPreviewComponent, FScrollableContainerComponent, FSocialLinksComponent, FTableOfContentComponent, FTableOfContentItemsComponent, FThemeButtonComponent, FVersionComponent, F_ACCEPT_COOKIES_KEY, F_DOCUMENTATION_COMPONENT, F_DOCUMENTATION_ROUTES, F_ENVIRONMENT, GetAbsoluteTopToContainerHandler, GetAbsoluteTopToContainerRequest, GetPreviousNextPageNavigationHandler, GetPreviousNextPageNavigationRequest, GetPreviousNextPageNavigationResponse, GetTableOfContentDataHandler, GetTableOfContentDataRequest, GetVersionHandler, GetVersionRequest, HandleDynamicComponentsHandler, HandleDynamicComponentsRequest, HandleNavigationLinksHandler, HandleNavigationLinksRequest, HandleParsedContainersHandler, HandleParsedContainersRequest, HighlightService, MarkCodeFocusedBlocksPostProcessor, MarkdownService, ModifyPunctuationHighlightPostProcessor, ParseAlerts, ParseCodeGroup, ParseCodeView, ParseExampleGroup, ParsePreviewGroup, ScrollToElementInContainer, SeparateCodeByLinesPostProcessor, TableOfContentData, copyToClipboard, getContent, setCookieConsent };
+export { CalculateHashFromScrollPositionHandler, CalculateHashFromScrollPositionRequest, ChangeCodeFocusedSyntaxPreProcessor, CookiePopup, EMarkdownContainerType, FAnalyticsService, FAsyncCodeViewHandler, FBadgeComponent, FCheckboxComponent, FCodeGroupBodyHandler, FCodeGroupHandler, FCodeViewHandler, FDocumentationComponent, FDocumentationEnvironmentService, FExampleViewHandler, FFooterEditInformationComponent, FFooterNavigationButtonComponent, FFooterNavigationComponent, FHamburgerButtonComponent, FHeadTagService, FHeaderComponent, FHeaderMenuComponent, FHomePageComponent, FHomePageEnvironmentService, FHomePageFeaturesComponent, FHomePageFooterComponent, FHomePageHeaderComponent, FJsonLdService, FMarkdownFooterComponent, FMarkdownRendererComponent, FMetaService, FNavigationGroupComponent, FNavigationHeaderComponent, FNavigationItemComponent, FNavigationPanelComponent, FPageComponent, FPopoverService, FPreviewComponent, FScrollableContainerComponent, FSocialLinksComponent, FTableOfContentComponent, FTableOfContentItemsComponent, FThemeButtonComponent, FVersionComponent, F_ACCEPT_COOKIES_KEY, F_DOCS_ENVIRONMENT, F_DOCS_ROUTES, F_DOCUMENTATION_COMPONENT, F_HOME_PAGE_COMPONENT, F_HOME_PAGE_ENVIRONMENT, F_HOME_PAGE_ROUTES, GetAbsoluteTopToContainerHandler, GetAbsoluteTopToContainerRequest, GetPreviousNextPageNavigationHandler, GetPreviousNextPageNavigationRequest, GetPreviousNextPageNavigationResponse, GetTableOfContentDataHandler, GetTableOfContentDataRequest, GetVersionHandler, GetVersionRequest, HandleDynamicComponentsHandler, HandleDynamicComponentsRequest, HandleNavigationLinksHandler, HandleNavigationLinksRequest, HandleParsedContainersHandler, HandleParsedContainersRequest, HighlightService, INTERNAL_ENVIRONMENT_SERVICE, MarkCodeFocusedBlocksPostProcessor, MarkdownService, ModifyPunctuationHighlightPostProcessor, ParseAlerts, ParseCodeGroup, ParseCodeView, ParseExampleGroup, ParsePreviewGroup, ScrollToElementInContainer, SeparateCodeByLinesPostProcessor, TableOfContentData, copyToClipboard, getContent, setCookieConsent };
 //# sourceMappingURL=foblex-m-render.mjs.map