@foblex/m-render 3.0.2 → 4.0.0

package/fesm2022/foblex-m-render.mjs

@@ -1,5 +1,5 @@
 import * as i0 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 { inject, Injectable, InjectionToken, signal, PLATFORM_ID, ChangeDetectionStrategy, Component, computed, Renderer2, HostListener, input, viewChild, EventEmitter, booleanAttribute, Input, ViewChild, Output, output, 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, finalize } from 'rxjs/operators';
@@ -130,6 +130,13 @@ function provideHeaderSearch(search) {
     };
 }
 
+function provideHeaderSearchAlgolia(configuration) {
+    return {
+        search: true,
+        searchConfiguration: configuration,
+    };
+}
+
 function provideHeaderMediaLinks(mediaLinks) {
     return {
         mediaLinks,
@@ -640,13 +647,13 @@ class HeaderMenuBase {
 
 class InlineMenu extends HeaderMenuBase {
     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 });
+    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(--secondary-text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:36px;border-radius:999px;transition:background-color .2s ease,color .2s ease}a:hover{color:var(--primary-text);background-color:var(--gray-soft)}a.active{color:var(--primary-text);background-color:var(--soft-background)}\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: InlineMenu, decorators: [{
             type: Component,
             args: [{ selector: 'inline-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         RouterLink,
-                    ], 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"] }]
+                    ], 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(--secondary-text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:36px;border-radius:999px;transition:background-color .2s ease,color .2s ease}a:hover{color:var(--primary-text);background-color:var(--gray-soft)}a.active{color:var(--primary-text);background-color:var(--soft-background)}\n"] }]
         }] });
 
 class ThemeButtonComponent {
@@ -675,11 +682,11 @@ class ThemeButtonComponent {
         this._themeService?.updateTheme();
     }
     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 });
