@foblex/m-render 2.7.6 → 2.7.7

package/assets/styles/_icons.scss

@@ -1,66 +1,3 @@
-//.vpi-align-left {
-//  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M21 6H3M15 12H3M17 18H3'/%3E%3C/svg%3E");
-//}
-//
-//.vpi-arrow-right,
-//.vpi-arrow-down,
-//.vpi-arrow-left,
-//.vpi-arrow-up {
-//  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
-//}
-//
-//.vpi-chevron-right,
-//.vpi-chevron-down,
-//.vpi-chevron-left,
-//.vpi-chevron-up {
-//  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
-//}
-//
-//.vpi-chevron-down,
-//.vpi-arrow-down {
-//  transform: rotate(90deg);
-//}
-//
-//.vpi-chevron-left,
-//.vpi-arrow-left {
-//  transform: rotate(180deg);
-//}
-//
-//.vpi-chevron-up,
-//.vpi-arrow-up {
-//  transform: rotate(-90deg);
-//}
-//
-//.vpi-plus {
-//  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M12 5v14'/%3E%3C/svg%3E");
-//}
-//
-//.vpi-more-horizontal {
-//  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/svg%3E");
-//}
-//
-//.vpi-languages {
-//  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m5 8 6 6M4 14l6-6 2-3M2 5h12M7 2h1M22 22l-5-10-5 10M14 18h6'/%3E%3C/svg%3E");
-//}
-//
-
-//
-//.vpi-search {
-//  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
-//}
-//
-//.vpi-layout-list {
-//  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='7' height='7' x='3' y='3' rx='1'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1'/%3E%3Cpath d='M14 4h7M14 9h7M14 15h7M14 20h7'/%3E%3C/svg%3E");
-//}
-//
-//.vpi-delete {
-//  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M20 5H9l-7 7 7 7h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2ZM18 9l-6 6M12 9l6 6'/%3E%3C/svg%3E");
-//}
-//
-//.vpi-corner-down-left {
-//  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m9 10-5 5 5 5'/%3E%3Cpath d='M20 4v7a4 4 0 0 1-4 4H4'/%3E%3C/svg%3E");
-//}
-
 :root {
   --copy-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E");
 }
@@ -79,6 +16,10 @@
   }
 }
 
+.search {
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
+}
+
 .heart {
   mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
   color: var(--sponsor);
@@ -128,8 +69,6 @@
   mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
 }
 
-
-//
 .sun {
   mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/svg%3E");
 }

package/fesm2022/foblex-m-render.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, InjectionToken, EventEmitter, booleanAttribute, HostListener, Input, ViewChild, Output, ChangeDetectionStrategy, Component, input, output, viewChild, signal, ElementRef, NgZone, Directive, PLATFORM_ID, Renderer2, ChangeDetectorRef, DestroyRef, computed, ViewContainerRef, Injector, forwardRef, effect, untracked } from '@angular/core';
+import { inject, Injectable, InjectionToken, ChangeDetectionStrategy, Component, EventEmitter, booleanAttribute, HostListener, Input, ViewChild, Output, input, output, viewChild, signal, ElementRef, NgZone, Directive, PLATFORM_ID, Renderer2, ChangeDetectorRef, DestroyRef, computed, ViewContainerRef, Injector, forwardRef, effect, untracked } from '@angular/core';
 import { DOCUMENT, isPlatformBrowser, TitleCasePipe } from '@angular/common';
+import { RouterLink, Router, NavigationEnd, ActivatedRoute, RouterOutlet } from '@angular/router';
 import { of, map, Subject, from, switchMap, startWith, filter, defer, Observable, EMPTY, debounceTime, fromEvent } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { catchError, tap, filter as filter$1, shareReplay, take } from 'rxjs/operators';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Overlay, CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
-import { Router, RouterLink, NavigationEnd, ActivatedRoute, RouterOutlet } from '@angular/router';
 import { createHighlighter } from 'shiki';
 import MarkdownIt from 'markdown-it';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -101,6 +101,17 @@ function provideGTag(config) {
 }
 const GTAG_CONFIG = new InjectionToken('GTAG_CONFIG');
 
