@foblex/m-render 2.9.0 → 3.0.0

package/fesm2022/foblex-m-render.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, InjectionToken, ChangeDetectionStrategy, Component, EventEmitter, booleanAttribute, HostListener, Input, ViewChild, Output, input, output, viewChild, signal, PLATFORM_ID, computed, Renderer2, NgZone, ChangeDetectorRef, DestroyRef, Injector, ViewContainerRef, ElementRef, untracked, forwardRef, effect, afterNextRender } from '@angular/core';
+import { inject, Injectable, InjectionToken, signal, PLATFORM_ID, ChangeDetectionStrategy, Component, computed, Renderer2, HostListener, input, EventEmitter, booleanAttribute, Input, ViewChild, Output, output, viewChild, NgZone, ChangeDetectorRef, DestroyRef, Injector, ElementRef, ViewContainerRef, untracked, forwardRef, effect, afterNextRender } from '@angular/core';
 import { DOCUMENT, isPlatformBrowser, TitleCasePipe } from '@angular/common';
 import { Router, NavigationEnd, RouterLink, ActivatedRoute, RouterOutlet } from '@angular/router';
-import { filter, tap, take, catchError, shareReplay } from 'rxjs/operators';
+import { filter, tap, take, catchError, shareReplay, finalize } from 'rxjs/operators';
 import { Subject, from, map, switchMap, of, startWith, filter as filter$1, distinctUntilChanged, EMPTY, defer, Observable, fromEvent, debounceTime } from 'rxjs';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Overlay, CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
@@ -11,7 +11,8 @@ import MarkdownIt from 'markdown-it';
 import { DomSanitizer } from '@angular/platform-browser';
 import container from 'markdown-it-container';
 import { __decorate } from 'tslib';