+    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:999px;display:block;width:46px;min-width:46px;height:24px;border:1px solid var(--theme-button-border-color);background-color:var(--theme-button-background);cursor:pointer;box-shadow:var(--shadow-1);transition:border-color .2s ease,transform .2s ease;overflow:hidden}:host:hover{border-color:var(--theme-button-hovered-border-color);transform:translateY(-1px)}.f-icon-container{position:absolute;top:2px;left:2px;width:18px;height:18px;padding:3px;border-radius:50%;background-color:var(--theme-button-icon-background);box-shadow:0 1px 2px var(--alpha-08);transition:transform .3s ease}.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: "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"] }]
+            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:999px;display:block;width:46px;min-width:46px;height:24px;border:1px solid var(--theme-button-border-color);background-color:var(--theme-button-background);cursor:pointer;box-shadow:var(--shadow-1);transition:border-color .2s ease,transform .2s ease;overflow:hidden}:host:hover{border-color:var(--theme-button-hovered-border-color);transform:translateY(-1px)}.f-icon-container{position:absolute;top:2px;left:2px;width:18px;height:18px;padding:3px;border-radius:50%;background-color:var(--theme-button-icon-background);box-shadow:0 1px 2px var(--alpha-08);transition:transform .3s ease}.f-icon-container .f-icon{position:absolute;top:3px;left:3px;width:12px;height:12px}.f-icon-container .sun{display:block}.f-icon-container .moon{display:none}.dark :host .f-icon-container{transform:translate(22px)}.dark :host .f-icon-container .sun{display:none}.dark :host .f-icon-container .moon{display:block}\n"] }]
         }], propDecorators: { _onClick: [{
                 type: HostListener,
                 args: ['click']
@@ -759,7 +766,7 @@ class DropdownMenu extends HeaderMenuBase {
         clearTimeout(this._hoverTimeout);
     }
     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 });
+    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:4px;margin-right:4px;display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--secondary-text);cursor:pointer;line-height:36px;border-radius:999px;padding:0 12px;transition:color .2s ease,background-color .2s ease}.label .f-icon{margin-left:4px;width:14px;min-width:14px;height:14px;color:inherit}.label:hover{color:var(--primary-text);background-color:var(--gray-soft)}.dropdown-panel{border-radius:calc(var(--border-radius) + 4px);min-width:240px;border:1px solid var(--divider-color);background-color:var(--surface-glass-strong);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);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:calc(var(--border-radius) - 2px);padding:0 12px;font-size:14px;font-weight:500;line-height:36px;display:block;cursor:pointer;overflow:hidden;text-overflow:ellipsis;transition:background-color .2s ease,color .2s ease}.navigation-wrapper a:hover{color:var(--primary-text);background-color:var(--gray-soft)}.navigation-wrapper a.active{color:var(--primary-text);background-color:var(--soft-background)}.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: "21.1.4", ngImport: i0, type: DropdownMenu, decorators: [{
             type: Component,
@@ -769,7 +776,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
                         ThemeButtonComponent,
                         RouterLink,
                         MediaLinks,
-                    ], 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"] }]
+                    ], 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:4px;margin-right:4px;display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--secondary-text);cursor:pointer;line-height:36px;border-radius:999px;padding:0 12px;transition:color .2s ease,background-color .2s ease}.label .f-icon{margin-left:4px;width:14px;min-width:14px;height:14px;color:inherit}.label:hover{color:var(--primary-text);background-color:var(--gray-soft)}.dropdown-panel{border-radius:calc(var(--border-radius) + 4px);min-width:240px;border:1px solid var(--divider-color);background-color:var(--surface-glass-strong);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);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:calc(var(--border-radius) - 2px);padding:0 12px;font-size:14px;font-weight:500;line-height:36px;display:block;cursor:pointer;overflow:hidden;text-overflow:ellipsis;transition:background-color .2s ease,color .2s ease}.navigation-wrapper a:hover{color:var(--primary-text);background-color:var(--gray-soft)}.navigation-wrapper a.active{color:var(--primary-text);background-color:var(--soft-background)}.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"] }]
         }] });
 
 function calculateMarkdownUrl(markdown, navigation, docsDir, notFoundMd = '') {
@@ -892,15 +899,92 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
         }], 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 {
+    configuration = input(undefined, ...(ngDevMode ? [{ debugName: "configuration" }] : []));
+    _isBrowser = inject(IS_BROWSER_PLATFORM);
+    _document = inject(DOCUMENT);
+    _containerRef = viewChild('searchContainer', ...(ngDevMode ? [{ debugName: "_containerRef" }] : []));
+    _instance = null;
+    async ngAfterViewInit() {
+        if (!this._isBrowser)
+            return;
+        const docsearch = await loadDocSearch(this._document);
+        if (!docsearch)
+            return;
+        const config = this.configuration();
+        if (!config)
+            return;
+        const container = this._containerRef()?.nativeElement;
+        if (!container)
+            return;
+        this._instance = docsearch({
+            container,
+            appId: config.appId,
+            apiKey: config.apiKey,
+            indexName: config.indexName,
+            placeholder: config.placeholder || 'Search docs',
+            insights: config.insights ?? true,
+            searchParameters: config.searchParameters,
+        });
+    }
+    ngOnDestroy() {
+        this._instance?.destroy?.();
+        this._instance = null;
+    }
     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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: FSearchButtonComponent, isStandalone: true, selector: "f-search-button", inputs: { configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_containerRef", first: true, predicate: ["searchContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (configuration()) {\n  <div #searchContainer class=\"search-container\"></div>\n} @else {\n  <a class=\"f-icon search fallback-search\" [routerLink]=\"[]\" fragment=\"search\" aria-label=\"Search\"></a>\n}\n", styles: [":host{display:inline-flex;justify-content:center;align-items:center}.search-container{display:inline-flex;justify-content:center;align-items:center}.fallback-search{display:block;width:20px;height:20px;color:var(--sponsor);cursor:pointer}:host ::ng-deep .DocSearch-Button{margin:0;border:1px solid var(--button-default-border);border-radius:999px;width:36px;min-width:36px;height:36px;padding:0 10px;background:var(--button-default-bg);color:var(--button-default-text);box-shadow:var(--shadow-1);transition:background-color .2s ease,border-color .2s ease,transform .2s ease;justify-content:flex-start}:host ::ng-deep .DocSearch-Button:hover{background:var(--button-default-hover-bg);border-color:var(--button-default-hover-border);transform:translateY(-1px)}:host ::ng-deep .DocSearch-Button-Placeholder,:host ::ng-deep .DocSearch-Button-Keys{display:none}:host ::ng-deep .DocSearch-Search-Icon{width:18px;height:18px}@media(min-width:768px){:host ::ng-deep .DocSearch-Button{width:min(240px,28vw);min-width:180px;padding:0 12px;gap:10px}:host ::ng-deep .DocSearch-Button-Placeholder{display:inline-block;font-size:14px;font-weight:500;color:var(--secondary-text)}}@media(min-width:1024px){:host ::ng-deep .DocSearch-Button-Keys{display:flex;align-items:center;gap:4px;margin-left:auto}}\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"] }]
-        }] });
+                    ], template: "@if (configuration()) {\n  <div #searchContainer class=\"search-container\"></div>\n} @else {\n  <a class=\"f-icon search fallback-search\" [routerLink]=\"[]\" fragment=\"search\" aria-label=\"Search\"></a>\n}\n", styles: [":host{display:inline-flex;justify-content:center;align-items:center}.search-container{display:inline-flex;justify-content:center;align-items:center}.fallback-search{display:block;width:20px;height:20px;color:var(--sponsor);cursor:pointer}:host ::ng-deep .DocSearch-Button{margin:0;border:1px solid var(--button-default-border);border-radius:999px;width:36px;min-width:36px;height:36px;padding:0 10px;background:var(--button-default-bg);color:var(--button-default-text);box-shadow:var(--shadow-1);transition:background-color .2s ease,border-color .2s ease,transform .2s ease;justify-content:flex-start}:host ::ng-deep .DocSearch-Button:hover{background:var(--button-default-hover-bg);border-color:var(--button-default-hover-border);transform:translateY(-1px)}:host ::ng-deep .DocSearch-Button-Placeholder,:host ::ng-deep .DocSearch-Button-Keys{display:none}:host ::ng-deep .DocSearch-Search-Icon{width:18px;height:18px}@media(min-width:768px){:host ::ng-deep .DocSearch-Button{width:min(240px,28vw);min-width:180px;padding:0 12px;gap:10px}:host ::ng-deep .DocSearch-Button-Placeholder{display:inline-block;font-size:14px;font-weight:500;color:var(--secondary-text)}}@media(min-width:1024px){:host ::ng-deep .DocSearch-Button-Keys{display:flex;align-items:center;gap:4px;margin-left:auto}}\n"] }]
+        }], propDecorators: { configuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "configuration", required: false }] }], _containerRef: [{ type: i0.ViewChild, args: ['searchContainer', { isSignal: true }] }] } });
+let cachedDocSearchFactory = null;
+async function loadDocSearch(documentRef) {
+    if (cachedDocSearchFactory) {
+        return cachedDocSearchFactory;
+    }
+    cachedDocSearchFactory = (async () => {
+        await Promise.all([
+            appendStyle(documentRef),
+            appendScript(documentRef),
+        ]);
+        const docsearch = documentRef.defaultView?.docsearch;
+        return typeof docsearch === 'function' ? docsearch : null;
+    })();
+    return cachedDocSearchFactory;
+}
+function appendScript(documentRef) {
+    const existing = documentRef.getElementById(DOCSEARCH_SCRIPT_ID);
+    if (existing) {
+        return Promise.resolve();
+    }
+    return new Promise((resolve, reject) => {
+        const script = documentRef.createElement('script');
+        script.id = DOCSEARCH_SCRIPT_ID;
+        script.src = DOCSEARCH_SCRIPT_URL;
+        script.async = true;
+        script.onload = () => resolve();
+        script.onerror = () => reject(new Error('Failed to load Algolia DocSearch script.'));
+        documentRef.head.appendChild(script);
+    });
+}
+function appendStyle(documentRef) {
+    const existing = documentRef.getElementById(DOCSEARCH_STYLE_ID);
+    if (existing) {
+        return Promise.resolve();
+    }
+    const link = documentRef.createElement('link');
+    link.id = DOCSEARCH_STYLE_ID;
+    link.rel = 'stylesheet';
+    link.href = DOCSEARCH_STYLE_URL;
+    documentRef.head.appendChild(link);
+    return Promise.resolve();
+}
+const DOCSEARCH_SCRIPT_ID = 'f-docsearch-script';
+const DOCSEARCH_STYLE_ID = 'f-docsearch-style';
+const DOCSEARCH_SCRIPT_URL = 'https://cdn.jsdelivr.net/npm/@docsearch/js@3/dist/umd/index.js';
+const DOCSEARCH_STYLE_URL = 'https://cdn.jsdelivr.net/npm/@docsearch/css@3/dist/style.css';
 
 let uniqueId$1 = 0;
 class FCheckboxComponent {
@@ -1073,18 +1157,19 @@ class HeaderComponent {
             cancelAnimationFrame(this._rafId);
     }
     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 });