+class FSearchButtonComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FSearchButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: FSearchButtonComponent, isStandalone: true, selector: "f-search-button", ngImport: i0, template: "<a class=\"f-icon search\" [routerLink]=\"[]\" fragment=\"search\"></a>\n", styles: [".f-icon{display:block;width:20px;height:20px;margin-left:8px;color:var(--sponsor);cursor:pointer;transition:transform .2s ease}.f-icon:hover{transform:scale(1.1)}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FSearchButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'f-search-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        RouterLink,
+                    ], template: "<a class=\"f-icon search\" [routerLink]=\"[]\" fragment=\"search\"></a>\n", styles: [".f-icon{display:block;width:20px;height:20px;margin-left:8px;color:var(--sponsor);cursor:pointer;transition:transform .2s ease}.f-icon:hover{transform:scale(1.1)}\n"] }]
+        }] });
+
 let uniqueId$1 = 0;
 class FCheckboxComponent {
     changeDetectorRef;
@@ -323,7 +334,12 @@ function provideHeader(...configuration) {
         header: Object.assign({}, ...configuration),
     };
 }
-const HEADER_CONFIGURATION = new InjectionToken('HEADER_CONFIGURATION');
+
+function provideHeaderSearch(search) {
+    return {
+        search,
+    };
+}
 
 function provideHeaderMediaLinks(mediaLinks) {
     return {
@@ -892,8 +908,9 @@ function provideTheme() {
 
 class HeaderComponent {
     title = inject(DocumentationStore).getTitle();
+    config = inject(DocumentationStore).getHeader();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: HeaderComponent, isStandalone: true, selector: "f-header", ngImport: i0, template: "<button hamburger-button></button>\n<div class=\"title text-ellipsis\">{{ title }}</div>\n<inline-menu/>\n<!--<npm-version/>-->\n<div class=\"divider\"></div>\n<button theme-button></button>\n<div class=\"divider\"></div>\n<f-social-links/>\n\n", styles: [":host{position:sticky;width:100%;top:0;display:flex;justify-content:flex-start;align-items:center;padding:20px 32px;font-weight:600;color:var(--primary-text);height:calc(var(--header-height) + 1px);background-color:var(--background-color);border-bottom:1px solid var(--divider-color);z-index:var(--z-index-header)}@media (min-width: 1280px){:host{padding-right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 3);padding-left:max(var(--page-padding),(100vw - var(--layout-max-width)) / 4)}}.title{display:none;justify-content:flex-start;align-items:center;padding:20px 0;font-weight:600;color:var(--primary-text);height:var(--header-height)}@media (min-width: 460px){.title{display:block}}@media (min-width: 960px){.title{display:none}}.divider{margin-right:8px;margin-left:8px;width:1px;height:24px;background-color:var(--divider-color);content:\"\"}\n"], dependencies: [{ kind: "component", type: HamburgerButtonComponent, selector: "button[hamburger-button]" }, { kind: "component", type: FSocialLinksComponent, selector: "f-social-links" }, { kind: "component", type: ThemeButtonComponent, selector: "button[theme-button]" }, { kind: "component", type: InlineMenuComponent, selector: "inline-menu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: HeaderComponent, isStandalone: true, selector: "f-header", ngImport: i0, template: "<button hamburger-button></button>\n<div class=\"title text-ellipsis\">{{ title }}</div>\n<div class=\"flex-space\"></div>\n<!--<npm-version/>-->\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<f-social-links/>\n@if (config?.search) {\n  <div class=\"divider\"></div>\n  <f-search-button/>\n}\n\n", styles: [":host{position:sticky;width:100%;top:0;display:flex;justify-content:flex-start;align-items:center;padding:20px 32px;font-weight:600;color:var(--primary-text);height:calc(var(--header-height) + 1px);background-color:var(--background-color);border-bottom:1px solid var(--divider-color);z-index:var(--z-index-header)}@media (min-width: 1280px){:host{padding-right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 3);padding-left:max(var(--page-padding),(100vw - var(--layout-max-width)) / 4)}}.title{display:none;justify-content:flex-start;align-items:center;padding:20px 0;font-weight:600;color:var(--primary-text);height:var(--header-height)}@media (min-width: 460px){.title{display:block}}@media (min-width: 960px){.title{display:none}}.divider{margin-right:8px;margin-left:8px;width:1px;height:24px;background-color:var(--divider-color);content:\"\"}\n"], dependencies: [{ kind: "component", type: HamburgerButtonComponent, selector: "button[hamburger-button]" }, { kind: "component", type: FSocialLinksComponent, selector: "f-social-links" }, { kind: "component", type: ThemeButtonComponent, selector: "button[theme-button]" }, { kind: "component", type: InlineMenuComponent, selector: "inline-menu" }, { kind: "component", type: FSearchButtonComponent, selector: "f-search-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
@@ -902,7 +919,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                         FSocialLinksComponent,
                         ThemeButtonComponent,
                         InlineMenuComponent,
-                    ], template: "<button hamburger-button></button>\n<div class=\"title text-ellipsis\">{{ title }}</div>\n<inline-menu/>\n<!--<npm-version/>-->\n<div class=\"divider\"></div>\n<button theme-button></button>\n<div class=\"divider\"></div>\n<f-social-links/>\n\n", styles: [":host{position:sticky;width:100%;top:0;display:flex;justify-content:flex-start;align-items:center;padding:20px 32px;font-weight:600;color:var(--primary-text);height:calc(var(--header-height) + 1px);background-color:var(--background-color);border-bottom:1px solid var(--divider-color);z-index:var(--z-index-header)}@media (min-width: 1280px){:host{padding-right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 3);padding-left:max(var(--page-padding),(100vw - var(--layout-max-width)) / 4)}}.title{display:none;justify-content:flex-start;align-items:center;padding:20px 0;font-weight:600;color:var(--primary-text);height:var(--header-height)}@media (min-width: 460px){.title{display:block}}@media (min-width: 960px){.title{display:none}}.divider{margin-right:8px;margin-left:8px;width:1px;height:24px;background-color:var(--divider-color);content:\"\"}\n"] }]
+                        FSearchButtonComponent,
+                    ], template: "<button hamburger-button></button>\n<div class=\"title text-ellipsis\">{{ title }}</div>\n<div class=\"flex-space\"></div>\n<!--<npm-version/>-->\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<f-social-links/>\n@if (config?.search) {\n  <div class=\"divider\"></div>\n  <f-search-button/>\n}\n\n", styles: [":host{position:sticky;width:100%;top:0;display:flex;justify-content:flex-start;align-items:center;padding:20px 32px;font-weight:600;color:var(--primary-text);height:calc(var(--header-height) + 1px);background-color:var(--background-color);border-bottom:1px solid var(--divider-color);z-index:var(--z-index-header)}@media (min-width: 1280px){:host{padding-right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 3);padding-left:max(var(--page-padding),(100vw - var(--layout-max-width)) / 4)}}.title{display:none;justify-content:flex-start;align-items:center;padding:20px 0;font-weight:600;color:var(--primary-text);height:var(--header-height)}@media (min-width: 460px){.title{display:block}}@media (min-width: 960px){.title{display:none}}.divider{margin-right:8px;margin-left:8px;width:1px;height:24px;background-color:var(--divider-color);content:\"\"}\n"] }]
         }] });
 
 class NavigationGroupComponent {
@@ -3119,14 +3137,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
 class FHomePageHeaderComponent {
     logo = inject(HomeStore).getLogo();
     title = inject(HomeStore).getTitle();
+    config = inject(HomeStore).getHeader();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FHomePageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: FHomePageHeaderComponent, isStandalone: true, selector: "header[f-home-page-header]", ngImport: i0, template: "<div class=\"content\">\n  <a class=\"logo-link\" href=\"\" aria-label=\"Home\">\n    <img [src]=\"logo\" class=\"logo\" alt=\"{{ title }} Logo\" width=\"24\" height=\"24\"/>\n    <span class=\"title\">{{ title }}</span>\n  </a>\n\n  <div class=\"flex-space\"></div>\n  <button theme-button aria-label=\"Change theme\"></button>\n</div>\n\n", styles: [":host{position:relative;z-index:5;padding:0 24px}:host .logo-link{display:flex;align-items:center;text-decoration:none}:host .content{display:flex;justify-content:flex-start;align-items:center;width:100%;height:64px;max-width:1376px;margin:0 auto}:host .logo{margin-right:8px}:host .title{display:flex;align-items:center;border-bottom:1px solid transparent;width:100%;font-size:16px;font-weight:600;color:var(--primary-text)}@media (min-width: 640px){:host{padding:0 48px}}@media (min-width: 960px){:host{padding:0 64px}}\n"], dependencies: [{ kind: "component", type: ThemeButtonComponent, selector: "button[theme-button]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: FHomePageHeaderComponent, isStandalone: true, selector: "header[f-home-page-header]", ngImport: i0, template: "<div class=\"content\">\n  <a class=\"logo-link\" href=\"\" aria-label=\"Home\">\n    <img [src]=\"logo\" class=\"logo\" alt=\"{{ title }} Logo\" width=\"24\" height=\"24\"/>\n    <span class=\"title\">{{ title }}</span>\n  </a>\n\n  <div class=\"flex-space\"></div>\n  <button theme-button aria-label=\"Change theme\"></button>\n  @if (config?.search) {\n    <div class=\"divider\"></div>\n    <f-search-button/>\n  }\n</div>\n\n", styles: [":host{position:relative;z-index:5;padding:0 24px}:host .logo-link{display:flex;align-items:center;text-decoration:none}:host .content{display:flex;justify-content:flex-start;align-items:center;width:100%;height:64px;max-width:1376px;margin:0 auto}:host .logo{margin-right:8px}:host .title{display:flex;align-items:center;border-bottom:1px solid transparent;width:100%;font-size:16px;font-weight:600;color:var(--primary-text)}@media (min-width: 640px){:host{padding:0 48px}}@media (min-width: 960px){:host{padding:0 64px}}.divider{margin-right:8px;margin-left:8px;width:1px;height:24px;background-color:var(--divider-color);content:\"\"}\n"], dependencies: [{ kind: "component", type: ThemeButtonComponent, selector: "button[theme-button]" }, { kind: "component", type: FSearchButtonComponent, selector: "f-search-button" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FHomePageHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'header[f-home-page-header]', standalone: true, imports: [
                         ThemeButtonComponent,
-                    ], template: "<div class=\"content\">\n  <a class=\"logo-link\" href=\"\" aria-label=\"Home\">\n    <img [src]=\"logo\" class=\"logo\" alt=\"{{ title }} Logo\" width=\"24\" height=\"24\"/>\n    <span class=\"title\">{{ title }}</span>\n  </a>\n\n  <div class=\"flex-space\"></div>\n  <button theme-button aria-label=\"Change theme\"></button>\n</div>\n\n", styles: [":host{position:relative;z-index:5;padding:0 24px}:host .logo-link{display:flex;align-items:center;text-decoration:none}:host .content{display:flex;justify-content:flex-start;align-items:center;width:100%;height:64px;max-width:1376px;margin:0 auto}:host .logo{margin-right:8px}:host .title{display:flex;align-items:center;border-bottom:1px solid transparent;width:100%;font-size:16px;font-weight:600;color:var(--primary-text)}@media (min-width: 640px){:host{padding:0 48px}}@media (min-width: 960px){:host{padding:0 64px}}\n"] }]
+                        FSearchButtonComponent,
+                    ], template: "<div class=\"content\">\n  <a class=\"logo-link\" href=\"\" aria-label=\"Home\">\n    <img [src]=\"logo\" class=\"logo\" alt=\"{{ title }} Logo\" width=\"24\" height=\"24\"/>\n    <span class=\"title\">{{ title }}</span>\n  </a>\n\n  <div class=\"flex-space\"></div>\n  <button theme-button aria-label=\"Change theme\"></button>\n  @if (config?.search) {\n    <div class=\"divider\"></div>\n    <f-search-button/>\n  }\n</div>\n\n", styles: [":host{position:relative;z-index:5;padding:0 24px}:host .logo-link{display:flex;align-items:center;text-decoration:none}:host .content{display:flex;justify-content:flex-start;align-items:center;width:100%;height:64px;max-width:1376px;margin:0 auto}:host .logo{margin-right:8px}:host .title{display:flex;align-items:center;border-bottom:1px solid transparent;width:100%;font-size:16px;font-weight:600;color:var(--primary-text)}@media (min-width: 640px){:host{padding:0 48px}}@media (min-width: 960px){:host{padding:0 64px}}.divider{margin-right:8px;margin-left:8px;width:1px;height:24px;background-color:var(--divider-color);content:\"\"}\n"] }]
         }] });
 
 class FHomePageHeroComponent {
@@ -3255,5 +3275,5 @@ var index = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { AVAILABLE_LANGUAGES, ActivateTocByHashHandler, ActivateTocByHashRequest, CalculateHashFromScrollPositionAndActivateTocHandler, CalculateHashFromScrollPositionAndActivateTocRequest, CalculateTableOfContentDataHandler, CalculateTableOfContentDataRequest, DOCUMENTATION_CONFIGURATION, DOCUMENTATION_ROUTES, DOCUMENT_ELEMENT, DocumentationRootComponent, DocumentationStore, DropdownMenuComponent, EMarkdownContainerType, EParsedContainerType, FCheckboxComponent, FCodeGroupComponent, FCodeGroupTabsComponent, FCodeViewComponent, FExampleViewComponent, FFooterEditInformationComponent, FFooterNavigationButtonComponent, FFooterNavigationComponent, FHomePageButtonsRowComponent, FHomePageFeaturesComponent, FHomePageFooterComponent, FHomePageHeaderComponent, FHomePageHeroComponent, FHomePageMembershipsComponent, FInsertComponentDirective, FMarkdownFooterComponent, FMarkdownRendererComponent, FMetaService, FNavigationItemComponent, FPreviewBase, FPreviewComponent, FPreviewGroupFiltersComponent, FPreviewGroupService, FRadioButtonComponent, FSocialLinksComponent, F_PREVIEW_NAVIGATION_PROVIDER, F_SOCIAL_LINKS_PROVIDER, GTAG_CONFIG, GTagService, GetAbsoluteTopToContainerHandler, GetAbsoluteTopToContainerRequest, GetPreviousNextPageNavigationHandler, GetPreviousNextPageNavigationRequest, GetPreviousNextPageNavigationResponse, HEADER_CONFIGURATION, HEADER_CONFIGURATION_STORE, HOME_PAGE_CONFIGURATION, HOME_ROUTES, HamburgerButtonComponent, HandleNavigationLinksHandler, HandleNavigationLinksRequest, HeaderComponent, HighlightComponent, HighlightService, HomeRootComponent, HomeStore, IS_BROWSER_PLATFORM, InlineMenuComponent, LOCAL_STORAGE, LOCATION, MarkCodeFocusedBlocksPostProcessor, MarkdownContainerComponent, MarkdownService, NavigationGroupComponent, NavigationPanelComponent, NpmVersionComponent, OverflowObserverDirective, ParseAlerts, ParseAngularExampleWithCodeLinks, ParseGroupedCodeItems, ParsePreviewGroup, ParseSingleCodeItem, PopoverService, RIGHT_TOP_OVERLAY_POSITION, RenderDynamicComponentsHandler, RenderDynamicComponentsRequest, SCROLLABLE_CONTAINER, ScrollToElementInContainerHandler, ScrollToElementInContainerRequest, ScrollableContainerComponent, TOGGLE_NAVIGATION_COMPONENT, TableOfContentComponent, TableOfContentData, TableOfContentItemsComponent, ThemeButtonComponent, ThemeService, UNIVERSAL_THEME, WINDOW, coerceComponentHeight, copyToClipboard, defineLazyComponent, defineNavigationGroup, encodeDataAttr, extractComponent, getContent, isClosingToken, isOpeningToken, parseComponentTag, parseFileLinkLine, parseLanguageFromFileExtension, parseSingleBracketText, parseSyntaxLanguage, provide404Markdown, provideBackground, provideComponents, provideDirectory, provideDocumentation, provideDocumentationMeta, provideFooterNavigation, provideGTag, provideHeader, provideHeaderMediaLinks, provideHeaderNavigation, provideHero, provideHomeButtons, provideHomeFeatures, provideHomeFooter, provideHomePage, provideImage, provideLanguage, provideLogo, provideNavigation, provideTheme, provideTitle, provideTocData };
+export { AVAILABLE_LANGUAGES, ActivateTocByHashHandler, ActivateTocByHashRequest, CalculateHashFromScrollPositionAndActivateTocHandler, CalculateHashFromScrollPositionAndActivateTocRequest, CalculateTableOfContentDataHandler, CalculateTableOfContentDataRequest, DOCUMENTATION_CONFIGURATION, DOCUMENTATION_ROUTES, DOCUMENT_ELEMENT, DocumentationRootComponent, DocumentationStore, DropdownMenuComponent, EMarkdownContainerType, EParsedContainerType, FCheckboxComponent, FCodeGroupComponent, FCodeGroupTabsComponent, FCodeViewComponent, FExampleViewComponent, FFooterEditInformationComponent, FFooterNavigationButtonComponent, FFooterNavigationComponent, FHomePageButtonsRowComponent, FHomePageFeaturesComponent, FHomePageFooterComponent, FHomePageHeaderComponent, FHomePageHeroComponent, FHomePageMembershipsComponent, FInsertComponentDirective, FMarkdownFooterComponent, FMarkdownRendererComponent, FMetaService, FNavigationItemComponent, FPreviewBase, FPreviewComponent, FPreviewGroupFiltersComponent, FPreviewGroupService, FRadioButtonComponent, FSearchButtonComponent, FSocialLinksComponent, F_PREVIEW_NAVIGATION_PROVIDER, F_SOCIAL_LINKS_PROVIDER, GTAG_CONFIG, GTagService, GetAbsoluteTopToContainerHandler, GetAbsoluteTopToContainerRequest, GetPreviousNextPageNavigationHandler, GetPreviousNextPageNavigationRequest, GetPreviousNextPageNavigationResponse, HEADER_CONFIGURATION_STORE, HOME_PAGE_CONFIGURATION, HOME_ROUTES, HamburgerButtonComponent, HandleNavigationLinksHandler, HandleNavigationLinksRequest, HeaderComponent, HighlightComponent, HighlightService, HomeRootComponent, HomeStore, IS_BROWSER_PLATFORM, InlineMenuComponent, LOCAL_STORAGE, LOCATION, MarkCodeFocusedBlocksPostProcessor, MarkdownContainerComponent, MarkdownService, NavigationGroupComponent, NavigationPanelComponent, NpmVersionComponent, OverflowObserverDirective, ParseAlerts, ParseAngularExampleWithCodeLinks, ParseGroupedCodeItems, ParsePreviewGroup, ParseSingleCodeItem, PopoverService, RIGHT_TOP_OVERLAY_POSITION, RenderDynamicComponentsHandler, RenderDynamicComponentsRequest, SCROLLABLE_CONTAINER, ScrollToElementInContainerHandler, ScrollToElementInContainerRequest, ScrollableContainerComponent, TOGGLE_NAVIGATION_COMPONENT, TableOfContentComponent, TableOfContentData, TableOfContentItemsComponent, ThemeButtonComponent, ThemeService, UNIVERSAL_THEME, WINDOW, coerceComponentHeight, copyToClipboard, defineLazyComponent, defineNavigationGroup, encodeDataAttr, extractComponent, getContent, isClosingToken, isOpeningToken, parseComponentTag, parseFileLinkLine, parseLanguageFromFileExtension, parseSingleBracketText, parseSyntaxLanguage, provide404Markdown, provideBackground, provideComponents, provideDirectory, provideDocumentation, provideDocumentationMeta, provideFooterNavigation, provideGTag, provideHeader, provideHeaderMediaLinks, provideHeaderNavigation, provideHeaderSearch, provideHero, provideHomeButtons, provideHomeFeatures, provideHomeFooter, provideHomePage, provideImage, provideLanguage, provideLogo, provideNavigation, provideTheme, provideTitle, provideTocData };
 //# sourceMappingURL=foblex-m-render.mjs.map