@foblex/m-render 2.6.8 → 2.7.0

package/fesm2022/foblex-m-render.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, booleanAttribute, HostListener, Input, ViewChild, Output, ChangeDetectionStrategy, Component, input, output, viewChild, InjectionToken, inject, signal, Injectable, Renderer2, ElementRef, NgZone, Directive, ChangeDetectorRef, DestroyRef, computed, ViewContainerRef, forwardRef, Injector, effect, untracked } from '@angular/core';
+import { EventEmitter, booleanAttribute, HostListener, Input, ViewChild, Output, ChangeDetectionStrategy, Component, input, output, viewChild, InjectionToken, inject, signal, Injectable, Renderer2, ElementRef, NgZone, Directive, ChangeDetectorRef, DestroyRef, computed, ViewContainerRef, Injector, forwardRef, effect, untracked } from '@angular/core';
 import { BrowserService, F_LOCAL_STORAGE } from '@foblex/platform';
 import { Subject, of, map, from, switchMap, startWith, filter, defer, Observable, EMPTY, debounceTime, fromEvent } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
@@ -8,13 +8,10 @@ import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Overlay, CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import { Router, RouterLink, NavigationEnd, ActivatedRoute, RouterOutlet } from '@angular/router';
 import { DOCUMENT, TitleCasePipe } from '@angular/common';
-import { deepClone } from '@foblex/utils';
 import { createHighlighter } from 'shiki';
 import MarkdownIt from 'markdown-it';
 import { DomSanitizer } from '@angular/platform-browser';
 import container from 'markdown-it-container';
-import { __decorate } from 'tslib';
-import { FExecutionRegister, FMediator } from '@foblex/mediator';
 
 let uniqueId$1 = 0;
 class FCheckboxComponent {
@@ -704,10 +701,6 @@ function provideTocData(toC) {
     };
 }
 
-const COMMON_FEATURES = [
-    HandleNavigationLinksHandler,
-];
-
 class FMetaService {
     _router = inject(Router);
     _headTag = inject(FHeadTagService);
@@ -878,11 +871,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             type: Component,
             args: [{ selector: 'f-header', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         HamburgerButtonComponent,
-                        NpmVersionComponent,
                         FSocialLinksComponent,
                         FThemeButtonComponent,
                         InlineMenuComponent,
-                        DropdownMenuComponent,
                     ], template: "<button hamburger-button></button>\n<div class=\"title text-ellipsis\">{{ title }}</div>\n<inline-menu/>\n<!--<npm-version/>-->\n<div class=\"divider\"></div>\n<button f-theme-button></button>\n<div class=\"divider\"></div>\n<f-social-links/>\n\n", styles: [":host{position:sticky;width:100%;top:0;display:flex;justify-content:flex-start;align-items:center;padding:20px 32px;font-weight:600;color:var(--primary-text);height:calc(var(--header-height) + 1px);background-color:var(--background-color);border-bottom:1px solid var(--divider-color);z-index:var(--z-index-header)}@media (min-width: 1280px){:host{padding-right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 3);padding-left:max(var(--page-padding),(100vw - var(--layout-max-width)) / 4)}}.title{display:none;justify-content:flex-start;align-items:center;padding:20px 0;font-weight:600;color:var(--primary-text);height:var(--header-height)}@media (min-width: 460px){.title{display:block}}@media (min-width: 960px){.title{display:none}}.divider{margin-right:8px;margin-left:8px;width:1px;height:24px;background-color:var(--divider-color);content:\"\"}\n"] }]
         }] });
 
@@ -928,12 +919,15 @@ class NavigationPanelComponent {
     ngOnInit() {
         const currentPath = this._router.url;
         const prefix = currentPath.substring(0, currentPath.lastIndexOf('/'));
-        const navigation = deepClone(this._provider.getNavigation());
+        const navigation = this._deepClone(this._provider.getNavigation());
         navigation.forEach((group) => {
             group.items.forEach((item) => this._normalizeLink(item, prefix));
         });
         this.navigation = navigation;
     }
+    _deepClone(value) {
+        return JSON.parse(JSON.stringify(value));
+    }
     _normalizeLink(item, prefix) {
         if (item.link && !this._isExternalLink(item.link)) {
             item.link = item.link.startsWith('/')
@@ -2290,15 +2284,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             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"] }]
         }] });
 