-import { createHighlighter } from 'shiki';
+import { createHighlighterCore, isSpecialLang } from '@shikijs/core';
+import { createOnigurumaEngine } from '@shikijs/engine-oniguruma';
 
 class GTagService {
     _config = inject(GTAG_CONFIG);
@@ -96,10 +97,10 @@ class GTagService {
     _getConfiguredIds() {
         return Array.from(this._configuredIds.values());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GTagService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GTagService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: GTagService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: GTagService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GTagService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: GTagService, decorators: [{
             type: Injectable
         }] });
 
@@ -117,127 +118,6 @@ function provideGTag(config) {
 }
 const GTAG_CONFIG = new InjectionToken('GTAG_CONFIG');
 
-class FSearchButtonComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: FSearchButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: FSearchButtonComponent, isStandalone: true, selector: "f-search-button", ngImport: i0, template: "<a class=\"f-icon search\" [routerLink]=\"[]\" fragment=\"search\"></a>\n", styles: [".f-icon{display:block;width:20px;height:20px;margin-left:8px;color:var(--sponsor);cursor:pointer;transition:transform .2s ease}.f-icon:hover{transform:scale(1.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: "20.1.8", ngImport: i0, type: FSearchButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'f-search-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        RouterLink,
-                    ], template: "<a class=\"f-icon search\" [routerLink]=\"[]\" fragment=\"search\"></a>\n", styles: [".f-icon{display:block;width:20px;height:20px;margin-left:8px;color:var(--sponsor);cursor:pointer;transition:transform .2s ease}.f-icon:hover{transform:scale(1.1)}\n"] }]
-        }] });
-
-let uniqueId$1 = 0;
-class FCheckboxComponent {
-    changeDetectorRef;
-    id = `f-checkbox-${uniqueId$1++}`;
-    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: "20.1.8", ngImport: i0, type: FCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.8", 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: "20.1.8", 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']]
-            }] } });
-
-let uniqueId = 0;
-class FRadioButtonComponent {
-    id = input(`f-radio-button-${uniqueId++}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
-    change = output();
-    checked = input(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
-    labelElement = viewChild('label', ...(ngDevMode ? [{ debugName: "labelElement" }] : []));
-    onInputClick() {
-        this._handleInputClick();
-    }
-    onTouchTargetClick() {
-        this._handleInputClick();
-    }
-    _handleInputClick() {
-        this._emitChangeEvent();
-    }
-    _emitChangeEvent() {
-        this.change.emit(true);
-    }
-    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: "20.1.8", ngImport: i0, type: FRadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.8", type: FRadioButtonComponent, isStandalone: true, selector: "f-radio-button", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { listeners: { "click": "preventBubblingFromLabel($event)" }, properties: { "class.f-radio-button-checked": "checked()" } }, viewQueries: [{ propertyName: "labelElement", first: true, predicate: ["label"], descendants: true, isSignal: true }], ngImport: i0, template: "<input [id]=\"id()\"\n       type=\"radio\"\n       [checked]=\"checked()\"\n       (click)=\"onInputClick()\"\n       (change)=\"onInteractionEvent($event)\"/>\n<div class=\"f-radio-button-container\" (click)=\"onTouchTargetClick()\">\n  <div class=\"f-radio-button-inner-circle\"></div>\n</div>\n<label [for]=\"id()\" #label>\n  <ng-content></ng-content>\n</label>\n", styles: [":host{position:relative;display:flex;align-items:center;font-weight:400;white-space:nowrap;font-size:14px;cursor:pointer;background-color:var(--radio-button-container-background);border-radius:var(--radio-button-container-border-radius);padding:0 8px;color:var(--radio-button-text);transition:color .25s,background-color .25s}:host input{position:absolute;inset:0;opacity:0;cursor:pointer}:host .f-radio-button-container{position:relative;display:flex;align-items:center;justify-content:center;width:var(--radio-button-size);height:var(--radio-button-size);margin-right:6px;border-radius:50%;border:1px solid var(--radio-button-border-color);background-color:var(--radio-button-background)}:host .f-radio-button-container .f-radio-button-inner-circle{position:absolute;top:calc(var(--radio-button-size) / 4);right:calc(var(--radio-button-size) / 4);bottom:calc(var(--radio-button-size) / 4);left:calc(var(--radio-button-size) / 4);border-radius:50%}:host label{-webkit-user-select:none;user-select:none}:host.f-radio-button-checked .f-radio-button-container{background-color:var(--radio-button-checked-background)}:host.f-radio-button-checked .f-radio-button-container .f-radio-button-inner-circle{background-color:var(--radio-button-inner-circle-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: FRadioButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'f-radio-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[class.f-radio-button-checked]': 'checked()',
-                    }, template: "<input [id]=\"id()\"\n       type=\"radio\"\n       [checked]=\"checked()\"\n       (click)=\"onInputClick()\"\n       (change)=\"onInteractionEvent($event)\"/>\n<div class=\"f-radio-button-container\" (click)=\"onTouchTargetClick()\">\n  <div class=\"f-radio-button-inner-circle\"></div>\n</div>\n<label [for]=\"id()\" #label>\n  <ng-content></ng-content>\n</label>\n", styles: [":host{position:relative;display:flex;align-items:center;font-weight:400;white-space:nowrap;font-size:14px;cursor:pointer;background-color:var(--radio-button-container-background);border-radius:var(--radio-button-container-border-radius);padding:0 8px;color:var(--radio-button-text);transition:color .25s,background-color .25s}:host input{position:absolute;inset:0;opacity:0;cursor:pointer}:host .f-radio-button-container{position:relative;display:flex;align-items:center;justify-content:center;width:var(--radio-button-size);height:var(--radio-button-size);margin-right:6px;border-radius:50%;border:1px solid var(--radio-button-border-color);background-color:var(--radio-button-background)}:host .f-radio-button-container .f-radio-button-inner-circle{position:absolute;top:calc(var(--radio-button-size) / 4);right:calc(var(--radio-button-size) / 4);bottom:calc(var(--radio-button-size) / 4);left:calc(var(--radio-button-size) / 4);border-radius:50%}:host label{-webkit-user-select:none;user-select:none}:host.f-radio-button-checked .f-radio-button-container{background-color:var(--radio-button-checked-background)}:host.f-radio-button-checked .f-radio-button-container .f-radio-button-inner-circle{background-color:var(--radio-button-inner-circle-color)}\n"] }]
-        }], propDecorators: { preventBubblingFromLabel: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
-
 function provideHeader(...configuration) {
     return {
         header: Object.assign({}, ...configuration),
@@ -291,10 +171,10 @@ class PopoverService {
         this._message.set(message);
         setTimeout(() => this._message.set(null), timeout);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: PopoverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: PopoverService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: PopoverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: PopoverService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: PopoverService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: PopoverService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -331,10 +211,10 @@ class ThemeService {
     _isDocumentContainsDarkTheme() {
         return this._docElement.classList.contains('dark');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: ThemeService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ThemeService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: ThemeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ThemeService, decorators: [{
             type: Injectable
         }] });
 
@@ -384,28 +264,58 @@ class FHeadTagService {
         this._document.title = title || '';
     }
     setDescription(description) {
-        const meta = this._getDescription() || this._createElement('meta');
-        meta.setAttribute('name', 'description');
-        meta.setAttribute('content', description);
-    }
-    _getDescription() {
-        return this._document.querySelector(`meta[name="description"]`) || null;
+        this.updateNameTag({ name: 'description', content: description || '' });
     }
     setCanonical(url) {
-        const link = this._getCanonical() || this._createElement('link');
-        link.setAttribute('rel', 'canonical');
-        link.setAttribute('href', url);
+        const normalizedUrl = (url || '').trim();
+        const link = this._getCanonical();
+        if (!normalizedUrl) {
+            if (link) {
+                link.remove();
+            }
+            return;
+        }
+        const canonicalLink = link || this._createElement('link');
+        canonicalLink.setAttribute('rel', 'canonical');
+        canonicalLink.setAttribute('href', normalizedUrl);
     }
     _getCanonical() {
         return this._document.querySelector(`link[rel="canonical"]`) || null;
     }
     updateTag(tag) {
-        const meta = this._getMetaTag(tag) || this._createElement('meta');
-        meta.setAttribute('property', tag.property);
-        meta.setAttribute('content', tag.content);
+        this.updatePropertyTag(tag);
+    }
+    updatePropertyTag(tag) {
+        const normalizedContent = tag.content?.trim() || '';
+        const meta = this._getPropertyTag(tag.property);
+        if (!normalizedContent) {
+            if (meta) {
+                meta.remove();
+            }
+            return;
+        }
+        const targetMeta = meta || this._createElement('meta');
+        targetMeta.setAttribute('property', tag.property);
+        targetMeta.setAttribute('content', normalizedContent);
     }
-    _getMetaTag(tag) {
-        return this._document.querySelector(`meta[property="${tag.property}"]`) || null;
+    updateNameTag(tag) {
+        const normalizedContent = tag.content?.trim() || '';
+        const meta = this._getNameTag(tag.name);
+        if (!normalizedContent) {
+            if (meta) {
+                meta.remove();
+            }
+            return;
+        }
+        const targetMeta = meta || this._createElement('meta');
+        targetMeta.setAttribute('name', tag.name);
+        targetMeta.setAttribute('content', normalizedContent);
+    }
+    _getPropertyTag(property) {
+        return this._document.querySelector(`meta[property="${property}"]`) || null;
+    }
+    _getNameTag(name) {
+        return this._document.querySelector(`meta[name="${name}"]`) || null;
     }
     _createElement(tag) {
         const element = this._document.createElement(tag);
@@ -413,10 +323,10 @@ class FHeadTagService {
         head.appendChild(element);
         return element;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: FHeadTagService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: FHeadTagService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FHeadTagService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FHeadTagService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: FHeadTagService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FHeadTagService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -547,38 +457,55 @@ class FMetaService {
     _router = inject(Router);
     _headTag = inject(FHeadTagService);
     _configuration = inject(DOCUMENTATION_CONFIGURATION);
+    _seoOverrides = null;
+    _lastPath = '';
     changes() {
-        return this._router.events.pipe(startWith(null), filter$1((e) => e === null || e instanceof NavigationEnd), map(() => this._router.url), tap((currentUrl) => {
-            const defaultData = this._configuration.meta;
-            if (!defaultData)
-                return;
-            const data = { ...defaultData };
-            const item = this._findDocItemByUrl(this._findDocGroupByUrl(currentUrl), currentUrl);
-            if (item) {
-                data.title = `${item.pageTitle || item.text} | ${defaultData.app_name}`;
-                data.url = this._buildAbsoluteUrl(currentUrl);
-                data.canonical = item.canonical;
-                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;
+        return this._router.events.pipe(startWith(null), filter$1((e) => e === null || e instanceof NavigationEnd), map(() => this._normalizeCurrentPath(this._router.url)), tap((currentUrl) => {
+            if (this._lastPath !== currentUrl) {
+                this._seoOverrides = null;
+                this._lastPath = currentUrl;
             }
-            if (!data.url) {
-                data.url = this._buildAbsoluteUrl(currentUrl);
-            }
-            if (data.image) {
-                data.image = this._toAbsoluteUrl(data.image);
-            }
-            this._updateMetaTags(data);
+            this._updateMetaByUrl(currentUrl);
         }));
     }
+    applyMarkdownSeo(overrides) {
+        this._seoOverrides = overrides ? { ...overrides } : null;
+        this._updateMetaByUrl(this._normalizeCurrentPath(this._router.url));
+    }
     dispose() {
+        this._seoOverrides = null;
+        this._lastPath = '';
         if (!this._configuration.meta) {
             return;
         }
         this._updateMetaTags(this._configuration.meta);
     }
+    _updateMetaByUrl(currentUrl) {
+        const defaultData = this._configuration.meta;
+        if (!defaultData) {
+            return;
+        }
+        const data = { ...defaultData };
+        const item = this._findDocItemByUrl(this._findDocGroupByUrl(currentUrl), currentUrl);
+        if (item) {
+            data.title = `${item.pageTitle || item.text} | ${defaultData.app_name}`;
+            data.url = this._buildAbsoluteUrl(currentUrl);
+            data.canonical = item.canonical;
+            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._buildAbsoluteUrl(currentUrl);
+        }
+        data.url = this._toAbsoluteUrl(data.url);
+        if (data.image) {
+            data.image = this._toAbsoluteUrl(data.image);
+        }
+        this._updateMetaTags(data);
+    }
     _findDocGroupByUrl(url) {
         return (this._configuration.navigation || []).find((g) => g.items.find((i) => url.endsWith(i.link)));
     }
@@ -602,25 +529,72 @@ class FMetaService {
         }
     }
     _updateMetaTags(item) {
-        this._headTag.setTitle(item.title);
-        this._headTag.setDescription(item.description);
-        this._headTag.setCanonical(item.canonical || item.url);
-        this._headTag.updateTag({ property: 'og:url', content: item.url });
-        this._headTag.updateTag({ property: 'og:type', content: item.type });
-        this._headTag.updateTag({ property: 'og:title', content: item.title });
-        this._headTag.updateTag({ property: 'og:site_name', content: item.title });
-        this._headTag.updateTag({ property: 'og:locale', content: item.locale });
-        this._headTag.updateTag({ property: 'og:description', content: item.description });
-        this._headTag.updateTag({ property: 'og:image', content: item.image });
-        this._headTag.updateTag({ property: 'og:image:secure_url', content: item.image });
-        this._headTag.updateTag({ property: 'og:image:type', content: item.image_type });
-        this._headTag.updateTag({ property: 'og:image:width', content: item.image_width.toString() });
-        this._headTag.updateTag({ property: 'og:image:height', content: item.image_height.toString() });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: FMetaService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: FMetaService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: FMetaService, decorators: [{
+        const seo = this._seoOverrides || null;
+        const title = seo?.title || item.title;
+        const description = seo?.description || item.description;
+        const url = this._toAbsoluteUrl(seo?.url || item.url);
+        const canonical = this._toAbsoluteUrl(seo?.canonical || item.canonical || url);
+        const type = seo?.og_type || seo?.type || item.type;
+        const siteName = seo?.app_name || item.app_name;
+        const locale = seo?.locale || item.locale;
+        const image = this._toAbsoluteUrl(seo?.og_image || seo?.image || item.image);
+        const imageType = seo?.image_type || item.image_type;
+        const imageWidth = seo?.image_width || item.image_width;
+        const imageHeight = seo?.image_height || item.image_height;
+        const keywords = seo?.keywords || item.keywords || '';
+        const robots = this._resolveRobots(item.robots, seo);
+        const twitterCard = seo?.twitter_card || item.twitter_card || 'summary_large_image';
+        const twitterSite = item.twitter_site || '';
+        const twitterCreator = item.twitter_creator || '';
+        const twitterTitle = seo?.twitter_title || seo?.og_title || title;
+        const twitterDescription = seo?.twitter_description || seo?.og_description || description;
+        const twitterImage = this._toAbsoluteUrl(seo?.twitter_image || image);
+        this._headTag.setTitle(title);
+        this._headTag.setDescription(description);
+        this._headTag.setCanonical(canonical);
+        this._headTag.updateTag({ property: 'og:url', content: url });
+        this._headTag.updateTag({ property: 'og:type', content: type });
+        this._headTag.updateTag({ property: 'og:title', content: seo?.og_title || title });
+        this._headTag.updateTag({ property: 'og:site_name', content: siteName });
+        this._headTag.updateTag({ property: 'og:locale', content: locale });
+        this._headTag.updateTag({ property: 'og:description', content: seo?.og_description || description });
+        this._headTag.updateTag({ property: 'og:image', content: image });
+        this._headTag.updateTag({ property: 'og:image:secure_url', content: image });
+        this._headTag.updateTag({ property: 'og:image:type', content: imageType });
+        this._headTag.updateTag({ property: 'og:image:width', content: imageWidth ? imageWidth.toString() : '' });
+        this._headTag.updateTag({ property: 'og:image:height', content: imageHeight ? imageHeight.toString() : '' });
+        this._headTag.updateNameTag({ name: 'keywords', content: keywords });
+        this._headTag.updateNameTag({ name: 'robots', content: robots });
+        this._headTag.updateNameTag({ name: 'twitter:card', content: twitterCard });
+        this._headTag.updateNameTag({ name: 'twitter:site', content: twitterSite });
+        this._headTag.updateNameTag({ name: 'twitter:creator', content: twitterCreator });
+        this._headTag.updateNameTag({ name: 'twitter:title', content: twitterTitle });
+        this._headTag.updateNameTag({ name: 'twitter:description', content: twitterDescription });
+        this._headTag.updateNameTag({ name: 'twitter:image', content: twitterImage });
+    }
+    _resolveRobots(defaultRobots, seo) {
+        if (seo?.robots) {
+            return seo.robots;
+        }
+        const hasDirectiveOverride = typeof seo?.noindex === 'boolean' || typeof seo?.nofollow === 'boolean';
+        if (!hasDirectiveOverride) {
+            return defaultRobots || '';
+        }
+        const indexValue = seo?.noindex ? 'noindex' : 'index';
+        const followValue = seo?.nofollow ? 'nofollow' : 'follow';
+        const defaultTokens = (defaultRobots || '')
+            .split(',')
+            .map((x) => x.trim())
+            .filter((x) => x && !['index', 'noindex', 'follow', 'nofollow'].includes(x.toLowerCase()));
+        return [indexValue, followValue, ...defaultTokens].join(', ');
+    }
+    _normalizeCurrentPath(url) {
+        return (url || '').split('#')[0].split('?')[0];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FMetaService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FMetaService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FMetaService, decorators: [{
             type: Injectable
         }] });
 
@@ -633,14 +607,14 @@ class HamburgerButton {
     _onShowNavigation() {
         this._parent?.onToggleNavigation(true);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: HamburgerButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: HamburgerButton, isStandalone: true, selector: "button[hamburger-button]", host: { listeners: { "click": "_onShowNavigation()" } }, ngImport: i0, template: "<span class=\"f-icon hamburger\"></span>\n\n", styles: [":host{background-color:transparent;border:0;display:flex;padding:0;margin-right:16px;color:var(--secondary-text);cursor:pointer}@media (min-width: 960px){:host{display:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HamburgerButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: HamburgerButton, isStandalone: true, selector: "button[hamburger-button]", host: { listeners: { "click": "_onShowNavigation()" } }, ngImport: i0, template: "<span class=\"f-icon hamburger\"></span>\n\n", styles: [":host{background-color:transparent;border:0;display:flex;padding:0;margin-right:16px;color:var(--secondary-text);cursor:pointer}@media(min-width:960px){:host{display:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: HamburgerButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HamburgerButton, decorators: [{
             type: Component,
             args: [{ selector: 'button[hamburger-button]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '(click)': '_onShowNavigation()',
-                    }, 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"] }]
+                    }, 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"] }]
         }] });
 
 class HeaderMenuBase {
@@ -665,10 +639,10 @@ class HeaderMenuBase {
 }
 
 class InlineMenu extends HeaderMenuBase {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: InlineMenu, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: InlineMenu, isStandalone: true, selector: "inline-menu", usesInheritance: true, ngImport: i0, template: "@for (item of navigation(); track item.link) {\n  <a [routerLink]=\"item.link\" [class.active]=\"item.isActive\">\n    <span>{{ item.text }}</span>\n  </a>\n}\n", styles: [":host{display:flex;justify-content:flex-start;align-items:center}a{padding:0 12px;font-size:14px;font-weight:500;color:var(--primary-text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}a:hover,a.active{color:var(--primary-1)}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: InlineMenu, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: InlineMenu, isStandalone: true, selector: "inline-menu", usesInheritance: true, ngImport: i0, template: "@for (item of navigation(); track item.link) {\n  <a [routerLink]=\"item.link\" [class.active]=\"item.isActive\">\n    <span>{{ item.text }}</span>\n  </a>\n}\n", styles: [":host{display:flex;justify-content:flex-start;align-items:center}a{padding:0 12px;font-size:14px;font-weight:500;color:var(--primary-text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}a:hover,a.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: "20.1.8", ngImport: i0, type: InlineMenu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: InlineMenu, decorators: [{
             type: Component,
             args: [{ selector: 'inline-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         RouterLink,
@@ -700,10 +674,10 @@ class ThemeButtonComponent {
         }
         this._themeService?.updateTheme();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: ThemeButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: ThemeButtonComponent, isStandalone: true, selector: "button[theme-button]", host: { listeners: { "click": "_onClick()" } }, ngImport: i0, template: "<div class=\"f-icon-container\">\n  <div class=\"f-icon moon\"></div>\n  <div class=\"f-icon sun\"></div>\n</div>\n", styles: [":host{margin:0 8px;position:relative;border-radius:11px;display:block;width:44px;min-width:44px;height:22px;border:1px solid var(--theme-button-border-color);background-color:var(--theme-button-background);cursor:pointer}:host:hover{border-color:var(--theme-button-hovered-border-color)}.f-icon-container{position:absolute;top:1px;left:1px;width:18px;height:18px;padding:3px;border-radius:50%;background-color:var(--theme-button-icon-background);transition:transform .4s}.f-icon-container .f-icon{position:absolute;top:3px;left:3px;width:12px;height:12px}.f-icon-container .sun{display:block}.f-icon-container .moon{display:none}.dark :host .f-icon-container{transform:translate(22px)}.dark :host .f-icon-container .sun{display:none}.dark :host .f-icon-container .moon{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ThemeButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: ThemeButtonComponent, isStandalone: true, selector: "button[theme-button]", host: { listeners: { "click": "_onClick()" } }, ngImport: i0, template: "<div class=\"f-icon-container\">\n  <div class=\"f-icon moon\"></div>\n  <div class=\"f-icon sun\"></div>\n</div>\n", styles: [":host{margin:0 8px;position:relative;border-radius:11px;display:block;width:44px;min-width:44px;height:22px;border:1px solid var(--theme-button-border-color);background-color:var(--theme-button-background);cursor:pointer}:host:hover{border-color:var(--theme-button-hovered-border-color)}.f-icon-container{position:absolute;top:1px;left:1px;width:18px;height:18px;padding:3px;border-radius:50%;background-color:var(--theme-button-icon-background);transition:transform .4s}.f-icon-container .f-icon{position:absolute;top:3px;left:3px;width:12px;height:12px}.f-icon-container .sun{display:block}.f-icon-container .moon{display:none}.dark :host .f-icon-container{transform:translate(22px)}.dark :host .f-icon-container .sun{display:none}.dark :host .f-icon-container .moon{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: ThemeButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ThemeButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'button[theme-button]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"f-icon-container\">\n  <div class=\"f-icon moon\"></div>\n  <div class=\"f-icon sun\"></div>\n</div>\n", styles: [":host{margin:0 8px;position:relative;border-radius:11px;display:block;width:44px;min-width:44px;height:22px;border:1px solid var(--theme-button-border-color);background-color:var(--theme-button-background);cursor:pointer}:host:hover{border-color:var(--theme-button-hovered-border-color)}.f-icon-container{position:absolute;top:1px;left:1px;width:18px;height:18px;padding:3px;border-radius:50%;background-color:var(--theme-button-icon-background);transition:transform .4s}.f-icon-container .f-icon{position:absolute;top:3px;left:3px;width:12px;height:12px}.f-icon-container .sun{display:block}.f-icon-container .moon{display:none}.dark :host .f-icon-container{transform:translate(22px)}.dark :host .f-icon-container .sun{display:none}.dark :host .f-icon-container .moon{display:block}\n"] }]
         }], propDecorators: { _onClick: [{
@@ -724,10 +698,10 @@ const MEDIA_LINKS_PROVIDER = new InjectionToken('MEDIA_LINKS_PROVIDER');
 
 class MediaLinks {
     links = inject(MEDIA_LINKS_PROVIDER, { optional: true });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: MediaLinks, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: MediaLinks, isStandalone: true, selector: "media-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:8px}.f-icon{width:20px;height:20px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: MediaLinks, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: MediaLinks, isStandalone: true, selector: "media-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:8px}.f-icon{width:20px;height:20px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: MediaLinks, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: MediaLinks, decorators: [{
             type: Component,
             args: [{ selector: 'media-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:8px}.f-icon{width:20px;height:20px}\n"] }]
         }] });
@@ -784,10 +758,10 @@ class DropdownMenu extends HeaderMenuBase {
     ngOnDestroy() {
         clearTimeout(this._hoverTimeout);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: DropdownMenu, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: DropdownMenu, isStandalone: true, selector: "dropdown-menu", usesInheritance: true, ngImport: i0, template: "<span class=\"label\" cdk-overlay-origin\n      (click)=\"toggle()\"\n      (mouseenter)=\"mouseEnter()\"\n      (mouseleave)=\"mouseLeave()\"\n      #overlayOrigin=\"cdkOverlayOrigin\">\n   <span class=\"f-icon more-horizontal\"></span>\n</span>\n\n<ng-template\n  cdk-connected-overlay\n  [cdkConnectedOverlayLockPosition]=\"true\"\n  [cdkConnectedOverlayHasBackdrop]=\"false\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayDisableClose]=\"false\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayOffsetY]=\"-10\"\n  (backdropClick)=\"close()\"\n>\n  <div class=\"dropdown-panel\"\n       (mouseenter)=\"mouseEnter()\"\n       (mouseleave)=\"mouseLeave()\">\n    @if (navigation().length) {\n      <div class=\"navigation-wrapper\">\n        @for (item of navigation(); track item.link) {\n          <a [routerLink]=\"item.link\" [class.active]=\"item.isActive\"><span>{{ item.text }}</span></a>\n        }\n      </div>\n    }\n    <div class=\"appearance\">\n      <span>Appearance</span>\n      <button theme-button></button>\n    </div>\n    <div class=\"social-links\">\n      <media-links/>\n    </div>\n\n  </div>\n</ng-template>\n\n", styles: [":host{overflow:hidden}.label{margin-left:8px;margin-right:8px;display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--primary-text);cursor:pointer;line-height:64px}.label .f-icon{margin-left:4px;width:14px;min-width:14px;height:14px;color:inherit}.label:hover{color:var(--secondary-text)}.dropdown-panel{border-radius:6px;min-width:202px;border:1px solid var(--divider-color);background-color:var(--background-color);box-shadow:var(--shadow-3);max-height:calc(100vh - var(--header-height));overflow-y:auto}.navigation-wrapper{display:flex;flex-direction:column;justify-content:flex-start;padding:12px;border-bottom:1px solid var(--divider-color)}.navigation-wrapper a{color:var(--primary-text);white-space:nowrap;border-radius:6px;padding:0 12px;font-size:14px;font-weight:500;line-height:32px;display:block;cursor:pointer;overflow:hidden;text-overflow:ellipsis}.navigation-wrapper a:hover{color:var(--primary-1);background-color:var(--default-3)}.navigation-wrapper a.active{color:var(--primary-1)}.appearance{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px 8px 24px;border-bottom:1px solid var(--divider-color)}.appearance span{color:var(--secondary-text);flex-grow:1;font-size:12px;font-weight:500;line-height:28px;transition:color .5s}.social-links{padding:6px 12px}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ThemeButtonComponent, selector: "button[theme-button]" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MediaLinks, selector: "media-links" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DropdownMenu, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: DropdownMenu, isStandalone: true, selector: "dropdown-menu", usesInheritance: true, ngImport: i0, template: "<span class=\"label\" cdk-overlay-origin\n      (click)=\"toggle()\"\n      (mouseenter)=\"mouseEnter()\"\n      (mouseleave)=\"mouseLeave()\"\n      #overlayOrigin=\"cdkOverlayOrigin\">\n   <span class=\"f-icon more-horizontal\"></span>\n</span>\n\n<ng-template\n  cdk-connected-overlay\n  [cdkConnectedOverlayLockPosition]=\"true\"\n  [cdkConnectedOverlayHasBackdrop]=\"false\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayDisableClose]=\"false\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayOffsetY]=\"-10\"\n  (backdropClick)=\"close()\"\n>\n  <div class=\"dropdown-panel\"\n       (mouseenter)=\"mouseEnter()\"\n       (mouseleave)=\"mouseLeave()\">\n    @if (navigation().length) {\n      <div class=\"navigation-wrapper\">\n        @for (item of navigation(); track item.link) {\n          <a [routerLink]=\"item.link\" [class.active]=\"item.isActive\"><span>{{ item.text }}</span></a>\n        }\n      </div>\n    }\n    <div class=\"appearance\">\n      <span>Appearance</span>\n      <button theme-button></button>\n    </div>\n    <div class=\"social-links\">\n      <media-links/>\n    </div>\n\n  </div>\n</ng-template>\n\n", styles: [":host{overflow:hidden}.label{margin-left:8px;margin-right:8px;display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--primary-text);cursor:pointer;line-height:64px}.label .f-icon{margin-left:4px;width:14px;min-width:14px;height:14px;color:inherit}.label:hover{color:var(--secondary-text)}.dropdown-panel{border-radius:6px;min-width:202px;border:1px solid var(--divider-color);background-color:var(--background-color);box-shadow:var(--shadow-3);max-height:calc(100vh - var(--header-height));overflow-y:auto}.navigation-wrapper{display:flex;flex-direction:column;justify-content:flex-start;padding:12px;border-bottom:1px solid var(--divider-color)}.navigation-wrapper a{color:var(--primary-text);white-space:nowrap;border-radius:6px;padding:0 12px;font-size:14px;font-weight:500;line-height:32px;display:block;cursor:pointer;overflow:hidden;text-overflow:ellipsis}.navigation-wrapper a:hover{color:var(--primary-1);background-color:var(--default-3)}.navigation-wrapper a.active{color:var(--primary-1)}.appearance{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px 8px 24px;border-bottom:1px solid var(--divider-color)}.appearance span{color:var(--secondary-text);flex-grow:1;font-size:12px;font-weight:500;line-height:28px;transition:color .5s}.social-links{padding:6px 12px}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ThemeButtonComponent, selector: "button[theme-button]" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MediaLinks, selector: "media-links" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: DropdownMenu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DropdownMenu, decorators: [{
             type: Component,
             args: [{ selector: 'dropdown-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CdkConnectedOverlay,
@@ -850,10 +824,10 @@ class DocumentationStore {
     getShowcaseItems() {
         return this._configuration.showcaseItems || [];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: DocumentationStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: DocumentationStore });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DocumentationStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DocumentationStore });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: DocumentationStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DocumentationStore, decorators: [{
             type: Injectable
         }] });
 
@@ -895,13 +869,149 @@ class DynamicComponentsStore {
         }
         return result;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: DynamicComponentsStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: DynamicComponentsStore });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DynamicComponentsStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DynamicComponentsStore });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: DynamicComponentsStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DynamicComponentsStore, decorators: [{
             type: Injectable
         }] });
 
+class FBrandLinkComponent {
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
+    logo = input.required(...(ngDevMode ? [{ debugName: "logo" }] : []));
+    ariaLabel = input('Home', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    logoAlt = input('logo', ...(ngDevMode ? [{ debugName: "logoAlt" }] : []));
+    href = input('', ...(ngDevMode ? [{ debugName: "href" }] : []));
+    routerLink = input(null, ...(ngDevMode ? [{ debugName: "routerLink" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FBrandLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: FBrandLinkComponent, isStandalone: true, selector: "f-brand-link", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, logo: { classPropertyName: "logo", publicName: "logo", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, logoAlt: { classPropertyName: "logoAlt", publicName: "logoAlt", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (routerLink() !== null) {\n  <a [routerLink]=\"routerLink()!\" class=\"brand-link\" [attr.aria-label]=\"ariaLabel()\">\n    <img [src]=\"logo()\" class=\"logo\" [alt]=\"logoAlt()\" width=\"24\" height=\"24\"/>\n    <span class=\"title\">{{ title() }}</span>\n  </a>\n} @else {\n  <a [href]=\"href()\" class=\"brand-link\" [attr.aria-label]=\"ariaLabel()\">\n    <img [src]=\"logo()\" class=\"logo\" [alt]=\"logoAlt()\" width=\"24\" height=\"24\"/>\n    <span class=\"title\">{{ title() }}</span>\n  </a>\n}\n", styles: [":host{display:inline-flex;min-width:0}.brand-link{display:flex;justify-content:flex-start;align-items:center;width:100%;min-width:0;text-decoration:none;color:inherit}.logo{margin-right:8px;flex-shrink:0}.title{display:inline-flex;align-items:center;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid transparent}\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: "21.1.4", ngImport: i0, type: FBrandLinkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'f-brand-link', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink], template: "@if (routerLink() !== null) {\n  <a [routerLink]=\"routerLink()!\" class=\"brand-link\" [attr.aria-label]=\"ariaLabel()\">\n    <img [src]=\"logo()\" class=\"logo\" [alt]=\"logoAlt()\" width=\"24\" height=\"24\"/>\n    <span class=\"title\">{{ title() }}</span>\n  </a>\n} @else {\n  <a [href]=\"href()\" class=\"brand-link\" [attr.aria-label]=\"ariaLabel()\">\n    <img [src]=\"logo()\" class=\"logo\" [alt]=\"logoAlt()\" width=\"24\" height=\"24\"/>\n    <span class=\"title\">{{ title() }}</span>\n  </a>\n}\n", styles: [":host{display:inline-flex;min-width:0}.brand-link{display:flex;justify-content:flex-start;align-items:center;width:100%;min-width:0;text-decoration:none;color:inherit}.logo{margin-right:8px;flex-shrink:0}.title{display:inline-flex;align-items:center;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid transparent}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], logo: [{ type: i0.Input, args: [{ isSignal: true, alias: "logo", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], logoAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoAlt", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }] } });
+
+class FSearchButtonComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FSearchButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: FSearchButtonComponent, isStandalone: true, selector: "f-search-button", ngImport: i0, template: "<a class=\"f-icon search\" [routerLink]=\"[]\" fragment=\"search\"></a>\n", styles: [".f-icon{display:block;width:20px;height:20px;margin-left:8px;color:var(--sponsor);cursor:pointer;transition:transform .2s ease}.f-icon:hover{transform:scale(1.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: "21.1.4", ngImport: i0, type: FSearchButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'f-search-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        RouterLink,
+                    ], template: "<a class=\"f-icon search\" [routerLink]=\"[]\" fragment=\"search\"></a>\n", styles: [".f-icon{display:block;width:20px;height:20px;margin-left:8px;color:var(--sponsor);cursor:pointer;transition:transform .2s ease}.f-icon:hover{transform:scale(1.1)}\n"] }]
+        }] });
+
+let uniqueId$1 = 0;
+class FCheckboxComponent {
+    changeDetectorRef;
+    id = `f-checkbox-${uniqueId$1++}`;
+    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: "21.1.4", ngImport: i0, type: FCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.1.4", 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: "21.1.4", 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']]
+            }] } });
+
+let uniqueId = 0;
+class FRadioButtonComponent {
+    id = input(`f-radio-button-${uniqueId++}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    change = output();
+    checked = input(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+    labelElement = viewChild('label', ...(ngDevMode ? [{ debugName: "labelElement" }] : []));
+    onInputClick() {
+        this._handleInputClick();
+    }
+    onTouchTargetClick() {
+        this._handleInputClick();
+    }
+    _handleInputClick() {
+        this._emitChangeEvent();
+    }
+    _emitChangeEvent() {
+        this.change.emit(true);
+    }
+    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: "21.1.4", ngImport: i0, type: FRadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.4", type: FRadioButtonComponent, isStandalone: true, selector: "f-radio-button", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { listeners: { "click": "preventBubblingFromLabel($event)" }, properties: { "class.f-radio-button-checked": "checked()" } }, viewQueries: [{ propertyName: "labelElement", first: true, predicate: ["label"], descendants: true, isSignal: true }], ngImport: i0, template: "<input [id]=\"id()\"\n       type=\"radio\"\n       [checked]=\"checked()\"\n       (click)=\"onInputClick()\"\n       (change)=\"onInteractionEvent($event)\"/>\n<div class=\"f-radio-button-container\" (click)=\"onTouchTargetClick()\">\n  <div class=\"f-radio-button-inner-circle\"></div>\n</div>\n<label [for]=\"id()\" #label>\n  <ng-content></ng-content>\n</label>\n", styles: [":host{position:relative;display:flex;align-items:center;font-weight:400;white-space:nowrap;font-size:14px;cursor:pointer;background-color:var(--radio-button-container-background);border-radius:var(--radio-button-container-border-radius);padding:0 8px;color:var(--radio-button-text);transition:color .25s,background-color .25s}:host input{position:absolute;inset:0;opacity:0;cursor:pointer}:host .f-radio-button-container{position:relative;display:flex;align-items:center;justify-content:center;width:var(--radio-button-size);height:var(--radio-button-size);margin-right:6px;border-radius:50%;border:1px solid var(--radio-button-border-color);background-color:var(--radio-button-background)}:host .f-radio-button-container .f-radio-button-inner-circle{position:absolute;top:calc(var(--radio-button-size) / 4);right:calc(var(--radio-button-size) / 4);bottom:calc(var(--radio-button-size) / 4);left:calc(var(--radio-button-size) / 4);border-radius:50%}:host label{-webkit-user-select:none;user-select:none}:host.f-radio-button-checked .f-radio-button-container{background-color:var(--radio-button-checked-background)}:host.f-radio-button-checked .f-radio-button-container .f-radio-button-inner-circle{background-color:var(--radio-button-inner-circle-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FRadioButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'f-radio-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.f-radio-button-checked]': 'checked()',
+                    }, template: "<input [id]=\"id()\"\n       type=\"radio\"\n       [checked]=\"checked()\"\n       (click)=\"onInputClick()\"\n       (change)=\"onInteractionEvent($event)\"/>\n<div class=\"f-radio-button-container\" (click)=\"onTouchTargetClick()\">\n  <div class=\"f-radio-button-inner-circle\"></div>\n</div>\n<label [for]=\"id()\" #label>\n  <ng-content></ng-content>\n</label>\n", styles: [":host{position:relative;display:flex;align-items:center;font-weight:400;white-space:nowrap;font-size:14px;cursor:pointer;background-color:var(--radio-button-container-background);border-radius:var(--radio-button-container-border-radius);padding:0 8px;color:var(--radio-button-text);transition:color .25s,background-color .25s}:host input{position:absolute;inset:0;opacity:0;cursor:pointer}:host .f-radio-button-container{position:relative;display:flex;align-items:center;justify-content:center;width:var(--radio-button-size);height:var(--radio-button-size);margin-right:6px;border-radius:50%;border:1px solid var(--radio-button-border-color);background-color:var(--radio-button-background)}:host .f-radio-button-container .f-radio-button-inner-circle{position:absolute;top:calc(var(--radio-button-size) / 4);right:calc(var(--radio-button-size) / 4);bottom:calc(var(--radio-button-size) / 4);left:calc(var(--radio-button-size) / 4);border-radius:50%}:host label{-webkit-user-select:none;user-select:none}:host.f-radio-button-checked .f-radio-button-container{background-color:var(--radio-button-checked-background)}:host.f-radio-button-checked .f-radio-button-container .f-radio-button-inner-circle{background-color:var(--radio-button-inner-circle-color)}\n"] }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], labelElement: [{ type: i0.ViewChild, args: ['label', { isSignal: true }] }], preventBubblingFromLabel: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
 class HeaderComponent {
     title = inject(DocumentationStore).getTitle();
     image = inject(DocumentationStore).getLogo();
@@ -962,22 +1072,20 @@ class HeaderComponent {
         if (this._rafId != null)
             cancelAnimationFrame(this._rafId);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: HeaderComponent, isStandalone: true, selector: "f-header", viewQueries: [{ propertyName: "_containerRef", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "_targetRef", first: true, predicate: ["target"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (emptyNavigation) {\n  <a routerLink class=\"empty-navigation-title\">\n    <img [src]=\"image\" width=\"24\" height=\"24\" alt=\"logo\" class=\"logo\"/> {{ title }}\n  </a>\n} @else {\n  <div class=\"portal-title\">\n    <button hamburger-button></button>\n    <div class=\"title text-ellipsis\">{{ title }}</div>\n  </div>\n}\n\n<div class=\"collapsable-row\" #container>\n  <div #target class=\"target\" [class.hidden]=\"initialized() && overflowed()\">\n    @if (config.navigation) {\n      <inline-menu />\n      <div class=\"divider\"></div>\n    }\n\n    <button theme-button></button>\n    <div class=\"divider\"></div>\n    <media-links />\n  </div>\n\n  <div class=\"fallback\" [class.hidden]=\"!initialized() || !overflowed()\">\n    <dropdown-menu />\n  </div>\n</div>\n\n", styles: [":host{position:sticky;width:100%;top:0;display:flex;justify-content:flex-start;align-items:center;padding:0 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)}}@media (min-width: 1280px){:host.empty-navigation{padding-right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2);padding-left:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2)}}.empty-navigation-title{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}.empty-navigation-title img{margin-right:8px}.portal-title{display:flex;justify-content:flex-start;align-items:center}@media (min-width: 960px){.portal-title{display:none}}.portal-title .title{font-weight:600;color:var(--primary-text)}.divider{margin-right:8px;margin-left:8px;width:1px;height:24px;background-color:var(--divider-color);content:\"\"}.collapsable-row{position:relative;width:100%;display:flex;justify-content:flex-end}.collapsable-row .target{display:flex;justify-content:flex-start;align-items:center;width:fit-content}.collapsable-row .target.hidden{position:absolute;left:-99999px;top:0;visibility:hidden;white-space:nowrap}.collapsable-row .fallback.hidden{display:none}\n"], dependencies: [{ kind: "component", type: HamburgerButton, selector: "button[hamburger-button]" }, { kind: "component", type: ThemeButtonComponent, selector: "button[theme-button]" }, { kind: "component", type: InlineMenu, selector: "inline-menu" }, { kind: "component", type: DropdownMenu, selector: "dropdown-menu" }, { kind: "component", type: MediaLinks, selector: "media-links" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: HeaderComponent, isStandalone: true, selector: "f-header", viewQueries: [{ propertyName: "_containerRef", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "_targetRef", first: true, predicate: ["target"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (emptyNavigation) {\n  <f-brand-link class=\"empty-navigation-title\"\n                [routerLink]=\"''\"\n                [title]=\"title\"\n                [logo]=\"image\" />\n} @else {\n  <div class=\"portal-title\">\n    <button hamburger-button></button>\n    <div class=\"title text-ellipsis\">{{ title }}</div>\n  </div>\n}\n\n<div class=\"collapsable-row\" #container>\n  <div #target class=\"target\" [class.hidden]=\"initialized() && overflowed()\">\n    @if (config.navigation) {\n      <inline-menu />\n      <div class=\"divider\"></div>\n    }\n\n    <button theme-button></button>\n    <div class=\"divider\"></div>\n    <media-links />\n  </div>\n\n  <div class=\"fallback\" [class.hidden]=\"!initialized() || !overflowed()\">\n    <dropdown-menu />\n  </div>\n</div>\n", styles: [":host{position:sticky;width:100%;top:0;display:flex;justify-content:flex-start;align-items:center;padding:0 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)}}@media(min-width:1280px){:host.empty-navigation{padding-right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2);padding-left:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2)}}.empty-navigation-title{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}.portal-title{display:flex;justify-content:flex-start;align-items:center}@media(min-width:960px){.portal-title{display:none}}.portal-title .title{font-weight:600;color:var(--primary-text)}.divider{margin-right:8px;margin-left:8px;width:1px;height:24px;background-color:var(--divider-color);content:\"\"}.collapsable-row{position:relative;width:100%;display:flex;justify-content:flex-end}.collapsable-row .target{display:flex;justify-content:flex-start;align-items:center;width:fit-content}.collapsable-row .target.hidden{position:absolute;left:-99999px;top:0;visibility:hidden;white-space:nowrap}.collapsable-row .fallback.hidden{display:none}\n"], dependencies: [{ kind: "component", type: HamburgerButton, selector: "button[hamburger-button]" }, { kind: "component", type: FBrandLinkComponent, selector: "f-brand-link", inputs: ["title", "logo", "ariaLabel", "logoAlt", "href", "routerLink"] }, { kind: "component", type: ThemeButtonComponent, selector: "button[theme-button]" }, { kind: "component", type: InlineMenu, selector: "inline-menu" }, { kind: "component", type: DropdownMenu, selector: "dropdown-menu" }, { kind: "component", type: MediaLinks, selector: "media-links" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: HeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-header', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         HamburgerButton,
+                        FBrandLinkComponent,
                         ThemeButtonComponent,
                         InlineMenu,
                         DropdownMenu,
-                        InlineMenu,
                         MediaLinks,
-                        DropdownMenu,
-                        RouterLink,
-                    ], template: "@if (emptyNavigation) {\n  <a routerLink class=\"empty-navigation-title\">\n    <img [src]=\"image\" width=\"24\" height=\"24\" alt=\"logo\" class=\"logo\"/> {{ title }}\n  </a>\n} @else {\n  <div class=\"portal-title\">\n    <button hamburger-button></button>\n    <div class=\"title text-ellipsis\">{{ title }}</div>\n  </div>\n}\n\n<div class=\"collapsable-row\" #container>\n  <div #target class=\"target\" [class.hidden]=\"initialized() && overflowed()\">\n    @if (config.navigation) {\n      <inline-menu />\n      <div class=\"divider\"></div>\n    }\n\n    <button theme-button></button>\n    <div class=\"divider\"></div>\n    <media-links />\n  </div>\n\n  <div class=\"fallback\" [class.hidden]=\"!initialized() || !overflowed()\">\n    <dropdown-menu />\n  </div>\n</div>\n\n", styles: [":host{position:sticky;width:100%;top:0;display:flex;justify-content:flex-start;align-items:center;padding:0 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)}}@media (min-width: 1280px){:host.empty-navigation{padding-right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2);padding-left:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2)}}.empty-navigation-title{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}.empty-navigation-title img{margin-right:8px}.portal-title{display:flex;justify-content:flex-start;align-items:center}@media (min-width: 960px){.portal-title{display:none}}.portal-title .title{font-weight:600;color:var(--primary-text)}.divider{margin-right:8px;margin-left:8px;width:1px;height:24px;background-color:var(--divider-color);content:\"\"}.collapsable-row{position:relative;width:100%;display:flex;justify-content:flex-end}.collapsable-row .target{display:flex;justify-content:flex-start;align-items:center;width:fit-content}.collapsable-row .target.hidden{position:absolute;left:-99999px;top:0;visibility:hidden;white-space:nowrap}.collapsable-row .fallback.hidden{display:none}\n"] }]
-        }] });
+                    ], template: "@if (emptyNavigation) {\n  <f-brand-link class=\"empty-navigation-title\"\n                [routerLink]=\"''\"\n                [title]=\"title\"\n                [logo]=\"image\" />\n} @else {\n  <div class=\"portal-title\">\n    <button hamburger-button></button>\n    <div class=\"title text-ellipsis\">{{ title }}</div>\n  </div>\n}\n\n<div class=\"collapsable-row\" #container>\n  <div #target class=\"target\" [class.hidden]=\"initialized() && overflowed()\">\n    @if (config.navigation) {\n      <inline-menu />\n      <div class=\"divider\"></div>\n    }\n\n    <button theme-button></button>\n    <div class=\"divider\"></div>\n    <media-links />\n  </div>\n\n  <div class=\"fallback\" [class.hidden]=\"!initialized() || !overflowed()\">\n    <dropdown-menu />\n  </div>\n</div>\n", styles: [":host{position:sticky;width:100%;top:0;display:flex;justify-content:flex-start;align-items:center;padding:0 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)}}@media(min-width:1280px){:host.empty-navigation{padding-right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2);padding-left:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2)}}.empty-navigation-title{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}.portal-title{display:flex;justify-content:flex-start;align-items:center}@media(min-width:960px){.portal-title{display:none}}.portal-title .title{font-weight:600;color:var(--primary-text)}.divider{margin-right:8px;margin-left:8px;width:1px;height:24px;background-color:var(--divider-color);content:\"\"}.collapsable-row{position:relative;width:100%;display:flex;justify-content:flex-end}.collapsable-row .target{display:flex;justify-content:flex-start;align-items:center;width:fit-content}.collapsable-row .target.hidden{position:absolute;left:-99999px;top:0;visibility:hidden;white-space:nowrap}.collapsable-row .fallback.hidden{display:none}\n"] }]
+        }], propDecorators: { _containerRef: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], _targetRef: [{ type: i0.ViewChild, args: ['target', { isSignal: true }] }] } });
 
 class NavigationGroupComponent {
     title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : []));