+    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@if (config.search) {\n  <f-search-button [configuration]=\"config.searchConfiguration\"></f-search-button>\n  <div class=\"divider search-divider\"></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;gap:12px;padding:0 20px;font-weight:600;color:var(--primary-text);height:var(--header-height);background-color:var(--surface-glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid var(--divider-color);box-shadow:0 1px 0 var(--alpha-02);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;gap:10px;padding:0;font-weight:600;color:var(--primary-text);height:var(--header-height);width:100%;max-width:260px;margin-left:auto;cursor:pointer}.portal-title{display:flex;justify-content:flex-start;align-items:center;gap:12px}@media(min-width:960px){.portal-title{display:none}}.portal-title .title{font-weight:600;color:var(--primary-text);min-width:0}.divider{margin-right:8px;margin-left:8px;width:1px;height:18px;background-color:var(--divider-color);content:\"\"}@media(max-width:639px){.search-divider{margin-right:6px;margin-left:6px}}.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: FSearchButtonComponent, selector: "f-search-button", inputs: ["configuration"] }, { 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: "21.1.4", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-header', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         HamburgerButton,
                         FBrandLinkComponent,
+                        FSearchButtonComponent,
                         ThemeButtonComponent,
                         InlineMenu,
                         DropdownMenu,
                         MediaLinks,
-                    ], 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"] }]
+                    ], 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@if (config.search) {\n  <f-search-button [configuration]=\"config.searchConfiguration\"></f-search-button>\n  <div class=\"divider search-divider\"></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;gap:12px;padding:0 20px;font-weight:600;color:var(--primary-text);height:var(--header-height);background-color:var(--surface-glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid var(--divider-color);box-shadow:0 1px 0 var(--alpha-02);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;gap:10px;padding:0;font-weight:600;color:var(--primary-text);height:var(--header-height);width:100%;max-width:260px;margin-left:auto;cursor:pointer}.portal-title{display:flex;justify-content:flex-start;align-items:center;gap:12px}@media(min-width:960px){.portal-title{display:none}}.portal-title .title{font-weight:600;color:var(--primary-text);min-width:0}.divider{margin-right:8px;margin-left:8px;width:1px;height:18px;background-color:var(--divider-color);content:\"\"}@media(max-width:639px){.search-divider{margin-right:6px;margin-left:6px}}.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 {
@@ -1094,23 +1179,23 @@ class NavigationGroupComponent {
         this.isCollapsed.set(!this.isCollapsed());
     }
     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 });