-class ActivateTocByHashRequest {
-    hash;
-    constructor(hash) {
-        this.hash = hash;
+class ActivateTocByHashHandler {
+    _provider;
+    constructor(_injector) {
+        this._provider = _injector.get(DocumentationStore);
     }
-}
-
-let ActivateTocByHashHandler = class ActivateTocByHashHandler {
-    _provider = inject(DocumentationStore);
     handle(payload) {
         this._provider.tocData.update((data) => ({
             ...data,
@@ -2308,70 +2298,20 @@ let ActivateTocByHashHandler = class ActivateTocByHashHandler {
             })),
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ActivateTocByHashHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ActivateTocByHashHandler });
-};
-ActivateTocByHashHandler = __decorate([
-    FExecutionRegister(ActivateTocByHashRequest)
-], ActivateTocByHashHandler);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ActivateTocByHashHandler, decorators: [{
-            type: Injectable
-        }] });
-
-class TableOfContentComponent {
-    _elementRef = inject((ElementRef));
-    _browser = inject(BrowserService);
-    _provider = inject(DocumentationStore);
-    _mediator = inject(FMediator);
-    tocData = computed(() => {
-        return this._provider.tocData();
-    });
-    activeMarkerPosition = computed(() => {
-        const index = this.tocData()?.flat.findIndex((x) => x.isActive) || 0;
-        return this._getActiveMarkerPosition(index);
-    });
-    title = inject(DocumentationStore).getToC().title;
-    _getActiveMarkerPosition(activeIndex) {
-        const itemHeight = parseInt(this._getComputedStyle(this._elementRef.nativeElement).getPropertyValue('--on-page-navigation-item-height'));
-        return (activeIndex + 1) * itemHeight + itemHeight / 4;
-    }
-    _getComputedStyle(element) {
-        return this._browser.window.getComputedStyle(element);
-    }
-    _onDocumentClick(event) {
-        const target = event.target;
-        if (target.tagName === 'A') {
-            event.preventDefault();
-            this._scrollTo(target.getAttribute('href'));
-        }
-    }
-    _scrollTo(hash) {
-        this._mediator.execute(new ActivateTocByHashRequest(hash));
-        this._mediator.execute(new ScrollToElementInContainerRequest(hash));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableOfContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TableOfContentComponent, isStandalone: true, selector: "aside[f-table-of-content]", host: { listeners: { "click": "_onDocumentClick($event)" } }, ngImport: i0, template: "@let data = tocData();\n@if (data) {\n  <div class=\"title\">{{ title || 'In this article' }}</div>\n  <ul f-table-of-content-items [items]=\"data.tree\"></ul>\n  <div class=\"active-marker\" [style.top]=\"activeMarkerPosition() + 'px'\"></div>\n}\n\n", styles: [":host{--on-page-navigation-item-height: 32px;display:none;padding-left:16px;border-left:1px solid var(--divider-color);font-size:13px;font-weight:500;position:relative}:host .title{line-height:32px;font-size:14px;font-weight:600}@media (min-width: 1280px){:host{display:block;width:var(--on-page-navigation-width);position:fixed;top:calc(var(--header-height) + 48px);right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 3)}}:host .active-marker{position:absolute;top:0;left:0;width:2px;height:calc(var(--on-page-navigation-item-height) / 2);border-radius:2px;background-color:var(--primary-1);transition:top .25s cubic-bezier(0,1,.5,1),opacity .25s}\n"], dependencies: [{ kind: "component", type: TableOfContentItemsComponent, selector: "ul[f-table-of-content-items]", inputs: ["items"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableOfContentComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'aside[f-table-of-content]', standalone: true, imports: [TableOfContentItemsComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let data = tocData();\n@if (data) {\n  <div class=\"title\">{{ title || 'In this article' }}</div>\n  <ul f-table-of-content-items [items]=\"data.tree\"></ul>\n  <div class=\"active-marker\" [style.top]=\"activeMarkerPosition() + 'px'\"></div>\n}\n\n", styles: [":host{--on-page-navigation-item-height: 32px;display:none;padding-left:16px;border-left:1px solid var(--divider-color);font-size:13px;font-weight:500;position:relative}:host .title{line-height:32px;font-size:14px;font-weight:600}@media (min-width: 1280px){:host{display:block;width:var(--on-page-navigation-width);position:fixed;top:calc(var(--header-height) + 48px);right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 3)}}:host .active-marker{position:absolute;top:0;left:0;width:2px;height:calc(var(--on-page-navigation-item-height) / 2);border-radius:2px;background-color:var(--primary-1);transition:top .25s cubic-bezier(0,1,.5,1),opacity .25s}\n"] }]
-        }], propDecorators: { _onDocumentClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
-
-class CalculateHashFromScrollPositionAndActivateTocRequest {
 }
 
-class GetAbsoluteTopToContainerRequest {
-    element;
-    constructor(element) {
-        this.element = element;
+class ActivateTocByHashRequest {
+    hash;
+    constructor(hash) {
+        this.hash = hash;
     }
 }
 
-let GetAbsoluteTopToContainerHandler = class GetAbsoluteTopToContainerHandler {
-    _scrollableContainer = inject(SCROLLABLE_CONTAINER);
+class GetAbsoluteTopToContainerHandler {
+    _scrollableContainer;
+    constructor(_injector) {
+        this._scrollableContainer = _injector.get(SCROLLABLE_CONTAINER);
+    }
     handle(request) {
         let element = request.element;
         let result = 0;
@@ -2383,21 +2323,26 @@ let GetAbsoluteTopToContainerHandler = class GetAbsoluteTopToContainerHandler {
         }
         return result;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GetAbsoluteTopToContainerHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GetAbsoluteTopToContainerHandler });
-};
-GetAbsoluteTopToContainerHandler = __decorate([
-    FExecutionRegister(GetAbsoluteTopToContainerRequest)
-], GetAbsoluteTopToContainerHandler);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GetAbsoluteTopToContainerHandler, decorators: [{
-            type: Injectable
-        }] });
+}
 
-let CalculateHashFromScrollPositionAndActivateTocHandler = class CalculateHashFromScrollPositionAndActivateTocHandler {
-    _browser = inject(BrowserService);
-    _mediator = inject(FMediator);
-    _provider = inject(DocumentationStore);
-    _scrollableContainer = inject(SCROLLABLE_CONTAINER);
+class GetAbsoluteTopToContainerRequest {
+    element;
+    constructor(element) {
+        this.element = element;
+    }
+}
+
+class CalculateHashFromScrollPositionAndActivateTocHandler {
+    _injector;
+    _browser;
+    _provider;
+    _scrollableContainer;
+    constructor(_injector) {
+        this._injector = _injector;
+        this._browser = _injector.get(BrowserService);
+        this._provider = _injector.get(DocumentationStore);
+        this._scrollableContainer = _injector.get(SCROLLABLE_CONTAINER);
+    }
     handle() {
         let result;
         const containerScrollTop = this._getContainerScrollTop();
@@ -2410,7 +2355,7 @@ let CalculateHashFromScrollPositionAndActivateTocHandler = class CalculateHashFr
                 result = this._findTargetHashByPosition(containerScrollTop, elementsWithTopPosition);
             }
         }
-        this._mediator.execute(new ActivateTocByHashRequest(result));
+        new ActivateTocByHashHandler(this._injector).handle(new ActivateTocByHashRequest(result));
     }
     _getContainerScrollTop() {
         return this._scrollableContainer.htmlElement.scrollTop + this._getHeaderHeight();
@@ -2429,7 +2374,7 @@ let CalculateHashFromScrollPositionAndActivateTocHandler = class CalculateHashFr
         }).filter((x) => !Number.isNaN(x.top));
     }
     _getAbsoluteTopToContainer(element) {
-        return this._mediator.execute(new GetAbsoluteTopToContainerRequest(element));
+        return new GetAbsoluteTopToContainerHandler(this._injector).handle(new GetAbsoluteTopToContainerRequest(element));
     }
     _isScrollAtBottom(containerScrollTop) {
         return Math.abs(containerScrollTop - this._getHeaderHeight() + this._scrollableContainer.htmlElement.clientHeight - this._scrollableContainer.htmlElement.scrollHeight) < 1;
@@ -2443,21 +2388,9 @@ let CalculateHashFromScrollPositionAndActivateTocHandler = class CalculateHashFr
         }
         return result;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CalculateHashFromScrollPositionAndActivateTocHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CalculateHashFromScrollPositionAndActivateTocHandler });
