@foblex/m-render 2.5.4 → 2.5.6

package/fesm2022/foblex-m-render.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, booleanAttribute, Component, ChangeDetectionStrategy, Input, Output, ViewChild, HostListener, inject, Injectable, Inject, signal, InjectionToken, Optional, ViewChildren, ViewContainerRef, ElementRef, DestroyRef, ChangeDetectorRef } from '@angular/core';
+import { EventEmitter, booleanAttribute, Component, ChangeDetectionStrategy, Input, Output, ViewChild, HostListener, inject, Injectable, Inject, signal, input, output, viewChild, Optional, ViewChildren, ViewContainerRef, ElementRef, DestroyRef, InjectionToken, ChangeDetectorRef } from '@angular/core';
 import * as i2 from '@foblex/platform';
 import { F_LOCAL_STORAGE } from '@foblex/platform';
-import { DOCUMENT, ɵgetDOM as _getDOM, AsyncPipe, JsonPipe } from '@angular/common';
+import { DOCUMENT, ɵgetDOM as _getDOM, AsyncPipe, JsonPipe, TitleCasePipe } from '@angular/common';
 import * as i1 from '@angular/router';
 import { NavigationEnd, Router, RouterLink, ActivatedRoute, RouterOutlet } from '@angular/router';
 import { startWith, filter, BehaviorSubject, Subject, of, map, Subscription, from, switchMap, Observable, fromEvent, debounceTime } from 'rxjs';
@@ -10,15 +10,15 @@ import { catchError, filter as filter$1, take, tap } from 'rxjs/operators';
 import * as i1$1 from '@angular/common/http';
 import { HttpClient } from '@angular/common/http';
 import { deepClone } from '@foblex/utils';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import container from 'markdown-it-container';
 import MarkdownIt from 'markdown-it';
 import * as i2$1 from '@angular/platform-browser';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
-let uniqueId = 0;
+let uniqueId$1 = 0;
 class FCheckboxComponent {
     changeDetectorRef;
-    id = `f-checkbox-${uniqueId++}`;
+    id = `f-checkbox-${uniqueId$1++}`;
     change = new EventEmitter();
     inputElement;
     labelElement;
@@ -388,6 +388,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             args: [{ selector: 'f-cookie-popup', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!hasAccepted()) {\n  <div class=\"docs-cookies-popup docs-invert-mode\">\n    <p>This site uses cookies from Google to deliver its services and to analyze traffic.</p>\n\n    <div>\n      <a href=\"https://policies.google.com/technologies/cookies\" target=\"_blank\" rel=\"noopener\">\n        <button class=\"f-button\" [attr.text]=\"'Learn more'\" aria-label=\"Learn More\">\n          Learn more\n        </button>\n      </a>\n      <button\n        (click)=\"accept()\"\n        class=\"f-button\"\n        [attr.text]=\"'Ok, Got it'\"\n        aria-label=\"Ok, Got it\">\n        Ok, Got it\n      </button>\n    </div>\n  </div>\n}\n", styles: [":host{position:fixed;bottom:16px;right:16px;z-index:99999;opacity:0;visibility:hidden;animation:1s linear forwards .5s fadeIn}.docs-cookies-popup{padding:1rem;background-color:var(--background-color);border:1px solid var(--divider-color);color:var(--primary-text);border-radius:var(--border-radius);font-size:14px;max-width:310px;transition:background-color .3s ease,border-color .3s ease,color .3s ease;box-shadow:var(--shadow-3)}.docs-cookies-popup>div{display:flex;gap:8px;align-items:center;width:100%;margin-block-start:1rem}.f-button{outline:none;border:none;height:unset;line-height:26px;font-size:14px;font-weight:500;border-radius:var(--border-radius)}@keyframes fadeIn{to{opacity:100%;visibility:visible}}\n"] }]
         }], ctorParameters: () => [] });
 
+let uniqueId = 0;
+class FRadioButtonComponent {
+    id = input(`f-radio-button-${uniqueId++}`);
+    change = output();
+    checked = input(false);
+    labelElement = viewChild('label');
+    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: "18.2.13", ngImport: i0, type: FRadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", 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: "18.2.13", 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']]
+            }] } });
+
 class FStateService {
     fBrowser;
     theme = new Subject();
@@ -541,8 +580,6 @@ class HandleNavigationLinksRequest {
     }
 }
 