+    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:18px;padding-bottom:18px;border-top:1px solid var(--divider-color);display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;width:100%;max-width:none;margin-left:0}:host.collapsed,:host.no-title{padding-top:12px;padding-bottom:12px}header{font-weight:700;color:var(--tertiary-text);flex-grow:1;padding:0 8px 8px;line-height:18px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;display:flex;justify-content:flex-start;align-items:center;width:100%}.caret{display:flex;justify-content:center;align-items:center;margin-right:-4px;width:28px;height:28px;border-radius:999px;color:var(--tertiary-text);cursor:pointer;transition:color .25s,background-color .25s;flex-shrink:0}:host:hover .caret{color:var(--secondary-text);background-color:var(--gray-soft)}: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: "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"] }]
+                    }, 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:18px;padding-bottom:18px;border-top:1px solid var(--divider-color);display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;width:100%;max-width:none;margin-left:0}:host.collapsed,:host.no-title{padding-top:12px;padding-bottom:12px}header{font-weight:700;color:var(--tertiary-text);flex-grow:1;padding:0 8px 8px;line-height:18px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;display:flex;justify-content:flex-start;align-items:center;width:100%}.caret{display:flex;justify-content:center;align-items:center;margin-right:-4px;width:28px;height:28px;border-radius:999px;color:var(--tertiary-text);cursor:pointer;transition:color .25s,background-color .25s;flex-shrink:0}:host:hover .caret{color:var(--secondary-text);background-color:var(--gray-soft)}: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: "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 });
+    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:8px 10px;line-height:20px;font-size:14px;cursor:pointer;width:100%;border-radius:calc(var(--border-radius) - 2px);transition:background-color .2s ease,color .2s ease,box-shadow .2s ease;display:flex;align-items:center;justify-content:flex-start;gap:8px}:host:hover{text-decoration:none;color:var(--primary-text);background-color:var(--gray-soft)}:host.active{color:var(--primary-text);background-color:var(--soft-background);box-shadow:inset 0 0 0 1px var(--divider-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 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"] }]
+            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:8px 10px;line-height:20px;font-size:14px;cursor:pointer;width:100%;border-radius:calc(var(--border-radius) - 2px);transition:background-color .2s ease,color .2s ease,box-shadow .2s ease;display:flex;align-items:center;justify-content:flex-start;gap:8px}:host:hover{text-decoration:none;color:var(--primary-text);background-color:var(--gray-soft)}:host.active{color:var(--primary-text);background-color:var(--soft-background);box-shadow:inset 0 0 0 1px var(--divider-color)}\n"] }]
         }] });
 
 class NavigationPanelComponent {
@@ -1173,7 +1258,7 @@ class NavigationPanelComponent {
         new HandleNavigationLinksHandler().handle(new HandleNavigationLinksRequest(event, this._window, this._router));
     }
     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 });