-};
-CalculateHashFromScrollPositionAndActivateTocHandler = __decorate([
-    FExecutionRegister(CalculateHashFromScrollPositionAndActivateTocRequest)
-], CalculateHashFromScrollPositionAndActivateTocHandler);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CalculateHashFromScrollPositionAndActivateTocHandler, decorators: [{
-            type: Injectable
-        }] });
+}
 
-class CalculateTableOfContentDataRequest {
-    fMarkdownPage;
-    constructor(fMarkdownPage) {
-        this.fMarkdownPage = fMarkdownPage;
-    }
+class CalculateHashFromScrollPositionAndActivateTocRequest {
 }
 
 class TableOfContentData {
@@ -2469,9 +2402,13 @@ class TableOfContentData {
     }
 }
 
-let CalculateTableOfContentDataHandler = class CalculateTableOfContentDataHandler {
-    _provider = inject(DocumentationStore);
-    _mediator = inject(FMediator);
+class CalculateTableOfContentDataHandler {
+    _injector;
+    _provider;
+    constructor(_injector) {
+        this._injector = _injector;
+        this._provider = _injector.get(DocumentationStore);
+    }
     handle(request) {
         const flat = [];
         const tree = [];
@@ -2482,7 +2419,7 @@ let CalculateTableOfContentDataHandler = class CalculateTableOfContentDataHandle
             flat.push(tocItem);
         });
         this._provider.tocData.set(new TableOfContentData(flat, tree));
-        this._mediator.send(new CalculateHashFromScrollPositionAndActivateTocRequest());
+        new CalculateHashFromScrollPositionAndActivateTocHandler(this._injector).handle();
     }
     _getNavigationSelectors(fMarkdownPage, tocRange) {
         if (!tocRange || tocRange.start < 1 || tocRange.end > 6) {
@@ -2521,31 +2458,27 @@ let CalculateTableOfContentDataHandler = class CalculateTableOfContentDataHandle
         }
         stack.push(tocItem);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CalculateTableOfContentDataHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CalculateTableOfContentDataHandler });
-};
-CalculateTableOfContentDataHandler = __decorate([
-    FExecutionRegister(CalculateTableOfContentDataRequest)
-], CalculateTableOfContentDataHandler);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CalculateTableOfContentDataHandler, decorators: [{
-            type: Injectable
-        }] });
+}
 