-const INTERNAL_ENVIRONMENT_SERVICE = new InjectionToken('INTERNAL_ENVIRONMENT_SERVICE');
-
 class FBadgeComponent {
     text = '';
     type = 'tip';
@@ -856,7 +893,10 @@ class HandleDynamicComponentsHandler {
         this.dispose();
         const components = [
             {
-                tag: 'f-preview', component: FPreviewComponent
+                tag: 'f-preview', component: FPreviewComponent,
+            },
+            {
+                tag: 'f-preview-group-filters', component: FPreviewGroupFiltersComponent,
             },
             ...this.fEnvironmentService.getComponents()
         ];
@@ -1620,9 +1660,13 @@ class ParsePreviewGroup {
         return match ? match[1] : null;
     }
     getGroupsHTML(groups) {
-        return (groups || []).map((x) => {
+        const result = (groups || []).map((x) => {
             return `<h2>${x.text}</h2><div class="f-preview-group">${this.getItemsHTML(x)}</div>`;
         }).join('');
+        return this._getGroupFiltersHTML() + result;
+    }
+    _getGroupFiltersHTML() {
+        return `<f-preview-group-filters></f-preview-group-filters>`;
     }
     getItemsHTML(group) {
         return group.items.map((item) => {
@@ -2338,66 +2382,196 @@ var index$2 = /*#__PURE__*/Object.freeze({
     getContent: getContent
 });
 
-class FPreviewComponent {
-    fEnvironment;
-    fState;
-    router;
-    changeDetectorRef;
-    subscriptions$ = new Subscription();
+class FPreviewBase {
+}
+
+class FPreviewGroupService {
+    _fPreviews = [];
+    _originalOrder = null;
+    add(fPreview) {
+        this._fPreviews.push(fPreview);
+    }
+    remove(fPreview) {
+        this._fPreviews = this._fPreviews.filter(preview => preview !== fPreview);
+    }
+    sortByDate(sort) {
+        if (sort) {
+            this._applyByDateOrder();
+        }
+        else {
+            this._applyOriginalOrder();
+        }
+    }
+    _setOriginalOrder() {
+        this._originalOrder = new Map();
+        this._fPreviews.forEach((x) => {
+            const parentElement = x.hostElement.parentElement;
+            if (parentElement) {
+                const childrenArray = Array.from(parentElement.children);
+                this._originalOrder.set(parentElement, childrenArray);
+            }
+        });
+    }
+    _getOrderByDate() {
+        return this._fPreviews
+            .slice()
+            .sort((a, b) => {
+            const dateA = a.date ? a.date.getTime() : Number.MIN_SAFE_INTEGER;
+            const dateB = b.date ? b.date.getTime() : Number.MIN_SAFE_INTEGER;
+            return dateB - dateA;
+        });
+    }
+    _applyByDateOrder() {
+        this._setOriginalOrder();
+        this._getOrderByDate().forEach((x) => {
+            const parent = x.hostElement.parentElement;
+            parent?.appendChild(x.hostElement);
+        });
+    }
+    _applyOriginalOrder() {
+        this._originalOrder.forEach((originalChildren, parentElement) => {
+            originalChildren.forEach(child => parentElement.appendChild(child));
+        });
+    }
+    filterBy(filterKey, _allKey) {
+        this._resetLastActiveFilter();
+        if (filterKey === _allKey) {
+            return;
+        }
+        this._fPreviews.forEach((x) => {
+            if (x.filterKey !== filterKey) {
+                x.hostElement.style.display = 'none';
+            }
+        });
+    }
+    _resetLastActiveFilter() {
+        this._fPreviews.forEach((x) => {
+            x.hostElement.style.display = 'block';
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FPreviewGroupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FPreviewGroupService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FPreviewGroupService, decorators: [{
+            type: Injectable
+        }] });
+
+class FPreviewComponent extends FPreviewBase {
+    _elementReference = inject(ElementRef);
+    _fEnvironment = inject(FDocumentationEnvironmentService);
+    _fPreviewGroupService = inject(FPreviewGroupService);
+    _fState = inject(FStateService);
+    _router = inject(Router);
+    _destroyRef = inject(DestroyRef);
     item;
     group;
     viewModel;
-    src;
+    src = signal(undefined);
     url;
-    constructor(fEnvironment, fState, router, changeDetectorRef) {
-        this.fEnvironment = fEnvironment;
-        this.fState = fState;
-        this.router = router;
-        this.changeDetectorRef = changeDetectorRef;
+    get hostElement() {
+        return this._elementReference.nativeElement;
+    }
+    get filterKey() {
+        return this.viewModel?.badge?.text.toLowerCase();
+    }
+    get date() {
+        return this.viewModel?.date;
     }
     initialize() {
-        this.viewModel = this.getNavigationItem(this.getNavigationGroup());
-        this.url = this.normalizeLink(this.viewModel.link, this.getUrlPrefix());
-        this.subscriptions$.add(this.fState.theme$.pipe(startWith(null)).subscribe(() => this.updateTheme()));
+        this.viewModel = this._getNavigationItem(this._getNavigationGroup());
+        this.url = this._normalizeLink(this.viewModel.link, this._getUrlPrefix());
+        this._subscribeToThemeChanges();
+    }
+    _subscribeToThemeChanges() {
+        this._fState.theme$.pipe(startWith(null), takeUntilDestroyed(this._destroyRef)).subscribe(() => this.updateTheme());
     }
-    getNavigationGroup() {
-        return this.fEnvironment.getNavigation().find((x) => x.text === this.group);
+    ngOnInit() {
+        this._fPreviewGroupService.add(this);
+    }
+    _getNavigationGroup() {
+        return this._fEnvironment.getNavigation().find((x) => x.text === this.group);
     }
-    getNavigationItem(group) {
+    _getNavigationItem(group) {
         return group.items.find((x) => x.link === this.item);
     }
     updateTheme() {
-        this.src = this.fState.getPreferredTheme() === 'dark' ? this.viewModel?.image_dark : this.viewModel?.image;
-        if (!this.src) {
-            this.src = this.viewModel?.image;
+        this.src.set(this._fState.getPreferredTheme() === 'dark' ? this.viewModel?.image_dark : this.viewModel?.image);
+        if (!this.src()) {
+            this.src.set(this.viewModel?.image);
         }
-        this.changeDetectorRef.markForCheck();
     }
-    normalizeLink(link, prefix) {
-        if (!this.isExternalLink(link)) {
+    _normalizeLink(link, prefix) {
+        if (!this._isExternalLink(link)) {
             return link.startsWith('/') ? `${prefix}${link}` : `${prefix}/${link}`;
         }
         return link;
     }
-    getUrlPrefix() {
-        return this.router.url.substring(0, this.router.url.lastIndexOf('/'));
+    _getUrlPrefix() {
+        return this._router.url.substring(0, this._router.url.lastIndexOf('/'));
     }
-    isExternalLink(href) {
+    _isExternalLink(href) {
         return href.startsWith('www') || href.startsWith('http');
     }
     ngOnDestroy() {
-        this.subscriptions$.unsubscribe();
+        this._fPreviewGroupService.remove(this);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FPreviewComponent, deps: [{ token: FDocumentationEnvironmentService }, { token: FStateService }, { token: i1.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FPreviewComponent, isStandalone: true, selector: "a[f-preview]", host: { properties: { "attr.href": "url", "attr.title": "viewModel?.text" } }, ngImport: i0, template: "@if (viewModel) {\n  <img [src]=\"src\" [alt]=\"viewModel.description\" [title]=\"viewModel.text\">\n  <div class=\"title\">{{ viewModel.text }}</div>\n  <div class=\"description\">{{ viewModel.description }}</div>\n}\n\n\n\n", styles: [":host{display:block;border-radius:4px;background-color:var(--soft-background);padding:24px;width:100%;text-decoration:none!important;color:inherit!important;line-height:24px;font-size:14px;cursor:pointer}:host:hover img{transform:scale(1.1)}:host img{display:block;margin-bottom:16px;width:100%;height:180px;border-radius:4px;object-fit:cover;transition:transform .3s}:host .title{line-height:inherit;font-weight:600;text-transform:uppercase;color:var(--primary-text)}:host .description{margin:8px 0!important;line-height:inherit;color:var(--secondary-text);width:100%;word-wrap:break-word;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media (min-width: 640px){:host{width:calc((100% - 32px)/2)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FPreviewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FPreviewComponent, isStandalone: true, selector: "a[f-preview]", host: { properties: { "attr.href": "url", "attr.title": "viewModel?.text" } }, 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: "18.2.13", ngImport: i0, type: FPreviewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'a[f-preview]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.href]': 'url',
                         '[attr.title]': 'viewModel?.text',
-                    }, template: "@if (viewModel) {\n  <img [src]=\"src\" [alt]=\"viewModel.description\" [title]=\"viewModel.text\">\n  <div class=\"title\">{{ viewModel.text }}</div>\n  <div class=\"description\">{{ viewModel.description }}</div>\n}\n\n\n\n", styles: [":host{display:block;border-radius:4px;background-color:var(--soft-background);padding:24px;width:100%;text-decoration:none!important;color:inherit!important;line-height:24px;font-size:14px;cursor:pointer}:host:hover img{transform:scale(1.1)}:host img{display:block;margin-bottom:16px;width:100%;height:180px;border-radius:4px;object-fit:cover;transition:transform .3s}:host .title{line-height:inherit;font-weight:600;text-transform:uppercase;color:var(--primary-text)}:host .description{margin:8px 0!important;line-height:inherit;color:var(--secondary-text);width:100%;word-wrap:break-word;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media (min-width: 640px){:host{width:calc((100% - 32px)/2)}}\n"] }]
-        }], ctorParameters: () => [{ type: FDocumentationEnvironmentService }, { type: FStateService }, { type: i1.Router }, { type: i0.ChangeDetectorRef }] });
+                    }, 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"] }]
+        }] });
+
+class FPreviewGroupFiltersComponent {
+    _allKey = 'all';
+    _fEnvironment = inject(FDocumentationEnvironmentService);
+    _fPreviewGroupService = inject(FPreviewGroupService);
+    filters = signal([]);
+    activeFilter = signal(this._allKey);
+    isSortByDateChecked = signal(false);
+    initialize() {
+        this.filters.set(this._calculateFiltersMap());
+    }
+    ngAfterViewInit() {
+        this.onFilterChange(this._allKey);
+    }
+    _calculateFiltersMap() {
+        const filters = [];
+        this._fEnvironment.getNavigation().forEach((group) => {
+            group.items.forEach((item) => {
+                if (item.badge && !filters.includes(item.badge.text.toLowerCase())) {
+                    filters.push(item.badge.text.toLowerCase());
+                }
+            });
+        });
+        if (filters.length > 0) {
+            filters.unshift(this._allKey);
+        }
+        return filters;
+    }
+    onFilterChange(key) {
+        this.activeFilter.set(key);
+        this._fPreviewGroupService.filterBy(key, this._allKey);
+    }
+    onSortByDateChange(event) {
+        this.isSortByDateChecked.set(event);
+        this._fPreviewGroupService.sortByDate(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FPreviewGroupFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FPreviewGroupFiltersComponent, isStandalone: true, selector: "div[f-preview-group-filters]", ngImport: i0, template: "@if (filters().length) {\n  <div class=\"filters-row\">\n    @for (filter of filters(); track filter) {\n      <f-radio-button [checked]=\"activeFilter() === filter\"\n                      (change)=\"onFilterChange(filter)\">{{ filter | titlecase }}\n      </f-radio-button>\n    }\n    <div class=\"flex-space\"></div>\n    <f-checkbox [checked]=\"isSortByDateChecked()\" (change)=\"onSortByDateChange($event)\">Sort by Newness</f-checkbox>\n  </div>\n}\n\n\n\n", styles: [".filters-row{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;width:100%;padding-top:20px;gap:8px}\n"], dependencies: [{ kind: "component", type: FCheckboxComponent, selector: "f-checkbox", inputs: ["id", "checked"], outputs: ["change"] }, { kind: "component", type: FRadioButtonComponent, selector: "f-radio-button", inputs: ["id", "checked"], outputs: ["change"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FPreviewGroupFiltersComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'div[f-preview-group-filters]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        FCheckboxComponent,
+                        FRadioButtonComponent,
+                        TitleCasePipe
+                    ], 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"] }]
+        }] });
 
 const F_DOCUMENTATION_COMPONENT = new InjectionToken('F_DOCUMENTATION_COMPONENT');
 
@@ -2425,23 +2599,23 @@ class FDocumentationComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FDocumentationComponent, isStandalone: true, selector: "f-documentation", providers: [
             FDocumentationEnvironmentService,
             FPopoverService,
-            { provide: INTERNAL_ENVIRONMENT_SERVICE, useExisting: FDocumentationEnvironmentService },
+            FPreviewGroupService,
             { provide: F_DOCUMENTATION_COMPONENT, useExisting: FDocumentationComponent }
-        ], ngImport: i0, template: "<div class=\"f-backdrop\" [class.visible]=\"isNavigationVisible\" (click)=\"onToggleNavigation(false)\"></div>\n<f-navigation-panel [class.visible]=\"isNavigationVisible\"></f-navigation-panel>\n\n<f-scrollable-container>\n  <f-header></f-header>\n  <router-outlet></router-outlet>\n</f-scrollable-container>\n@if (popoverMessage) {\n  <div class=\"popover\">{{ popoverMessage }}</div>\n}\n", styles: [":host{display:flex;justify-content:flex-start;align-items:flex-start;height:100%;gap:10px}.f-backdrop{position:fixed;inset:0;opacity:0;z-index:var(--z-index-backdrop);background:var(--backdrop-color);transition:opacity .2s ease-in-out;pointer-events:none}.f-backdrop.visible{opacity:1;pointer-events:all}@media (min-width: 960px){.f-backdrop{position:unset}}.popover{position:fixed;min-width:120px;bottom:50%;left:50%;text-align:center;transform:translate(-50%,-50%);background-color:var(--code-view-copy-button-hover-background);border:1px solid var(--code-view-copy-button-border-color);color:var(--primary-text);font-size:14px;padding:4px 8px;border-radius:4px;z-index:var(--z-index-popover);opacity:1}\n"], dependencies: [{ kind: "component", type: FNavigationPanelComponent, selector: "f-navigation-panel" }, { kind: "component", type: FHeaderComponent, selector: "f-header" }, { kind: "component", type: FScrollableContainerComponent, selector: "f-scrollable-container" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<f-navigation-panel [class.visible]=\"isNavigationVisible\"></f-navigation-panel>\n<div class=\"f-backdrop\" [class.visible]=\"isNavigationVisible\" (click)=\"onToggleNavigation(false)\"></div>\n\n<f-scrollable-container>\n  <f-header></f-header>\n  <router-outlet></router-outlet>\n</f-scrollable-container>\n@if (popoverMessage) {\n  <div class=\"popover\">{{ popoverMessage }}</div>\n}\n", styles: [":host{display:flex;justify-content:flex-start;align-items:flex-start;height:100%;gap: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);color:var(--primary-text);font-size:14px;padding:4px 8px;border-radius:4px;z-index:var(--z-index-popover);opacity:1}\n"], dependencies: [{ kind: "component", type: FNavigationPanelComponent, selector: "f-navigation-panel" }, { kind: "component", type: FHeaderComponent, selector: "f-header" }, { kind: "component", type: FScrollableContainerComponent, selector: "f-scrollable-container" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FDocumentationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-documentation', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         FDocumentationEnvironmentService,
                         FPopoverService,
-                        { provide: INTERNAL_ENVIRONMENT_SERVICE, useExisting: FDocumentationEnvironmentService },
+                        FPreviewGroupService,
                         { provide: F_DOCUMENTATION_COMPONENT, useExisting: FDocumentationComponent }
                     ], imports: [
                         FNavigationPanelComponent,
                         FHeaderComponent,
                         FScrollableContainerComponent,
                         RouterOutlet
-                    ], template: "<div class=\"f-backdrop\" [class.visible]=\"isNavigationVisible\" (click)=\"onToggleNavigation(false)\"></div>\n<f-navigation-panel [class.visible]=\"isNavigationVisible\"></f-navigation-panel>\n\n<f-scrollable-container>\n  <f-header></f-header>\n  <router-outlet></router-outlet>\n</f-scrollable-container>\n@if (popoverMessage) {\n  <div class=\"popover\">{{ popoverMessage }}</div>\n}\n", styles: [":host{display:flex;justify-content:flex-start;align-items:flex-start;height:100%;gap:10px}.f-backdrop{position:fixed;inset:0;opacity:0;z-index:var(--z-index-backdrop);background:var(--backdrop-color);transition:opacity .2s ease-in-out;pointer-events:none}.f-backdrop.visible{opacity:1;pointer-events:all}@media (min-width: 960px){.f-backdrop{position:unset}}.popover{position:fixed;min-width:120px;bottom:50%;left:50%;text-align:center;transform:translate(-50%,-50%);background-color:var(--code-view-copy-button-hover-background);border:1px solid var(--code-view-copy-button-border-color);color:var(--primary-text);font-size:14px;padding:4px 8px;border-radius:4px;z-index:var(--z-index-popover);opacity:1}\n"] }]
+                    ], template: "<f-navigation-panel [class.visible]=\"isNavigationVisible\"></f-navigation-panel>\n<div class=\"f-backdrop\" [class.visible]=\"isNavigationVisible\" (click)=\"onToggleNavigation(false)\"></div>\n\n<f-scrollable-container>\n  <f-header></f-header>\n  <router-outlet></router-outlet>\n</f-scrollable-container>\n@if (popoverMessage) {\n  <div class=\"popover\">{{ popoverMessage }}</div>\n}\n", styles: [":host{display:flex;justify-content:flex-start;align-items:flex-start;height:100%;gap: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);color:var(--primary-text);font-size:14px;padding:4px 8px;border-radius:4px;z-index:var(--z-index-popover);opacity:1}\n"] }]
         }] });
 
 const F_DOCS_ENVIRONMENT = new InjectionToken('F_DOCS_ENVIRONMENT');
@@ -2486,7 +2660,10 @@ var index$1 = /*#__PURE__*/Object.freeze({
     FNavigationItemComponent: FNavigationItemComponent,
     FNavigationPanelComponent: FNavigationPanelComponent,
     FPageComponent: FPageComponent,
+    FPreviewBase: FPreviewBase,
     FPreviewComponent: FPreviewComponent,
+    FPreviewGroupFiltersComponent: FPreviewGroupFiltersComponent,
+    FPreviewGroupService: FPreviewGroupService,
     FScrollableContainerComponent: FScrollableContainerComponent,
     FSocialLinksComponent: FSocialLinksComponent,
     FTableOfContentComponent: FTableOfContentComponent,
@@ -2525,69 +2702,76 @@ var index$1 = /*#__PURE__*/Object.freeze({
 const F_HOME_PAGE_ENVIRONMENT = new InjectionToken('F_HOME_PAGE_ENVIRONMENT');
 
 class FHomePageEnvironmentService {
-    environment;
-    http;
-    constructor(environment, http) {
-        this.environment = environment;
-        this.http = http;
-    }
+    _environment = inject(F_HOME_PAGE_ENVIRONMENT);
     getLogo() {
-        return this.environment.logo;
+        return this._environment.logo;
     }
     getTitle() {
-        return this.environment.title;
+        return this._environment.title;
     }
     getHero() {
-        return this.environment.hero;
+        return this._environment.hero;
     }
     getButtons() {
-        return this.environment.buttons;
+        return this._environment.buttons || [];
     }
     getFeatures() {
-        return this.environment.features;
+        return this._environment.features || [];
+    }
+    getMemberships() {
+        return this._environment.memberships || [];
     }
     getFooter() {
-        return this.environment.footer;
+        return this._environment.footer;
     }
     getBackgroundComponent() {
-        return this.environment.backgroundComponent;
+        return this._environment.backgroundComponent;
     }
     getImageComponent() {
-        return this.environment.heroImageComponent;
+        return this._environment.heroImageComponent;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHomePageEnvironmentService, deps: [{ token: F_HOME_PAGE_ENVIRONMENT, optional: true }, { token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHomePageEnvironmentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHomePageEnvironmentService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHomePageEnvironmentService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [F_HOME_PAGE_ENVIRONMENT]
-                }] }, { type: i1$1.HttpClient }] });
+        }] });
 
 class FHomePageFeaturesComponent {
     viewModel = inject(FHomePageEnvironmentService).getFeatures();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHomePageFeaturesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FHomePageFeaturesComponent, isStandalone: true, selector: "f-home-page-features", ngImport: i0, template: "<div class=\"feature-list\">\n  @for (feature of viewModel; track feature.headline) {\n    <div class=\"feature\">\n      <h2>{{ feature.headline }}</h2>\n      <p>{{ feature.description }}</p>\n    </div>\n  }\n</div>\n\n", styles: [":host{margin-top:64px;margin-bottom:64px;width:100%;display:block;padding:0 24px}:host .feature-list{margin:0 auto;display:flex;flex-wrap:wrap;gap:16px;max-width:1248px;pointer-events:all}:host .feature{width:100%;border-radius:4px;background-color:var(--soft-background);display:flex;flex-direction:column;padding:24px}:host .feature h2{margin:0;line-height:24px;font-size:16px;font-weight:600}:host .feature p{flex-grow:1;padding-top:8px;line-height:24px;font-size:14px;font-weight:500;color:var(--secondary-text)}@media (min-width: 640px){:host{padding:0 48px}:host .feature{width:calc(50% - 12px)}}@media (min-width: 960px){:host{padding:0 64px}:host .feature{width:calc(25% - 12px)}}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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}:host .feature h2{margin:0;line-height:24px;font-size:16px;font-weight:600}:host .feature p{flex-grow:1;padding-top:8px;line-height:24px;font-size:14px;font-weight:500;color:var(--secondary-text)}@media (min-width: 640px){:host{padding:0 48px}:host .feature{width:calc(50% - 12px)}}@media (min-width: 960px){:host{padding:0 64px}:host .feature{width:calc(25% - 12px)}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHomePageFeaturesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'f-home-page-features', standalone: true, template: "<div class=\"feature-list\">\n  @for (feature of viewModel; track feature.headline) {\n    <div class=\"feature\">\n      <h2>{{ feature.headline }}</h2>\n      <p>{{ feature.description }}</p>\n    </div>\n  }\n</div>\n\n", styles: [":host{margin-top:64px;margin-bottom:64px;width:100%;display:block;padding:0 24px}:host .feature-list{margin:0 auto;display:flex;flex-wrap:wrap;gap:16px;max-width:1248px;pointer-events:all}:host .feature{width:100%;border-radius:4px;background-color:var(--soft-background);display:flex;flex-direction:column;padding:24px}:host .feature h2{margin:0;line-height:24px;font-size:16px;font-weight:600}:host .feature p{flex-grow:1;padding-top:8px;line-height:24px;font-size:14px;font-weight:500;color:var(--secondary-text)}@media (min-width: 640px){:host{padding:0 48px}:host .feature{width:calc(50% - 12px)}}@media (min-width: 960px){:host{padding:0 64px}:host .feature{width:calc(25% - 12px)}}\n"] }]
+            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}: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 FHomePageMembershipsComponent {
+    viewModel = inject(FHomePageEnvironmentService).getMemberships();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHomePageMembershipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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}: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}}:host a{pointer-events:all}.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: "18.2.13", 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}: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}}:host a{pointer-events:all}.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 FHomePageHeaderComponent {
     logo = inject(FHomePageEnvironmentService).getLogo();
     title = inject(FHomePageEnvironmentService).getTitle();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHomePageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FHomePageHeaderComponent, isStandalone: true, selector: "header[f-home-page-header]", ngImport: i0, template: "<div class=\"content\">\n  <img [src]=\"logo\" class=\"logo\" alt=\"{{ title }} Logo\" width=\"24\" height=\"24\"/>\n  <span class=\"title\">{{ title }}</span>\n  <div class=\"flex-space\"></div>\n  <button f-theme-button aria-label=\"Change theme\"></button>\n</div>\n\n", styles: [":host{position:relative;z-index:5;padding:0 24px}:host .content{display:flex;justify-content:flex-start;align-items:center;width:100%;height:64px;max-width:1376px;margin:0 auto}:host .logo{margin-right:8px}:host .title{display:flex;align-items:center;border-bottom:1px solid transparent;width:100%;font-size:16px;font-weight:600;color:var(--primary-text)}@media (min-width: 640px){:host{padding:0 48px}}@media (min-width: 960px){:host{padding:0 64px}}\n"], dependencies: [{ kind: "component", type: FThemeButtonComponent, selector: "button[f-theme-button]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FHomePageHeaderComponent, isStandalone: true, selector: "header[f-home-page-header]", ngImport: i0, template: "<div class=\"content\">\n  <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 f-theme-button aria-label=\"Change theme\"></button>\n</div>\n\n", styles: [":host{position:relative;z-index:5;padding:0 24px}:host .logo-link{display:flex;align-items:center;text-decoration:none}:host .content{display:flex;justify-content:flex-start;align-items:center;width:100%;height:64px;max-width:1376px;margin:0 auto}:host .logo{margin-right:8px}:host .title{display:flex;align-items:center;border-bottom:1px solid transparent;width:100%;font-size:16px;font-weight:600;color:var(--primary-text)}@media (min-width: 640px){:host{padding:0 48px}}@media (min-width: 960px){:host{padding:0 64px}}\n"], dependencies: [{ kind: "component", type: FThemeButtonComponent, selector: "button[f-theme-button]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHomePageHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'header[f-home-page-header]', standalone: true, imports: [
                         FThemeButtonComponent
-                    ], template: "<div class=\"content\">\n  <img [src]=\"logo\" class=\"logo\" alt=\"{{ title }} Logo\" width=\"24\" height=\"24\"/>\n  <span class=\"title\">{{ title }}</span>\n  <div class=\"flex-space\"></div>\n  <button f-theme-button aria-label=\"Change theme\"></button>\n</div>\n\n", styles: [":host{position:relative;z-index:5;padding:0 24px}:host .content{display:flex;justify-content:flex-start;align-items:center;width:100%;height:64px;max-width:1376px;margin:0 auto}:host .logo{margin-right:8px}:host .title{display:flex;align-items:center;border-bottom:1px solid transparent;width:100%;font-size:16px;font-weight:600;color:var(--primary-text)}@media (min-width: 640px){:host{padding:0 48px}}@media (min-width: 960px){:host{padding:0 64px}}\n"] }]
+                    ], 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 f-theme-button aria-label=\"Change theme\"></button>\n</div>\n\n", styles: [":host{position:relative;z-index:5;padding:0 24px}:host .logo-link{display:flex;align-items:center;text-decoration:none}:host .content{display:flex;justify-content:flex-start;align-items:center;width:100%;height:64px;max-width:1376px;margin:0 auto}:host .logo{margin-right:8px}:host .title{display:flex;align-items:center;border-bottom:1px solid transparent;width:100%;font-size:16px;font-weight:600;color:var(--primary-text)}@media (min-width: 640px){:host{padding:0 48px}}@media (min-width: 960px){:host{padding:0 64px}}\n"] }]
         }] });
 
 class FHomePageFooterComponent {
@@ -2603,13 +2787,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class FHomePageButtonsRowComponent {
     viewModel = inject(FHomePageEnvironmentService).getButtons();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHomePageButtonsRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FHomePageButtonsRowComponent, isStandalone: true, selector: "f-home-page-buttons-row", ngImport: i0, template: "@for (button of viewModel; track button.text) {\n  @if (button.routerLink) {\n    <a class=\"f-button\" [class.primary]=\"button.primary\" routerLink=\"{{ button.routerLink }}\">{{ button.text }}</a>\n  } @else if(button.href) {\n    <a class=\"f-button\" [class.primary]=\"button.primary\" href=\"{{ button.href }}\">{{ button.text }}</a>\n  }\n\n}\n<!--<a class=\"f-button primary\" routerLink=\"/docs/get-started\">Get Started</a>-->\n<!--<a class=\"f-button\" routerLink=\"/examples/overview\">Examples</a>-->\n<!--<a class=\"f-button\" href=\"https://github.com/Foblex/m-render\">Github</a>-->\n", styles: [":host{display:flex;padding-top:32px;gap:12px;width:fit-content;margin:0 auto}@media (min-width: 960px){:host{margin:0}}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 }}\">{{ button.text }}</a>\n  }\n}\n\n", styles: [":host{display:flex;padding-top:32px;gap:12px;width:fit-content;margin:0 auto}@media (min-width: 960px){:host{margin:0}}.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: "18.2.13", ngImport: i0, type: FHomePageButtonsRowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-home-page-buttons-row', standalone: true, imports: [
                         RouterLink
-                    ], template: "@for (button of viewModel; track button.text) {\n  @if (button.routerLink) {\n    <a class=\"f-button\" [class.primary]=\"button.primary\" routerLink=\"{{ button.routerLink }}\">{{ button.text }}</a>\n  } @else if(button.href) {\n    <a class=\"f-button\" [class.primary]=\"button.primary\" href=\"{{ button.href }}\">{{ button.text }}</a>\n  }\n\n}\n<!--<a class=\"f-button primary\" routerLink=\"/docs/get-started\">Get Started</a>-->\n<!--<a class=\"f-button\" routerLink=\"/examples/overview\">Examples</a>-->\n<!--<a class=\"f-button\" href=\"https://github.com/Foblex/m-render\">Github</a>-->\n", styles: [":host{display:flex;padding-top:32px;gap:12px;width:fit-content;margin:0 auto}@media (min-width: 960px){:host{margin:0}}\n"] }]
+                    ], 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 }}\">{{ button.text }}</a>\n  }\n}\n\n", styles: [":host{display:flex;padding-top:32px;gap:12px;width:fit-content;margin:0 auto}@media (min-width: 960px){:host{margin:0}}.f-button{display:flex;align-items:center;gap:6px}\n"] }]
         }] });
 
 class FHomePageHeroComponent {
@@ -2624,14 +2810,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     ], template: "<h1>{{ viewModel.headline }}</h1>\n<p class=\"powered\">{{ viewModel.tagline1 }}</p>\n<p class=\"powered\">{{ viewModel.tagline2 }}</p>\n<p class=\"second-description\">{{ viewModel.subDescription }}</p>\n<f-home-page-buttons-row></f-home-page-buttons-row>\n", styles: [":host{display:block;width:100%}@media (min-width: 640px){:host{width:100%}}@media (min-width: 960px){:host{width:50%}}.powered,h1{letter-spacing:-.4px;line-height:40px;font-size:32px;font-weight:700;width:fit-content;margin:0 auto;text-align:center;white-space:pre-wrap;pointer-events:all}@media (min-width: 640px){.powered,h1{line-height:56px;font-size:48px}}@media (min-width: 960px){.powered,h1{line-height:64px;font-size:56px;margin:0;text-align:left}}h1{background:-webkit-linear-gradient(120deg,#bd34fe 30%,#41d1ff);background-clip:text;color:transparent}.second-description{line-height:28px;font-size:18px;font-weight:500;white-space:pre-wrap;color:var(--secondary-text);margin:0 auto;width:fit-content;pointer-events:all;text-align:center;padding:8px 16px 0}@media (min-width: 640px){.second-description{padding-top:12px;line-height:32px;font-size:20px}}@media (min-width: 960px){.second-description{line-height:36px;font-size:24px;margin:0;text-align:left;padding:8px 0 0}}\n"] }]
         }] });
 