+    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) 40px;background-color:var(--navigation-panel-background);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-right:1px solid var(--divider-color);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;box-shadow:var(--shadow-4)}@media(min-width:960px){:host{position:unset;display:flex;min-width:var(--navigation-panel-width);width:var(--navigation-panel-width);box-shadow:none;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;gap:10px;padding:0;font-weight:600;color:var(--primary-text);height:var(--header-height);width:100%;margin-left:0;cursor:pointer}.navigation-header img{margin-right:0}\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: "21.1.4", ngImport: i0, type: NavigationPanelComponent, decorators: [{
             type: Component,
@@ -1181,7 +1266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
                         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) 40px;background-color:var(--navigation-panel-background);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-right:1px solid var(--divider-color);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;box-shadow:var(--shadow-4)}@media(min-width:960px){:host{position:unset;display:flex;min-width:var(--navigation-panel-width);width:var(--navigation-panel-width);box-shadow:none;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;gap:10px;padding:0;font-weight:600;color:var(--primary-text);height:var(--header-height);width:100%;margin-left:0;cursor:pointer}.navigation-header img{margin-right:0}\n"] }]
         }], propDecorators: { _onDocumentClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
@@ -2272,7 +2357,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
 class CodeView {
     _httpClient = inject(HttpClient);
     _destroyRef = inject(DestroyRef);
-    _popoverService = inject(PopoverService);
+    _copyFeedbackTimeout = null;
     data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
     height = computed(() => {
         return coerceComponentHeight(this.data()?.height);
@@ -2280,6 +2365,14 @@ class CodeView {
     content = signal('', ...(ngDevMode ? [{ debugName: "content" }] : []));
     visibleLanguage = signal('', ...(ngDevMode ? [{ debugName: "visibleLanguage" }] : []));
     syntaxLanguage = signal('', ...(ngDevMode ? [{ debugName: "syntaxLanguage" }] : []));
+    copyButtonLabel = signal('Copy', ...(ngDevMode ? [{ debugName: "copyButtonLabel" }] : []));
+    constructor() {
+        this._destroyRef.onDestroy(() => {
+            if (this._copyFeedbackTimeout) {
+                clearTimeout(this._copyFeedbackTimeout);
+            }
+        });
+    }
     ngOnInit() {
         this._updateLanguage();
         this._updateNotExistingData(this.data());
@@ -2310,10 +2403,20 @@ class CodeView {
         this._copyContentToClipboard(this.content());
     }
     _copyContentToClipboard(content) {
-        copyToClipboard(content).pipe(take(1), takeUntilDestroyed(this._destroyRef)).subscribe(() => this._popoverService.show('Copied!'));
+        copyToClipboard(content).pipe(take(1), takeUntilDestroyed(this._destroyRef)).subscribe(() => this._setCopiedFeedback());
+    }
+    _setCopiedFeedback() {
+        this.copyButtonLabel.set('Copied');
+        if (this._copyFeedbackTimeout) {
+            clearTimeout(this._copyFeedbackTimeout);
+        }
+        this._copyFeedbackTimeout = setTimeout(() => {
+            this.copyButtonLabel.set('Copy');
+            this._copyFeedbackTimeout = null;
+        }, 1500);
     }
     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 });
+    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\" type=\"button\" (click)=\"onCopyClick()\">{{ copyButtonLabel() }}</button>\n@if (content()) {\n  <highlight [content]=\"content()\" [language]=\"syntaxLanguage()\"/>\n}\n", dependencies: [{ kind: "component", type: Highlight, selector: "highlight", inputs: ["content", "language"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CodeView, decorators: [{
             type: Component,
@@ -2322,8 +2425,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
                         '[style.height]': 'height()',
                     }, 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 }] }] } });
+                    ], template: "<span class=\"f-code-language\">{{ visibleLanguage() }}</span>\n<button class=\"f-copy-button\" type=\"button\" (click)=\"onCopyClick()\">{{ copyButtonLabel() }}</button>\n@if (content()) {\n  <highlight [content]=\"content()\" [language]=\"syntaxLanguage()\"/>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
 function coerceComponentHeight(value) {
     if (value === undefined || value === null) {
         return undefined;
@@ -3424,11 +3527,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
 class TableOfContentItemsComponent {
     items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
     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 });
+    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:200px}:host li a{display:block;line-height:var(--on-page-navigation-item-height);font-size:13px;color:inherit;font-weight:500;transition:color .2s ease}:host li:hover{color:var(--primary-text)}:host li.active{color:var(--primary-text)}:host li+ul{padding:0 0 0 14px}\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: "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"] }]
+            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:200px}:host li a{display:block;line-height:var(--on-page-navigation-item-height);font-size:13px;color:inherit;font-weight:500;transition:color .2s ease}:host li:hover{color:var(--primary-text)}:host li.active{color:var(--primary-text)}:host li+ul{padding:0 0 0 14px}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }] } });
 
 const TABLE_OF_CONTENT_MODULE_PROVIDERS = [
@@ -3469,11 +3572,11 @@ class TableOfContent {
         this._mediatr.execute(new ScrollToElementInContainerRequest(hash));
     }
     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 });