@@ -985,22 +1093,22 @@ class NavigationGroupComponent {
     toggle() {
         this.isCollapsed.set(!this.isCollapsed());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: NavigationGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: NavigationGroupComponent, isStandalone: true, selector: "f-navigation-group", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.collapsed": "isCollapsed()", "class.no-title": "!title()" } }, ngImport: i0, template: "@if (title()) {\n  <header (click)=\"toggle()\">\n    <span>{{ title() }}</span>\n    <div class=\"flex-space\"></div>\n    <div class=\"caret\">\n      <span class=\"chevron-right caret-icon\"></span>\n    </div>\n  </header>\n}\n@if (!isCollapsed()) {\n  <ng-content></ng-content>\n}\n\n\n\n", styles: [":host{padding-top:10px;padding-bottom:24px;border-top:1px solid var(--divider-color);display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;width:100%;max-width:240px;margin-left:auto}:host.collapsed,:host.no-title{padding-top:10px;padding-bottom:10px}header{font-weight:600;color:var(--primary-text);flex-grow:1;padding:4px 0;line-height:24px;font-size:14px;cursor:pointer;display:flex;justify-content:flex-start;align-items:center;width:100%}.caret{display:flex;justify-content:center;align-items:center;margin-right:-7px;width:32px;height:32px;color:var(--tertiary-text);cursor:pointer;transition:color .25s;flex-shrink:0}:host:hover .caret{color:var(--secondary-text)}:host:hover .caret:hover{color:var(--primary-text)}:host .caret-icon{font-size:18px;transform:rotate(90deg);transition:transform .25s;-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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NavigationGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: NavigationGroupComponent, isStandalone: true, selector: "f-navigation-group", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.collapsed": "isCollapsed()", "class.no-title": "!title()" } }, ngImport: i0, template: "@if (title()) {\n  <header (click)=\"toggle()\">\n    <span>{{ title() }}</span>\n    <div class=\"flex-space\"></div>\n    <div class=\"caret\">\n      <span class=\"chevron-right caret-icon\"></span>\n    </div>\n  </header>\n}\n@if (!isCollapsed()) {\n  <ng-content></ng-content>\n}\n\n\n\n", styles: [":host{padding-top:10px;padding-bottom:24px;border-top:1px solid var(--divider-color);display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;width:100%;max-width:240px;margin-left:auto}:host.collapsed,:host.no-title{padding-top:10px;padding-bottom:10px}header{font-weight:600;color:var(--primary-text);flex-grow:1;padding:4px 0;line-height:24px;font-size:14px;cursor:pointer;display:flex;justify-content:flex-start;align-items:center;width:100%}.caret{display:flex;justify-content:center;align-items:center;margin-right:-7px;width:32px;height:32px;color:var(--tertiary-text);cursor:pointer;transition:color .25s;flex-shrink:0}:host:hover .caret{color:var(--secondary-text)}:host:hover .caret:hover{color:var(--primary-text)}:host .caret-icon{font-size:18px;transform:rotate(90deg);transition:transform .25s;-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: "20.1.8", ngImport: i0, type: NavigationGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NavigationGroupComponent, 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: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }] } });
 
 class FNavigationItemComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: FNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: FNavigationItemComponent, isStandalone: true, selector: "a[f-navigation-item]", ngImport: i0, template: "<ng-content></ng-content>\n\n\n\n", styles: [":host{font-weight:500;color:var(--secondary-text);flex-grow:1;padding:4px 0;line-height:24px;font-size:14px;cursor:pointer;width:100%;display:flex;align-items:center;justify-content:flex-start;gap:2px}:host:hover{text-decoration:none;color:var(--primary-1)}:host.active{color:var(--primary-1)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", 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: "20.1.8", ngImport: i0, type: FNavigationItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", 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"] }]
         }] });
