@koobiq/components 20.4.1 → 21.0.0

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

@@ -1,27 +1,448 @@
-import * as i3 from '@angular/cdk/a11y';
+import * as i4 from '@angular/cdk/a11y';
 import { FocusMonitor, A11yModule } from '@angular/cdk/a11y';
 import { Clipboard } from '@angular/cdk/clipboard';
 import { SharedResizeObserver } from '@angular/cdk/observers/private';
 import { Platform } from '@angular/cdk/platform';
-import * as i4 from '@angular/cdk/scrolling';
-import { CdkScrollable, CdkScrollableModule } from '@angular/cdk/scrolling';
 import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Renderer2, signal, input, numberAttribute, booleanAttribute, SecurityContext, isDevMode, Input, Directive, viewChild, output, ElementRef, Injector, ChangeDetectorRef, DestroyRef, computed, effect, TemplateRef, ContentChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } 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 { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { DomSanitizer } from '@angular/platform-browser';
-import * as i2 from '@koobiq/components/button';
+import * as i3 from '@koobiq/components/button';
 import { KbqButtonStyles, KbqButtonModule } from '@koobiq/components/button';
-import { kbqInjectNativeElement, KBQ_WINDOW, ruRULocaleData, KbqComponentColors, KBQ_LOCALE_SERVICE, KbqOverflowShadowContainer, KbqOverflowShadowTop } from '@koobiq/components/core';
+import * as i1 from '@koobiq/components/core';
+import { KBQ_WINDOW, kbqInjectNativeElement, ruRULocaleData, kbqLocaleConfigurationOverrideProvider, kbqOptionalNumberAttribute, KbqLocaleOverridesDirective, KbqComponentColors, KbqOverflowShadowContainer, KbqOverflowShadowTop } from '@koobiq/components/core';
 import * as i6 from '@koobiq/components/icon';
 import { KbqIconModule } from '@koobiq/components/icon';
-import * as i1 from '@koobiq/components/tabs';
+import { KbqScrollbarViewport } from '@koobiq/components/scrollbar';
+import * as i2 from '@koobiq/components/tabs';
 import { KbqTabsModule } from '@koobiq/components/tabs';
 import * as i5 from '@koobiq/components/tooltip';
 import { KbqToolTipModule } from '@koobiq/components/tooltip';
-import { filter, take, merge, fromEvent, map, debounceTime } from 'rxjs';
+import { take, merge, fromEvent, map, debounceTime, filter } from 'rxjs';
+
+/**
+ * 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
+ *
+ * @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 = {};
+/**
+ * Loads highlight.js once per configuration and installs its line numbers plugin once per application.
+ *
+ * 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,
+ * so the code blocks under one provider share one load.
+ *
+ * @internal
+ */
+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) {
+        return this.instances.get(config ?? DEFAULT_CONFIG) ?? null;
+    }
+    /**
+     * Loads highlight.js for `config`, sharing the load in flight. A failure resolves to `null` rather than rejecting,
+     * since the callers have nowhere to send a rejection, and is forgotten, so that the next file change tries again.
+     */
+    load(config) {
+        const key = config ?? DEFAULT_CONFIG;
+        let loading = this.loads.get(key);
+        if (!loading) {
+            loading = this.importInstance(key).then((instance) => {
+                this.instances.set(key, instance);
+                return instance;
+            }, (error) => {
+                this.loads.delete(key);
+                if (isDevMode()) {
+                    // eslint-disable-next-line no-console
+                    console.warn('[KbqCodeBlock] Failed to load highlight.js.', error);
+                }
+                return null;
+            });
+            this.loads.set(key, loading);
+        }
+        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);
+            }));
+        }
+        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' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqCodeBlockHighlightJsLoader, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 /**
  * Injection token for configuring `KbqCodeBlockHighlightJsConfig`.
  */
@@ -50,8 +471,7 @@ const kbqCodeBlockHighlightJsConfigProvider = (options) => ({
 /**
  * Fallback language for code block if language is not supported/specified.
  *
- * List of supported languages:
- * @link https://highlightjs.readthedocs.io/en/stable/supported-languages.html
+ * See the [list of supported languages](https://highlightjs.readthedocs.io/en/stable/supported-languages.html).
  */
 const KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE = new InjectionToken('KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE', { factory: () => 'plaintext' });
 /** Utility provider for `KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE`. */
@@ -59,6 +479,12 @@ const kbqCodeBlockFallbackFileLanguageProvider = (language) => ({
     provide: KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE,
     useValue: language
 });
+/**
+ * Marks the markup the directive has highlighted. Found while highlight.js has yet to load, it can only have come
+ * from the server: once the browser has highlighted a file, highlight.js stays loaded. Not `data-highlighted`, which
+ * highlight.js sets on the elements it highlights itself.
+ */
+const HIGHLIGHTED_MARKUP_ATTRIBUTE = 'data-highlighted-markup';
 /**
  * Directive which applies syntax highlighting to the code block content.
  *
@@ -67,55 +493,77 @@ const kbqCodeBlockFallbackFileLanguageProvider = (language) => ({
 class KbqCodeBlockHighlight {
     constructor() {
         this.nativeElement = kbqInjectNativeElement();
-        this.document = inject(DOCUMENT);
         this.renderer = inject(Renderer2);
         this.domSanitizer = inject(DomSanitizer);
+        this.pendingTasks = inject(PendingTasks);
+        this.loader = inject(KbqCodeBlockHighlightJsLoader);
         this.fallbackFileLanguage = inject(KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE);
-        this.window = inject(KBQ_WINDOW);
+        // Read here and handed to the loader: a component or a route may provide a configuration of its own.
         this.config = inject(KBQ_CODE_BLOCK_HIGHLIGHT_JS_CONFIG, { optional: true });
-        this.hljs = null;
-        this._pending = signal(false, ...(ngDevMode ? [{ debugName: "_pending" }] : []));
+        this._pending = signal(false, ...(ngDevMode ? [{ debugName: "_pending" }] : /* istanbul ignore next */ []));
         /**
          * Whether syntax highlighting is pending.
          *
          * @docs-private
          */
         this.pending = this._pending.asReadonly();
+        /** The code file. */
+        this.file = input.required(...(ngDevMode ? [{ debugName: "file" }] : /* istanbul ignore next */ []));
         /** The starting line number. */
