@foblex/m-render 2.7.2 → 2.7.3

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

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
 import { inject, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
-import { LOCAL_STORAGE, GTagService } from './foblex-m-render.mjs';
+import { GTagService } from './foblex-m-render.mjs';
+import { LOCAL_STORAGE } from '@foblex/mr-common';
 
 const F_ACCEPT_COOKIES_KEY = 'm-accepts-cookies';
 class CookiePopupComponent {
@@ -36,4 +37,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-BZZxqp3j.mjs.map
+//# sourceMappingURL=foblex-m-render-cookie-popup.component-CqwZv5lc.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"foblex-m-render-cookie-popup.component-CqwZv5lc.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 '@foblex/mr-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,13 +1,14 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, InjectionToken, EventEmitter, booleanAttribute, HostListener, Input, ViewChild, Output, ChangeDetectionStrategy, Component, input, output, viewChild, signal, ElementRef, NgZone, Directive, PLATFORM_ID, Renderer2, ChangeDetectorRef, DestroyRef, computed, ViewContainerRef, Injector, forwardRef, effect, untracked } from '@angular/core';
-import { DOCUMENT, isPlatformBrowser, TitleCasePipe } from '@angular/common';
-import { of, map, Subject, from, switchMap, startWith, filter, defer, Observable, EMPTY, debounceTime, fromEvent } from 'rxjs';
+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 { HttpClient } from '@angular/common/http';
-import { catchError, tap, filter as filter$1, shareReplay, take } from 'rxjs/operators';
+import { catchError, tap, filter as filter$1, take } from 'rxjs/operators';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Overlay, CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import { Router, RouterLink, NavigationEnd, ActivatedRoute, RouterOutlet } from '@angular/router';
-import { createHighlighter } from 'shiki';
+import { LOCAL_STORAGE, WINDOW, DOCUMENT_ELEMENT, LOCATION, IS_BROWSER_PLATFORM, copyToClipboard } from '@foblex/mr-common';
+import { HighlightService, AVAILABLE_LANGUAGES } from '@foblex/mr-highlight';
 import MarkdownIt from 'markdown-it';
 import { DomSanitizer } from '@angular/platform-browser';
 import container from 'markdown-it-container';
@@ -483,46 +484,6 @@ 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) {
@@ -1028,376 +989,6 @@ 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)',
-            },
-        },
-    ],
-};
-
-class HighlightService {
-    _isBrowser = inject(IS_BROWSER_PLATFORM);
-    _window = inject(WINDOW);
-    _highlighter$ = defer(() => from(createHighlighter({ themes: [UNIVERSAL_THEME], langs: 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, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HighlightService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
 class HighlightComponent {
     _highlightService = inject(HighlightService);
     _elementRef = inject(ElementRef);
@@ -1434,19 +1025,6 @@ function parseLanguageFromFileExtension(url) {
     }
     return '';
 }
-const LANGUAGES = [
-    'javascript',
-    'typescript',
-    'angular-html',
-    'angular-ts',
-    'shell',
-    'html',
-    'bash',
-    'css',
-    'scss',
-    'markdown',
-    'text',
-];
 function parseSyntaxLanguage(language) {
     let result;
     switch (language) {
@@ -1466,7 +1044,7 @@ function parseSyntaxLanguage(language) {
         default:
             result = extractLanguage(language);
     }
-    if (!LANGUAGES.includes(result)) {
+    if (!AVAILABLE_LANGUAGES.includes(result)) {
         result = 'text';
     }
     return result;
@@ -2797,9 +2375,6 @@ var index$2 = /*#__PURE__*/Object.freeze({
     GetPreviousNextPageNavigationRequest: GetPreviousNextPageNavigationRequest,
     GetPreviousNextPageNavigationResponse: GetPreviousNextPageNavigationResponse,
     HighlightComponent: HighlightComponent,
-    HighlightService: HighlightService,
-    LANGUAGES: LANGUAGES,
-    MarkCodeFocusedBlocksPostProcessor: MarkCodeFocusedBlocksPostProcessor,
     MarkdownContainerComponent: MarkdownContainerComponent,
     MarkdownService: MarkdownService,
     ParseAlerts: ParseAlerts,
@@ -2845,6 +2420,7 @@ class DocumentationRootComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DocumentationRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: DocumentationRootComponent, isStandalone: true, selector: "documentation-root", providers: [
+            HighlightService,
             DocumentationStore,
             FMetaService,
             {
@@ -2864,11 +2440,12 @@ 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-BZZxqp3j.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-CqwZv5lc.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-BZZxqp3j.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-CqwZv5lc.mjs').then(m => m.CookiePopupComponent)], resolveMetadata: CookiePopupComponent => ({ decorators: [{
                 type: Component,
                 args: [{ selector: 'documentation-root', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                            HighlightService,
                             DocumentationStore,
                             FMetaService,
                             {
@@ -2951,9 +2528,6 @@ var index$1 = /*#__PURE__*/Object.freeze({
     HandleNavigationLinksRequest: HandleNavigationLinksRequest,
     HeaderComponent: HeaderComponent,
     HighlightComponent: HighlightComponent,
-    HighlightService: HighlightService,
-    LANGUAGES: LANGUAGES,
-    MarkCodeFocusedBlocksPostProcessor: MarkCodeFocusedBlocksPostProcessor,
     MarkdownContainerComponent: MarkdownContainerComponent,
     MarkdownService: MarkdownService,
     NavigationGroupComponent: NavigationGroupComponent,
@@ -3119,13 +2693,13 @@ class FHomePageHeaderComponent {
     logo = inject(HomeStore).getLogo();
     title = inject(HomeStore).getTitle();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FHomePageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: FHomePageHeaderComponent, isStandalone: true, selector: "header[f-home-page-header]", ngImport: i0, template: "<div class=\"content\">\n  <a class=\"logo-link\" href=\"/libs/public\" aria-label=\"Home\">\n    <img [src]=\"logo\" class=\"logo\" alt=\"{{ title }} Logo\" width=\"24\" height=\"24\"/>\n    <span class=\"title\">{{ title }}</span>\n  </a>\n\n  <div class=\"flex-space\"></div>\n  <button theme-button aria-label=\"Change theme\"></button>\n</div>\n\n", styles: [":host{position:relative;z-index:5;padding:0 24px}:host .logo-link{display:flex;align-items:center;text-decoration:none}:host .content{display:flex;justify-content:flex-start;align-items:center;width:100%;height:64px;max-width:1376px;margin:0 auto}:host .logo{margin-right:8px}:host .title{display:flex;align-items:center;border-bottom:1px solid transparent;width:100%;font-size:16px;font-weight:600;color:var(--primary-text)}@media (min-width: 640px){:host{padding:0 48px}}@media (min-width: 960px){:host{padding:0 64px}}\n"], dependencies: [{ kind: "component", type: ThemeButtonComponent, selector: "button[theme-button]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: FHomePageHeaderComponent, isStandalone: true, selector: "header[f-home-page-header]", ngImport: i0, template: "<div class=\"content\">\n  <a class=\"logo-link\" href=\"\" aria-label=\"Home\">\n    <img [src]=\"logo\" class=\"logo\" alt=\"{{ title }} Logo\" width=\"24\" height=\"24\"/>\n    <span class=\"title\">{{ title }}</span>\n  </a>\n\n  <div class=\"flex-space\"></div>\n  <button theme-button aria-label=\"Change theme\"></button>\n</div>\n\n", styles: [":host{position:relative;z-index:5;padding:0 24px}:host .logo-link{display:flex;align-items:center;text-decoration:none}:host .content{display:flex;justify-content:flex-start;align-items:center;width:100%;height:64px;max-width:1376px;margin:0 auto}:host .logo{margin-right:8px}:host .title{display:flex;align-items:center;border-bottom:1px solid transparent;width:100%;font-size:16px;font-weight:600;color:var(--primary-text)}@media (min-width: 640px){:host{padding:0 48px}}@media (min-width: 960px){:host{padding:0 64px}}\n"], dependencies: [{ kind: "component", type: ThemeButtonComponent, selector: "button[theme-button]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FHomePageHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'header[f-home-page-header]', standalone: true, imports: [
                         ThemeButtonComponent,
-                    ], template: "<div class=\"content\">\n  <a class=\"logo-link\" href=\"/libs/public\" aria-label=\"Home\">\n    <img [src]=\"logo\" class=\"logo\" alt=\"{{ title }} Logo\" width=\"24\" height=\"24\"/>\n    <span class=\"title\">{{ title }}</span>\n  </a>\n\n  <div class=\"flex-space\"></div>\n  <button theme-button aria-label=\"Change theme\"></button>\n</div>\n\n", styles: [":host{position:relative;z-index:5;padding:0 24px}:host .logo-link{display:flex;align-items:center;text-decoration:none}:host .content{display:flex;justify-content:flex-start;align-items:center;width:100%;height:64px;max-width:1376px;margin:0 auto}:host .logo{margin-right:8px}:host .title{display:flex;align-items:center;border-bottom:1px solid transparent;width:100%;font-size:16px;font-weight:600;color:var(--primary-text)}@media (min-width: 640px){:host{padding:0 48px}}@media (min-width: 960px){:host{padding:0 64px}}\n"] }]
+                    ], template: "<div class=\"content\">\n  <a class=\"logo-link\" href=\"\" aria-label=\"Home\">\n    <img [src]=\"logo\" class=\"logo\" alt=\"{{ title }} Logo\" width=\"24\" height=\"24\"/>\n    <span class=\"title\">{{ title }}</span>\n  </a>\n\n  <div class=\"flex-space\"></div>\n  <button theme-button aria-label=\"Change theme\"></button>\n</div>\n\n", styles: [":host{position:relative;z-index:5;padding:0 24px}:host .logo-link{display:flex;align-items:center;text-decoration:none}:host .content{display:flex;justify-content:flex-start;align-items:center;width:100%;height:64px;max-width:1376px;margin:0 auto}:host .logo{margin-right:8px}:host .title{display:flex;align-items:center;border-bottom:1px solid transparent;width:100%;font-size:16px;font-weight:600;color:var(--primary-text)}@media (min-width: 640px){:host{padding:0 48px}}@media (min-width: 960px){:host{padding:0 64px}}\n"] }]
         }] });
 
 class FHomePageHeroComponent {
@@ -3196,9 +2770,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-BZZxqp3j.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-CqwZv5lc.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-BZZxqp3j.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-CqwZv5lc.mjs').then(m => m.CookiePopupComponent)], resolveMetadata: CookiePopupComponent => ({ decorators: [{
                 type: Component,
                 args: [{ selector: 'home-root', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                             HomeStore,
@@ -3254,5 +2828,5 @@ var index = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { 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, LANGUAGES, 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, WINDOW, coerceComponentHeight, copyToClipboard, defineLazyComponent, defineNavigationGroup, encodeDataAttr, extractComponent, getContent, isClosingToken, isOpeningToken, parseComponentTag, parseFileLinkLine, parseLanguageFromFileExtension, parseSingleBracketText, parseSyntaxLanguage, provide404Markdown, provideBackground, provideComponents, provideDirectory, provideDocumentation, provideDocumentationMeta, provideFooterNavigation, provideGTag, provideHeader, provideHeaderMediaLinks, provideHeaderNavigation, provideHero, provideHomeButtons, provideHomeFeatures, provideHomeFooter, provideHomePage, provideImage, provideLanguage, provideLogo, provideNavigation, provideTheme, provideTitle, provideTocData };
+export { 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 };
 //# sourceMappingURL=foblex-m-render.mjs.map