@koobiq/components 19.8.1 → 20.0.0

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

@@ -4,15 +4,15 @@ 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 { CdkScrollableModule, CdkScrollable } 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, SecurityContext, isDevMode, booleanAttribute, numberAttribute, Input, Directive, EventEmitter, ElementRef, Injector, ChangeDetectorRef, DestroyRef, TemplateRef, Output, ContentChild, ViewChild, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
-import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+import { InjectionToken, inject, Renderer2, signal, input, numberAttribute, booleanAttribute, SecurityContext, isDevMode, Input, Directive, viewChild, output, ElementRef, Injector, ChangeDetectorRef, DestroyRef, TemplateRef, ContentChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { takeUntilDestroyed, toObservable, outputToObservable } from '@angular/core/rxjs-interop';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i2 from '@koobiq/components/button';
 import { KbqButtonStyles, KbqButtonModule } from '@koobiq/components/button';
-import { kbqInjectNativeElement, KBQ_WINDOW, ruRULocaleData, KbqComponentColors, KBQ_LOCALE_SERVICE } from '@koobiq/components/core';
+import { kbqInjectNativeElement, KBQ_WINDOW, ruRULocaleData, KbqComponentColors, KBQ_LOCALE_SERVICE, 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';
@@ -74,7 +74,7 @@ class KbqCodeBlockHighlight {
         this.window = inject(KBQ_WINDOW);
         this.config = inject(KBQ_CODE_BLOCK_HIGHLIGHT_JS_CONFIG, { optional: true });
         this.hljs = null;
-        this._pending = signal(false);
+        this._pending = signal(false, ...(ngDevMode ? [{ debugName: "_pending" }] : []));
         /**
          * Whether syntax highlighting is pending.
          *
@@ -82,11 +82,13 @@ class KbqCodeBlockHighlight {
          */
         this.pending = this._pending.asReadonly();
         /** The starting line number. */
-        this.startFrom = 1;
+        this.startFrom = input(1, ...(ngDevMode ? [{ debugName: "startFrom", transform: numberAttribute }] : [{ transform: numberAttribute }]));
         /** Whether to display line numbers for single line code block. */
-        this.singleLine = false;
+        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;
@@ -126,8 +128,8 @@ class KbqCodeBlockHighlight {
         }
         const safeHTML = this.domSanitizer.sanitize(SecurityContext.HTML, highlightedHTML);
         const highlightedHTMLWithLineNumbers = this.window['hljs'].lineNumbersValue(safeHTML, {
-            startFrom: this.startFrom,
-            singleLine: this.singleLine
+            startFrom: this.startFrom(),
+            singleLine: this.singleLine()
         });
         this.renderer.setAttribute(this.nativeElement, 'data-language', highlightedLanguage);
         this.renderer.setProperty(this.nativeElement, 'innerHTML', highlightedHTMLWithLineNumbers);
@@ -469,28 +471,22 @@ class KbqCodeBlockHighlight {
             return isFinite(number) ? number : fallback;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqCodeBlockHighlight, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.21", type: KbqCodeBlockHighlight, isStandalone: true, selector: "code[kbqCodeBlockHighlight]", inputs: { file: "file", startFrom: ["startFrom", "startFrom", numberAttribute], singleLine: ["singleLine", "singleLine", booleanAttribute] }, host: { classAttribute: "hljs" }, exportAs: ["kbqCodeBlockHighlight"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqCodeBlockHighlight, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.25", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqCodeBlockHighlight, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqCodeBlockHighlight, decorators: [{
             type: Directive,
             args: [{
                     selector: 'code[kbqCodeBlockHighlight]',
-                    exportAs: 'kbqCodeBlockHighlight',
                     host: {
                         class: 'hljs'
-                    }
+                    },
+                    exportAs: 'kbqCodeBlockHighlight'
                 }]
         }], propDecorators: { file: [{
                 type: Input,
                 args: [{ required: true }]
-            }], startFrom: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], singleLine: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }] } });
+            }], 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 });
@@ -510,10 +506,10 @@ const kbqCodeBlockFallbackFileNameProvider = (fileName) => ({
 });
 /** Marks a template as a custom tab link. */
 class KbqCodeBlockTabLinkContent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqCodeBlockTabLinkContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqCodeBlockTabLinkContent, isStandalone: true, selector: "ng-template[kbqCodeBlockTabLinkContent]", exportAs: ["kbqCodeBlockTabLinkContent"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqCodeBlockTabLinkContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqCodeBlockTabLinkContent, isStandalone: true, selector: "ng-template[kbqCodeBlockTabLinkContent]", exportAs: ["kbqCodeBlockTabLinkContent"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqCodeBlockTabLinkContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqCodeBlockTabLinkContent, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[kbqCodeBlockTabLinkContent]',
@@ -528,19 +524,23 @@ class KbqCodeBlock {
      * @docs-private
      */
     get calculatedMaxHeight() {
-        return this.maxHeight > 0 && !this.viewAll ? this.maxHeight : null;
+        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;
     }
@@ -549,6 +549,8 @@ class KbqCodeBlock {
      *
      * Files to display.
      */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get files() {
         return this._files;
     }
@@ -566,6 +568,8 @@ class KbqCodeBlock {
      * 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;
     }
@@ -597,51 +601,77 @@ class KbqCodeBlock {
      * has a scroll, and the calculated maximum height is not set.
      */
     get canCodeContentBeFocused() {
-        const element = this.scrollableCodeContent?.getElementRef().nativeElement;
+        const element = this.scrollableCodeContent()?.getElementRef().nativeElement;
         return element && this.hasScroll(element) && !this.calculatedMaxHeight;
     }
     constructor() {
+        this.copyButtonTooltip = viewChild('copyButtonTooltip', ...(ngDevMode ? [{ debugName: "copyButtonTooltip" }] : []));
+        /**
+         * 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.
+         *
+         * @docs-private
+         */
+        this.scrollableCodeContent = viewChild.required(CdkScrollable);
         /** @docs-private */
-        this.contentExceedsMaxHeight = signal(false);
+        this.highlight = viewChild.required(KbqCodeBlockHighlight);
+        /** @docs-private */
+        this.preElementRef = viewChild.required('codeBlockPre');
+        /** @docs-private */
+        this.contentExceedsMaxHeight = signal(false, ...(ngDevMode ? [{ debugName: "contentExceedsMaxHeight" }] : []));
         /** Whether to display line numbers. */
-        this.lineNumbers = false;
+        this.lineNumbers = input(false, ...(ngDevMode ? [{ debugName: "lineNumbers", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
         /** Whether the code block should be filled. */
-        this.filled = false;
+        this.filled = input(false, ...(ngDevMode ? [{ debugName: "filled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
         /** Added soft wrap toggle button.  */
-        this.canToggleSoftWrap = false;
+        this.canToggleSoftWrap = input(false, ...(ngDevMode ? [{ debugName: "canToggleSoftWrap", transform: booleanAttribute }] : [{ 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;
         /**
          * Output to support two-way binding on `[(softWrap)]` property.
          */
-        this.softWrapChange = new EventEmitter();
+        this.softWrapChange = output();
         /**
          * 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;
         /**
          * Output to support two-way binding on `[(viewAll)]` property.
          */
-        this.viewAllChange = new EventEmitter();
+        this.viewAllChange = output();
+        /**
+         * 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 }]));
         /** Added download code button. */
+        // TODO: Skipped for migration because:
+        //  Your application code writes to the input. This prevents migration.
         this.canDownload = false;
         /** Added copy code button. */
-        this.canCopy = true;
+        this.canCopy = input(true, ...(ngDevMode ? [{ debugName: "canCopy", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
         this._files = [];
         /** Defines which file (index) is active. */
+        // TODO: Skipped for migration because:
+        //  Your application code writes to the input. This prevents migration.
         this.activeFileIndex = 0;
         /**
          * Output to support two-way binding on `[(activeFileIndex)]` property.
          */
-        this.activeFileIndexChange = new EventEmitter();
+        this.activeFileIndexChange = output();
         /** Whether to hide border. */
-        this.noBorder = false;
+        this.noBorder = input(false, ...(ngDevMode ? [{ debugName: "noBorder", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
         this._hideTabs = false;
         /**
          * Output to support two-way binding on `[(hideTabs)]` property.
          */
-        this.hideTabsChange = new EventEmitter();
+        this.hideTabsChange = output();
         this._localeConfiguration = inject(KBQ_CODE_BLOCK_LOCALE_CONFIGURATION);
         /**
          * @docs-private
@@ -675,14 +705,15 @@ class KbqCodeBlock {
         this.localeService?.changes.pipe(takeUntilDestroyed()).subscribe(this.updateLocaleParams);
     }
     ngAfterViewInit() {
-        this.handleScroll();
         this.trackHoverState();
         this.setupContentOverflowDetection();
         // Setup initial actionbar display state
         this.setupActionbarDisplay();
-        this.copyButtonTooltip?.visibleChange.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((isVisible) => {
+        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,
@@ -707,9 +738,10 @@ class KbqCodeBlock {
     }
     /** Scrolls the code content to the specified position. */
     scrollTo(options) {
-        const scroll = () => this.scrollableCodeContent.scrollTo(options);
-        if (this.highlight?.pending()) {
-            toObservable(this.highlight.pending, { injector: this.injector })
+        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);
         }
@@ -748,8 +780,7 @@ class KbqCodeBlock {
      * Reacts to `hideTabs` changes dynamically.
      */
     trackHoverState() {
-        this.hideTabsChange
-            .asObservable()
+        outputToObservable(this.hideTabsChange)
             .pipe(startWith(this._hideTabs), switchMap((hideTabs) => {
             if (!hideTabs)
                 return EMPTY;
@@ -760,47 +791,23 @@ class KbqCodeBlock {
         });
     }
     setupContentOverflowDetection() {
-        if (!this.maxHeight)
+        if (!this.maxHeight())
             return;
         const checkOverflow = () => {
-            this.contentExceedsMaxHeight.set(this.preElementRef.nativeElement.offsetHeight > this.maxHeight);
+            this.contentExceedsMaxHeight.set(this.preElementRef().nativeElement.offsetHeight > this.maxHeight());
         };
         checkOverflow();
-        if (this.highlight?.pending()) {
-            toObservable(this.highlight.pending, { injector: this.injector })
+        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)
+            .observe(this.preElementRef().nativeElement)
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(checkOverflow);
     }
-    /**
-     * Handles the scroll event on the scrollable code content element and updates the header shadow accordingly.
-     */
-    handleScroll() {
-        this.scrollableCodeContent
-            .elementScrolled()
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => {
-            this.setupHeaderShadow(this.scrollableCodeContent.measureScrollOffset('top') > 0);
-        });
-    }
-    /**
-     * Adds or removes the shadow class from the code block based on the specified condition.
-     *
-     * @param shouldShowShadow - A boolean indicating whether to add or remove the shadow class.
-     */
-    setupHeaderShadow(shouldShowShadow) {
-        const className = 'kbq-code-block_header-with-shadow';
-        if (shouldShowShadow) {
-            this.renderer.addClass(this.elementRef.nativeElement, className);
-        }
-        else {
-            this.renderer.removeClass(this.elementRef.nativeElement, className);
-        }
-    }
     /**
      * Adds or removes the actionbar display class from the code block based on the specified condition.
      *
@@ -844,7 +851,7 @@ class KbqCodeBlock {
         event.preventDefault();
         this.toggleViewAll();
         if (this.canCodeContentBeFocused) {
-            this.focusMonitor.focusVia(this.scrollableCodeContent.getElementRef().nativeElement, 'keyboard');
+            this.focusMonitor.focusVia(this.scrollableCodeContent().getElementRef().nativeElement, 'keyboard');
         }
     }
     /**
@@ -857,8 +864,9 @@ class KbqCodeBlock {
      */
     copyCode() {
         const file = this.files[this.activeFileIndex];
-        if (this.clipboard.copy(file.content) && this.copyButtonTooltip) {
-            this.copyButtonTooltip.content = this.localeConfiguration.copiedTooltip;
+        const copyButtonTooltip = this.copyButtonTooltip();
+        if (this.clipboard.copy(file.content) && copyButtonTooltip) {
+            copyButtonTooltip.content = this.localeConfiguration.copiedTooltip;
         }
     }
     /**
@@ -890,10 +898,10 @@ class KbqCodeBlock {
         link.setAttribute('download', file.filename || this.fallbackFileName);
         link.click();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqCodeBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: KbqCodeBlock, isStandalone: true, selector: "kbq-code-block", inputs: { lineNumbers: ["lineNumbers", "lineNumbers", booleanAttribute], filled: ["filled", "filled", booleanAttribute], canToggleSoftWrap: ["canToggleSoftWrap", "canToggleSoftWrap", booleanAttribute], softWrap: ["softWrap", "softWrap", booleanAttribute], viewAll: ["viewAll", "viewAll", booleanAttribute], maxHeight: ["maxHeight", "maxHeight", numberAttribute], canLoad: ["canLoad", "canLoad", booleanAttribute], canDownload: ["canDownload", "canDownload", booleanAttribute], canCopy: ["canCopy", "canCopy", booleanAttribute], codeFiles: "codeFiles", files: "files", activeFileIndex: ["activeFileIndex", "activeFileIndex", numberAttribute], noBorder: ["noBorder", "noBorder", booleanAttribute], hideTabs: ["hideTabs", "hideTabs", booleanAttribute] }, 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": "hideTabs", "class.kbq-code-block_no-border": "noBorder || filled", "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 }, { propertyName: "scrollableCodeContent", first: true, predicate: CdkScrollable, descendants: true }, { propertyName: "highlight", first: true, predicate: KbqCodeBlockHighlight, descendants: true }, { propertyName: "preElementRef", first: true, predicate: ["codeBlockPre"], descendants: true }], exportAs: ["kbqCodeBlock"], ngImport: i0, template: "@let file = files[activeFileIndex];\n\n<div class=\"kbq-code-block__header\">\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                    [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    cdkMonitorElementFocus\n    cdkScrollable\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_header-with-shadow .kbq-code-block__header{box-shadow:var(--kbq-code-block-outline-header-scroll-shadow)}.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_header-with-shadow .kbq-code-block__header{box-shadow:var(--kbq-code-block-filled-header-scroll-shadow)}.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-header-scroll-shadow: var(--kbq-shadow-overflow-normal-bottom);--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-header-scroll-shadow: var(--kbq-shadow-overflow-normal-bottom);--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: ["forDisabledComponent", "ignoreTooltipPointerEvents", "hideWithTimeout", "kbqVisible", "kbqPlacement", "kbqRelativeToPointer", "kbqPlacementPriority", "kbqTooltip", "kbqTooltipDisabled", "kbqEnterDelay", "kbqLeaveDelay", "kbqTrigger", "kbqTooltipClass", "kbqTooltipContext", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset"], 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqCodeBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.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 }, 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 }, 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_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                    [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: ["forDisabledComponent", "ignoreTooltipPointerEvents", "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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqCodeBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqCodeBlock, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-code-block', imports: [
                         KbqTabsModule,
@@ -903,94 +911,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         CdkScrollableModule,
                         KbqToolTipModule,
                         KbqIconModule,
-                        NgTemplateOutlet
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'kbqCodeBlock', host: {
+                        NgTemplateOutlet,
+                        KbqOverflowShadowContainer,
+                        KbqOverflowShadowTop
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-code-block',
-                        '[class.kbq-code-block_filled]': 'filled',
-                        '[class.kbq-code-block_outline]': '!filled',
-                        '[class.kbq-code-block_hide-line-numbers]': '!lineNumbers',
+                        // 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_no-border]': 'noBorder || filled',
+                        '[class.kbq-code-block_no-border]': 'noBorder() || filled()',
                         '[class.kbq-code-block_soft-wrap]': 'softWrap',
                         '[class.kbq-code-block_view-all]': 'viewAll'
-                    }, template: "@let file = files[activeFileIndex];\n\n<div class=\"kbq-code-block__header\">\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                    [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    cdkMonitorElementFocus\n    cdkScrollable\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_header-with-shadow .kbq-code-block__header{box-shadow:var(--kbq-code-block-outline-header-scroll-shadow)}.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_header-with-shadow .kbq-code-block__header{box-shadow:var(--kbq-code-block-filled-header-scroll-shadow)}.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-header-scroll-shadow: var(--kbq-shadow-overflow-normal-bottom);--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-header-scroll-shadow: var(--kbq-shadow-overflow-normal-bottom);--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: ViewChild,
-                args: ['copyButtonTooltip']
-            }], scrollableCodeContent: [{
-                type: ViewChild,
-                args: [CdkScrollable]
-            }], highlight: [{
-                type: ViewChild,
-                args: [KbqCodeBlockHighlight]
-            }], preElementRef: [{
-                type: ViewChild,
-                args: ['codeBlockPre']
-            }], tabLinkTemplate: [{
+                    }, 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                    [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: Input,
-                args: [{ transform: booleanAttribute }]
-            }], filled: [{
+            }], 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 }]
-            }], canToggleSoftWrap: [{
+            }], softWrapChange: [{ type: i0.Output, args: ["softWrapChange"] }], viewAll: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], softWrap: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], softWrapChange: [{
-                type: Output
-            }], viewAll: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], viewAllChange: [{
-                type: Output
-            }], maxHeight: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], canLoad: [{
+            }], 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: Input,
-                args: [{ transform: booleanAttribute }]
-            }], codeFiles: [{
+            }], canCopy: [{ type: i0.Input, args: [{ isSignal: true, alias: "canCopy", required: false }] }], codeFiles: [{
                 type: Input
             }], files: [{
                 type: Input
             }], activeFileIndex: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
-            }], activeFileIndexChange: [{
-                type: Output
-            }], noBorder: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], hideTabs: [{
+            }], 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: Output
-            }] } });
+            }], hideTabsChange: [{ type: i0.Output, args: ["hideTabsChange"] }] } });
 
 const COMPONENTS = [
     KbqCodeBlock,
     KbqCodeBlockTabLinkContent
 ];
 class KbqCodeBlockModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqCodeBlockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: KbqCodeBlockModule, imports: [KbqCodeBlock,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqCodeBlockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqCodeBlockModule, imports: [KbqCodeBlock,
             KbqCodeBlockTabLinkContent], exports: [KbqCodeBlock,
             KbqCodeBlockTabLinkContent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqCodeBlockModule, imports: [KbqCodeBlock] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqCodeBlockModule, imports: [KbqCodeBlock] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqCodeBlockModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqCodeBlockModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: COMPONENTS,