@@ -1064,16 +1172,16 @@ class NavigationPanelComponent {
     _onDocumentClick(event) {
         new HandleNavigationLinksHandler().handle(new HandleNavigationLinksRequest(event, this._window, this._router));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: NavigationPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: NavigationPanelComponent, isStandalone: true, selector: "f-navigation-panel", host: { listeners: { "click": "_onDocumentClick($event)" } }, ngImport: i0, template: "<a routerLink class=\"navigation-header\">\n  <img [src]=\"image\" width=\"24\" height=\"24\" alt=\"logo\" class=\"logo\"/> {{ title }}\n</a>\n\n@for (group of navigation; track group) {\n  <f-navigation-group [title]=\"group.text\">\n    @for (item of group.items; track item.link) {\n      <a f-navigation-item [href]=\"item.link\" [class.active]=\"item.link === value\">\n        <div class=\"text-ellipsis\">{{ item.text }}</div>\n        @if (item.badge) {\n          <span class=\"f-badge {{ item.badge.type }}\">{{ item.badge.text }}</span>\n        }\n      </a>\n    }\n  </f-navigation-group>\n}\n\n", styles: [":host{height:100%;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:0 var(--navigation-panel-padding);background-color:var(--navigation-panel-background);overflow:hidden;overflow-y:auto;position:fixed;width:var(--navigation-panel-width);top:0;left:calc(-1 * var(--navigation-panel-width));transition:transform .2s ease-in-out;z-index:var(--z-index-navigation);transform:none}@media (min-width: 960px){:host{position:unset;display:flex;min-width:var(--navigation-panel-width);width:fit-content;transform:none!important}}@media (min-width: 1440px){:host{min-width:calc((100% - (var(--layout-max-width) - 64px)) / 3 + var(--navigation-panel-width) - var(--navigation-panel-padding))}}:host.visible{transform:translate(var(--navigation-panel-width))}.navigation-header{display:flex;justify-content:flex-start;align-items:center;padding:20px 0;font-weight:600;color:var(--primary-text);height:var(--header-height);width:100%;max-width:240px;margin-left:auto;cursor:pointer}.navigation-header img{margin-right:8px}\n"], dependencies: [{ kind: "component", type: FNavigationItemComponent, selector: "a[f-navigation-item]" }, { kind: "component", type: NavigationGroupComponent, selector: "f-navigation-group", inputs: ["title"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NavigationPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: NavigationPanelComponent, isStandalone: true, selector: "f-navigation-panel", host: { listeners: { "click": "_onDocumentClick($event)" } }, ngImport: i0, template: "<a routerLink class=\"navigation-header\">\n  <img [src]=\"image\" width=\"24\" height=\"24\" alt=\"logo\" class=\"logo\"/> {{ title }}\n</a>\n\n@for (group of navigation; track group) {\n  <f-navigation-group [title]=\"group.text\">\n    @for (item of group.items; track item.link) {\n      <a f-navigation-item [href]=\"item.link\" [class.active]=\"item.link === value\">\n        <div class=\"text-ellipsis\">{{ item.text }}</div>\n        @if (item.badge) {\n          <span class=\"f-badge {{ item.badge.type }}\">{{ item.badge.text }}</span>\n        }\n      </a>\n    }\n  </f-navigation-group>\n}\n\n", styles: [":host{height:100%;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:0 var(--navigation-panel-padding);background-color:var(--navigation-panel-background);overflow:hidden;overflow-y:auto;position:fixed;width:var(--navigation-panel-width);top:0;left:calc(-1 * var(--navigation-panel-width));transition:transform .2s ease-in-out;z-index:var(--z-index-navigation);transform:none}@media(min-width:960px){:host{position:unset;display:flex;min-width:var(--navigation-panel-width);width:fit-content;transform:none!important}}@media(min-width:1440px){:host{min-width:calc((100% - (var(--layout-max-width) - 64px)) / 3 + var(--navigation-panel-width) - var(--navigation-panel-padding))}}:host.visible{transform:translate(var(--navigation-panel-width))}.navigation-header{display:flex;justify-content:flex-start;align-items:center;padding:20px 0;font-weight:600;color:var(--primary-text);height:var(--header-height);width:100%;max-width:240px;margin-left:auto;cursor:pointer}.navigation-header img{margin-right:8px}\n"], dependencies: [{ kind: "component", type: FNavigationItemComponent, selector: "a[f-navigation-item]" }, { kind: "component", type: NavigationGroupComponent, selector: "f-navigation-group", inputs: ["title"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: NavigationPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NavigationPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-navigation-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         FNavigationItemComponent,
                         NavigationGroupComponent,
                         RouterLink,
-                    ], template: "<a routerLink class=\"navigation-header\">\n  <img [src]=\"image\" width=\"24\" height=\"24\" alt=\"logo\" class=\"logo\"/> {{ title }}\n</a>\n\n@for (group of navigation; track group) {\n  <f-navigation-group [title]=\"group.text\">\n    @for (item of group.items; track item.link) {\n      <a f-navigation-item [href]=\"item.link\" [class.active]=\"item.link === value\">\n        <div class=\"text-ellipsis\">{{ item.text }}</div>\n        @if (item.badge) {\n          <span class=\"f-badge {{ item.badge.type }}\">{{ item.badge.text }}</span>\n        }\n      </a>\n    }\n  </f-navigation-group>\n}\n\n", styles: [":host{height:100%;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:0 var(--navigation-panel-padding);background-color:var(--navigation-panel-background);overflow:hidden;overflow-y:auto;position:fixed;width:var(--navigation-panel-width);top:0;left:calc(-1 * var(--navigation-panel-width));transition:transform .2s ease-in-out;z-index:var(--z-index-navigation);transform:none}@media (min-width: 960px){:host{position:unset;display:flex;min-width:var(--navigation-panel-width);width:fit-content;transform:none!important}}@media (min-width: 1440px){:host{min-width:calc((100% - (var(--layout-max-width) - 64px)) / 3 + var(--navigation-panel-width) - var(--navigation-panel-padding))}}:host.visible{transform:translate(var(--navigation-panel-width))}.navigation-header{display:flex;justify-content:flex-start;align-items:center;padding:20px 0;font-weight:600;color:var(--primary-text);height:var(--header-height);width:100%;max-width:240px;margin-left:auto;cursor:pointer}.navigation-header img{margin-right:8px}\n"] }]
+                    ], template: "<a routerLink class=\"navigation-header\">\n  <img [src]=\"image\" width=\"24\" height=\"24\" alt=\"logo\" class=\"logo\"/> {{ title }}\n</a>\n\n@for (group of navigation; track group) {\n  <f-navigation-group [title]=\"group.text\">\n    @for (item of group.items; track item.link) {\n      <a f-navigation-item [href]=\"item.link\" [class.active]=\"item.link === value\">\n        <div class=\"text-ellipsis\">{{ item.text }}</div>\n        @if (item.badge) {\n          <span class=\"f-badge {{ item.badge.type }}\">{{ item.badge.text }}</span>\n        }\n      </a>\n    }\n  </f-navigation-group>\n}\n\n", styles: [":host{height:100%;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:0 var(--navigation-panel-padding);background-color:var(--navigation-panel-background);overflow:hidden;overflow-y:auto;position:fixed;width:var(--navigation-panel-width);top:0;left:calc(-1 * var(--navigation-panel-width));transition:transform .2s ease-in-out;z-index:var(--z-index-navigation);transform:none}@media(min-width:960px){:host{position:unset;display:flex;min-width:var(--navigation-panel-width);width:fit-content;transform:none!important}}@media(min-width:1440px){:host{min-width:calc((100% - (var(--layout-max-width) - 64px)) / 3 + var(--navigation-panel-width) - var(--navigation-panel-padding))}}:host.visible{transform:translate(var(--navigation-panel-width))}.navigation-header{display:flex;justify-content:flex-start;align-items:center;padding:20px 0;font-weight:600;color:var(--primary-text);height:var(--header-height);width:100%;max-width:240px;margin-left:auto;cursor:pointer}.navigation-header img{margin-right:8px}\n"] }]
         }], propDecorators: { _onDocumentClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
@@ -1134,10 +1242,10 @@ class GetPreviousNextPageNavigationRequest {
 class FooterNavigationButton {
     description;
     link;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: FooterNavigationButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: FooterNavigationButton, isStandalone: true, selector: "a[footer-navigation-button]", inputs: { description: "description", link: "link" }, ngImport: i0, template: "<span class=\"description\">{{ description }}</span>\n<span class=\"page-title\">{{ link.text }}</span>\n", styles: [":host{display:block;border:1px solid var(--divider-color);border-radius:2px;padding:12px 16px;flex:1;max-width:50%;min-width:260px;text-decoration:none!important;cursor:pointer;pointer-events:all}:host:hover{border-color:var(--dark-divider-color)}:host:active{border-color:var(--primary-1)}:host.next{margin-left:auto;text-align:right}:host .description{display:block;line-height:20px;font-size:12px;font-weight:500;color:var(--secondary-text);pointer-events:none}:host .page-title{display:block;line-height:20px;font-size:14px;font-weight:500;color:var(--primary-1);pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FooterNavigationButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: FooterNavigationButton, isStandalone: true, selector: "a[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: "20.1.8", ngImport: i0, type: FooterNavigationButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FooterNavigationButton, decorators: [{
             type: Component,
             args: [{ selector: 'a[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: [{
@@ -1196,14 +1304,14 @@ class MarkdownFooter {
     _click(event) {
         new HandleNavigationLinksHandler().handle(new HandleNavigationLinksRequest(event, this._window, this._router));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: MarkdownFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: MarkdownFooter, isStandalone: true, selector: "markdown-footer", host: { listeners: { "click": "_click($event)" } }, ngImport: i0, template: "@let eLink = editLink();\n@let pLink = previousLink();\n@let nLink = nextLink();\n\n@if (eLink) {\n  <a class=\"footer-edit-link\" [href]=\"eLink\">\n    <span class=\"edit-link-icon f-icon edit\"></span>\n    {{ navigation.editLink?.text || 'Edit this page on GitHub' }}\n  </a>\n}\n\n@if (pLink || nLink) {\n  <nav class=\"footer-navigation\">\n    @if (pLink) {\n      <a footer-navigation-button\n         [href]=\"pLink.link\"\n         [description]=\"navigation.previous\"\n         [link]=\"pLink\">\n      </a>\n    }\n    @if (nLink) {\n      <a footer-navigation-button class=\"next\"\n         [href]=\"nLink.link\"\n         [description]=\"navigation.next\"\n         [link]=\"nLink\">\n      </a>\n    }\n  </nav>\n}\n\n", styles: [":host{display:block;margin-top:64px}.footer-edit-link{display:flex;width:fit-content;align-items:center;border:0;line-height:32px;font-size:14px;font-weight:500;color:var(--primary-1);cursor:pointer;padding-bottom:18px}.footer-edit-link .edit-link-icon{margin-right:8px;width:14px;height:14px;color:inherit}.footer-edit-link:hover{color:var(--primary-2)}@media (min-width: 640px){.footer-edit-link{padding-bottom:14px}}.footer-navigation{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"], dependencies: [{ kind: "component", type: FooterNavigationButton, selector: "a[footer-navigation-button]", inputs: ["description", "link"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: MarkdownFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: MarkdownFooter, isStandalone: true, selector: "markdown-footer", host: { listeners: { "click": "_click($event)" } }, ngImport: i0, template: "@let eLink = editLink();\n@let pLink = previousLink();\n@let nLink = nextLink();\n\n@if (eLink) {\n  <a class=\"footer-edit-link\" [href]=\"eLink\">\n    <span class=\"edit-link-icon f-icon edit\"></span>\n    {{ navigation.editLink?.text || 'Edit this page on GitHub' }}\n  </a>\n}\n\n@if (pLink || nLink) {\n  <nav class=\"footer-navigation\">\n    @if (pLink) {\n      <a footer-navigation-button\n         [href]=\"pLink.link\"\n         [description]=\"navigation.previous\"\n         [link]=\"pLink\">\n      </a>\n    }\n    @if (nLink) {\n      <a footer-navigation-button class=\"next\"\n         [href]=\"nLink.link\"\n         [description]=\"navigation.next\"\n         [link]=\"nLink\">\n      </a>\n    }\n  </nav>\n}\n\n", styles: [":host{display:block;margin-top:64px}.footer-edit-link{display:flex;width:fit-content;align-items:center;border:0;line-height:32px;font-size:14px;font-weight:500;color:var(--primary-1);cursor:pointer;padding-bottom:18px}.footer-edit-link .edit-link-icon{margin-right:8px;width:14px;height:14px;color:inherit}.footer-edit-link:hover{color:var(--primary-2)}@media(min-width:640px){.footer-edit-link{padding-bottom:14px}}.footer-navigation{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"], dependencies: [{ kind: "component", type: FooterNavigationButton, selector: "a[footer-navigation-button]", inputs: ["description", "link"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: MarkdownFooter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: MarkdownFooter, decorators: [{
             type: Component,
             args: [{ selector: 'markdown-footer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         FooterNavigationButton,
-                    ], standalone: true, template: "@let eLink = editLink();\n@let pLink = previousLink();\n@let nLink = nextLink();\n\n@if (eLink) {\n  <a class=\"footer-edit-link\" [href]=\"eLink\">\n    <span class=\"edit-link-icon f-icon edit\"></span>\n    {{ navigation.editLink?.text || 'Edit this page on GitHub' }}\n  </a>\n}\n\n@if (pLink || nLink) {\n  <nav class=\"footer-navigation\">\n    @if (pLink) {\n      <a footer-navigation-button\n         [href]=\"pLink.link\"\n         [description]=\"navigation.previous\"\n         [link]=\"pLink\">\n      </a>\n    }\n    @if (nLink) {\n      <a footer-navigation-button class=\"next\"\n         [href]=\"nLink.link\"\n         [description]=\"navigation.next\"\n         [link]=\"nLink\">\n      </a>\n    }\n  </nav>\n}\n\n", styles: [":host{display:block;margin-top:64px}.footer-edit-link{display:flex;width:fit-content;align-items:center;border:0;line-height:32px;font-size:14px;font-weight:500;color:var(--primary-1);cursor:pointer;padding-bottom:18px}.footer-edit-link .edit-link-icon{margin-right:8px;width:14px;height:14px;color:inherit}.footer-edit-link:hover{color:var(--primary-2)}@media (min-width: 640px){.footer-edit-link{padding-bottom:14px}}.footer-navigation{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"] }]
+                    ], standalone: true, template: "@let eLink = editLink();\n@let pLink = previousLink();\n@let nLink = nextLink();\n\n@if (eLink) {\n  <a class=\"footer-edit-link\" [href]=\"eLink\">\n    <span class=\"edit-link-icon f-icon edit\"></span>\n    {{ navigation.editLink?.text || 'Edit this page on GitHub' }}\n  </a>\n}\n\n@if (pLink || nLink) {\n  <nav class=\"footer-navigation\">\n    @if (pLink) {\n      <a footer-navigation-button\n         [href]=\"pLink.link\"\n         [description]=\"navigation.previous\"\n         [link]=\"pLink\">\n      </a>\n    }\n    @if (nLink) {\n      <a footer-navigation-button class=\"next\"\n         [href]=\"nLink.link\"\n         [description]=\"navigation.next\"\n         [link]=\"nLink\">\n      </a>\n    }\n  </nav>\n}\n\n", styles: [":host{display:block;margin-top:64px}.footer-edit-link{display:flex;width:fit-content;align-items:center;border:0;line-height:32px;font-size:14px;font-weight:500;color:var(--primary-1);cursor:pointer;padding-bottom:18px}.footer-edit-link .edit-link-icon{margin-right:8px;width:14px;height:14px;color:inherit}.footer-edit-link:hover{color:var(--primary-2)}@media(min-width:640px){.footer-edit-link{padding-bottom:14px}}.footer-navigation{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"] }]
         }], propDecorators: { _click: [{
                 type: HostListener,
                 args: ['click', ['$event']]
@@ -1230,12 +1338,21 @@ var EParsedContainerType;
 
 const F_PREVIEW_NAVIGATION_PROVIDER = new InjectionToken('F_PREVIEW_NAVIGATION_PROVIDER');
 
+const DEFAULT_MARKDOWN_PAGE_LAYOUT_OPTIONS = {
+    hideTableOfContent: false,
+    expandContentWithoutTableOfContent: false,
+};
+
 class MarkdownService {
     _markdown = new MarkdownIt({ html: true, linkify: true });
     _httpClient = inject(HttpClient);
     _domSanitizer = inject(DomSanitizer);
     _router = inject(Router);
     _provider = inject(F_PREVIEW_NAVIGATION_PROVIDER, { optional: true });
+    _pageLayout = signal({ ...DEFAULT_MARKDOWN_PAGE_LAYOUT_OPTIONS }, ...(ngDevMode ? [{ debugName: "_pageLayout" }] : []));
+    _pageSeo = signal(null, ...(ngDevMode ? [{ debugName: "_pageSeo" }] : []));
+    pageLayout = this._pageLayout.asReadonly();
+    pageSeo = this._pageSeo.asReadonly();
     constructor() {
         this._markdown
             .use((x) => new ParseSingleCodeItem().render(x))
@@ -1243,7 +1360,6 @@ class MarkdownService {
             .use(...new ParseAlerts().render(EMarkdownContainerType.ALERT_INFO, this._markdown))
             .use(...new ParseAlerts().render(EMarkdownContainerType.ALERT_WARNING, this._markdown))
             .use(...new ParseAlerts().render(EMarkdownContainerType.ALERT_DANGER, this._markdown))
-            .use(...new ParseAlerts().render(EMarkdownContainerType.ALERT_DANGER, this._markdown))
             .use(...new ParseAlerts().render(EMarkdownContainerType.ALERT_SUCCESS, this._markdown))
             .use(...new ParseGroupedCodeItems().render())
             .use(...new ParsePreviewGroup(this._provider?.getNavigation() || []).render())
@@ -1251,10 +1367,12 @@ class MarkdownService {
             .use(...new ParseAngularExampleWithCodeLinks().render());
     }
     parseUrl(src) {
-        return this._httpClient.get(src, { responseType: 'text' }).pipe(take(1), catchError(() => of(''))).pipe(switchMap((text) => of(this._markdown.render(text))), switchMap((x) => of(this._cleanupEmptyParagraphs(x))), switchMap((x) => of(this._cleanupWasteParagraphFromExampleView(x))), switchMap((x) => of(this._cleanupWasteParagraphFromPreviewGroup(x))), switchMap((x) => of(this._normalizeLinks(x))), switchMap((x) => of(this._domSanitizer.bypassSecurityTrustHtml(x))));
+        this._resetPageContext();
+        return this._httpClient.get(src, { responseType: 'text' }).pipe(take(1), catchError(() => of(''))).pipe(switchMap((text) => of(this._renderMarkdownWithPageContext(text))), switchMap((x) => of(this._cleanupEmptyParagraphs(x))), switchMap((x) => of(this._cleanupWasteParagraphFromExampleView(x))), switchMap((x) => of(this._cleanupWasteParagraphFromPreviewGroup(x))), switchMap((x) => of(this._normalizeLinks(x))), switchMap((x) => of(this._domSanitizer.bypassSecurityTrustHtml(x))));
     }
     parseText(value) {
-        return of(this._markdown.render(value)).pipe(switchMap((x) => of(this._cleanupEmptyParagraphs(x))), switchMap((x) => of(this._cleanupWasteParagraphFromExampleView(x))), switchMap((x) => of(this._cleanupWasteParagraphFromPreviewGroup(x))), switchMap((x) => of(this._normalizeLinks(x))), switchMap((x) => of(this._domSanitizer.bypassSecurityTrustHtml(x))));
+        this._resetPageContext();
+        return of(this._renderMarkdownWithPageContext(value)).pipe(switchMap((x) => of(this._cleanupEmptyParagraphs(x))), switchMap((x) => of(this._cleanupWasteParagraphFromExampleView(x))), switchMap((x) => of(this._cleanupWasteParagraphFromPreviewGroup(x))), switchMap((x) => of(this._normalizeLinks(x))), switchMap((x) => of(this._domSanitizer.bypassSecurityTrustHtml(x))));
     }
     _normalizeLinks(html) {
         const currentPath = this._router.url;
@@ -1282,10 +1400,204 @@ class MarkdownService {
     _cleanupWasteParagraphFromPreviewGroup(html) {
         return html.replace(/<p>(\[[^\]]+\](\s*\[[^\]]+\])*)<\/p>/g, '');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: MarkdownService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: MarkdownService });
+    _renderMarkdownWithPageContext(markdown) {
+        const result = this._parseFrontMatter(markdown);
+        this._applyPageContext(result.data);
+        return this._markdown.render(result.markdown);
+    }
+    _parseFrontMatter(markdown) {
+        const source = (markdown || '').replace(/^\uFEFF/, '');
+        const match = source.match(/^---\r?\n([\s\S]*?)\r?\n---(?:\r?\n|$)/);
+        const defaults = this._getDefaultFrontMatterData();
+        if (!match || !match[1].includes(':')) {
+            return {
+                markdown: source,
+                data: defaults,
+            };
+        }
+        const rawFrontMatter = match[1];
+        const parsedData = this._parseFrontMatterData(rawFrontMatter);
+        return {
+            markdown: source.slice(match[0].length),
+            data: parsedData,
+        };
+    }
+    _parseFrontMatterData(rawFrontMatter) {
+        const layout = { ...DEFAULT_MARKDOWN_PAGE_LAYOUT_OPTIONS };
+        const seo = {};
+        rawFrontMatter
+            .split(/\r?\n/)
+            .forEach((line) => this._parseFrontMatterLine(line, layout, seo));
+        return {
+            layout,
+            seo: Object.keys(seo).length ? seo : null,
+        };
+    }
+    _parseFrontMatterLine(line, layout, seo) {
+        const normalizedLine = line.trim();
+        if (!normalizedLine || normalizedLine.startsWith('#')) {
+            return;
+        }
+        const separatorIndex = normalizedLine.indexOf(':');
+        if (separatorIndex < 0) {
+            return;
+        }
+        const key = normalizedLine.slice(0, separatorIndex).trim().toLowerCase();
+        const value = this._normalizeFrontMatterValue(normalizedLine.slice(separatorIndex + 1));
+        if (!key || !value) {
+            return;
+        }
+        const boolValue = this._parseBoolean(value);
+        this._applyLayoutKey(key, boolValue, layout);
+        this._applySeoKey(key, value, boolValue, seo);
+    }
+    _normalizeFrontMatterValue(value) {
+        const trimmed = value.trim();
+        if ((trimmed.startsWith('"') && trimmed.endsWith('"')) || (trimmed.startsWith('\'') && trimmed.endsWith('\''))) {
+            return trimmed.slice(1, -1).trim();
+        }
+        return trimmed;
+    }
+    _parseBoolean(value) {
+        const normalized = value.toLowerCase();
+        if (['true', '1', 'yes', 'on'].includes(normalized)) {
+            return true;
+        }
+        if (['false', '0', 'no', 'off'].includes(normalized)) {
+            return false;
+        }
+        return null;
+    }
+    _applyLayoutKey(key, boolValue, layout) {
+        if (boolValue === null) {
+            return;
+        }
+        switch (key) {
+            case 'toc':
+            case 'showtoc':
+            case 'tableofcontent':
+            case 'table_of_content':
+                layout.hideTableOfContent = !boolValue;
+                return;
+            case 'hidetoc':
+            case 'hide_toc':
+                layout.hideTableOfContent = boolValue;
+                return;
+            case 'widecontent':
+            case 'expandcontent':
+            case 'expandwithouttoc':
+            case 'expand_no_toc':
+            case 'widetableofcontentgap':
+                layout.expandContentWithoutTableOfContent = boolValue;
+                return;
+        }
+    }
+    _applySeoKey(key, value, boolValue, seo) {
+        switch (key) {
+            case 'title':
+            case 'seotitle':
+                seo.title = value;
+                return;
+            case 'description':
+            case 'seodescription':
+                seo.description = value;
+                return;
+            case 'canonical':
+            case 'seocanonical':
+                seo.canonical = value;
+                return;
+            case 'keywords':
+            case 'seokeywords':
+                seo.keywords = value;
+                return;
+            case 'robots':
+            case 'seorobots':
+                seo.robots = value;
+                return;
+            case 'image':
+            case 'seoimage':
+                seo.image = value;
+                return;
+            case 'imagetype':
+            case 'image_type':
+                seo.image_type = value;
+                return;
+            case 'imagewidth':
+            case 'image_width':
+                seo.image_width = this._parseNumberOrDefault(value, seo.image_width);
+                return;
+            case 'imageheight':
+            case 'image_height':
+                seo.image_height = this._parseNumberOrDefault(value, seo.image_height);
+                return;
+            case 'ogtype':
+            case 'og_type':
+                seo.og_type = value;
+                return;
+            case 'ogtitle':
+            case 'og_title':
+                seo.og_title = value;
+                return;
+            case 'ogdescription':
+            case 'og_description':
+                seo.og_description = value;
+                return;
+            case 'ogimage':
+            case 'og_image':
+                seo.og_image = value;
+                return;
+            case 'twittercard':
+            case 'twitter_card':
+                seo.twitter_card = value;
+                return;
+            case 'twittertitle':
+            case 'twitter_title':
+                seo.twitter_title = value;
+                return;
+            case 'twitterdescription':
+            case 'twitter_description':
+                seo.twitter_description = value;
+                return;
+            case 'twitterimage':
+            case 'twitter_image':
+                seo.twitter_image = value;
+                return;
+            case 'noindex':
+                if (boolValue !== null) {
+                    seo.noindex = boolValue;
+                }
+                return;
+            case 'nofollow':
+                if (boolValue !== null) {
+                    seo.nofollow = boolValue;
+                }
+                return;
+        }
+    }
+    _parseNumberOrDefault(value, fallback) {
+        const numericValue = Number(value);
+        if (!Number.isFinite(numericValue) || numericValue <= 0) {
+            return fallback;
+        }
+        return numericValue;
+    }
+    _applyPageContext(data) {
+        this._pageLayout.set({ ...data.layout });
+        this._pageSeo.set(data.seo ? { ...data.seo } : null);
+    }
+    _resetPageContext() {
+        this._applyPageContext(this._getDefaultFrontMatterData());
+    }
+    _getDefaultFrontMatterData() {
+        return {
+            layout: { ...DEFAULT_MARKDOWN_PAGE_LAYOUT_OPTIONS },
+            seo: null,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: MarkdownService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: MarkdownService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: MarkdownService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: MarkdownService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -1315,8 +1627,20 @@ function isClosingToken(token) {
     return token.nesting === -1;
 }
 function parseFileLinkLine(line) {
-    const match = line.match(/\[(.+?)\] <<< (.+)/);
-    return match ? { fileName: match[1], url: match[2] } : null;
+    const match = line.match(/\[(.+?)\]\s*<<<\s*(.+)/);
+    if (!match)
+        return null;
+    const fileName = match[1].trim();
+    let url = match[2].trim();
+    const markdownLink = url.match(/^\[[^\]]+]\((.+)\)$/);
+    if (markdownLink) {
+        url = markdownLink[1].trim();
+    }
+    const angleWrapped = url.match(/^<(.+)>$/);
+    if (angleWrapped) {
+        url = angleWrapped[1].trim();
+    }
+    return url ? { fileName, url } : null;
 }
 function parseSingleBracketText(line) {
     const match = line.match(/\[(.+?)\]/);
@@ -1382,7 +1706,7 @@ class ParseGroupedCodeItems {
         return data.match(/\[(.*)\]/)?.[1] || this._getCodeLanguage(data) || 'txt';
     }
     _getCodeLanguage(data) {
-        const match = data.trim().match(/^([a-zA-Z0-9_-]+)\s*\[.*\]$/);
+        const match = data.trim().match(/^([a-zA-Z0-9_-]+)/);
         return match ? match[1] : '';
     }
 }
@@ -1425,14 +1749,14 @@ class ParseAngularExampleWithCodeLinks {
     }
     _collectData(tokens, index) {
         const result = [];
-        const component = this._parseNgComponent(tokens[index]);
-        const height = component?.height || 'auto';
-        if (component) {
+        const source = this._parseNgComponent(tokens[index]);
+        const height = source?.height || 'auto';
+        if (source) {
             result.push({
                 tab: 'Example',
-                value: component.tag,
+                value: source.value,
                 type: EParsedContainerType.EXAMPLE,
-                height: component.height || 'auto',
+                height,
             });
         }
         const content = getContent(tokens, index, EMarkdownContainerType.EXAMPLE_GROUP);
@@ -1447,16 +1771,40 @@ class ParseAngularExampleWithCodeLinks {
         return result;
     }
     _parseNgComponent(token) {
-        const cleanedInput = token.info.replace(/ng-component\s*/, '');
-        const tagMatch = cleanedInput.match(/<([a-zA-Z0-9-]+)>.*<\/\1>/);
-        const heightMatch = cleanedInput.match(/\[height\]="(\d+)"/);
-        if (!tagMatch)
+        const cleanedInput = token.info.replace(/^ng-component\s*/, '').trim();
+        const height = this._parseHeight(cleanedInput);
+        const componentTag = cleanedInput.match(/<([a-zA-Z][a-zA-Z0-9-]*)(\s[^>]*)?>\s*<\/\1>/s)?.[0]?.trim();
+        if (componentTag) {
+            return {
+                value: componentTag,
+                height,
+            };
+        }
+        const explicitUrl = cleanedInput.match(/\[url\]=["']([^"']+)["']/)?.[1]?.trim();
+        if (explicitUrl) {
+            return {
+                value: explicitUrl,
+                height,
+            };
+        }
+        const implicitUrl = cleanedInput
+            .replace(/\[height\]=["'][^"']*["']/g, '')
+            .trim()
+            .replace(/^["']|["']$/g, '');
+        if (!implicitUrl || implicitUrl.includes('<'))
             return null;
         return {
-            tag: tagMatch[0],
-            height: heightMatch?.[1],
+            value: implicitUrl,
+            height,
         };
     }
+    _parseHeight(input) {
+        const rawHeight = input.match(/\[height\]=["']([^"']+)["']/)?.[1]?.trim();
+        if (!rawHeight)
+            return undefined;
+        const numericHeight = Number(rawHeight);
+        return Number.isFinite(numericHeight) ? numericHeight : rawHeight;
+    }
 }
 
 class ParsePreviewGroup {
@@ -1534,10 +1882,10 @@ class Mediatr {
         const handler = this._injector.get(handlerType);
         return handler.handle(request);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: Mediatr, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: Mediatr });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: Mediatr, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: Mediatr });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: Mediatr, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: Mediatr, decorators: [{
             type: Injectable
         }] });
 
@@ -1548,19 +1896,54 @@ function MExecution(requestType) {
 }
 
 function coerceComponentHeight$1(value) {
-    if (value === undefined) {
+    if (value === undefined || value === null) {
+        return undefined;
+    }
+    if (typeof value === 'number') {
+        return Number.isFinite(value) && value > 0 ? `${value}px` : undefined;
+    }
+    const normalizedValue = value.trim();
+    if (!normalizedValue)
         return undefined;
+    if (normalizedValue === 'auto')
+        return 'auto';
+    const numericValue = Number(normalizedValue);
+    if (Number.isFinite(numericValue) && numericValue > 0) {
+        return `${numericValue}px`;
     }
-    value = Number(value);
-    if (value) {
-        return value + 'px';
+    if (/^-?\d+(\.\d+)?(px|%|vh|vw|vmin|vmax|rem|em|ch|ex|cm|mm|in|pt|pc)$/i.test(normalizedValue)) {
+        return normalizedValue;
+    }
+    if (/^calc\(.+\)$/i.test(normalizedValue)) {
+        return normalizedValue;
     }
     return undefined;
 }
 
+const URL_PROTOCOL_REGEX = /^(https?:\/\/|\/\/|\/(?!\/)|\.\.?\/)/i;
+const BARE_DOMAIN_REGEX = /^(localhost(?::\d+)?|([a-z0-9-]+\.)+[a-z]{2,})(\/.*)?$/i;
+const UNSAFE_PROTOCOL_REGEX = /^(javascript|data|vbscript):/i;
+function parseIframeUrl(value) {
+    if (!value)
+        return null;
+    const normalizedValue = value.trim();
+    const urlFromAttr = normalizedValue.match(/\[url\]=["']([^"']+)["']/)?.[1]?.trim();
+    const candidate = (urlFromAttr || normalizedValue).replace(/^["']|["']$/g, '').trim();
+    if (!candidate || candidate.includes('<') || UNSAFE_PROTOCOL_REGEX.test(candidate)) {
+        return null;
+    }
+    if (URL_PROTOCOL_REGEX.test(candidate)) {
+        return candidate;
+    }
+    if (BARE_DOMAIN_REGEX.test(candidate)) {
+        return `https://${candidate}`;
+    }
+    return null;
+}
+
 function parseComponentTag(html) {
-    const regex = /^<([a-zA-Z0-9-]+)(\s+[^>]+)?><\/\1>$/;
-    const match = regex.exec(html);
+    const regex = /^<([a-zA-Z][a-zA-Z0-9-]*)(\s+[^>]+)?>\s*<\/\1>$/s;
+    const match = regex.exec(html.trim());
     return match ? match[1] : null;
 }
 
@@ -1588,12 +1971,13 @@ let RenderDynamicComponent = class RenderDynamicComponent {
     }
     _renderComponent({ selector, component }, viewContainerRef, element) {
         component.then(extracted => {
-            const componentRef = viewContainerRef.createComponent(extracted);
-            this._dynamicStore.addComponent(componentRef, element);
-            element?.replaceWith(this._extractComponentRoot(componentRef));
             if (!extracted) {
                 this._logComponentResolutionError(selector);
+                return;
             }
+            const componentRef = viewContainerRef.createComponent(extracted);
+            this._dynamicStore.addComponent(componentRef, element);
+            element?.replaceWith(this._extractComponentRoot(componentRef));
         }).catch(error => this._logComponentLoadingError(selector, error));
     }
     _extractComponentRoot(componentRef) {
@@ -1609,13 +1993,13 @@ let RenderDynamicComponent = class RenderDynamicComponent {
     _logError(tag, error) {
         console.error(`Error inserting component for <${tag}>:`, error);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: RenderDynamicComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: RenderDynamicComponent });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: RenderDynamicComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: RenderDynamicComponent });
 };
 RenderDynamicComponent = __decorate([
     MExecution(RenderDynamicComponentRequest)
 ], RenderDynamicComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: RenderDynamicComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: RenderDynamicComponent, decorators: [{
             type: Injectable
         }] });
 
@@ -1635,21 +2019,26 @@ let RenderExternalComponent = class RenderExternalComponent {
     _mediatr = inject(Mediatr);
     _componentsMap = inject(EXTERNAL_COMPONENT_PROVIDER, { optional: true }) ?? [];
     handle({ selector, viewContainerRef }) {
+        if (!selector) {
+            console.warn('Empty selector passed to RenderExternalComponentRequest.');
+            return;
+        }
         const item = this._componentsMap.find((x) => {
             return x.selector === selector;
         });
         if (!item) {
-            throw new Error(`Component for tag "${selector}" could not be found in external components map.`);
+            console.error(`Component for tag "${selector}" could not be found in external components map.`);
+            return;
         }
         this._mediatr.execute(new RenderDynamicComponentRequest(item, viewContainerRef));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: RenderExternalComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: RenderExternalComponent });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: RenderExternalComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: RenderExternalComponent });
 };
 RenderExternalComponent = __decorate([
     MExecution(RenderExternalComponentRequest)
 ], RenderExternalComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: RenderExternalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: RenderExternalComponent, decorators: [{
             type: Injectable
         }] });
 
@@ -1695,45 +2084,85 @@ let RenderInternalComponents = class RenderInternalComponents {
     _queryElements(hostElement, selector) {
         return Array.from(hostElement.querySelectorAll(selector));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: RenderInternalComponents, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: RenderInternalComponents });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: RenderInternalComponents, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: RenderInternalComponents });
 };
 RenderInternalComponents = __decorate([
     MExecution(RenderInternalComponentsRequest)
 ], RenderInternalComponents);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: RenderInternalComponents, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: RenderInternalComponents, decorators: [{
             type: Injectable
         }] });
 
 class ExternalComponent {
-    data = input.required(...(ngDevMode ? [{ debugName: "data", transform: (x) => {
-                return {
-                    height: coerceComponentHeight$1(x.height),
-                    value: parseComponentTag(x.value) || '',
-                };
-            } }] : [{
-            transform: (x) => {
-                return {
-                    height: coerceComponentHeight$1(x.height),
-                    value: parseComponentTag(x.value) || '',
-                };
-            },
-        }]));
+    data = input.required({ ...(ngDevMode ? { debugName: "data" } : {}), transform: (x) => {
+            const value = x.value?.trim() || '';
+            return {
+                height: coerceComponentHeight$1(x.height),
+                selector: parseComponentTag(value) || undefined,
+                iframeUrl: parseIframeUrl(value) || undefined,
+            };
+        } });
+    iframeUrl = computed(() => this.data().iframeUrl, ...(ngDevMode ? [{ debugName: "iframeUrl" }] : []));
+    hasContent = computed(() => !!this.data().selector || !!this.data().iframeUrl, ...(ngDevMode ? [{ debugName: "hasContent" }] : []));
+    canToggleFullscreen = computed(() => {
+        return this._isBrowser
+            && this.hasContent()
+            && typeof this._hostElement.nativeElement.requestFullscreen === 'function'
+            && typeof this._document.exitFullscreen === 'function';
+    }, ...(ngDevMode ? [{ debugName: "canToggleFullscreen" }] : []));
+    fullscreenLabel = computed(() => this.isFullscreen() ? 'Exit full screen' : 'Full screen', ...(ngDevMode ? [{ debugName: "fullscreenLabel" }] : []));
+    isFullscreen = signal(false, ...(ngDevMode ? [{ debugName: "isFullscreen" }] : []));
+    _document = inject(DOCUMENT);
+    _hostElement = inject(ElementRef);
+    _isBrowser = inject(IS_BROWSER_PLATFORM);
     _mediatr = inject(Mediatr);
     _viewContainerRef = viewChild.required('container', { read: ViewContainerRef });
     ngOnInit() {
-        this._mediatr.execute(new RenderExternalComponentRequest(this.data().value, this._viewContainerRef()));
+        const selector = this.data().selector;
+        if (selector) {
+            this._mediatr.execute(new RenderExternalComponentRequest(selector, this._viewContainerRef()));
+            return;
+        }
+        if (!this.data().iframeUrl) {
+            console.error('Unsupported example source. Provide either component tag or [url].');
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: ExternalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.8", type: ExternalComponent, isStandalone: true, selector: "external-component", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style.height": "data().height" }, classAttribute: "f-example-view" }, viewQueries: [{ propertyName: "_viewContainerRef", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<ng-container #container />\n\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    async toggleFullscreen() {
+        if (!this.canToggleFullscreen())
+            return;
+        try {
+            if (this._isCurrentElementInFullscreen()) {
+                await this._document.exitFullscreen?.();
+            }
+            else {
+                await this._hostElement.nativeElement.requestFullscreen?.();
+            }
+        }
+        catch (error) {
+            console.error('Unable to toggle full-screen mode for example preview:', error);
+        }
+    }
+    onFullscreenChange() {
+        this.isFullscreen.set(this._isCurrentElementInFullscreen());
+    }
+    _isCurrentElementInFullscreen() {
+        return this._document.fullscreenElement === this._hostElement.nativeElement;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ExternalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: ExternalComponent, isStandalone: true, selector: "external-component", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "document:fullscreenchange": "onFullscreenChange()" }, properties: { "style.height": "data().height", "class.f-example-view-fullscreen": "isFullscreen()" }, classAttribute: "f-example-view" }, viewQueries: [{ propertyName: "_viewContainerRef", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@if (canToggleFullscreen()) {\n  <button class=\"f-fullscreen-button\"\n          type=\"button\"\n          [class.exit]=\"isFullscreen()\"\n          [attr.aria-label]=\"fullscreenLabel()\"\n          [attr.title]=\"fullscreenLabel()\"\n          (click)=\"toggleFullscreen()\"></button>\n}\n\n@if (iframeUrl()) {\n  <iframe class=\"f-example-iframe\"\n          [src]=\"iframeUrl()!\"\n          loading=\"lazy\"\n          referrerpolicy=\"no-referrer\"\n          allow=\"fullscreen\"\n          allowfullscreen></iframe>\n}\n\n<ng-container #container />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: ExternalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ExternalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'external-component', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'f-example-view',
                         '[style.height]': 'data().height',
-                    }, template: "<ng-container #container />\n\n" }]
-        }] });
+                        '[class.f-example-view-fullscreen]': 'isFullscreen()',
+                    }, template: "@if (canToggleFullscreen()) {\n  <button class=\"f-fullscreen-button\"\n          type=\"button\"\n          [class.exit]=\"isFullscreen()\"\n          [attr.aria-label]=\"fullscreenLabel()\"\n          [attr.title]=\"fullscreenLabel()\"\n          (click)=\"toggleFullscreen()\"></button>\n}\n\n@if (iframeUrl()) {\n  <iframe class=\"f-example-iframe\"\n          [src]=\"iframeUrl()!\"\n          loading=\"lazy\"\n          referrerpolicy=\"no-referrer\"\n          allow=\"fullscreen\"\n          allowfullscreen></iframe>\n}\n\n<ng-container #container />\n" }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], _viewContainerRef: [{ type: i0.ViewChild, args: ['container', { ...{ read: ViewContainerRef }, isSignal: true }] }], onFullscreenChange: [{
+                type: HostListener,
+                args: ['document:fullscreenchange']
+            }] } });
 
 class Highlight {
     _highlightService = inject(HighlightService);
@@ -1747,10 +2176,10 @@ class Highlight {
                 .pipe(take(1), takeUntilDestroyed(this._destroyRef)).subscribe();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: Highlight, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.8", type: Highlight, isStandalone: true, selector: "highlight", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: Highlight, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.4", type: Highlight, isStandalone: true, selector: "highlight", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: Highlight, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: Highlight, decorators: [{
             type: Component,
             args: [{
                     selector: 'highlight',
@@ -1758,7 +2187,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }] });
+        }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: true }] }] } });
 
 class CodeView {
     _httpClient = inject(HttpClient);
@@ -1803,10 +2232,10 @@ class CodeView {
     _copyContentToClipboard(content) {
         copyToClipboard(content).pipe(take(1), takeUntilDestroyed(this._destroyRef)).subscribe(() => this._popoverService.show('Copied!'));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: CodeView, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: CodeView, isStandalone: true, selector: "code-view", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.height": "height()" }, classAttribute: "f-code-view" }, ngImport: i0, template: "<span class=\"f-code-language\">{{ visibleLanguage() }}</span>\n<button class=\"f-copy-button\" (click)=\"onCopyClick()\"></button>\n@if (content()) {\n  <highlight [content]=\"content()\" [language]=\"syntaxLanguage()\"/>\n}\n\n", dependencies: [{ kind: "component", type: Highlight, selector: "highlight", inputs: ["content", "language"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CodeView, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: CodeView, isStandalone: true, selector: "code-view", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.height": "height()" }, classAttribute: "f-code-view" }, ngImport: i0, template: "<span class=\"f-code-language\">{{ visibleLanguage() }}</span>\n<button class=\"f-copy-button\" (click)=\"onCopyClick()\"></button>\n@if (content()) {\n  <highlight [content]=\"content()\" [language]=\"syntaxLanguage()\"/>\n}\n\n", dependencies: [{ kind: "component", type: Highlight, selector: "highlight", inputs: ["content", "language"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: CodeView, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CodeView, decorators: [{
             type: Component,
             args: [{ selector: 'code-view', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'f-code-view',
@@ -1814,19 +2243,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
                     }, imports: [
                         Highlight,
                     ], template: "<span class=\"f-code-language\">{{ visibleLanguage() }}</span>\n<button class=\"f-copy-button\" (click)=\"onCopyClick()\"></button>\n@if (content()) {\n  <highlight [content]=\"content()\" [language]=\"syntaxLanguage()\"/>\n}\n\n" }]
-        }] });
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
 function coerceComponentHeight(value) {
-    if (value === undefined) {
+    if (value === undefined || value === null) {
+        return undefined;
+    }
+    if (typeof value === 'number') {
+        return Number.isFinite(value) && value > 0 ? `${value}px` : undefined;
+    }
+    const normalizedValue = value.trim();
+    if (!normalizedValue)
         return undefined;
+    if (normalizedValue === 'auto')
+        return 'auto';
+    const numericValue = Number(normalizedValue);
+    if (Number.isFinite(numericValue) && numericValue > 0) {
+        return `${numericValue}px`;
+    }
+    if (/^-?\d+(\.\d+)?(px|%|vh|vw|vmin|vmax|rem|em|ch|ex|cm|mm|in|pt|pc)$/i.test(normalizedValue)) {
+        return normalizedValue;
     }
-    value = Number(value);
-    if (value) {
-        return value + 'px';
+    if (/^calc\(.+\)$/i.test(normalizedValue)) {
+        return normalizedValue;
     }
     return undefined;
 }
 function parseLanguageFromFileExtension(url) {
-    const match = url.match(/\.([0-9a-z]+)(?:[\?#]|$)/i);
+    const match = url.match(/\.([0-9a-z]+)(?:[?#]|$)/i);
     if (match) {
         let extension = match[1];
         if (extension === 'css') {
@@ -1855,13 +2298,10 @@ function parseSyntaxLanguage(language) {
         default:
             result = extractLanguage(language);
     }
-    if (!AVAILABLE_LANGUAGES.includes(result)) {
-        result = 'text';
-    }
-    return result;
+    return resolveHighlightLanguage(result);
 }
 function extractLanguage(language) {
-    const match = language.match(/^([^\s\[]+)/);
+    const match = language.match(/^([^\s[]+)/);
     return match ? match[1].toLowerCase() : language;
 }
 
@@ -1872,15 +2312,16 @@ class MarkCodeFocusedBlocksPostProcessor {
     }
     handle(element) {
         const html = element.innerHTML;
-        if (!FOCUS_REGEX.test(html)) {
+        if (!FOCUS_TEST_REGEX.test(html)) {
             return of(element);
         }
-        element.innerHTML = html.replace(FOCUS_REGEX, (_match, content) => {
+        element.innerHTML = html.replace(FOCUS_REPLACE_REGEX, (_match, content) => {
             return `<focus class="focused"><div class="inline-focus">${content}</div></focus>`;
         });
         const focused = element.querySelector('.focused');
-        if (focused) {
-            this._applyOpacity(element.parentElement);
+        const hostElement = element.parentElement;
+        if (focused && hostElement) {
+            this._applyOpacity(hostElement);
         }
         return of(element);
     }
@@ -1906,10 +2347,13 @@ class MarkCodeFocusedBlocksPostProcessor {
         return isRgb ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${opacity * alpha})`;
     }
     _getRgbValues(color) {
-        return color.match(/\d+/g);
+        const matches = color.match(/-?\d*\.?\d+/g) || [];
+        const [r = '0', g = '0', b = '0', a = '1'] = matches;
+        return [r, g, b, a];
     }
 }
-const FOCUS_REGEX = /ƒƒƒ([\s\S]*?)¢¢¢/g;
+const FOCUS_TEST_REGEX = /ƒƒƒ([\s\S]*?)¢¢¢/;
+const FOCUS_REPLACE_REGEX = /ƒƒƒ([\s\S]*?)¢¢¢/g;
 
 const UNIVERSAL_THEME = {
     name: 'universal',
@@ -2192,6 +2636,32 @@ const UNIVERSAL_THEME = {
     ],
 };
 
+const LANGUAGE_ALIASES = {
+    js: 'javascript',
+    javascript: 'javascript',
+    ts: 'typescript',
+    typescript: 'typescript',
+    md: 'markdown',
+    sh: 'shell',
+    zsh: 'shell',
+    shell: 'shell',
+    shellscript: 'shell',
+    txt: 'text',
+    plain: 'text',
+    plaintext: 'text',
+};
+const LANGUAGE_LOADERS = new Map([
+    ['javascript', () => import('@shikijs/langs/javascript')],
+    ['typescript', () => import('@shikijs/langs/typescript')],
+    ['angular-html', () => import('@shikijs/langs/angular-html')],
+    ['angular-ts', () => import('@shikijs/langs/angular-ts')],
+    ['shell', () => import('@shikijs/langs/shell')],
+    ['html', () => import('@shikijs/langs/html')],
+    ['bash', () => import('@shikijs/langs/bash')],
+    ['css', () => import('@shikijs/langs/css')],
+    ['scss', () => import('@shikijs/langs/scss')],
+    ['markdown', () => import('@shikijs/langs/markdown')],
+]);
 const AVAILABLE_LANGUAGES = [
     'javascript',
     'typescript',
@@ -2205,6 +2675,32 @@ const AVAILABLE_LANGUAGES = [
     'markdown',
     'text',
 ];
+function resolveHighlightLanguage(lang) {
+    const normalized = (lang || '').trim().toLowerCase();
+    if (!normalized) {
+        return 'text';
+    }
+    const alias = LANGUAGE_ALIASES[normalized];
+    if (alias) {
+        return alias;
+    }
+    if (isAvailableLanguage(normalized)) {
+        return normalized;
+    }
+    return 'text';
+}
+function getLanguageLoader(lang) {
+    if (isPlainTextLanguage(lang)) {
+        return null;
+    }
+    return LANGUAGE_LOADERS.get(lang) || null;
+}
+function isAvailableLanguage(lang) {
+    return AVAILABLE_LANGUAGES.includes(lang);
+}
+function isPlainTextLanguage(lang) {
+    return lang === 'text' || lang === 'txt' || lang === 'plain' || lang === 'plaintext';
+}
 
 class HighlightService {
     /**
@@ -2212,14 +2708,16 @@ class HighlightService {
      * It supports syntax highlighting and post-processing for focused blocks.
      */
     _isBrowser = inject(IS_BROWSER_PLATFORM);
-    _window = inject(WINDOW);
-    _highlighter$ = defer(() => from(createHighlighter({ themes: [UNIVERSAL_THEME], langs: AVAILABLE_LANGUAGES }))).pipe(shareReplay(1));
+    _window = inject(WINDOW, { optional: true });
+    _languageLoadingTasks = new Map();
+    _highlighter$ = defer(() => from(this._createHighlighter())).pipe(shareReplay(1));
     highlight(element, lang, content) {
         if (!this._isBrowser) {
             console.warn('[HighlightService] Skipping highlight on server.');
             return of(element);
         }
-        return this._highlightCodeBlock(element, lang, content).pipe(switchMap((x) => this._postProcess(x)), catchError((err) => {
+        const resolvedLanguage = resolveHighlightLanguage(lang);
+        return this._ensureLanguageLoaded(resolvedLanguage).pipe(switchMap(() => this._highlightCodeBlock(element, resolvedLanguage, content)), switchMap((x) => this._postProcess(x)), catchError((err) => {
             console.error('[HighlightService] Failed to highlight:', err);
             return of(element);
         }));
@@ -2231,22 +2729,67 @@ class HighlightService {
         return new Observable((observer) => {
             const processedContent = this._preprocessFocus(content);
             element.innerHTML = highlighter.codeToHtml(processedContent, { lang, theme: 'universal', defaultColor: false });
-            requestAnimationFrame(() => {
+            this._scheduleRender(() => {
                 observer.next(element);
                 observer.complete();
             });
         });
     }
     _preprocessFocus(code) {
-        return code.replace(/\|\:\|([\s\S]*?)\|\:\|/g, (_, p1) => `ƒƒƒ${p1}¢¢¢`);
+        return code.replace(/\|:\|([\s\S]*?)\|:\|/g, (_, p1) => `ƒƒƒ${p1}¢¢¢`);
+    }
+    _createHighlighter() {
+        return createHighlighterCore({
+            engine: createOnigurumaEngine(() => import('shiki/wasm').then((x) => x.default)),
+            themes: [UNIVERSAL_THEME],
+            langs: [],
+        });
+    }
+    _ensureLanguageLoaded(lang) {
+        if (isSpecialLang(lang)) {
+            return of(void 0);
+        }
+        return this._highlighter$.pipe(switchMap((highlighter) => {
+            if (highlighter.getLoadedLanguages().includes(lang)) {
+                return of(void 0);
+            }
+            const cachedTask = this._languageLoadingTasks.get(lang);
+            if (cachedTask) {
+                return cachedTask;
+            }
+            const loader = getLanguageLoader(lang);
+            if (!loader) {
+                return of(void 0);
+            }
+            const loadingTask = from(highlighter.loadLanguage(loader)).pipe(map(() => void 0), catchError((error) => {
+                console.error(`[HighlightService] Failed to load language "${lang}"`, error);
+                return of(void 0);
+            }), finalize(() => {
+                this._languageLoadingTasks.delete(lang);
+            }), shareReplay(1));
+            this._languageLoadingTasks.set(lang, loadingTask);
+            return loadingTask;
+        }));
+    }
+    _scheduleRender(callback) {
+        const raf = this._window?.requestAnimationFrame?.bind(this._window);
+        if (raf) {
+            raf(callback);
+            return;
+        }
+        queueMicrotask(callback);
     }
     _postProcess(element) {
-        return of(element).pipe(switchMap((x) => new MarkCodeFocusedBlocksPostProcessor(this._window).handle(x)));
+        const windowRef = this._window;
+        if (!windowRef) {
+            return of(element);
+        }
+        return of(element).pipe(switchMap((x) => new MarkCodeFocusedBlocksPostProcessor(windowRef).handle(x)));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: HighlightService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: HighlightService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HighlightService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HighlightService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: HighlightService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HighlightService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2260,10 +2803,10 @@ class CodeGroup {
     tabClick(index) {
         this.index.set(index);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: CodeGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: CodeGroup, isStandalone: true, selector: "code-group", host: { classAttribute: "f-code-group" }, ngImport: i0, template: "@let views = data();\n\n@if (views.length > 1) {\n  <div class=\"f-code-group-tabs\">\n    @for (data of views; track data) {\n      <button class=\"f-tab-button\" [class.active]=\"$index === index()\" (click)=\"tabClick($index)\">\n        {{ data.tab }}\n      </button>\n    }\n  </div>\n}\n\n<div class=\"f-code-group-body\">\n  @for (data of views; track data) {\n\n    @let isExampleView = data.type === containerType.EXAMPLE;\n    @let display = $index === index() ? 'block' : 'none';\n\n    @if (isExampleView) {\n      <external-component [style.display]=\"display\" [data]=\"data\" />\n    } @else {\n      <code-view [style.display]=\"display\" [data]=\"data\" />\n    }\n  }\n</div>\n", dependencies: [{ kind: "component", type: ExternalComponent, selector: "external-component", inputs: ["data"] }, { kind: "component", type: CodeView, selector: "code-view", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CodeGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: CodeGroup, isStandalone: true, selector: "code-group", host: { classAttribute: "f-code-group" }, ngImport: i0, template: "@let views = data();\n\n@if (views.length > 1) {\n  <div class=\"f-code-group-tabs\">\n    @for (data of views; track data) {\n      <button class=\"f-tab-button\" [class.active]=\"$index === index()\" (click)=\"tabClick($index)\">\n        {{ data.tab }}\n      </button>\n    }\n  </div>\n}\n\n<div class=\"f-code-group-body\">\n  @for (data of views; track data) {\n\n    @let isExampleView = data.type === containerType.EXAMPLE;\n    @let display = $index === index() ? 'block' : 'none';\n\n    @if (isExampleView) {\n      <external-component [style.display]=\"display\" [data]=\"data\" />\n    } @else {\n      <code-view [style.display]=\"display\" [data]=\"data\" />\n    }\n  }\n</div>\n", dependencies: [{ kind: "component", type: ExternalComponent, selector: "external-component", inputs: ["data"] }, { kind: "component", type: CodeView, selector: "code-view", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: CodeGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CodeGroup, decorators: [{
             type: Component,
             args: [{ selector: 'code-group', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'f-code-group',
@@ -2345,10 +2888,10 @@ class PreviewGroupService {
             x.hostElement.style.display = 'block';
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: PreviewGroupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: PreviewGroupService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: PreviewGroupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: PreviewGroupService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: PreviewGroupService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: PreviewGroupService, decorators: [{
             type: Injectable
         }] });
 
@@ -2411,15 +2954,15 @@ class PreviewCard extends PreviewCardBase {
     ngOnDestroy() {
         this._fPreviewGroupService.remove(this);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: PreviewCard, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: PreviewCard, isStandalone: true, selector: "a[preview-card]", host: { properties: { "attr.href": "url", "attr.title": "viewModel?.text" } }, usesInheritance: true, ngImport: i0, template: "@if (viewModel) {\n  <img [src]=\"src()\" [alt]=\"viewModel.description\" [title]=\"viewModel.text\">\n  <div class=\"title\">\n    {{ viewModel.text }}\n    @if (viewModel.badge) {\n      <span class=\"f-badge {{viewModel.badge.type}}\">{{ viewModel.badge.text }}</span>\n    }\n  </div>\n  <div class=\"description\">{{ viewModel.description }}</div>\n}\n\n\n\n", styles: [":host{display:block;border-radius:4px;background-color:var(--soft-background);padding:24px;width:100%;text-decoration:none!important;color:inherit!important;line-height:24px;font-size:14px;cursor:pointer}:host:hover img{transform:scale(1.1)}:host img{display:block;margin-bottom:16px;width:100%;height:180px;border-radius:4px;object-fit:cover;transition:transform .3s}:host .title{line-height:inherit;font-weight:600;text-transform:uppercase;color:var(--primary-text);display:flex;justify-content:space-between;align-items:center}:host .description{margin:8px 0!important;line-height:inherit;color:var(--secondary-text);width:100%;word-wrap:break-word;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media (min-width: 640px){:host{width:calc((100% - 32px)/2)}}.f-badge{padding:0 6px;line-height:14px;text-transform:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: PreviewCard, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: PreviewCard, isStandalone: true, selector: "a[preview-card]", host: { properties: { "attr.href": "url", "attr.title": "viewModel?.text" } }, usesInheritance: true, ngImport: i0, template: "@if (viewModel) {\n  <img [src]=\"src()\" [alt]=\"viewModel.description\" [title]=\"viewModel.text\">\n  <div class=\"title\">\n    {{ viewModel.text }}\n    @if (viewModel.badge) {\n      <span class=\"f-badge {{viewModel.badge.type}}\">{{ viewModel.badge.text }}</span>\n    }\n  </div>\n  <div class=\"description\">{{ viewModel.description }}</div>\n}\n\n\n\n", styles: [":host{display:block;border-radius:4px;background-color:var(--soft-background);padding:24px;width:100%;text-decoration:none!important;color:inherit!important;line-height:24px;font-size:14px;cursor:pointer}:host:hover img{transform:scale(1.1)}:host img{display:block;margin-bottom:16px;width:100%;height:180px;border-radius:4px;object-fit:cover;transition:transform .3s}:host .title{line-height:inherit;font-weight:600;text-transform:uppercase;color:var(--primary-text);display:flex;justify-content:space-between;align-items:center}:host .description{margin:8px 0!important;line-height:inherit;color:var(--secondary-text);width:100%;word-wrap:break-word;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media(min-width:640px){:host{width:calc((100% - 32px)/2)}}.f-badge{padding:0 6px;line-height:14px;text-transform:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: PreviewCard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: PreviewCard, decorators: [{
             type: Component,
             args: [{ selector: 'a[preview-card]', 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\">\n    {{ viewModel.text }}\n    @if (viewModel.badge) {\n      <span class=\"f-badge {{viewModel.badge.type}}\">{{ viewModel.badge.text }}</span>\n    }\n  </div>\n  <div class=\"description\">{{ viewModel.description }}</div>\n}\n\n\n\n", styles: [":host{display:block;border-radius:4px;background-color:var(--soft-background);padding:24px;width:100%;text-decoration:none!important;color:inherit!important;line-height:24px;font-size:14px;cursor:pointer}:host:hover img{transform:scale(1.1)}:host img{display:block;margin-bottom:16px;width:100%;height:180px;border-radius:4px;object-fit:cover;transition:transform .3s}:host .title{line-height:inherit;font-weight:600;text-transform:uppercase;color:var(--primary-text);display:flex;justify-content:space-between;align-items:center}:host .description{margin:8px 0!important;line-height:inherit;color:var(--secondary-text);width:100%;word-wrap:break-word;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media (min-width: 640px){:host{width:calc((100% - 32px)/2)}}.f-badge{padding:0 6px;line-height:14px;text-transform:none}\n"] }]
+                    }, template: "@if (viewModel) {\n  <img [src]=\"src()\" [alt]=\"viewModel.description\" [title]=\"viewModel.text\">\n  <div class=\"title\">\n    {{ viewModel.text }}\n    @if (viewModel.badge) {\n      <span class=\"f-badge {{viewModel.badge.type}}\">{{ viewModel.badge.text }}</span>\n    }\n  </div>\n  <div class=\"description\">{{ viewModel.description }}</div>\n}\n\n\n\n", styles: [":host{display:block;border-radius:4px;background-color:var(--soft-background);padding:24px;width:100%;text-decoration:none!important;color:inherit!important;line-height:24px;font-size:14px;cursor:pointer}:host:hover img{transform:scale(1.1)}:host img{display:block;margin-bottom:16px;width:100%;height:180px;border-radius:4px;object-fit:cover;transition:transform .3s}:host .title{line-height:inherit;font-weight:600;text-transform:uppercase;color:var(--primary-text);display:flex;justify-content:space-between;align-items:center}:host .description{margin:8px 0!important;line-height:inherit;color:var(--secondary-text);width:100%;word-wrap:break-word;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media(min-width:640px){:host{width:calc((100% - 32px)/2)}}.f-badge{padding:0 6px;line-height:14px;text-transform:none}\n"] }]
         }] });
 
 var previewCard = /*#__PURE__*/Object.freeze({
@@ -2462,10 +3005,10 @@ class PreviewActionBar {
         this.isSortByDateChecked.set(event);
         this._fPreviewGroupService.sortByDate(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: PreviewActionBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: PreviewActionBar, isStandalone: true, selector: "div[preview-action-bar]", ngImport: i0, template: "@if (filters().length) {\n  <div class=\"filters-row\">\n    @for (filter of filters(); track filter) {\n      <f-radio-button [checked]=\"activeFilter() === filter\"\n                      (change)=\"onFilterChange(filter)\">{{ filter | titlecase }}\n      </f-radio-button>\n    }\n    <div class=\"flex-space\"></div>\n    <f-checkbox [checked]=\"isSortByDateChecked()\" (change)=\"onSortByDateChange($event)\">Sort by Newness</f-checkbox>\n  </div>\n}\n\n\n\n", styles: [".filters-row{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;width:100%;padding-top:20px;gap:8px}\n"], dependencies: [{ kind: "component", type: FCheckboxComponent, selector: "f-checkbox", inputs: ["id", "checked"], outputs: ["change"] }, { kind: "component", type: FRadioButtonComponent, selector: "f-radio-button", inputs: ["id", "checked"], outputs: ["change"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: PreviewActionBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: PreviewActionBar, isStandalone: true, selector: "div[preview-action-bar]", ngImport: i0, template: "@if (filters().length) {\n  <div class=\"filters-row\">\n    @for (filter of filters(); track filter) {\n      <f-radio-button [checked]=\"activeFilter() === filter\"\n                      (change)=\"onFilterChange(filter)\">{{ filter | titlecase }}\n      </f-radio-button>\n    }\n    <div class=\"flex-space\"></div>\n    <f-checkbox [checked]=\"isSortByDateChecked()\" (change)=\"onSortByDateChange($event)\">Sort by Newness</f-checkbox>\n  </div>\n}\n\n\n\n", styles: [".filters-row{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;width:100%;padding-top:20px;gap:8px}\n"], dependencies: [{ kind: "component", type: FCheckboxComponent, selector: "f-checkbox", inputs: ["id", "checked"], outputs: ["change"] }, { kind: "component", type: FRadioButtonComponent, selector: "f-radio-button", inputs: ["id", "checked"], outputs: ["change"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: PreviewActionBar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: PreviewActionBar, decorators: [{
             type: Component,
             args: [{ selector: 'div[preview-action-bar]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         FCheckboxComponent,
@@ -2481,20 +3024,20 @@ var previewActionBar = /*#__PURE__*/Object.freeze({
 
 class ShowcaseItem {
     _themeService = inject(ThemeService);
-    _themeChanges = toSignal(this._themeService.theme$.pipe(map(() => this._themeService.getPreferredTheme())));
+    _themeChanges = toSignal(this._themeService.theme$.pipe(startWith(null), map(() => this._themeService.getPreferredTheme())));
     model = input.required(...(ngDevMode ? [{ debugName: "model" }] : []));
     src = computed(() => {
         const theme = this._themeChanges();
         const model = this.model();
         return theme === 'dark' ? (model.imageUrlDark || model.imageUrl) : model.imageUrl;
     }, ...(ngDevMode ? [{ debugName: "src" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: ShowcaseItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: ShowcaseItem, isStandalone: true, selector: "showcase-item", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let data = model();\n\n@if (data) {\n  <img [src]=\"src()\" [alt]=\"data.description\" [title]=\"data.name\">\n  <div class=\"title\">{{ data.name }}</div>\n  <div class=\"description\">{{ data.description }}</div>\n  <div class=\"links\">\n    @for (link of (data.links || []); track link.text) {\n      <a href=\"{{ link.url }}\" target=\"_blank\" rel=\"noopener\">{{ link.text }}</a>\n    }\n  </div>\n  <div class=\"tags\">\n    @for (tag of (data.tags || []); track tag) {\n      <span class=\"f-badge tip\">{{ tag }}</span>\n    }\n  </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}:host img{display:block;margin-bottom:16px;width:100%;height:240px;border-radius:4px;object-fit:cover}:host .title{line-height:inherit;font-weight:600;text-transform:uppercase;color:var(--primary-text);display:flex;justify-content:space-between;align-items:center}:host .description{margin:8px 0!important;line-height:inherit;color:var(--secondary-text);width:100%;word-wrap:break-word;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media (min-width: 640px){:host{width:calc((100% - 32px)/2)}}.links{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}.links a{font-size:14px;font-weight:500;color:var(--primary-text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.links a:hover,.links a.active{color:var(--primary-1)}.tags{display:flex;flex-wrap:wrap;gap:8px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ShowcaseItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: ShowcaseItem, isStandalone: true, selector: "showcase-item", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let data = model();\n\n@if (data) {\n  <img [src]=\"src()\" [alt]=\"data.description\" [title]=\"data.name\">\n  <div class=\"title\">{{ data.name }}</div>\n  <div class=\"description\">{{ data.description }}</div>\n  <div class=\"links\">\n    @for (link of (data.links || []); track link.text) {\n      <a href=\"{{ link.url }}\" target=\"_blank\" rel=\"noopener\">{{ link.text }}</a>\n    }\n  </div>\n  <div class=\"tags\">\n    @for (tag of (data.tags || []); track tag) {\n      <span class=\"f-badge tip\">{{ tag }}</span>\n    }\n  </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}:host img{display:block;margin-bottom:16px;width:100%;height:240px;border-radius:4px;object-fit:cover}:host .title{line-height:inherit;font-weight:600;text-transform:uppercase;color:var(--primary-text);display:flex;justify-content:space-between;align-items:center}:host .description{margin:8px 0!important;line-height:inherit;color:var(--secondary-text);width:100%;word-wrap:break-word;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media(min-width:640px){:host{width:calc((100% - 32px)/2)}}.links{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}.links a{font-size:14px;font-weight:500;color:var(--primary-text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.links a:hover,.links a.active{color:var(--primary-1)}.tags{display:flex;flex-wrap:wrap;gap:8px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: ShowcaseItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ShowcaseItem, decorators: [{
             type: Component,
-            args: [{ selector: 'showcase-item', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let data = model();\n\n@if (data) {\n  <img [src]=\"src()\" [alt]=\"data.description\" [title]=\"data.name\">\n  <div class=\"title\">{{ data.name }}</div>\n  <div class=\"description\">{{ data.description }}</div>\n  <div class=\"links\">\n    @for (link of (data.links || []); track link.text) {\n      <a href=\"{{ link.url }}\" target=\"_blank\" rel=\"noopener\">{{ link.text }}</a>\n    }\n  </div>\n  <div class=\"tags\">\n    @for (tag of (data.tags || []); track tag) {\n      <span class=\"f-badge tip\">{{ tag }}</span>\n    }\n  </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}:host img{display:block;margin-bottom:16px;width:100%;height:240px;border-radius:4px;object-fit:cover}:host .title{line-height:inherit;font-weight:600;text-transform:uppercase;color:var(--primary-text);display:flex;justify-content:space-between;align-items:center}:host .description{margin:8px 0!important;line-height:inherit;color:var(--secondary-text);width:100%;word-wrap:break-word;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media (min-width: 640px){:host{width:calc((100% - 32px)/2)}}.links{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}.links a{font-size:14px;font-weight:500;color:var(--primary-text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.links a:hover,.links a.active{color:var(--primary-1)}.tags{display:flex;flex-wrap:wrap;gap:8px}\n"] }]
-        }] });
+            args: [{ selector: 'showcase-item', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let data = model();\n\n@if (data) {\n  <img [src]=\"src()\" [alt]=\"data.description\" [title]=\"data.name\">\n  <div class=\"title\">{{ data.name }}</div>\n  <div class=\"description\">{{ data.description }}</div>\n  <div class=\"links\">\n    @for (link of (data.links || []); track link.text) {\n      <a href=\"{{ link.url }}\" target=\"_blank\" rel=\"noopener\">{{ link.text }}</a>\n    }\n  </div>\n  <div class=\"tags\">\n    @for (tag of (data.tags || []); track tag) {\n      <span class=\"f-badge tip\">{{ tag }}</span>\n    }\n  </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}:host img{display:block;margin-bottom:16px;width:100%;height:240px;border-radius:4px;object-fit:cover}:host .title{line-height:inherit;font-weight:600;text-transform:uppercase;color:var(--primary-text);display:flex;justify-content:space-between;align-items:center}:host .description{margin:8px 0!important;line-height:inherit;color:var(--secondary-text);width:100%;word-wrap:break-word;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media(min-width:640px){:host{width:calc((100% - 32px)/2)}}.links{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}.links a{font-size:14px;font-weight:500;color:var(--primary-text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.links a:hover,.links a.active{color:var(--primary-1)}.tags{display:flex;flex-wrap:wrap;gap:8px}\n"] }]
+        }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }] } });
 
 const SHOWCASE_DATA = new InjectionToken('SHOWCASE_DATA');
 
@@ -2515,10 +3058,10 @@ class Showcase {
     tagClick(tag) {
         this.activeTag.update((x) => x === tag ? null : tag);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: Showcase, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: Showcase, isStandalone: true, selector: "showcase", ngImport: i0, template: "<div class=\"filters-panel\">\n  @for (tag of tags(); track tag) {\n    <span class=\"f-badge tip\" (click)=\"tagClick(tag)\" [class.info]=\"activeTag() === tag\">{{ tag }}</span>\n  }\n</div>\n<div class=\"showcase-list\">\n  @for (item of items(); track item.imageUrl) {\n    <showcase-item [model]=\"item\"/>\n  }\n</div>\n\n", styles: [".filters-panel{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}.filters-panel .f-badge{cursor:pointer}.showcase-list{display:flex;justify-content:flex-start;align-items:normal;flex-wrap:wrap;gap:32px;pointer-events:all;overflow:hidden}\n"], dependencies: [{ kind: "component", type: ShowcaseItem, selector: "showcase-item", inputs: ["model"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: Showcase, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: Showcase, isStandalone: true, selector: "showcase", ngImport: i0, template: "<div class=\"filters-panel\">\n  @for (tag of tags(); track tag) {\n    <span class=\"f-badge tip\" (click)=\"tagClick(tag)\" [class.info]=\"activeTag() === tag\">{{ tag }}</span>\n  }\n</div>\n<div class=\"showcase-list\">\n  @for (item of items(); track item.imageUrl) {\n    <showcase-item [model]=\"item\"/>\n  }\n</div>\n\n", styles: [".filters-panel{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}.filters-panel .f-badge{cursor:pointer}.showcase-list{display:flex;justify-content:flex-start;align-items:normal;flex-wrap:wrap;gap:32px;pointer-events:all;overflow:hidden}\n"], dependencies: [{ kind: "component", type: ShowcaseItem, selector: "showcase-item", inputs: ["model"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: Showcase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: Showcase, decorators: [{
             type: Component,
             args: [{ selector: 'showcase', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         ShowcaseItem,
@@ -2563,13 +3106,13 @@ let ActivateTocByHash = class ActivateTocByHash {
             })),
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: ActivateTocByHash, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: ActivateTocByHash });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ActivateTocByHash, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ActivateTocByHash });
 };
 ActivateTocByHash = __decorate([
     MExecution(ActivateTocByHashRequest)
 ], ActivateTocByHash);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: ActivateTocByHash, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ActivateTocByHash, decorators: [{
             type: Injectable
         }] });
 
@@ -2611,13 +3154,13 @@ let CalculateAbsoluteTopToContainer = class CalculateAbsoluteTopToContainer {
         }
         return result;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: CalculateAbsoluteTopToContainer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: CalculateAbsoluteTopToContainer });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CalculateAbsoluteTopToContainer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CalculateAbsoluteTopToContainer });
 };
 CalculateAbsoluteTopToContainer = __decorate([
     MExecution(CalculateAbsoluteTopToContainerRequest)
 ], CalculateAbsoluteTopToContainer);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: CalculateAbsoluteTopToContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CalculateAbsoluteTopToContainer, decorators: [{
             type: Injectable
         }] });
 
@@ -2672,10 +3215,10 @@ class CalculateHashFromScrollPosition {
         }
         return result;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: CalculateHashFromScrollPosition, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: CalculateHashFromScrollPosition });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CalculateHashFromScrollPosition, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CalculateHashFromScrollPosition });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: CalculateHashFromScrollPosition, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CalculateHashFromScrollPosition, decorators: [{
             type: Injectable
         }] });
 
@@ -2731,13 +3274,13 @@ let CalculateTableOfContent = class CalculateTableOfContent {
         }
         stack.push(tocItem);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: CalculateTableOfContent, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: CalculateTableOfContent });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CalculateTableOfContent, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CalculateTableOfContent });
 };
 CalculateTableOfContent = __decorate([
     MExecution(CalculateTableOfContentRequest)
 ], CalculateTableOfContent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: CalculateTableOfContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CalculateTableOfContent, decorators: [{
             type: Injectable
         }] });
 
@@ -2788,25 +3331,25 @@ let ScrollToElementInContainer = class ScrollToElementInContainer {
     _getContainerTop() {
         return this._scrollableContainer.htmlElement.getBoundingClientRect().top;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: ScrollToElementInContainer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: ScrollToElementInContainer });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScrollToElementInContainer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScrollToElementInContainer });
 };
 ScrollToElementInContainer = __decorate([
     MExecution(ScrollToElementInContainerRequest)
 ], ScrollToElementInContainer);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: ScrollToElementInContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScrollToElementInContainer, decorators: [{
             type: Injectable
         }] });
 
 class TableOfContentItemsComponent {
     items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: TableOfContentItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: TableOfContentItemsComponent, isStandalone: true, selector: "ul[f-table-of-content-items]", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@for (item of items(); track item.hash) {\n  <li [class.active]=\"item.isActive\"><a class=\"text-ellipsis\" [href]=\"item.hash\">{{ item.title }}</a></li>\n  @if (item.children) {\n    <ul f-table-of-content-items [items]=\"item.children\"></ul>\n  }\n}\n", styles: [":host{list-style:none;margin:0;padding:0}:host li{overflow-wrap:break-word;color:var(--secondary-text);max-width:180px}:host li a{display:block;line-height:var(--on-page-navigation-item-height);font-size:14px;color:inherit;font-weight:400}:host li.active{color:var(--primary-text)}:host li+ul{padding:0 16px}\n"], dependencies: [{ kind: "component", type: TableOfContentItemsComponent, selector: "ul[f-table-of-content-items]", inputs: ["items"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TableOfContentItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: TableOfContentItemsComponent, isStandalone: true, selector: "ul[f-table-of-content-items]", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@for (item of items(); track item.hash) {\n  <li [class.active]=\"item.isActive\"><a class=\"text-ellipsis\" [href]=\"item.hash\">{{ item.title }}</a></li>\n  @if (item.children) {\n    <ul f-table-of-content-items [items]=\"item.children\"></ul>\n  }\n}\n", styles: [":host{list-style:none;margin:0;padding:0}:host li{overflow-wrap:break-word;color:var(--secondary-text);max-width:180px}:host li a{display:block;line-height:var(--on-page-navigation-item-height);font-size:14px;color:inherit;font-weight:400}:host li.active{color:var(--primary-text)}:host li+ul{padding:0 16px}\n"], dependencies: [{ kind: "component", type: TableOfContentItemsComponent, selector: "ul[f-table-of-content-items]", inputs: ["items"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: TableOfContentItemsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TableOfContentItemsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ul[f-table-of-content-items]', changeDetection: ChangeDetectionStrategy.Default, standalone: true, template: "@for (item of items(); track item.hash) {\n  <li [class.active]=\"item.isActive\"><a class=\"text-ellipsis\" [href]=\"item.hash\">{{ item.title }}</a></li>\n  @if (item.children) {\n    <ul f-table-of-content-items [items]=\"item.children\"></ul>\n  }\n}\n", styles: [":host{list-style:none;margin:0;padding:0}:host li{overflow-wrap:break-word;color:var(--secondary-text);max-width:180px}:host li a{display:block;line-height:var(--on-page-navigation-item-height);font-size:14px;color:inherit;font-weight:400}:host li.active{color:var(--primary-text)}:host li+ul{padding:0 16px}\n"] }]
-        }] });
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }] } });
 
 const TABLE_OF_CONTENT_MODULE_PROVIDERS = [
     ActivateTocByHash,
@@ -2845,12 +3388,12 @@ class TableOfContent {
         this._mediatr.execute(new ActivateTocByHashRequest(hash));
         this._mediatr.execute(new ScrollToElementInContainerRequest(hash));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: TableOfContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: TableOfContent, isStandalone: true, selector: "table-of-content", host: { listeners: { "click": "_click($event)" } }, ngImport: i0, template: "@let data = tocData();\n@if (data) {\n  <div class=\"title\">{{ title || 'In this article' }}</div>\n  <ul f-table-of-content-items [items]=\"data.tree\"></ul>\n  <div class=\"active-marker\" [style.top]=\"activeMarkerPosition() + 'px'\"></div>\n}\n\n", styles: [":host{--on-page-navigation-item-height: 32px;display:none;padding-left:16px;border-left:1px solid var(--divider-color);font-size:13px;font-weight:500;position:relative}:host .title{line-height:32px;font-size:14px;font-weight:600}@media (min-width: 1280px){:host{display:block;width:var(--on-page-navigation-width);position:fixed;top:calc(var(--header-height) + 48px);right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 3)}}:host .active-marker{position:absolute;top:0;left:0;width:2px;height:calc(var(--on-page-navigation-item-height) / 2);border-radius:2px;background-color:var(--primary-1);transition:top .25s cubic-bezier(0,1,.5,1),opacity .25s}\n"], dependencies: [{ kind: "component", type: TableOfContentItemsComponent, selector: "ul[f-table-of-content-items]", inputs: ["items"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TableOfContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: TableOfContent, isStandalone: true, selector: "table-of-content", host: { listeners: { "click": "_click($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: "20.1.8", ngImport: i0, type: TableOfContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TableOfContent, decorators: [{
             type: Component,
-            args: [{ selector: '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"] }]
+            args: [{ selector: '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: { _click: [{
                 type: HostListener,
                 args: ['click', ['$event']]
@@ -2861,12 +3404,17 @@ const SCROLLABLE_CONTAINER = new InjectionToken('SCROLLABLE_CONTAINER');
 class ScrollableContainer {
     _destroyRef = inject(DestroyRef);
     _injector = inject(Injector);
+    _markdown = inject(MarkdownService);
     tableOfContent = inject(DOCUMENTATION_CONFIGURATION).tableOfContent;
+    canShowTableOfContent = computed(() => {
+        return !!this.tableOfContent && !this._markdown.pageLayout().hideTableOfContent;
+    }, ...(ngDevMode ? [{ debugName: "canShowTableOfContent" }] : []));
     htmlElement = inject((ElementRef)).nativeElement;
     ngOnInit() {
         fromEvent(this.htmlElement, 'scroll', { passive: true })
             .pipe(debounceTime(100), startWith(null), filter((event) => {
-            const ignoreProgrammatic = event?.target?._ignoreProgrammatic ?? false;
+            const target = event?.target;
+            const ignoreProgrammatic = target?._ignoreProgrammatic ?? false;
             this.htmlElement._ignoreProgrammatic = false;
             return !ignoreProgrammatic;
         }), takeUntilDestroyed(this._destroyRef))
@@ -2875,8 +3423,8 @@ class ScrollableContainer {
     _calculateHashAndActivate() {
         this._injector.get(CalculateHashFromScrollPosition).handle();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: ScrollableContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: ScrollableContainer, isStandalone: true, selector: "scrollable-container", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScrollableContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: ScrollableContainer, isStandalone: true, selector: "scrollable-container", providers: [
             {
                 provide: SCROLLABLE_CONTAINER,
                 useExisting: forwardRef(() => ScrollableContainer),
@@ -2885,9 +3433,9 @@ class ScrollableContainer {
             ...DYNAMIC_COMPONENTS_MODULE_PROVIDERS,
             ...TABLE_OF_CONTENT_MODULE_PROVIDERS,
             MarkdownService,
-        ], ngImport: i0, template: "<ng-content></ng-content>\n@if (tableOfContent) {\n  <table-of-content />\n}\n\n\n\n", styles: [":host{position:relative;width:100%;height:100%;overflow:hidden;overflow-y:auto;scrollbar-gutter:stable}\n"], dependencies: [{ kind: "component", type: TableOfContent, selector: "table-of-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<ng-content></ng-content>\n@if (canShowTableOfContent()) {\n  <table-of-content />\n}\n\n\n", styles: [":host{position:relative;width:100%;height:100%;overflow:hidden;overflow-y:auto;scrollbar-gutter:stable}\n"], dependencies: [{ kind: "component", type: TableOfContent, selector: "table-of-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: ScrollableContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScrollableContainer, decorators: [{
             type: Component,
             args: [{ selector: 'scrollable-container', standalone: true, providers: [
                         {
@@ -2900,7 +3448,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
                         MarkdownService,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         TableOfContent,
-                    ], template: "<ng-content></ng-content>\n@if (tableOfContent) {\n  <table-of-content />\n}\n\n\n\n", styles: [":host{position:relative;width:100%;height:100%;overflow:hidden;overflow-y:auto;scrollbar-gutter:stable}\n"] }]
+                    ], template: "<ng-content></ng-content>\n@if (canShowTableOfContent()) {\n  <table-of-content />\n}\n\n\n", styles: [":host{position:relative;width:100%;height:100%;overflow:hidden;overflow-y:auto;scrollbar-gutter:stable}\n"] }]
         }] });
 
 class MarkdownRenderer {
@@ -2950,15 +3498,15 @@ class MarkdownRenderer {
     ngOnDestroy() {
         this._dynamicComponents.dispose();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: MarkdownRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: MarkdownRenderer, isStandalone: true, selector: "markdown-renderer", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "_onDocumentClick($event)" }, classAttribute: "m-render" }, ngImport: i0, template: "<div [innerHTML]=\"value()\"></div>\n@if (value()) {\n  <markdown-footer />\n}\n\n", styles: [":host{display:block;width:100%}@media (min-width: 1280px){:host{width:calc(100% - var(--on-page-navigation-width) - var(--page-padding))}}:host.empty-navigation{margin:auto;max-width:900px}\n"], dependencies: [{ kind: "component", type: MarkdownFooter, selector: "markdown-footer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: MarkdownRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: MarkdownRenderer, isStandalone: true, selector: "markdown-renderer", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "_onDocumentClick($event)" }, classAttribute: "m-render" }, ngImport: i0, template: "<div [innerHTML]=\"value()\"></div>\n@if (value()) {\n  <markdown-footer />\n}\n\n", styles: [":host{display:block;width:100%}@media(min-width:1280px){:host{width:calc(100% - var(--on-page-navigation-width) - var(--page-padding))}}@media(min-width:1280px){:host.expand-no-toc{width:100%}}:host.empty-navigation{margin:auto;max-width:900px}\n"], dependencies: [{ kind: "component", type: MarkdownFooter, selector: "markdown-footer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: MarkdownRenderer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: MarkdownRenderer, decorators: [{
             type: Component,
             args: [{ selector: 'markdown-renderer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MarkdownFooter], host: {
                         class: 'm-render',
-                    }, template: "<div [innerHTML]=\"value()\"></div>\n@if (value()) {\n  <markdown-footer />\n}\n\n", styles: [":host{display:block;width:100%}@media (min-width: 1280px){:host{width:calc(100% - var(--on-page-navigation-width) - var(--page-padding))}}:host.empty-navigation{margin:auto;max-width:900px}\n"] }]
-        }], propDecorators: { _onDocumentClick: [{
+                    }, template: "<div [innerHTML]=\"value()\"></div>\n@if (value()) {\n  <markdown-footer />\n}\n\n", styles: [":host{display:block;width:100%}@media(min-width:1280px){:host{width:calc(100% - var(--on-page-navigation-width) - var(--page-padding))}}@media(min-width:1280px){:host.expand-no-toc{width:100%}}:host.empty-navigation{margin:auto;max-width:900px}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], _onDocumentClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }] } });
@@ -2968,26 +3516,31 @@ class MarkdownRouter {
     _activatedRoute = inject(ActivatedRoute);
     _markdown = inject(MarkdownService);
     _dataProvider = inject(DocumentationStore);
+    _metaService = inject(FMetaService, { optional: true });
     emptyNavigation = !this._dataProvider.getNavigation().length;
+    shouldExpandContent = computed(() => {
+        const layout = this._markdown.pageLayout();
+        return layout.hideTableOfContent && layout.expandContentWithoutTableOfContent;
+    }, ...(ngDevMode ? [{ debugName: "shouldExpandContent" }] : []));
     _path$ = this._router.events.pipe(startWith(null), filter((e) => e === null || e instanceof NavigationEnd), map(() => this._activatedRoute.snapshot.url.map(u => u.path).join('/')), distinctUntilChanged());
     html = toSignal(this._path$.pipe(switchMap(path => {
         const url = this._dataProvider.getMarkdownUrl(path);
         return this._markdown.parseUrl(url).pipe(catchError(err => {
             console.error('[MarkdownRouter] parse error:', err, { path, url });
             return of(undefined); // или return EMPTY;
-        }));
+        }), tap(() => this._metaService?.applyMarkdownSeo(this._markdown.pageSeo())));
     })), { initialValue: undefined });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: MarkdownRouter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: MarkdownRouter, isStandalone: true, selector: "markdown-router", host: { attributes: { "ngSkipHydration": "" }, properties: { "class.empty-navigation": "emptyNavigation" } }, ngImport: i0, template: "<markdown-renderer [value]=\"html()\" [class.empty-navigation]=\"emptyNavigation\"/>\n\n", styles: [":host{display:block;width:100%;padding:48px var(--page-padding) 140px}@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)}}@media (min-width: 1280px){:host.empty-navigation{padding-right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2);padding-left:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2)}}\n"], dependencies: [{ kind: "component", type: MarkdownRenderer, selector: "markdown-renderer", inputs: ["value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: MarkdownRouter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: MarkdownRouter, isStandalone: true, selector: "markdown-router", host: { attributes: { "ngSkipHydration": "" }, properties: { "class.empty-navigation": "emptyNavigation" } }, ngImport: i0, template: "<markdown-renderer [value]=\"html()\"\n                   [class.empty-navigation]=\"emptyNavigation\"\n                   [class.expand-no-toc]=\"shouldExpandContent()\"/>\n", styles: [":host{display:block;width:100%;padding:48px var(--page-padding) 140px}@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)}}@media(min-width:1280px){:host.empty-navigation{padding-right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2);padding-left:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2)}}\n"], dependencies: [{ kind: "component", type: MarkdownRenderer, selector: "markdown-renderer", inputs: ["value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: MarkdownRouter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: MarkdownRouter, decorators: [{
             type: Component,
             args: [{ selector: 'markdown-router', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'ngSkipHydration': '',
                         '[class.empty-navigation]': 'emptyNavigation',
                     }, imports: [
                         MarkdownRenderer,
-                    ], template: "<markdown-renderer [value]=\"html()\" [class.empty-navigation]=\"emptyNavigation\"/>\n\n", styles: [":host{display:block;width:100%;padding:48px var(--page-padding) 140px}@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)}}@media (min-width: 1280px){:host.empty-navigation{padding-right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2);padding-left:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2)}}\n"] }]
+                    ], template: "<markdown-renderer [value]=\"html()\"\n                   [class.empty-navigation]=\"emptyNavigation\"\n                   [class.expand-no-toc]=\"shouldExpandContent()\"/>\n", styles: [":host{display:block;width:100%;padding:48px var(--page-padding) 140px}@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)}}@media(min-width:1280px){:host.empty-navigation{padding-right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2);padding-left:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2)}}\n"] }]
         }] });
 
 var index$2 = /*#__PURE__*/Object.freeze({
@@ -3020,8 +3573,8 @@ class Documentation {
         this._metaService.dispose();
         // Cleanup logic if needed
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: Documentation, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: Documentation, isStandalone: true, selector: "documentation", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: Documentation, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: Documentation, isStandalone: true, selector: "documentation", providers: [
             DocumentationStore,
             FMetaService,
             {
@@ -3052,9 +3605,9 @@ class Documentation {
                 deps: [DocumentationStore],
                 useFactory: (store) => store.getShowcaseItems(),
             },
-        ], ngImport: i0, template: "@if (!emptyNavigation) {\n  <f-navigation-panel [class.visible]=\"isNavigationVisible()\"/>\n  <div class=\"f-backdrop\" [class.visible]=\"isNavigationVisible()\" (click)=\"onToggleNavigation(false)\"></div>\n}\n\n<scrollable-container>\n  <f-header [class.empty-navigation]=\"emptyNavigation\"/>\n  <router-outlet/>\n</scrollable-container>\n\n@if (popover()) {\n  <div class=\"popover\">{{ popover() }}</div>\n}\n@defer (when isBrowser) {\n  <cookie-popup/>\n}\n", styles: [":host{display:flex;justify-content:flex-start;align-items:flex-start;height:100%;gap:5px}.f-backdrop{position:fixed;inset:0;opacity:0;z-index:var(--z-index-backdrop);background:var(--backdrop-color);transition:opacity .2s ease-in-out;pointer-events:none}.f-backdrop.visible{opacity:1;pointer-events:all}@media (min-width: 960px){.f-backdrop{position:unset}}.popover{position:fixed;min-width:120px;bottom:50%;left:50%;text-align:center;transform:translate(-50%,-50%);background-color:var(--code-view-copy-button-hover-background);border:1px solid var(--code-view-copy-button-border-color);box-shadow:var(--shadow-3);color:var(--primary-text);font-size:14px;padding:4px 8px;border-radius:4px;z-index:var(--z-index-popover);opacity:1}\n"], dependencies: [{ kind: "component", type: NavigationPanelComponent, selector: "f-navigation-panel" }, { kind: "component", type: ScrollableContainer, selector: "scrollable-container" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: HeaderComponent, selector: "f-header" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [import('./foblex-m-render-cookie-popup.component-Cx-ELX3C.mjs').then(m => m.CookiePopupComponent)]] });
+        ], ngImport: i0, template: "@if (!emptyNavigation) {\n  <f-navigation-panel [class.visible]=\"isNavigationVisible()\"/>\n  <div class=\"f-backdrop\" [class.visible]=\"isNavigationVisible()\" (click)=\"onToggleNavigation(false)\"></div>\n}\n\n<scrollable-container>\n  <f-header [class.empty-navigation]=\"emptyNavigation\"/>\n  <router-outlet/>\n</scrollable-container>\n\n@if (popover()) {\n  <div class=\"popover\">{{ popover() }}</div>\n}\n@defer (when isBrowser) {\n  <cookie-popup/>\n}\n", styles: [":host{display:flex;justify-content:flex-start;align-items:flex-start;height:100%;gap:5px}.f-backdrop{position:fixed;inset:0;opacity:0;z-index:var(--z-index-backdrop);background:var(--backdrop-color);transition:opacity .2s ease-in-out;pointer-events:none}.f-backdrop.visible{opacity:1;pointer-events:all}@media(min-width:960px){.f-backdrop{position:unset}}.popover{position:fixed;min-width:120px;bottom:50%;left:50%;text-align:center;transform:translate(-50%,-50%);background-color:var(--code-view-copy-button-hover-background);border:1px solid var(--code-view-copy-button-border-color);box-shadow:var(--shadow-3);color:var(--primary-text);font-size:14px;padding:4px 8px;border-radius:4px;z-index:var(--z-index-popover);opacity:1}\n"], dependencies: [{ kind: "component", type: NavigationPanelComponent, selector: "f-navigation-panel" }, { kind: "component", type: ScrollableContainer, selector: "scrollable-container" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: HeaderComponent, selector: "f-header" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [import('./foblex-m-render-cookie-popup-DzpgC1SS.mjs').then(m => m.CookiePopup)]] });
 }
-i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.1.8", ngImport: i0, type: Documentation, resolveDeferredDeps: () => [import('./foblex-m-render-cookie-popup.component-Cx-ELX3C.mjs').then(m => m.CookiePopupComponent)], resolveMetadata: CookiePopupComponent => ({ decorators: [{
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.1.4", ngImport: i0, type: Documentation, resolveDeferredDeps: () => [import('./foblex-m-render-cookie-popup-DzpgC1SS.mjs').then(m => m.CookiePopup)], resolveMetadata: CookiePopup => ({ decorators: [{
                 type: Component,
                 args: [{ selector: 'documentation', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                             DocumentationStore,
@@ -3092,8 +3645,8 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.1.8", ng
                             ScrollableContainer,
                             RouterOutlet,
                             HeaderComponent,
-                            CookiePopupComponent,
-                        ], template: "@if (!emptyNavigation) {\n  <f-navigation-panel [class.visible]=\"isNavigationVisible()\"/>\n  <div class=\"f-backdrop\" [class.visible]=\"isNavigationVisible()\" (click)=\"onToggleNavigation(false)\"></div>\n}\n\n<scrollable-container>\n  <f-header [class.empty-navigation]=\"emptyNavigation\"/>\n  <router-outlet/>\n</scrollable-container>\n\n@if (popover()) {\n  <div class=\"popover\">{{ popover() }}</div>\n}\n@defer (when isBrowser) {\n  <cookie-popup/>\n}\n", styles: [":host{display:flex;justify-content:flex-start;align-items:flex-start;height:100%;gap:5px}.f-backdrop{position:fixed;inset:0;opacity:0;z-index:var(--z-index-backdrop);background:var(--backdrop-color);transition:opacity .2s ease-in-out;pointer-events:none}.f-backdrop.visible{opacity:1;pointer-events:all}@media (min-width: 960px){.f-backdrop{position:unset}}.popover{position:fixed;min-width:120px;bottom:50%;left:50%;text-align:center;transform:translate(-50%,-50%);background-color:var(--code-view-copy-button-hover-background);border:1px solid var(--code-view-copy-button-border-color);box-shadow:var(--shadow-3);color:var(--primary-text);font-size:14px;padding:4px 8px;border-radius:4px;z-index:var(--z-index-popover);opacity:1}\n"] }]
+                            CookiePopup,
+                        ], template: "@if (!emptyNavigation) {\n  <f-navigation-panel [class.visible]=\"isNavigationVisible()\"/>\n  <div class=\"f-backdrop\" [class.visible]=\"isNavigationVisible()\" (click)=\"onToggleNavigation(false)\"></div>\n}\n\n<scrollable-container>\n  <f-header [class.empty-navigation]=\"emptyNavigation\"/>\n  <router-outlet/>\n</scrollable-container>\n\n@if (popover()) {\n  <div class=\"popover\">{{ popover() }}</div>\n}\n@defer (when isBrowser) {\n  <cookie-popup/>\n}\n", styles: [":host{display:flex;justify-content:flex-start;align-items:flex-start;height:100%;gap:5px}.f-backdrop{position:fixed;inset:0;opacity:0;z-index:var(--z-index-backdrop);background:var(--backdrop-color);transition:opacity .2s ease-in-out;pointer-events:none}.f-backdrop.visible{opacity:1;pointer-events:all}@media(min-width:960px){.f-backdrop{position:unset}}.popover{position:fixed;min-width:120px;bottom:50%;left:50%;text-align:center;transform:translate(-50%,-50%);background-color:var(--code-view-copy-button-hover-background);border:1px solid var(--code-view-copy-button-border-color);box-shadow:var(--shadow-3);color:var(--primary-text);font-size:14px;padding:4px 8px;border-radius:4px;z-index:var(--z-index-popover);opacity:1}\n"] }]
             }], ctorParameters: null, propDecorators: null }) });
 
 const DOCUMENTATION_ROUTES = [
@@ -3118,6 +3671,7 @@ var index$1 = /*#__PURE__*/Object.freeze({
     CalculateHashFromScrollPosition: CalculateHashFromScrollPosition,
     get CalculateTableOfContent () { return CalculateTableOfContent; },
     CalculateTableOfContentRequest: CalculateTableOfContentRequest,
+    DEFAULT_MARKDOWN_PAGE_LAYOUT_OPTIONS: DEFAULT_MARKDOWN_PAGE_LAYOUT_OPTIONS,
     DOCUMENTATION_CONFIGURATION: DOCUMENTATION_CONFIGURATION,
     DOCUMENTATION_ROUTES: DOCUMENTATION_ROUTES,
     Documentation: Documentation,
@@ -3255,84 +3809,85 @@ class HomeStore {
     getImageComponent() {
         return this._configuration.image;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: HomeStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: HomeStore });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HomeStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HomeStore });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: HomeStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HomeStore, decorators: [{
             type: Injectable
         }] });
 
 class FHomePageButtonsRowComponent {
     viewModel = inject(HomeStore).getButtons();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: FHomePageButtonsRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: FHomePageButtonsRowComponent, isStandalone: true, selector: "f-home-page-buttons-row", host: { properties: { "class.display-none": "!viewModel.length" } }, ngImport: i0, template: "@for (button of viewModel; track button.text) {\n  @if (button.routerLink) {\n    <a class=\"f-button\" [class.primary]=\"button.primary\" routerLink=\"{{ button.routerLink }}\">\n      @if (button.icon) {\n        <span class=\"f-icon {{ button.icon }}\"></span>\n      }\n      {{ button.text }}\n    </a>\n  } @else if(button.href) {\n    <a class=\"f-button\" [class.primary]=\"button.primary\" href=\"{{ button.href }}\" target=\"_blank\" rel=\"noopener noreferrer\">\n      @if (button.icon) {\n        <span class=\"f-icon {{ button.icon }}\"></span>\n      }\n      {{ button.text }}\n    </a>\n  }\n}\n\n", styles: [":host{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:fit-content;margin:0 auto;padding:32px 10px 0}@media (min-width: 960px){:host{margin:0;padding:32px 0 0;justify-content:flex-start}}.f-button{display:flex;align-items:center;gap:6px}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FHomePageButtonsRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", 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: "20.1.8", ngImport: i0, type: FHomePageButtonsRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FHomePageButtonsRowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-home-page-buttons-row', standalone: true, imports: [
                         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;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"] }]
+                    }, 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 {
     viewModel = inject(HomeStore).getFeatures();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: FHomePageFeaturesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: FHomePageFeaturesComponent, isStandalone: true, selector: "f-home-page-features", host: { properties: { "class.display-none": "!viewModel.length" } }, ngImport: i0, template: "<div class=\"feature-list\">\n  @for (feature of viewModel; track feature.headline) {\n    <div class=\"feature\">\n      <h2>{{ feature.headline }}</h2>\n      <p>{{ feature.description }}</p>\n    </div>\n  }\n</div>\n\n", styles: [":host{margin-top:64px;margin-bottom:64px;width:100%;display:block;padding:0 24px}:host .feature-list{margin:0 auto;display:flex;flex-wrap:wrap;gap:16px;max-width:1248px;pointer-events:none}:host .feature{width:100%;border-radius:4px;background-color:var(--soft-background);display:flex;flex-direction:column;padding:24px;pointer-events:all}:host .feature h2{margin:0;line-height:24px;font-size:16px;font-weight:600}:host .feature p{flex-grow:1;padding-top:8px;line-height:24px;font-size:14px;font-weight:500;color:var(--secondary-text)}@media (min-width: 640px){:host{padding:0 48px}:host .feature{width:calc(50% - 12px)}}@media (min-width: 960px){:host{padding:0 64px}:host .feature{width:calc(25% - 12px)}}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FHomePageFeaturesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: FHomePageFeaturesComponent, isStandalone: true, selector: "f-home-page-features", host: { properties: { "class.display-none": "!viewModel.length" } }, ngImport: i0, template: "<div class=\"feature-list\">\n  @for (feature of viewModel; track feature.headline) {\n    <div class=\"feature\">\n      <h2>{{ feature.headline }}</h2>\n      <p>{{ feature.description }}</p>\n    </div>\n  }\n</div>\n\n", styles: [":host{margin-top:64px;margin-bottom:64px;width:100%;display:block;padding:0 24px}:host .feature-list{margin:0 auto;display:flex;flex-wrap:wrap;gap:16px;max-width:1248px;pointer-events:none}:host .feature{width:100%;border-radius:4px;background-color:var(--soft-background);display:flex;flex-direction:column;padding:24px;pointer-events:all}:host .feature h2{margin:0;line-height:24px;font-size:16px;font-weight:600}:host .feature p{flex-grow:1;padding-top:8px;line-height:24px;font-size:14px;font-weight:500;color:var(--secondary-text)}@media(min-width:640px){:host{padding:0 48px}:host .feature{width:calc(50% - 12px)}}@media(min-width:960px){:host{padding:0 64px}:host .feature{width:calc(25% - 12px)}}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: FHomePageFeaturesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FHomePageFeaturesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-home-page-features', standalone: true, host: {
                         '[class.display-none]': '!viewModel.length',
-                    }, template: "<div class=\"feature-list\">\n  @for (feature of viewModel; track feature.headline) {\n    <div class=\"feature\">\n      <h2>{{ feature.headline }}</h2>\n      <p>{{ feature.description }}</p>\n    </div>\n  }\n</div>\n\n", styles: [":host{margin-top:64px;margin-bottom:64px;width:100%;display:block;padding:0 24px}:host .feature-list{margin:0 auto;display:flex;flex-wrap:wrap;gap:16px;max-width:1248px;pointer-events:none}:host .feature{width:100%;border-radius:4px;background-color:var(--soft-background);display:flex;flex-direction:column;padding:24px;pointer-events:all}:host .feature h2{margin:0;line-height:24px;font-size:16px;font-weight:600}:host .feature p{flex-grow:1;padding-top:8px;line-height:24px;font-size:14px;font-weight:500;color:var(--secondary-text)}@media (min-width: 640px){:host{padding:0 48px}:host .feature{width:calc(50% - 12px)}}@media (min-width: 960px){:host{padding:0 64px}:host .feature{width:calc(25% - 12px)}}\n"] }]
+                    }, template: "<div class=\"feature-list\">\n  @for (feature of viewModel; track feature.headline) {\n    <div class=\"feature\">\n      <h2>{{ feature.headline }}</h2>\n      <p>{{ feature.description }}</p>\n    </div>\n  }\n</div>\n\n", styles: [":host{margin-top:64px;margin-bottom:64px;width:100%;display:block;padding:0 24px}:host .feature-list{margin:0 auto;display:flex;flex-wrap:wrap;gap:16px;max-width:1248px;pointer-events:none}:host .feature{width:100%;border-radius:4px;background-color:var(--soft-background);display:flex;flex-direction:column;padding:24px;pointer-events:all}:host .feature h2{margin:0;line-height:24px;font-size:16px;font-weight:600}:host .feature p{flex-grow:1;padding-top:8px;line-height:24px;font-size:14px;font-weight:500;color:var(--secondary-text)}@media(min-width:640px){:host{padding:0 48px}:host .feature{width:calc(50% - 12px)}}@media(min-width:960px){:host{padding:0 64px}:host .feature{width:calc(25% - 12px)}}\n"] }]
         }] });
 
 class FHomePageFooterComponent {
     viewModel = inject(HomeStore).getFooter();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: FHomePageFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: FHomePageFooterComponent, isStandalone: true, selector: "footer[f-home-page-footer]", ngImport: i0, template: "<div class=\"content\">\n  <div class=\"flex-space\"></div>\n  <div>\n    <div class=\"item\">Created with Foblex <a href=\"https://m-render.foblex.com/\" target=\"_blank\">MRender</a></div>\n    <div class=\"item\">{{ viewModel.text }}</div>\n  </div>\n</div>\n\n", styles: [":host{position:relative;z-index:5;padding:0 24px}:host .content{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;width:100%;height:64px;max-width:1376px;margin:0 auto}:host .item{line-height:20px;font-size:12px;font-weight:500;color:var(--secondary-text);text-align:right}@media (min-width: 640px){:host{padding:0 48px}}@media (min-width: 960px){:host{padding:0 64px}}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FHomePageFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", 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: "20.1.8", ngImport: i0, type: FHomePageFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FHomePageFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'footer[f-home-page-footer]', standalone: true, template: "<div class=\"content\">\n  <div class=\"flex-space\"></div>\n  <div>\n    <div class=\"item\">Created with Foblex <a href=\"https://m-render.foblex.com/\" target=\"_blank\">MRender</a></div>\n    <div class=\"item\">{{ viewModel.text }}</div>\n  </div>\n</div>\n\n", styles: [":host{position:relative;z-index:5;padding:0 24px}:host .content{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;width:100%;height:64px;max-width:1376px;margin:0 auto}:host .item{line-height:20px;font-size:12px;font-weight:500;color:var(--secondary-text);text-align:right}@media (min-width: 640px){:host{padding:0 48px}}@media (min-width: 960px){:host{padding:0 64px}}\n"] }]
+            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 {
     logo = inject(HomeStore).getLogo();
     title = inject(HomeStore).getTitle();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: FHomePageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: FHomePageHeaderComponent, isStandalone: true, selector: "header[f-home-page-header]", ngImport: i0, template: "<div class=\"content\">\n  <a class=\"logo-link\" href=\"\" aria-label=\"Home\">\n    <img [src]=\"logo\" class=\"logo\" alt=\"{{ title }} Logo\" width=\"24\" height=\"24\"/>\n    <span class=\"title\">{{ title }}</span>\n  </a>\n\n  <div class=\"flex-space\"></div>\n  <button theme-button aria-label=\"Change theme\"></button>\n</div>\n\n", styles: [":host{position:relative;z-index:5;padding:0 24px}:host .logo-link{display:flex;align-items:center;text-decoration:none}:host .content{display:flex;justify-content:flex-start;align-items:center;width:100%;height:64px;max-width:1376px;margin:0 auto}:host .logo{margin-right:8px}:host .title{display:flex;align-items:center;border-bottom:1px solid transparent;width:100%;font-size:16px;font-weight:600;color:var(--primary-text)}@media (min-width: 640px){:host{padding:0 48px}}@media (min-width: 960px){:host{padding:0 64px}}.divider{margin-right:8px;margin-left:8px;width:1px;height:24px;background-color:var(--divider-color);content:\"\"}\n"], dependencies: [{ kind: "component", type: ThemeButtonComponent, selector: "button[theme-button]" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FHomePageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: FHomePageHeaderComponent, isStandalone: true, selector: "header[f-home-page-header]", ngImport: i0, template: "<div class=\"content\">\n  <f-brand-link class=\"logo-link\" [title]=\"title\" [logo]=\"logo\" [logoAlt]=\"title + ' Logo'\" />\n\n  <div class=\"flex-space\"></div>\n  <button theme-button aria-label=\"Change theme\"></button>\n</div>\n", styles: [":host{position:relative;z-index:5;padding:0 24px}:host .logo-link{display:flex;align-items:center;color:var(--primary-text);font-size:16px;font-weight:600;width:100%;min-width:0}:host .content{display:flex;justify-content:flex-start;align-items:center;width:100%;height:64px;max-width:1376px;margin:0 auto}@media(min-width:640px){:host{padding:0 48px}}@media(min-width:960px){:host{padding:0 64px}}\n"], dependencies: [{ kind: "component", type: FBrandLinkComponent, selector: "f-brand-link", inputs: ["title", "logo", "ariaLabel", "logoAlt", "href", "routerLink"] }, { kind: "component", type: ThemeButtonComponent, selector: "button[theme-button]" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: FHomePageHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FHomePageHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'header[f-home-page-header]', standalone: true, imports: [
+                        FBrandLinkComponent,
                         ThemeButtonComponent,
-                    ], template: "<div class=\"content\">\n  <a class=\"logo-link\" href=\"\" aria-label=\"Home\">\n    <img [src]=\"logo\" class=\"logo\" alt=\"{{ title }} Logo\" width=\"24\" height=\"24\"/>\n    <span class=\"title\">{{ title }}</span>\n  </a>\n\n  <div class=\"flex-space\"></div>\n  <button theme-button aria-label=\"Change theme\"></button>\n</div>\n\n", styles: [":host{position:relative;z-index:5;padding:0 24px}:host .logo-link{display:flex;align-items:center;text-decoration:none}:host .content{display:flex;justify-content:flex-start;align-items:center;width:100%;height:64px;max-width:1376px;margin:0 auto}:host .logo{margin-right:8px}:host .title{display:flex;align-items:center;border-bottom:1px solid transparent;width:100%;font-size:16px;font-weight:600;color:var(--primary-text)}@media (min-width: 640px){:host{padding:0 48px}}@media (min-width: 960px){:host{padding:0 64px}}.divider{margin-right:8px;margin-left:8px;width:1px;height:24px;background-color:var(--divider-color);content:\"\"}\n"] }]
+                    ], template: "<div class=\"content\">\n  <f-brand-link class=\"logo-link\" [title]=\"title\" [logo]=\"logo\" [logoAlt]=\"title + ' Logo'\" />\n\n  <div class=\"flex-space\"></div>\n  <button theme-button aria-label=\"Change theme\"></button>\n</div>\n", styles: [":host{position:relative;z-index:5;padding:0 24px}:host .logo-link{display:flex;align-items:center;color:var(--primary-text);font-size:16px;font-weight:600;width:100%;min-width:0}:host .content{display:flex;justify-content:flex-start;align-items:center;width:100%;height:64px;max-width:1376px;margin:0 auto}@media(min-width:640px){:host{padding:0 48px}}@media(min-width:960px){:host{padding:0 64px}}\n"] }]
         }] });
 
 class FHomePageHeroComponent {
     viewModel = inject(HomeStore).getHero();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: FHomePageHeroComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", 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);-webkit-background-clip:text;background-clip:text;color:transparent}.second-description{line-height:28px;font-size:18px;font-weight:500;white-space:pre-wrap;color:var(--secondary-text);margin:0 auto;width:fit-content;pointer-events:all;text-align:center;padding:8px 16px 0}@media (min-width: 640px){.second-description{padding-top:12px;line-height:32px;font-size:20px}}@media (min-width: 960px){.second-description{line-height:36px;font-size:24px;margin:0;text-align:left;padding:8px 0 0}}\n"], dependencies: [{ kind: "component", type: FHomePageButtonsRowComponent, selector: "f-home-page-buttons-row" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FHomePageHeroComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", 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);-webkit-background-clip:text;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: "20.1.8", ngImport: i0, type: FHomePageHeroComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", 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%;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);-webkit-background-clip:text;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);-webkit-background-clip:text;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 {
     viewModel = inject(HomeStore).getMemberships();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: FHomePageMembershipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: FHomePageMembershipsComponent, isStandalone: true, selector: "f-home-page-memberships", host: { properties: { "class.display-none": "!viewModel.length" } }, ngImport: i0, template: "<div class=\"membership-list\">\n  @for (membership of viewModel; track membership.id) {\n    <div class=\"membership\">\n      <h2>{{ membership.name }}</h2>\n      <p>{{ membership.description }}</p>\n      <div class=\"benefit-list\">\n        @for (benefit of membership.benefits; track benefit) {\n          <p class=\"benefit\">\u2705 {{ benefit }}</p>\n        }\n      </div>\n      <a class=\"f-button\" [href]=\"membership.buttonRef\">{{ membership.buttonText }}</a>\n    </div>\n  }\n</div>\n", styles: [":host{margin-top:64px;margin-bottom:64px;width:100%;display:block;padding:0 24px}:host .membership-list{margin:0 auto;display:flex;flex-wrap:wrap;gap:16px;max-width:1248px;pointer-events:none}:host .membership{width:100%;border-radius:4px;background-color:var(--soft-background);display:flex;flex-direction:column;padding:24px;position:relative;pointer-events:all}:host .membership h2{margin:0;line-height:24px;font-size:16px;font-weight:600}:host .membership p{flex-grow:1;padding-top:8px;line-height:24px;font-size:14px;font-weight:500;color:var(--secondary-text)}:host .membership .price{color:var(--primary-text);font-size:1.2rem;font-weight:700;padding-top:16px}:host .membership .price span{font-weight:600;color:var(--primary-color)}:host .membership .benefit-list{display:flex;flex-direction:column;padding:16px 0}@media (min-width: 640px){:host{padding:0 48px}:host .membership{width:calc(50% - 12px);min-width:unset}}@media (min-width: 960px){:host{padding:0 64px}:host .membership{width:calc(25% - 12px);min-width:300px}}.ribbon{position:absolute;top:-10px;right:-10px;color:var(--button-primary-text);background-color:var(--button-primary-bg);padding:4px 8px;font-size:.8rem;border-radius:2px}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FHomePageMembershipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: FHomePageMembershipsComponent, isStandalone: true, selector: "f-home-page-memberships", host: { properties: { "class.display-none": "!viewModel.length" } }, ngImport: i0, template: "<div class=\"membership-list\">\n  @for (membership of viewModel; track membership.id) {\n    <div class=\"membership\">\n      <h2>{{ membership.name }}</h2>\n      <p>{{ membership.description }}</p>\n      <div class=\"benefit-list\">\n        @for (benefit of membership.benefits; track benefit) {\n          <p class=\"benefit\">\u2705 {{ benefit }}</p>\n        }\n      </div>\n      <a class=\"f-button\" [href]=\"membership.buttonRef\">{{ membership.buttonText }}</a>\n    </div>\n  }\n</div>\n", styles: [":host{margin-top:64px;margin-bottom:64px;width:100%;display:block;padding:0 24px}:host .membership-list{margin:0 auto;display:flex;flex-wrap:wrap;gap:16px;max-width:1248px;pointer-events:none}:host .membership{width:100%;border-radius:4px;background-color:var(--soft-background);display:flex;flex-direction:column;padding:24px;position:relative;pointer-events:all}:host .membership h2{margin:0;line-height:24px;font-size:16px;font-weight:600}:host .membership p{flex-grow:1;padding-top:8px;line-height:24px;font-size:14px;font-weight:500;color:var(--secondary-text)}:host .membership .price{color:var(--primary-text);font-size:1.2rem;font-weight:700;padding-top:16px}:host .membership .price span{font-weight:600;color:var(--primary-color)}:host .membership .benefit-list{display:flex;flex-direction:column;padding:16px 0}@media(min-width:640px){:host{padding:0 48px}:host .membership{width:calc(50% - 12px);min-width:unset}}@media(min-width:960px){:host{padding:0 64px}:host .membership{width:calc(25% - 12px);min-width:300px}}.ribbon{position:absolute;top:-10px;right:-10px;color:var(--button-primary-text);background-color:var(--button-primary-bg);padding:4px 8px;font-size:.8rem;border-radius:2px}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: FHomePageMembershipsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FHomePageMembershipsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-home-page-memberships', standalone: true, host: {
                         '[class.display-none]': '!viewModel.length',
-                    }, template: "<div class=\"membership-list\">\n  @for (membership of viewModel; track membership.id) {\n    <div class=\"membership\">\n      <h2>{{ membership.name }}</h2>\n      <p>{{ membership.description }}</p>\n      <div class=\"benefit-list\">\n        @for (benefit of membership.benefits; track benefit) {\n          <p class=\"benefit\">\u2705 {{ benefit }}</p>\n        }\n      </div>\n      <a class=\"f-button\" [href]=\"membership.buttonRef\">{{ membership.buttonText }}</a>\n    </div>\n  }\n</div>\n", styles: [":host{margin-top:64px;margin-bottom:64px;width:100%;display:block;padding:0 24px}:host .membership-list{margin:0 auto;display:flex;flex-wrap:wrap;gap:16px;max-width:1248px;pointer-events:none}:host .membership{width:100%;border-radius:4px;background-color:var(--soft-background);display:flex;flex-direction:column;padding:24px;position:relative;pointer-events:all}:host .membership h2{margin:0;line-height:24px;font-size:16px;font-weight:600}:host .membership p{flex-grow:1;padding-top:8px;line-height:24px;font-size:14px;font-weight:500;color:var(--secondary-text)}:host .membership .price{color:var(--primary-text);font-size:1.2rem;font-weight:700;padding-top:16px}:host .membership .price span{font-weight:600;color:var(--primary-color)}:host .membership .benefit-list{display:flex;flex-direction:column;padding:16px 0}@media (min-width: 640px){:host{padding:0 48px}:host .membership{width:calc(50% - 12px);min-width:unset}}@media (min-width: 960px){:host{padding:0 64px}:host .membership{width:calc(25% - 12px);min-width:300px}}.ribbon{position:absolute;top:-10px;right:-10px;color:var(--button-primary-text);background-color:var(--button-primary-bg);padding:4px 8px;font-size:.8rem;border-radius:2px}\n"] }]
+                    }, template: "<div class=\"membership-list\">\n  @for (membership of viewModel; track membership.id) {\n    <div class=\"membership\">\n      <h2>{{ membership.name }}</h2>\n      <p>{{ membership.description }}</p>\n      <div class=\"benefit-list\">\n        @for (benefit of membership.benefits; track benefit) {\n          <p class=\"benefit\">\u2705 {{ benefit }}</p>\n        }\n      </div>\n      <a class=\"f-button\" [href]=\"membership.buttonRef\">{{ membership.buttonText }}</a>\n    </div>\n  }\n</div>\n", styles: [":host{margin-top:64px;margin-bottom:64px;width:100%;display:block;padding:0 24px}:host .membership-list{margin:0 auto;display:flex;flex-wrap:wrap;gap:16px;max-width:1248px;pointer-events:none}:host .membership{width:100%;border-radius:4px;background-color:var(--soft-background);display:flex;flex-direction:column;padding:24px;position:relative;pointer-events:all}:host .membership h2{margin:0;line-height:24px;font-size:16px;font-weight:600}:host .membership p{flex-grow:1;padding-top:8px;line-height:24px;font-size:14px;font-weight:500;color:var(--secondary-text)}:host .membership .price{color:var(--primary-text);font-size:1.2rem;font-weight:700;padding-top:16px}:host .membership .price span{font-weight:600;color:var(--primary-color)}:host .membership .benefit-list{display:flex;flex-direction:column;padding:16px 0}@media(min-width:640px){:host{padding:0 48px}:host .membership{width:calc(50% - 12px);min-width:unset}}@media(min-width:960px){:host{padding:0 64px}:host .membership{width:calc(25% - 12px);min-width:300px}}.ribbon{position:absolute;top:-10px;right:-10px;color:var(--button-primary-text);background-color:var(--button-primary-bg);padding:4px 8px;font-size:.8rem;border-radius:2px}\n"] }]
         }] });
 
 class HomeRootComponent {
@@ -3372,12 +3927,12 @@ class HomeRootComponent {
     _requestComponentRedraw(componentRef) {
         componentRef.changeDetectorRef.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: HomeRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: HomeRootComponent, isStandalone: true, selector: "home-root", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HomeRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: HomeRootComponent, isStandalone: true, selector: "home-root", providers: [
             HomeStore,
-        ], viewQueries: [{ propertyName: "_backgroundContainer", first: true, predicate: ["backgroundContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_heroImageContainer", first: true, predicate: ["heroImageContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<ng-container #backgroundContainer></ng-container>\n<header f-home-page-header></header>\n\n<div class=\"body\">\n  <div class=\"hero-row\">\n    <f-home-page-hero></f-home-page-hero>\n    <ng-container #heroImageContainer></ng-container>\n  </div>\n  <f-home-page-features></f-home-page-features>\n  <f-home-page-memberships></f-home-page-memberships>\n</div>\n\n<div class=\"flex-space\"></div>\n<footer f-home-page-footer></footer>\n\n@defer (when isBrowser) {\n  <cookie-popup/>\n}\n", styles: [":host{display:flex;flex-direction:column;position:relative;width:100%;height:100%;min-height:100%;overflow:hidden;overflow-y:auto}.body{position:relative;z-index:3;pointer-events:none}@media (min-width: 960px){.body{margin-top:50px}}@media (min-width: 1376px){.body{margin-top:100px}}.hero-row{display:flex;flex-direction:column-reverse;justify-content:space-between;align-items:center;margin:0 auto}@media (min-width: 960px){.hero-row{flex-direction:row;margin-left:64px;margin-right:64px}}@media (min-width: 1376px){.hero-row{flex-direction:row;margin-left:calc(50% - 624px);margin-right:calc(50% - 624px)}}\n"], dependencies: [{ kind: "component", type: FHomePageFooterComponent, selector: "footer[f-home-page-footer]" }, { kind: "component", type: FHomePageHeaderComponent, selector: "header[f-home-page-header]" }, { kind: "component", type: FHomePageFeaturesComponent, selector: "f-home-page-features" }, { kind: "component", type: FHomePageHeroComponent, selector: "f-home-page-hero" }, { kind: "component", type: FHomePageMembershipsComponent, selector: "f-home-page-memberships" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [import('./foblex-m-render-cookie-popup.component-Cx-ELX3C.mjs').then(m => m.CookiePopupComponent)]] });
+        ], viewQueries: [{ propertyName: "_backgroundContainer", first: true, predicate: ["backgroundContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_heroImageContainer", first: true, predicate: ["heroImageContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<ng-container #backgroundContainer></ng-container>\n<header f-home-page-header></header>\n\n<div class=\"body\">\n  <div class=\"hero-row\">\n    <f-home-page-hero></f-home-page-hero>\n    <ng-container #heroImageContainer></ng-container>\n  </div>\n  <f-home-page-features></f-home-page-features>\n  <f-home-page-memberships></f-home-page-memberships>\n</div>\n\n<div class=\"flex-space\"></div>\n<footer f-home-page-footer></footer>\n\n@defer (when isBrowser) {\n  <cookie-popup/>\n}\n", styles: [":host{display:flex;flex-direction:column;position:relative;width:100%;height:100%;min-height:100%;overflow:hidden;overflow-y:auto}.body{position:relative;z-index:3;pointer-events:none}@media(min-width:960px){.body{margin-top:50px}}@media(min-width:1376px){.body{margin-top:100px}}.hero-row{display:flex;flex-direction:column-reverse;justify-content:space-between;align-items:center;margin:0 auto}@media(min-width:960px){.hero-row{flex-direction:row;margin-left:64px;margin-right:64px}}@media(min-width:1376px){.hero-row{flex-direction:row;margin-left:calc(50% - 624px);margin-right:calc(50% - 624px)}}\n"], dependencies: [{ kind: "component", type: FHomePageFooterComponent, selector: "footer[f-home-page-footer]" }, { kind: "component", type: FHomePageHeaderComponent, selector: "header[f-home-page-header]" }, { kind: "component", type: FHomePageFeaturesComponent, selector: "f-home-page-features" }, { kind: "component", type: FHomePageHeroComponent, selector: "f-home-page-hero" }, { kind: "component", type: FHomePageMembershipsComponent, selector: "f-home-page-memberships" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [import('./foblex-m-render-cookie-popup-DzpgC1SS.mjs').then(m => m.CookiePopup)]] });
 }
-i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.1.8", ngImport: i0, type: HomeRootComponent, resolveDeferredDeps: () => [import('./foblex-m-render-cookie-popup.component-Cx-ELX3C.mjs').then(m => m.CookiePopupComponent)], resolveMetadata: CookiePopupComponent => ({ decorators: [{
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.1.4", ngImport: i0, type: HomeRootComponent, resolveDeferredDeps: () => [import('./foblex-m-render-cookie-popup-DzpgC1SS.mjs').then(m => m.CookiePopup)], resolveMetadata: CookiePopup => ({ decorators: [{
                 type: Component,
                 args: [{ selector: 'home-root', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                             HomeStore,
@@ -3387,8 +3942,8 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.1.8", ng
                             FHomePageFeaturesComponent,
                             FHomePageHeroComponent,
                             FHomePageMembershipsComponent,
-                            CookiePopupComponent,
-                        ], template: "<ng-container #backgroundContainer></ng-container>\n<header f-home-page-header></header>\n\n<div class=\"body\">\n  <div class=\"hero-row\">\n    <f-home-page-hero></f-home-page-hero>\n    <ng-container #heroImageContainer></ng-container>\n  </div>\n  <f-home-page-features></f-home-page-features>\n  <f-home-page-memberships></f-home-page-memberships>\n</div>\n\n<div class=\"flex-space\"></div>\n<footer f-home-page-footer></footer>\n\n@defer (when isBrowser) {\n  <cookie-popup/>\n}\n", styles: [":host{display:flex;flex-direction:column;position:relative;width:100%;height:100%;min-height:100%;overflow:hidden;overflow-y:auto}.body{position:relative;z-index:3;pointer-events:none}@media (min-width: 960px){.body{margin-top:50px}}@media (min-width: 1376px){.body{margin-top:100px}}.hero-row{display:flex;flex-direction:column-reverse;justify-content:space-between;align-items:center;margin:0 auto}@media (min-width: 960px){.hero-row{flex-direction:row;margin-left:64px;margin-right:64px}}@media (min-width: 1376px){.hero-row{flex-direction:row;margin-left:calc(50% - 624px);margin-right:calc(50% - 624px)}}\n"] }]
+                            CookiePopup,
+                        ], template: "<ng-container #backgroundContainer></ng-container>\n<header f-home-page-header></header>\n\n<div class=\"body\">\n  <div class=\"hero-row\">\n    <f-home-page-hero></f-home-page-hero>\n    <ng-container #heroImageContainer></ng-container>\n  </div>\n  <f-home-page-features></f-home-page-features>\n  <f-home-page-memberships></f-home-page-memberships>\n</div>\n\n<div class=\"flex-space\"></div>\n<footer f-home-page-footer></footer>\n\n@defer (when isBrowser) {\n  <cookie-popup/>\n}\n", styles: [":host{display:flex;flex-direction:column;position:relative;width:100%;height:100%;min-height:100%;overflow:hidden;overflow-y:auto}.body{position:relative;z-index:3;pointer-events:none}@media(min-width:960px){.body{margin-top:50px}}@media(min-width:1376px){.body{margin-top:100px}}.hero-row{display:flex;flex-direction:column-reverse;justify-content:space-between;align-items:center;margin:0 auto}@media(min-width:960px){.hero-row{flex-direction:row;margin-left:64px;margin-right:64px}}@media(min-width:1376px){.hero-row{flex-direction:row;margin-left:calc(50% - 624px);margin-right:calc(50% - 624px)}}\n"] }]
             }], ctorParameters: null, propDecorators: { _backgroundContainer: [{
                     type: ViewChild,
                     args: ['backgroundContainer', { read: ViewContainerRef }]
@@ -3429,5 +3984,5 @@ var index = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { AVAILABLE_LANGUAGES, ActivateTocByHash, ActivateTocByHashRequest, CalculateAbsoluteTopToContainer, CalculateAbsoluteTopToContainerRequest, CalculateHashFromScrollPosition, CalculateTableOfContent, CalculateTableOfContentRequest, CodeGroup, CodeView, DOCUMENTATION_CONFIGURATION, DOCUMENTATION_ROUTES, DOCUMENT_ELEMENT, DYNAMIC_COMPONENTS_MODULE_PROVIDERS, Documentation, DocumentationStore, DropdownMenu, DynamicComponentsStore, EMarkdownContainerType, EParsedContainerType, EXTERNAL_COMPONENT_PROVIDER, ExternalComponent, FCheckboxComponent, FHomePageButtonsRowComponent, FHomePageFeaturesComponent, FHomePageFooterComponent, FHomePageHeaderComponent, FHomePageHeroComponent, FHomePageMembershipsComponent, FMetaService, FNavigationItemComponent, FRadioButtonComponent, FSearchButtonComponent, F_PREVIEW_NAVIGATION_PROVIDER, FooterNavigationButton, GTAG_CONFIG, GTagService, GetPreviousNextPageNavigationHandler, GetPreviousNextPageNavigationRequest, GetPreviousNextPageNavigationResponse, HEADER_CONFIGURATION_PROVIDER, HOME_PAGE_CONFIGURATION, HOME_ROUTES, HamburgerButton, HandleNavigationLinksHandler, HandleNavigationLinksRequest, HeaderComponent, HeaderMenuBase, Highlight, HighlightService, HomeRootComponent, HomeStore, IS_BROWSER_PLATFORM, InlineMenu, LOCAL_STORAGE, LOCATION, MEDIA_LINKS_PROVIDER, MExecution, MarkCodeFocusedBlocksPostProcessor, MarkdownFooter, MarkdownRenderer, MarkdownRouter, MarkdownService, MediaLinks, Mediatr, NavigationGroupComponent, NavigationPanelComponent, ParseAlerts, ParseAngularExampleWithCodeLinks, ParseGroupedCodeItems, ParsePreviewGroup, ParseShowcase, ParseSingleCodeItem, PopoverService, PreviewActionBar, PreviewCard, PreviewCardBase, PreviewGroupService, RenderDynamicComponent, RenderDynamicComponentRequest, RenderExternalComponent, RenderExternalComponentRequest, RenderInternalComponents, RenderInternalComponentsRequest, SCROLLABLE_CONTAINER, SHOWCASE_DATA, ScrollToElementInContainer, ScrollToElementInContainerRequest, ScrollableContainer, Showcase, ShowcaseItem, TABLE_OF_CONTENT_MODULE_PROVIDERS, TOGGLE_NAVIGATION_COMPONENT, TableOfContent, TableOfContentData, TableOfContentItemsComponent, ThemeButtonComponent, ThemeService, UNIVERSAL_THEME, WINDOW, calculateMarkdownUrl, coerceComponentHeight$1 as coerceComponentHeight, copyToClipboard, defineLazyComponent, defineNavigationGroup, encodeDataAttr, extractComponent, getContent, isClosingToken, isOpeningToken, parseComponentTag, parseFileLinkLine, parseSingleBracketText, provide404Markdown, provideBackground, provideComponents, provideDirectory, provideDocumentation, provideFooterNavigation, provideGTag, provideHeader, provideHeaderMediaLinks, provideHeaderNavigation, provideHeaderSearch, provideHero, provideHomeButtons, provideHomeFeatures, provideHomeFooter, provideHomePage, provideImage, provideLanguage, provideLogo, provideMeta, provideNavigation, provideShowcase, provideTableOfContent, provideTheme, provideTitle };
+export { AVAILABLE_LANGUAGES, ActivateTocByHash, ActivateTocByHashRequest, CalculateAbsoluteTopToContainer, CalculateAbsoluteTopToContainerRequest, CalculateHashFromScrollPosition, CalculateTableOfContent, CalculateTableOfContentRequest, CodeGroup, CodeView, DEFAULT_MARKDOWN_PAGE_LAYOUT_OPTIONS, DOCUMENTATION_CONFIGURATION, DOCUMENTATION_ROUTES, DOCUMENT_ELEMENT, DYNAMIC_COMPONENTS_MODULE_PROVIDERS, Documentation, DocumentationStore, DropdownMenu, DynamicComponentsStore, EMarkdownContainerType, EParsedContainerType, EXTERNAL_COMPONENT_PROVIDER, ExternalComponent, FBrandLinkComponent, FCheckboxComponent, FHomePageButtonsRowComponent, FHomePageFeaturesComponent, FHomePageFooterComponent, FHomePageHeaderComponent, FHomePageHeroComponent, FHomePageMembershipsComponent, FMetaService, FNavigationItemComponent, FRadioButtonComponent, FSearchButtonComponent, F_PREVIEW_NAVIGATION_PROVIDER, FooterNavigationButton, GTAG_CONFIG, GTagService, GetPreviousNextPageNavigationHandler, GetPreviousNextPageNavigationRequest, GetPreviousNextPageNavigationResponse, HEADER_CONFIGURATION_PROVIDER, HOME_PAGE_CONFIGURATION, HOME_ROUTES, HamburgerButton, HandleNavigationLinksHandler, HandleNavigationLinksRequest, HeaderComponent, HeaderMenuBase, Highlight, HighlightService, HomeRootComponent, HomeStore, IS_BROWSER_PLATFORM, InlineMenu, LOCAL_STORAGE, LOCATION, MEDIA_LINKS_PROVIDER, MExecution, MarkCodeFocusedBlocksPostProcessor, MarkdownFooter, MarkdownRenderer, MarkdownRouter, MarkdownService, MediaLinks, Mediatr, NavigationGroupComponent, NavigationPanelComponent, ParseAlerts, ParseAngularExampleWithCodeLinks, ParseGroupedCodeItems, ParsePreviewGroup, ParseShowcase, ParseSingleCodeItem, PopoverService, PreviewActionBar, PreviewCard, PreviewCardBase, PreviewGroupService, RenderDynamicComponent, RenderDynamicComponentRequest, RenderExternalComponent, RenderExternalComponentRequest, RenderInternalComponents, RenderInternalComponentsRequest, SCROLLABLE_CONTAINER, SHOWCASE_DATA, ScrollToElementInContainer, ScrollToElementInContainerRequest, ScrollableContainer, Showcase, ShowcaseItem, TABLE_OF_CONTENT_MODULE_PROVIDERS, TOGGLE_NAVIGATION_COMPONENT, TableOfContent, TableOfContentData, TableOfContentItemsComponent, ThemeButtonComponent, ThemeService, UNIVERSAL_THEME, WINDOW, calculateMarkdownUrl, coerceComponentHeight$1 as coerceComponentHeight, copyToClipboard, defineLazyComponent, defineNavigationGroup, encodeDataAttr, extractComponent, getContent, getLanguageLoader, isClosingToken, isOpeningToken, parseComponentTag, parseFileLinkLine, parseIframeUrl, parseSingleBracketText, provide404Markdown, provideBackground, provideComponents, provideDirectory, provideDocumentation, provideFooterNavigation, provideGTag, provideHeader, provideHeaderMediaLinks, provideHeaderNavigation, provideHeaderSearch, provideHero, provideHomeButtons, provideHomeFeatures, provideHomeFooter, provideHomePage, provideImage, provideLanguage, provideLogo, provideMeta, provideNavigation, provideShowcase, provideTableOfContent, provideTheme, provideTitle, resolveHighlightLanguage };
 //# sourceMappingURL=foblex-m-render.mjs.map