-class RenderDynamicComponentsRequest {
-    hostElement;
-    constructor(hostElement) {
-        this.hostElement = hostElement;
+class CalculateTableOfContentDataRequest {
+    fMarkdownPage;
+    constructor(fMarkdownPage) {
+        this.fMarkdownPage = fMarkdownPage;
     }
 }
 
-let RenderDynamicComponentsHandler = class RenderDynamicComponentsHandler {
-    _provider = inject(DocumentationStore);
-    _containerRef = inject(ViewContainerRef);
+class RenderDynamicComponentsHandler {
     _componentsMap = [
         { tag: 'f-code-group', component: FCodeGroupComponent },
         { tag: 'f-preview', component: FPreviewComponent },
         { tag: 'f-preview-group-filters', component: FPreviewGroupFiltersComponent },
     ];
+    _provider;
+    _containerRef;
+    constructor(_injector) {
+        this._provider = _injector.get(DocumentationStore);
+        this._containerRef = _injector.get(ViewContainerRef);
+    }
     handle(request) {
         this._provider.disposeDComponents();
         this._componentsMap.forEach(({ tag, component }) => {
@@ -2587,7 +2520,8 @@ let RenderDynamicComponentsHandler = class RenderDynamicComponentsHandler {
                     value = JSON.parse(value);
                     // eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
                 }
-                catch (e) { /* empty */ }
+                catch (e) { /* empty */
+                }
             }
             if (componentRef.instance[key]?.set) {
                 componentRef.instance[key].set(value);
@@ -2604,25 +2538,20 @@ let RenderDynamicComponentsHandler = class RenderDynamicComponentsHandler {
     _logError(tag, error) {
         console.error(`Error inserting component for <${tag}>:`, error);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RenderDynamicComponentsHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RenderDynamicComponentsHandler });
-};
-RenderDynamicComponentsHandler = __decorate([
-    FExecutionRegister(RenderDynamicComponentsRequest)
-], RenderDynamicComponentsHandler);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RenderDynamicComponentsHandler, decorators: [{
-            type: Injectable
-        }] });
+}
 
-class ScrollToElementInContainerRequest {
-    hash;
-    constructor(hash) {
-        this.hash = hash;
+class RenderDynamicComponentsRequest {
+    hostElement;
+    constructor(hostElement) {
+        this.hostElement = hostElement;
     }
 }
 
-let ScrollToElementInContainerHandler = class ScrollToElementInContainerHandler {
-    _scrollableContainer = inject(SCROLLABLE_CONTAINER);
+class ScrollToElementInContainerHandler {
+    _scrollableContainer;
+    constructor(_injector) {
+        this._scrollableContainer = _injector.get(SCROLLABLE_CONTAINER);
+    }
     handle(payload) {
         this._scrollableContainer.htmlElement.scrollTo({
             top: this._getScrollTo(this._getScrollToElement(payload.hash)) - 64,
@@ -2651,30 +2580,62 @@ let ScrollToElementInContainerHandler = class ScrollToElementInContainerHandler
     _getContainerTop() {
         return this._scrollableContainer.htmlElement.getBoundingClientRect().top;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ScrollToElementInContainerHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ScrollToElementInContainerHandler });
-};
-ScrollToElementInContainerHandler = __decorate([
-    FExecutionRegister(ScrollToElementInContainerRequest)
-], ScrollToElementInContainerHandler);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ScrollToElementInContainerHandler, decorators: [{
-            type: Injectable
-        }] });
+}
+
+class ScrollToElementInContainerRequest {
+    hash;
+    constructor(hash) {
+        this.hash = hash;
+    }
+}
 
 const SCROLLABLE_CONTAINER = new InjectionToken('SCROLLABLE_CONTAINER');
 
-const SCROLLABLE_CONTAINER_FEATURES = [
-    ActivateTocByHashHandler,
-    CalculateHashFromScrollPositionAndActivateTocHandler,
-    GetAbsoluteTopToContainerHandler,
-    CalculateTableOfContentDataHandler,
-    RenderDynamicComponentsHandler,
-    ScrollToElementInContainerHandler,
-];
+class TableOfContentComponent {
+    _elementRef = inject((ElementRef));
+    _browser = inject(BrowserService);
+    _provider = inject(DocumentationStore);
+    _injector = inject(Injector);
+    tocData = computed(() => {
+        return this._provider.tocData();
+    });
+    activeMarkerPosition = computed(() => {
+        const index = this.tocData()?.flat.findIndex((x) => x.isActive) || 0;
+        return this._getActiveMarkerPosition(index);
+    });
+    title = inject(DocumentationStore).getToC().title;
+    _getActiveMarkerPosition(activeIndex) {
+        const itemHeight = parseInt(this._getComputedStyle(this._elementRef.nativeElement).getPropertyValue('--on-page-navigation-item-height'));
+        return (activeIndex + 1) * itemHeight + itemHeight / 4;
+    }
+    _getComputedStyle(element) {
+        return this._browser.window.getComputedStyle(element);
+    }
+    _onDocumentClick(event) {
+        const target = event.target;
+        if (target.tagName === 'A') {
+            event.preventDefault();
+            this._scrollTo(target.getAttribute('href'));
+        }
+    }
+    _scrollTo(hash) {
+        new ActivateTocByHashHandler(this._injector).handle(new ActivateTocByHashRequest(hash));
+        new ScrollToElementInContainerHandler(this._injector).handle(new ScrollToElementInContainerRequest(hash));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableOfContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TableOfContentComponent, isStandalone: true, selector: "aside[f-table-of-content]", host: { listeners: { "click": "_onDocumentClick($event)" } }, ngImport: i0, template: "@let data = tocData();\n@if (data) {\n  <div class=\"title\">{{ title || 'In this article' }}</div>\n  <ul f-table-of-content-items [items]=\"data.tree\"></ul>\n  <div class=\"active-marker\" [style.top]=\"activeMarkerPosition() + 'px'\"></div>\n}\n\n", styles: [":host{--on-page-navigation-item-height: 32px;display:none;padding-left:16px;border-left:1px solid var(--divider-color);font-size:13px;font-weight:500;position:relative}:host .title{line-height:32px;font-size:14px;font-weight:600}@media (min-width: 1280px){:host{display:block;width:var(--on-page-navigation-width);position:fixed;top:calc(var(--header-height) + 48px);right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 3)}}:host .active-marker{position:absolute;top:0;left:0;width:2px;height:calc(var(--on-page-navigation-item-height) / 2);border-radius:2px;background-color:var(--primary-1);transition:top .25s cubic-bezier(0,1,.5,1),opacity .25s}\n"], dependencies: [{ kind: "component", type: TableOfContentItemsComponent, selector: "ul[f-table-of-content-items]", inputs: ["items"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableOfContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'aside[f-table-of-content]', standalone: true, imports: [TableOfContentItemsComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let data = tocData();\n@if (data) {\n  <div class=\"title\">{{ title || 'In this article' }}</div>\n  <ul f-table-of-content-items [items]=\"data.tree\"></ul>\n  <div class=\"active-marker\" [style.top]=\"activeMarkerPosition() + 'px'\"></div>\n}\n\n", styles: [":host{--on-page-navigation-item-height: 32px;display:none;padding-left:16px;border-left:1px solid var(--divider-color);font-size:13px;font-weight:500;position:relative}:host .title{line-height:32px;font-size:14px;font-weight:600}@media (min-width: 1280px){:host{display:block;width:var(--on-page-navigation-width);position:fixed;top:calc(var(--header-height) + 48px);right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 3)}}:host .active-marker{position:absolute;top:0;left:0;width:2px;height:calc(var(--on-page-navigation-item-height) / 2);border-radius:2px;background-color:var(--primary-1);transition:top .25s cubic-bezier(0,1,.5,1),opacity .25s}\n"] }]
+        }], propDecorators: { _onDocumentClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
 
 class ScrollableContainerComponent {
-    _mediator = inject(FMediator);
     _destroyRef = inject(DestroyRef);
+    _injector = inject(Injector);
     htmlElement = inject((ElementRef)).nativeElement;
     ngOnInit() {
         fromEvent(this.htmlElement, 'scroll')
@@ -2682,7 +2643,7 @@ class ScrollableContainerComponent {
             .subscribe(() => this._calculateHashAndActivate());
     }
     _calculateHashAndActivate() {
-        this._mediator.send(new CalculateHashFromScrollPositionAndActivateTocRequest());
+        new CalculateHashFromScrollPositionAndActivateTocHandler(this._injector).handle();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ScrollableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ScrollableContainerComponent, isStandalone: true, selector: "f-scrollable-container", providers: [
@@ -2690,8 +2651,6 @@ class ScrollableContainerComponent {
                 provide: SCROLLABLE_CONTAINER,
                 useExisting: forwardRef(() => ScrollableContainerComponent),
             },
-            FMediator,
-            ...SCROLLABLE_CONTAINER_FEATURES,
         ], ngImport: i0, template: "<ng-content></ng-content>\n<aside f-table-of-content></aside>\n\n\n", styles: [":host{position:relative;width:100%;height:100%;overflow:hidden;overflow-y:auto}\n"], dependencies: [{ kind: "component", type: TableOfContentComponent, selector: "aside[f-table-of-content]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ScrollableContainerComponent, decorators: [{
@@ -2701,8 +2660,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             provide: SCROLLABLE_CONTAINER,
                             useExisting: forwardRef(() => ScrollableContainerComponent),
                         },
-                        FMediator,
-                        ...SCROLLABLE_CONTAINER_FEATURES,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         TableOfContentComponent,
                     ], template: "<ng-content></ng-content>\n<aside f-table-of-content></aside>\n\n\n", styles: [":host{position:relative;width:100%;height:100%;overflow:hidden;overflow-y:auto}\n"] }]
@@ -2716,7 +2673,6 @@ class FMarkdownRendererComponent {
     _destroyRef = inject(DestroyRef);
     _injector = inject(Injector);
     _browser = inject(BrowserService);
-    _mediator = inject(FMediator);
     _markdown = inject(MarkdownService);
     _provider = inject(DocumentationStore);
     get _markdownPath() {
@@ -2740,8 +2696,8 @@ class FMarkdownRendererComponent {
             if (html && this._browser.isBrowser()) {
                 untracked(() => {
                     raf(() => {
-                        this._mediator.execute(new RenderDynamicComponentsRequest(this._hostElement));
-                        this._mediator.execute(new CalculateTableOfContentDataRequest(this._hostElement));
+                        new RenderDynamicComponentsHandler(this._injector).handle(new RenderDynamicComponentsRequest(this._hostElement));
+                        new CalculateTableOfContentDataHandler(this._injector).handle(new CalculateTableOfContentDataRequest(this._hostElement));
                     });
                 });
             }
@@ -2868,8 +2824,6 @@ class DocumentationRootComponent {
                 provide: TOGGLE_NAVIGATION_COMPONENT,
                 useExisting: DocumentationRootComponent,
             },
-            FMediator,
-            ...COMMON_FEATURES,
         ], ngImport: i0, template: "<f-navigation-panel [class.visible]=\"isNavigationVisible()\"></f-navigation-panel>\n<div class=\"f-backdrop\" [class.visible]=\"isNavigationVisible()\" (click)=\"onToggleNavigation(false)\"></div>\n\n<f-scrollable-container>\n  <f-header></f-header>\n  <router-outlet></router-outlet>\n</f-scrollable-container>\n\n@if (popover()) {\n  <div class=\"popover\">{{ popover() }}</div>\n}\n", styles: [":host{display:flex;justify-content:flex-start;align-items:flex-start;height:100%;gap:5px}.f-backdrop{position:fixed;inset:0;opacity:0;z-index:var(--z-index-backdrop);background:var(--backdrop-color);transition:opacity .2s ease-in-out;pointer-events:none}.f-backdrop.visible{opacity:1;pointer-events:all}@media (min-width: 960px){.f-backdrop{position:unset}}.popover{position:fixed;min-width:120px;bottom:50%;left:50%;text-align:center;transform:translate(-50%,-50%);background-color:var(--code-view-copy-button-hover-background);border:1px solid var(--code-view-copy-button-border-color);box-shadow:var(--shadow-3);color:var(--primary-text);font-size:14px;padding:4px 8px;border-radius:4px;z-index:var(--z-index-popover);opacity:1}\n"], dependencies: [{ kind: "component", type: NavigationPanelComponent, selector: "f-navigation-panel" }, { kind: "component", type: ScrollableContainerComponent, selector: "f-scrollable-container" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: HeaderComponent, selector: "f-header" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentationRootComponent, decorators: [{
@@ -2894,8 +2848,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             provide: TOGGLE_NAVIGATION_COMPONENT,
                             useExisting: DocumentationRootComponent,
                         },
-                        FMediator,
-                        ...COMMON_FEATURES,
                     ], imports: [
                         NavigationPanelComponent,
                         ScrollableContainerComponent,
@@ -2919,12 +2871,11 @@ const DOCUMENTATION_ROUTES = [
 
 var index$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    get ActivateTocByHashHandler () { return ActivateTocByHashHandler; },
+    ActivateTocByHashHandler: ActivateTocByHashHandler,
     ActivateTocByHashRequest: ActivateTocByHashRequest,
-    COMMON_FEATURES: COMMON_FEATURES,
-    get CalculateHashFromScrollPositionAndActivateTocHandler () { return CalculateHashFromScrollPositionAndActivateTocHandler; },
+    CalculateHashFromScrollPositionAndActivateTocHandler: CalculateHashFromScrollPositionAndActivateTocHandler,
     CalculateHashFromScrollPositionAndActivateTocRequest: CalculateHashFromScrollPositionAndActivateTocRequest,
-    get CalculateTableOfContentDataHandler () { return CalculateTableOfContentDataHandler; },
+    CalculateTableOfContentDataHandler: CalculateTableOfContentDataHandler,
     CalculateTableOfContentDataRequest: CalculateTableOfContentDataRequest,
     DOCUMENTATION_CONFIGURATION: DOCUMENTATION_CONFIGURATION,
     DOCUMENTATION_ROUTES: DOCUMENTATION_ROUTES,
@@ -2952,7 +2903,7 @@ var index$1 = /*#__PURE__*/Object.freeze({
     FPreviewGroupService: FPreviewGroupService,
     F_ACCEPT_COOKIES_KEY: F_ACCEPT_COOKIES_KEY,
     F_PREVIEW_NAVIGATION_PROVIDER: F_PREVIEW_NAVIGATION_PROVIDER,
-    get GetAbsoluteTopToContainerHandler () { return GetAbsoluteTopToContainerHandler; },
+    GetAbsoluteTopToContainerHandler: GetAbsoluteTopToContainerHandler,
     GetAbsoluteTopToContainerRequest: GetAbsoluteTopToContainerRequest,
     GetPreviousNextPageNavigationHandler: GetPreviousNextPageNavigationHandler,
     GetPreviousNextPageNavigationRequest: GetPreviousNextPageNavigationRequest,
@@ -2974,11 +2925,10 @@ var index$1 = /*#__PURE__*/Object.freeze({
     ParseGroupedCodeItems: ParseGroupedCodeItems,
     ParsePreviewGroup: ParsePreviewGroup,
     ParseSingleCodeItem: ParseSingleCodeItem,
-    get RenderDynamicComponentsHandler () { return RenderDynamicComponentsHandler; },
+    RenderDynamicComponentsHandler: RenderDynamicComponentsHandler,
     RenderDynamicComponentsRequest: RenderDynamicComponentsRequest,
     SCROLLABLE_CONTAINER: SCROLLABLE_CONTAINER,
-    SCROLLABLE_CONTAINER_FEATURES: SCROLLABLE_CONTAINER_FEATURES,
-    get ScrollToElementInContainerHandler () { return ScrollToElementInContainerHandler; },
+    ScrollToElementInContainerHandler: ScrollToElementInContainerHandler,
     ScrollToElementInContainerRequest: ScrollToElementInContainerRequest,
     ScrollableContainerComponent: ScrollableContainerComponent,
     TOGGLE_NAVIGATION_COMPONENT: TOGGLE_NAVIGATION_COMPONENT,
@@ -3095,7 +3045,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 class FHomePageButtonsRowComponent {
     viewModel = inject(HomeStore).getButtons();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FHomePageButtonsRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FHomePageButtonsRowComponent, isStandalone: true, selector: "f-home-page-buttons-row", host: { properties: { "class.display-none": "!viewModel.length" } }, ngImport: i0, template: "@for (button of viewModel; track button.text) {\n  @if (button.routerLink) {\n    <a class=\"f-button\" [class.primary]=\"button.primary\" routerLink=\"{{ button.routerLink }}\">\n      @if (button.icon) {\n        <span class=\"f-icon {{ button.icon }}\"></span>\n      }\n      {{ button.text }}\n    </a>\n  } @else if(button.href) {\n    <a class=\"f-button\" [class.primary]=\"button.primary\" href=\"{{ button.href }}\" target=\"_blank\" rel=\"noopener noreferrer\">\n      @if (button.icon) {\n        <span class=\"f-icon {{ button.icon }}\"></span>\n      }\n      {{ button.text }}\n    </a>\n  }\n}\n\n", styles: [":host{display:flex;flex-wrap:wrap;justify-content:center;padding-top:32px;gap:12px;width:fit-content;margin:0 auto}@media (min-width: 960px){:host{margin:0;justify-content:flex-start}}.f-button{display:flex;align-items:center;gap:6px}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FHomePageButtonsRowComponent, isStandalone: true, selector: "f-home-page-buttons-row", host: { properties: { "class.display-none": "!viewModel.length" } }, ngImport: i0, template: "@for (button of viewModel; track button.text) {\n  @if (button.routerLink) {\n    <a class=\"f-button\" [class.primary]=\"button.primary\" routerLink=\"{{ button.routerLink }}\">\n      @if (button.icon) {\n        <span class=\"f-icon {{ button.icon }}\"></span>\n      }\n      {{ button.text }}\n    </a>\n  } @else if(button.href) {\n    <a class=\"f-button\" [class.primary]=\"button.primary\" href=\"{{ button.href }}\" target=\"_blank\" rel=\"noopener noreferrer\">\n      @if (button.icon) {\n        <span class=\"f-icon {{ button.icon }}\"></span>\n      }\n      {{ button.text }}\n    </a>\n  }\n}\n\n", styles: [":host{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:fit-content;margin:0 auto;padding:32px 10px 0}@media (min-width: 960px){:host{margin:0;padding:32px 0 0;justify-content:flex-start}}.f-button{display:flex;align-items:center;gap:6px}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FHomePageButtonsRowComponent, decorators: [{
             type: Component,
@@ -3103,7 +3053,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         RouterLink,
                     ], host: {
                         '[class.display-none]': '!viewModel.length',
-                    }, template: "@for (button of viewModel; track button.text) {\n  @if (button.routerLink) {\n    <a class=\"f-button\" [class.primary]=\"button.primary\" routerLink=\"{{ button.routerLink }}\">\n      @if (button.icon) {\n        <span class=\"f-icon {{ button.icon }}\"></span>\n      }\n      {{ button.text }}\n    </a>\n  } @else if(button.href) {\n    <a class=\"f-button\" [class.primary]=\"button.primary\" href=\"{{ button.href }}\" target=\"_blank\" rel=\"noopener noreferrer\">\n      @if (button.icon) {\n        <span class=\"f-icon {{ button.icon }}\"></span>\n      }\n      {{ button.text }}\n    </a>\n  }\n}\n\n", styles: [":host{display:flex;flex-wrap:wrap;justify-content:center;padding-top:32px;gap:12px;width:fit-content;margin:0 auto}@media (min-width: 960px){:host{margin:0;justify-content:flex-start}}.f-button{display:flex;align-items:center;gap:6px}\n"] }]
+                    }, template: "@for (button of viewModel; track button.text) {\n  @if (button.routerLink) {\n    <a class=\"f-button\" [class.primary]=\"button.primary\" routerLink=\"{{ button.routerLink }}\">\n      @if (button.icon) {\n        <span class=\"f-icon {{ button.icon }}\"></span>\n      }\n      {{ button.text }}\n    </a>\n  } @else if(button.href) {\n    <a class=\"f-button\" [class.primary]=\"button.primary\" href=\"{{ button.href }}\" target=\"_blank\" rel=\"noopener noreferrer\">\n      @if (button.icon) {\n        <span class=\"f-icon {{ button.icon }}\"></span>\n      }\n      {{ button.text }}\n    </a>\n  }\n}\n\n", styles: [":host{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:fit-content;margin:0 auto;padding:32px 10px 0}@media (min-width: 960px){:host{margin:0;padding:32px 0 0;justify-content:flex-start}}.f-button{display:flex;align-items:center;gap:6px}\n"] }]
         }] });
 
 class FHomePageFeaturesComponent {
@@ -3121,11 +3071,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 class FHomePageFooterComponent {
     viewModel = inject(HomeStore).getFooter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FHomePageFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FHomePageFooterComponent, isStandalone: true, selector: "footer[f-home-page-footer]", ngImport: i0, template: "<div class=\"content\">\n  <div class=\"flex-space\"></div>\n  <div>\n    <div class=\"item\">Created with Foblex <a href=\"https://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"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FHomePageFooterComponent, isStandalone: true, selector: "footer[f-home-page-footer]", ngImport: i0, template: "<div class=\"content\">\n  <div class=\"flex-space\"></div>\n  <div>\n    <div class=\"item\">Created with Foblex <a href=\"https://m-render.foblex.com/\" target=\"_blank\">MRender</a></div>\n    <div class=\"item\">{{ viewModel.text }}</div>\n  </div>\n</div>\n\n", styles: [":host{position:relative;z-index:5;padding:0 24px}:host .content{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;width:100%;height:64px;max-width:1376px;margin:0 auto}:host .item{line-height:20px;font-size:12px;font-weight:500;color:var(--secondary-text);text-align:right}@media (min-width: 640px){:host{padding:0 48px}}@media (min-width: 960px){:host{padding:0 64px}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", 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"] }]
+            args: [{ selector: 'footer[f-home-page-footer]', standalone: true, template: "<div class=\"content\">\n  <div class=\"flex-space\"></div>\n  <div>\n    <div class=\"item\">Created with Foblex <a href=\"https://m-render.foblex.com/\" target=\"_blank\">MRender</a></div>\n    <div class=\"item\">{{ viewModel.text }}</div>\n  </div>\n</div>\n\n", styles: [":host{position:relative;z-index:5;padding:0 24px}:host .content{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;width:100%;height:64px;max-width:1376px;margin:0 auto}:host .item{line-height:20px;font-size:12px;font-weight:500;color:var(--secondary-text);text-align:right}@media (min-width: 640px){:host{padding:0 48px}}@media (min-width: 960px){:host{padding:0 64px}}\n"] }]
         }] });
 
 class FHomePageHeaderComponent {
@@ -3144,13 +3094,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 class FHomePageHeroComponent {
     viewModel = inject(HomeStore).getHero();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FHomePageHeroComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FHomePageHeroComponent, isStandalone: true, selector: "f-home-page-hero", ngImport: i0, template: "<h1>{{ viewModel.headline }}</h1>\n<p class=\"powered\">{{ viewModel.tagline1 }}</p>\n<p class=\"powered\">{{ viewModel.tagline2 }}</p>\n<p class=\"second-description\">{{ viewModel.subDescription }}</p>\n<f-home-page-buttons-row></f-home-page-buttons-row>\n", styles: [":host{display:block;width:100%}@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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FHomePageHeroComponent, isStandalone: true, selector: "f-home-page-hero", ngImport: i0, template: "<h1>{{ viewModel.headline }}</h1>\n<p class=\"powered\">{{ viewModel.tagline1 }}</p>\n<p class=\"powered\">{{ viewModel.tagline2 }}</p>\n<p class=\"second-description\">{{ viewModel.subDescription }}</p>\n<f-home-page-buttons-row></f-home-page-buttons-row>\n", styles: [":host{display:block;width:100%;padding:0 10px}@media (min-width: 640px){:host{padding:0;width:100%}}@media (min-width: 960px){:host{width:50%}}.powered,h1{letter-spacing:-.4px;line-height:40px;font-size:32px;font-weight:700;width:fit-content;margin:0 auto;text-align:center;white-space:pre-wrap;pointer-events:all}@media (min-width: 640px){.powered,h1{line-height:56px;font-size:48px}}@media (min-width: 960px){.powered,h1{line-height:64px;font-size:56px;margin:0;text-align:left}}h1{background:-webkit-linear-gradient(120deg,#bd34fe 30%,#41d1ff);background-clip:text;color:transparent}.second-description{line-height:28px;font-size:18px;font-weight:500;white-space:pre-wrap;color:var(--secondary-text);margin:0 auto;width:fit-content;pointer-events:all;text-align:center;padding:8px 16px 0}@media (min-width: 640px){.second-description{padding-top:12px;line-height:32px;font-size:20px}}@media (min-width: 960px){.second-description{line-height:36px;font-size:24px;margin:0;text-align:left;padding:8px 0 0}}\n"], dependencies: [{ kind: "component", type: FHomePageButtonsRowComponent, selector: "f-home-page-buttons-row" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", 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"] }]
+                    ], template: "<h1>{{ viewModel.headline }}</h1>\n<p class=\"powered\">{{ viewModel.tagline1 }}</p>\n<p class=\"powered\">{{ viewModel.tagline2 }}</p>\n<p class=\"second-description\">{{ viewModel.subDescription }}</p>\n<f-home-page-buttons-row></f-home-page-buttons-row>\n", styles: [":host{display:block;width:100%;padding:0 10px}@media (min-width: 640px){:host{padding:0;width:100%}}@media (min-width: 960px){:host{width:50%}}.powered,h1{letter-spacing:-.4px;line-height:40px;font-size:32px;font-weight:700;width:fit-content;margin:0 auto;text-align:center;white-space:pre-wrap;pointer-events:all}@media (min-width: 640px){.powered,h1{line-height:56px;font-size:48px}}@media (min-width: 960px){.powered,h1{line-height:64px;font-size:56px;margin:0;text-align:left}}h1{background:-webkit-linear-gradient(120deg,#bd34fe 30%,#41d1ff);background-clip:text;color:transparent}.second-description{line-height:28px;font-size:18px;font-weight:500;white-space:pre-wrap;color:var(--secondary-text);margin:0 auto;width:fit-content;pointer-events:all;text-align:center;padding:8px 16px 0}@media (min-width: 640px){.second-description{padding-top:12px;line-height:32px;font-size:20px}}@media (min-width: 960px){.second-description{line-height:36px;font-size:24px;margin:0;text-align:left;padding:8px 0 0}}\n"] }]
         }] });
 
 class FHomePageMembershipsComponent {
@@ -3256,5 +3206,5 @@ var index = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { ActivateTocByHashHandler, ActivateTocByHashRequest, COMMON_FEATURES, CalculateHashFromScrollPositionAndActivateTocHandler, CalculateHashFromScrollPositionAndActivateTocRequest, CalculateTableOfContentDataHandler, CalculateTableOfContentDataRequest, DOCUMENTATION_CONFIGURATION, DOCUMENTATION_ROUTES, DocumentationRootComponent, DocumentationStore, DropdownMenuComponent, EMarkdownContainerType, EParsedContainerType, FAnalyticsService, FCheckboxComponent, FCodeGroupComponent, FCodeGroupTabsComponent, FCodeViewComponent, FCookiePopupComponent, FExampleViewComponent, FFooterEditInformationComponent, FFooterNavigationButtonComponent, FFooterNavigationComponent, FHomePageButtonsRowComponent, FHomePageFeaturesComponent, FHomePageFooterComponent, FHomePageHeaderComponent, FHomePageHeroComponent, FHomePageMembershipsComponent, FInsertComponentDirective, FMarkdownFooterComponent, FMarkdownRendererComponent, FMetaService, FNavigationItemComponent, FPreviewBase, FPreviewComponent, FPreviewGroupFiltersComponent, FPreviewGroupService, FRadioButtonComponent, FSocialLinksComponent, FThemeButtonComponent, F_ACCEPT_COOKIES_KEY, F_PREVIEW_NAVIGATION_PROVIDER, F_SOCIAL_LINKS_PROVIDER, GetAbsoluteTopToContainerHandler, GetAbsoluteTopToContainerRequest, GetPreviousNextPageNavigationHandler, GetPreviousNextPageNavigationRequest, GetPreviousNextPageNavigationResponse, HEADER_CONFIGURATION, HEADER_CONFIGURATION_STORE, HOME_PAGE_CONFIGURATION, HOME_ROUTES, HamburgerButtonComponent, HandleNavigationLinksHandler, HandleNavigationLinksRequest, HeaderComponent, HighlightComponent, HighlightService, HomeRootComponent, HomeStore, InlineMenuComponent, LANGUAGES, MarkCodeFocusedBlocksPostProcessor, MarkdownContainerComponent, MarkdownService, NavigationGroupComponent, NavigationPanelComponent, NpmVersionComponent, OverflowObserverDirective, ParseAlerts, ParseAngularExampleWithCodeLinks, ParseGroupedCodeItems, ParsePreviewGroup, ParseSingleCodeItem, PopoverService, RIGHT_TOP_OVERLAY_POSITION, RenderDynamicComponentsHandler, RenderDynamicComponentsRequest, SCROLLABLE_CONTAINER, SCROLLABLE_CONTAINER_FEATURES, ScrollToElementInContainerHandler, ScrollToElementInContainerRequest, ScrollableContainerComponent, TOGGLE_NAVIGATION_COMPONENT, TableOfContentComponent, TableOfContentData, TableOfContentItemsComponent, ThemeService, coerceComponentHeight, copyToClipboard, defineLazyComponent, defineNavigationGroup, encodeDataAttr, extractComponent, getContent, isClosingToken, isOpeningToken, parseComponentTag, parseFileLinkLine, parseLanguageFromFileExtension, parseSingleBracketText, parseSyntaxLanguage, provide404Markdown, provideBackground, provideComponents, provideDirectory, provideDocumentation, provideDocumentationMeta, provideFooterNavigation, provideHeader, provideHeaderMediaLinks, provideHeaderNavigation, provideHero, provideHomeButtons, provideHomeFeatures, provideHomeFooter, provideHomePage, provideImage, provideLanguage, provideLogo, provideNavigation, provideTitle, provideTocData, setCookieConsent };
+export { ActivateTocByHashHandler, ActivateTocByHashRequest, CalculateHashFromScrollPositionAndActivateTocHandler, CalculateHashFromScrollPositionAndActivateTocRequest, CalculateTableOfContentDataHandler, CalculateTableOfContentDataRequest, DOCUMENTATION_CONFIGURATION, DOCUMENTATION_ROUTES, DocumentationRootComponent, DocumentationStore, DropdownMenuComponent, EMarkdownContainerType, EParsedContainerType, FAnalyticsService, FCheckboxComponent, FCodeGroupComponent, FCodeGroupTabsComponent, FCodeViewComponent, FCookiePopupComponent, FExampleViewComponent, FFooterEditInformationComponent, FFooterNavigationButtonComponent, FFooterNavigationComponent, FHomePageButtonsRowComponent, FHomePageFeaturesComponent, FHomePageFooterComponent, FHomePageHeaderComponent, FHomePageHeroComponent, FHomePageMembershipsComponent, FInsertComponentDirective, FMarkdownFooterComponent, FMarkdownRendererComponent, FMetaService, FNavigationItemComponent, FPreviewBase, FPreviewComponent, FPreviewGroupFiltersComponent, FPreviewGroupService, FRadioButtonComponent, FSocialLinksComponent, FThemeButtonComponent, F_ACCEPT_COOKIES_KEY, F_PREVIEW_NAVIGATION_PROVIDER, F_SOCIAL_LINKS_PROVIDER, GetAbsoluteTopToContainerHandler, GetAbsoluteTopToContainerRequest, GetPreviousNextPageNavigationHandler, GetPreviousNextPageNavigationRequest, GetPreviousNextPageNavigationResponse, HEADER_CONFIGURATION, HEADER_CONFIGURATION_STORE, HOME_PAGE_CONFIGURATION, HOME_ROUTES, HamburgerButtonComponent, HandleNavigationLinksHandler, HandleNavigationLinksRequest, HeaderComponent, HighlightComponent, HighlightService, HomeRootComponent, HomeStore, InlineMenuComponent, LANGUAGES, MarkCodeFocusedBlocksPostProcessor, MarkdownContainerComponent, MarkdownService, NavigationGroupComponent, NavigationPanelComponent, NpmVersionComponent, OverflowObserverDirective, ParseAlerts, ParseAngularExampleWithCodeLinks, ParseGroupedCodeItems, ParsePreviewGroup, ParseSingleCodeItem, PopoverService, RIGHT_TOP_OVERLAY_POSITION, RenderDynamicComponentsHandler, RenderDynamicComponentsRequest, SCROLLABLE_CONTAINER, ScrollToElementInContainerHandler, ScrollToElementInContainerRequest, ScrollableContainerComponent, TOGGLE_NAVIGATION_COMPONENT, TableOfContentComponent, TableOfContentData, TableOfContentItemsComponent, ThemeService, coerceComponentHeight, copyToClipboard, defineLazyComponent, defineNavigationGroup, encodeDataAttr, extractComponent, getContent, isClosingToken, isOpeningToken, parseComponentTag, parseFileLinkLine, parseLanguageFromFileExtension, parseSingleBracketText, parseSyntaxLanguage, provide404Markdown, provideBackground, provideComponents, provideDirectory, provideDocumentation, provideDocumentationMeta, provideFooterNavigation, provideHeader, provideHeaderMediaLinks, provideHeaderNavigation, provideHero, provideHomeButtons, provideHomeFeatures, provideHomeFooter, provideHomePage, provideImage, provideLanguage, provideLogo, provideNavigation, provideTitle, provideTocData, setCookieConsent };
 //# sourceMappingURL=foblex-m-render.mjs.map