+    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: 30px;display:none;padding-left:18px;border-left:1px solid var(--divider-color);font-size:13px;font-weight:500;position:relative;max-height:calc(100vh - var(--header-height) - 48px);overflow-y:auto}:host .title{line-height:20px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tertiary-text);margin-bottom:12px}@media(min-width:1280px){:host{display:block;width:var(--on-page-navigation-width);position:fixed;top:calc(var(--header-height) + 32px);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-text);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: "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: 30px;display:none;padding-left:18px;border-left:1px solid var(--divider-color);font-size:13px;font-weight:500;position:relative;max-height:calc(100vh - var(--header-height) - 48px);overflow-y:auto}:host .title{line-height:20px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tertiary-text);margin-bottom:12px}@media(min-width:1280px){:host{display:block;width:var(--on-page-navigation-width);position:fixed;top:calc(var(--header-height) + 32px);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-text);transition:top .25s cubic-bezier(0,1,.5,1),opacity .25s}\n"] }]
         }], propDecorators: { _click: [{
                 type: HostListener,
                 args: ['click', ['$event']]
@@ -3580,13 +3683,13 @@ class MarkdownRenderer {
         this._dynamicComponents.dispose();
     }
     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 }, origin: { classPropertyName: "origin", publicName: "origin", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "_onDocumentClick($event)" }, classAttribute: "m-render" }, ngImport: i0, template: "@if (origin(); as pageOrigin) {\n  <p class=\"origin-link\">\n    <span class=\"origin-link-label\">{{ pageOrigin.label }}:</span>\n    <a [href]=\"pageOrigin.url\"\n       target=\"_blank\"\n       rel=\"noopener noreferrer nofollow\">{{ pageOrigin.url }}</a>\n  </p>\n}\n<div [innerHTML]=\"value()\"></div>\n@if (value()) {\n  <markdown-footer />\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}.origin-link{margin:0 0 16px;border-left:2px solid var(--divider-color);padding:8px 12px;background-color:var(--soft-background);line-height:20px;font-size:14px}.origin-link-label{margin-right:4px;font-weight:600}.origin-link a{overflow-wrap:anywhere}\n"], dependencies: [{ kind: "component", type: MarkdownFooter, selector: "markdown-footer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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 }, origin: { classPropertyName: "origin", publicName: "origin", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "_onDocumentClick($event)" }, classAttribute: "m-render" }, ngImport: i0, template: "<div [innerHTML]=\"value()\"></div>\n@if (origin(); as pageOrigin) {\n  <aside class=\"origin-link\" role=\"note\">\n    <span class=\"origin-link-icon\" aria-hidden=\"true\"></span>\n    <div class=\"origin-link-content\">\n      <span class=\"origin-link-label\">{{ pageOrigin.label }}</span>\n      <a class=\"origin-link-url\"\n         [href]=\"pageOrigin.url\"\n         target=\"_blank\"\n         rel=\"noopener noreferrer nofollow\">{{ pageOrigin.url }}</a>\n    </div>\n  </aside>\n}\n@if (value()) {\n  <markdown-footer />\n}\n", styles: [":host{display:block;width:100%;max-width:960px}@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:1040px}.origin-link{display:flex;justify-content:flex-start;align-items:flex-start;gap:12px;margin-top:28px;border:1px solid var(--divider-color);border-radius:calc(var(--border-radius) + 2px);padding:14px 16px;background:var(--surface-glass-strong);box-shadow:var(--shadow-1);line-height:20px;font-size:14px}.origin-link-icon{flex-shrink:0;display:inline-flex;justify-content:center;align-items:center;width:28px;height:28px;border-radius:999px;background-color:var(--primary-text);color:var(--neutral-inverse);font-size:10px;font-weight:700;letter-spacing:.06em}.origin-link-icon:before{content:\"SRC\"}.origin-link-content{min-width:0}.origin-link-label{display:block;color:var(--secondary-text);font-weight:600}.origin-link-url{display:inline-block;margin-top:2px;color:var(--primary-text);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere;transition:color .2s ease}.origin-link-url:hover{color:var(--primary-text)}@media(max-width:639px){.origin-link{margin-top:24px;border-radius:8px;padding:10px 12px;gap:10px}.origin-link-icon{width:24px;height:24px;font-size:9px}}\n"], dependencies: [{ kind: "component", type: MarkdownFooter, selector: "markdown-footer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 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: "@if (origin(); as pageOrigin) {\n  <p class=\"origin-link\">\n    <span class=\"origin-link-label\">{{ pageOrigin.label }}:</span>\n    <a [href]=\"pageOrigin.url\"\n       target=\"_blank\"\n       rel=\"noopener noreferrer nofollow\">{{ pageOrigin.url }}</a>\n  </p>\n}\n<div [innerHTML]=\"value()\"></div>\n@if (value()) {\n  <markdown-footer />\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}.origin-link{margin:0 0 16px;border-left:2px solid var(--divider-color);padding:8px 12px;background-color:var(--soft-background);line-height:20px;font-size:14px}.origin-link-label{margin-right:4px;font-weight:600}.origin-link a{overflow-wrap:anywhere}\n"] }]
+                    }, template: "<div [innerHTML]=\"value()\"></div>\n@if (origin(); as pageOrigin) {\n  <aside class=\"origin-link\" role=\"note\">\n    <span class=\"origin-link-icon\" aria-hidden=\"true\"></span>\n    <div class=\"origin-link-content\">\n      <span class=\"origin-link-label\">{{ pageOrigin.label }}</span>\n      <a class=\"origin-link-url\"\n         [href]=\"pageOrigin.url\"\n         target=\"_blank\"\n         rel=\"noopener noreferrer nofollow\">{{ pageOrigin.url }}</a>\n    </div>\n  </aside>\n}\n@if (value()) {\n  <markdown-footer />\n}\n", styles: [":host{display:block;width:100%;max-width:960px}@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:1040px}.origin-link{display:flex;justify-content:flex-start;align-items:flex-start;gap:12px;margin-top:28px;border:1px solid var(--divider-color);border-radius:calc(var(--border-radius) + 2px);padding:14px 16px;background:var(--surface-glass-strong);box-shadow:var(--shadow-1);line-height:20px;font-size:14px}.origin-link-icon{flex-shrink:0;display:inline-flex;justify-content:center;align-items:center;width:28px;height:28px;border-radius:999px;background-color:var(--primary-text);color:var(--neutral-inverse);font-size:10px;font-weight:700;letter-spacing:.06em}.origin-link-icon:before{content:\"SRC\"}.origin-link-content{min-width:0}.origin-link-label{display:block;color:var(--secondary-text);font-weight:600}.origin-link-url{display:inline-block;margin-top:2px;color:var(--primary-text);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere;transition:color .2s ease}.origin-link-url:hover{color:var(--primary-text)}@media(max-width:639px){.origin-link{margin-top:24px;border-radius:8px;padding:10px 12px;gap:10px}.origin-link-icon{width:24px;height:24px;font-size:9px}}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], origin: [{ type: i0.Input, args: [{ isSignal: true, alias: "origin", required: false }] }], _onDocumentClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
@@ -3613,7 +3716,7 @@ class MarkdownRouter {
         }), tap(() => this._metaService?.applyMarkdownSeo(this._markdown.pageSeo())));
     })), { initialValue: undefined });
     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                   [origin]=\"pageOrigin()\"\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", "origin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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                   [origin]=\"pageOrigin()\"\n                   [class.empty-navigation]=\"emptyNavigation\"\n                   [class.expand-no-toc]=\"shouldExpandContent()\"/>\n", styles: [":host{display:block;width:100%;padding:36px var(--page-padding) 120px}@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", "origin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: MarkdownRouter, decorators: [{
             type: Component,
@@ -3622,7 +3725,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
                         '[class.empty-navigation]': 'emptyNavigation',
                     }, imports: [
                         MarkdownRenderer,
-                    ], template: "<markdown-renderer [value]=\"html()\"\n                   [origin]=\"pageOrigin()\"\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"] }]
+                    ], template: "<markdown-renderer [value]=\"html()\"\n                   [origin]=\"pageOrigin()\"\n                   [class.empty-navigation]=\"emptyNavigation\"\n                   [class.expand-no-toc]=\"shouldExpandContent()\"/>\n", styles: [":host{display:block;width:100%;padding:36px var(--page-padding) 120px}@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({
@@ -3687,7 +3790,7 @@ 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-DzpgC1SS.mjs').then(m => m.CookiePopup)]] });
+        ], 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:stretch;height:100%;gap:0}.f-backdrop{position:fixed;inset:0;opacity:0;z-index:var(--z-index-backdrop);background:var(--backdrop-color);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);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(--surface-glass-strong);border:1px solid var(--divider-color);box-shadow:var(--shadow-2);color:var(--primary-text);font-size:14px;padding:8px 12px;border-radius:999px;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: "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,
@@ -3728,7 +3831,7 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.1.4", ng
                             RouterOutlet,
                             HeaderComponent,
                             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"] }]