-        this.startFrom = input(1, ...(ngDevMode ? [{ debugName: "startFrom", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        this.startFrom = input(1, { ...(ngDevMode ? { debugName: "startFrom" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         /** Whether to display line numbers for single line code block. */
-        this.singleLine = input(false, ...(ngDevMode ? [{ debugName: "singleLine", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    }
-    /** The code file. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    set file(file) {
-        if (!this.window)
-            return;
-        if (!this.hljs) {
-            this.load(this.config ?? {}).then(() => this.highlight(file));
-        }
-        else {
-            this.highlight(file);
-        }
-    }
-    async load({ core, languages }) {
-        this._pending.set(true);
-        const loader = core ?? defaultHljsLoader;
-        const { default: instance } = await loader();
-        if (languages) {
-            await Promise.all(Object.entries(languages).map(async ([name, loader]) => {
-                const { default: language } = await loader();
-                instance.registerLanguage(name, language);
-            }));
-        }
-        this.hljs = instance;
-        this.initLineNumbersPlugin(instance);
+        this.singleLine = input(false, { ...(ngDevMode ? { debugName: "singleLine" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        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);
+                return;
+            }
+            // The template leaves `<code>` empty, so that hydration does not look for a text node the highlighted
+            // markup has replaced. The plain content stands in until highlighting lands, and for good if it fails.
+            const keepsServerMarkup = this.nativeElement.hasAttribute(HIGHLIGHTED_MARKUP_ATTRIBUTE);
+            if (keepsServerMarkup) {
+                // Markup from the server stays instead, rather than flash plain text over code that arrived
+                // highlighted. Once: the file of a later run is not the one it was rendered for.
+                this.renderer.removeAttribute(this.nativeElement, HIGHLIGHTED_MARKUP_ATTRIBUTE);
+            }
+            else {
+                this.renderer.setProperty(this.nativeElement, 'textContent', file.content);
+                this.renderer.removeAttribute(this.nativeElement, 'data-language');
+            }
+            // A `file` that arrives while highlight.js is still loading must not be overwritten by the previous
+            // one, and nothing may be highlighted through a directive that has gone away in the meantime.
+            let cancelled = false;
+            onCleanup(() => (cancelled = true));
+            // `pending` holds the code block until the load settles, failed or not. A block with nothing highlighted to
+            // show holds the application as well, so that server rendering and tests wait for the highlighted markup.
+            // Markup kept from the server needs no task: it would keep a hydrated page unstable, and Angular replays
+            // what a reader did before hydration only once the page is stable.
+            this._pending.set(true);
+            const removeTask = keepsServerMarkup ? null : this.pendingTasks.add();
+            this.loader
+                .load(this.config)
+                .then((loaded) => {
+                if (loaded && !cancelled)
+                    this.highlight(loaded, file, lineNumbers);
+            })
+                .finally(() => {
+                // A run cancelled by a newer file leaves `pending` to that one.
+                if (!cancelled)
+                    this._pending.set(false);
+                removeTask?.();
+            });
+        });
     }
-    highlight(file) {
+    highlight(hljs, file, lineNumbers) {
         this._pending.set(true);
         let { language } = file;
-        const isKnownLanguage = !!language && !!this.hljs.getLanguage(language);
+        const isKnownLanguage = !!language && !!hljs.getLanguage(language);
         if (!language || !isKnownLanguage) {
             // A file without a language is plain text by design; only a language the core lacks is a mistake.
             if (language) {
@@ -123,7 +571,7 @@ class KbqCodeBlockHighlight {
             }
             language = this.fallbackFileLanguage;
         }
-        const { value: highlightedHTML, language: highlightedLanguage, illegal, relevance } = this.hljs.highlight(file.content, { language });
+        const { value: highlightedHTML, language: highlightedLanguage, illegal, relevance } = hljs.highlight(file.content, { language });
         if (illegal) {
             this.warn('[KbqCodeBlock] File content contains illegal characters.', file);
         }
@@ -131,13 +579,11 @@ class KbqCodeBlockHighlight {
         if (relevance === 0 && isKnownLanguage && highlightedLanguage !== 'plaintext') {
             this.warn('[KbqCodeBlock] File content does not match the specified programming language.', file);
         }
-        const safeHTML = this.domSanitizer.sanitize(SecurityContext.HTML, highlightedHTML);
-        const highlightedHTMLWithLineNumbers = this.window['hljs'].lineNumbersValue(safeHTML, {
-            startFrom: this.startFrom(),
-            singleLine: this.singleLine()
-        });
+        const safeHTML = this.domSanitizer.sanitize(SecurityContext.HTML, highlightedHTML) ?? '';
+        const highlightedHTMLWithLineNumbers = this.loader.addLineNumbers(safeHTML, lineNumbers);
         this.renderer.setAttribute(this.nativeElement, 'data-language', highlightedLanguage);
         this.renderer.setProperty(this.nativeElement, 'innerHTML', highlightedHTMLWithLineNumbers);
+        this.renderer.setAttribute(this.nativeElement, HIGHLIGHTED_MARKUP_ATTRIBUTE, '');
         this._pending.set(false);
     }
     warn(...messages) {
@@ -146,340 +592,10 @@ class KbqCodeBlockHighlight {
         // eslint-disable-next-line no-console
         console.warn(...messages);
     }
-    /** Initialize the HighlightJS line numbers plugin after the hljs instance is available. */
-    initLineNumbersPlugin(instance) {
-        if (!this.window)
-            return;
-        this.window['hljs'] = instance;
-        this.highlightJSLineNumbersPlugin(this.document, this.window);
-    }
-    /**
-     * This method 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
-     */
-    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;
-        }
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqCodeBlockHighlight, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.30", type: KbqCodeBlockHighlight, isStandalone: true, selector: "code[kbqCodeBlockHighlight]", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: false, 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.ɵ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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqCodeBlockHighlight, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqCodeBlockHighlight, decorators: [{
             type: Directive,
             args: [{
                     selector: 'code[kbqCodeBlockHighlight]',
@@ -488,18 +604,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                     },
                     exportAs: 'kbqCodeBlockHighlight'
                 }]
-        }], propDecorators: { file: [{
-                type: Input,
-                args: [{ required: true }]
-            }], startFrom: [{ type: i0.Input, args: [{ isSignal: true, alias: "startFrom", required: false }] }], singleLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleLine", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: true }] }], startFrom: [{ type: i0.Input, args: [{ isSignal: true, alias: "startFrom", required: false }] }], singleLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleLine", required: false }] }] } });
 
 /** Localization configuration provider. */
-const KBQ_CODE_BLOCK_LOCALE_CONFIGURATION = new InjectionToken('KBQ_CODE_BLOCK_LOCALE_CONFIGURATION', { factory: () => ruRULocaleData.codeBlock });
-/** Utility provider for `KBQ_CODE_BLOCK_LOCALE_CONFIGURATION`. */
-const kbqCodeBlockLocaleConfigurationProvider = (configuration) => ({
-    provide: KBQ_CODE_BLOCK_LOCALE_CONFIGURATION,
-    useValue: configuration
-});
+const KBQ_CODE_BLOCK_LOCALE_CONFIGURATION = new InjectionToken('KbqCodeBlockLocaleConfiguration', { factory: () => ruRULocaleData.codeBlock });
+/**
+ * Utility provider for `KBQ_CODE_BLOCK_LOCALE_CONFIGURATION`. Only the strings you pass are overridden;
+ * the rest keep following the active locale.
+ */
+const kbqCodeBlockLocaleConfigurationProvider = (configuration) => kbqLocaleConfigurationOverrideProvider('codeBlock', configuration);
 /** Fallback file name for code block if file name is not specified. */
 const KBQ_CODE_BLOCK_FALLBACK_FILE_NAME = new InjectionToken('KBQ_CODE_BLOCK_FALLBACK_FILE_NAME', {
     factory: () => 'code'
@@ -518,10 +631,10 @@ const kbqCodeBlockDefaultOptionsProvider = (options) => ({
 });
 /** Marks a template as a custom tab link. */
 class KbqCodeBlockTabLinkContent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqCodeBlockTabLinkContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqCodeBlockTabLinkContent, isStandalone: true, selector: "ng-template[kbqCodeBlockTabLinkContent]", exportAs: ["kbqCodeBlockTabLinkContent"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqCodeBlockTabLinkContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqCodeBlockTabLinkContent, isStandalone: true, selector: "ng-template[kbqCodeBlockTabLinkContent]", exportAs: ["kbqCodeBlockTabLinkContent"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqCodeBlockTabLinkContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqCodeBlockTabLinkContent, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[kbqCodeBlockTabLinkContent]',
@@ -533,128 +646,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
  */
 class KbqCodeBlock {
     /**
-     * @docs-private
-     */
-    get calculatedMaxHeight() {
-        return this.maxHeight() > 0 && !this.viewAll ? this.maxHeight() : null;
-    }
-    /**
-     * @deprecated Will be removed in next major release, use `canDownload` instead.
-     *
-     * @docs-private
-     */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    set canLoad(value) {
-        this.canDownload = value;
-    }
-    /**
-     * @deprecated Will be removed in next major release, use `files` instead.
-     */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    set codeFiles(files) {
-        this.files = files;
-    }
-    /**
-     * @TODO Mark as `required`, after removing `codeFiles`
-     *
-     * Files to display.
-     */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get files() {
-        return this._files;
-    }
-    set files(files) {
-        this._files = files;
-        if (this._files.length < this.activeFileIndex) {
-            this.onSelectedTabChange(0);
-        }
-        if (this._files.length === 1 && !this._files[0].filename) {
-            this.hideTabs = true;
-        }
-    }
-    /**
-     * Whether to hide header tabs.
-     * Always `true` if there is only one file without filename.
-     * Makes actionbar floating if tabs are hidden.
-     */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get hideTabs() {
-        return this._hideTabs();
-    }
-    set hideTabs(value) {
-        this._hideTabs.set(value);
-        this.hideTabsChange.emit(value);
-    }
-    /**
-     * Component locale configuration.
-     *
-     * @docs-private
-     */
-    get localeConfiguration() {
-        return this._localeConfiguration;
-    }
-    /**
-     * Code content tab index.
-     *
-     * @docs-private
-     */
-    get codeContentTabIndex() {
-        return this.canCodeContentBeFocused ? 0 : -1;
-    }
-    /**
-     * Determines whether the code content can be focused.
-     *
-     * This checks if the scrollable code content element is present,
-     * has a scroll, and the calculated maximum height is not set.
+     * Whether the code content scrolls while nothing collapses it, which leaves keyboard users a way to scroll it.
+     * Collapsed under `maxHeight` it is clipped instead, and the "view all" button is the way in.
      */
     get canCodeContentBeFocused() {
-        if (!this.platform.isBrowser)
-            return false;
-        const element = this.scrollableCodeContent()?.getElementRef().nativeElement;
-        return element && this.hasScroll(element) && !this.calculatedMaxHeight;
+        return !this.calculatedMaxHeight() && this.hasScroll(this.scrollbarViewport().getNativeElement());
     }
     constructor() {
-        this.copyButtonTooltip = viewChild('copyButtonTooltip', ...(ngDevMode ? [{ debugName: "copyButtonTooltip" }] : []));
+        this.copyButtonTooltip = viewChild('copyButtonTooltip', ...(ngDevMode ? [{ debugName: "copyButtonTooltip" }] : /* istanbul ignore next */ []));
         this.defaultOptions = inject(KBQ_CODE_BLOCK_DEFAULT_OPTIONS, { optional: true });
+        this.highlight = viewChild(KbqCodeBlockHighlight, ...(ngDevMode ? [{ debugName: "highlight" }] : /* istanbul ignore next */ []));
+        this.scrollbarViewport = viewChild.required(KbqScrollbarViewport);
+        this.preElementRef = viewChild('codeBlockPre', ...(ngDevMode ? [{ debugName: "preElementRef" }] : /* istanbul ignore next */ []));
+        this.codeElementRef = viewChild('codeBlockCode', ...(ngDevMode ? [{ debugName: "codeElementRef" }] : /* istanbul ignore next */ []));
         /**
-         * Reference to the scrollable code content.
-         *
-         * @deprecated Use `scrollTo` method instead, will be removed from public API (mark as private) in the next major release.
+         * Whether the code runs past `maxHeight`, or `undefined` until the browser has measured it. The server
+         * never measures, and its markup keeps the limit so that a block hydrated later holds its height.
          *
          * @docs-private
          */
-        this.scrollableCodeContent = viewChild.required(CdkScrollable);
+        this.contentExceedsMaxHeight = signal(undefined, ...(ngDevMode ? [{ debugName: "contentExceedsMaxHeight" }] : /* istanbul ignore next */ []));
         /** @docs-private */
-        this.highlight = viewChild.required(KbqCodeBlockHighlight);
-        /** @docs-private */
-        this.preElementRef = viewChild.required('codeBlockPre');
-        /** @docs-private */
-        this.contentExceedsMaxHeight = signal(false, ...(ngDevMode ? [{ debugName: "contentExceedsMaxHeight" }] : []));
+        this.tabLinkTemplate = contentChild(KbqCodeBlockTabLinkContent, { ...(ngDevMode ? { debugName: "tabLinkTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         /** Whether to display line numbers. */
-        this.lineNumbers = input(false, ...(ngDevMode ? [{ debugName: "lineNumbers", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.lineNumbers = input(false, { ...(ngDevMode ? { debugName: "lineNumbers" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Whether the code block should be filled. */
-        this.filled = input(false, ...(ngDevMode ? [{ debugName: "filled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.filled = input(false, { ...(ngDevMode ? { debugName: "filled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Added soft wrap toggle button.  */
-        this.canToggleSoftWrap = input(false, ...(ngDevMode ? [{ debugName: "canToggleSoftWrap", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.canToggleSoftWrap = input(false, { ...(ngDevMode ? { debugName: "canToggleSoftWrap" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Backing input of `softWrap`. Bind through the `softWrap` attribute; read and write the signal.
+         *
+         * `model()` cannot carry the `booleanAttribute` transform a valueless attribute needs, and an input
+         * is read-only while `toggleSoftWrap()` writes this as well as the binding - hence the pair.
+         *
+         * @docs-private
+         */
+        this.softWrapInput = input(false, { ...(ngDevMode ? { debugName: "softWrapInput" } : /* istanbul ignore next */ {}), alias: 'softWrap', transform: booleanAttribute });
         /** Whether sequences of whitespace should be preserved. */
-        // TODO: Skipped for migration because:
-        //  Your application code writes to the input. This prevents migration.
-        this.softWrap = false;
+        this.softWrap = linkedSignal(() => this.softWrapInput(), ...(ngDevMode ? [{ debugName: "softWrap" }] : /* istanbul ignore next */ []));
         /**
          * Output to support two-way binding on `[(softWrap)]` property.
          */
         this.softWrapChange = output();
+        /**
+         * Backing input of `viewAll`, in the same shape as `softWrapInput`.
+         *
+         * @docs-private
+         */
+        this.viewAllInput = input(false, { ...(ngDevMode ? { debugName: "viewAllInput" } : /* istanbul ignore next */ {}), alias: 'viewAll', transform: booleanAttribute });
         /**
          * Allows to view all the code, otherwise it will be hidden.
          * Works only with `maxHeight` property.
          */
-        // TODO: Skipped for migration because:
-        //  Your application code writes to the input. This prevents migration.
-        this.viewAll = false;
+        this.viewAll = linkedSignal(() => this.viewAllInput(), ...(ngDevMode ? [{ debugName: "viewAll" }] : /* istanbul ignore next */ []));
         /**
          * Output to support two-way binding on `[(viewAll)]` property.
          */
@@ -663,35 +708,111 @@ class KbqCodeBlock {
          * Maximum height of the code block content, other parts will be hidden.
          * Can be toggled by `viewAll` property.
          */
-        this.maxHeight = input(undefined, ...(ngDevMode ? [{ debugName: "maxHeight", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        this.maxHeight = input(undefined, { ...(ngDevMode ? { debugName: "maxHeight" } : /* istanbul ignore next */ {}), transform: kbqOptionalNumberAttribute });
+        /**
+         * @docs-private
+         */
+        this.calculatedMaxHeight = computed(() => {
+            const maxHeight = this.maxHeight();
+            // Code that fits is left at its natural height: clipped at the limit it would scroll by its own
+            // bottom padding, with nothing hidden to reveal and no "view all" button to reveal it.
+            return maxHeight && maxHeight > 0 && !this.viewAll() && this.contentExceedsMaxHeight() !== false
+                ? maxHeight
+                : null;
+        }, ...(ngDevMode ? [{ debugName: "calculatedMaxHeight" }] : /* istanbul ignore next */ []));
+        /**
+         * Backing input of `canDownload`.
+         *
+         * @docs-private
+         */
+        this.canDownloadInput = input(false, { ...(ngDevMode ? { debugName: "canDownloadInput" } : /* istanbul ignore next */ {}), alias: 'canDownload', transform: booleanAttribute });
         /** Added download code button. */
-        // TODO: Skipped for migration because:
-        //  Your application code writes to the input. This prevents migration.
-        this.canDownload = false;
+        this.canDownload = linkedSignal(() => this.canDownloadInput(), ...(ngDevMode ? [{ debugName: "canDownload" }] : /* istanbul ignore next */ []));
         /** Added copy code button. */
-        this.canCopy = input(true, ...(ngDevMode ? [{ debugName: "canCopy", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.canCopy = input(true, { ...(ngDevMode ? { debugName: "canCopy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Whether the actionbar should remain visible when tabs are hidden. */
-        this.alwaysShowActionbar = input(this.defaultOptions?.alwaysShowActionbar ?? false, ...(ngDevMode ? [{ debugName: "alwaysShowActionbar", transform: booleanAttribute }] : [{
-                transform: booleanAttribute
-            }]));
-        this._files = [];
+        this.alwaysShowActionbar = input(this.defaultOptions?.alwaysShowActionbar ?? false, { ...(ngDevMode ? { debugName: "alwaysShowActionbar" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Backing input of `files`.
+         *
+         * @docs-private
+         */
+        this.filesInput = input([], { ...(ngDevMode ? { debugName: "filesInput" } : /* istanbul ignore next */ {}), alias: 'files' });
+        /** Files to display. */
+        // TODO: mark as `required`.
+        this.files = linkedSignal(() => this.filesInput(), ...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
+        /**
+         * Backing input of `activeFileIndex`. `numberAttribute` yields NaN for anything not cleanly numeric,
+         * and an unbound `index?: number` reaches it as `undefined`, so the transform floors both at 0 rather
+         * than letting NaN through a signal typed `number`.
+         *
+         * @docs-private
+         */
+        this.activeFileIndexInput = input(0, { ...(ngDevMode ? { debugName: "activeFileIndexInput" } : /* istanbul ignore next */ {}), alias: 'activeFileIndex',
+            transform: (value) => {
+                const index = numberAttribute(value);
+                return Number.isInteger(index) && index >= 0 ? index : 0;
+            } });
         /** Defines which file (index) is active. */
-        // TODO: Skipped for migration because:
-        //  Your application code writes to the input. This prevents migration.
-        this.activeFileIndex = 0;
+        this.activeFileIndex = linkedSignal(() => this.activeFileIndexInput(), ...(ngDevMode ? [{ debugName: "activeFileIndex" }] : /* istanbul ignore next */ []));
+        /**
+         * Index of the file actually rendered. `files` and `activeFileIndex` are written one after the other,
+         * so either order leaves the pair briefly inconsistent: the render falls back to the first file rather
+         * than resetting the input, which would write back into a `[(activeFileIndex)]` mid-update.
+         *
+         * @docs-private
+         */
+        this.renderedFileIndex = computed(() => {
+            const index = this.activeFileIndex();
+            return index < this.files().length ? index : 0;
+        }, ...(ngDevMode ? [{ debugName: "renderedFileIndex" }] : /* istanbul ignore next */ []));
+        /**
+         * The file being rendered, or `undefined` while `files` is empty.
+         *
+         * @docs-private
+         */
+        this.activeFile = computed(() => this.files()[this.renderedFileIndex()], ...(ngDevMode ? [{ debugName: "activeFile" }] : /* istanbul ignore next */ []));
         /**
          * Output to support two-way binding on `[(activeFileIndex)]` property.
          */
         this.activeFileIndexChange = output();
         /** Whether to hide border. */
-        this.noBorder = input(false, ...(ngDevMode ? [{ debugName: "noBorder", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        this._hideTabs = signal(false, ...(ngDevMode ? [{ debugName: "_hideTabs" }] : []));
-        this.actionbarHovered = signal(false, ...(ngDevMode ? [{ debugName: "actionbarHovered" }] : []));
+        this.noBorder = input(false, { ...(ngDevMode ? { debugName: "noBorder" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Backing input of `hideTabs`.
+         *
+         * @docs-private
+         */
+        this.hideTabsInput = input(false, { ...(ngDevMode ? { debugName: "hideTabsInput" } : /* istanbul ignore next */ {}), alias: 'hideTabs', transform: booleanAttribute });
+        /**
+         * Whether to hide header tabs. A single file without a filename hides them regardless - read
+         * `tabsHidden` for what the header actually does.
+         * Makes actionbar floating if tabs are hidden.
+         */
+        this.hideTabs = linkedSignal(() => this.hideTabsInput(), ...(ngDevMode ? [{ debugName: "hideTabs" }] : /* istanbul ignore next */ []));
+        /**
+         * A lone file with no filename has nothing to label a tab with, so the bar is hidden whatever was
+         * bound. Derived rather than written into `hideTabs`: the write latched the bar off for the life of
+         * the component, so naming the files later never brought it back, and it re-emitted `hideTabsChange`
+         * on every `files` assignment.
+         *
+         * @docs-private
+         */
+        this.tabsHidden = computed(() => {
+            const files = this.files();
+            return this.hideTabs() || (files.length === 1 && !files[0].filename);
+        }, ...(ngDevMode ? [{ debugName: "tabsHidden" }] : /* istanbul ignore next */ []));
+        this.actionbarHovered = signal(false, ...(ngDevMode ? [{ debugName: "actionbarHovered" }] : /* istanbul ignore next */ []));
         /**
          * Output to support two-way binding on `[(hideTabs)]` property.
          */
         this.hideTabsChange = output();
-        this._localeConfiguration = inject(KBQ_CODE_BLOCK_LOCALE_CONFIGURATION);
+        /**
+         * Component locale configuration.
+         *
+         * @docs-private
+         */
+        this.localeConfiguration = inject(KbqLocaleOverridesDirective, { self: true }).read('codeBlock', KBQ_CODE_BLOCK_LOCALE_CONFIGURATION);
         /**
          * @docs-private
          */
@@ -702,8 +823,6 @@ class KbqCodeBlock {
         this.buttonStyle = KbqButtonStyles;
         this.elementRef = inject(ElementRef);
         this.injector = inject(Injector);
-        this.changeDetectorRef = inject(ChangeDetectorRef);
-        this.localeService = inject(KBQ_LOCALE_SERVICE, { optional: true });
         this.destroyRef = inject(DestroyRef);
         this.platform = inject(Platform);
         this.focusMonitor = inject(FocusMonitor);
@@ -720,27 +839,35 @@ class KbqCodeBlock {
         this.actionbarVisible = computed(() => this.alwaysShowActionbar() ||
             this.platform.IOS ||
             this.platform.ANDROID ||
-            !this._hideTabs() ||
-            this.actionbarHovered(), ...(ngDevMode ? [{ debugName: "actionbarVisible" }] : []));
-        this.updateLocaleParams = () => {
-            this._localeConfiguration = this.localeService?.getParams('codeBlock');
-            this.changeDetectorRef.markForCheck();
-        };
+            !this.tabsHidden() ||
+            this.actionbarHovered(), ...(ngDevMode ? [{ debugName: "actionbarVisible" }] : /* istanbul ignore next */ []));
         this.trackHoverState();
-        this.localeService?.changes.pipe(takeUntilDestroyed()).subscribe(this.updateLocaleParams);
+        // The template leaves the code content focusable, as the server renders it: the server cannot measure, and a
+        // block that stays dehydrated under a `@defer` hydrate trigger would otherwise keep an overflow that no keyboard
+        // can scroll. The browser measures in the phases of every render, so that blocks rendered together read in one
+        // layout, and writes to the element directly: a binding would only catch up a round of change detection later,
+        // after the hooks still to run in this render.
+        if (this.platform.isBrowser) {
+            afterEveryRender({
+                earlyRead: () => (this.canCodeContentBeFocused ? 0 : -1),
+                write: (tabIndex) => {
+                    const element = this.scrollbarViewport().getNativeElement();
+                    if (element.tabIndex !== tabIndex)
+                        element.tabIndex = tabIndex;
+                }
+            });
+        }
     }
     ngAfterViewInit() {
         this.setupContentOverflowDetection();
+        this.revealScrollbarOnHighlight();
         this.copyButtonTooltip()
             ?.visibleChange.pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((isVisible) => {
             if (isVisible) {
-                this.copyButtonTooltip().content = this.localeConfiguration.copyTooltip;
+                this.copyButtonTooltip().content = this.localeConfiguration().copyTooltip;
             }
         });
-        // Should call `markForCheck` to ensure the `codeContentTabIndex` is updated after the view is initialized,
-        // for correct focus behavior.
-        this.changeDetectorRef.markForCheck();
     }
     /**
      * Toggles the `viewAll` property.
@@ -752,20 +879,17 @@ class KbqCodeBlock {
      * will be displayed.
      */
     toggleViewAll() {
-        this.viewAll = !this.viewAll;
-        if (!this.viewAll) {
+        this.viewAll.set(!this.viewAll());
+        if (!this.viewAll()) {
             this.scrollTo({ top: 0, behavior: 'instant' });
         }
-        this.viewAllChange.emit(this.viewAll);
+        this.viewAllChange.emit(this.viewAll());
     }
     /** Scrolls the code content to the specified position. */
     scrollTo(options) {
-        const scroll = () => this.scrollableCodeContent().scrollTo(options);
-        const highlight = this.highlight();
-        if (highlight?.pending()) {
-            toObservable(highlight.pending, { injector: this.injector })
-                .pipe(filter((pending) => !pending), take(1))
-                .subscribe(scroll);
+        const scroll = () => this.scrollbarViewport().scrollTo(options);
+        if (this.highlight()?.pending()) {
+            this.highlightSettled().pipe(take(1)).subscribe(scroll);
         }
         else {
             scroll();
@@ -779,8 +903,8 @@ class KbqCodeBlock {
      * the content will not be wrapped.
      */
     toggleSoftWrap() {
-        this.softWrap = !this.softWrap;
-        this.softWrapChange.emit(this.softWrap);
+        this.softWrap.set(!this.softWrap());
+        this.softWrapChange.emit(this.softWrap());
     }
     /**
      * Handles the change of the selected tab by updating the active file index
@@ -791,20 +915,25 @@ class KbqCodeBlock {
      * @docs-private
      */
     onSelectedTabChange(index) {
-        if (this.activeFileIndex !== index) {
-            this.activeFileIndex = index;
-            this.activeFileIndexChange.emit(this.activeFileIndex);
+        // Compared against the bound index rather than the rendered one: with an out-of-range binding the
+        // two differ, and clicking the tab that is already on screen has to bring the input back in range.
+        if (this.activeFileIndex() !== index) {
+            this.activeFileIndex.set(index);
+            this.activeFileIndexChange.emit(index);
             this.scrollTo({ top: 0, behavior: 'instant' });
         }
     }
     /** Tracks hover when tabs are hidden and `alwaysShowActionbar` is disabled. */
     trackHoverState() {
         effect((onCleanup) => {
-            const hideTabs = this._hideTabs();
+            const hideTabs = this.tabsHidden();
             const alwaysShowActionbar = this.alwaysShowActionbar();
             this.actionbarHovered.set(false);
             if (!hideTabs || alwaysShowActionbar || this.platform.IOS || this.platform.ANDROID)
                 return;
+            // A block that comes to life under the pointer, as one hydrated on hover does, gets no `mouseenter`
+            // until the pointer has left it.
+            this.actionbarHovered.set(this.platform.isBrowser && this.elementRef.nativeElement.matches(':hover'));
             const subscription = merge(fromEvent(this.elementRef.nativeElement, 'mouseenter').pipe(map(() => true)), fromEvent(this.elementRef.nativeElement, 'mouseleave').pipe(map(() => false)))
                 .pipe(debounceTime(100))
                 .subscribe((isHovered) => {
@@ -813,25 +942,70 @@ class KbqCodeBlock {
             onCleanup(() => subscription.unsubscribe());
         }, { injector: this.injector });
     }
+    /**
+     * Briefly reveals the scrollbar once highlighting settles, so whether the code scrolls is answered
+     * on arrival rather than only after the pointer enters the block. Switching files needs nothing of
+     * its own: `onSelectedTabChange` scrolls the content back to the top, and that scroll reveals the
+     * track by itself.
+     *
+     * A viewport with nothing to scroll paints no track, so this stays silent for code that fits.
+     */
+    revealScrollbarOnHighlight() {
+        if (!this.platform.isBrowser)
+            return;
+        this.highlightSettled()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.scrollbarViewport().flashScrollIndicators());
+    }
+    /**
+     * Emits every time highlighting finishes. Built once and reused: `toObservable` installs an Angular
+     * effect that lives as long as the injector, so creating one per call — as `scrollTo` did on every
+     * tab click while a file was still highlighting — left an effect behind each time.
+     */
+    highlightSettled() {
+        // Read through the query: the highlighted element lives inside `@if (activeFile())`, and a block
+        // with no file has nothing to wait for.
+        this.highlightPending ??= toObservable(computed(() => this.highlight()?.pending() ?? false), {
+            injector: this.injector
+        });
+        return this.highlightPending.pipe(filter((pending) => !pending));
+    }
     setupContentOverflowDetection() {
         if (!this.platform.isBrowser)
             return;
-        if (!this.maxHeight())
+        // `maxHeight` is a signal, so the gate has to follow it: bound after init it used to leave the
+        // content clipped with neither the "view all" button nor a way in from the keyboard.
+        effect((onCleanup) => {
+            const preElement = this.preElementRef()?.nativeElement;
+            this.measureContentOverflow();
+            if (!this.maxHeight() || !preElement)
+                return;
+            const subscription = this.sharedResizeObserver
+                .observe(preElement)
+                .subscribe(() => this.measureContentOverflow());
+            onCleanup(() => subscription.unsubscribe());
+        }, { injector: this.injector });
+        // Half-rendered content answers for the wrong height, so the measurement is retaken once
+        // highlighting settles. Kept apart from the subscription above, which would otherwise be torn
+        // down and re-created on both edges of every `pending` flip.
+        effect(() => {
+            this.highlight()?.pending();
+            untracked(() => this.measureContentOverflow());
+        }, { injector: this.injector });
+    }
+    measureContentOverflow() {
+        const maxHeight = this.maxHeight();
+        const preElement = this.preElementRef()?.nativeElement;
+        const codeElement = this.codeElementRef()?.nativeElement;
+        if (!maxHeight || !preElement || !codeElement) {
+            this.contentExceedsMaxHeight.set(false);
             return;
-        const checkOverflow = () => {
-            this.contentExceedsMaxHeight.set(this.preElementRef().nativeElement.offsetHeight > this.maxHeight());
-        };
-        checkOverflow();
-        const highlight = this.highlight();
-        if (highlight?.pending()) {
-            toObservable(highlight.pending, { injector: this.injector })
-                .pipe(filter((pending) => !pending), take(1))
-                .subscribe(checkOverflow);
-        }
-        this.sharedResizeObserver
-            .observe(this.preElementRef().nativeElement)
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(checkOverflow);
+        }
+        // The limit is checked against the end of the last line, not of the element: the bottom padding is
+        // what gets clipped first, and clipped padding hides no code. Read from the computed style because
+        // the "view all" button, once shown, deepens that padding, and measuring it would keep the button.
+        const paddingBottom = parseFloat(this.window.getComputedStyle(codeElement).paddingBottom) || 0;
+        this.contentExceedsMaxHeight.set(preElement.offsetHeight - paddingBottom > maxHeight);
     }
     /** Whether the element has scroll. */
     hasScroll({ scrollHeight, scrollWidth, clientHeight, clientWidth }) {
@@ -846,7 +1020,7 @@ class KbqCodeBlock {
         event.preventDefault();
         this.toggleViewAll();
         if (this.canCodeContentBeFocused) {
-            this.focusMonitor.focusVia(this.scrollableCodeContent().getElementRef().nativeElement, 'keyboard');
+            this.focusMonitor.focusVia(this.scrollbarViewport().getNativeElement(), 'keyboard');
         }
     }
     /**
@@ -858,10 +1032,12 @@ class KbqCodeBlock {
      * @docs-private
      */
     copyCode() {
-        const file = this.files[this.activeFileIndex];
+        const file = this.activeFile();
+        if (!file)
+            return;
         const copyButtonTooltip = this.copyButtonTooltip();
         if (this.clipboard.copy(file.content) && copyButtonTooltip) {
-            copyButtonTooltip.content = this.localeConfiguration.copiedTooltip;
+            copyButtonTooltip.content = this.localeConfiguration().copiedTooltip;
         }
     }
     /**
@@ -870,7 +1046,9 @@ class KbqCodeBlock {
      * @docs-private
      */
     openLink() {
-        const file = this.files[this.activeFileIndex];
+        const file = this.activeFile();
+        if (!file?.link)
+            return;
         const safeURL = this.domSanitizer.sanitize(SecurityContext.URL, file.link);
         if (safeURL) {
             this.window.open(safeURL.toString(), '_blank');
@@ -885,7 +1063,9 @@ class KbqCodeBlock {
      * @docs-private
      */
     downloadCode() {
-        const file = this.files[this.activeFileIndex];
+        const file = this.activeFile();
+        if (!file)
+            return;
         const blob = new Blob([file.content], { type: 'text/plain' });
         const url = URL.createObjectURL(blob);
         const link = this.document.createElement('a');
@@ -893,75 +1073,49 @@ class KbqCodeBlock {
         link.setAttribute('download', file.filename || this.fallbackFileName);
         link.click();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqCodeBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", 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 }, softWrap: { classPropertyName: "softWrap", publicName: "softWrap", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, viewAll: { classPropertyName: "viewAll", publicName: "viewAll", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, canLoad: { classPropertyName: "canLoad", publicName: "canLoad", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, canDownload: { classPropertyName: "canDownload", publicName: "canDownload", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, canCopy: { classPropertyName: "canCopy", publicName: "canCopy", isSignal: true, isRequired: false, transformFunction: null }, alwaysShowActionbar: { classPropertyName: "alwaysShowActionbar", publicName: "alwaysShowActionbar", isSignal: true, isRequired: false, transformFunction: null }, codeFiles: { classPropertyName: "codeFiles", publicName: "codeFiles", isSignal: false, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: false, isRequired: false, transformFunction: null }, activeFileIndex: { classPropertyName: "activeFileIndex", publicName: "activeFileIndex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, noBorder: { classPropertyName: "noBorder", publicName: "noBorder", isSignal: true, isRequired: false, transformFunction: null }, hideTabs: { classPropertyName: "hideTabs", publicName: "hideTabs", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, outputs: { softWrapChange: "softWrapChange", viewAllChange: "viewAllChange", activeFileIndexChange: "activeFileIndexChange", hideTabsChange: "hideTabsChange" }, host: { attributes: { "ngSkipHydration": "true" }, 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": "hideTabs", "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 }], viewQueries: [{ propertyName: "copyButtonTooltip", first: true, predicate: ["copyButtonTooltip"], descendants: true, isSignal: true }, { propertyName: "scrollableCodeContent", first: true, predicate: CdkScrollable, descendants: true, isSignal: true }, { propertyName: "highlight", first: true, predicate: KbqCodeBlockHighlight, descendants: true, isSignal: true }, { propertyName: "preElementRef", first: true, predicate: ["codeBlockPre"], descendants: true, isSignal: true }], exportAs: ["kbqCodeBlock"], ngImport: i0, template: "@let file = files[activeFileIndex];\n\n<div class=\"kbq-code-block__header\" [kbqOverflowShadowTop]=\"codeBlockContent\">\n    @if (!hideTabs) {\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 && activeFileIndex === $index\"\n                        [style.pointer-events]=\"$count === 1 ? 'none' : null\"\n                        (click)=\"onSelectedTabChange($index)\"\n                    >\n                        @if (tabLinkTemplate) {\n                            <ng-container\n                                *ngTemplateOutlet=\"tabLinkTemplate; 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                    [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                        [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 (file.link) {\n                <button\n                    kbq-button\n                    class=\"kbq-code-block__actionbar__link-button\"\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    cdkScrollable\n    kbqOverflowShadowContainer\n    kbqTabNavPanel\n    class=\"kbq-code-block__main kbq-scrollbar\"\n    [style.max-height.px]=\"calculatedMaxHeight\"\n    [tabIndex]=\"codeContentTabIndex\"\n>\n    <pre\n        #codeBlockPre\n        class=\"kbq-code-block__pre\"\n    ><code kbqCodeBlockHighlight class=\"kbq-code-block__code\" [file]=\"file\">{{ file.content }}</code></pre>\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);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)}.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.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)}.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}.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)}.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)}.kbq-code-block .kbq-code-block__view-all .kbq-code-block__view-all__wrapper{border-radius:var(--kbq-size-border-radius)}.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-font-hljs-addition-font-style: null;--kbq-code-block-font-hljs-addition-font-weight: null;--kbq-code-block-font-hljs-attr-font-style: null;--kbq-code-block-font-hljs-attr-font-weight: null;--kbq-code-block-font-hljs-attribute-font-style: null;--kbq-code-block-font-hljs-attribute-font-weight: null;--kbq-code-block-font-hljs-built-in-font-style: null;--kbq-code-block-font-hljs-built-in-font-weight: null;--kbq-code-block-font-hljs-bullet-font-style: null;--kbq-code-block-font-hljs-bullet-font-weight: null;--kbq-code-block-font-hljs-char-escape-font-style: null;--kbq-code-block-font-hljs-char-escape-font-weight: null;--kbq-code-block-font-hljs-class-font-style: null;--kbq-code-block-font-hljs-class-font-weight: null;--kbq-code-block-font-hljs-code-font-style: null;--kbq-code-block-font-hljs-code-font-weight: null;--kbq-code-block-font-hljs-comment-font-style: null;--kbq-code-block-font-hljs-comment-font-weight: null;--kbq-code-block-font-hljs-deletion-font-style: null;--kbq-code-block-font-hljs-deletion-font-weight: null;--kbq-code-block-font-hljs-doctag-font-style: null;--kbq-code-block-font-hljs-doctag-font-weight: null;--kbq-code-block-font-hljs-emphasis-font-style: null;--kbq-code-block-font-hljs-emphasis-font-weight: null;--kbq-code-block-font-hljs-formula-font-style: null;--kbq-code-block-font-hljs-formula-font-weight: null;--kbq-code-block-font-hljs-function-font-style: null;--kbq-code-block-font-hljs-function-font-weight: null;--kbq-code-block-font-hljs-keyword-font-style: null;--kbq-code-block-font-hljs-keyword-font-weight: null;--kbq-code-block-font-hljs-link-font-style: null;--kbq-code-block-font-hljs-link-font-weight: null;--kbq-code-block-font-hljs-literal-font-style: null;--kbq-code-block-font-hljs-literal-font-weight: null;--kbq-code-block-font-hljs-meta-font-style: null;--kbq-code-block-font-hljs-meta-font-weight: null;--kbq-code-block-font-hljs-meta-keyword-font-style: null;--kbq-code-block-font-hljs-meta-keyword-font-weight: null;--kbq-code-block-font-hljs-meta-string-font-style: null;--kbq-code-block-font-hljs-meta-string-font-weight: null;--kbq-code-block-font-hljs-meta-prompt-font-style: null;--kbq-code-block-font-hljs-meta-prompt-font-weight: null;--kbq-code-block-font-hljs-name-font-style: null;--kbq-code-block-font-hljs-name-font-weight: null;--kbq-code-block-font-hljs-number-font-style: null;--kbq-code-block-font-hljs-number-font-weight: null;--kbq-code-block-font-hljs-operator-font-style: null;--kbq-code-block-font-hljs-operator-font-weight: null;--kbq-code-block-font-hljs-params-font-style: null;--kbq-code-block-font-hljs-params-font-weight: null;--kbq-code-block-font-hljs-property-font-style: null;--kbq-code-block-font-hljs-property-font-weight: null;--kbq-code-block-font-hljs-punctuation-font-style: null;--kbq-code-block-font-hljs-punctuation-font-weight: null;--kbq-code-block-font-hljs-quote-font-style: null;--kbq-code-block-font-hljs-quote-font-weight: null;--kbq-code-block-font-hljs-regexp-font-style: null;--kbq-code-block-font-hljs-regexp-font-weight: null;--kbq-code-block-font-hljs-section-font-style: null;--kbq-code-block-font-hljs-section-font-weight: null;--kbq-code-block-font-hljs-selector-attr-font-style: null;--kbq-code-block-font-hljs-selector-attr-font-weight: null;--kbq-code-block-font-hljs-selector-class-font-style: null;--kbq-code-block-font-hljs-selector-class-font-weight: null;--kbq-code-block-font-hljs-selector-id-font-style: null;--kbq-code-block-font-hljs-selector-id-font-weight: null;--kbq-code-block-font-hljs-selector-pseudo-font-style: null;--kbq-code-block-font-hljs-selector-pseudo-font-weight: null;--kbq-code-block-font-hljs-selector-tag-font-style: null;--kbq-code-block-font-hljs-selector-tag-font-weight: null;--kbq-code-block-font-hljs-string-font-style: null;--kbq-code-block-font-hljs-string-font-weight: null;--kbq-code-block-font-hljs-strong-font-style: null;--kbq-code-block-font-hljs-strong-font-weight: null;--kbq-code-block-font-hljs-subst-font-style: null;--kbq-code-block-font-hljs-subst-font-weight: null;--kbq-code-block-font-hljs-symbol-font-style: null;--kbq-code-block-font-hljs-symbol-font-weight: null;--kbq-code-block-font-hljs-tag-font-style: null;--kbq-code-block-font-hljs-tag-font-weight: null;--kbq-code-block-font-hljs-template-tag-font-style: null;--kbq-code-block-font-hljs-template-tag-font-weight: null;--kbq-code-block-font-hljs-template-variable-font-style: null;--kbq-code-block-font-hljs-template-variable-font-weight: null;--kbq-code-block-font-hljs-title-font-style: null;--kbq-code-block-font-hljs-title-font-weight: null;--kbq-code-block-font-hljs-title-class-font-style: normal;--kbq-code-block-font-hljs-title-class-font-weight: 500;--kbq-code-block-font-hljs-title-class-inherited-font-style: null;--kbq-code-block-font-hljs-title-class-inherited-font-weight: null;--kbq-code-block-font-hljs-title-function-font-style: null;--kbq-code-block-font-hljs-title-function-font-weight: null;--kbq-code-block-font-hljs-title-function-invoke-font-style: null;--kbq-code-block-font-hljs-title-function-invoke-font-weight: null;--kbq-code-block-font-hljs-type-font-style: null;--kbq-code-block-font-hljs-type-font-weight: null;--kbq-code-block-font-hljs-variable-font-style: null;--kbq-code-block-font-hljs-variable-font-weight: null;--kbq-code-block-font-hljs-variable-constant-font-style: null;--kbq-code-block-font-hljs-variable-constant-font-weight: null;--kbq-code-block-font-hljs-variable-language-font-style: null;--kbq-code-block-font-hljs-variable-language-font-weight: null;--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-hljs-addition-background: var(--kbq-plt-green-a2, var(--kbq-palette-green-95));--kbq-code-block-hljs-addition-color: var(--kbq-plt-green-a16, var(--kbq-palette-green-25));--kbq-code-block-hljs-attr-background: null;--kbq-code-block-hljs-attr-color: null;--kbq-code-block-hljs-attribute-background: null;--kbq-code-block-hljs-attribute-color: null;--kbq-code-block-hljs-built-in-background: null;--kbq-code-block-hljs-built-in-color: var(--kbq-plt-blue-a16, var(--kbq-palette-blue-35));--kbq-code-block-hljs-bullet-background: null;--kbq-code-block-hljs-bullet-color: null;--kbq-code-block-hljs-char-escape-background: null;--kbq-code-block-hljs-char-escape-color: null;--kbq-code-block-hljs-class-background: null;--kbq-code-block-hljs-class-color: null;--kbq-code-block-hljs-code-background: null;--kbq-code-block-hljs-code-color: null;--kbq-code-block-hljs-comment-background: null;--kbq-code-block-hljs-comment-color: var(--kbq-plt-slate-a16, var(--kbq-palette-grey-60));--kbq-code-block-hljs-deletion-background: var(--kbq-plt-red-a2, var(--kbq-palette-red-95));--kbq-code-block-hljs-deletion-color: var(--kbq-plt-red-a16, var(--kbq-palette-red-35));--kbq-code-block-hljs-doctag-background: null;--kbq-code-block-hljs-doctag-color: null;--kbq-code-block-hljs-emphasis-background: null;--kbq-code-block-hljs-emphasis-color: null;--kbq-code-block-hljs-formula-background: null;--kbq-code-block-hljs-formula-color: null;--kbq-code-block-hljs-function-background: null;--kbq-code-block-hljs-function-color: null;--kbq-code-block-hljs-keyword-background: null;--kbq-code-block-hljs-keyword-color: null;--kbq-code-block-hljs-line-numbers-color: var(--kbq-foreground-contrast-secondary);--kbq-code-block-hljs-link-background: null;--kbq-code-block-hljs-link-color: null;--kbq-code-block-hljs-literal-background: null;--kbq-code-block-hljs-literal-color: var(--kbq-plt-purple-a16, var(--kbq-palette-purple-30));--kbq-code-block-hljs-meta-background: null;--kbq-code-block-hljs-meta-color: var(--kbq-plt-blue-a16, var(--kbq-palette-blue-35));--kbq-code-block-hljs-meta-keyword-background: null;--kbq-code-block-hljs-meta-keyword-color: null;--kbq-code-block-hljs-meta-string-background: null;--kbq-code-block-hljs-meta-string-color: var(--kbq-plt-blue-a16, var(--kbq-palette-blue-35));--kbq-code-block-hljs-meta-prompt-background: null;--kbq-code-block-hljs-meta-prompt-color: null;--kbq-code-block-hljs-name-background: null;--kbq-code-block-hljs-name-color: var(--kbq-plt-blue-a16, var(--kbq-palette-blue-35));--kbq-code-block-hljs-number-background: null;--kbq-code-block-hljs-number-color: var(--kbq-plt-purple-a16, var(--kbq-palette-purple-30));--kbq-code-block-hljs-operator-background: null;--kbq-code-block-hljs-operator-color: null;--kbq-code-block-hljs-params-background: null;--kbq-code-block-hljs-params-color: null;--kbq-code-block-hljs-property-background: null;--kbq-code-block-hljs-property-color: null;--kbq-code-block-hljs-punctuation-background: null;--kbq-code-block-hljs-punctuation-color: null;--kbq-code-block-hljs-quote-background: null;--kbq-code-block-hljs-quote-color: null;--kbq-code-block-hljs-regexp-background: null;--kbq-code-block-hljs-regexp-color: var(--kbq-plt-green-a16, var(--kbq-palette-green-25));--kbq-code-block-hljs-section-background: null;--kbq-code-block-hljs-section-color: null;--kbq-code-block-hljs-selector-attr-background: null;--kbq-code-block-hljs-selector-attr-color: null;--kbq-code-block-hljs-selector-class-background: null;--kbq-code-block-hljs-selector-class-color: null;--kbq-code-block-hljs-selector-id-background: null;--kbq-code-block-hljs-selector-id-color: null;--kbq-code-block-hljs-selector-pseudo-background: null;--kbq-code-block-hljs-selector-pseudo-color: null;--kbq-code-block-hljs-selector-tag-background: null;--kbq-code-block-hljs-selector-tag-color: var(--kbq-plt-blue-a16, var(--kbq-palette-blue-35));--kbq-code-block-hljs-string-background: null;--kbq-code-block-hljs-string-color: var(--kbq-plt-green-a16, var(--kbq-palette-green-25));--kbq-code-block-hljs-strong-background: null;--kbq-code-block-hljs-strong-color: null;--kbq-code-block-hljs-subst-background: null;--kbq-code-block-hljs-subst-color: null;--kbq-code-block-hljs-symbol-background: null;--kbq-code-block-hljs-symbol-color: var(--kbq-plt-blue-a16, var(--kbq-palette-blue-35));--kbq-code-block-hljs-tag-background: null;--kbq-code-block-hljs-tag-color: null;--kbq-code-block-hljs-template-tag-background: null;--kbq-code-block-hljs-template-tag-color: null;--kbq-code-block-hljs-template-variable-background: null;--kbq-code-block-hljs-template-variable-color: null;--kbq-code-block-hljs-title-background: null;--kbq-code-block-hljs-title-color: var(--kbq-plt-blue-a16, var(--kbq-palette-blue-35));--kbq-code-block-hljs-title-class-background: null;--kbq-code-block-hljs-title-class-color: null;--kbq-code-block-hljs-title-class-inherited-background: null;--kbq-code-block-hljs-title-class-inherited-color: null;--kbq-code-block-hljs-title-function-background: null;--kbq-code-block-hljs-title-function-color: null;--kbq-code-block-hljs-title-function-invoke-background: null;--kbq-code-block-hljs-title-function-invoke-color: null;--kbq-code-block-hljs-type-background: null;--kbq-code-block-hljs-type-color: null;--kbq-code-block-hljs-variable-background: null;--kbq-code-block-hljs-variable-color: null;--kbq-code-block-hljs-variable-constant-background: null;--kbq-code-block-hljs-variable-constant-color: null;--kbq-code-block-hljs-variable-language-background: null;--kbq-code-block-hljs-variable-language-color: null;--kbq-code-block-tab-size: 4}.kbq-dark .kbq-code-block{--kbq-code-block-hljs-addition-background: var(--kbq-plt-dark-green-a5, var(--kbq-palette-green-95));--kbq-code-block-hljs-addition-color: var(--kbq-plt-dark-green-a14, var(--kbq-palette-green-25));--kbq-code-block-hljs-built-in-color: var(--kbq-plt-dark-blue-a14, var(--kbq-palette-blue-35));--kbq-code-block-hljs-comment-color: var(--kbq-plt-dark-slate-a14, var(--kbq-palette-grey-60));--kbq-code-block-hljs-deletion-background: var(--kbq-plt-dark-red-a5, var(--kbq-palette-red-95));--kbq-code-block-hljs-deletion-color: var(--kbq-plt-dark-red-a14, var(--kbq-palette-red-35));--kbq-code-block-hljs-literal-color: var(--kbq-plt-dark-purple-a14, var(--kbq-palette-purple-30));--kbq-code-block-hljs-meta-color: var(--kbq-plt-dark-blue-a14, var(--kbq-palette-blue-35));--kbq-code-block-hljs-meta-string-color: var(--kbq-plt-dark-blue-a14, var(--kbq-palette-blue-35));--kbq-code-block-hljs-name-color: var(--kbq-plt-dark-blue-a14, var(--kbq-palette-blue-35));--kbq-code-block-hljs-number-color: var(--kbq-plt-dark-purple-a14, var(--kbq-palette-purple-30));--kbq-code-block-hljs-regexp-color: var(--kbq-plt-dark-green-a14, var(--kbq-palette-green-25));--kbq-code-block-hljs-selector-tag-color: var(--kbq-plt-dark-blue-a14, var(--kbq-palette-blue-35));--kbq-code-block-hljs-string-color: var(--kbq-plt-dark-green-a14, var(--kbq-palette-green-25));--kbq-code-block-hljs-symbol-color: var(--kbq-plt-dark-blue-a14, var(--kbq-palette-blue-35));--kbq-code-block-hljs-title-color: var(--kbq-plt-dark-blue-a14, var(--kbq-palette-blue-35))}\n"], dependencies: [{ kind: "ngmodule", type: KbqTabsModule }, { kind: "component", type: i1.KbqTabNavBar, selector: "[kbqTabNavBar], [kbq-tab-nav-bar]", inputs: ["transparent", "onSurface", "underlined", "tabNavPanel"], exportAs: ["kbqTabNavBar"] }, { kind: "directive", type: i1.KbqTabLink, selector: "[kbqTabLink], [kbq-tab-link]", inputs: ["id", "active", "disabled", "tabIndex"], exportAs: ["kbqTabLink"] }, { kind: "directive", type: i1.KbqTabNavPanel, selector: "[kbqTabNavPanel]", inputs: ["id"], exportAs: ["kbqTabNavPanel"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i2.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i2.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "directive", type: KbqCodeBlockHighlight, selector: "code[kbqCodeBlockHighlight]", inputs: ["file", "startFrom", "singleLine"], exportAs: ["kbqCodeBlockHighlight"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i3.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "ngmodule", type: CdkScrollableModule }, { kind: "directive", type: i4.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "ngmodule", type: KbqToolTipModule }, { kind: "directive", type: i5.KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["kbqTooltipScrollStrategy", "forDisabledComponent", "ignoreTooltipPointerEvents", "kbqTooltipSingleInstance", "hideWithTimeout", "kbqVisible", "kbqPlacement", "kbqRelativeToPointer", "kbqPlacementPriority", "kbqTooltip", "kbqTooltipDisabled", "kbqEnterDelay", "kbqLeaveDelay", "kbqTrigger", "kbqTooltipClass", "kbqTooltipContext", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset", "kbqTooltipModifier", "kbqTooltipHeader"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i6.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { 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.ɵ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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqCodeBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqCodeBlock, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-code-block', imports: [
                         KbqTabsModule,
                         KbqButtonModule,
                         KbqCodeBlockHighlight,
                         A11yModule,
-                        CdkScrollableModule,
                         KbqToolTipModule,
                         KbqIconModule,
+                        KbqScrollbarViewport,
                         NgTemplateOutlet,
                         KbqOverflowShadowContainer,
                         KbqOverflowShadowTop
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-code-block',
-                        // highlight.js rewrites the <code> subtree on the client (and builds a <table> for line numbers),
-                        // which never matches the server-rendered DOM — skip hydration for this component to avoid NG0500.
-                        ngSkipHydration: 'true',
                         '[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]': 'hideTabs',
+                        '[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'
-                    }, exportAs: 'kbqCodeBlock', template: "@let file = files[activeFileIndex];\n\n<div class=\"kbq-code-block__header\" [kbqOverflowShadowTop]=\"codeBlockContent\">\n    @if (!hideTabs) {\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 && activeFileIndex === $index\"\n                        [style.pointer-events]=\"$count === 1 ? 'none' : null\"\n                        (click)=\"onSelectedTabChange($index)\"\n                    >\n                        @if (tabLinkTemplate) {\n                            <ng-container\n                                *ngTemplateOutlet=\"tabLinkTemplate; 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                    [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                        [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 (file.link) {\n                <button\n                    kbq-button\n                    class=\"kbq-code-block__actionbar__link-button\"\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    cdkScrollable\n    kbqOverflowShadowContainer\n    kbqTabNavPanel\n    class=\"kbq-code-block__main kbq-scrollbar\"\n    [style.max-height.px]=\"calculatedMaxHeight\"\n    [tabIndex]=\"codeContentTabIndex\"\n>\n    <pre\n        #codeBlockPre\n        class=\"kbq-code-block__pre\"\n    ><code kbqCodeBlockHighlight class=\"kbq-code-block__code\" [file]=\"file\">{{ file.content }}</code></pre>\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);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)}.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.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)}.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}.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)}.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)}.kbq-code-block .kbq-code-block__view-all .kbq-code-block__view-all__wrapper{border-radius:var(--kbq-size-border-radius)}.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-font-hljs-addition-font-style: null;--kbq-code-block-font-hljs-addition-font-weight: null;--kbq-code-block-font-hljs-attr-font-style: null;--kbq-code-block-font-hljs-attr-font-weight: null;--kbq-code-block-font-hljs-attribute-font-style: null;--kbq-code-block-font-hljs-attribute-font-weight: null;--kbq-code-block-font-hljs-built-in-font-style: null;--kbq-code-block-font-hljs-built-in-font-weight: null;--kbq-code-block-font-hljs-bullet-font-style: null;--kbq-code-block-font-hljs-bullet-font-weight: null;--kbq-code-block-font-hljs-char-escape-font-style: null;--kbq-code-block-font-hljs-char-escape-font-weight: null;--kbq-code-block-font-hljs-class-font-style: null;--kbq-code-block-font-hljs-class-font-weight: null;--kbq-code-block-font-hljs-code-font-style: null;--kbq-code-block-font-hljs-code-font-weight: null;--kbq-code-block-font-hljs-comment-font-style: null;--kbq-code-block-font-hljs-comment-font-weight: null;--kbq-code-block-font-hljs-deletion-font-style: null;--kbq-code-block-font-hljs-deletion-font-weight: null;--kbq-code-block-font-hljs-doctag-font-style: null;--kbq-code-block-font-hljs-doctag-font-weight: null;--kbq-code-block-font-hljs-emphasis-font-style: null;--kbq-code-block-font-hljs-emphasis-font-weight: null;--kbq-code-block-font-hljs-formula-font-style: null;--kbq-code-block-font-hljs-formula-font-weight: null;--kbq-code-block-font-hljs-function-font-style: null;--kbq-code-block-font-hljs-function-font-weight: null;--kbq-code-block-font-hljs-keyword-font-style: null;--kbq-code-block-font-hljs-keyword-font-weight: null;--kbq-code-block-font-hljs-link-font-style: null;--kbq-code-block-font-hljs-link-font-weight: null;--kbq-code-block-font-hljs-literal-font-style: null;--kbq-code-block-font-hljs-literal-font-weight: null;--kbq-code-block-font-hljs-meta-font-style: null;--kbq-code-block-font-hljs-meta-font-weight: null;--kbq-code-block-font-hljs-meta-keyword-font-style: null;--kbq-code-block-font-hljs-meta-keyword-font-weight: null;--kbq-code-block-font-hljs-meta-string-font-style: null;--kbq-code-block-font-hljs-meta-string-font-weight: null;--kbq-code-block-font-hljs-meta-prompt-font-style: null;--kbq-code-block-font-hljs-meta-prompt-font-weight: null;--kbq-code-block-font-hljs-name-font-style: null;--kbq-code-block-font-hljs-name-font-weight: null;--kbq-code-block-font-hljs-number-font-style: null;--kbq-code-block-font-hljs-number-font-weight: null;--kbq-code-block-font-hljs-operator-font-style: null;--kbq-code-block-font-hljs-operator-font-weight: null;--kbq-code-block-font-hljs-params-font-style: null;--kbq-code-block-font-hljs-params-font-weight: null;--kbq-code-block-font-hljs-property-font-style: null;--kbq-code-block-font-hljs-property-font-weight: null;--kbq-code-block-font-hljs-punctuation-font-style: null;--kbq-code-block-font-hljs-punctuation-font-weight: null;--kbq-code-block-font-hljs-quote-font-style: null;--kbq-code-block-font-hljs-quote-font-weight: null;--kbq-code-block-font-hljs-regexp-font-style: null;--kbq-code-block-font-hljs-regexp-font-weight: null;--kbq-code-block-font-hljs-section-font-style: null;--kbq-code-block-font-hljs-section-font-weight: null;--kbq-code-block-font-hljs-selector-attr-font-style: null;--kbq-code-block-font-hljs-selector-attr-font-weight: null;--kbq-code-block-font-hljs-selector-class-font-style: null;--kbq-code-block-font-hljs-selector-class-font-weight: null;--kbq-code-block-font-hljs-selector-id-font-style: null;--kbq-code-block-font-hljs-selector-id-font-weight: null;--kbq-code-block-font-hljs-selector-pseudo-font-style: null;--kbq-code-block-font-hljs-selector-pseudo-font-weight: null;--kbq-code-block-font-hljs-selector-tag-font-style: null;--kbq-code-block-font-hljs-selector-tag-font-weight: null;--kbq-code-block-font-hljs-string-font-style: null;--kbq-code-block-font-hljs-string-font-weight: null;--kbq-code-block-font-hljs-strong-font-style: null;--kbq-code-block-font-hljs-strong-font-weight: null;--kbq-code-block-font-hljs-subst-font-style: null;--kbq-code-block-font-hljs-subst-font-weight: null;--kbq-code-block-font-hljs-symbol-font-style: null;--kbq-code-block-font-hljs-symbol-font-weight: null;--kbq-code-block-font-hljs-tag-font-style: null;--kbq-code-block-font-hljs-tag-font-weight: null;--kbq-code-block-font-hljs-template-tag-font-style: null;--kbq-code-block-font-hljs-template-tag-font-weight: null;--kbq-code-block-font-hljs-template-variable-font-style: null;--kbq-code-block-font-hljs-template-variable-font-weight: null;--kbq-code-block-font-hljs-title-font-style: null;--kbq-code-block-font-hljs-title-font-weight: null;--kbq-code-block-font-hljs-title-class-font-style: normal;--kbq-code-block-font-hljs-title-class-font-weight: 500;--kbq-code-block-font-hljs-title-class-inherited-font-style: null;--kbq-code-block-font-hljs-title-class-inherited-font-weight: null;--kbq-code-block-font-hljs-title-function-font-style: null;--kbq-code-block-font-hljs-title-function-font-weight: null;--kbq-code-block-font-hljs-title-function-invoke-font-style: null;--kbq-code-block-font-hljs-title-function-invoke-font-weight: null;--kbq-code-block-font-hljs-type-font-style: null;--kbq-code-block-font-hljs-type-font-weight: null;--kbq-code-block-font-hljs-variable-font-style: null;--kbq-code-block-font-hljs-variable-font-weight: null;--kbq-code-block-font-hljs-variable-constant-font-style: null;--kbq-code-block-font-hljs-variable-constant-font-weight: null;--kbq-code-block-font-hljs-variable-language-font-style: null;--kbq-code-block-font-hljs-variable-language-font-weight: null;--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-hljs-addition-background: var(--kbq-plt-green-a2, var(--kbq-palette-green-95));--kbq-code-block-hljs-addition-color: var(--kbq-plt-green-a16, var(--kbq-palette-green-25));--kbq-code-block-hljs-attr-background: null;--kbq-code-block-hljs-attr-color: null;--kbq-code-block-hljs-attribute-background: null;--kbq-code-block-hljs-attribute-color: null;--kbq-code-block-hljs-built-in-background: null;--kbq-code-block-hljs-built-in-color: var(--kbq-plt-blue-a16, var(--kbq-palette-blue-35));--kbq-code-block-hljs-bullet-background: null;--kbq-code-block-hljs-bullet-color: null;--kbq-code-block-hljs-char-escape-background: null;--kbq-code-block-hljs-char-escape-color: null;--kbq-code-block-hljs-class-background: null;--kbq-code-block-hljs-class-color: null;--kbq-code-block-hljs-code-background: null;--kbq-code-block-hljs-code-color: null;--kbq-code-block-hljs-comment-background: null;--kbq-code-block-hljs-comment-color: var(--kbq-plt-slate-a16, var(--kbq-palette-grey-60));--kbq-code-block-hljs-deletion-background: var(--kbq-plt-red-a2, var(--kbq-palette-red-95));--kbq-code-block-hljs-deletion-color: var(--kbq-plt-red-a16, var(--kbq-palette-red-35));--kbq-code-block-hljs-doctag-background: null;--kbq-code-block-hljs-doctag-color: null;--kbq-code-block-hljs-emphasis-background: null;--kbq-code-block-hljs-emphasis-color: null;--kbq-code-block-hljs-formula-background: null;--kbq-code-block-hljs-formula-color: null;--kbq-code-block-hljs-function-background: null;--kbq-code-block-hljs-function-color: null;--kbq-code-block-hljs-keyword-background: null;--kbq-code-block-hljs-keyword-color: null;--kbq-code-block-hljs-line-numbers-color: var(--kbq-foreground-contrast-secondary);--kbq-code-block-hljs-link-background: null;--kbq-code-block-hljs-link-color: null;--kbq-code-block-hljs-literal-background: null;--kbq-code-block-hljs-literal-color: var(--kbq-plt-purple-a16, var(--kbq-palette-purple-30));--kbq-code-block-hljs-meta-background: null;--kbq-code-block-hljs-meta-color: var(--kbq-plt-blue-a16, var(--kbq-palette-blue-35));--kbq-code-block-hljs-meta-keyword-background: null;--kbq-code-block-hljs-meta-keyword-color: null;--kbq-code-block-hljs-meta-string-background: null;--kbq-code-block-hljs-meta-string-color: var(--kbq-plt-blue-a16, var(--kbq-palette-blue-35));--kbq-code-block-hljs-meta-prompt-background: null;--kbq-code-block-hljs-meta-prompt-color: null;--kbq-code-block-hljs-name-background: null;--kbq-code-block-hljs-name-color: var(--kbq-plt-blue-a16, var(--kbq-palette-blue-35));--kbq-code-block-hljs-number-background: null;--kbq-code-block-hljs-number-color: var(--kbq-plt-purple-a16, var(--kbq-palette-purple-30));--kbq-code-block-hljs-operator-background: null;--kbq-code-block-hljs-operator-color: null;--kbq-code-block-hljs-params-background: null;--kbq-code-block-hljs-params-color: null;--kbq-code-block-hljs-property-background: null;--kbq-code-block-hljs-property-color: null;--kbq-code-block-hljs-punctuation-background: null;--kbq-code-block-hljs-punctuation-color: null;--kbq-code-block-hljs-quote-background: null;--kbq-code-block-hljs-quote-color: null;--kbq-code-block-hljs-regexp-background: null;--kbq-code-block-hljs-regexp-color: var(--kbq-plt-green-a16, var(--kbq-palette-green-25));--kbq-code-block-hljs-section-background: null;--kbq-code-block-hljs-section-color: null;--kbq-code-block-hljs-selector-attr-background: null;--kbq-code-block-hljs-selector-attr-color: null;--kbq-code-block-hljs-selector-class-background: null;--kbq-code-block-hljs-selector-class-color: null;--kbq-code-block-hljs-selector-id-background: null;--kbq-code-block-hljs-selector-id-color: null;--kbq-code-block-hljs-selector-pseudo-background: null;--kbq-code-block-hljs-selector-pseudo-color: null;--kbq-code-block-hljs-selector-tag-background: null;--kbq-code-block-hljs-selector-tag-color: var(--kbq-plt-blue-a16, var(--kbq-palette-blue-35));--kbq-code-block-hljs-string-background: null;--kbq-code-block-hljs-string-color: var(--kbq-plt-green-a16, var(--kbq-palette-green-25));--kbq-code-block-hljs-strong-background: null;--kbq-code-block-hljs-strong-color: null;--kbq-code-block-hljs-subst-background: null;--kbq-code-block-hljs-subst-color: null;--kbq-code-block-hljs-symbol-background: null;--kbq-code-block-hljs-symbol-color: var(--kbq-plt-blue-a16, var(--kbq-palette-blue-35));--kbq-code-block-hljs-tag-background: null;--kbq-code-block-hljs-tag-color: null;--kbq-code-block-hljs-template-tag-background: null;--kbq-code-block-hljs-template-tag-color: null;--kbq-code-block-hljs-template-variable-background: null;--kbq-code-block-hljs-template-variable-color: null;--kbq-code-block-hljs-title-background: null;--kbq-code-block-hljs-title-color: var(--kbq-plt-blue-a16, var(--kbq-palette-blue-35));--kbq-code-block-hljs-title-class-background: null;--kbq-code-block-hljs-title-class-color: null;--kbq-code-block-hljs-title-class-inherited-background: null;--kbq-code-block-hljs-title-class-inherited-color: null;--kbq-code-block-hljs-title-function-background: null;--kbq-code-block-hljs-title-function-color: null;--kbq-code-block-hljs-title-function-invoke-background: null;--kbq-code-block-hljs-title-function-invoke-color: null;--kbq-code-block-hljs-type-background: null;--kbq-code-block-hljs-type-color: null;--kbq-code-block-hljs-variable-background: null;--kbq-code-block-hljs-variable-color: null;--kbq-code-block-hljs-variable-constant-background: null;--kbq-code-block-hljs-variable-constant-color: null;--kbq-code-block-hljs-variable-language-background: null;--kbq-code-block-hljs-variable-language-color: null;--kbq-code-block-tab-size: 4}.kbq-dark .kbq-code-block{--kbq-code-block-hljs-addition-background: var(--kbq-plt-dark-green-a5, var(--kbq-palette-green-95));--kbq-code-block-hljs-addition-color: var(--kbq-plt-dark-green-a14, var(--kbq-palette-green-25));--kbq-code-block-hljs-built-in-color: var(--kbq-plt-dark-blue-a14, var(--kbq-palette-blue-35));--kbq-code-block-hljs-comment-color: var(--kbq-plt-dark-slate-a14, var(--kbq-palette-grey-60));--kbq-code-block-hljs-deletion-background: var(--kbq-plt-dark-red-a5, var(--kbq-palette-red-95));--kbq-code-block-hljs-deletion-color: var(--kbq-plt-dark-red-a14, var(--kbq-palette-red-35));--kbq-code-block-hljs-literal-color: var(--kbq-plt-dark-purple-a14, var(--kbq-palette-purple-30));--kbq-code-block-hljs-meta-color: var(--kbq-plt-dark-blue-a14, var(--kbq-palette-blue-35));--kbq-code-block-hljs-meta-string-color: var(--kbq-plt-dark-blue-a14, var(--kbq-palette-blue-35));--kbq-code-block-hljs-name-color: var(--kbq-plt-dark-blue-a14, var(--kbq-palette-blue-35));--kbq-code-block-hljs-number-color: var(--kbq-plt-dark-purple-a14, var(--kbq-palette-purple-30));--kbq-code-block-hljs-regexp-color: var(--kbq-plt-dark-green-a14, var(--kbq-palette-green-25));--kbq-code-block-hljs-selector-tag-color: var(--kbq-plt-dark-blue-a14, var(--kbq-palette-blue-35));--kbq-code-block-hljs-string-color: var(--kbq-plt-dark-green-a14, var(--kbq-palette-green-25));--kbq-code-block-hljs-symbol-color: var(--kbq-plt-dark-blue-a14, var(--kbq-palette-blue-35));--kbq-code-block-hljs-title-color: var(--kbq-plt-dark-blue-a14, var(--kbq-palette-blue-35))}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { copyButtonTooltip: [{ type: i0.ViewChild, args: ['copyButtonTooltip', { isSignal: true }] }], scrollableCodeContent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkScrollable), { isSignal: true }] }], highlight: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqCodeBlockHighlight), { isSignal: true }] }], preElementRef: [{ type: i0.ViewChild, args: ['codeBlockPre', { isSignal: true }] }], tabLinkTemplate: [{
-                type: ContentChild,
-                args: [KbqCodeBlockTabLinkContent, { read: TemplateRef }]
-            }], 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 }] }], softWrap: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], softWrapChange: [{ type: i0.Output, args: ["softWrapChange"] }], viewAll: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], viewAllChange: [{ type: i0.Output, args: ["viewAllChange"] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], canLoad: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], canDownload: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], canCopy: [{ type: i0.Input, args: [{ isSignal: true, alias: "canCopy", required: false }] }], alwaysShowActionbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "alwaysShowActionbar", required: false }] }], codeFiles: [{
-                type: Input
-            }], files: [{
-                type: Input
-            }], activeFileIndex: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], activeFileIndexChange: [{ type: i0.Output, args: ["activeFileIndexChange"] }], noBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "noBorder", required: false }] }], hideTabs: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], hideTabsChange: [{ type: i0.Output, args: ["hideTabsChange"] }] } });
+                        '[class.kbq-code-block_soft-wrap]': 'softWrap()',
+                        '[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"] }]
+        }], 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 = [
     KbqCodeBlock,
     KbqCodeBlockTabLinkContent
 ];
 class KbqCodeBlockModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqCodeBlockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqCodeBlockModule, imports: [KbqCodeBlock,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqCodeBlockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqCodeBlockModule, imports: [KbqCodeBlock,
             KbqCodeBlockTabLinkContent], exports: [KbqCodeBlock,
             KbqCodeBlockTabLinkContent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqCodeBlockModule, imports: [KbqCodeBlock] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqCodeBlockModule, imports: [KbqCodeBlock] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqCodeBlockModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqCodeBlockModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: COMPONENTS,