@foblex/m-render 2.7.3 → 2.7.4

package/fesm2022/{foblex-m-render-cookie-popup.component-CqwZv5lc.mjs → foblex-m-render-cookie-popup.component-BZZxqp3j.mjs}

@@ -1,7 +1,6 @@
 import * as i0 from '@angular/core';
 import { inject, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
-import { GTagService } from './foblex-m-render.mjs';
-import { LOCAL_STORAGE } from '@foblex/mr-common';
+import { LOCAL_STORAGE, GTagService } from './foblex-m-render.mjs';
 
 const F_ACCEPT_COOKIES_KEY = 'm-accepts-cookies';
 class CookiePopupComponent {
@@ -37,4 +36,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
         }], ctorParameters: () => [] });
 
 export { CookiePopupComponent, F_ACCEPT_COOKIES_KEY };
-//# sourceMappingURL=foblex-m-render-cookie-popup.component-CqwZv5lc.mjs.map
+//# sourceMappingURL=foblex-m-render-cookie-popup.component-BZZxqp3j.mjs.map

package/fesm2022/foblex-m-render-cookie-popup.component-BZZxqp3j.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"foblex-m-render-cookie-popup.component-BZZxqp3j.mjs","sources":["../../../../libs/m-render/src/lib/analytics/cookie-popup/cookie-popup.component.ts","../../../../libs/m-render/src/lib/analytics/cookie-popup/cookie-popup.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';\nimport { GTagService } from '../g-tag.service';\nimport { LOCAL_STORAGE } from '../../common';\n\nexport const F_ACCEPT_COOKIES_KEY = 'm-accepts-cookies';\n\n@Component({\n  selector: 'cookie-popup',\n  standalone: true,\n  templateUrl: './cookie-popup.component.html',\n  styleUrls: ['./cookie-popup.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CookiePopupComponent {\n  private readonly _localStorage = inject(LOCAL_STORAGE);\n  private readonly _gtag = inject(GTagService, { optional: true });\n\n  private readonly _consentValue = signal<string | null>(null);\n\n  protected readonly showPopup = computed(() =>\n    this._gtag !== null &&\n    this._consentValue() !== 'true' &&\n    this._consentValue() !== 'false',\n  );\n\n  constructor() {\n    try {\n      const value = this._localStorage?.getItem(F_ACCEPT_COOKIES_KEY);\n      this._consentValue.set(value);\n    } catch {\n      this._consentValue.set(null);\n    }\n  }\n\n  protected accept(): void {\n    try {\n      this._localStorage?.setItem(F_ACCEPT_COOKIES_KEY, 'true');\n    } catch { /* empty */ }\n\n    this._gtag?.updateConsent(true);\n    this._consentValue.set('true');\n  }\n}\n\n","@if (showPopup()) {\n  <div class=\"docs-cookies-popup docs-invert-mode\">\n    <p>This site uses cookies from Google to deliver its services and to analyze traffic.</p>\n\n    <div>\n      <a href=\"https://policies.google.com/technologies/cookies\" target=\"_blank\" rel=\"noopener\">\n        <button class=\"f-button\" [attr.text]=\"'Learn more'\" aria-label=\"Learn More\">\n          Learn more\n        </button>\n      </a>\n      <button\n        (click)=\"accept()\"\n        class=\"f-button\"\n        [attr.text]=\"'Ok, Got it'\"\n        aria-label=\"Ok, Got it\">\n        Ok, Got it\n      </button>\n    </div>\n  </div>\n}\n"],"names":[],"mappings":";;;;AAIO,MAAM,oBAAoB,GAAG;MASvB,oBAAoB,CAAA;AACd,IAAA,aAAa,GAAG,MAAM,CAAC,aAAa,CAAC;IACrC,KAAK,GAAG,MAAM,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAE/C,IAAA,aAAa,GAAG,MAAM,CAAgB,IAAI,CAAC;IAEzC,SAAS,GAAG,QAAQ,CAAC,MACtC,IAAI,CAAC,KAAK,KAAK,IAAI;AACnB,QAAA,IAAI,CAAC,aAAa,EAAE,KAAK,MAAM;AAC/B,QAAA,IAAI,CAAC,aAAa,EAAE,KAAK,OAAO,CACjC;AAED,IAAA,WAAA,GAAA;AACE,QAAA,IAAI;YACF,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC,oBAAoB,CAAC;AAC/D,YAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC;;AAC7B,QAAA,MAAM;AACN,YAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC;;;IAItB,MAAM,GAAA;AACd,QAAA,IAAI;YACF,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC,oBAAoB,EAAE,MAAM,CAAC;;AACzD,QAAA,MAAM;AAER,QAAA,IAAI,CAAC,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC;AAC/B,QAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,MAAM,CAAC;;wGA3BrB,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAApB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,oBAAoB,wECbjC,ooBAoBA,EAAA,MAAA,EAAA,CAAA,+sBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FDPa,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAPhC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,EACZ,UAAA,EAAA,IAAI,EAGC,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,ooBAAA,EAAA,MAAA,EAAA,CAAA,+sBAAA,CAAA,EAAA;;;;;"}

