@foblex/m-render 3.0.2 → 3.0.5

package/assets/styles/_code-group.scss

@@ -48,3 +48,13 @@
     }
   }
 }
+
+@media (max-width: 959px) {
+  .m-render {
+    .f-code-group {
+      width: calc(100% + (var(--page-padding) * 2));
+      margin-inline: calc(var(--page-padding) * -1);
+      border-radius: 0;
+    }
+  }
+}

package/assets/styles/_code-highlight.scss

@@ -1,36 +1,36 @@
 .m-render {
-  --token-tag: var(--primary-2);
-  --token-attr-name: var(--purple-2);
-  --token-attr-value: var(--green-3);
-  --token-string: var(--green-2);
-  --token-punctuation: var(--primary-text);
-  --token-keyword: var(--purple-2);
-  --token-function: var(--primary-3);
-  --token-number: var(--yellow-3);
-  --token-operator: var(--secondary-text);
-  --token-interpolation: var(--purple-2);
-  --token-expression: var(--green-3);
-  --token-comment: var(--gray-1);
-  --token-selector: var(--primary-2);
-  --token-variable: #d17adf;
+  --token-tag: #1d4ed8;
+  --token-attr-name: #7c3aed;
+  --token-attr-value: #0f7a43;
+  --token-string: #0f8a55;
+  --token-punctuation: #2f3441;
+  --token-keyword: #6d28d9;
+  --token-function: #1e40af;
+  --token-number: #b45309;
+  --token-operator: #4b5563;
+  --token-interpolation: #8b3cf6;
+  --token-expression: #0c7a4c;
+  --token-comment: #6b7280;
+  --token-selector: #1d4ed8;
+  --token-variable: #9b2fae;
 }
 
 .dark {
   .m-render {
-    --token-tag: var(--indigo-1);
-    --token-attr-name: var(--purple-1);
-    --token-attr-value: var(--green-1);
-    --token-string: var(--green-2);
-    --token-punctuation: var(--primary-text);
-    --token-keyword: var(--purple-1);
-    --token-function: var(--primary-2);
-    --token-number: var(--yellow-1);
-    --token-operator: var(--secondary-text);
-    --token-interpolation: var(--purple-1);
-    --token-expression: var(--green-2);
-    --token-comment: var(--gray-1);
-    --token-selector: var(--indigo-1);
-    --token-variable: #e0b3ff;
+    --token-tag: #8fb5ff;
+    --token-attr-name: #d2b4ff;
+    --token-attr-value: #7fe3a0;
+    --token-string: #84e1a8;
+    --token-punctuation: #ececf2;
+    --token-keyword: #cab8ff;
+    --token-function: #79a6ff;
+    --token-number: #f3c97a;
+    --token-operator: #b6bbca;
+    --token-interpolation: #e4b8ff;
+    --token-expression: #8fe7b8;
+    --token-comment: #8d95a5;
+    --token-selector: #8fb5ff;
+    --token-variable: #ffb4d8;
   }
 }
 

package/assets/styles/_preview-group.scss

@@ -9,3 +9,12 @@
     overflow: hidden;
   }
 }
+
+@media (max-width: 959px) {
+  .m-render {
+    .f-preview-group {
+      width: calc(100% + (var(--page-padding) * 2));
+      margin-inline: calc(var(--page-padding) * -1);
+    }
+  }
+}

package/assets/styles/_variables.scss

@@ -229,7 +229,7 @@
   --code-view-background: var(--alt-background);
   --code-view-border-radius: var(--border-radius);
 
-  --code-view-text-color: var(--secondary-text);
+  --code-view-text-color: var(--primary-text);
   --code-view-line-height: 1.7;
   --code-view-font-size: 0.875em;
 

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,
@@ -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(--divider-color);border-radius:6px;width:36px;min-width:36px;height:32px;padding:0;background:var(--code-view-copy-button-background);color:var(--secondary-text)}:host ::ng-deep .DocSearch-Button:hover{background:var(--soft-background)}:host ::ng-deep .DocSearch-Button-Placeholder,:host ::ng-deep .DocSearch-Button-Keys,:host ::ng-deep .DocSearch-Search-Icon+span{display:none}:host ::ng-deep .DocSearch-Search-Icon{width:18px;height:18px}\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(--divider-color);border-radius:6px;width:36px;min-width:36px;height:32px;padding:0;background:var(--code-view-copy-button-background);color:var(--secondary-text)}:host ::ng-deep .DocSearch-Button:hover{background:var(--soft-background)}:host ::ng-deep .DocSearch-Button-Placeholder,:host ::ng-deep .DocSearch-Button-Keys,:host ::ng-deep .DocSearch-Search-Icon+span{display:none}:host ::ng-deep .DocSearch-Search-Icon{width:18px;height:18px}\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;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:\"\"}@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;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:\"\"}@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 {
@@ -3580,13 +3665,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%}@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{display:flex;justify-content:flex-start;align-items:flex-start;gap:12px;margin-top:28px;border:1px solid var(--divider-color);border-radius:10px;padding:12px 14px;background:linear-gradient(135deg,var(--soft-background) 0%,var(--alt-background) 100%);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-soft);color:var(--primary-2);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-1);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere;transition:color .2s ease}.origin-link-url:hover{color:var(--primary-2)}@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%}@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{display:flex;justify-content:flex-start;align-items:flex-start;gap:12px;margin-top:28px;border:1px solid var(--divider-color);border-radius:10px;padding:12px 14px;background:linear-gradient(135deg,var(--soft-background) 0%,var(--alt-background) 100%);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-soft);color:var(--primary-2);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-1);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere;transition:color .2s ease}.origin-link-url:hover{color:var(--primary-2)}@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']]
@@ -4066,5 +4151,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