@koobiq/components 21.0.0 → 21.1.0

package/fesm2022/koobiq-components-code-block.mjs

@@ -5,13 +5,13 @@ import { SharedResizeObserver } from '@angular/cdk/observers/private';
 import { Platform } from '@angular/cdk/platform';
 import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, isDevMode, Injectable, InjectionToken, Renderer2, PendingTasks, signal, input, numberAttribute, booleanAttribute, effect, SecurityContext, Directive, viewChild, contentChild, TemplateRef, linkedSignal, output, computed, ElementRef, Injector, DestroyRef, afterEveryRender, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { isDevMode, Injectable, InjectionToken, inject, Renderer2, PendingTasks, signal, input, numberAttribute, booleanAttribute, computed, effect, SecurityContext, Directive, viewChild, contentChild, TemplateRef, linkedSignal, output, ElementRef, Injector, DestroyRef, afterEveryRender, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i3 from '@koobiq/components/button';
 import { KbqButtonStyles, KbqButtonModule } from '@koobiq/components/button';
 import * as i1 from '@koobiq/components/core';
-import { KBQ_WINDOW, kbqInjectNativeElement, ruRULocaleData, kbqLocaleConfigurationOverrideProvider, kbqOptionalNumberAttribute, KbqLocaleOverridesDirective, KbqComponentColors, KbqOverflowShadowContainer, KbqOverflowShadowTop } from '@koobiq/components/core';
+import { kbqInjectNativeElement, ruRULocaleData, kbqLocaleConfigurationOverrideProvider, kbqOptionalNumberAttribute, KbqLocaleOverridesDirective, KbqComponentColors, KBQ_WINDOW, KbqOverflowShadowContainer, KbqOverflowShadowTop } from '@koobiq/components/core';
 import * as i6 from '@koobiq/components/icon';
 import { KbqIconModule } from '@koobiq/components/icon';
 import { KbqScrollbarViewport } from '@koobiq/components/scrollbar';
@@ -20,341 +20,25 @@ import { KbqTabsModule } from '@koobiq/components/tabs';
 import * as i5 from '@koobiq/components/tooltip';
 import { KbqToolTipModule } from '@koobiq/components/tooltip';
 import { take, merge, fromEvent, map, debounceTime, filter } from 'rxjs';
+import plaintext from 'highlight.js/lib/languages/plaintext';
 
+// The core and not the full bundle: a bundler emits a chunk for every `import()` it finds, called or not, so the
+// full bundle has to be imported by the application that asks for it. An instance of its own, as the module is one
+// object for the whole process, the full bundle included: the languages one configuration registers on it would reach
+// every other, and every later server render.
+const defaultHljsLoader = async () => ({
+    default: (await import('highlight.js/lib/core')).default.newInstance()
+});
+// The key of the default configuration: `config ?? {}` would make a new key on every call.
+const DEFAULT_CONFIG = {};
 /**
- * The highlight.js line numbers plugin, kept apart from the code that calls it until code blocks number their lines
- * on their own.
- *
- * This function is not intended for editing.
- * Changes may lead to unpredictable behavior.
- * Source code: https://github.com/wcoder/highlightjs-line-numbers.js/blob/v2.9.0/src/highlightjs-line-numbers.js
+ * Language the loader registers on every instance, the fallback of a file the code block cannot highlight otherwise.
  *
  * @internal
  */
-function highlightJSLineNumbersPlugin(d, w) {
-    'use strict';
-    if (!w)
-        return;
-    const TABLE_NAME = 'hljs-ln', LINE_NAME = 'hljs-ln-line', CODE_BLOCK_NAME = 'hljs-ln-code', NUMBERS_BLOCK_NAME = 'hljs-ln-numbers', NUMBER_LINE_NAME = 'hljs-ln-n', DATA_ATTR_NAME = 'data-line-number', BREAK_LINE_REGEXP = /\r\n|\r|\n/g;
-    if (w['hljs']) {
-        w['hljs'].initLineNumbersOnLoad = initLineNumbersOnLoad;
-        w['hljs'].lineNumbersBlock = lineNumbersBlock;
-        w['hljs'].lineNumbersBlockSync = lineNumbersBlockSync;
-        w['hljs'].lineNumbersValue = lineNumbersValue;
-        addStyles();
-    }
-    else {
-        // eslint-disable-next-line no-console
-        console.error('highlight.js not detected!');
-    }
-    function isHljsLnCodeDescendant(domElt) {
-        let curElt = domElt;
-        while (curElt) {
-            if (curElt.className && curElt.className.indexOf('hljs-ln-code') !== -1) {
-                return true;
-            }
-            curElt = curElt.parentNode;
-        }
-        return false;
-    }
-    function getHljsLnTable(hljsLnDomElt) {
-        let curElt = hljsLnDomElt;
-        while (curElt.nodeName !== 'TABLE') {
-            curElt = curElt.parentNode;
-        }
-        return curElt;
-    }
-    // Function to workaround a copy issue with Microsoft Edge.
-    // Due to hljs-ln wrapping the lines of code inside a <table> element,
-    // itself wrapped inside a <pre> element, window.getSelection().toString()
-    // does not contain any line breaks. So we need to get them back using the
-    // rendered code in the DOM as reference.
-    function edgeGetSelectedCodeLines(selection) {
-        // current selected text without line breaks
-        const selectionText = selection.toString();
-        // get the <td> element wrapping the first line of selected code
-        let tdAnchor = selection.anchorNode;
-        while (tdAnchor.nodeName !== 'TD') {
-            tdAnchor = tdAnchor.parentNode;
-        }
-        // get the <td> element wrapping the last line of selected code
-        let tdFocus = selection.focusNode;
-        while (tdFocus.nodeName !== 'TD') {
-            tdFocus = tdFocus.parentNode;
-        }
-        // extract line numbers
-        let firstLineNumber = parseInt(tdAnchor.dataset.lineNumber);
-        let lastLineNumber = parseInt(tdFocus.dataset.lineNumber);
-        // multi-lines copied case
-        if (firstLineNumber != lastLineNumber) {
-            let firstLineText = tdAnchor.textContent;
-            let lastLineText = tdFocus.textContent;
-            // if the selection was made backward, swap values
-            if (firstLineNumber > lastLineNumber) {
-                let tmp = firstLineNumber;
-                firstLineNumber = lastLineNumber;
-                lastLineNumber = tmp;
-                tmp = firstLineText;
-                firstLineText = lastLineText;
-                lastLineText = tmp;
-            }
-            // discard not copied characters in first line
-            while (selectionText.indexOf(firstLineText) !== 0) {
-                firstLineText = firstLineText.slice(1);
-            }
-            // discard not copied characters in last line
-            while (selectionText.lastIndexOf(lastLineText) === -1) {
-                lastLineText = lastLineText.slice(0, -1);
-            }
-            // reconstruct and return the real copied text
-            let selectedText = firstLineText;
-            const hljsLnTable = getHljsLnTable(tdAnchor);
-            for (let i = firstLineNumber + 1; i < lastLineNumber; ++i) {
-                const codeLineSel = format('.{0}[{1}="{2}"]', [CODE_BLOCK_NAME, DATA_ATTR_NAME, i]);
-                const codeLineElt = hljsLnTable.querySelector(codeLineSel);
-                selectedText += '\n' + codeLineElt.textContent;
-            }
-            selectedText += '\n' + lastLineText;
-            return selectedText;
-            // single copied line case
-        }
-        else {
-            return selectionText;
-        }
-    }
-    // ensure consistent code copy/paste behavior across all browsers
-    // (see https://github.com/wcoder/highlightjs-line-numbers.js/issues/51)
-    d.addEventListener('copy', function (e) {
-        // get current selection
-        const selection = w.getSelection();
-        // override behavior when one wants to copy line of codes
-        if (isHljsLnCodeDescendant(selection.anchorNode)) {
-            let selectionText;
-            // workaround an issue with Microsoft Edge as copied line breaks
-            // are removed otherwise from the selection string
-            if (w.navigator.userAgent.indexOf('Edge') !== -1) {
-                selectionText = edgeGetSelectedCodeLines(selection);
-            }
-            else {
-                // other browsers can directly use the selection string
-                selectionText = selection.toString();
-            }
-            e.clipboardData.setData('text/plain', selectionText);
-            e.preventDefault();
-        }
-    });
-    function addStyles() {
-        const css = d.createElement('style');
-        css.type = 'text/css';
-        css.innerHTML = format('.{0}{border-collapse:collapse}' + '.{0} td{padding:0}' + '.{1}:before{content:attr({2})}', [
-            TABLE_NAME,
-            NUMBER_LINE_NAME,
-            DATA_ATTR_NAME
-        ]);
-        d.getElementsByTagName('head')[0].appendChild(css);
-    }
-    function initLineNumbersOnLoad(options) {
-        if (d.readyState === 'interactive' || d.readyState === 'complete') {
-            documentReady(options);
-        }
-        else {
-            w.addEventListener('DOMContentLoaded', function () {
-                documentReady(options);
-            });
-        }
-    }
-    function documentReady(options) {
-        try {
-            const blocks = d.querySelectorAll('code.hljs,code.nohighlight');
-            for (const i in blocks) {
-                if (blocks.hasOwnProperty(i)) {
-                    if (!isPluginDisabledForBlock(blocks[i])) {
-                        lineNumbersBlock(blocks[i], options);
-                    }
-                }
-            }
-        }
-        catch (e) {
-            // eslint-disable-next-line no-console
-            console.error('LineNumbers error: ', e);
-        }
-    }
-    function isPluginDisabledForBlock(element) {
-        return element.classList.contains('nohljsln');
-    }
-    function lineNumbersBlock(element, options) {
-        if (typeof element !== 'object')
-            return;
-        async(function () {
-            element.innerHTML = lineNumbersInternal(element, options);
-        });
-    }
-    function lineNumbersBlockSync(element, options) {
-        if (typeof element !== 'object')
-            return;
-        element.innerHTML = lineNumbersInternal(element, options);
-    }
-    function lineNumbersValue(value, options) {
-        if (typeof value !== 'string')
-            return;
-        const element = d.createElement('code');
-        element.innerHTML = value;
-        return lineNumbersInternal(element, options);
-    }
-    function lineNumbersInternal(element, options) {
-        const internalOptions = mapOptions(element, options);
-        duplicateMultilineNodes(element);
-        return addLineNumbersBlockFor(element.innerHTML, internalOptions);
-    }
-    function addLineNumbersBlockFor(inputHtml, options) {
-        const lines = getLines(inputHtml);
-        // if last line contains only carriage return remove it
-        if (lines[lines.length - 1].trim() === '') {
-            lines.pop();
-        }
-        if (lines.length > 1 || options.singleLine) {
-            let html = '';
-            for (let i = 0, l = lines.length; i < l; i++) {
-                html += format('<tr>' +
-                    '<td class="{0} {1}" {3}="{5}">' +
-                    '<div class="{2}" {3}="{5}"></div>' +
-                    '</td>' +
-                    '<td class="{0} {4}" {3}="{5}">' +
-                    '{6}' +
-                    '</td>' +
-                    '</tr>', [
-                    LINE_NAME,
-                    NUMBERS_BLOCK_NAME,
-                    NUMBER_LINE_NAME,
-                    DATA_ATTR_NAME,
-                    CODE_BLOCK_NAME,
-                    i + options.startFrom,
-                    lines[i].length > 0 ? lines[i] : ' '
-                ]);
-            }
-            return format('<table class="{0}">{1}</table>', [TABLE_NAME, html]);
-        }
-        return inputHtml;
-    }
-    /**
-     * @param {HTMLElement} element Code block.
-     * @param {Object} options External API options.
-     * @returns {Object} Internal API options.
-     */
-    function mapOptions(element, options) {
-        options = options || {};
-        return {
-            singleLine: getSingleLineOption(options),
-            startFrom: getStartFromOption(element, options)
-        };
-    }
-    function getSingleLineOption(options) {
-        const defaultValue = false;
-        if (options.singleLine) {
-            return options.singleLine;
-        }
-        return defaultValue;
-    }
-    function getStartFromOption(element, options) {
-        const defaultValue = 1;
-        let startFrom = defaultValue;
-        if (isFinite(options.startFrom)) {
-            startFrom = options.startFrom;
-        }
-        // can be overridden because local option is priority
-        const value = getAttribute(element, 'data-ln-start-from');
-        if (value !== null) {
-            startFrom = toNumber(value, defaultValue);
-        }
-        return startFrom;
-    }
-    /**
-     * Recursive method for fix multi-line elements implementation in highlight.js
-     * Doing deep passage on child nodes.
-     * @param {HTMLElement} element
-     */
-    function duplicateMultilineNodes(element) {
-        const nodes = element.childNodes;
-        for (const node in nodes) {
-            if (nodes.hasOwnProperty(node)) {
-                const child = nodes[node];
-                if (getLinesCount(child.textContent) > 0) {
-                    if (child.childNodes.length > 0) {
-                        duplicateMultilineNodes(child);
-                    }
-                    else {
-                        duplicateMultilineNode(child.parentNode);
-                    }
-                }
-            }
-        }
-    }
-    /**
-     * Method for fix multi-line elements implementation in highlight.js
-     * @param {HTMLElement} element
-     */
-    function duplicateMultilineNode(element) {
-        const className = element.className;
-        if (!/hljs-/.test(className))
-            return;
-        const lines = getLines(element.innerHTML);
-        let result = '';
-        for (let i = 0; i < lines.length; i++) {
-            const lineText = lines[i].length > 0 ? lines[i] : ' ';
-            result += format('<span class="{0}">{1}</span>\n', [className, lineText]);
-        }
-        element.innerHTML = result.trim();
-    }
-    function getLines(text) {
-        if (text.length === 0)
-            return [];
-        return text.split(BREAK_LINE_REGEXP);
-    }
-    function getLinesCount(text) {
-        return (text.trim().match(BREAK_LINE_REGEXP) || []).length;
-    }
-    ///
-    /// HELPERS
-    ///
-    function async(func) {
-        w.setTimeout(func, 0);
-    }
-    /**
-     * {@link https://wcoder.github.io/notes/string-format-for-string-formating-in-javascript}
-     * @param {string} format
-     * @param {array} args
-     */
-    function format(format, args) {
-        return format.replace(/\{(\d+)\}/g, function (m, n) {
-            return args[n] !== undefined ? args[n] : m;
-        });
-    }
-    /**
-     * @param {HTMLElement} element Code block.
-     * @param {String} attrName Attribute name.
-     * @returns {String} Attribute value or empty.
-     */
-    function getAttribute(element, attrName) {
-        return element.hasAttribute(attrName) ? element.getAttribute(attrName) : null;
-    }
-    /**
-     * @param {String} str Source string.
-     * @param {Number} fallback Fallback value.
-     * @returns Parsed number or fallback value.
-     */
-    function toNumber(str, fallback) {
-        if (!str)
-            return fallback;
-        const number = Number(str);
-        return isFinite(number) ? number : fallback;
-    }
-}
-
-const defaultHljsLoader = () => import('highlight.js');
-// The key of the default configuration: `config ?? {}` would make a new key on every call.
-const DEFAULT_CONFIG = {};
+const PLAIN_TEXT_LANGUAGE = 'plaintext';
 /**
- * Loads highlight.js once per configuration and installs its line numbers plugin once per application.
+ * Loads highlight.js once per configuration.
  *
  * The configuration is passed in rather than injected: `KBQ_CODE_BLOCK_HIGHLIGHT_JS_CONFIG` may be provided by a
  * component or a route, where a root service would not see it. Loads are shared by the identity of the configuration,
@@ -364,12 +48,9 @@ const DEFAULT_CONFIG = {};
  */
 class KbqCodeBlockHighlightJsLoader {
     constructor() {
-        this.document = inject(DOCUMENT);
-        this.window = inject(KBQ_WINDOW);
         // Weak, so that a configuration made for one component instance goes away with it.
         this.loads = new WeakMap();
         this.instances = new WeakMap();
-        this.lineNumbers = null;
     }
     /** The instance loaded for `config`, or `null` until it is. */
     loaded(config) {
@@ -398,43 +79,20 @@ class KbqCodeBlockHighlightJsLoader {
         }
         return loading;
     }
-    /** Wraps highlighted markup in the line numbers table. */
-    addLineNumbers(html, options) {
-        // The plugin cannot take empty markup: it reads the last of no lines.
-        return html ? this.lineNumbersPlugin().lineNumbersValue(html, options) : html;
-    }
-    async importInstance({ core, languages }) {
-        const { default: instance } = await (core ?? defaultHljsLoader)();
-        if (languages) {
-            await Promise.all(Object.entries(languages).map(async ([name, loader]) => {
-                const { default: language } = await loader();
-                instance.registerLanguage(name, language);
-            }));
-        }
+    async importInstance({ core, languages = {} }) {
+        const entries = Object.entries(languages);
+        // The languages do not need the core to load, so they load alongside it.
+        const [{ default: instance }, loaded] = await Promise.all([
+            (core ?? defaultHljsLoader)(),
+            Promise.all(entries.map(([, loader]) => loader()))
+        ]);
+        entries.forEach(([name], index) => instance.registerLanguage(name, loaded[index].default));
+        // The directive falls back to plain text, and highlight.js throws on a language it has not registered, as the
+        // core has none.
+        if (!instance.getLanguage(PLAIN_TEXT_LANGUAGE))
+            instance.registerLanguage(PLAIN_TEXT_LANGUAGE, plaintext);
         return instance;
     }
-    /**
-     * The plugin appends a `<style>` to `<head>` and registers a document `copy` listener, and removes neither, so it
-     * is installed once, for the lifetime of the application.
-     */
-    lineNumbersPlugin() {
-        if (!this.lineNumbers) {
-            const window = this.window;
-            // The plugin attaches its API to `w.hljs` and reads nothing else from `w` but the selection and the user
-            // agent. A host of its own keeps the plugin off the highlight.js module, which every server render in the
-            // process shares, and off the global `window.hljs`.
-            const host = {
-                hljs: {},
-                getSelection: () => window.getSelection(),
-                get navigator() {
-                    return window.navigator;
-                }
-            };
-            highlightJSLineNumbersPlugin(this.document, host);
-            this.lineNumbers = host.hljs;
-        }
-        return this.lineNumbers;
-    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqCodeBlockHighlightJsLoader, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqCodeBlockHighlightJsLoader, providedIn: 'root' }); }
 }
