@foblex/m-render 2.6.3 → 2.6.5

package/fesm2022/foblex-m-render.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, booleanAttribute, HostListener, Input, ViewChild, Output, ChangeDetectionStrategy, Component, input, output, viewChild, InjectionToken, inject, signal, Injectable, Renderer2, ElementRef, NgZone, Directive, ChangeDetectorRef, DestroyRef, computed, ViewContainerRef, forwardRef, Injector, effect, untracked } from '@angular/core';
 import { BrowserService, F_LOCAL_STORAGE } from '@foblex/platform';
-import { Subject, of, map, from, switchMap, startWith, filter, Observable, EMPTY, debounceTime, fromEvent } from 'rxjs';
+import { Subject, of, map, from, switchMap, startWith, filter, defer, Observable, EMPTY, debounceTime, fromEvent } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
-import { catchError, tap, filter as filter$1, take } from 'rxjs/operators';
+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';
@@ -1012,68 +1012,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                     }, template: "@for (data of data(); track data) {\n  <button class=\"f-tab-button\" [class.active]=\"$index === index()\"\n          (click)=\"onTabClick($index)\">\n    {{ data.tab }}\n  </button>\n}\n" }]
         }] });
 
-class ChangeCodeFocusedSyntaxPreProcessor {
-    handle(element) {
-        this._getCodeBlocks(element).forEach((block) => {
-            block.innerHTML = this._replaceFocus(block.innerHTML);
-        });
-        return of(element);
-    }
-    _getCodeBlocks(element) {
-        return Array.from(element.querySelectorAll('pre code'));
-    }
-    _replaceFocus(text) {
-        return text.replace(RULE$2.regex, RULE$2.replacer);
-    }
-}
-const RULE$2 = {
-    regex: /\|:\|(.*?)\|:\|/g,
-    replacer: (match, p1) => {
-        return `|foc-|${p1}|-foc|`;
-    },
-};
-
-class ModifyPunctuationHighlightPostProcessor {
-    handle(element) {
-        element.querySelectorAll('span.token.attr-name').forEach((node) => {
-            const text = node.textContent;
-            if (text && text.startsWith('[') && text.endsWith(']')) {
-                node.innerHTML = this._replacePunctuation(text);
-            }
-        });
-        return of(element);
-    }
-    _replacePunctuation(text) {
-        return text.replace(RULE$1.regex, RULE$1.replacer);
-    }
-}
-const RULE$1 = {
-    regex: /(\[|\])/g,
-    replacer: (match) => {
-        return `<span class="token punctuation">${match}</span>`;
-    },
-};
-
 class MarkCodeFocusedBlocksPostProcessor {
     _browser;
     constructor(_browser) {
         this._browser = _browser;
     }
     handle(element) {
-        this._getCodeBlocks(element).forEach((block) => {
-            block.innerHTML = this._replaceFocus(block.innerHTML);
-            if (block.querySelector('.focused')) {
-                this._applyOpacity(block.parentElement);
-            }
+        const html = element.innerHTML;
+        if (!FOCUS_REGEX.test(html)) {
+            console.warn('[MarkCodeFocusedBlocksPostProcessor] No focus markers found in the code block.', html);
+            return of(element);
+        }
+        element.innerHTML = html.replace(FOCUS_REGEX, (_match, content) => {
+            return `<focus class="focused"><div class="inline-focus">${content}</div></focus>`;
         });
+        const focused = element.querySelector('.focused');
+        if (focused) {
+            this._applyOpacity(element.parentElement);
+        }
         return of(element);
     }
-    _getCodeBlocks(element) {
-        return Array.from(element.querySelectorAll('pre code'));
-    }
-    _replaceFocus(text) {
-        return text.replace(RULE.regex, RULE.replacer);
-    }
     _applyOpacity(element) {
         if (!element.classList.contains('focused')) {
             element.style.color = this._createRgbaString(this._getElementColor(element), 0.5);
@@ -1099,12 +1057,7 @@ class MarkCodeFocusedBlocksPostProcessor {
         return color.match(/\d+/g);
     }
 }
-const RULE = {
-    regex: /\|foc-\|(.*?)\|-foc\|/g,
-    replacer: (match, p1) => {
-        return `<focus class="focused"><span>${p1}</span></focus>`;
-    },
-};
+const FOCUS_REGEX = /ƒƒƒ([\s\S]*?)¢¢¢/g;
 
 const UNIVERSAL_THEME = {
     name: 'universal',
@@ -1388,42 +1341,36 @@ const UNIVERSAL_THEME = {
 };
 
 class HighlightService {
-    _highlighter;
     _browser = inject(BrowserService);
+    _highlighter$ = defer(() => from(createHighlighter({ themes: [UNIVERSAL_THEME], langs: LANGUAGES }))).pipe(shareReplay(1));
     highlight(element, lang, content) {
-        return this._browser.isBrowser() ? this._markNoneLanguage(element).pipe(switchMap((x) => new ChangeCodeFocusedSyntaxPreProcessor().handle(x)), switchMap((x) => this._highlightCodeWithPrism(x, lang, content)), switchMap((x) => new ModifyPunctuationHighlightPostProcessor().handle(x)), switchMap((x) => new MarkCodeFocusedBlocksPostProcessor(this._browser).handle(x))) : of(element);
+        if (!this._browser.isBrowser()) {
+            console.warn('[HighlightService] Skipping highlight on server.');
+            return of(element);
+        }
+        return this._highlightCodeBlock(element, lang, content).pipe(switchMap((x) => this._postProcess(x)), catchError((err) => {
+            console.error('[HighlightService] Failed to highlight:', err);
+            return of(element);
+        }));
     }
-    _highlightCodeWithPrism(element, lang, content) {
+    _highlightCodeBlock(element, lang, content) {
+        return this._highlighter$.pipe(switchMap((highlighter) => this._renderCode(element, highlighter, lang, content)));
+    }
+    _renderCode(element, highlighter, lang, content) {
         return new Observable((observer) => {
-            this._loadHighlighter().then(() => this._highlight(observer, element, lang, content));
+            const processedContent = this._preprocessFocus(content);
+            element.innerHTML = highlighter.codeToHtml(processedContent, { lang, theme: 'universal', defaultColor: false });
+            requestAnimationFrame(() => {
+                observer.next(element);
+                observer.complete();
+            });
         });
     }
-    _highlight(observer, element, lang, content) {
-        element.innerHTML = this._codeToHtml(content, lang);
-        observer.next(element);
-        observer.complete();
-    }
-    _codeToHtml(code, language) {
-        return this._highlighter?.codeToHtml(code, {
-            lang: language || 'text',
-            theme: 'universal',
-            defaultColor: false,
-        }) || code;
-    }
-    async _loadHighlighter() {
-        if (!this._highlighter) {
-            this._highlighter = await createHighlighter({
-                themes: [UNIVERSAL_THEME], langs: LANGUAGES,
-            });
-        }
-        return this._highlighter;
+    _preprocessFocus(code) {
+        return code.replace(/\|\:\|([\s\S]*?)\|\:\|/g, (_, p1) => `ƒƒƒ${p1}¢¢¢`);
     }
-    _markNoneLanguage(element) {
-        element.querySelectorAll('pre code:not([class*="language-"])').forEach((x) => {
-            x.classList.add('language-none');
-            x.innerHTML = x.textContent ?? '';
-        });
-        return of(element);
+    _postProcess(element) {
+        return of(element).pipe(switchMap((x) => new MarkCodeFocusedBlocksPostProcessor(this._browser).handle(x)));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HighlightService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HighlightService, providedIn: 'root' });
@@ -1546,13 +1493,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 function coerceComponentHeight(value) {
     if (value === undefined) {
-        return 'auto';
+        return undefined;
     }
     value = Number(value);
     if (value) {
         return value + 'px';
     }
-    return 'auto';
+    return undefined;
 }
 
 function parseComponentTag(html) {
@@ -1698,23 +1645,6 @@ var EParsedContainerType;
 
 const F_PREVIEW_NAVIGATION_PROVIDER = new InjectionToken('F_PREVIEW_NAVIGATION_PROVIDER');
 
-function getContent(tokens, index, eContainerType) {
-    let result;
-    for (let i = index + 1; i < tokens.length; i++) {
-        if (tokens[i].type === `container_${eContainerType}_close`) {
-            break;
-        }
-        if (isInlineToken(tokens[i])) {
-            result = tokens[i].content;
-            break;
-        }
-    }
-    return result;
-}
-function isInlineToken(token) {
-    return token.type === 'inline' && !token.tag;
-}
-
 class MarkdownService {
     _markdown = new MarkdownIt({ html: true, linkify: true });
     _httpClient = inject(HttpClient);
@@ -1770,13 +1700,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             type: Injectable
         }], ctorParameters: () => [] });
 
+function getContent(tokens, index, eContainerType) {
+    let result;
+    for (let i = index + 1; i < tokens.length; i++) {
+        if (tokens[i].type === `container_${eContainerType}_close`) {
+            break;
+        }
+        if (isInlineToken(tokens[i])) {
+            result = tokens[i].content;
+            break;
+        }
+    }
+    return result;
+}
+function isInlineToken(token) {
+    return token.type === 'inline' && !token.tag;
+}
+function encodeDataAttr(data) {
+    return JSON.stringify(data).replace(/"/g, '&quot;');
+}
+function isOpeningToken(token) {
+    return token.nesting === 1;
+}
+function isClosingToken(token) {
+    return token.nesting === -1;
+}
+function parseFileLinkLine(line) {
+    const match = line.match(/\[(.+?)\] <<< (.+)/);
+    return match ? { fileName: match[1], url: match[2] } : null;
+}
+function parseSingleBracketText(line) {
+    const match = line.match(/\[(.+?)\]/);
+    return match ? match[1] : null;
+}
+
 class ParseAlerts {
     render(type, markdown) {
         return [container, type, {
                 render: (tokens, index) => {
                     const token = tokens[index];
                     const info = token.info.trim().slice(type.length).trim();
-                    if (token.nesting === 1) {
+                    if (isOpeningToken(token)) {
                         const title = markdown.renderInline(info);
                         return `<div class="f-alert ${type}"><p class="f-alert-title">${title}</p>\n`;
                     }
@@ -1793,16 +1757,13 @@ class ParseGroupedCodeItems {
     render() {
         return [container, EMarkdownContainerType.CODE_GROUP, {
                 render: (tokens, index) => {
-                    if (this._isOpeningToken(tokens, index)) {
+                    if (isOpeningToken(tokens[index])) {
                         return this._openingExampleGroupHTML(this._generateData(tokens, index));
                     }
                     return '</f-code-group>';
                 },
             }];
     }
-    _isOpeningToken(tokens, index) {
-        return tokens[index].nesting === 1;
-    }
     _generateData(tokens, index) {
         const result = [];
         for (let i = index + 1; !this._isClosingToken(tokens, i); i++) {
@@ -1820,14 +1781,13 @@ class ParseGroupedCodeItems {
         return result;
     }
     _isClosingToken(token, index) {
-        return token[index].nesting === -1 && token[index].type === F_CONTAINER_CLOSE_TAG;
+        return isClosingToken(token[index]) && token[index].type === F_CONTAINER_CLOSE_TAG;
     }
     _isCodeFenceToken(token) {
         return token.type === 'fence' && token.tag === 'code';
     }
     _openingExampleGroupHTML(data) {
-        const jsonData = JSON.stringify(data).replace(/"/g, '&quot;');
-        return `<f-code-group data-data="${jsonData}">`;
+        return `<f-code-group data-data="${encodeDataAttr(data)}">`;
     }
     _getCodeBlockTitle(data) {
         return data.match(/\[(.*)\]/)?.[1] || this._getCodeLanguage(data) || 'txt';
@@ -1846,15 +1806,12 @@ class ParseSingleCodeItem {
         }
         markdown.renderer.rules.fence = (tokens, index) => {
             const data = this._getTokenData(tokens[index]);
-            return (`<f-code-group data-data="${this._coerceData(this._createCodeData(data))}"></f-code-group>`);
+            return (`<f-code-group data-data="${encodeDataAttr([this._createCodeData(data)])}"></f-code-group>`);
         };
     }
     _getTokenData(token) {
         return { value: token.content, language: token.info };
     }
-    _coerceData(data) {
-        return JSON.stringify([data]).replace(/"/g, '&quot;');
-    }
     _createCodeData({ value, language }) {
         return {
             tab: '',
@@ -1869,73 +1826,47 @@ class ParseAngularExampleWithCodeLinks {
     render() {
         return [container, EMarkdownContainerType.EXAMPLE_GROUP, {
                 render: (tokens, index) => {
-                    if (this._isOpeningToken(tokens, index)) {
-                        return this._openingExampleGroupHTML(this._generateData(tokens, index));
-                    }
-                    return '</f-code-group>';
+                    return isOpeningToken(tokens[index]) ? this._opening(tokens, index) : '</f-code-group>';
                 },
             }];
     }
-    _isOpeningToken(tokens, index) {
-        return tokens[index].nesting === 1;
+    _opening(tokens, index) {
+        const data = this._collectData(tokens, index);
+        return `<f-code-group data-data="${encodeDataAttr(data)}">`;
     }
-    _generateData(tokens, index) {
+    _collectData(tokens, index) {
         const result = [];
         const component = this._parseNgComponent(tokens[index]);
         const height = component?.height || 'auto';
         if (component) {
-            result.push(this._createComponentData(component));
+            result.push({
+                tab: 'Example',
+                value: component.tag,
+                type: EParsedContainerType.EXAMPLE,
+                height: component.height || 'auto',
+            });
         }
         const content = getContent(tokens, index, EMarkdownContainerType.EXAMPLE_GROUP);
-        if (content) {
-            this._parseData(content).forEach((x) => result.push(this._createContentData(x, height)));
-        }
-        return result;
-    }
-    _createComponentData(component) {
-        return {
-            tab: 'Example',
-            value: component.tag,
-            type: EParsedContainerType.EXAMPLE,
-            height: component.height || 'auto',
-        };
-    }
-    _createContentData(content, height) {
-        return {
-            tab: content.fileName,
-            value: content.url,
+        const items = (content || '').split('\n').map(parseFileLinkLine).filter(Boolean);
+        items.forEach(({ fileName, url }) => result.push({
+            tab: fileName,
+            value: url,
             isLink: true,
             type: EParsedContainerType.CODE,
             height,
-        };
+        }));
+        return result;
     }
     _parseNgComponent(token) {
-        if (!this._isNgComponent(token)) {
-            return null;
-        }
         const cleanedInput = token.info.replace(/ng-component\s*/, '');
         const tagMatch = cleanedInput.match(/<([a-zA-Z0-9-]+)>.*<\/\1>/);
         const heightMatch = cleanedInput.match(/\[height\]="(\d+)"/);
-        if (!tagMatch) {
-            throw new Error("Invalid input: no valid tag found");
-        }
-        const tag = tagMatch[0];
-        const height = heightMatch ? heightMatch[1] : undefined;
-        return { tag, height };
-    }
-    _isNgComponent(token) {
-        return token.info.trim().startsWith(EMarkdownContainerType.EXAMPLE_GROUP);
-    }
-    _parseData(data) {
-        return data.split('\n').map(this._extractFileData).filter(Boolean);
-    }
-    _extractFileData(line) {
-        const match = line.match(/\[(.+?)\] <<< (.+)/);
-        return match ? { fileName: match[1], url: match[2] } : null;
-    }
-    _openingExampleGroupHTML(data) {
-        const jsonData = JSON.stringify(data).replace(/"/g, '&quot;');
-        return `<f-code-group data-data="${jsonData}">`;
+        if (!tagMatch)
+            return null;
+        return {
+            tag: tagMatch[0],
+            height: heightMatch?.[1],
+        };
     }
 }
 
@@ -1947,16 +1878,13 @@ class ParsePreviewGroup {
     render() {
         return [container, EMarkdownContainerType.PREVIEW_GROUP, {
                 render: (tokens, index) => {
-                    if (this._isOpeningToken(tokens, index)) {
+                    if (isOpeningToken(tokens[index])) {
                         return this._getGroupsHTML(this._generateData(tokens, index));
                     }
                     return '';
                 },
             }];
     }
-    _isOpeningToken(tokens, index) {
-        return tokens[index].nesting === 1;
-    }
     _generateData(tokens, index) {
         const groups = [];
         this._parseData(getContent(tokens, index, EMarkdownContainerType.PREVIEW_GROUP) || '').forEach((x) => {
@@ -1968,11 +1896,7 @@ class ParsePreviewGroup {
         return groups;
     }
     _parseData(data) {
-        return data.split('\n').map(this._extractFileData).filter(Boolean);
-    }
-    _extractFileData(line) {
-        const match = line.match(/\[(.+?)\]/);
-        return match ? match[1] : null;
+        return data.split('\n').map(parseSingleBracketText).filter(Boolean);
     }
     _getGroupsHTML(groups) {
         const result = (groups || []).map((x) => {
@@ -2865,7 +2789,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 var index$2 = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    ChangeCodeFocusedSyntaxPreProcessor: ChangeCodeFocusedSyntaxPreProcessor,
     get EMarkdownContainerType () { return EMarkdownContainerType; },
     get EParsedContainerType () { return EParsedContainerType; },
     FCodeGroupComponent: FCodeGroupComponent,
@@ -2892,16 +2815,20 @@ var index$2 = /*#__PURE__*/Object.freeze({
     MarkCodeFocusedBlocksPostProcessor: MarkCodeFocusedBlocksPostProcessor,
     MarkdownContainerComponent: MarkdownContainerComponent,
     MarkdownService: MarkdownService,
-    ModifyPunctuationHighlightPostProcessor: ModifyPunctuationHighlightPostProcessor,
     ParseAlerts: ParseAlerts,
     ParseAngularExampleWithCodeLinks: ParseAngularExampleWithCodeLinks,
     ParseGroupedCodeItems: ParseGroupedCodeItems,
     ParsePreviewGroup: ParsePreviewGroup,
     ParseSingleCodeItem: ParseSingleCodeItem,
     coerceComponentHeight: coerceComponentHeight,
+    encodeDataAttr: encodeDataAttr,
     getContent: getContent,
+    isClosingToken: isClosingToken,
+    isOpeningToken: isOpeningToken,
     parseComponentTag: parseComponentTag,
+    parseFileLinkLine: parseFileLinkLine,
     parseLanguageFromFileExtension: parseLanguageFromFileExtension,
+    parseSingleBracketText: parseSingleBracketText,
     parseSyntaxLanguage: parseSyntaxLanguage
 });
 
@@ -3000,7 +2927,6 @@ var index$1 = /*#__PURE__*/Object.freeze({
     CalculateHashFromScrollPositionAndActivateTocRequest: CalculateHashFromScrollPositionAndActivateTocRequest,
     get CalculateTableOfContentDataHandler () { return CalculateTableOfContentDataHandler; },
     CalculateTableOfContentDataRequest: CalculateTableOfContentDataRequest,
-    ChangeCodeFocusedSyntaxPreProcessor: ChangeCodeFocusedSyntaxPreProcessor,
     DOCUMENTATION_CONFIGURATION: DOCUMENTATION_CONFIGURATION,
     DOCUMENTATION_ROUTES: DOCUMENTATION_ROUTES,
     DocumentationRootComponent: DocumentationRootComponent,
@@ -3042,7 +2968,6 @@ var index$1 = /*#__PURE__*/Object.freeze({
     MarkCodeFocusedBlocksPostProcessor: MarkCodeFocusedBlocksPostProcessor,
     MarkdownContainerComponent: MarkdownContainerComponent,
     MarkdownService: MarkdownService,
-    ModifyPunctuationHighlightPostProcessor: ModifyPunctuationHighlightPostProcessor,
     NavigationGroupComponent: NavigationGroupComponent,
     NavigationPanelComponent: NavigationPanelComponent,
     ParseAlerts: ParseAlerts,
@@ -3064,10 +2989,15 @@ var index$1 = /*#__PURE__*/Object.freeze({
     coerceComponentHeight: coerceComponentHeight,
     defineLazyComponent: defineLazyComponent,
     defineNavigationGroup: defineNavigationGroup,
+    encodeDataAttr: encodeDataAttr,
     extractComponent: extractComponent,
     getContent: getContent,
+    isClosingToken: isClosingToken,
+    isOpeningToken: isOpeningToken,
     parseComponentTag: parseComponentTag,
+    parseFileLinkLine: parseFileLinkLine,
     parseLanguageFromFileExtension: parseLanguageFromFileExtension,
+    parseSingleBracketText: parseSingleBracketText,
     parseSyntaxLanguage: parseSyntaxLanguage,
     provide404Markdown: provide404Markdown,
     provideComponents: provideComponents,
@@ -3166,7 +3096,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 class FHomePageButtonsRowComponent {
     viewModel = inject(HomeStore).getButtons();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FHomePageButtonsRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FHomePageButtonsRowComponent, isStandalone: true, selector: "f-home-page-buttons-row", host: { properties: { "class.display-none": "!viewModel.length" } }, ngImport: i0, template: "@for (button of viewModel; track button.text) {\n  @if (button.routerLink) {\n    <a class=\"f-button\" [class.primary]=\"button.primary\" routerLink=\"{{ button.routerLink }}\">\n      @if (button.icon) {\n        <span class=\"f-icon {{ button.icon }}\"></span>\n      }\n      {{ button.text }}\n    </a>\n  } @else if(button.href) {\n    <a class=\"f-button\" [class.primary]=\"button.primary\" href=\"{{ button.href }}\">\n      @if (button.icon) {\n        <span class=\"f-icon {{ button.icon }}\"></span>\n      }\n      {{ button.text }}\n    </a>\n  }\n}\n\n", styles: [":host{display:flex;flex-wrap:wrap;justify-content:center;padding-top:32px;gap:12px;width:fit-content;margin:0 auto}@media (min-width: 960px){:host{margin:0;justify-content:flex-start}}.f-button{display:flex;align-items:center;gap:6px}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FHomePageButtonsRowComponent, isStandalone: true, selector: "f-home-page-buttons-row", host: { properties: { "class.display-none": "!viewModel.length" } }, ngImport: i0, template: "@for (button of viewModel; track button.text) {\n  @if (button.routerLink) {\n    <a class=\"f-button\" [class.primary]=\"button.primary\" routerLink=\"{{ button.routerLink }}\">\n      @if (button.icon) {\n        <span class=\"f-icon {{ button.icon }}\"></span>\n      }\n      {{ button.text }}\n    </a>\n  } @else if(button.href) {\n    <a class=\"f-button\" [class.primary]=\"button.primary\" href=\"{{ button.href }}\" target=\"_blank\" rel=\"noopener noreferrer\">\n      @if (button.icon) {\n        <span class=\"f-icon {{ button.icon }}\"></span>\n      }\n      {{ button.text }}\n    </a>\n  }\n}\n\n", styles: [":host{display:flex;flex-wrap:wrap;justify-content:center;padding-top:32px;gap:12px;width:fit-content;margin:0 auto}@media (min-width: 960px){:host{margin:0;justify-content:flex-start}}.f-button{display:flex;align-items:center;gap:6px}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FHomePageButtonsRowComponent, decorators: [{
             type: Component,
@@ -3174,7 +3104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         RouterLink,
                     ], host: {
                         '[class.display-none]': '!viewModel.length',
-                    }, template: "@for (button of viewModel; track button.text) {\n  @if (button.routerLink) {\n    <a class=\"f-button\" [class.primary]=\"button.primary\" routerLink=\"{{ button.routerLink }}\">\n      @if (button.icon) {\n        <span class=\"f-icon {{ button.icon }}\"></span>\n      }\n      {{ button.text }}\n    </a>\n  } @else if(button.href) {\n    <a class=\"f-button\" [class.primary]=\"button.primary\" href=\"{{ button.href }}\">\n      @if (button.icon) {\n        <span class=\"f-icon {{ button.icon }}\"></span>\n      }\n      {{ button.text }}\n    </a>\n  }\n}\n\n", styles: [":host{display:flex;flex-wrap:wrap;justify-content:center;padding-top:32px;gap:12px;width:fit-content;margin:0 auto}@media (min-width: 960px){:host{margin:0;justify-content:flex-start}}.f-button{display:flex;align-items:center;gap:6px}\n"] }]
+                    }, template: "@for (button of viewModel; track button.text) {\n  @if (button.routerLink) {\n    <a class=\"f-button\" [class.primary]=\"button.primary\" routerLink=\"{{ button.routerLink }}\">\n      @if (button.icon) {\n        <span class=\"f-icon {{ button.icon }}\"></span>\n      }\n      {{ button.text }}\n    </a>\n  } @else if(button.href) {\n    <a class=\"f-button\" [class.primary]=\"button.primary\" href=\"{{ button.href }}\" target=\"_blank\" rel=\"noopener noreferrer\">\n      @if (button.icon) {\n        <span class=\"f-icon {{ button.icon }}\"></span>\n      }\n      {{ button.text }}\n    </a>\n  }\n}\n\n", styles: [":host{display:flex;flex-wrap:wrap;justify-content:center;padding-top:32px;gap:12px;width:fit-content;margin:0 auto}@media (min-width: 960px){:host{margin:0;justify-content:flex-start}}.f-button{display:flex;align-items:center;gap:6px}\n"] }]
         }] });
 
 class FHomePageFeaturesComponent {
@@ -3327,5 +3257,5 @@ var index = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { ActivateTocByHashHandler, ActivateTocByHashRequest, COMMON_FEATURES, CalculateHashFromScrollPositionAndActivateTocHandler, CalculateHashFromScrollPositionAndActivateTocRequest, CalculateTableOfContentDataHandler, CalculateTableOfContentDataRequest, ChangeCodeFocusedSyntaxPreProcessor, DOCUMENTATION_CONFIGURATION, DOCUMENTATION_ROUTES, DocumentationRootComponent, DocumentationStore, DropdownMenuComponent, EMarkdownContainerType, EParsedContainerType, FAnalyticsService, FCheckboxComponent, FCodeGroupComponent, FCodeGroupTabsComponent, FCodeViewComponent, FCookiePopupComponent, FExampleViewComponent, FFooterEditInformationComponent, FFooterNavigationButtonComponent, FFooterNavigationComponent, FHomePageButtonsRowComponent, FHomePageFeaturesComponent, FHomePageFooterComponent, FHomePageHeaderComponent, FHomePageHeroComponent, FHomePageMembershipsComponent, FInsertComponentDirective, FMarkdownFooterComponent, FMarkdownRendererComponent, FMetaService, FNavigationItemComponent, FPreviewBase, FPreviewComponent, FPreviewGroupFiltersComponent, FPreviewGroupService, FRadioButtonComponent, FSocialLinksComponent, FThemeButtonComponent, F_ACCEPT_COOKIES_KEY, F_PREVIEW_NAVIGATION_PROVIDER, F_SOCIAL_LINKS_PROVIDER, GetAbsoluteTopToContainerHandler, GetAbsoluteTopToContainerRequest, GetPreviousNextPageNavigationHandler, GetPreviousNextPageNavigationRequest, GetPreviousNextPageNavigationResponse, HEADER_CONFIGURATION, HEADER_CONFIGURATION_STORE, HOME_PAGE_CONFIGURATION, HOME_ROUTES, HamburgerButtonComponent, HandleNavigationLinksHandler, HandleNavigationLinksRequest, HeaderComponent, HighlightComponent, HighlightService, HomeRootComponent, HomeStore, InlineMenuComponent, LANGUAGES, MarkCodeFocusedBlocksPostProcessor, MarkdownContainerComponent, MarkdownService, ModifyPunctuationHighlightPostProcessor, NavigationGroupComponent, NavigationPanelComponent, NpmVersionComponent, OverflowObserverDirective, ParseAlerts, ParseAngularExampleWithCodeLinks, ParseGroupedCodeItems, ParsePreviewGroup, ParseSingleCodeItem, PopoverService, RIGHT_TOP_OVERLAY_POSITION, RenderDynamicComponentsHandler, RenderDynamicComponentsRequest, SCROLLABLE_CONTAINER, SCROLLABLE_CONTAINER_FEATURES, ScrollToElementInContainerHandler, ScrollToElementInContainerRequest, ScrollableContainerComponent, TOGGLE_NAVIGATION_COMPONENT, TableOfContentComponent, TableOfContentData, TableOfContentItemsComponent, ThemeService, coerceComponentHeight, copyToClipboard, defineLazyComponent, defineNavigationGroup, extractComponent, getContent, parseComponentTag, parseLanguageFromFileExtension, parseSyntaxLanguage, provide404Markdown, provideBackground, provideComponents, provideDirectory, provideDocumentation, provideDocumentationMeta, provideFooterNavigation, provideHeader, provideHeaderMediaLinks, provideHeaderNavigation, provideHero, provideHomeButtons, provideHomeFeatures, provideHomeFooter, provideHomePage, provideImage, provideLanguage, provideLogo, provideNavigation, provideTitle, provideTocData, setCookieConsent };
+export { ActivateTocByHashHandler, ActivateTocByHashRequest, COMMON_FEATURES, CalculateHashFromScrollPositionAndActivateTocHandler, CalculateHashFromScrollPositionAndActivateTocRequest, CalculateTableOfContentDataHandler, CalculateTableOfContentDataRequest, DOCUMENTATION_CONFIGURATION, DOCUMENTATION_ROUTES, DocumentationRootComponent, DocumentationStore, DropdownMenuComponent, EMarkdownContainerType, EParsedContainerType, FAnalyticsService, FCheckboxComponent, FCodeGroupComponent, FCodeGroupTabsComponent, FCodeViewComponent, FCookiePopupComponent, FExampleViewComponent, FFooterEditInformationComponent, FFooterNavigationButtonComponent, FFooterNavigationComponent, FHomePageButtonsRowComponent, FHomePageFeaturesComponent, FHomePageFooterComponent, FHomePageHeaderComponent, FHomePageHeroComponent, FHomePageMembershipsComponent, FInsertComponentDirective, FMarkdownFooterComponent, FMarkdownRendererComponent, FMetaService, FNavigationItemComponent, FPreviewBase, FPreviewComponent, FPreviewGroupFiltersComponent, FPreviewGroupService, FRadioButtonComponent, FSocialLinksComponent, FThemeButtonComponent, F_ACCEPT_COOKIES_KEY, F_PREVIEW_NAVIGATION_PROVIDER, F_SOCIAL_LINKS_PROVIDER, GetAbsoluteTopToContainerHandler, GetAbsoluteTopToContainerRequest, GetPreviousNextPageNavigationHandler, GetPreviousNextPageNavigationRequest, GetPreviousNextPageNavigationResponse, HEADER_CONFIGURATION, HEADER_CONFIGURATION_STORE, HOME_PAGE_CONFIGURATION, HOME_ROUTES, HamburgerButtonComponent, HandleNavigationLinksHandler, HandleNavigationLinksRequest, HeaderComponent, HighlightComponent, HighlightService, HomeRootComponent, HomeStore, InlineMenuComponent, LANGUAGES, MarkCodeFocusedBlocksPostProcessor, MarkdownContainerComponent, MarkdownService, NavigationGroupComponent, NavigationPanelComponent, NpmVersionComponent, OverflowObserverDirective, ParseAlerts, ParseAngularExampleWithCodeLinks, ParseGroupedCodeItems, ParsePreviewGroup, ParseSingleCodeItem, PopoverService, RIGHT_TOP_OVERLAY_POSITION, RenderDynamicComponentsHandler, RenderDynamicComponentsRequest, SCROLLABLE_CONTAINER, SCROLLABLE_CONTAINER_FEATURES, ScrollToElementInContainerHandler, ScrollToElementInContainerRequest, ScrollableContainerComponent, TOGGLE_NAVIGATION_COMPONENT, TableOfContentComponent, TableOfContentData, TableOfContentItemsComponent, ThemeService, coerceComponentHeight, copyToClipboard, defineLazyComponent, defineNavigationGroup, encodeDataAttr, extractComponent, getContent, isClosingToken, isOpeningToken, parseComponentTag, parseFileLinkLine, parseLanguageFromFileExtension, parseSingleBracketText, parseSyntaxLanguage, provide404Markdown, provideBackground, provideComponents, provideDirectory, provideDocumentation, provideDocumentationMeta, provideFooterNavigation, provideHeader, provideHeaderMediaLinks, provideHeaderNavigation, provideHero, provideHomeButtons, provideHomeFeatures, provideHomeFooter, provideHomePage, provideImage, provideLanguage, provideLogo, provideNavigation, provideTitle, provideTocData, setCookieConsent };
 //# sourceMappingURL=foblex-m-render.mjs.map