package/fesm2022/foblex-m-render.mjs

@@ -1,14 +1,13 @@
 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, Renderer2, ChangeDetectorRef, DestroyRef, computed, ViewContainerRef, Injector, forwardRef, effect, untracked } from '@angular/core';
-import { DOCUMENT, TitleCasePipe } from '@angular/common';
-import { of, map, Subject, startWith, filter, EMPTY, switchMap, debounceTime, fromEvent } from 'rxjs';
+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 { DOCUMENT, isPlatformBrowser, TitleCasePipe } from '@angular/common';
+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, 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';
-import { LOCAL_STORAGE, WINDOW, DOCUMENT_ELEMENT, LOCATION, IS_BROWSER_PLATFORM, copyToClipboard } from '@foblex/mr-common';
-import { HighlightService, AVAILABLE_LANGUAGES } from '@foblex/mr-highlight';
+import { createHighlighter } from 'shiki';
 import MarkdownIt from 'markdown-it';
 import { DomSanitizer } from '@angular/platform-browser';
 import container from 'markdown-it-container';
@@ -484,6 +483,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
             type: Injectable
         }] });
 
+function copyToClipboard(value) {
+    const blob = new Blob([value], { type: 'text/plain' });
+    const data = [new ClipboardItem({ [blob.type]: blob })];
+    // @ts-ignore
+    return from(window?.navigator.permissions.query({ name: 'clipboard-write' })).pipe(map((permission) => permission.state !== 'denied'), switchMap((isGranted) => {
+        if (isGranted) {
+            return from(navigator.clipboard.write(data));
+        }
+        return of(undefined);
+    }));
+}
+
+const DOCUMENT_ELEMENT = new InjectionToken('DOCUMENT_ELEMENT', {
+    factory: () => inject(DOCUMENT).documentElement,
+});
+
+const WINDOW = new InjectionToken('F_WINDOW', {
+    factory: () => {
+        const { defaultView } = inject(DOCUMENT);
+        if (!defaultView) {
+            throw new Error('Window is not available');
+        }
+        return defaultView;
+    },
+});
+
+const LOCAL_STORAGE = new InjectionToken('F_LOCAL_STORAGE', {
+    factory: () => inject(WINDOW).localStorage,
+});
+
+const LOCATION = new InjectionToken('F_LOCATION', {
+    factory: () => inject(WINDOW).location,
+});
+
+const IS_BROWSER_PLATFORM = new InjectionToken('IS_BROWSER_PLATFORM', {
+    factory() {
+        return isPlatformBrowser(inject(PLATFORM_ID));
+    },
+});
+
 class FHeadTagService {
     _document = inject(DOCUMENT);
     setTitle(title) {
@@ -989,6 +1028,391 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", 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 MarkCodeFocusedBlocksPostProcessor {
+    _window;
+    constructor(_window) {
+        this._window = _window;
+    }
+    handle(element) {
+        const html = element.innerHTML;
+        if (!FOCUS_REGEX.test(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);
+    }
+    _applyOpacity(element) {
+        if (!element.classList.contains('focused')) {
+            element.style.color = this._createRgbaString(this._getElementColor(element), 0.5);
+            element.childNodes.forEach((child) => {
+                if (child.nodeType === Node.ELEMENT_NODE) {
+                    this._applyOpacity(child);
+                }
+            });
+        }
+        else {
+            element.style.color = this._createRgbaString(this._getElementColor(element), 1, true);
+        }
+    }
+    _getElementColor(element) {
+        return this._window.getComputedStyle(element).color;
+    }
+    _createRgbaString(color, opacity, isRgb = false) {
+        const [r, g, b, a] = this._getRgbValues(color);
+        const alpha = Number(a) || 1;
+        return isRgb ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${opacity * alpha})`;
+    }
+    _getRgbValues(color) {
+        return color.match(/\d+/g);
+    }
+}
+const FOCUS_REGEX = /ƒƒƒ([\s\S]*?)¢¢¢/g;
+
+const UNIVERSAL_THEME = {
+    name: 'universal',
+    colors: {
+        'editor.background': 'transparent',
+        'editor.foreground': 'var(--code-view-text-color)',
+    },
+    settings: [
+        {
+            scope: ['comment', 'punctuation.definition.comment', 'string.comment'],
+            settings: {
+                foreground: 'var(--token-comment)',
+            },
+        },
+        {
+            scope: ['constant', 'entity.name.constant', 'variable.other.constant', 'variable.other.enummember', 'variable.language'],
+            settings: {
+                foreground: 'var(--token-number)',
+            },
+        },
+        {
+            scope: ['entity', 'entity.name'],
+            settings: {
+                foreground: 'var(--token-tag)',
+            },
+        },
+        {
+            scope: 'variable.parameter.function',
+            settings: {
+                foreground: 'var(--primary-text)',
+            },
+        },
+        {
+            scope: 'entity.name.tag',
+            settings: {
+                foreground: 'var(--token-tag)',
+            },
+        },
+        {
+            scope: 'keyword',
+            settings: {
+                foreground: 'var(--token-keyword)',
+            },
+        },
+        {
+            scope: ['storage', 'storage.type'],
+            settings: {
+                foreground: 'var(--token-keyword)',
+            },
+        },
+        {
+            scope: ['storage.modifier.package', 'storage.modifier.import', 'storage.type.java'],
+            settings: {
+                foreground: 'var(--primary-text)',
+            },
+        },
+        {
+            scope: ['string', 'punctuation.definition.string', 'string punctuation.section.embedded source'],
+            settings: {
+                foreground: 'var(--token-string)',
+            },
+        },
+        {
+            scope: 'support',
+            settings: {
+                foreground: 'var(--token-function)',
+            },
+        },
+        {
+            scope: 'meta.property-name',
+            settings: {
+                foreground: 'var(--token-function)',
+            },
+        },
+        {
+            scope: 'variable',
+            settings: {
+                foreground: 'var(--token-variable)',
+            },
+        },
+        {
+            scope: 'variable.other',
+            settings: {
+                foreground: 'var(--token-function)',
+            },
+        },
+        {
+            scope: [
+                'invalid.broken',
+                'invalid.deprecated',
+                'invalid.illegal',
+                'invalid.unimplemented',
+            ],
+            settings: {
+                fontStyle: 'italic',
+                foreground: 'var(--danger-2)',
+            },
+        },
+        {
+            scope: 'carriage-return',
+            settings: {
+                fontStyle: 'italic underline',
+                foreground: 'var(--background-color)',
+                background: 'var(--token-keyword)',
+            },
+        },
+        {
+            scope: 'message.error',
+            settings: {
+                foreground: 'var(--danger-2)',
+            },
+        },
+        {
+            scope: 'string variable',
+            settings: {
+                foreground: 'var(--token-function)',
+            },
+        },
+        {
+            scope: ['source.regexp', 'string.regexp'],
+            settings: {
+                foreground: 'var(--token-interpolation)',
+            },
+        },
+        {
+            scope: [
+                'string.regexp.character-class',
+                'string.regexp constant.character.escape',
+                'string.regexp source.ruby.embedded',
+                'string.regexp string.regexp.arbitrary-repitition',
+            ],
+            settings: {
+                foreground: 'var(--token-interpolation)',
+            },
+        },
+        {
+            scope: 'string.regexp constant.character.escape',
+            settings: {
+                fontStyle: 'bold',
+                foreground: 'var(--token-attr-value)',
+            },
+        },
+        {
+            scope: ['support.constant', 'support.variable', 'meta.module-reference'],
+            settings: {
+                foreground: 'var(--token-function)',
+            },
+        },
+        {
+            scope: 'punctuation.definition.list.begin.markdown',
+            settings: {
+                foreground: 'var(--token-variable)',
+            },
+        },
+        {
+            scope: ['markup.heading', 'markup.heading entity.name'],
+            settings: {
+                fontStyle: 'bold',
+                foreground: 'var(--token-function)',
+            },
+        },
+        {
+            scope: 'markup.quote',
+            settings: {
+                foreground: 'var(--token-attr-value)',
+            },
+        },
+        {
+            scope: 'markup.italic',
+            settings: {
+                fontStyle: 'italic',
+                foreground: 'var(--primary-text)',
+            },
+        },
+        {
+            scope: 'markup.bold',
+            settings: {
+                fontStyle: 'bold',
+                foreground: 'var(--primary-text)',
+            },
+        },
+        {
+            scope: 'markup.underline',
+            settings: {
+                fontStyle: 'underline',
+            },
+        },
+        {
+            scope: 'markup.strikethrough',
+            settings: {
+                fontStyle: 'strikethrough',
+            },
+        },
+        {
+            scope: 'markup.inline.raw',
+            settings: {
+                foreground: 'var(--token-function)',
+            },
+        },
+        {
+            scope: ['markup.deleted', 'meta.diff.header.from-file', 'punctuation.definition.deleted'],
+            settings: {
+                background: 'var(--danger-3)',
+                foreground: 'var(--danger-2)',
+            },
+        },
+        {
+            scope: ['markup.inserted', 'meta.diff.header.to-file', 'punctuation.definition.inserted'],
+            settings: {
+                background: 'var(--success-3)',
+                foreground: 'var(--token-attr-value)',
+            },
+        },
+        {
+            scope: ['markup.changed', 'punctuation.definition.changed'],
+            settings: {
+                background: 'var(--warning-3)',
+                foreground: 'var(--token-variable)',
+            },
+        },
+        {
+            scope: ['markup.ignored', 'markup.untracked'],
+            settings: {
+                background: 'var(--token-function)',
+                foreground: 'var(--alt-background)',
+            },
+        },
+        {
+            scope: 'meta.diff.range',
+            settings: {
+                fontStyle: 'bold',
+                foreground: 'var(--token-attr-name)',
+            },
+        },
+        {
+            scope: 'meta.diff.header',
+            settings: {
+                foreground: 'var(--token-function)',
+            },
+        },
+        {
+            scope: 'meta.separator',
+            settings: {
+                fontStyle: 'bold',
+                foreground: 'var(--token-function)',
+            },
+        },
+        {
+            scope: 'meta.output',
+            settings: {
+                foreground: 'var(--token-function)',
+            },
+        },
+        {
+            scope: [
+                'brackethighlighter.tag',
+                'brackethighlighter.curly',
+                'brackethighlighter.round',
+                'brackethighlighter.square',
+                'brackethighlighter.angle',
+                'brackethighlighter.quote',
+            ],
+            settings: {
+                foreground: 'var(--gray-1)',
+            },
+        },
+        {
+            scope: 'brackethighlighter.unmatched',
+            settings: {
+                foreground: 'var(--danger-2)',
+            },
+        },
+        {
+            scope: ['constant.other.reference.link', 'string.other.link'],
+            settings: {
+                fontStyle: 'underline',
+                foreground: 'var(--token-interpolation)',
+            },
+        },
+    ],
+};
+
+const AVAILABLE_LANGUAGES = [
+    'javascript',
+    'typescript',
+    'angular-html',
+    'angular-ts',
+    'shell',
+    'html',
+    'bash',
+    'css',
+    'scss',
+    'markdown',
+    'text',
+];
+
+class HighlightService {
+    /**
+     * Service for highlighting code blocks using Shiki.
+     * It supports syntax highlighting and post-processing for focused blocks.
+     */
+    _isBrowser = inject(IS_BROWSER_PLATFORM);
+    _window = inject(WINDOW);
+    _highlighter$ = defer(() => from(createHighlighter({ themes: [UNIVERSAL_THEME], langs: AVAILABLE_LANGUAGES }))).pipe(shareReplay(1));
+    highlight(element, lang, content) {
+        if (!this._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);
+        }));
+    }
+    _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) => {
+            const processedContent = this._preprocessFocus(content);
+            element.innerHTML = highlighter.codeToHtml(processedContent, { lang, theme: 'universal', defaultColor: false });
+            requestAnimationFrame(() => {
+                observer.next(element);
+                observer.complete();
+            });
+        });
+    }
+    _preprocessFocus(code) {
+        return code.replace(/\|\:\|([\s\S]*?)\|\:\|/g, (_, p1) => `ƒƒƒ${p1}¢¢¢`);
+    }
+    _postProcess(element) {
+        return of(element).pipe(switchMap((x) => new MarkCodeFocusedBlocksPostProcessor(this._window).handle(x)));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HighlightService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HighlightService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HighlightService, decorators: [{
+            type: Injectable
+        }] });
+
 class HighlightComponent {
     _highlightService = inject(HighlightService);
     _elementRef = inject(ElementRef);
@@ -2440,9 +2864,9 @@ class DocumentationRootComponent {
                 provide: TOGGLE_NAVIGATION_COMPONENT,
                 useExisting: DocumentationRootComponent,
             },
-        ], ngImport: i0, template: "<f-navigation-panel [class.visible]=\"isNavigationVisible()\"></f-navigation-panel>\n<div class=\"f-backdrop\" [class.visible]=\"isNavigationVisible()\" (click)=\"onToggleNavigation(false)\"></div>\n\n<f-scrollable-container>\n  <f-header></f-header>\n  <router-outlet></router-outlet>\n</f-scrollable-container>\n\n@if (popover()) {\n  <div class=\"popover\">{{ popover() }}</div>\n}\n@defer (when isBrowser) {\n  <cookie-popup/>\n}\n", styles: [":host{display:flex;justify-content:flex-start;align-items:flex-start;height:100%;gap:5px}.f-backdrop{position:fixed;inset:0;opacity:0;z-index:var(--z-index-backdrop);background:var(--backdrop-color);transition:opacity .2s ease-in-out;pointer-events:none}.f-backdrop.visible{opacity:1;pointer-events:all}@media (min-width: 960px){.f-backdrop{position:unset}}.popover{position:fixed;min-width:120px;bottom:50%;left:50%;text-align:center;transform:translate(-50%,-50%);background-color:var(--code-view-copy-button-hover-background);border:1px solid var(--code-view-copy-button-border-color);box-shadow:var(--shadow-3);color:var(--primary-text);font-size:14px;padding:4px 8px;border-radius:4px;z-index:var(--z-index-popover);opacity:1}\n"], dependencies: [{ kind: "component", type: NavigationPanelComponent, selector: "f-navigation-panel" }, { kind: "component", type: ScrollableContainerComponent, selector: "f-scrollable-container" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: HeaderComponent, selector: "f-header" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [import('./foblex-m-render-cookie-popup.component-CqwZv5lc.mjs').then(m => m.CookiePopupComponent)]] });
+        ], ngImport: i0, template: "<f-navigation-panel [class.visible]=\"isNavigationVisible()\"></f-navigation-panel>\n<div class=\"f-backdrop\" [class.visible]=\"isNavigationVisible()\" (click)=\"onToggleNavigation(false)\"></div>\n\n<f-scrollable-container>\n  <f-header></f-header>\n  <router-outlet></router-outlet>\n</f-scrollable-container>\n\n@if (popover()) {\n  <div class=\"popover\">{{ popover() }}</div>\n}\n@defer (when isBrowser) {\n  <cookie-popup/>\n}\n", styles: [":host{display:flex;justify-content:flex-start;align-items:flex-start;height:100%;gap:5px}.f-backdrop{position:fixed;inset:0;opacity:0;z-index:var(--z-index-backdrop);background:var(--backdrop-color);transition:opacity .2s ease-in-out;pointer-events:none}.f-backdrop.visible{opacity:1;pointer-events:all}@media (min-width: 960px){.f-backdrop{position:unset}}.popover{position:fixed;min-width:120px;bottom:50%;left:50%;text-align:center;transform:translate(-50%,-50%);background-color:var(--code-view-copy-button-hover-background);border:1px solid var(--code-view-copy-button-border-color);box-shadow:var(--shadow-3);color:var(--primary-text);font-size:14px;padding:4px 8px;border-radius:4px;z-index:var(--z-index-popover);opacity:1}\n"], dependencies: [{ kind: "component", type: NavigationPanelComponent, selector: "f-navigation-panel" }, { kind: "component", type: ScrollableContainerComponent, selector: "f-scrollable-container" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: HeaderComponent, selector: "f-header" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [import('./foblex-m-render-cookie-popup.component-BZZxqp3j.mjs').then(m => m.CookiePopupComponent)]] });
 }
-i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.11", ngImport: i0, type: DocumentationRootComponent, resolveDeferredDeps: () => [import('./foblex-m-render-cookie-popup.component-CqwZv5lc.mjs').then(m => m.CookiePopupComponent)], resolveMetadata: CookiePopupComponent => ({ decorators: [{
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.11", ngImport: i0, type: DocumentationRootComponent, resolveDeferredDeps: () => [import('./foblex-m-render-cookie-popup.component-BZZxqp3j.mjs').then(m => m.CookiePopupComponent)], resolveMetadata: CookiePopupComponent => ({ decorators: [{
                 type: Component,
                 args: [{ selector: 'documentation-root', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                             HighlightService,
@@ -2770,9 +3194,9 @@ class HomeRootComponent {
                 provide: HEADER_CONFIGURATION_STORE,
                 useExisting: HomeStore,
             },
-        ], viewQueries: [{ propertyName: "_backgroundContainer", first: true, predicate: ["backgroundContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_heroImageContainer", first: true, predicate: ["heroImageContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<ng-container #backgroundContainer></ng-container>\n<header f-home-page-header></header>\n\n<div class=\"body\">\n  <div class=\"hero-row\">\n    <f-home-page-hero></f-home-page-hero>\n    <ng-container #heroImageContainer></ng-container>\n  </div>\n  <f-home-page-features></f-home-page-features>\n  <f-home-page-memberships></f-home-page-memberships>\n</div>\n\n<div class=\"flex-space\"></div>\n<footer f-home-page-footer></footer>\n\n@defer (when isBrowser) {\n  <cookie-popup/>\n}\n", styles: [":host{display:flex;flex-direction:column;position:relative;width:100%;height:100%;min-height:100%;overflow:hidden;overflow-y:auto}.body{position:relative;z-index:3;pointer-events:none}@media (min-width: 960px){.body{margin-top:50px}}@media (min-width: 1376px){.body{margin-top:100px}}.hero-row{display:flex;flex-direction:column-reverse;justify-content:space-between;align-items:center;margin:0 auto}@media (min-width: 960px){.hero-row{flex-direction:row;margin-left:64px;margin-right:64px}}@media (min-width: 1376px){.hero-row{flex-direction:row;margin-left:calc(50% - 624px);margin-right:calc(50% - 624px)}}\n"], dependencies: [{ kind: "component", type: FHomePageFooterComponent, selector: "footer[f-home-page-footer]" }, { kind: "component", type: FHomePageHeaderComponent, selector: "header[f-home-page-header]" }, { kind: "component", type: FHomePageFeaturesComponent, selector: "f-home-page-features" }, { kind: "component", type: FHomePageHeroComponent, selector: "f-home-page-hero" }, { kind: "component", type: FHomePageMembershipsComponent, selector: "f-home-page-memberships" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [import('./foblex-m-render-cookie-popup.component-CqwZv5lc.mjs').then(m => m.CookiePopupComponent)]] });
+        ], viewQueries: [{ propertyName: "_backgroundContainer", first: true, predicate: ["backgroundContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_heroImageContainer", first: true, predicate: ["heroImageContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<ng-container #backgroundContainer></ng-container>\n<header f-home-page-header></header>\n\n<div class=\"body\">\n  <div class=\"hero-row\">\n    <f-home-page-hero></f-home-page-hero>\n    <ng-container #heroImageContainer></ng-container>\n  </div>\n  <f-home-page-features></f-home-page-features>\n  <f-home-page-memberships></f-home-page-memberships>\n</div>\n\n<div class=\"flex-space\"></div>\n<footer f-home-page-footer></footer>\n\n@defer (when isBrowser) {\n  <cookie-popup/>\n}\n", styles: [":host{display:flex;flex-direction:column;position:relative;width:100%;height:100%;min-height:100%;overflow:hidden;overflow-y:auto}.body{position:relative;z-index:3;pointer-events:none}@media (min-width: 960px){.body{margin-top:50px}}@media (min-width: 1376px){.body{margin-top:100px}}.hero-row{display:flex;flex-direction:column-reverse;justify-content:space-between;align-items:center;margin:0 auto}@media (min-width: 960px){.hero-row{flex-direction:row;margin-left:64px;margin-right:64px}}@media (min-width: 1376px){.hero-row{flex-direction:row;margin-left:calc(50% - 624px);margin-right:calc(50% - 624px)}}\n"], dependencies: [{ kind: "component", type: FHomePageFooterComponent, selector: "footer[f-home-page-footer]" }, { kind: "component", type: FHomePageHeaderComponent, selector: "header[f-home-page-header]" }, { kind: "component", type: FHomePageFeaturesComponent, selector: "f-home-page-features" }, { kind: "component", type: FHomePageHeroComponent, selector: "f-home-page-hero" }, { kind: "component", type: FHomePageMembershipsComponent, selector: "f-home-page-memberships" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [import('./foblex-m-render-cookie-popup.component-BZZxqp3j.mjs').then(m => m.CookiePopupComponent)]] });
 }
-i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.11", ngImport: i0, type: HomeRootComponent, resolveDeferredDeps: () => [import('./foblex-m-render-cookie-popup.component-CqwZv5lc.mjs').then(m => m.CookiePopupComponent)], resolveMetadata: CookiePopupComponent => ({ decorators: [{
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.11", ngImport: i0, type: HomeRootComponent, resolveDeferredDeps: () => [import('./foblex-m-render-cookie-popup.component-BZZxqp3j.mjs').then(m => m.CookiePopupComponent)], resolveMetadata: CookiePopupComponent => ({ decorators: [{
                 type: Component,
                 args: [{ selector: 'home-root', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                             HomeStore,
@@ -2828,5 +3252,5 @@ var index = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { ActivateTocByHashHandler, ActivateTocByHashRequest, CalculateHashFromScrollPositionAndActivateTocHandler, CalculateHashFromScrollPositionAndActivateTocRequest, CalculateTableOfContentDataHandler, CalculateTableOfContentDataRequest, DOCUMENTATION_CONFIGURATION, DOCUMENTATION_ROUTES, 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, HomeRootComponent, HomeStore, InlineMenuComponent, 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, coerceComponentHeight, 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, 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 };
 //# sourceMappingURL=foblex-m-render.mjs.map