+                        ], 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:stretch;height:100%;gap:0}.f-backdrop{position:fixed;inset:0;opacity:0;z-index:var(--z-index-backdrop);background:var(--backdrop-color);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);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(--surface-glass-strong);border:1px solid var(--divider-color);box-shadow:var(--shadow-2);color:var(--primary-text);font-size:14px;padding:8px 12px;border-radius:999px;z-index:var(--z-index-popover);opacity:1}\n"] }]
             }], ctorParameters: null, propDecorators: null }) });
 
 const DOCUMENTATION_ROUTES = [
@@ -3951,25 +4054,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
 class FHomePageHeroComponent {
     viewModel = inject(HomeStore).getHero();
     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" }] });
+    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:linear-gradient(135deg,var(--primary-text) 0%,var(--secondary-text) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;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: "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:linear-gradient(135deg,var(--primary-text) 0%,var(--secondary-text) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;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: "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"] });
+    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-text)}: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:10px}\n"] });
 }
 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-text)}: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:10px}\n"] }]
         }] });
 
 class HomeRootComponent {
@@ -4066,5 +4169,5 @@ var index = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-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 };
+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, provideHeaderSearchAlgolia, provideHero, provideHomeButtons, provideHomeFeatures, provideHomeFooter, provideHomePage, provideImage, provideLanguage, provideLogo, provideMeta, provideNavigation, provideShowcase, provideTableOfContent, provideTheme, provideTitle, resolveHighlightLanguage };
 //# sourceMappingURL=foblex-m-render.mjs.map