@@ -454,7 +112,6 @@ const KBQ_CODE_BLOCK_HIGHLIGHT_JS_CONFIG = new InjectionToken('KBQ_CODE_BLOCK_HI
  * ```ts
  * providers: [
  *   kbqCodeBlockHighlightJsConfigProvider({
- *     core: () => import('highlight.js/lib/core'),
  *     languages: {
  *       typescript: () => import('highlight.js/lib/languages/typescript'),
  *       css: () => import('highlight.js/lib/languages/css'),
@@ -469,11 +126,13 @@ const kbqCodeBlockHighlightJsConfigProvider = (options) => ({
     useValue: options
 });
 /**
- * Fallback language for code block if language is not supported/specified.
+ * Fallback language for code block if language is not supported/specified. It has to be registered in `languages` of
+ * `KbqCodeBlockHighlightJsConfig`, unless it is plain text or the full bundle of highlight.js is loaded, or the code
+ * block falls back to `plaintext`.
  *
- * See the [list of supported languages](https://highlightjs.readthedocs.io/en/stable/supported-languages.html).
+ * See the [list of supported languages](https://github.com/highlightjs/highlight.js/blob/11-stable/SUPPORTED_LANGUAGES.md).
  */
-const KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE = new InjectionToken('KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE', { factory: () => 'plaintext' });
+const KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE = new InjectionToken('KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE', { factory: () => PLAIN_TEXT_LANGUAGE });
 /** Utility provider for `KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE`. */
 const kbqCodeBlockFallbackFileLanguageProvider = (language) => ({
     provide: KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE,
@@ -485,6 +144,7 @@ const kbqCodeBlockFallbackFileLanguageProvider = (language) => ({
  * highlight.js sets on the elements it highlights itself.
  */
 const HIGHLIGHTED_MARKUP_ATTRIBUTE = 'data-highlighted-markup';
+const LINE_BREAK = /\r\n|\r|\n/;
 /**
  * Directive which applies syntax highlighting to the code block content.
  *
@@ -510,18 +170,21 @@ class KbqCodeBlockHighlight {
         /** The code file. */
         this.file = input.required(...(ngDevMode ? [{ debugName: "file" }] : /* istanbul ignore next */ []));
         /** The starting line number. */
-        this.startFrom = input(1, { ...(ngDevMode ? { debugName: "startFrom" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.startFrom = input(1, { ...(ngDevMode ? { debugName: "startFrom" } : /* istanbul ignore next */ {}), transform: (value) => numberAttribute(value, 1) });
         /** Whether to display line numbers for single line code block. */
         this.singleLine = input(false, { ...(ngDevMode ? { debugName: "singleLine" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Number of lines of the file, a line break at its end not counted, as it starts no line. */
+        this.lineCount = computed(() => {
+            const lines = this.file().content.split(LINE_BREAK);
+            return lines.length > 1 && !lines[lines.length - 1] ? lines.length - 1 : lines.length;
+        }, ...(ngDevMode ? [{ debugName: "lineCount" }] : /* istanbul ignore next */ []));
+        /** Width of the line numbers column, in digits of its largest number. */
+        this.lineNumberDigits = computed(() => String(this.startFrom() + this.lineCount() - 1).length, ...(ngDevMode ? [{ debugName: "lineNumberDigits" }] : /* istanbul ignore next */ []));
         effect((onCleanup) => {
             const file = this.file();
-            // Captured here rather than read inside `highlight()`: on the load path that read happens in a
-            // microtask, where nothing is tracked, so the effect's dependencies would otherwise depend on
-            // which branch had run before.
-            const lineNumbers = { startFrom: this.startFrom(), singleLine: this.singleLine() };
             const hljs = this.loader.loaded(this.config);
             if (hljs) {
-                this.highlight(hljs, file, lineNumbers);
+                this.highlight(hljs, file);
                 return;
             }
             // The template leaves `<code>` empty, so that hydration does not look for a text node the highlighted
@@ -550,7 +213,7 @@ class KbqCodeBlockHighlight {
                 .load(this.config)
                 .then((loaded) => {
                 if (loaded && !cancelled)
-                    this.highlight(loaded, file, lineNumbers);
+                    this.highlight(loaded, file);
             })
                 .finally(() => {
                 // A run cancelled by a newer file leaves `pending` to that one.
@@ -560,32 +223,76 @@ class KbqCodeBlockHighlight {
             });
         });
     }
-    highlight(hljs, file, lineNumbers) {
+    highlight(hljs, file) {
         this._pending.set(true);
         let { language } = file;
         const isKnownLanguage = !!language && !!hljs.getLanguage(language);
         if (!language || !isKnownLanguage) {
+            const fallbackLanguage = this.fallbackLanguage(hljs);
             // A file without a language is plain text by design; only a language the core lacks is a mistake.
             if (language) {
-                this.warn(`[KbqCodeBlock] Unknown file language: "${language}". Fall back to "${this.fallbackFileLanguage}".`, file);
+                this.warn(`[KbqCodeBlock] Unknown file language: "${language}". Fall back to "${fallbackLanguage}".`, file);
             }
-            language = this.fallbackFileLanguage;
+            language = fallbackLanguage;
         }
         const { value: highlightedHTML, language: highlightedLanguage, illegal, relevance } = hljs.highlight(file.content, { language });
         if (illegal) {
             this.warn('[KbqCodeBlock] File content contains illegal characters.', file);
         }
-        // Plain text has no syntax to score, so its relevance is always 0 — even for the fallback itself.
-        if (relevance === 0 && isKnownLanguage && highlightedLanguage !== 'plaintext') {
+        // Plain text and an empty file have no syntax to score, so their relevance is always 0. Plain text is compared by
+        // definition: highlight.js returns the name the file gives, which may be an alias such as `text`.
+        const isPlainText = hljs.getLanguage(language) === hljs.getLanguage(PLAIN_TEXT_LANGUAGE);
+        if (relevance === 0 && isKnownLanguage && !isPlainText && file.content.trim()) {
             this.warn('[KbqCodeBlock] File content does not match the specified programming language.', file);
         }
-        const safeHTML = this.domSanitizer.sanitize(SecurityContext.HTML, highlightedHTML) ?? '';
-        const highlightedHTMLWithLineNumbers = this.loader.addLineNumbers(safeHTML, lineNumbers);
+        const safeHTML = this.domSanitizer.sanitize(SecurityContext.HTML, this.splitIntoLines(highlightedHTML)) ?? '';
         this.renderer.setAttribute(this.nativeElement, 'data-language', highlightedLanguage);
-        this.renderer.setProperty(this.nativeElement, 'innerHTML', highlightedHTMLWithLineNumbers);
+        this.renderer.setProperty(this.nativeElement, 'innerHTML', safeHTML);
         this.renderer.setAttribute(this.nativeElement, HIGHLIGHTED_MARKUP_ATTRIBUTE, '');
         this._pending.set(false);
     }
+    /**
+     * Wraps every line of the highlighted markup in an element of its own, for the line numbers to count. The spans a
+     * line break crosses are closed at the end of its line and opened again on the next one. The line break stays
+     * inside its line, so that an empty line keeps its height and the text of the code is the text of the file.
+     */
+    splitIntoLines(html) {
+        const lines = [];
+        const openSpans = [];
+        let line = '';
+        let lineHasText = false;
+        // highlight.js emits spans and escaped text. A tag of another kind, which a plugin of highlight.js may add,
+        // passes through as it is.
+        for (const [token, lineBreak] of html.matchAll(/(\r\n|\r|\n)|<span[^>]*>|<\/span>|<[^>]*>|[^<\r\n]+/g)) {
+            if (lineBreak) {
+                lines.push(`${line}${'</span>'.repeat(openSpans.length)}\n`);
+                line = openSpans.join('');
+                lineHasText = false;
+                continue;
+            }
+            if (token === '</span>') {
+                openSpans.pop();
+            }
+            else if (token.startsWith('<span')) {
+                openSpans.push(token);
+            }
+            else if (!token.startsWith('<')) {
+                lineHasText = true;
+            }
+            line += token;
+        }
+        // A line break at the end of the file starts no line, though the spans it crosses close after it.
+        if (lineHasText)
+            lines.push(line);
+        return lines.map((content) => `<span class="kbq-code-block__line">${content}</span>`).join('');
+    }
+    /** The fallback language, or plain text, which the loader registers on every instance, if it is unknown too. */
+    fallbackLanguage(hljs) {
+        if (hljs.getLanguage(this.fallbackFileLanguage))
+            return this.fallbackFileLanguage;
+        this.warn(`[KbqCodeBlock] Unknown fallback language: "${this.fallbackFileLanguage}". Fall back to "${PLAIN_TEXT_LANGUAGE}".`);
+        return PLAIN_TEXT_LANGUAGE;
+    }
     warn(...messages) {
         if (!isDevMode())
             return;
@@ -593,14 +300,19 @@ class KbqCodeBlockHighlight {
         console.warn(...messages);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqCodeBlockHighlight, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: KbqCodeBlockHighlight, isStandalone: true, selector: "code[kbqCodeBlockHighlight]", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null }, startFrom: { classPropertyName: "startFrom", publicName: "startFrom", isSignal: true, isRequired: false, transformFunction: null }, singleLine: { classPropertyName: "singleLine", publicName: "singleLine", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "hljs" }, exportAs: ["kbqCodeBlockHighlight"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: KbqCodeBlockHighlight, isStandalone: true, selector: "code[kbqCodeBlockHighlight]", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null }, startFrom: { classPropertyName: "startFrom", publicName: "startFrom", isSignal: true, isRequired: false, transformFunction: null }, singleLine: { classPropertyName: "singleLine", publicName: "singleLine", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kbq-code-block__code_line-numbers": "lineCount() > 1 || singleLine()", "style.--kbq-code-block-line-numbers-start": "startFrom() - 1", "style.--kbq-code-block-line-numbers-digits": "lineNumberDigits()" }, classAttribute: "hljs" }, exportAs: ["kbqCodeBlockHighlight"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqCodeBlockHighlight, decorators: [{
             type: Directive,
             args: [{
                     selector: 'code[kbqCodeBlockHighlight]',
                     host: {
-                        class: 'hljs'
+                        class: 'hljs',
+                        // Bound to the file rather than to the highlighted markup, so that markup kept from the server is numbered
+                        // before highlight.js loads again.
+                        '[class.kbq-code-block__code_line-numbers]': 'lineCount() > 1 || singleLine()',
+                        '[style.--kbq-code-block-line-numbers-start]': 'startFrom() - 1',
+                        '[style.--kbq-code-block-line-numbers-digits]': 'lineNumberDigits()'
                     },
                     exportAs: 'kbqCodeBlockHighlight'
                 }]
@@ -668,8 +380,8 @@ class KbqCodeBlock {
         this.contentExceedsMaxHeight = signal(undefined, ...(ngDevMode ? [{ debugName: "contentExceedsMaxHeight" }] : /* istanbul ignore next */ []));
         /** @docs-private */
         this.tabLinkTemplate = contentChild(KbqCodeBlockTabLinkContent, { ...(ngDevMode ? { debugName: "tabLinkTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
-        /** Whether to display line numbers. */
-        this.lineNumbers = input(false, { ...(ngDevMode ? { debugName: "lineNumbers" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether to display line numbers. Defaults to `lineNumbers` of `KBQ_CODE_BLOCK_DEFAULT_OPTIONS`, or `false`. */
+        this.lineNumbers = input(this.defaultOptions?.lineNumbers ?? false, { ...(ngDevMode ? { debugName: "lineNumbers" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Whether the code block should be filled. */
         this.filled = input(false, { ...(ngDevMode ? { debugName: "filled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Added soft wrap toggle button.  */
@@ -1074,7 +786,7 @@ class KbqCodeBlock {
         link.click();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqCodeBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqCodeBlock, isStandalone: true, selector: "kbq-code-block", inputs: { lineNumbers: { classPropertyName: "lineNumbers", publicName: "lineNumbers", isSignal: true, isRequired: false, transformFunction: null }, filled: { classPropertyName: "filled", publicName: "filled", isSignal: true, isRequired: false, transformFunction: null }, canToggleSoftWrap: { classPropertyName: "canToggleSoftWrap", publicName: "canToggleSoftWrap", isSignal: true, isRequired: false, transformFunction: null }, softWrapInput: { classPropertyName: "softWrapInput", publicName: "softWrap", isSignal: true, isRequired: false, transformFunction: null }, viewAllInput: { classPropertyName: "viewAllInput", publicName: "viewAll", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, canDownloadInput: { classPropertyName: "canDownloadInput", publicName: "canDownload", isSignal: true, isRequired: false, transformFunction: null }, canCopy: { classPropertyName: "canCopy", publicName: "canCopy", isSignal: true, isRequired: false, transformFunction: null }, alwaysShowActionbar: { classPropertyName: "alwaysShowActionbar", publicName: "alwaysShowActionbar", isSignal: true, isRequired: false, transformFunction: null }, filesInput: { classPropertyName: "filesInput", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, activeFileIndexInput: { classPropertyName: "activeFileIndexInput", publicName: "activeFileIndex", isSignal: true, isRequired: false, transformFunction: null }, noBorder: { classPropertyName: "noBorder", publicName: "noBorder", isSignal: true, isRequired: false, transformFunction: null }, hideTabsInput: { classPropertyName: "hideTabsInput", publicName: "hideTabs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { softWrapChange: "softWrapChange", viewAllChange: "viewAllChange", activeFileIndexChange: "activeFileIndexChange", hideTabsChange: "hideTabsChange" }, host: { properties: { "class.kbq-code-block_filled": "filled()", "class.kbq-code-block_outline": "!filled()", "class.kbq-code-block_hide-line-numbers": "!lineNumbers()", "class.kbq-code-block_hide-tabs": "tabsHidden()", "class.kbq-code-block_no-border": "noBorder() || filled()", "class.kbq-code-block_show-actionbar": "actionbarVisible()", "class.kbq-code-block_soft-wrap": "softWrap()", "class.kbq-code-block_view-all": "viewAll()" }, classAttribute: "kbq-code-block" }, queries: [{ propertyName: "tabLinkTemplate", first: true, predicate: KbqCodeBlockTabLinkContent, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "copyButtonTooltip", first: true, predicate: ["copyButtonTooltip"], descendants: true, isSignal: true }, { propertyName: "highlight", first: true, predicate: KbqCodeBlockHighlight, descendants: true, isSignal: true }, { propertyName: "scrollbarViewport", first: true, predicate: KbqScrollbarViewport, descendants: true, isSignal: true }, { propertyName: "preElementRef", first: true, predicate: ["codeBlockPre"], descendants: true, isSignal: true }, { propertyName: "codeElementRef", first: true, predicate: ["codeBlockCode"], descendants: true, isSignal: true }], exportAs: ["kbqCodeBlock"], hostDirectives: [{ directive: i1.KbqLocaleOverridesDirective, inputs: ["kbqLocaleOverrides", "localeOverrides"] }], ngImport: i0, template: "<div class=\"kbq-code-block__header\" [kbqOverflowShadowTop]=\"codeBlockContent\">\n    @if (!tabsHidden()) {\n        <div class=\"kbq-code-block__header-tabs\">\n            <div kbqTabNavBar transparent [tabNavPanel]=\"tabPanel\">\n                @for (file of files(); track file) {\n                    <!-- Mark tab-link as readonly if only single file present -->\n                    <div\n                        kbqTabLink\n                        [active]=\"$count > 1 && renderedFileIndex() === $index\"\n                        [style.pointer-events]=\"$count === 1 ? 'none' : null\"\n                        (click)=\"onSelectedTabChange($index)\"\n                    >\n                        @if (tabLinkTemplate(); as linkTemplate) {\n                            <ng-container\n                                *ngTemplateOutlet=\"linkTemplate; context: { $implicit: file, fallbackFileName }\"\n                            />\n                        } @else {\n                            {{ file.filename || fallbackFileName }}\n                        }\n                    </div>\n                }\n            </div>\n        </div>\n    }\n\n    <div class=\"kbq-code-block__actionbar\">\n        <div class=\"kbq-code-block__actionbar__button-stack\">\n            @if (canToggleSoftWrap()) {\n                <button\n                    kbq-button\n                    class=\"kbq-code-block__actionbar__soft-wrap-button\"\n                    [attr.aria-label]=\"\n                        softWrap() ? localeConfiguration().softWrapOffTooltip : localeConfiguration().softWrapOnTooltip\n                    \"\n                    [color]=\"componentColor.Contrast\"\n                    [kbqStyle]=\"buttonStyle.Transparent\"\n                    [kbqTooltip]=\"\n                        softWrap() ? localeConfiguration().softWrapOffTooltip : localeConfiguration().softWrapOnTooltip\n                    \"\n                    (click)=\"toggleSoftWrap()\"\n                >\n                    @if (softWrap()) {\n                        <i kbq-icon=\"kbq-text-overflow_16\"></i>\n                    } @else {\n                        <i kbq-icon=\"kbq-text-wrap_16\"></i>\n                    }\n                </button>\n            }\n\n            @if (canDownload()) {\n                <button\n                    kbq-button\n                    class=\"kbq-code-block__actionbar__download-button\"\n                    [attr.aria-label]=\"localeConfiguration().downloadTooltip\"\n                    [color]=\"componentColor.Contrast\"\n                    [kbqStyle]=\"buttonStyle.Transparent\"\n                    [kbqTooltip]=\"localeConfiguration().downloadTooltip\"\n                    (click)=\"downloadCode()\"\n                >\n                    <i kbq-icon=\"kbq-arrow-down-to-line_16\"></i>\n                </button>\n            }\n\n            @if (canCopy()) {\n                <div #copyButtonTooltip=\"kbqTooltip\" [kbqTooltip]=\"localeConfiguration().copyTooltip\">\n                    <button\n                        kbq-button\n                        class=\"kbq-code-block__actionbar__copy-button\"\n                        [attr.aria-label]=\"localeConfiguration().copyTooltip\"\n                        [color]=\"componentColor.Contrast\"\n                        [kbqStyle]=\"buttonStyle.Transparent\"\n                        (click)=\"copyCode()\"\n                    >\n                        <i kbq-icon=\"kbq-file-multiple-o_16\"></i>\n                    </button>\n                </div>\n            }\n\n            @if (activeFile()?.link) {\n                <button\n                    kbq-button\n                    class=\"kbq-code-block__actionbar__link-button\"\n                    [attr.aria-label]=\"localeConfiguration().openExternalSystemTooltip\"\n                    [color]=\"componentColor.Contrast\"\n                    [kbqStyle]=\"buttonStyle.Transparent\"\n                    [kbqTooltip]=\"localeConfiguration().openExternalSystemTooltip\"\n                    (click)=\"openLink()\"\n                >\n                    <i kbq-icon=\"kbq-arrow-up-right-from-square_16\"></i>\n                </button>\n            }\n        </div>\n    </div>\n</div>\n\n<div\n    #tabPanel=\"kbqTabNavPanel\"\n    #codeBlockContent=\"kbqOverflowShadowContainer\"\n    cdkMonitorElementFocus\n    kbqOverflowShadowContainer\n    kbqScrollbarViewport\n    kbqTabNavPanel\n    class=\"kbq-code-block__main\"\n    tabindex=\"0\"\n    [style.max-height.px]=\"calculatedMaxHeight()\"\n>\n    @if (activeFile(); as file) {\n        <pre\n            #codeBlockPre\n            class=\"kbq-code-block__pre\"\n        ><code #codeBlockCode kbqCodeBlockHighlight class=\"kbq-code-block__code\" [file]=\"file\"></code></pre>\n    }\n\n    @if (contentExceedsMaxHeight()) {\n        <div\n            class=\"kbq-code-block__view-all\"\n            [class.kbq-code-block__view-all_collapsed]=\"!viewAll()\"\n            [class.kbq-code-block__view-all_expanded]=\"viewAll()\"\n        >\n            <div class=\"kbq-code-block__view-all__wrapper\">\n                <button\n                    kbq-button\n                    class=\"kbq-code-block__view-all__button\"\n                    [color]=\"componentColor.Theme\"\n                    [kbqStyle]=\"buttonStyle.Transparent\"\n                    (click)=\"toggleViewAll()\"\n                    (keydown.enter)=\"onViewAllEnterKeydown($event)\"\n                >\n                    @if (viewAll()) {\n                        <i kbq-icon=\"kbq-chevron-up_16\"></i>\n                        {{ localeConfiguration().viewLessText }}\n                    } @else {\n                        <i kbq-icon=\"kbq-chevron-down_16\"></i>\n                        {{ localeConfiguration().viewAllText }}\n                    }\n                </button>\n            </div>\n        </div>\n    }\n</div>\n", styles: [".kbq-code-block{display:flex;flex-direction:column;position:relative;border-width:var(--kbq-code-block-size-container-border-width);border-style:solid;border-radius:var(--kbq-code-block-size-container-border-radius)}@supports (corner-shape: squircle){.kbq-code-block{corner-shape:squircle;border-radius:clamp(var(--kbq-code-block-size-container-border-radius) * 1.85,var(--kbq-code-block-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-code-block-size-container-border-radius) * 2)}}.kbq-code-block{box-sizing:border-box;hyphens:none;-ms-hyphens:none;-moz-hyphens:none;-webkit-hyphens:none}.kbq-code-block .kbq-code-block__header{display:flex;align-items:center;padding:var(--kbq-size-s) var(--kbq-size-m)}.kbq-code-block .kbq-code-block__header .kbq-code-block__header-tabs{overflow:hidden;flex-grow:1}.kbq-code-block .kbq-code-block__actionbar{display:flex;justify-content:right;align-items:center;z-index:1}.kbq-code-block .kbq-code-block__actionbar .kbq-code-block__actionbar__button-stack{display:flex;gap:var(--kbq-code-block-size-actionbar-content-gap-horizontal)}.kbq-code-block:has(.kbq-code-block__view-all) .kbq-code-block__main .kbq-code-block__code{padding-bottom:var(--kbq-size-3xl)!important}.kbq-code-block .kbq-code-block__main{flex-grow:1;flex-direction:column;border-radius:var(--kbq-code-block-size-container-border-radius)}@supports (corner-shape: squircle){.kbq-code-block .kbq-code-block__main{corner-shape:squircle;border-radius:clamp(var(--kbq-code-block-size-container-border-radius) * 1.85,var(--kbq-code-block-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-code-block-size-container-border-radius) * 2)}}.kbq-code-block .kbq-code-block__main.cdk-keyboard-focused{outline-style:solid;outline-width:var(--kbq-code-block-size-container-border-width-focused);outline-offset:-1px}.kbq-code-block .kbq-code-block__main .kbq-code-block__pre{margin:0;flex-grow:1}.kbq-code-block .kbq-code-block__main .kbq-code-block__code{tab-size:var(--kbq-code-block-tab-size);padding:var(--kbq-code-block-size-with-header-content-padding-top) var(--kbq-code-block-size-with-header-content-padding-horizontal) var(--kbq-code-block-size-with-header-content-padding-bottom) var(--kbq-code-block-size-with-header-content-padding-horizontal)}.kbq-code-block .kbq-code-block__main .kbq-code-block__code:focus-visible{outline:none}.kbq-code-block .kbq-code-block__main .hljs{display:block}.kbq-code-block .kbq-code-block__main .hljs-ln-numbers{padding-right:var(--kbq-code-block-size-with-header-content-content-gap-horizontal);vertical-align:baseline;text-align:right}.kbq-code-block .kbq-code-block__main .hljs-ln{border-collapse:unset}.kbq-code-block .kbq-code-block__main .hljs-ln .hljs{padding:0}.kbq-code-block .kbq-code-block__main .hljs-ln-n:before{white-space:nowrap}.kbq-code-block.kbq-code-block_hide-line-numbers .hljs-ln-line.hljs-ln-numbers{display:none}.kbq-code-block.kbq-code-block_soft-wrap .kbq-code-block__code{white-space:pre-wrap;overflow-wrap:anywhere}.kbq-code-block:not(.kbq-code-block_soft-wrap) .kbq-code-block__pre{width:max-content;min-width:100%}.kbq-code-block.kbq-code-block_view-all .kbq-code-block__main{max-height:unset;overflow:auto}.kbq-code-block:not(.kbq-code-block_view-all) .kbq-code-block__main{overflow:hidden}.kbq-code-block.kbq-code-block_hide-tabs .kbq-code-block__header{padding:0}.kbq-code-block.kbq-code-block_hide-tabs .kbq-code-block__actionbar{display:none;position:absolute;top:0;right:0;margin:var(--kbq-size-s) var(--kbq-size-s) var(--kbq-size-s) 0}.kbq-code-block.kbq-code-block_hide-tabs .kbq-code-block__actionbar .kbq-code-block__actionbar__button-stack{border-width:1px;border-style:solid;border-radius:calc(var(--kbq-size-border-radius) + 1px)}@supports (corner-shape: squircle){.kbq-code-block.kbq-code-block_hide-tabs .kbq-code-block__actionbar .kbq-code-block__actionbar__button-stack{corner-shape:squircle;border-radius:clamp((var(--kbq-size-border-radius) + 1px) * 1.85,(var(--kbq-size-border-radius) + 1px) * 2.3 - 3.6px,(var(--kbq-size-border-radius) + 1px) * 2)}}.kbq-code-block.kbq-code-block_hide-tabs .kbq-code-block__main{position:relative}.kbq-code-block.kbq-code-block_hide-tabs .kbq-code-block__main .kbq-code-block__code{padding:var(--kbq-code-block-size-no-header-content-padding-vertical) var(--kbq-code-block-size-no-header-content-padding-horizontal)}.kbq-code-block.kbq-code-block_hide-tabs .kbq-code-block__main .hljs-ln-numbers{padding-right:var(--kbq-code-block-size-no-header-content-content-gap-horizontal)}.kbq-code-block:not(.kbq-code-block_hide-tabs) .kbq-code-block__header{border-radius:var(--kbq-code-block-size-container-border-radius) var(--kbq-code-block-size-container-border-radius) 0 0}@supports (corner-shape: squircle){.kbq-code-block:not(.kbq-code-block_hide-tabs) .kbq-code-block__header{corner-shape:squircle;border-radius:clamp(var(--kbq-code-block-size-container-border-radius) * 1.85,var(--kbq-code-block-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-code-block-size-container-border-radius) * 2) clamp(var(--kbq-code-block-size-container-border-radius) * 1.85,var(--kbq-code-block-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-code-block-size-container-border-radius) * 2) 0 0}}.kbq-code-block:not(.kbq-code-block_hide-tabs) .kbq-code-block__main{border-radius:0 0 var(--kbq-code-block-size-container-border-radius) var(--kbq-code-block-size-container-border-radius)}@supports (corner-shape: squircle){.kbq-code-block:not(.kbq-code-block_hide-tabs) .kbq-code-block__main{corner-shape:squircle;border-radius:0 0 clamp(var(--kbq-code-block-size-container-border-radius) * 1.85,var(--kbq-code-block-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-code-block-size-container-border-radius) * 2) clamp(var(--kbq-code-block-size-container-border-radius) * 1.85,var(--kbq-code-block-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-code-block-size-container-border-radius) * 2)}}.kbq-code-block.kbq-code-block_show-actionbar .kbq-code-block__actionbar{display:flex}.kbq-code-block:not(:has(.kbq-code-block__view-all)) .kbq-code-block__main{overflow:auto}.kbq-code-block .kbq-code-block__view-all{display:flex;justify-content:center;width:100%;position:absolute;bottom:calc(var(--kbq-code-block-size-container-border-width) * -1);border-radius:var(--kbq-code-block-size-container-border-radius)}@supports (corner-shape: squircle){.kbq-code-block .kbq-code-block__view-all{corner-shape:squircle;border-radius:clamp(var(--kbq-code-block-size-container-border-radius) * 1.85,var(--kbq-code-block-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-code-block-size-container-border-radius) * 2)}}.kbq-code-block .kbq-code-block__view-all .kbq-code-block__view-all__wrapper{border-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-code-block .kbq-code-block__view-all .kbq-code-block__view-all__wrapper{corner-shape:squircle;border-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-code-block .kbq-code-block__view-all.kbq-code-block__view-all_collapsed{padding-top:var(--kbq-code-block-size-collapse-collapsed-padding-top);padding-bottom:var(--kbq-code-block-size-collapse-collapsed-padding-bottom)}.kbq-code-block .kbq-code-block__view-all.kbq-code-block__view-all_expanded{padding-top:var(--kbq-code-block-size-collapse-expanded-padding-top);margin-bottom:var(--kbq-code-block-size-collapse-expanded-padding-bottom)}.kbq-code-block.kbq-code-block_no-border{border-color:transparent!important}.kbq-code-block .hljs-addition{background-color:var(--kbq-code-block-hljs-addition-background);color:var(--kbq-code-block-hljs-addition-color)}.kbq-code-block .hljs-attr{background-color:var(--kbq-code-block-hljs-attr-background);color:var(--kbq-code-block-hljs-attr-color)}.kbq-code-block .hljs-attribute{background-color:var(--kbq-code-block-hljs-attribute-background);color:var(--kbq-code-block-hljs-attribute-color)}.kbq-code-block .hljs-built_in{background-color:var(--kbq-code-block-hljs-built-in-background);color:var(--kbq-code-block-hljs-built-in-color)}.kbq-code-block .hljs-bullet{background-color:var(--kbq-code-block-hljs-bullet-background);color:var(--kbq-code-block-hljs-bullet-color)}.kbq-code-block .hljs-char-escape{background-color:var(--kbq-code-block-hljs-char-escape-background);color:var(--kbq-code-block-hljs-char-escape-color)}.kbq-code-block .hljs-class{background-color:var(--kbq-code-block-hljs-class-background);color:var(--kbq-code-block-hljs-class-color)}.kbq-code-block .hljs-code{background-color:var(--kbq-code-block-hljs-code-background);color:var(--kbq-code-block-hljs-code-color)}.kbq-code-block .hljs-comment{background-color:var(--kbq-code-block-hljs-comment-background);color:var(--kbq-code-block-hljs-comment-color)}.kbq-code-block .hljs-deletion{background-color:var(--kbq-code-block-hljs-deletion-background);color:var(--kbq-code-block-hljs-deletion-color)}.kbq-code-block .hljs-doctag{background-color:var(--kbq-code-block-hljs-doctag-background);color:var(--kbq-code-block-hljs-doctag-color)}.kbq-code-block .hljs-emphasis{background-color:var(--kbq-code-block-hljs-emphasis-background);color:var(--kbq-code-block-hljs-emphasis-color)}.kbq-code-block .hljs-formula{background-color:var(--kbq-code-block-hljs-formula-background);color:var(--kbq-code-block-hljs-formula-color)}.kbq-code-block .hljs-function{background-color:var(--kbq-code-block-hljs-function-background);color:var(--kbq-code-block-hljs-function-color)}.kbq-code-block .hljs-keyword{background-color:var(--kbq-code-block-hljs-keyword-background);color:var(--kbq-code-block-hljs-keyword-color)}.kbq-code-block .hljs-link{background-color:var(--kbq-code-block-hljs-link-background);color:var(--kbq-code-block-hljs-link-color)}.kbq-code-block .hljs-literal{background-color:var(--kbq-code-block-hljs-literal-background);color:var(--kbq-code-block-hljs-literal-color)}.kbq-code-block .hljs-meta{background-color:var(--kbq-code-block-hljs-meta-background);color:var(--kbq-code-block-hljs-meta-color)}.kbq-code-block .hljs-meta-keyword{background-color:var(--kbq-code-block-hljs-meta-keyword-background);color:var(--kbq-code-block-hljs-meta-keyword-color)}.kbq-code-block .hljs-meta-string{background-color:var(--kbq-code-block-hljs-meta-string-background);color:var(--kbq-code-block-hljs-meta-string-color)}.kbq-code-block .hljs-meta-prompt{background-color:var(--kbq-code-block-hljs-meta-prompt-background);color:var(--kbq-code-block-hljs-meta-prompt-color)}.kbq-code-block .hljs-name{background-color:var(--kbq-code-block-hljs-name-background);color:var(--kbq-code-block-hljs-name-color)}.kbq-code-block .hljs-number{background-color:var(--kbq-code-block-hljs-number-background);color:var(--kbq-code-block-hljs-number-color)}.kbq-code-block .hljs-operator{background-color:var(--kbq-code-block-hljs-operator-background);color:var(--kbq-code-block-hljs-operator-color)}.kbq-code-block .hljs-params{background-color:var(--kbq-code-block-hljs-params-background);color:var(--kbq-code-block-hljs-params-color)}.kbq-code-block .hljs-property{background-color:var(--kbq-code-block-hljs-property-background);color:var(--kbq-code-block-hljs-property-color)}.kbq-code-block .hljs-punctuation{background-color:var(--kbq-code-block-hljs-punctuation-background);color:var(--kbq-code-block-hljs-punctuation-color)}.kbq-code-block .hljs-quote{background-color:var(--kbq-code-block-hljs-quote-background);color:var(--kbq-code-block-hljs-quote-color)}.kbq-code-block .hljs-regexp{background-color:var(--kbq-code-block-hljs-regexp-background);color:var(--kbq-code-block-hljs-regexp-color)}.kbq-code-block .hljs-section{background-color:var(--kbq-code-block-hljs-section-background);color:var(--kbq-code-block-hljs-section-color)}.kbq-code-block .hljs-selector-attr{background-color:var(--kbq-code-block-hljs-selector-attr-background);color:var(--kbq-code-block-hljs-selector-attr-color)}.kbq-code-block .hljs-selector-class{background-color:var(--kbq-code-block-hljs-selector-class-background);color:var(--kbq-code-block-hljs-selector-class-color)}.kbq-code-block .hljs-selector-id{background-color:var(--kbq-code-block-hljs-selector-id-background);color:var(--kbq-code-block-hljs-selector-id-color)}.kbq-code-block .hljs-selector-pseudo{background-color:var(--kbq-code-block-hljs-selector-pseudo-background);color:var(--kbq-code-block-hljs-selector-pseudo-color)}.kbq-code-block .hljs-selector-tag{background-color:var(--kbq-code-block-hljs-selector-tag-background);color:var(--kbq-code-block-hljs-selector-tag-color)}.kbq-code-block .hljs-string{background-color:var(--kbq-code-block-hljs-string-background);color:var(--kbq-code-block-hljs-string-color)}.kbq-code-block .hljs-strong{background-color:var(--kbq-code-block-hljs-strong-background);color:var(--kbq-code-block-hljs-strong-color)}.kbq-code-block .hljs-subst{background-color:var(--kbq-code-block-hljs-subst-background);color:var(--kbq-code-block-hljs-subst-color)}.kbq-code-block .hljs-symbol{background-color:var(--kbq-code-block-hljs-symbol-background);color:var(--kbq-code-block-hljs-symbol-color)}.kbq-code-block .hljs-tag{background-color:var(--kbq-code-block-hljs-tag-background);color:var(--kbq-code-block-hljs-tag-color)}.kbq-code-block .hljs-template-tag{background-color:var(--kbq-code-block-hljs-template-tag-background);color:var(--kbq-code-block-hljs-template-tag-color)}.kbq-code-block .hljs-template-variable{background-color:var(--kbq-code-block-hljs-template-variable-background);color:var(--kbq-code-block-hljs-template-variable-color)}.kbq-code-block .hljs-title{background-color:var(--kbq-code-block-hljs-title-background);color:var(--kbq-code-block-hljs-title-color)}.kbq-code-block .hljs-title-class{background-color:var(--kbq-code-block-hljs-title-class-background);color:var(--kbq-code-block-hljs-title-class-color)}.kbq-code-block .hljs-title-class-inherited{background-color:var(--kbq-code-block-hljs-title-class-inherited-background);color:var(--kbq-code-block-hljs-title-class-inherited-color)}.kbq-code-block .hljs-title-function{background-color:var(--kbq-code-block-hljs-title-function-background);color:var(--kbq-code-block-hljs-title-function-color)}.kbq-code-block .hljs-title-function-invoke{background-color:var(--kbq-code-block-hljs-title-function-invoke-background);color:var(--kbq-code-block-hljs-title-function-invoke-color)}.kbq-code-block .hljs-type{background-color:var(--kbq-code-block-hljs-type-background);color:var(--kbq-code-block-hljs-type-color)}.kbq-code-block .hljs-variable{background-color:var(--kbq-code-block-hljs-variable-background);color:var(--kbq-code-block-hljs-variable-color)}.kbq-code-block .hljs-variable-constant{background-color:var(--kbq-code-block-hljs-variable-constant-background);color:var(--kbq-code-block-hljs-variable-constant-color)}.kbq-code-block .hljs-variable-language{background-color:var(--kbq-code-block-hljs-variable-language-background);color:var(--kbq-code-block-hljs-variable-language-color)}.kbq-code-block .hljs-ln-n{color:var(--kbq-code-block-hljs-line-numbers-color)}.kbq-code-block.kbq-code-block_outline{background:var(--kbq-code-block-outline-container-background);border-color:var(--kbq-code-block-outline-container-border-color)}.kbq-code-block.kbq-code-block_outline .kbq-code-block__header{background:var(--kbq-code-block-outline-header-background)}.kbq-code-block.kbq-code-block_outline.kbq-code-block_hide-tabs .kbq-code-block__actionbar .kbq-code-block__actionbar__button-stack{border-color:var(--kbq-code-block-outline-actionbar-border-color);background:var(--kbq-code-block-outline-actionbar-background)}.kbq-code-block.kbq-code-block_outline .kbq-code-block__view-all .kbq-code-block__view-all__wrapper{background:var(--kbq-code-block-outline-collapse-button-expand-background);opacity:90%}.kbq-code-block.kbq-code-block_outline .kbq-code-block__view-all.kbq-code-block__view-all_expanded{background:var(--kbq-code-block-outline-collapse-expanded-background)}.kbq-code-block.kbq-code-block_outline .kbq-code-block__view-all.kbq-code-block__view-all_collapsed{background:var(--kbq-code-block-outline-collapse-collapsed-background)}.kbq-code-block.kbq-code-block_filled{background:var(--kbq-code-block-filled-container-background);border-color:var(--kbq-code-block-filled-container-border-color)}.kbq-code-block.kbq-code-block_filled .kbq-code-block__header{background:var(--kbq-code-block-filled-header-background)}.kbq-code-block.kbq-code-block_filled.kbq-code-block_hide-tabs .kbq-code-block__actionbar .kbq-code-block__actionbar__button-stack{border-color:var(--kbq-code-block-filled-actionbar-border-color);background:var(--kbq-code-block-filled-actionbar-background)}.kbq-code-block.kbq-code-block_filled .kbq-code-block__view-all .kbq-code-block__view-all__wrapper{background:var(--kbq-code-block-filled-collapse-button-expand-background);opacity:90%}.kbq-code-block.kbq-code-block_filled .kbq-code-block__view-all.kbq-code-block__view-all_expanded{background:var(--kbq-code-block-filled-collapse-expanded-background)}.kbq-code-block.kbq-code-block_filled .kbq-code-block__view-all.kbq-code-block__view-all_collapsed{background:var(--kbq-code-block-filled-collapse-collapsed-background)}.kbq-code-block .kbq-code-block__main.cdk-keyboard-focused{outline-color:var(--kbq-states-line-focus-theme)}.kbq-code-block{font-size:var(--kbq-typography-mono-codeblock-font-size);font-style:var(--kbq-typography-mono-codeblock-font-style);font-weight:var(--kbq-typography-mono-codeblock-font-weight);line-height:var(--kbq-typography-mono-codeblock-line-height);font-family:var(--kbq-typography-mono-codeblock-font-family);text-transform:var(--kbq-typography-mono-codeblock-text-transform);font-feature-settings:var(--kbq-typography-mono-codeblock-font-feature-settings);letter-spacing:var(--kbq-typography-mono-codeblock-letter-spacing)}.kbq-code-block .kbq-code-block__pre,.kbq-code-block .kbq-code-block__code{font:inherit}\n", ".kbq-code-block{--kbq-code-block-size-container-border-width: var(--kbq-size-border-width);--kbq-code-block-size-container-border-width-focused: 2px;--kbq-code-block-size-container-border-radius: var(--kbq-size-border-radius);--kbq-code-block-size-with-header-content-padding-top: var(--kbq-size-xxs);--kbq-code-block-size-with-header-content-padding-bottom: var(--kbq-size-l);--kbq-code-block-size-with-header-content-padding-horizontal: var(--kbq-size-xl);--kbq-code-block-size-with-header-content-content-gap-horizontal: var(--kbq-size-m);--kbq-code-block-size-no-header-content-padding-vertical: 14px;--kbq-code-block-size-no-header-content-padding-horizontal: var(--kbq-size-xl);--kbq-code-block-size-no-header-content-content-gap-horizontal: var(--kbq-size-m);--kbq-code-block-size-header-content-gap-horizontal: var(--kbq-size-l);--kbq-code-block-size-actionbar-content-gap-horizontal: var(--kbq-size-3xs);--kbq-code-block-size-collapse-expanded-padding-top: 0;--kbq-code-block-size-collapse-expanded-padding-bottom: var(--kbq-size-l);--kbq-code-block-size-collapse-collapsed-padding-top: var(--kbq-size-3xl);--kbq-code-block-size-collapse-collapsed-padding-bottom: var(--kbq-size-l);--kbq-code-block-filled-container-background: var(--kbq-background-contrast-less);--kbq-code-block-filled-container-border-color: transparent;--kbq-code-block-filled-header-background: transparent;--kbq-code-block-filled-actionbar-background: var(--kbq-background-card);--kbq-code-block-filled-actionbar-border-color: var(--kbq-line-contrast-less);--kbq-code-block-filled-collapse-expanded-background: transparent;--kbq-code-block-filled-collapse-collapsed-background: linear-gradient( 180deg, transparent, var(--kbq-background-bg-secondary) 100% );--kbq-code-block-filled-collapse-button-expand-background: var(--kbq-background-bg-secondary);--kbq-code-block-outline-container-background: var(--kbq-background-card);--kbq-code-block-outline-container-border-color: var(--kbq-divider-color, var(--kbq-line-contrast-less));--kbq-code-block-outline-header-background: var(--kbq-background-card);--kbq-code-block-outline-actionbar-background: var(--kbq-background-card);--kbq-code-block-outline-actionbar-border-color: var(--kbq-line-contrast-less);--kbq-code-block-outline-collapse-expanded-background: transparent;--kbq-code-block-outline-collapse-collapsed-background: linear-gradient( 180deg, transparent, var(--kbq-background-bg) 100% );--kbq-code-block-outline-collapse-button-expand-background: var(--kbq-background-card);--kbq-code-block-tab-size: 4}\n"], dependencies: [{ kind: "ngmodule", type: KbqTabsModule }, { kind: "component", type: i2.KbqTabNavBar, selector: "[kbqTabNavBar], [kbq-tab-nav-bar]", inputs: ["transparent", "onSurface", "underlined", "tabNavPanel"], exportAs: ["kbqTabNavBar"] }, { kind: "directive", type: i2.KbqTabLink, selector: "[kbqTabLink], [kbq-tab-link]", inputs: ["id", "active", "disabled", "tabIndex"], exportAs: ["kbqTabLink"] }, { kind: "directive", type: i2.KbqTabNavPanel, selector: "[kbqTabNavPanel]", inputs: ["id"], exportAs: ["kbqTabNavPanel"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i3.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i3.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "directive", type: KbqCodeBlockHighlight, selector: "code[kbqCodeBlockHighlight]", inputs: ["file", "startFrom", "singleLine"], exportAs: ["kbqCodeBlockHighlight"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i4.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "ngmodule", type: KbqToolTipModule }, { kind: "directive", type: i5.KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["kbqTooltipScrollStrategy", "forDisabledComponent", "ignoreTooltipPointerEvents", "kbqTooltipSingleInstance", "kbqTrigger", "hideWithTimeout", "kbqEnterDelay", "kbqLeaveDelay", "kbqRelativeToPointer", "kbqRelativeToCaret", "kbqRelativeToCaretVertical", "kbqTooltip", "kbqTooltipHeader", "kbqTooltipModifier", "kbqTooltipContext", "kbqTooltipClass", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset", "kbqTooltipDisabled", "kbqPlacementPriority", "kbqPlacement", "kbqVisible"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i6.KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "directive", type: KbqScrollbarViewport, selector: "[kbqScrollbarViewport]", inputs: ["kbqScrollbarMode", "kbqScrollbarHideDelay"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: KbqOverflowShadowContainer, selector: "[kbqOverflowShadowContainer]", inputs: ["debounce"], exportAs: ["kbqOverflowShadowContainer"] }, { kind: "directive", type: KbqOverflowShadowTop, selector: "[kbqOverflowShadowTop]", inputs: ["kbqOverflowShadowTop", "shadow"], exportAs: ["kbqOverflowShadowTop"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqCodeBlock, isStandalone: true, selector: "kbq-code-block", inputs: { lineNumbers: { classPropertyName: "lineNumbers", publicName: "lineNumbers", isSignal: true, isRequired: false, transformFunction: null }, filled: { classPropertyName: "filled", publicName: "filled", isSignal: true, isRequired: false, transformFunction: null }, canToggleSoftWrap: { classPropertyName: "canToggleSoftWrap", publicName: "canToggleSoftWrap", isSignal: true, isRequired: false, transformFunction: null }, softWrapInput: { classPropertyName: "softWrapInput", publicName: "softWrap", isSignal: true, isRequired: false, transformFunction: null }, viewAllInput: { classPropertyName: "viewAllInput", publicName: "viewAll", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, canDownloadInput: { classPropertyName: "canDownloadInput", publicName: "canDownload", isSignal: true, isRequired: false, transformFunction: null }, canCopy: { classPropertyName: "canCopy", publicName: "canCopy", isSignal: true, isRequired: false, transformFunction: null }, alwaysShowActionbar: { classPropertyName: "alwaysShowActionbar", publicName: "alwaysShowActionbar", isSignal: true, isRequired: false, transformFunction: null }, filesInput: { classPropertyName: "filesInput", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, activeFileIndexInput: { classPropertyName: "activeFileIndexInput", publicName: "activeFileIndex", isSignal: true, isRequired: false, transformFunction: null }, noBorder: { classPropertyName: "noBorder", publicName: "noBorder", isSignal: true, isRequired: false, transformFunction: null }, hideTabsInput: { classPropertyName: "hideTabsInput", publicName: "hideTabs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { softWrapChange: "softWrapChange", viewAllChange: "viewAllChange", activeFileIndexChange: "activeFileIndexChange", hideTabsChange: "hideTabsChange" }, host: { properties: { "class.kbq-code-block_filled": "filled()", "class.kbq-code-block_outline": "!filled()", "class.kbq-code-block_hide-line-numbers": "!lineNumbers()", "class.kbq-code-block_hide-tabs": "tabsHidden()", "class.kbq-code-block_no-border": "noBorder() || filled()", "class.kbq-code-block_show-actionbar": "actionbarVisible()", "class.kbq-code-block_soft-wrap": "softWrap()", "class.kbq-code-block_view-all": "viewAll()" }, classAttribute: "kbq-code-block" }, queries: [{ propertyName: "tabLinkTemplate", first: true, predicate: KbqCodeBlockTabLinkContent, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "copyButtonTooltip", first: true, predicate: ["copyButtonTooltip"], descendants: true, isSignal: true }, { propertyName: "highlight", first: true, predicate: KbqCodeBlockHighlight, descendants: true, isSignal: true }, { propertyName: "scrollbarViewport", first: true, predicate: KbqScrollbarViewport, descendants: true, isSignal: true }, { propertyName: "preElementRef", first: true, predicate: ["codeBlockPre"], descendants: true, isSignal: true }, { propertyName: "codeElementRef", first: true, predicate: ["codeBlockCode"], descendants: true, isSignal: true }], exportAs: ["kbqCodeBlock"], hostDirectives: [{ directive: i1.KbqLocaleOverridesDirective, inputs: ["kbqLocaleOverrides", "localeOverrides"] }], ngImport: i0, template: "<div class=\"kbq-code-block__header\" [kbqOverflowShadowTop]=\"codeBlockContent\">\n    @if (!tabsHidden()) {\n        <div class=\"kbq-code-block__header-tabs\">\n            <div kbqTabNavBar transparent [tabNavPanel]=\"tabPanel\">\n                @for (file of files(); track file) {\n                    <!-- Mark tab-link as readonly if only single file present -->\n                    <div\n                        kbqTabLink\n                        [active]=\"$count > 1 && renderedFileIndex() === $index\"\n                        [style.pointer-events]=\"$count === 1 ? 'none' : null\"\n                        (click)=\"onSelectedTabChange($index)\"\n                    >\n                        @if (tabLinkTemplate(); as linkTemplate) {\n                            <ng-container\n                                *ngTemplateOutlet=\"linkTemplate; context: { $implicit: file, fallbackFileName }\"\n                            />\n                        } @else {\n                            {{ file.filename || fallbackFileName }}\n                        }\n                    </div>\n                }\n            </div>\n        </div>\n    }\n\n    <div class=\"kbq-code-block__actionbar\">\n        <div class=\"kbq-code-block__actionbar__button-stack\">\n            @if (canToggleSoftWrap()) {\n                <button\n                    kbq-button\n                    class=\"kbq-code-block__actionbar__soft-wrap-button\"\n                    [attr.aria-label]=\"\n                        softWrap() ? localeConfiguration().softWrapOffTooltip : localeConfiguration().softWrapOnTooltip\n                    \"\n                    [color]=\"componentColor.Contrast\"\n                    [kbqStyle]=\"buttonStyle.Transparent\"\n                    [kbqTooltip]=\"\n                        softWrap() ? localeConfiguration().softWrapOffTooltip : localeConfiguration().softWrapOnTooltip\n                    \"\n                    (click)=\"toggleSoftWrap()\"\n                >\n                    @if (softWrap()) {\n                        <i kbq-icon=\"kbq-text-overflow_16\"></i>\n                    } @else {\n                        <i kbq-icon=\"kbq-text-wrap_16\"></i>\n                    }\n                </button>\n            }\n\n            @if (canDownload()) {\n                <button\n                    kbq-button\n                    class=\"kbq-code-block__actionbar__download-button\"\n                    [attr.aria-label]=\"localeConfiguration().downloadTooltip\"\n                    [color]=\"componentColor.Contrast\"\n                    [kbqStyle]=\"buttonStyle.Transparent\"\n                    [kbqTooltip]=\"localeConfiguration().downloadTooltip\"\n                    (click)=\"downloadCode()\"\n                >\n                    <i kbq-icon=\"kbq-arrow-down-to-line_16\"></i>\n                </button>\n            }\n\n            @if (canCopy()) {\n                <div #copyButtonTooltip=\"kbqTooltip\" [kbqTooltip]=\"localeConfiguration().copyTooltip\">\n                    <button\n                        kbq-button\n                        class=\"kbq-code-block__actionbar__copy-button\"\n                        [attr.aria-label]=\"localeConfiguration().copyTooltip\"\n                        [color]=\"componentColor.Contrast\"\n                        [kbqStyle]=\"buttonStyle.Transparent\"\n                        (click)=\"copyCode()\"\n                    >\n                        <i kbq-icon=\"kbq-file-multiple-o_16\"></i>\n                    </button>\n                </div>\n            }\n\n            @if (activeFile()?.link) {\n                <button\n                    kbq-button\n                    class=\"kbq-code-block__actionbar__link-button\"\n                    [attr.aria-label]=\"localeConfiguration().openExternalSystemTooltip\"\n                    [color]=\"componentColor.Contrast\"\n                    [kbqStyle]=\"buttonStyle.Transparent\"\n                    [kbqTooltip]=\"localeConfiguration().openExternalSystemTooltip\"\n                    (click)=\"openLink()\"\n                >\n                    <i kbq-icon=\"kbq-arrow-up-right-from-square_16\"></i>\n                </button>\n            }\n        </div>\n    </div>\n</div>\n\n<div\n    #tabPanel=\"kbqTabNavPanel\"\n    #codeBlockContent=\"kbqOverflowShadowContainer\"\n    cdkMonitorElementFocus\n    kbqOverflowShadowContainer\n    kbqScrollbarViewport\n    kbqTabNavPanel\n    class=\"kbq-code-block__main\"\n    tabindex=\"0\"\n    [style.max-height.px]=\"calculatedMaxHeight()\"\n>\n    @if (activeFile(); as file) {\n        <pre\n            #codeBlockPre\n            class=\"kbq-code-block__pre\"\n        ><code #codeBlockCode kbqCodeBlockHighlight class=\"kbq-code-block__code\" [file]=\"file\"></code></pre>\n    }\n\n    @if (contentExceedsMaxHeight()) {\n        <div\n            class=\"kbq-code-block__view-all\"\n            [class.kbq-code-block__view-all_collapsed]=\"!viewAll()\"\n            [class.kbq-code-block__view-all_expanded]=\"viewAll()\"\n        >\n            <div class=\"kbq-code-block__view-all__wrapper\">\n                <button\n                    kbq-button\n                    class=\"kbq-code-block__view-all__button\"\n                    [color]=\"componentColor.Theme\"\n                    [kbqStyle]=\"buttonStyle.Transparent\"\n                    (click)=\"toggleViewAll()\"\n                    (keydown.enter)=\"onViewAllEnterKeydown($event)\"\n                >\n                    @if (viewAll()) {\n                        <i kbq-icon=\"kbq-chevron-up_16\"></i>\n                        {{ localeConfiguration().viewLessText }}\n                    } @else {\n                        <i kbq-icon=\"kbq-chevron-down_16\"></i>\n                        {{ localeConfiguration().viewAllText }}\n                    }\n                </button>\n            </div>\n        </div>\n    }\n</div>\n", styles: [".kbq-code-block{display:flex;flex-direction:column;position:relative;border-width:var(--kbq-code-block-size-container-border-width);border-style:solid;border-radius:var(--kbq-code-block-size-container-border-radius)}@supports (corner-shape: squircle){.kbq-code-block{corner-shape:squircle;border-radius:clamp(var(--kbq-code-block-size-container-border-radius) * 1.85,var(--kbq-code-block-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-code-block-size-container-border-radius) * 2)}}.kbq-code-block{box-sizing:border-box;hyphens:none;-ms-hyphens:none;-moz-hyphens:none;-webkit-hyphens:none}.kbq-code-block .kbq-code-block__header{display:flex;align-items:center;padding:var(--kbq-size-s) var(--kbq-size-m)}.kbq-code-block .kbq-code-block__header .kbq-code-block__header-tabs{overflow:hidden;flex-grow:1}.kbq-code-block .kbq-code-block__actionbar{display:flex;justify-content:right;align-items:center;z-index:1}.kbq-code-block .kbq-code-block__actionbar .kbq-code-block__actionbar__button-stack{display:flex;gap:var(--kbq-code-block-size-actionbar-content-gap-horizontal)}.kbq-code-block:has(.kbq-code-block__view-all) .kbq-code-block__main .kbq-code-block__code{padding-bottom:calc(var(--kbq-size-3xl) + var(--kbq-code-block-size-collapse-expanded-padding-bottom))!important}.kbq-code-block .kbq-code-block__main{flex-grow:1;flex-direction:column;border-radius:var(--kbq-code-block-size-container-border-radius)}@supports (corner-shape: squircle){.kbq-code-block .kbq-code-block__main{corner-shape:squircle;border-radius:clamp(var(--kbq-code-block-size-container-border-radius) * 1.85,var(--kbq-code-block-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-code-block-size-container-border-radius) * 2)}}.kbq-code-block .kbq-code-block__main.cdk-keyboard-focused{outline-style:solid;outline-width:var(--kbq-code-block-size-container-border-width-focused);outline-offset:-1px}.kbq-code-block .kbq-code-block__main .kbq-code-block__pre{margin:0;flex-grow:1}.kbq-code-block .kbq-code-block__main .kbq-code-block__code{--kbq-code-block-line-numbers-gap: var(--kbq-code-block-size-with-header-content-content-gap-horizontal);tab-size:var(--kbq-code-block-tab-size);padding:var(--kbq-code-block-size-with-header-content-padding-top) var(--kbq-code-block-size-with-header-content-padding-horizontal) var(--kbq-code-block-size-with-header-content-padding-bottom) var(--kbq-code-block-size-with-header-content-padding-horizontal)}.kbq-code-block .kbq-code-block__main .kbq-code-block__code:focus-visible{outline:none}.kbq-code-block .kbq-code-block__main .hljs,.kbq-code-block .kbq-code-block__main .kbq-code-block__line{display:block}.kbq-code-block:not(.kbq-code-block_hide-line-numbers) .kbq-code-block__code_line-numbers{--kbq-code-block-line-numbers-width: calc(var(--kbq-code-block-line-numbers-digits) * 1ch);--kbq-code-block-line-numbers-indent: calc( var(--kbq-code-block-line-numbers-width) + var(--kbq-code-block-line-numbers-gap) );counter-reset:kbq-code-block-line var(--kbq-code-block-line-numbers-start)}.kbq-code-block:not(.kbq-code-block_hide-line-numbers) .kbq-code-block__code_line-numbers .kbq-code-block__line{counter-increment:kbq-code-block-line;padding-inline-start:var(--kbq-code-block-line-numbers-indent);text-indent:calc(var(--kbq-code-block-line-numbers-indent) * -1)}.kbq-code-block:not(.kbq-code-block_hide-line-numbers) .kbq-code-block__code_line-numbers .kbq-code-block__line:before{content:counter(kbq-code-block-line)/\"\";display:inline-block;width:var(--kbq-code-block-line-numbers-width);margin-inline-end:var(--kbq-code-block-line-numbers-gap);text-align:end;text-indent:0;white-space:nowrap}.kbq-code-block.kbq-code-block_soft-wrap .kbq-code-block__code{white-space:pre-wrap;overflow-wrap:anywhere}.kbq-code-block:not(.kbq-code-block_soft-wrap) .kbq-code-block__pre{width:max-content;min-width:100%}.kbq-code-block.kbq-code-block_view-all .kbq-code-block__main{max-height:unset;overflow:auto}.kbq-code-block:not(.kbq-code-block_view-all) .kbq-code-block__main{overflow:hidden}.kbq-code-block.kbq-code-block_hide-tabs{isolation:isolate}.kbq-code-block.kbq-code-block_hide-tabs .kbq-code-block__header{padding:0}.kbq-code-block.kbq-code-block_hide-tabs .kbq-code-block__actionbar{display:none;position:absolute;top:0;right:0;padding:var(--kbq-size-s) var(--kbq-size-s) 0 0;border-top-right-radius:var(--kbq-code-block-size-container-border-radius)}@supports (corner-shape: squircle){.kbq-code-block.kbq-code-block_hide-tabs .kbq-code-block__actionbar{corner-shape:squircle;border-top-right-radius:clamp(var(--kbq-code-block-size-container-border-radius) * 1.85,var(--kbq-code-block-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-code-block-size-container-border-radius) * 2)}}.kbq-code-block.kbq-code-block_hide-tabs .kbq-code-block__actionbar .kbq-code-block__actionbar__button-stack{border-width:1px;border-style:solid;border-radius:calc(var(--kbq-size-border-radius) + 1px)}@supports (corner-shape: squircle){.kbq-code-block.kbq-code-block_hide-tabs .kbq-code-block__actionbar .kbq-code-block__actionbar__button-stack{corner-shape:squircle;border-radius:clamp((var(--kbq-size-border-radius) + 1px) * 1.85,(var(--kbq-size-border-radius) + 1px) * 2.3 - 3.6px,(var(--kbq-size-border-radius) + 1px) * 2)}}.kbq-code-block.kbq-code-block_hide-tabs .kbq-code-block__main{position:relative;isolation:auto}.kbq-code-block.kbq-code-block_hide-tabs .kbq-code-block__main .kbq-code-block__code{--kbq-code-block-line-numbers-gap: var(--kbq-code-block-size-no-header-content-content-gap-horizontal);padding:var(--kbq-code-block-size-no-header-content-padding-vertical) var(--kbq-code-block-size-no-header-content-padding-horizontal)}.kbq-code-block:not(.kbq-code-block_hide-tabs) .kbq-code-block__header{border-radius:var(--kbq-code-block-size-container-border-radius) var(--kbq-code-block-size-container-border-radius) 0 0}@supports (corner-shape: squircle){.kbq-code-block:not(.kbq-code-block_hide-tabs) .kbq-code-block__header{corner-shape:squircle;border-radius:clamp(var(--kbq-code-block-size-container-border-radius) * 1.85,var(--kbq-code-block-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-code-block-size-container-border-radius) * 2) clamp(var(--kbq-code-block-size-container-border-radius) * 1.85,var(--kbq-code-block-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-code-block-size-container-border-radius) * 2) 0 0}}.kbq-code-block:not(.kbq-code-block_hide-tabs) .kbq-code-block__main{border-radius:0 0 var(--kbq-code-block-size-container-border-radius) var(--kbq-code-block-size-container-border-radius)}@supports (corner-shape: squircle){.kbq-code-block:not(.kbq-code-block_hide-tabs) .kbq-code-block__main{corner-shape:squircle;border-radius:0 0 clamp(var(--kbq-code-block-size-container-border-radius) * 1.85,var(--kbq-code-block-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-code-block-size-container-border-radius) * 2) clamp(var(--kbq-code-block-size-container-border-radius) * 1.85,var(--kbq-code-block-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-code-block-size-container-border-radius) * 2)}}.kbq-code-block.kbq-code-block_show-actionbar .kbq-code-block__actionbar{display:flex}.kbq-code-block:not(:has(.kbq-code-block__view-all)) .kbq-code-block__main{overflow:auto}.kbq-code-block .kbq-code-block__view-all{display:flex;justify-content:center;width:100%;position:absolute;bottom:calc(var(--kbq-code-block-size-container-border-width) * -1);border-radius:var(--kbq-code-block-size-container-border-radius)}@supports (corner-shape: squircle){.kbq-code-block .kbq-code-block__view-all{corner-shape:squircle;border-radius:clamp(var(--kbq-code-block-size-container-border-radius) * 1.85,var(--kbq-code-block-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-code-block-size-container-border-radius) * 2)}}.kbq-code-block .kbq-code-block__view-all .kbq-code-block__view-all__wrapper{border-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-code-block .kbq-code-block__view-all .kbq-code-block__view-all__wrapper{corner-shape:squircle;border-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-code-block .kbq-code-block__view-all.kbq-code-block__view-all_collapsed{padding-top:var(--kbq-code-block-size-collapse-collapsed-padding-top);padding-bottom:var(--kbq-code-block-size-collapse-collapsed-padding-bottom)}.kbq-code-block .kbq-code-block__view-all.kbq-code-block__view-all_expanded{padding-top:var(--kbq-code-block-size-collapse-expanded-padding-top);margin-bottom:var(--kbq-code-block-size-collapse-expanded-padding-bottom)}.kbq-code-block.kbq-code-block_no-border{border-color:transparent!important}.kbq-code-block .hljs-addition{background-color:var(--kbq-code-block-hljs-addition-background);color:var(--kbq-code-block-hljs-addition-color)}.kbq-code-block .hljs-attr{background-color:var(--kbq-code-block-hljs-attr-background);color:var(--kbq-code-block-hljs-attr-color)}.kbq-code-block .hljs-attribute{background-color:var(--kbq-code-block-hljs-attribute-background);color:var(--kbq-code-block-hljs-attribute-color)}.kbq-code-block .hljs-built_in{background-color:var(--kbq-code-block-hljs-built-in-background);color:var(--kbq-code-block-hljs-built-in-color)}.kbq-code-block .hljs-bullet{background-color:var(--kbq-code-block-hljs-bullet-background);color:var(--kbq-code-block-hljs-bullet-color)}.kbq-code-block .hljs-char-escape{background-color:var(--kbq-code-block-hljs-char-escape-background);color:var(--kbq-code-block-hljs-char-escape-color)}.kbq-code-block .hljs-class{background-color:var(--kbq-code-block-hljs-class-background);color:var(--kbq-code-block-hljs-class-color)}.kbq-code-block .hljs-code{background-color:var(--kbq-code-block-hljs-code-background);color:var(--kbq-code-block-hljs-code-color)}.kbq-code-block .hljs-comment{background-color:var(--kbq-code-block-hljs-comment-background);color:var(--kbq-code-block-hljs-comment-color)}.kbq-code-block .hljs-deletion{background-color:var(--kbq-code-block-hljs-deletion-background);color:var(--kbq-code-block-hljs-deletion-color)}.kbq-code-block .hljs-doctag{background-color:var(--kbq-code-block-hljs-doctag-background);color:var(--kbq-code-block-hljs-doctag-color)}.kbq-code-block .hljs-emphasis{background-color:var(--kbq-code-block-hljs-emphasis-background);color:var(--kbq-code-block-hljs-emphasis-color)}.kbq-code-block .hljs-formula{background-color:var(--kbq-code-block-hljs-formula-background);color:var(--kbq-code-block-hljs-formula-color)}.kbq-code-block .hljs-function{background-color:var(--kbq-code-block-hljs-function-background);color:var(--kbq-code-block-hljs-function-color)}.kbq-code-block .hljs-keyword{background-color:var(--kbq-code-block-hljs-keyword-background);color:var(--kbq-code-block-hljs-keyword-color)}.kbq-code-block .hljs-link{background-color:var(--kbq-code-block-hljs-link-background);color:var(--kbq-code-block-hljs-link-color)}.kbq-code-block .hljs-literal{background-color:var(--kbq-code-block-hljs-literal-background);color:var(--kbq-code-block-hljs-literal-color)}.kbq-code-block .hljs-meta{background-color:var(--kbq-code-block-hljs-meta-background);color:var(--kbq-code-block-hljs-meta-color)}.kbq-code-block .hljs-meta-keyword{background-color:var(--kbq-code-block-hljs-meta-keyword-background);color:var(--kbq-code-block-hljs-meta-keyword-color)}.kbq-code-block .hljs-meta-string{background-color:var(--kbq-code-block-hljs-meta-string-background);color:var(--kbq-code-block-hljs-meta-string-color)}.kbq-code-block .hljs-meta-prompt{background-color:var(--kbq-code-block-hljs-meta-prompt-background);color:var(--kbq-code-block-hljs-meta-prompt-color)}.kbq-code-block .hljs-name{background-color:var(--kbq-code-block-hljs-name-background);color:var(--kbq-code-block-hljs-name-color)}.kbq-code-block .hljs-number{background-color:var(--kbq-code-block-hljs-number-background);color:var(--kbq-code-block-hljs-number-color)}.kbq-code-block .hljs-operator{background-color:var(--kbq-code-block-hljs-operator-background);color:var(--kbq-code-block-hljs-operator-color)}.kbq-code-block .hljs-params{background-color:var(--kbq-code-block-hljs-params-background);color:var(--kbq-code-block-hljs-params-color)}.kbq-code-block .hljs-property{background-color:var(--kbq-code-block-hljs-property-background);color:var(--kbq-code-block-hljs-property-color)}.kbq-code-block .hljs-punctuation{background-color:var(--kbq-code-block-hljs-punctuation-background);color:var(--kbq-code-block-hljs-punctuation-color)}.kbq-code-block .hljs-quote{background-color:var(--kbq-code-block-hljs-quote-background);color:var(--kbq-code-block-hljs-quote-color)}.kbq-code-block .hljs-regexp{background-color:var(--kbq-code-block-hljs-regexp-background);color:var(--kbq-code-block-hljs-regexp-color)}.kbq-code-block .hljs-section{background-color:var(--kbq-code-block-hljs-section-background);color:var(--kbq-code-block-hljs-section-color)}.kbq-code-block .hljs-selector-attr{background-color:var(--kbq-code-block-hljs-selector-attr-background);color:var(--kbq-code-block-hljs-selector-attr-color)}.kbq-code-block .hljs-selector-class{background-color:var(--kbq-code-block-hljs-selector-class-background);color:var(--kbq-code-block-hljs-selector-class-color)}.kbq-code-block .hljs-selector-id{background-color:var(--kbq-code-block-hljs-selector-id-background);color:var(--kbq-code-block-hljs-selector-id-color)}.kbq-code-block .hljs-selector-pseudo{background-color:var(--kbq-code-block-hljs-selector-pseudo-background);color:var(--kbq-code-block-hljs-selector-pseudo-color)}.kbq-code-block .hljs-selector-tag{background-color:var(--kbq-code-block-hljs-selector-tag-background);color:var(--kbq-code-block-hljs-selector-tag-color)}.kbq-code-block .hljs-string{background-color:var(--kbq-code-block-hljs-string-background);color:var(--kbq-code-block-hljs-string-color)}.kbq-code-block .hljs-strong{background-color:var(--kbq-code-block-hljs-strong-background);color:var(--kbq-code-block-hljs-strong-color)}.kbq-code-block .hljs-subst{background-color:var(--kbq-code-block-hljs-subst-background);color:var(--kbq-code-block-hljs-subst-color)}.kbq-code-block .hljs-symbol{background-color:var(--kbq-code-block-hljs-symbol-background);color:var(--kbq-code-block-hljs-symbol-color)}.kbq-code-block .hljs-tag{background-color:var(--kbq-code-block-hljs-tag-background);color:var(--kbq-code-block-hljs-tag-color)}.kbq-code-block .hljs-template-tag{background-color:var(--kbq-code-block-hljs-template-tag-background);color:var(--kbq-code-block-hljs-template-tag-color)}.kbq-code-block .hljs-template-variable{background-color:var(--kbq-code-block-hljs-template-variable-background);color:var(--kbq-code-block-hljs-template-variable-color)}.kbq-code-block .hljs-title{background-color:var(--kbq-code-block-hljs-title-background);color:var(--kbq-code-block-hljs-title-color)}.kbq-code-block .hljs-title-class{background-color:var(--kbq-code-block-hljs-title-class-background);color:var(--kbq-code-block-hljs-title-class-color)}.kbq-code-block .hljs-title-class-inherited{background-color:var(--kbq-code-block-hljs-title-class-inherited-background);color:var(--kbq-code-block-hljs-title-class-inherited-color)}.kbq-code-block .hljs-title-function{background-color:var(--kbq-code-block-hljs-title-function-background);color:var(--kbq-code-block-hljs-title-function-color)}.kbq-code-block .hljs-title-function-invoke{background-color:var(--kbq-code-block-hljs-title-function-invoke-background);color:var(--kbq-code-block-hljs-title-function-invoke-color)}.kbq-code-block .hljs-type{background-color:var(--kbq-code-block-hljs-type-background);color:var(--kbq-code-block-hljs-type-color)}.kbq-code-block .hljs-variable{background-color:var(--kbq-code-block-hljs-variable-background);color:var(--kbq-code-block-hljs-variable-color)}.kbq-code-block .hljs-variable-constant{background-color:var(--kbq-code-block-hljs-variable-constant-background);color:var(--kbq-code-block-hljs-variable-constant-color)}.kbq-code-block .hljs-variable-language{background-color:var(--kbq-code-block-hljs-variable-language-background);color:var(--kbq-code-block-hljs-variable-language-color)}.kbq-code-block .kbq-code-block__line:before{color:var(--kbq-code-block-hljs-line-numbers-color)}.kbq-code-block.kbq-code-block_outline{background:var(--kbq-code-block-outline-container-background);border-color:var(--kbq-code-block-outline-container-border-color)}.kbq-code-block.kbq-code-block_outline .kbq-code-block__header{background:var(--kbq-code-block-outline-header-background)}.kbq-code-block.kbq-code-block_outline.kbq-code-block_hide-tabs .kbq-code-block__actionbar{background:var(--kbq-code-block-outline-actionbar-plate-background)}.kbq-code-block.kbq-code-block_outline.kbq-code-block_hide-tabs .kbq-code-block__actionbar .kbq-code-block__actionbar__button-stack{border-color:var(--kbq-code-block-outline-actionbar-border-color);background:var(--kbq-code-block-outline-actionbar-background)}.kbq-code-block.kbq-code-block_outline .kbq-code-block__view-all.kbq-code-block__view-all_expanded{background:var(--kbq-code-block-outline-collapse-expanded-background)}.kbq-code-block.kbq-code-block_outline .kbq-code-block__view-all.kbq-code-block__view-all_collapsed{background:var(--kbq-code-block-outline-collapse-collapsed-background)}.kbq-code-block.kbq-code-block_outline .kbq-code-block__view-all.kbq-code-block__view-all_collapsed .kbq-code-block__view-all__wrapper{background:color-mix(in srgb,var(--kbq-code-block-outline-collapse-button-expand-background) 90%,transparent)}.kbq-code-block.kbq-code-block_filled{background:var(--kbq-code-block-filled-container-background);border-color:var(--kbq-code-block-filled-container-border-color)}.kbq-code-block.kbq-code-block_filled .kbq-code-block__header{background:var(--kbq-code-block-filled-header-background)}.kbq-code-block.kbq-code-block_filled.kbq-code-block_hide-tabs .kbq-code-block__actionbar{background:var(--kbq-code-block-filled-actionbar-plate-background)}.kbq-code-block.kbq-code-block_filled.kbq-code-block_hide-tabs .kbq-code-block__actionbar .kbq-code-block__actionbar__button-stack{border-color:var(--kbq-code-block-filled-actionbar-border-color);background:var(--kbq-code-block-filled-actionbar-background)}.kbq-code-block.kbq-code-block_filled .kbq-code-block__view-all.kbq-code-block__view-all_expanded{background:var(--kbq-code-block-filled-collapse-expanded-background)}.kbq-code-block.kbq-code-block_filled .kbq-code-block__view-all.kbq-code-block__view-all_collapsed{background:var(--kbq-code-block-filled-collapse-collapsed-background)}.kbq-code-block.kbq-code-block_filled .kbq-code-block__view-all.kbq-code-block__view-all_collapsed .kbq-code-block__view-all__wrapper{background:color-mix(in srgb,var(--kbq-code-block-filled-collapse-button-expand-background) 90%,transparent)}.kbq-code-block .kbq-code-block__main.cdk-keyboard-focused{outline-color:var(--kbq-states-line-focus-theme)}.kbq-code-block{font-size:var(--kbq-typography-mono-codeblock-font-size);font-style:var(--kbq-typography-mono-codeblock-font-style);font-weight:var(--kbq-typography-mono-codeblock-font-weight);line-height:var(--kbq-typography-mono-codeblock-line-height);font-family:var(--kbq-typography-mono-codeblock-font-family);text-transform:var(--kbq-typography-mono-codeblock-text-transform);font-feature-settings:var(--kbq-typography-mono-codeblock-font-feature-settings);letter-spacing:var(--kbq-typography-mono-codeblock-letter-spacing)}.kbq-code-block .kbq-code-block__pre,.kbq-code-block .kbq-code-block__code{font:inherit}\n", ".kbq-code-block{--kbq-code-block-size-container-border-width: var(--kbq-size-border-width);--kbq-code-block-size-container-border-width-focused: 2px;--kbq-code-block-size-container-border-radius: var(--kbq-size-border-radius);--kbq-code-block-size-with-header-content-padding-top: var(--kbq-size-xxs);--kbq-code-block-size-with-header-content-padding-bottom: var(--kbq-size-l);--kbq-code-block-size-with-header-content-padding-horizontal: var(--kbq-size-xl);--kbq-code-block-size-with-header-content-content-gap-horizontal: var(--kbq-size-m);--kbq-code-block-size-no-header-content-padding-vertical: 14px;--kbq-code-block-size-no-header-content-padding-horizontal: var(--kbq-size-xl);--kbq-code-block-size-no-header-content-content-gap-horizontal: var(--kbq-size-m);--kbq-code-block-size-header-content-gap-horizontal: var(--kbq-size-l);--kbq-code-block-size-actionbar-content-gap-horizontal: var(--kbq-size-3xs);--kbq-code-block-size-collapse-expanded-padding-top: 0;--kbq-code-block-size-collapse-expanded-padding-bottom: var(--kbq-size-l);--kbq-code-block-size-collapse-collapsed-padding-top: var(--kbq-size-3xl);--kbq-code-block-size-collapse-collapsed-padding-bottom: var(--kbq-size-l);--kbq-code-block-filled-container-background: var(--kbq-background-contrast-less);--kbq-code-block-filled-container-border-color: transparent;--kbq-code-block-filled-header-background: transparent;--kbq-code-block-filled-actionbar-background: var(--kbq-background-card);--kbq-code-block-filled-actionbar-border-color: var(--kbq-line-contrast-less);--kbq-code-block-filled-actionbar-plate-background: var(--kbq-background-bg-tertiary);--kbq-code-block-filled-collapse-expanded-background: transparent;--kbq-code-block-filled-collapse-collapsed-background: linear-gradient( 180deg, transparent, var(--kbq-background-bg-tertiary) 100% );--kbq-code-block-filled-collapse-button-expand-background: var(--kbq-background-bg-tertiary);--kbq-code-block-outline-container-background: var(--kbq-background-card);--kbq-code-block-outline-container-border-color: var(--kbq-divider-color, var(--kbq-line-contrast-less));--kbq-code-block-outline-header-background: var(--kbq-background-card);--kbq-code-block-outline-actionbar-background: var(--kbq-background-card);--kbq-code-block-outline-actionbar-border-color: var(--kbq-line-contrast-less);--kbq-code-block-outline-actionbar-plate-background: var(--kbq-code-block-outline-container-background);--kbq-code-block-outline-collapse-expanded-background: transparent;--kbq-code-block-outline-collapse-collapsed-background: linear-gradient( 180deg, transparent, var(--kbq-code-block-outline-container-background) 100% );--kbq-code-block-outline-collapse-button-expand-background: var(--kbq-background-bg);--kbq-code-block-tab-size: 4}\n"], dependencies: [{ kind: "ngmodule", type: KbqTabsModule }, { kind: "component", type: i2.KbqTabNavBar, selector: "[kbqTabNavBar], [kbq-tab-nav-bar]", inputs: ["transparent", "onSurface", "underlined", "tabNavPanel"], exportAs: ["kbqTabNavBar"] }, { kind: "directive", type: i2.KbqTabLink, selector: "[kbqTabLink], [kbq-tab-link]", inputs: ["id", "active", "disabled", "tabIndex"], exportAs: ["kbqTabLink"] }, { kind: "directive", type: i2.KbqTabNavPanel, selector: "[kbqTabNavPanel]", inputs: ["id"], exportAs: ["kbqTabNavPanel"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i3.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i3.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "directive", type: KbqCodeBlockHighlight, selector: "code[kbqCodeBlockHighlight]", inputs: ["file", "startFrom", "singleLine"], exportAs: ["kbqCodeBlockHighlight"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i4.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "ngmodule", type: KbqToolTipModule }, { kind: "directive", type: i5.KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["kbqTooltipScrollStrategy", "forDisabledComponent", "ignoreTooltipPointerEvents", "kbqTooltipSingleInstance", "kbqTrigger", "hideWithTimeout", "kbqEnterDelay", "kbqLeaveDelay", "kbqRelativeToPointer", "kbqRelativeToCaret", "kbqRelativeToCaretVertical", "kbqTooltip", "kbqTooltipHeader", "kbqTooltipModifier", "kbqTooltipContext", "kbqTooltipClass", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipArrowCentered", "kbqTooltipOffset", "kbqTooltipDisabled", "kbqPlacementPriority", "kbqPlacement", "kbqVisible"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i6.KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "directive", type: KbqScrollbarViewport, selector: "[kbqScrollbarViewport]", inputs: ["kbqScrollbarMode", "kbqScrollbarHideDelay"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: KbqOverflowShadowContainer, selector: "[kbqOverflowShadowContainer]", inputs: ["debounce"], exportAs: ["kbqOverflowShadowContainer"] }, { kind: "directive", type: KbqOverflowShadowTop, selector: "[kbqOverflowShadowTop]", inputs: ["kbqOverflowShadowTop", "shadow"], exportAs: ["kbqOverflowShadowTop"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqCodeBlock, decorators: [{
             type: Component,
@@ -1101,7 +813,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                         '[class.kbq-code-block_view-all]': 'viewAll()'
                     }, hostDirectives: [
                         { directive: KbqLocaleOverridesDirective, inputs: ['kbqLocaleOverrides: localeOverrides'] }
-                    ], exportAs: 'kbqCodeBlock', template: "<div class=\"kbq-code-block__header\" [kbqOverflowShadowTop]=\"codeBlockContent\">\n    @if (!tabsHidden()) {\n        <div class=\"kbq-code-block__header-tabs\">\n            <div kbqTabNavBar transparent [tabNavPanel]=\"tabPanel\">\n                @for (file of files(); track file) {\n                    <!-- Mark tab-link as readonly if only single file present -->\n                    <div\n                        kbqTabLink\n                        [active]=\"$count > 1 && renderedFileIndex() === $index\"\n                        [style.pointer-events]=\"$count === 1 ? 'none' : null\"\n                        (click)=\"onSelectedTabChange($index)\"\n                    >\n                        @if (tabLinkTemplate(); as linkTemplate) {\n                            <ng-container\n                                *ngTemplateOutlet=\"linkTemplate; context: { $implicit: file, fallbackFileName }\"\n                            />\n                        } @else {\n                            {{ file.filename || fallbackFileName }}\n                        }\n                    </div>\n                }\n            </div>\n        </div>\n    }\n\n    <div class=\"kbq-code-block__actionbar\">\n        <div class=\"kbq-code-block__actionbar__button-stack\">\n            @if (canToggleSoftWrap()) {\n                <button\n                    kbq-button\n                    class=\"kbq-code-block__actionbar__soft-wrap-button\"\n                    [attr.aria-label]=\"\n                        softWrap() ? localeConfiguration().softWrapOffTooltip : localeConfiguration().softWrapOnTooltip\n                    \"\n                    [color]=\"componentColor.Contrast\"\n                    [kbqStyle]=\"buttonStyle.Transparent\"\n                    [kbqTooltip]=\"\n                        softWrap() ? localeConfiguration().softWrapOffTooltip : localeConfiguration().softWrapOnTooltip\n                    \"\n                    (click)=\"toggleSoftWrap()\"\n                >\n                    @if (softWrap()) {\n                        <i kbq-icon=\"kbq-text-overflow_16\"></i>\n                    } @else {\n                        <i kbq-icon=\"kbq-text-wrap_16\"></i>\n                    }\n                </button>\n            }\n\n            @if (canDownload()) {\n                <button\n                    kbq-button\n                    class=\"kbq-code-block__actionbar__download-button\"\n                    [attr.aria-label]=\"localeConfiguration().downloadTooltip\"\n                    [color]=\"componentColor.Contrast\"\n                    [kbqStyle]=\"buttonStyle.Transparent\"\n                    [kbqTooltip]=\"localeConfiguration().downloadTooltip\"\n                    (click)=\"downloadCode()\"\n                >\n                    <i kbq-icon=\"kbq-arrow-down-to-line_16\"></i>\n                </button>\n            }\n\n            @if (canCopy()) {\n                <div #copyButtonTooltip=\"kbqTooltip\" [kbqTooltip]=\"localeConfiguration().copyTooltip\">\n                    <button\n                        kbq-button\n                        class=\"kbq-code-block__actionbar__copy-button\"\n                        [attr.aria-label]=\"localeConfiguration().copyTooltip\"\n                        [color]=\"componentColor.Contrast\"\n                        [kbqStyle]=\"buttonStyle.Transparent\"\n                        (click)=\"copyCode()\"\n                    >\n                        <i kbq-icon=\"kbq-file-multiple-o_16\"></i>\n                    </button>\n                </div>\n            }\n\n            @if (activeFile()?.link) {\n                <button\n                    kbq-button\n                    class=\"kbq-code-block__actionbar__link-button\"\n                    [attr.aria-label]=\"localeConfiguration().openExternalSystemTooltip\"\n                    [color]=\"componentColor.Contrast\"\n                    [kbqStyle]=\"buttonStyle.Transparent\"\n                    [kbqTooltip]=\"localeConfiguration().openExternalSystemTooltip\"\n                    (click)=\"openLink()\"\n                >\n                    <i kbq-icon=\"kbq-arrow-up-right-from-square_16\"></i>\n                </button>\n            }\n        </div>\n    </div>\n</div>\n\n<div\n    #tabPanel=\"kbqTabNavPanel\"\n    #codeBlockContent=\"kbqOverflowShadowContainer\"\n    cdkMonitorElementFocus\n    kbqOverflowShadowContainer\n    kbqScrollbarViewport\n    kbqTabNavPanel\n    class=\"kbq-code-block__main\"\n    tabindex=\"0\"\n    [style.max-height.px]=\"calculatedMaxHeight()\"\n>\n    @if (activeFile(); as file) {\n        <pre\n            #codeBlockPre\n            class=\"kbq-code-block__pre\"\n        ><code #codeBlockCode kbqCodeBlockHighlight class=\"kbq-code-block__code\" [file]=\"file\"></code></pre>\n    }\n\n    @if (contentExceedsMaxHeight()) {\n        <div\n            class=\"kbq-code-block__view-all\"\n            [class.kbq-code-block__view-all_collapsed]=\"!viewAll()\"\n            [class.kbq-code-block__view-all_expanded]=\"viewAll()\"\n        >\n            <div class=\"kbq-code-block__view-all__wrapper\">\n                <button\n                    kbq-button\n                    class=\"kbq-code-block__view-all__button\"\n                    [color]=\"componentColor.Theme\"\n                    [kbqStyle]=\"buttonStyle.Transparent\"\n                    (click)=\"toggleViewAll()\"\n                    (keydown.enter)=\"onViewAllEnterKeydown($event)\"\n                >\n                    @if (viewAll()) {\n                        <i kbq-icon=\"kbq-chevron-up_16\"></i>\n                        {{ localeConfiguration().viewLessText }}\n                    } @else {\n                        <i kbq-icon=\"kbq-chevron-down_16\"></i>\n                        {{ localeConfiguration().viewAllText }}\n                    }\n                </button>\n            </div>\n        </div>\n    }\n</div>\n", styles: [".kbq-code-block{display:flex;flex-direction:column;position:relative;border-width:var(--kbq-code-block-size-container-border-width);border-style:solid;border-radius:var(--kbq-code-block-size-container-border-radius)}@supports (corner-shape: squircle){.kbq-code-block{corner-shape:squircle;border-radius:clamp(var(--kbq-code-block-size-container-border-radius) * 1.85,var(--kbq-code-block-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-code-block-size-container-border-radius) * 2)}}.kbq-code-block{box-sizing:border-box;hyphens:none;-ms-hyphens:none;-moz-hyphens:none;-webkit-hyphens:none}.kbq-code-block .kbq-code-block__header{display:flex;align-items:center;padding:var(--kbq-size-s) var(--kbq-size-m)}.kbq-code-block .kbq-code-block__header .kbq-code-block__header-tabs{overflow:hidden;flex-grow:1}.kbq-code-block .kbq-code-block__actionbar{display:flex;justify-content:right;align-items:center;z-index:1}.kbq-code-block .kbq-code-block__actionbar .kbq-code-block__actionbar__button-stack{display:flex;gap:var(--kbq-code-block-size-actionbar-content-gap-horizontal)}.kbq-code-block:has(.kbq-code-block__view-all) .kbq-code-block__main .kbq-code-block__code{padding-bottom:var(--kbq-size-3xl)!important}.kbq-code-block .kbq-code-block__main{flex-grow:1;flex-direction:column;border-radius:var(--kbq-code-block-size-container-border-radius)}@supports (corner-shape: squircle){.kbq-code-block .kbq-code-block__main{corner-shape:squircle;border-radius:clamp(var(--kbq-code-block-size-container-border-radius) * 1.85,var(--kbq-code-block-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-code-block-size-container-border-radius) * 2)}}.kbq-code-block .kbq-code-block__main.cdk-keyboard-focused{outline-style:solid;outline-width:var(--kbq-code-block-size-container-border-width-focused);outline-offset:-1px}.kbq-code-block .kbq-code-block__main .kbq-code-block__pre{margin:0;flex-grow:1}.kbq-code-block .kbq-code-block__main .kbq-code-block__code{tab-size:var(--kbq-code-block-tab-size);padding:var(--kbq-code-block-size-with-header-content-padding-top) var(--kbq-code-block-size-with-header-content-padding-horizontal) var(--kbq-code-block-size-with-header-content-padding-bottom) var(--kbq-code-block-size-with-header-content-padding-horizontal)}.kbq-code-block .kbq-code-block__main .kbq-code-block__code:focus-visible{outline:none}.kbq-code-block .kbq-code-block__main .hljs{display:block}.kbq-code-block .kbq-code-block__main .hljs-ln-numbers{padding-right:var(--kbq-code-block-size-with-header-content-content-gap-horizontal);vertical-align:baseline;text-align:right}.kbq-code-block .kbq-code-block__main .hljs-ln{border-collapse:unset}.kbq-code-block .kbq-code-block__main .hljs-ln .hljs{padding:0}.kbq-code-block .kbq-code-block__main .hljs-ln-n:before{white-space:nowrap}.kbq-code-block.kbq-code-block_hide-line-numbers .hljs-ln-line.hljs-ln-numbers{display:none}.kbq-code-block.kbq-code-block_soft-wrap .kbq-code-block__code{white-space:pre-wrap;overflow-wrap:anywhere}.kbq-code-block:not(.kbq-code-block_soft-wrap) .kbq-code-block__pre{width:max-content;min-width:100%}.kbq-code-block.kbq-code-block_view-all .kbq-code-block__main{max-height:unset;overflow:auto}.kbq-code-block:not(.kbq-code-block_view-all) .kbq-code-block__main{overflow:hidden}.kbq-code-block.kbq-code-block_hide-tabs .kbq-code-block__header{padding:0}.kbq-code-block.kbq-code-block_hide-tabs .kbq-code-block__actionbar{display:none;position:absolute;top:0;right:0;margin:var(--kbq-size-s) var(--kbq-size-s) var(--kbq-size-s) 0}.kbq-code-block.kbq-code-block_hide-tabs .kbq-code-block__actionbar .kbq-code-block__actionbar__button-stack{border-width:1px;border-style:solid;border-radius:calc(var(--kbq-size-border-radius) + 1px)}@supports (corner-shape: squircle){.kbq-code-block.kbq-code-block_hide-tabs .kbq-code-block__actionbar .kbq-code-block__actionbar__button-stack{corner-shape:squircle;border-radius:clamp((var(--kbq-size-border-radius) + 1px) * 1.85,(var(--kbq-size-border-radius) + 1px) * 2.3 - 3.6px,(var(--kbq-size-border-radius) + 1px) * 2)}}.kbq-code-block.kbq-code-block_hide-tabs .kbq-code-block__main{position:relative}.kbq-code-block.kbq-code-block_hide-tabs .kbq-code-block__main .kbq-code-block__code{padding:var(--kbq-code-block-size-no-header-content-padding-vertical) var(--kbq-code-block-size-no-header-content-padding-horizontal)}.kbq-code-block.kbq-code-block_hide-tabs .kbq-code-block__main .hljs-ln-numbers{padding-right:var(--kbq-code-block-size-no-header-content-content-gap-horizontal)}.kbq-code-block:not(.kbq-code-block_hide-tabs) .kbq-code-block__header{border-radius:var(--kbq-code-block-size-container-border-radius) var(--kbq-code-block-size-container-border-radius) 0 0}@supports (corner-shape: squircle){.kbq-code-block:not(.kbq-code-block_hide-tabs) .kbq-code-block__header{corner-shape:squircle;border-radius:clamp(var(--kbq-code-block-size-container-border-radius) * 1.85,var(--kbq-code-block-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-code-block-size-container-border-radius) * 2) clamp(var(--kbq-code-block-size-container-border-radius) * 1.85,var(--kbq-code-block-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-code-block-size-container-border-radius) * 2) 0 0}}.kbq-code-block:not(.kbq-code-block_hide-tabs) .kbq-code-block__main{border-radius:0 0 var(--kbq-code-block-size-container-border-radius) var(--kbq-code-block-size-container-border-radius)}@supports (corner-shape: squircle){.kbq-code-block:not(.kbq-code-block_hide-tabs) .kbq-code-block__main{corner-shape:squircle;border-radius:0 0 clamp(var(--kbq-code-block-size-container-border-radius) * 1.85,var(--kbq-code-block-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-code-block-size-container-border-radius) * 2) clamp(var(--kbq-code-block-size-container-border-radius) * 1.85,var(--kbq-code-block-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-code-block-size-container-border-radius) * 2)}}.kbq-code-block.kbq-code-block_show-actionbar .kbq-code-block__actionbar{display:flex}.kbq-code-block:not(:has(.kbq-code-block__view-all)) .kbq-code-block__main{overflow:auto}.kbq-code-block .kbq-code-block__view-all{display:flex;justify-content:center;width:100%;position:absolute;bottom:calc(var(--kbq-code-block-size-container-border-width) * -1);border-radius:var(--kbq-code-block-size-container-border-radius)}@supports (corner-shape: squircle){.kbq-code-block .kbq-code-block__view-all{corner-shape:squircle;border-radius:clamp(var(--kbq-code-block-size-container-border-radius) * 1.85,var(--kbq-code-block-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-code-block-size-container-border-radius) * 2)}}.kbq-code-block .kbq-code-block__view-all .kbq-code-block__view-all__wrapper{border-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-code-block .kbq-code-block__view-all .kbq-code-block__view-all__wrapper{corner-shape:squircle;border-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-code-block .kbq-code-block__view-all.kbq-code-block__view-all_collapsed{padding-top:var(--kbq-code-block-size-collapse-collapsed-padding-top);padding-bottom:var(--kbq-code-block-size-collapse-collapsed-padding-bottom)}.kbq-code-block .kbq-code-block__view-all.kbq-code-block__view-all_expanded{padding-top:var(--kbq-code-block-size-collapse-expanded-padding-top);margin-bottom:var(--kbq-code-block-size-collapse-expanded-padding-bottom)}.kbq-code-block.kbq-code-block_no-border{border-color:transparent!important}.kbq-code-block .hljs-addition{background-color:var(--kbq-code-block-hljs-addition-background);color:var(--kbq-code-block-hljs-addition-color)}.kbq-code-block .hljs-attr{background-color:var(--kbq-code-block-hljs-attr-background);color:var(--kbq-code-block-hljs-attr-color)}.kbq-code-block .hljs-attribute{background-color:var(--kbq-code-block-hljs-attribute-background);color:var(--kbq-code-block-hljs-attribute-color)}.kbq-code-block .hljs-built_in{background-color:var(--kbq-code-block-hljs-built-in-background);color:var(--kbq-code-block-hljs-built-in-color)}.kbq-code-block .hljs-bullet{background-color:var(--kbq-code-block-hljs-bullet-background);color:var(--kbq-code-block-hljs-bullet-color)}.kbq-code-block .hljs-char-escape{background-color:var(--kbq-code-block-hljs-char-escape-background);color:var(--kbq-code-block-hljs-char-escape-color)}.kbq-code-block .hljs-class{background-color:var(--kbq-code-block-hljs-class-background);color:var(--kbq-code-block-hljs-class-color)}.kbq-code-block .hljs-code{background-color:var(--kbq-code-block-hljs-code-background);color:var(--kbq-code-block-hljs-code-color)}.kbq-code-block .hljs-comment{background-color:var(--kbq-code-block-hljs-comment-background);color:var(--kbq-code-block-hljs-comment-color)}.kbq-code-block .hljs-deletion{background-color:var(--kbq-code-block-hljs-deletion-background);color:var(--kbq-code-block-hljs-deletion-color)}.kbq-code-block .hljs-doctag{background-color:var(--kbq-code-block-hljs-doctag-background);color:var(--kbq-code-block-hljs-doctag-color)}.kbq-code-block .hljs-emphasis{background-color:var(--kbq-code-block-hljs-emphasis-background);color:var(--kbq-code-block-hljs-emphasis-color)}.kbq-code-block .hljs-formula{background-color:var(--kbq-code-block-hljs-formula-background);color:var(--kbq-code-block-hljs-formula-color)}.kbq-code-block .hljs-function{background-color:var(--kbq-code-block-hljs-function-background);color:var(--kbq-code-block-hljs-function-color)}.kbq-code-block .hljs-keyword{background-color:var(--kbq-code-block-hljs-keyword-background);color:var(--kbq-code-block-hljs-keyword-color)}.kbq-code-block .hljs-link{background-color:var(--kbq-code-block-hljs-link-background);color:var(--kbq-code-block-hljs-link-color)}.kbq-code-block .hljs-literal{background-color:var(--kbq-code-block-hljs-literal-background);color:var(--kbq-code-block-hljs-literal-color)}.kbq-code-block .hljs-meta{background-color:var(--kbq-code-block-hljs-meta-background);color:var(--kbq-code-block-hljs-meta-color)}.kbq-code-block .hljs-meta-keyword{background-color:var(--kbq-code-block-hljs-meta-keyword-background);color:var(--kbq-code-block-hljs-meta-keyword-color)}.kbq-code-block .hljs-meta-string{background-color:var(--kbq-code-block-hljs-meta-string-background);color:var(--kbq-code-block-hljs-meta-string-color)}.kbq-code-block .hljs-meta-prompt{background-color:var(--kbq-code-block-hljs-meta-prompt-background);color:var(--kbq-code-block-hljs-meta-prompt-color)}.kbq-code-block .hljs-name{background-color:var(--kbq-code-block-hljs-name-background);color:var(--kbq-code-block-hljs-name-color)}.kbq-code-block .hljs-number{background-color:var(--kbq-code-block-hljs-number-background);color:var(--kbq-code-block-hljs-number-color)}.kbq-code-block .hljs-operator{background-color:var(--kbq-code-block-hljs-operator-background);color:var(--kbq-code-block-hljs-operator-color)}.kbq-code-block .hljs-params{background-color:var(--kbq-code-block-hljs-params-background);color:var(--kbq-code-block-hljs-params-color)}.kbq-code-block .hljs-property{background-color:var(--kbq-code-block-hljs-property-background);color:var(--kbq-code-block-hljs-property-color)}.kbq-code-block .hljs-punctuation{background-color:var(--kbq-code-block-hljs-punctuation-background);color:var(--kbq-code-block-hljs-punctuation-color)}.kbq-code-block .hljs-quote{background-color:var(--kbq-code-block-hljs-quote-background);color:var(--kbq-code-block-hljs-quote-color)}.kbq-code-block .hljs-regexp{background-color:var(--kbq-code-block-hljs-regexp-background);color:var(--kbq-code-block-hljs-regexp-color)}.kbq-code-block .hljs-section{background-color:var(--kbq-code-block-hljs-section-background);color:var(--kbq-code-block-hljs-section-color)}.kbq-code-block .hljs-selector-attr{background-color:var(--kbq-code-block-hljs-selector-attr-background);color:var(--kbq-code-block-hljs-selector-attr-color)}.kbq-code-block .hljs-selector-class{background-color:var(--kbq-code-block-hljs-selector-class-background);color:var(--kbq-code-block-hljs-selector-class-color)}.kbq-code-block .hljs-selector-id{background-color:var(--kbq-code-block-hljs-selector-id-background);color:var(--kbq-code-block-hljs-selector-id-color)}.kbq-code-block .hljs-selector-pseudo{background-color:var(--kbq-code-block-hljs-selector-pseudo-background);color:var(--kbq-code-block-hljs-selector-pseudo-color)}.kbq-code-block .hljs-selector-tag{background-color:var(--kbq-code-block-hljs-selector-tag-background);color:var(--kbq-code-block-hljs-selector-tag-color)}.kbq-code-block .hljs-string{background-color:var(--kbq-code-block-hljs-string-background);color:var(--kbq-code-block-hljs-string-color)}.kbq-code-block .hljs-strong{background-color:var(--kbq-code-block-hljs-strong-background);color:var(--kbq-code-block-hljs-strong-color)}.kbq-code-block .hljs-subst{background-color:var(--kbq-code-block-hljs-subst-background);color:var(--kbq-code-block-hljs-subst-color)}.kbq-code-block .hljs-symbol{background-color:var(--kbq-code-block-hljs-symbol-background);color:var(--kbq-code-block-hljs-symbol-color)}.kbq-code-block .hljs-tag{background-color:var(--kbq-code-block-hljs-tag-background);color:var(--kbq-code-block-hljs-tag-color)}.kbq-code-block .hljs-template-tag{background-color:var(--kbq-code-block-hljs-template-tag-background);color:var(--kbq-code-block-hljs-template-tag-color)}.kbq-code-block .hljs-template-variable{background-color:var(--kbq-code-block-hljs-template-variable-background);color:var(--kbq-code-block-hljs-template-variable-color)}.kbq-code-block .hljs-title{background-color:var(--kbq-code-block-hljs-title-background);color:var(--kbq-code-block-hljs-title-color)}.kbq-code-block .hljs-title-class{background-color:var(--kbq-code-block-hljs-title-class-background);color:var(--kbq-code-block-hljs-title-class-color)}.kbq-code-block .hljs-title-class-inherited{background-color:var(--kbq-code-block-hljs-title-class-inherited-background);color:var(--kbq-code-block-hljs-title-class-inherited-color)}.kbq-code-block .hljs-title-function{background-color:var(--kbq-code-block-hljs-title-function-background);color:var(--kbq-code-block-hljs-title-function-color)}.kbq-code-block .hljs-title-function-invoke{background-color:var(--kbq-code-block-hljs-title-function-invoke-background);color:var(--kbq-code-block-hljs-title-function-invoke-color)}.kbq-code-block .hljs-type{background-color:var(--kbq-code-block-hljs-type-background);color:var(--kbq-code-block-hljs-type-color)}.kbq-code-block .hljs-variable{background-color:var(--kbq-code-block-hljs-variable-background);color:var(--kbq-code-block-hljs-variable-color)}.kbq-code-block .hljs-variable-constant{background-color:var(--kbq-code-block-hljs-variable-constant-background);color:var(--kbq-code-block-hljs-variable-constant-color)}.kbq-code-block .hljs-variable-language{background-color:var(--kbq-code-block-hljs-variable-language-background);color:var(--kbq-code-block-hljs-variable-language-color)}.kbq-code-block .hljs-ln-n{color:var(--kbq-code-block-hljs-line-numbers-color)}.kbq-code-block.kbq-code-block_outline{background:var(--kbq-code-block-outline-container-background);border-color:var(--kbq-code-block-outline-container-border-color)}.kbq-code-block.kbq-code-block_outline .kbq-code-block__header{background:var(--kbq-code-block-outline-header-background)}.kbq-code-block.kbq-code-block_outline.kbq-code-block_hide-tabs .kbq-code-block__actionbar .kbq-code-block__actionbar__button-stack{border-color:var(--kbq-code-block-outline-actionbar-border-color);background:var(--kbq-code-block-outline-actionbar-background)}.kbq-code-block.kbq-code-block_outline .kbq-code-block__view-all .kbq-code-block__view-all__wrapper{background:var(--kbq-code-block-outline-collapse-button-expand-background);opacity:90%}.kbq-code-block.kbq-code-block_outline .kbq-code-block__view-all.kbq-code-block__view-all_expanded{background:var(--kbq-code-block-outline-collapse-expanded-background)}.kbq-code-block.kbq-code-block_outline .kbq-code-block__view-all.kbq-code-block__view-all_collapsed{background:var(--kbq-code-block-outline-collapse-collapsed-background)}.kbq-code-block.kbq-code-block_filled{background:var(--kbq-code-block-filled-container-background);border-color:var(--kbq-code-block-filled-container-border-color)}.kbq-code-block.kbq-code-block_filled .kbq-code-block__header{background:var(--kbq-code-block-filled-header-background)}.kbq-code-block.kbq-code-block_filled.kbq-code-block_hide-tabs .kbq-code-block__actionbar .kbq-code-block__actionbar__button-stack{border-color:var(--kbq-code-block-filled-actionbar-border-color);background:var(--kbq-code-block-filled-actionbar-background)}.kbq-code-block.kbq-code-block_filled .kbq-code-block__view-all .kbq-code-block__view-all__wrapper{background:var(--kbq-code-block-filled-collapse-button-expand-background);opacity:90%}.kbq-code-block.kbq-code-block_filled .kbq-code-block__view-all.kbq-code-block__view-all_expanded{background:var(--kbq-code-block-filled-collapse-expanded-background)}.kbq-code-block.kbq-code-block_filled .kbq-code-block__view-all.kbq-code-block__view-all_collapsed{background:var(--kbq-code-block-filled-collapse-collapsed-background)}.kbq-code-block .kbq-code-block__main.cdk-keyboard-focused{outline-color:var(--kbq-states-line-focus-theme)}.kbq-code-block{font-size:var(--kbq-typography-mono-codeblock-font-size);font-style:var(--kbq-typography-mono-codeblock-font-style);font-weight:var(--kbq-typography-mono-codeblock-font-weight);line-height:var(--kbq-typography-mono-codeblock-line-height);font-family:var(--kbq-typography-mono-codeblock-font-family);text-transform:var(--kbq-typography-mono-codeblock-text-transform);font-feature-settings:var(--kbq-typography-mono-codeblock-font-feature-settings);letter-spacing:var(--kbq-typography-mono-codeblock-letter-spacing)}.kbq-code-block .kbq-code-block__pre,.kbq-code-block .kbq-code-block__code{font:inherit}\n", ".kbq-code-block{--kbq-code-block-size-container-border-width: var(--kbq-size-border-width);--kbq-code-block-size-container-border-width-focused: 2px;--kbq-code-block-size-container-border-radius: var(--kbq-size-border-radius);--kbq-code-block-size-with-header-content-padding-top: var(--kbq-size-xxs);--kbq-code-block-size-with-header-content-padding-bottom: var(--kbq-size-l);--kbq-code-block-size-with-header-content-padding-horizontal: var(--kbq-size-xl);--kbq-code-block-size-with-header-content-content-gap-horizontal: var(--kbq-size-m);--kbq-code-block-size-no-header-content-padding-vertical: 14px;--kbq-code-block-size-no-header-content-padding-horizontal: var(--kbq-size-xl);--kbq-code-block-size-no-header-content-content-gap-horizontal: var(--kbq-size-m);--kbq-code-block-size-header-content-gap-horizontal: var(--kbq-size-l);--kbq-code-block-size-actionbar-content-gap-horizontal: var(--kbq-size-3xs);--kbq-code-block-size-collapse-expanded-padding-top: 0;--kbq-code-block-size-collapse-expanded-padding-bottom: var(--kbq-size-l);--kbq-code-block-size-collapse-collapsed-padding-top: var(--kbq-size-3xl);--kbq-code-block-size-collapse-collapsed-padding-bottom: var(--kbq-size-l);--kbq-code-block-filled-container-background: var(--kbq-background-contrast-less);--kbq-code-block-filled-container-border-color: transparent;--kbq-code-block-filled-header-background: transparent;--kbq-code-block-filled-actionbar-background: var(--kbq-background-card);--kbq-code-block-filled-actionbar-border-color: var(--kbq-line-contrast-less);--kbq-code-block-filled-collapse-expanded-background: transparent;--kbq-code-block-filled-collapse-collapsed-background: linear-gradient( 180deg, transparent, var(--kbq-background-bg-secondary) 100% );--kbq-code-block-filled-collapse-button-expand-background: var(--kbq-background-bg-secondary);--kbq-code-block-outline-container-background: var(--kbq-background-card);--kbq-code-block-outline-container-border-color: var(--kbq-divider-color, var(--kbq-line-contrast-less));--kbq-code-block-outline-header-background: var(--kbq-background-card);--kbq-code-block-outline-actionbar-background: var(--kbq-background-card);--kbq-code-block-outline-actionbar-border-color: var(--kbq-line-contrast-less);--kbq-code-block-outline-collapse-expanded-background: transparent;--kbq-code-block-outline-collapse-collapsed-background: linear-gradient( 180deg, transparent, var(--kbq-background-bg) 100% );--kbq-code-block-outline-collapse-button-expand-background: var(--kbq-background-card);--kbq-code-block-tab-size: 4}\n"] }]
+                    ], exportAs: 'kbqCodeBlock', template: "<div class=\"kbq-code-block__header\" [kbqOverflowShadowTop]=\"codeBlockContent\">\n    @if (!tabsHidden()) {\n        <div class=\"kbq-code-block__header-tabs\">\n            <div kbqTabNavBar transparent [tabNavPanel]=\"tabPanel\">\n                @for (file of files(); track file) {\n                    <!-- Mark tab-link as readonly if only single file present -->\n                    <div\n                        kbqTabLink\n                        [active]=\"$count > 1 && renderedFileIndex() === $index\"\n                        [style.pointer-events]=\"$count === 1 ? 'none' : null\"\n                        (click)=\"onSelectedTabChange($index)\"\n                    >\n                        @if (tabLinkTemplate(); as linkTemplate) {\n                            <ng-container\n                                *ngTemplateOutlet=\"linkTemplate; context: { $implicit: file, fallbackFileName }\"\n                            />\n                        } @else {\n                            {{ file.filename || fallbackFileName }}\n                        }\n                    </div>\n                }\n            </div>\n        </div>\n    }\n\n    <div class=\"kbq-code-block__actionbar\">\n        <div class=\"kbq-code-block__actionbar__button-stack\">\n            @if (canToggleSoftWrap()) {\n                <button\n                    kbq-button\n                    class=\"kbq-code-block__actionbar__soft-wrap-button\"\n                    [attr.aria-label]=\"\n                        softWrap() ? localeConfiguration().softWrapOffTooltip : localeConfiguration().softWrapOnTooltip\n                    \"\n                    [color]=\"componentColor.Contrast\"\n                    [kbqStyle]=\"buttonStyle.Transparent\"\n                    [kbqTooltip]=\"\n                        softWrap() ? localeConfiguration().softWrapOffTooltip : localeConfiguration().softWrapOnTooltip\n                    \"\n                    (click)=\"toggleSoftWrap()\"\n                >\n                    @if (softWrap()) {\n                        <i kbq-icon=\"kbq-text-overflow_16\"></i>\n                    } @else {\n                        <i kbq-icon=\"kbq-text-wrap_16\"></i>\n                    }\n                </button>\n            }\n\n            @if (canDownload()) {\n                <button\n                    kbq-button\n                    class=\"kbq-code-block__actionbar__download-button\"\n                    [attr.aria-label]=\"localeConfiguration().downloadTooltip\"\n                    [color]=\"componentColor.Contrast\"\n                    [kbqStyle]=\"buttonStyle.Transparent\"\n                    [kbqTooltip]=\"localeConfiguration().downloadTooltip\"\n                    (click)=\"downloadCode()\"\n                >\n                    <i kbq-icon=\"kbq-arrow-down-to-line_16\"></i>\n                </button>\n            }\n\n            @if (canCopy()) {\n                <div #copyButtonTooltip=\"kbqTooltip\" [kbqTooltip]=\"localeConfiguration().copyTooltip\">\n                    <button\n                        kbq-button\n                        class=\"kbq-code-block__actionbar__copy-button\"\n                        [attr.aria-label]=\"localeConfiguration().copyTooltip\"\n                        [color]=\"componentColor.Contrast\"\n                        [kbqStyle]=\"buttonStyle.Transparent\"\n                        (click)=\"copyCode()\"\n                    >\n                        <i kbq-icon=\"kbq-file-multiple-o_16\"></i>\n                    </button>\n                </div>\n            }\n\n            @if (activeFile()?.link) {\n                <button\n                    kbq-button\n                    class=\"kbq-code-block__actionbar__link-button\"\n                    [attr.aria-label]=\"localeConfiguration().openExternalSystemTooltip\"\n                    [color]=\"componentColor.Contrast\"\n                    [kbqStyle]=\"buttonStyle.Transparent\"\n                    [kbqTooltip]=\"localeConfiguration().openExternalSystemTooltip\"\n                    (click)=\"openLink()\"\n                >\n                    <i kbq-icon=\"kbq-arrow-up-right-from-square_16\"></i>\n                </button>\n            }\n        </div>\n    </div>\n</div>\n\n<div\n    #tabPanel=\"kbqTabNavPanel\"\n    #codeBlockContent=\"kbqOverflowShadowContainer\"\n    cdkMonitorElementFocus\n    kbqOverflowShadowContainer\n    kbqScrollbarViewport\n    kbqTabNavPanel\n    class=\"kbq-code-block__main\"\n    tabindex=\"0\"\n    [style.max-height.px]=\"calculatedMaxHeight()\"\n>\n    @if (activeFile(); as file) {\n        <pre\n            #codeBlockPre\n            class=\"kbq-code-block__pre\"\n        ><code #codeBlockCode kbqCodeBlockHighlight class=\"kbq-code-block__code\" [file]=\"file\"></code></pre>\n    }\n\n    @if (contentExceedsMaxHeight()) {\n        <div\n            class=\"kbq-code-block__view-all\"\n            [class.kbq-code-block__view-all_collapsed]=\"!viewAll()\"\n            [class.kbq-code-block__view-all_expanded]=\"viewAll()\"\n        >\n            <div class=\"kbq-code-block__view-all__wrapper\">\n                <button\n                    kbq-button\n                    class=\"kbq-code-block__view-all__button\"\n                    [color]=\"componentColor.Theme\"\n                    [kbqStyle]=\"buttonStyle.Transparent\"\n                    (click)=\"toggleViewAll()\"\n                    (keydown.enter)=\"onViewAllEnterKeydown($event)\"\n                >\n                    @if (viewAll()) {\n                        <i kbq-icon=\"kbq-chevron-up_16\"></i>\n                        {{ localeConfiguration().viewLessText }}\n                    } @else {\n                        <i kbq-icon=\"kbq-chevron-down_16\"></i>\n                        {{ localeConfiguration().viewAllText }}\n                    }\n                </button>\n            </div>\n        </div>\n    }\n</div>\n", styles: [".kbq-code-block{display:flex;flex-direction:column;position:relative;border-width:var(--kbq-code-block-size-container-border-width);border-style:solid;border-radius:var(--kbq-code-block-size-container-border-radius)}@supports (corner-shape: squircle){.kbq-code-block{corner-shape:squircle;border-radius:clamp(var(--kbq-code-block-size-container-border-radius) * 1.85,var(--kbq-code-block-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-code-block-size-container-border-radius) * 2)}}.kbq-code-block{box-sizing:border-box;hyphens:none;-ms-hyphens:none;-moz-hyphens:none;-webkit-hyphens:none}.kbq-code-block .kbq-code-block__header{display:flex;align-items:center;padding:var(--kbq-size-s) var(--kbq-size-m)}.kbq-code-block .kbq-code-block__header .kbq-code-block__header-tabs{overflow:hidden;flex-grow:1}.kbq-code-block .kbq-code-block__actionbar{display:flex;justify-content:right;align-items:center;z-index:1}.kbq-code-block .kbq-code-block__actionbar .kbq-code-block__actionbar__button-stack{display:flex;gap:var(--kbq-code-block-size-actionbar-content-gap-horizontal)}.kbq-code-block:has(.kbq-code-block__view-all) .kbq-code-block__main .kbq-code-block__code{padding-bottom:calc(var(--kbq-size-3xl) + var(--kbq-code-block-size-collapse-expanded-padding-bottom))!important}.kbq-code-block .kbq-code-block__main{flex-grow:1;flex-direction:column;border-radius:var(--kbq-code-block-size-container-border-radius)}@supports (corner-shape: squircle){.kbq-code-block .kbq-code-block__main{corner-shape:squircle;border-radius:clamp(var(--kbq-code-block-size-container-border-radius) * 1.85,var(--kbq-code-block-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-code-block-size-container-border-radius) * 2)}}.kbq-code-block .kbq-code-block__main.cdk-keyboard-focused{outline-style:solid;outline-width:var(--kbq-code-block-size-container-border-width-focused);outline-offset:-1px}.kbq-code-block .kbq-code-block__main .kbq-code-block__pre{margin:0;flex-grow:1}.kbq-code-block .kbq-code-block__main .kbq-code-block__code{--kbq-code-block-line-numbers-gap: var(--kbq-code-block-size-with-header-content-content-gap-horizontal);tab-size:var(--kbq-code-block-tab-size);padding:var(--kbq-code-block-size-with-header-content-padding-top) var(--kbq-code-block-size-with-header-content-padding-horizontal) var(--kbq-code-block-size-with-header-content-padding-bottom) var(--kbq-code-block-size-with-header-content-padding-horizontal)}.kbq-code-block .kbq-code-block__main .kbq-code-block__code:focus-visible{outline:none}.kbq-code-block .kbq-code-block__main .hljs,.kbq-code-block .kbq-code-block__main .kbq-code-block__line{display:block}.kbq-code-block:not(.kbq-code-block_hide-line-numbers) .kbq-code-block__code_line-numbers{--kbq-code-block-line-numbers-width: calc(var(--kbq-code-block-line-numbers-digits) * 1ch);--kbq-code-block-line-numbers-indent: calc( var(--kbq-code-block-line-numbers-width) + var(--kbq-code-block-line-numbers-gap) );counter-reset:kbq-code-block-line var(--kbq-code-block-line-numbers-start)}.kbq-code-block:not(.kbq-code-block_hide-line-numbers) .kbq-code-block__code_line-numbers .kbq-code-block__line{counter-increment:kbq-code-block-line;padding-inline-start:var(--kbq-code-block-line-numbers-indent);text-indent:calc(var(--kbq-code-block-line-numbers-indent) * -1)}.kbq-code-block:not(.kbq-code-block_hide-line-numbers) .kbq-code-block__code_line-numbers .kbq-code-block__line:before{content:counter(kbq-code-block-line)/\"\";display:inline-block;width:var(--kbq-code-block-line-numbers-width);margin-inline-end:var(--kbq-code-block-line-numbers-gap);text-align:end;text-indent:0;white-space:nowrap}.kbq-code-block.kbq-code-block_soft-wrap .kbq-code-block__code{white-space:pre-wrap;overflow-wrap:anywhere}.kbq-code-block:not(.kbq-code-block_soft-wrap) .kbq-code-block__pre{width:max-content;min-width:100%}.kbq-code-block.kbq-code-block_view-all .kbq-code-block__main{max-height:unset;overflow:auto}.kbq-code-block:not(.kbq-code-block_view-all) .kbq-code-block__main{overflow:hidden}.kbq-code-block.kbq-code-block_hide-tabs{isolation:isolate}.kbq-code-block.kbq-code-block_hide-tabs .kbq-code-block__header{padding:0}.kbq-code-block.kbq-code-block_hide-tabs .kbq-code-block__actionbar{display:none;position:absolute;top:0;right:0;padding:var(--kbq-size-s) var(--kbq-size-s) 0 0;border-top-right-radius:var(--kbq-code-block-size-container-border-radius)}@supports (corner-shape: squircle){.kbq-code-block.kbq-code-block_hide-tabs .kbq-code-block__actionbar{corner-shape:squircle;border-top-right-radius:clamp(var(--kbq-code-block-size-container-border-radius) * 1.85,var(--kbq-code-block-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-code-block-size-container-border-radius) * 2)}}.kbq-code-block.kbq-code-block_hide-tabs .kbq-code-block__actionbar .kbq-code-block__actionbar__button-stack{border-width:1px;border-style:solid;border-radius:calc(var(--kbq-size-border-radius) + 1px)}@supports (corner-shape: squircle){.kbq-code-block.kbq-code-block_hide-tabs .kbq-code-block__actionbar .kbq-code-block__actionbar__button-stack{corner-shape:squircle;border-radius:clamp((var(--kbq-size-border-radius) + 1px) * 1.85,(var(--kbq-size-border-radius) + 1px) * 2.3 - 3.6px,(var(--kbq-size-border-radius) + 1px) * 2)}}.kbq-code-block.kbq-code-block_hide-tabs .kbq-code-block__main{position:relative;isolation:auto}.kbq-code-block.kbq-code-block_hide-tabs .kbq-code-block__main .kbq-code-block__code{--kbq-code-block-line-numbers-gap: var(--kbq-code-block-size-no-header-content-content-gap-horizontal);padding:var(--kbq-code-block-size-no-header-content-padding-vertical) var(--kbq-code-block-size-no-header-content-padding-horizontal)}.kbq-code-block:not(.kbq-code-block_hide-tabs) .kbq-code-block__header{border-radius:var(--kbq-code-block-size-container-border-radius) var(--kbq-code-block-size-container-border-radius) 0 0}@supports (corner-shape: squircle){.kbq-code-block:not(.kbq-code-block_hide-tabs) .kbq-code-block__header{corner-shape:squircle;border-radius:clamp(var(--kbq-code-block-size-container-border-radius) * 1.85,var(--kbq-code-block-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-code-block-size-container-border-radius) * 2) clamp(var(--kbq-code-block-size-container-border-radius) * 1.85,var(--kbq-code-block-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-code-block-size-container-border-radius) * 2) 0 0}}.kbq-code-block:not(.kbq-code-block_hide-tabs) .kbq-code-block__main{border-radius:0 0 var(--kbq-code-block-size-container-border-radius) var(--kbq-code-block-size-container-border-radius)}@supports (corner-shape: squircle){.kbq-code-block:not(.kbq-code-block_hide-tabs) .kbq-code-block__main{corner-shape:squircle;border-radius:0 0 clamp(var(--kbq-code-block-size-container-border-radius) * 1.85,var(--kbq-code-block-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-code-block-size-container-border-radius) * 2) clamp(var(--kbq-code-block-size-container-border-radius) * 1.85,var(--kbq-code-block-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-code-block-size-container-border-radius) * 2)}}.kbq-code-block.kbq-code-block_show-actionbar .kbq-code-block__actionbar{display:flex}.kbq-code-block:not(:has(.kbq-code-block__view-all)) .kbq-code-block__main{overflow:auto}.kbq-code-block .kbq-code-block__view-all{display:flex;justify-content:center;width:100%;position:absolute;bottom:calc(var(--kbq-code-block-size-container-border-width) * -1);border-radius:var(--kbq-code-block-size-container-border-radius)}@supports (corner-shape: squircle){.kbq-code-block .kbq-code-block__view-all{corner-shape:squircle;border-radius:clamp(var(--kbq-code-block-size-container-border-radius) * 1.85,var(--kbq-code-block-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-code-block-size-container-border-radius) * 2)}}.kbq-code-block .kbq-code-block__view-all .kbq-code-block__view-all__wrapper{border-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-code-block .kbq-code-block__view-all .kbq-code-block__view-all__wrapper{corner-shape:squircle;border-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-code-block .kbq-code-block__view-all.kbq-code-block__view-all_collapsed{padding-top:var(--kbq-code-block-size-collapse-collapsed-padding-top);padding-bottom:var(--kbq-code-block-size-collapse-collapsed-padding-bottom)}.kbq-code-block .kbq-code-block__view-all.kbq-code-block__view-all_expanded{padding-top:var(--kbq-code-block-size-collapse-expanded-padding-top);margin-bottom:var(--kbq-code-block-size-collapse-expanded-padding-bottom)}.kbq-code-block.kbq-code-block_no-border{border-color:transparent!important}.kbq-code-block .hljs-addition{background-color:var(--kbq-code-block-hljs-addition-background);color:var(--kbq-code-block-hljs-addition-color)}.kbq-code-block .hljs-attr{background-color:var(--kbq-code-block-hljs-attr-background);color:var(--kbq-code-block-hljs-attr-color)}.kbq-code-block .hljs-attribute{background-color:var(--kbq-code-block-hljs-attribute-background);color:var(--kbq-code-block-hljs-attribute-color)}.kbq-code-block .hljs-built_in{background-color:var(--kbq-code-block-hljs-built-in-background);color:var(--kbq-code-block-hljs-built-in-color)}.kbq-code-block .hljs-bullet{background-color:var(--kbq-code-block-hljs-bullet-background);color:var(--kbq-code-block-hljs-bullet-color)}.kbq-code-block .hljs-char-escape{background-color:var(--kbq-code-block-hljs-char-escape-background);color:var(--kbq-code-block-hljs-char-escape-color)}.kbq-code-block .hljs-class{background-color:var(--kbq-code-block-hljs-class-background);color:var(--kbq-code-block-hljs-class-color)}.kbq-code-block .hljs-code{background-color:var(--kbq-code-block-hljs-code-background);color:var(--kbq-code-block-hljs-code-color)}.kbq-code-block .hljs-comment{background-color:var(--kbq-code-block-hljs-comment-background);color:var(--kbq-code-block-hljs-comment-color)}.kbq-code-block .hljs-deletion{background-color:var(--kbq-code-block-hljs-deletion-background);color:var(--kbq-code-block-hljs-deletion-color)}.kbq-code-block .hljs-doctag{background-color:var(--kbq-code-block-hljs-doctag-background);color:var(--kbq-code-block-hljs-doctag-color)}.kbq-code-block .hljs-emphasis{background-color:var(--kbq-code-block-hljs-emphasis-background);color:var(--kbq-code-block-hljs-emphasis-color)}.kbq-code-block .hljs-formula{background-color:var(--kbq-code-block-hljs-formula-background);color:var(--kbq-code-block-hljs-formula-color)}.kbq-code-block .hljs-function{background-color:var(--kbq-code-block-hljs-function-background);color:var(--kbq-code-block-hljs-function-color)}.kbq-code-block .hljs-keyword{background-color:var(--kbq-code-block-hljs-keyword-background);color:var(--kbq-code-block-hljs-keyword-color)}.kbq-code-block .hljs-link{background-color:var(--kbq-code-block-hljs-link-background);color:var(--kbq-code-block-hljs-link-color)}.kbq-code-block .hljs-literal{background-color:var(--kbq-code-block-hljs-literal-background);color:var(--kbq-code-block-hljs-literal-color)}.kbq-code-block .hljs-meta{background-color:var(--kbq-code-block-hljs-meta-background);color:var(--kbq-code-block-hljs-meta-color)}.kbq-code-block .hljs-meta-keyword{background-color:var(--kbq-code-block-hljs-meta-keyword-background);color:var(--kbq-code-block-hljs-meta-keyword-color)}.kbq-code-block .hljs-meta-string{background-color:var(--kbq-code-block-hljs-meta-string-background);color:var(--kbq-code-block-hljs-meta-string-color)}.kbq-code-block .hljs-meta-prompt{background-color:var(--kbq-code-block-hljs-meta-prompt-background);color:var(--kbq-code-block-hljs-meta-prompt-color)}.kbq-code-block .hljs-name{background-color:var(--kbq-code-block-hljs-name-background);color:var(--kbq-code-block-hljs-name-color)}.kbq-code-block .hljs-number{background-color:var(--kbq-code-block-hljs-number-background);color:var(--kbq-code-block-hljs-number-color)}.kbq-code-block .hljs-operator{background-color:var(--kbq-code-block-hljs-operator-background);color:var(--kbq-code-block-hljs-operator-color)}.kbq-code-block .hljs-params{background-color:var(--kbq-code-block-hljs-params-background);color:var(--kbq-code-block-hljs-params-color)}.kbq-code-block .hljs-property{background-color:var(--kbq-code-block-hljs-property-background);color:var(--kbq-code-block-hljs-property-color)}.kbq-code-block .hljs-punctuation{background-color:var(--kbq-code-block-hljs-punctuation-background);color:var(--kbq-code-block-hljs-punctuation-color)}.kbq-code-block .hljs-quote{background-color:var(--kbq-code-block-hljs-quote-background);color:var(--kbq-code-block-hljs-quote-color)}.kbq-code-block .hljs-regexp{background-color:var(--kbq-code-block-hljs-regexp-background);color:var(--kbq-code-block-hljs-regexp-color)}.kbq-code-block .hljs-section{background-color:var(--kbq-code-block-hljs-section-background);color:var(--kbq-code-block-hljs-section-color)}.kbq-code-block .hljs-selector-attr{background-color:var(--kbq-code-block-hljs-selector-attr-background);color:var(--kbq-code-block-hljs-selector-attr-color)}.kbq-code-block .hljs-selector-class{background-color:var(--kbq-code-block-hljs-selector-class-background);color:var(--kbq-code-block-hljs-selector-class-color)}.kbq-code-block .hljs-selector-id{background-color:var(--kbq-code-block-hljs-selector-id-background);color:var(--kbq-code-block-hljs-selector-id-color)}.kbq-code-block .hljs-selector-pseudo{background-color:var(--kbq-code-block-hljs-selector-pseudo-background);color:var(--kbq-code-block-hljs-selector-pseudo-color)}.kbq-code-block .hljs-selector-tag{background-color:var(--kbq-code-block-hljs-selector-tag-background);color:var(--kbq-code-block-hljs-selector-tag-color)}.kbq-code-block .hljs-string{background-color:var(--kbq-code-block-hljs-string-background);color:var(--kbq-code-block-hljs-string-color)}.kbq-code-block .hljs-strong{background-color:var(--kbq-code-block-hljs-strong-background);color:var(--kbq-code-block-hljs-strong-color)}.kbq-code-block .hljs-subst{background-color:var(--kbq-code-block-hljs-subst-background);color:var(--kbq-code-block-hljs-subst-color)}.kbq-code-block .hljs-symbol{background-color:var(--kbq-code-block-hljs-symbol-background);color:var(--kbq-code-block-hljs-symbol-color)}.kbq-code-block .hljs-tag{background-color:var(--kbq-code-block-hljs-tag-background);color:var(--kbq-code-block-hljs-tag-color)}.kbq-code-block .hljs-template-tag{background-color:var(--kbq-code-block-hljs-template-tag-background);color:var(--kbq-code-block-hljs-template-tag-color)}.kbq-code-block .hljs-template-variable{background-color:var(--kbq-code-block-hljs-template-variable-background);color:var(--kbq-code-block-hljs-template-variable-color)}.kbq-code-block .hljs-title{background-color:var(--kbq-code-block-hljs-title-background);color:var(--kbq-code-block-hljs-title-color)}.kbq-code-block .hljs-title-class{background-color:var(--kbq-code-block-hljs-title-class-background);color:var(--kbq-code-block-hljs-title-class-color)}.kbq-code-block .hljs-title-class-inherited{background-color:var(--kbq-code-block-hljs-title-class-inherited-background);color:var(--kbq-code-block-hljs-title-class-inherited-color)}.kbq-code-block .hljs-title-function{background-color:var(--kbq-code-block-hljs-title-function-background);color:var(--kbq-code-block-hljs-title-function-color)}.kbq-code-block .hljs-title-function-invoke{background-color:var(--kbq-code-block-hljs-title-function-invoke-background);color:var(--kbq-code-block-hljs-title-function-invoke-color)}.kbq-code-block .hljs-type{background-color:var(--kbq-code-block-hljs-type-background);color:var(--kbq-code-block-hljs-type-color)}.kbq-code-block .hljs-variable{background-color:var(--kbq-code-block-hljs-variable-background);color:var(--kbq-code-block-hljs-variable-color)}.kbq-code-block .hljs-variable-constant{background-color:var(--kbq-code-block-hljs-variable-constant-background);color:var(--kbq-code-block-hljs-variable-constant-color)}.kbq-code-block .hljs-variable-language{background-color:var(--kbq-code-block-hljs-variable-language-background);color:var(--kbq-code-block-hljs-variable-language-color)}.kbq-code-block .kbq-code-block__line:before{color:var(--kbq-code-block-hljs-line-numbers-color)}.kbq-code-block.kbq-code-block_outline{background:var(--kbq-code-block-outline-container-background);border-color:var(--kbq-code-block-outline-container-border-color)}.kbq-code-block.kbq-code-block_outline .kbq-code-block__header{background:var(--kbq-code-block-outline-header-background)}.kbq-code-block.kbq-code-block_outline.kbq-code-block_hide-tabs .kbq-code-block__actionbar{background:var(--kbq-code-block-outline-actionbar-plate-background)}.kbq-code-block.kbq-code-block_outline.kbq-code-block_hide-tabs .kbq-code-block__actionbar .kbq-code-block__actionbar__button-stack{border-color:var(--kbq-code-block-outline-actionbar-border-color);background:var(--kbq-code-block-outline-actionbar-background)}.kbq-code-block.kbq-code-block_outline .kbq-code-block__view-all.kbq-code-block__view-all_expanded{background:var(--kbq-code-block-outline-collapse-expanded-background)}.kbq-code-block.kbq-code-block_outline .kbq-code-block__view-all.kbq-code-block__view-all_collapsed{background:var(--kbq-code-block-outline-collapse-collapsed-background)}.kbq-code-block.kbq-code-block_outline .kbq-code-block__view-all.kbq-code-block__view-all_collapsed .kbq-code-block__view-all__wrapper{background:color-mix(in srgb,var(--kbq-code-block-outline-collapse-button-expand-background) 90%,transparent)}.kbq-code-block.kbq-code-block_filled{background:var(--kbq-code-block-filled-container-background);border-color:var(--kbq-code-block-filled-container-border-color)}.kbq-code-block.kbq-code-block_filled .kbq-code-block__header{background:var(--kbq-code-block-filled-header-background)}.kbq-code-block.kbq-code-block_filled.kbq-code-block_hide-tabs .kbq-code-block__actionbar{background:var(--kbq-code-block-filled-actionbar-plate-background)}.kbq-code-block.kbq-code-block_filled.kbq-code-block_hide-tabs .kbq-code-block__actionbar .kbq-code-block__actionbar__button-stack{border-color:var(--kbq-code-block-filled-actionbar-border-color);background:var(--kbq-code-block-filled-actionbar-background)}.kbq-code-block.kbq-code-block_filled .kbq-code-block__view-all.kbq-code-block__view-all_expanded{background:var(--kbq-code-block-filled-collapse-expanded-background)}.kbq-code-block.kbq-code-block_filled .kbq-code-block__view-all.kbq-code-block__view-all_collapsed{background:var(--kbq-code-block-filled-collapse-collapsed-background)}.kbq-code-block.kbq-code-block_filled .kbq-code-block__view-all.kbq-code-block__view-all_collapsed .kbq-code-block__view-all__wrapper{background:color-mix(in srgb,var(--kbq-code-block-filled-collapse-button-expand-background) 90%,transparent)}.kbq-code-block .kbq-code-block__main.cdk-keyboard-focused{outline-color:var(--kbq-states-line-focus-theme)}.kbq-code-block{font-size:var(--kbq-typography-mono-codeblock-font-size);font-style:var(--kbq-typography-mono-codeblock-font-style);font-weight:var(--kbq-typography-mono-codeblock-font-weight);line-height:var(--kbq-typography-mono-codeblock-line-height);font-family:var(--kbq-typography-mono-codeblock-font-family);text-transform:var(--kbq-typography-mono-codeblock-text-transform);font-feature-settings:var(--kbq-typography-mono-codeblock-font-feature-settings);letter-spacing:var(--kbq-typography-mono-codeblock-letter-spacing)}.kbq-code-block .kbq-code-block__pre,.kbq-code-block .kbq-code-block__code{font:inherit}\n", ".kbq-code-block{--kbq-code-block-size-container-border-width: var(--kbq-size-border-width);--kbq-code-block-size-container-border-width-focused: 2px;--kbq-code-block-size-container-border-radius: var(--kbq-size-border-radius);--kbq-code-block-size-with-header-content-padding-top: var(--kbq-size-xxs);--kbq-code-block-size-with-header-content-padding-bottom: var(--kbq-size-l);--kbq-code-block-size-with-header-content-padding-horizontal: var(--kbq-size-xl);--kbq-code-block-size-with-header-content-content-gap-horizontal: var(--kbq-size-m);--kbq-code-block-size-no-header-content-padding-vertical: 14px;--kbq-code-block-size-no-header-content-padding-horizontal: var(--kbq-size-xl);--kbq-code-block-size-no-header-content-content-gap-horizontal: var(--kbq-size-m);--kbq-code-block-size-header-content-gap-horizontal: var(--kbq-size-l);--kbq-code-block-size-actionbar-content-gap-horizontal: var(--kbq-size-3xs);--kbq-code-block-size-collapse-expanded-padding-top: 0;--kbq-code-block-size-collapse-expanded-padding-bottom: var(--kbq-size-l);--kbq-code-block-size-collapse-collapsed-padding-top: var(--kbq-size-3xl);--kbq-code-block-size-collapse-collapsed-padding-bottom: var(--kbq-size-l);--kbq-code-block-filled-container-background: var(--kbq-background-contrast-less);--kbq-code-block-filled-container-border-color: transparent;--kbq-code-block-filled-header-background: transparent;--kbq-code-block-filled-actionbar-background: var(--kbq-background-card);--kbq-code-block-filled-actionbar-border-color: var(--kbq-line-contrast-less);--kbq-code-block-filled-actionbar-plate-background: var(--kbq-background-bg-tertiary);--kbq-code-block-filled-collapse-expanded-background: transparent;--kbq-code-block-filled-collapse-collapsed-background: linear-gradient( 180deg, transparent, var(--kbq-background-bg-tertiary) 100% );--kbq-code-block-filled-collapse-button-expand-background: var(--kbq-background-bg-tertiary);--kbq-code-block-outline-container-background: var(--kbq-background-card);--kbq-code-block-outline-container-border-color: var(--kbq-divider-color, var(--kbq-line-contrast-less));--kbq-code-block-outline-header-background: var(--kbq-background-card);--kbq-code-block-outline-actionbar-background: var(--kbq-background-card);--kbq-code-block-outline-actionbar-border-color: var(--kbq-line-contrast-less);--kbq-code-block-outline-actionbar-plate-background: var(--kbq-code-block-outline-container-background);--kbq-code-block-outline-collapse-expanded-background: transparent;--kbq-code-block-outline-collapse-collapsed-background: linear-gradient( 180deg, transparent, var(--kbq-code-block-outline-container-background) 100% );--kbq-code-block-outline-collapse-button-expand-background: var(--kbq-background-bg);--kbq-code-block-tab-size: 4}\n"] }]
         }], ctorParameters: () => [], propDecorators: { copyButtonTooltip: [{ type: i0.ViewChild, args: ['copyButtonTooltip', { isSignal: true }] }], highlight: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqCodeBlockHighlight), { isSignal: true }] }], scrollbarViewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqScrollbarViewport), { isSignal: true }] }], preElementRef: [{ type: i0.ViewChild, args: ['codeBlockPre', { isSignal: true }] }], codeElementRef: [{ type: i0.ViewChild, args: ['codeBlockCode', { isSignal: true }] }], tabLinkTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqCodeBlockTabLinkContent), { ...{ read: TemplateRef }, isSignal: true }] }], lineNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineNumbers", required: false }] }], filled: [{ type: i0.Input, args: [{ isSignal: true, alias: "filled", required: false }] }], canToggleSoftWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "canToggleSoftWrap", required: false }] }], softWrapInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "softWrap", required: false }] }], softWrapChange: [{ type: i0.Output, args: ["softWrapChange"] }], viewAllInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewAll", required: false }] }], viewAllChange: [{ type: i0.Output, args: ["viewAllChange"] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], canDownloadInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDownload", required: false }] }], canCopy: [{ type: i0.Input, args: [{ isSignal: true, alias: "canCopy", required: false }] }], alwaysShowActionbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "alwaysShowActionbar", required: false }] }], filesInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }], activeFileIndexInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeFileIndex", required: false }] }], activeFileIndexChange: [{ type: i0.Output, args: ["activeFileIndexChange"] }], noBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "noBorder", required: false }] }], hideTabsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideTabs", required: false }] }], hideTabsChange: [{ type: i0.Output, args: ["hideTabsChange"] }] } });
 
 const COMPONENTS = [