-const F_HOME_PAGE_COMPONENT = new InjectionToken('F_HOME_PAGE_COMPONENT');
 class FHomePageComponent {
-    _environmentService = inject(FHomePageEnvironmentService);
+    _environment = inject(FHomePageEnvironmentService);
     _backgroundContainer;
     _heroImageContainer;
     ngAfterViewInit() {
-        this._renderImageComponent(this._environmentService.getImageComponent());
-        this._renderBackgroundComponent(this._environmentService.getBackgroundComponent());
+        this._renderImageComponent(this._environment.getImageComponent());
+        this._renderBackgroundComponent(this._environment.getBackgroundComponent());
     }
     _renderImageComponent(component) {
         if (component) {
@@ -2655,22 +2840,19 @@ class FHomePageComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHomePageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FHomePageComponent, isStandalone: true, selector: "f-home-page", providers: [
             FHomePageEnvironmentService,
-            { provide: INTERNAL_ENVIRONMENT_SERVICE, useExisting: FHomePageEnvironmentService },
-            { provide: F_HOME_PAGE_COMPONENT, useExisting: FHomePageComponent }
-        ], viewQueries: [{ propertyName: "_backgroundContainer", first: true, predicate: ["backgroundContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_heroImageContainer", first: true, predicate: ["heroImageContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<ng-container #backgroundContainer></ng-container>\n<header f-home-page-header></header>\n\n<div class=\"body\">\n  <div class=\"hero-row\">\n    <f-home-page-hero></f-home-page-hero>\n    <ng-container #heroImageContainer></ng-container>\n  </div>\n  <f-home-page-features></f-home-page-features>\n</div>\n\n<div class=\"flex-space\"></div>\n<footer f-home-page-footer></footer>\n", styles: [":host{display:flex;flex-direction:column;position:relative;width:100%;height:100%;min-height:100%;overflow:hidden;overflow-y:auto}.body{position:relative;z-index:3;pointer-events:none}@media (min-width: 960px){.body{margin-top:50px}}@media (min-width: 1376px){.body{margin-top:100px}}.hero-row{display:flex;flex-direction:column-reverse;justify-content:space-between;align-items:center;margin:0 auto}@media (min-width: 960px){.hero-row{flex-direction:row;margin-left:64px;margin-right:64px}}@media (min-width: 1376px){.hero-row{flex-direction:row;margin-left:calc(50% - 624px);margin-right:calc(50% - 624px)}}\n"], dependencies: [{ kind: "component", type: FHomePageFooterComponent, selector: "footer[f-home-page-footer]" }, { kind: "component", type: FHomePageHeaderComponent, selector: "header[f-home-page-header]" }, { kind: "component", type: FHomePageFeaturesComponent, selector: "f-home-page-features" }, { kind: "component", type: FHomePageHeroComponent, selector: "f-home-page-hero" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "_backgroundContainer", first: true, predicate: ["backgroundContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_heroImageContainer", first: true, predicate: ["heroImageContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<ng-container #backgroundContainer></ng-container>\n<header f-home-page-header></header>\n\n<div class=\"body\">\n  <div class=\"hero-row\">\n    <f-home-page-hero></f-home-page-hero>\n    <ng-container #heroImageContainer></ng-container>\n  </div>\n  <f-home-page-features></f-home-page-features>\n  <f-home-page-memberships></f-home-page-memberships>\n</div>\n\n<div class=\"flex-space\"></div>\n<footer f-home-page-footer></footer>\n", styles: [":host{display:flex;flex-direction:column;position:relative;width:100%;height:100%;min-height:100%;overflow:hidden;overflow-y:auto}.body{position:relative;z-index:3;pointer-events:none}@media (min-width: 960px){.body{margin-top:50px}}@media (min-width: 1376px){.body{margin-top:100px}}.hero-row{display:flex;flex-direction:column-reverse;justify-content:space-between;align-items:center;margin:0 auto}@media (min-width: 960px){.hero-row{flex-direction:row;margin-left:64px;margin-right:64px}}@media (min-width: 1376px){.hero-row{flex-direction:row;margin-left:calc(50% - 624px);margin-right:calc(50% - 624px)}}\n"], dependencies: [{ kind: "component", type: FHomePageFooterComponent, selector: "footer[f-home-page-footer]" }, { kind: "component", type: FHomePageHeaderComponent, selector: "header[f-home-page-header]" }, { kind: "component", type: FHomePageFeaturesComponent, selector: "f-home-page-features" }, { kind: "component", type: FHomePageHeroComponent, selector: "f-home-page-hero" }, { kind: "component", type: FHomePageMembershipsComponent, selector: "f-home-page-memberships" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHomePageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-home-page', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         FHomePageEnvironmentService,
-                        { provide: INTERNAL_ENVIRONMENT_SERVICE, useExisting: FHomePageEnvironmentService },
-                        { provide: F_HOME_PAGE_COMPONENT, useExisting: FHomePageComponent }
                     ], imports: [
                         FHomePageFooterComponent,
                         FHomePageHeaderComponent,
                         FHomePageFeaturesComponent,
                         FHomePageHeroComponent,
-                    ], template: "<ng-container #backgroundContainer></ng-container>\n<header f-home-page-header></header>\n\n<div class=\"body\">\n  <div class=\"hero-row\">\n    <f-home-page-hero></f-home-page-hero>\n    <ng-container #heroImageContainer></ng-container>\n  </div>\n  <f-home-page-features></f-home-page-features>\n</div>\n\n<div class=\"flex-space\"></div>\n<footer f-home-page-footer></footer>\n", styles: [":host{display:flex;flex-direction:column;position:relative;width:100%;height:100%;min-height:100%;overflow:hidden;overflow-y:auto}.body{position:relative;z-index:3;pointer-events:none}@media (min-width: 960px){.body{margin-top:50px}}@media (min-width: 1376px){.body{margin-top:100px}}.hero-row{display:flex;flex-direction:column-reverse;justify-content:space-between;align-items:center;margin:0 auto}@media (min-width: 960px){.hero-row{flex-direction:row;margin-left:64px;margin-right:64px}}@media (min-width: 1376px){.hero-row{flex-direction:row;margin-left:calc(50% - 624px);margin-right:calc(50% - 624px)}}\n"] }]
+                        FHomePageMembershipsComponent,
+                    ], template: "<ng-container #backgroundContainer></ng-container>\n<header f-home-page-header></header>\n\n<div class=\"body\">\n  <div class=\"hero-row\">\n    <f-home-page-hero></f-home-page-hero>\n    <ng-container #heroImageContainer></ng-container>\n  </div>\n  <f-home-page-features></f-home-page-features>\n  <f-home-page-memberships></f-home-page-memberships>\n</div>\n\n<div class=\"flex-space\"></div>\n<footer f-home-page-footer></footer>\n", styles: [":host{display:flex;flex-direction:column;position:relative;width:100%;height:100%;min-height:100%;overflow:hidden;overflow-y:auto}.body{position:relative;z-index:3;pointer-events:none}@media (min-width: 960px){.body{margin-top:50px}}@media (min-width: 1376px){.body{margin-top:100px}}.hero-row{display:flex;flex-direction:column-reverse;justify-content:space-between;align-items:center;margin:0 auto}@media (min-width: 960px){.hero-row{flex-direction:row;margin-left:64px;margin-right:64px}}@media (min-width: 1376px){.hero-row{flex-direction:row;margin-left:calc(50% - 624px);margin-right:calc(50% - 624px)}}\n"] }]
         }], propDecorators: { _backgroundContainer: [{
                 type: ViewChild,
                 args: ['backgroundContainer', { read: ViewContainerRef }]
@@ -2693,7 +2875,7 @@ var index = /*#__PURE__*/Object.freeze({
     FHomePageFeaturesComponent: FHomePageFeaturesComponent,
     FHomePageFooterComponent: FHomePageFooterComponent,
     FHomePageHeaderComponent: FHomePageHeaderComponent,
-    F_HOME_PAGE_COMPONENT: F_HOME_PAGE_COMPONENT,
+    FHomePageMembershipsComponent: FHomePageMembershipsComponent,
     F_HOME_PAGE_ENVIRONMENT: F_HOME_PAGE_ENVIRONMENT,
     F_HOME_PAGE_ROUTES: F_HOME_PAGE_ROUTES
 });
@@ -2702,5 +2884,5 @@ var index = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { CalculateHashFromScrollPositionHandler, CalculateHashFromScrollPositionRequest, ChangeCodeFocusedSyntaxPreProcessor, CookiePopup, EMarkdownContainerType, FAnalyticsService, FAsyncCodeViewHandler, FBadgeComponent, FCheckboxComponent, FCodeGroupBodyHandler, FCodeGroupHandler, FCodeViewHandler, FDocumentationComponent, FDocumentationEnvironmentService, FExampleViewHandler, FFooterEditInformationComponent, FFooterNavigationButtonComponent, FFooterNavigationComponent, FHamburgerButtonComponent, FHeadTagService, FHeaderComponent, FHeaderMenuComponent, FHomePageComponent, FHomePageEnvironmentService, FHomePageFeaturesComponent, FHomePageFooterComponent, FHomePageHeaderComponent, FJsonLdService, FMarkdownFooterComponent, FMarkdownRendererComponent, FMetaService, FNavigationGroupComponent, FNavigationHeaderComponent, FNavigationItemComponent, FNavigationPanelComponent, FPageComponent, FPopoverService, FPreviewComponent, FScrollableContainerComponent, FSocialLinksComponent, FTableOfContentComponent, FTableOfContentItemsComponent, FThemeButtonComponent, FVersionComponent, F_ACCEPT_COOKIES_KEY, F_DOCS_ENVIRONMENT, F_DOCS_ROUTES, F_DOCUMENTATION_COMPONENT, F_HOME_PAGE_COMPONENT, F_HOME_PAGE_ENVIRONMENT, F_HOME_PAGE_ROUTES, GetAbsoluteTopToContainerHandler, GetAbsoluteTopToContainerRequest, GetPreviousNextPageNavigationHandler, GetPreviousNextPageNavigationRequest, GetPreviousNextPageNavigationResponse, GetTableOfContentDataHandler, GetTableOfContentDataRequest, GetVersionHandler, GetVersionRequest, HandleDynamicComponentsHandler, HandleDynamicComponentsRequest, HandleNavigationLinksHandler, HandleNavigationLinksRequest, HandleParsedContainersHandler, HandleParsedContainersRequest, HighlightService, INTERNAL_ENVIRONMENT_SERVICE, MarkCodeFocusedBlocksPostProcessor, MarkdownService, ModifyPunctuationHighlightPostProcessor, ParseAlerts, ParseCodeGroup, ParseCodeView, ParseExampleGroup, ParsePreviewGroup, ScrollToElementInContainer, SeparateCodeByLinesPostProcessor, TableOfContentData, copyToClipboard, getContent, setCookieConsent };
+export { CalculateHashFromScrollPositionHandler, CalculateHashFromScrollPositionRequest, ChangeCodeFocusedSyntaxPreProcessor, CookiePopup, EMarkdownContainerType, FAnalyticsService, FAsyncCodeViewHandler, FBadgeComponent, FCheckboxComponent, FCodeGroupBodyHandler, FCodeGroupHandler, FCodeViewHandler, FDocumentationComponent, FDocumentationEnvironmentService, FExampleViewHandler, FFooterEditInformationComponent, FFooterNavigationButtonComponent, FFooterNavigationComponent, FHamburgerButtonComponent, FHeadTagService, FHeaderComponent, FHeaderMenuComponent, FHomePageComponent, FHomePageEnvironmentService, FHomePageFeaturesComponent, FHomePageFooterComponent, FHomePageHeaderComponent, FHomePageMembershipsComponent, FJsonLdService, FMarkdownFooterComponent, FMarkdownRendererComponent, FMetaService, FNavigationGroupComponent, FNavigationHeaderComponent, FNavigationItemComponent, FNavigationPanelComponent, FPageComponent, FPopoverService, FPreviewBase, FPreviewComponent, FPreviewGroupFiltersComponent, FPreviewGroupService, FRadioButtonComponent, FScrollableContainerComponent, FSocialLinksComponent, FTableOfContentComponent, FTableOfContentItemsComponent, FThemeButtonComponent, FVersionComponent, F_ACCEPT_COOKIES_KEY, F_DOCS_ENVIRONMENT, F_DOCS_ROUTES, F_DOCUMENTATION_COMPONENT, F_HOME_PAGE_ENVIRONMENT, F_HOME_PAGE_ROUTES, GetAbsoluteTopToContainerHandler, GetAbsoluteTopToContainerRequest, GetPreviousNextPageNavigationHandler, GetPreviousNextPageNavigationRequest, GetPreviousNextPageNavigationResponse, GetTableOfContentDataHandler, GetTableOfContentDataRequest, GetVersionHandler, GetVersionRequest, HandleDynamicComponentsHandler, HandleDynamicComponentsRequest, HandleNavigationLinksHandler, HandleNavigationLinksRequest, HandleParsedContainersHandler, HandleParsedContainersRequest, HighlightService, MarkCodeFocusedBlocksPostProcessor, MarkdownService, ModifyPunctuationHighlightPostProcessor, ParseAlerts, ParseCodeGroup, ParseCodeView, ParseExampleGroup, ParsePreviewGroup, ScrollToElementInContainer, SeparateCodeByLinesPostProcessor, TableOfContentData, copyToClipboard, getContent, setCookieConsent };
 //# sourceMappingURL=foblex-m-render.mjs.map