@koobiq/components 19.8.3 → 20.1.0

package/code-block/index.d.ts

@@ -1 +1,383 @@
-export * from './public-api';
+import * as _angular_core from '@angular/core';
+import { InjectionToken, Provider, AfterViewInit, TemplateRef } from '@angular/core';
+import { CdkScrollable, ExtendedScrollToOptions } from '@angular/cdk/scrolling';
+import { KbqButtonStyles } from '@koobiq/components/button';
+import { KbqCodeBlockLocaleConfiguration, KbqComponentColors } from '@koobiq/components/core';
+import { HLJSApi, LanguageFn } from 'highlight.js';
+
+/**
+ * Context provided to the tab link template.
+ * @property $implicit - Code block file for the current tab.
+ * @property fallbackFileName - Displayed when the file has no explicit name.
+ */
+type KbqTabLinkTemplateContext = {
+    $implicit: KbqCodeBlockFile;
+    fallbackFileName: string;
+};
+/** Code block file object. */
+type KbqCodeBlockFile = {
+    /**
+     * Code content.
+     */
+    content: string;
+    /**
+     * File name, which will be displayed in UI and when downloading.
+     * If not provided, will be set to `KBQ_CODE_BLOCK_FALLBACK_FILE_NAME`.
+     */
+    filename?: string;
+    /**
+     * File language, requires for correct syntax highlighting.
+     * If not provided or invalid, will be set to `KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE`.
+     *
+     * List of supported languages:
+     * @link https://highlightjs.readthedocs.io/en/stable/supported-languages.html
+     */
+    language?: string;
+    /**
+     * Link to the file, which will be opened in a new window.
+     * Adds `openExternalSystem` button.
+     */
+    link?: string;
+};
+
+/** Localization configuration provider. */
+declare const KBQ_CODE_BLOCK_LOCALE_CONFIGURATION: InjectionToken<KbqCodeBlockLocaleConfiguration>;
+/** Utility provider for `KBQ_CODE_BLOCK_LOCALE_CONFIGURATION`. */
+declare const kbqCodeBlockLocaleConfigurationProvider: (configuration: KbqCodeBlockLocaleConfiguration) => Provider;
+/** Fallback file name for code block if file name is not specified. */
+declare const KBQ_CODE_BLOCK_FALLBACK_FILE_NAME: InjectionToken<string>;
+/** Utility provider for `KBQ_CODE_BLOCK_FALLBACK_FILE_NAME`. */
+declare const kbqCodeBlockFallbackFileNameProvider: (fileName: string) => Provider;
+/** Marks a template as a custom tab link. */
+declare class KbqCodeBlockTabLinkContent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqCodeBlockTabLinkContent, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqCodeBlockTabLinkContent, "ng-template[kbqCodeBlockTabLinkContent]", ["kbqCodeBlockTabLinkContent"], {}, {}, never, never, true, never>;
+}
+/**
+ * Component which highlights blocks of code.
+ */
+declare class KbqCodeBlock implements AfterViewInit {
+    private readonly 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
+     */
+    readonly scrollableCodeContent: _angular_core.Signal<CdkScrollable>;
+    /** @docs-private */
+    private readonly highlight;
+    /** @docs-private */
+    private readonly preElementRef;
+    /** @docs-private */
+    protected readonly contentExceedsMaxHeight: _angular_core.WritableSignal<boolean>;
+    /** @docs-private */
+    protected readonly tabLinkTemplate: TemplateRef<KbqTabLinkTemplateContext>;
+    /** Whether to display line numbers. */
+    readonly lineNumbers: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether the code block should be filled. */
+    readonly filled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Added soft wrap toggle button.  */
+    readonly canToggleSoftWrap: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether sequences of whitespace should be preserved. */
+    softWrap: boolean;
+    /**
+     * Output to support two-way binding on `[(softWrap)]` property.
+     */
+    readonly softWrapChange: _angular_core.OutputEmitterRef<boolean>;
+    /**
+     * Allows to view all the code, otherwise it will be hidden.
+     * Works only with `maxHeight` property.
+     */
+    viewAll: boolean;
+    /**
+     * Output to support two-way binding on `[(viewAll)]` property.
+     */
+    readonly viewAllChange: _angular_core.OutputEmitterRef<boolean>;
+    /**
+     * Maximum height of the code block content, other parts will be hidden.
+     * Can be toggled by `viewAll` property.
+     */
+    readonly maxHeight: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * @docs-private
+     */
+    protected get calculatedMaxHeight(): number | null;
+    /**
+     * @deprecated Will be removed in next major release, use `canDownload` instead.
+     *
+     * @docs-private
+     */
+    set canLoad(value: boolean);
+    /** Added download code button. */
+    canDownload: boolean;
+    /** Added copy code button. */
+    readonly canCopy: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * @deprecated Will be removed in next major release, use `files` instead.
+     */
+    set codeFiles(files: KbqCodeBlockFile[]);
+    /**
+     * @TODO Mark as `required`, after removing `codeFiles`
+     *
+     * Files to display.
+     */
+    get files(): KbqCodeBlockFile[];
+    set files(files: KbqCodeBlockFile[]);
+    private _files;
+    /** Defines which file (index) is active. */
+    activeFileIndex: number;
+    /**
+     * Output to support two-way binding on `[(activeFileIndex)]` property.
+     */
+    readonly activeFileIndexChange: _angular_core.OutputEmitterRef<number>;
+    /** Whether to hide border. */
+    readonly noBorder: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether to hide header tabs.
+     * Always `true` if there is only one file without filename.
+     * Makes actionbar floating if tabs are hidden.
+     */
+    get hideTabs(): boolean;
+    set hideTabs(value: boolean);
+    private _hideTabs;
+    /**
+     * Output to support two-way binding on `[(hideTabs)]` property.
+     */
+    readonly hideTabsChange: _angular_core.OutputEmitterRef<boolean>;
+    /**
+     * Component locale configuration.
+     *
+     * @docs-private
+     */
+    protected get localeConfiguration(): KbqCodeBlockLocaleConfiguration;
+    private _localeConfiguration;
+    /**
+     * Code content tab index.
+     *
+     * @docs-private
+     */
+    protected get codeContentTabIndex(): number;
+    /**
+     * Determines whether the code content can be focused.
+     *
+     * This checks if the scrollable code content element is present,
+     * has a scroll, and the calculated maximum height is not set.
+     */
+    private get canCodeContentBeFocused();
+    /**
+     * @docs-private
+     */
+    protected readonly componentColor: typeof KbqComponentColors;
+    /**
+     * @docs-private
+     */
+    protected readonly buttonStyle: typeof KbqButtonStyles;
+    private readonly elementRef;
+    private readonly injector;
+    private readonly changeDetectorRef;
+    private readonly localeService;
+    private readonly destroyRef;
+    private readonly renderer;
+    private readonly platform;
+    private readonly focusMonitor;
+    private readonly clipboard;
+    private readonly domSanitizer;
+    private readonly document;
+    private readonly sharedResizeObserver;
+    /**
+     * @docs-private
+     */
+    protected readonly fallbackFileName: string;
+    private readonly window;
+    constructor();
+    ngAfterViewInit(): void;
+    /**
+     * Toggles the `viewAll` property.
+     *
+     * When `viewAll` is set to `true`, the content of the code block will be
+     * displayed in its entirety. When set to `false`, the content will be
+     * limited to the `maxHeight` property. If the content exceeds the
+     * `maxHeight`, it will be scrolled to the top and the `viewAll` button
+     * will be displayed.
+     */
+    toggleViewAll(): void;
+    /** Scrolls the code content to the specified position. */
+    scrollTo(options: ExtendedScrollToOptions): void;
+    /**
+     * Toggles `softWrap` property.
+     *
+     * When `softWrap` is set to `true`, the content of the code block will be
+     * wrapped if it exceeds the height of the component. When set to `false`
+     * the content will not be wrapped.
+     */
+    toggleSoftWrap(): void;
+    /**
+     * Handles the change of the selected tab by updating the active file index
+     * and scrolling to the top of the scrollable content.
+     *
+     * @param index - The index of the newly selected tab.
+     *
+     * @docs-private
+     */
+    protected onSelectedTabChange(index: number): void;
+    /**
+     * Tracks hover events to show/hide the actionbar when `hideTabs` is `true`.
+     * Reacts to `hideTabs` changes dynamically.
+     */
+    private trackHoverState;
+    private setupContentOverflowDetection;
+    /**
+     * Adds or removes the actionbar display class from the code block based on the specified condition.
+     *
+     * The actionbar is always visible on mobile devices and when the tabs are visible.
+     * Otherwise, the actionbar is only visible when the mouse is hovered over the code block.
+     *
+     * @param shouldShowActionbar - A boolean indicating whether the actionbar should be visible.
+     */
+    private setupActionbarDisplay;
+    /** Whether the element has scroll. */
+    private hasScroll;
+    /**
+     * Handles the enter keydown event on `viewAll` button.
+     *
+     * @docs-private
+     */
+    protected onViewAllEnterKeydown(event: Event): void;
+    private updateLocaleParams;
+    /**
+     * Copies the file code to the clipboard.
+     *
+     * If the copy was successful, the copy button tooltip content is updated
+     * to show the "copied" message.
+     *
+     * @docs-private
+     */
+    protected copyCode(): void;
+    /**
+     * Opens the file link in a new window.
+     *
+     * @docs-private
+     */
+    protected openLink(): void;
+    /**
+     * Downloads the file as a blob.
+     *
+     * Creates a link with a blob as href and the file name as download attribute.
+     * Then simulates a click event on the link to initiate the download.
+     *
+     * @docs-private
+     */
+    protected downloadCode(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqCodeBlock, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqCodeBlock, "kbq-code-block", ["kbqCodeBlock"], { "lineNumbers": { "alias": "lineNumbers"; "required": false; "isSignal": true; }; "filled": { "alias": "filled"; "required": false; "isSignal": true; }; "canToggleSoftWrap": { "alias": "canToggleSoftWrap"; "required": false; "isSignal": true; }; "softWrap": { "alias": "softWrap"; "required": false; }; "viewAll": { "alias": "viewAll"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "canLoad": { "alias": "canLoad"; "required": false; }; "canDownload": { "alias": "canDownload"; "required": false; }; "canCopy": { "alias": "canCopy"; "required": false; "isSignal": true; }; "codeFiles": { "alias": "codeFiles"; "required": false; }; "files": { "alias": "files"; "required": false; }; "activeFileIndex": { "alias": "activeFileIndex"; "required": false; }; "noBorder": { "alias": "noBorder"; "required": false; "isSignal": true; }; "hideTabs": { "alias": "hideTabs"; "required": false; }; }, { "softWrapChange": "softWrapChange"; "viewAllChange": "viewAllChange"; "activeFileIndexChange": "activeFileIndexChange"; "hideTabsChange": "hideTabsChange"; }, ["tabLinkTemplate"], never, true, never>;
+    static ngAcceptInputType_softWrap: unknown;
+    static ngAcceptInputType_viewAll: unknown;
+    static ngAcceptInputType_canLoad: unknown;
+    static ngAcceptInputType_canDownload: unknown;
+    static ngAcceptInputType_activeFileIndex: unknown;
+    static ngAcceptInputType_hideTabs: unknown;
+}
+
+/** `highlight.js` configuration */
+type KbqCodeBlockHighlightJsConfig = Partial<{
+    /** Lazy loader for highlight.js core (no bundled languages). When omitted, the full bundle is loaded. */
+    core: () => Promise<{
+        default: HLJSApi;
+    }>;
+    /** Map of language name to lazy loader for that language's LanguageFn. */
+    languages: Record<string, () => Promise<{
+        default: LanguageFn;
+    }>>;
+}>;
+/**
+ * Injection token for configuring `KbqCodeBlockHighlightJsConfig`.
+ */
+declare const KBQ_CODE_BLOCK_HIGHLIGHT_JS_CONFIG: InjectionToken<Partial<{
+    /** Lazy loader for highlight.js core (no bundled languages). When omitted, the full bundle is loaded. */
+    core: () => Promise<{
+        default: HLJSApi;
+    }>;
+    /** Map of language name to lazy loader for that language's LanguageFn. */
+    languages: Record<string, () => Promise<{
+        default: LanguageFn;
+    }>>;
+}>>;
+/**
+ * Utility provider for `KBQ_CODE_BLOCK_HIGHLIGHT_JS_CONFIG`.
+ *
+ * @example
+ * ```ts
+ * providers: [
+ *   kbqCodeBlockHighlightJsConfigProvider({
+ *     core: () => import('highlight.js/lib/core'),
+ *     languages: {
+ *       typescript: () => import('highlight.js/lib/languages/typescript'),
+ *       css: () => import('highlight.js/lib/languages/css'),
+ *       html: () => import('highlight.js/lib/languages/xml')
+ *     }
+ *   })
+ * ]
+ * ```
+ */
+declare const kbqCodeBlockHighlightJsConfigProvider: (options: KbqCodeBlockHighlightJsConfig) => Provider;
+/**
+ * Fallback language for code block if language is not supported/specified.
+ *
+ * List of supported languages:
+ * @link https://highlightjs.readthedocs.io/en/stable/supported-languages.html
+ */
+declare const KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE: InjectionToken<string>;
+/** Utility provider for `KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE`. */
+declare const kbqCodeBlockFallbackFileLanguageProvider: (language: string) => Provider;
+/**
+ * Directive which applies syntax highlighting to the code block content.
+ *
+ * @docs-private
+ */
+declare class KbqCodeBlockHighlight {
+    private readonly nativeElement;
+    private readonly document;
+    private readonly renderer;
+    private readonly domSanitizer;
+    private readonly fallbackFileLanguage;
+    private readonly window;
+    private readonly config;
+    private hljs;
+    private readonly _pending;
+    /**
+     * Whether syntax highlighting is pending.
+     *
+     * @docs-private
+     */
+    readonly pending: _angular_core.Signal<boolean>;
+    /** The code file. */
+    set file(file: KbqCodeBlockFile);
+    /** The starting line number. */
+    readonly startFrom: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Whether to display line numbers for single line code block. */
+    readonly singleLine: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    private load;
+    private highlight;
+    private warn;
+    /** Initialize the HighlightJS line numbers plugin after the hljs instance is available. */
+    private initLineNumbersPlugin;
+    /**
+     * This method is not intended for editing.
+     * Changes may lead to unpredictable behavior.
+     * Source code: https://github.com/wcoder/highlightjs-line-numbers.js/blob/v2.9.0/src/highlightjs-line-numbers.js
+     */
+    private highlightJSLineNumbersPlugin;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqCodeBlockHighlight, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqCodeBlockHighlight, "code[kbqCodeBlockHighlight]", ["kbqCodeBlockHighlight"], { "file": { "alias": "file"; "required": true; }; "startFrom": { "alias": "startFrom"; "required": false; "isSignal": true; }; "singleLine": { "alias": "singleLine"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class KbqCodeBlockModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqCodeBlockModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<KbqCodeBlockModule, never, [typeof KbqCodeBlock, typeof KbqCodeBlockTabLinkContent], [typeof KbqCodeBlock, typeof KbqCodeBlockTabLinkContent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<KbqCodeBlockModule>;
+}
+
+export { KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE, KBQ_CODE_BLOCK_FALLBACK_FILE_NAME, KBQ_CODE_BLOCK_HIGHLIGHT_JS_CONFIG, KBQ_CODE_BLOCK_LOCALE_CONFIGURATION, KbqCodeBlock, KbqCodeBlockHighlight, KbqCodeBlockModule, KbqCodeBlockTabLinkContent, kbqCodeBlockFallbackFileLanguageProvider, kbqCodeBlockFallbackFileNameProvider, kbqCodeBlockHighlightJsConfigProvider, kbqCodeBlockLocaleConfigurationProvider };
+export type { KbqCodeBlockFile, KbqCodeBlockHighlightJsConfig, KbqTabLinkTemplateContext };

package/content-panel/content-panel.scss

@@ -7,14 +7,6 @@
     box-sizing: border-box;
     position: relative;
 
-    &.kbq-content-panel_header-with-shadow .kbq-content-panel-header {
-        box-shadow: var(--kbq-content-panel-header-overflow-box-shadow);
-    }
-
-    &.kbq-content-panel_footer-with-shadow .kbq-content-panel-footer {
-        box-shadow: var(--kbq-content-panel-footer-overflow-box-shadow);
-    }
-
     .kbq-content-panel__content {
         display: flex;
         flex: 1;

package/content-panel/index.d.ts

@@ -1,2 +1,158 @@
-export * from './content-panel';
-export * from './module';
+import * as _koobiq_components_core from '@koobiq/components/core';
+import { KbqComponentColors, KbqOverflowShadowContainer } from '@koobiq/components/core';
+import * as i0 from '@angular/core';
+import { KbqButtonStyles } from '@koobiq/components/button';
+import { KbqResizerSizeChangeEvent } from '@koobiq/components/resizer';
+import { KbqScrollbar } from '@koobiq/components/scrollbar';
+
+declare class KbqContentPanelAside {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqContentPanelAside, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqContentPanelAside, "kbq-content-panel-aside", ["kbqContentPanelAside"], {}, {}, never, ["*"], true, never>;
+}
+declare class KbqContentPanelHeaderTitle {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqContentPanelHeaderTitle, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqContentPanelHeaderTitle, "[kbqContentPanelHeaderTitle]", ["kbqContentPanelHeaderTitle"], {}, {}, never, never, true, never>;
+}
+declare class KbqContentPanelHeaderActions {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqContentPanelHeaderActions, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqContentPanelHeaderActions, "[kbqContentPanelHeaderActions]", ["kbqContentPanelHeaderActions"], {}, {}, never, never, true, never>;
+}
+declare class KbqContentPanelHeader {
+    /**
+     * @docs-private
+     */
+    protected readonly contentPanelContainer: KbqContentPanelContainer;
+    /** @docs-private */
+    protected readonly contentPanel: KbqContentPanel;
+    /**
+     * @docs-private
+     */
+    protected readonly buttonStyles: typeof KbqButtonStyles;
+    /**
+     * @docs-private
+     */
+    protected readonly componentColors: typeof KbqComponentColors;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqContentPanelHeader, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqContentPanelHeader, "kbq-content-panel-header", never, {}, {}, never, ["[kbqContentPanelHeaderTitle]", "[kbqContentPanelHeaderActions]", "*"], true, never>;
+}
+declare class KbqContentPanelBody {
+    /** @docs-private */
+    readonly scrollbar: i0.Signal<KbqScrollbar>;
+    /** @docs-private */
+    readonly overflowContainer: i0.Signal<KbqOverflowShadowContainer>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqContentPanelBody, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqContentPanelBody, "kbq-content-panel-body", ["kbqContentPanelBody"], {}, {}, never, ["*"], true, never>;
+}
+declare class KbqContentPanelFooter {
+    /** @docs-private */
+    protected readonly contentPanel: KbqContentPanel;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqContentPanelFooter, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqContentPanelFooter, "kbq-content-panel-footer", never, {}, {}, never, ["*"], true, never>;
+}
+declare class KbqContentPanel {
+    private readonly contentPanelBody;
+    /** Current body overflow state. Read by the header and footer to render their `box-shadow`. */
+    readonly bodyOverflow: i0.Signal<_koobiq_components_core.KbqOverflowShadowState>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqContentPanel, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqContentPanel, "kbq-content-panel", never, {}, {}, ["contentPanelBody"], ["kbq-content-panel-aside", "kbq-content-panel-header", "kbq-content-panel-body", "kbq-content-panel-footer"], true, never>;
+}
+declare class KbqContentPanelContainer {
+    /**
+     * Whether the content panel is opened.
+     *
+     * @default false
+     */
+    readonly opened: i0.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Emits event when the content panel opened state is changed.
+     */
+    readonly openedChange: i0.OutputEmitterRef<boolean>;
+    /**
+     * Whether the content panel can not be closed by clicking on the close button or pressing the ESCAPE key.
+     *
+     * @default false
+     */
+    readonly disableClose: i0.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether the content panel can not be closed by pressing the ESCAPE key.
+     */
+    readonly disableCloseByEscape: i0.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether the content panel resizer is disabled.
+     */
+    readonly disableResizer: i0.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Minimum width of the `KbqContentPanel`.
+     *
+     * @default 480
+     */
+    readonly minWidth: i0.InputSignalWithTransform<number, unknown>;
+    /**
+     * Width of the `KbqContentPanel`.
+     *
+     * @default 640
+     */
+    readonly width: i0.InputSignalWithTransform<number, unknown>;
+    /**
+     * Max width of the `KbqContentPanel`.
+     *
+     * @default 800
+     */
+    readonly maxWidth: i0.InputSignalWithTransform<number, unknown>;
+    /**
+     * @docs-private
+     */
+    protected readonly openedState: i0.WritableSignal<boolean>;
+    /**
+     * @docs-private
+     */
+    protected readonly widthState: i0.WritableSignal<number>;
+    /**
+     * Whether the content panel is opened.
+     */
+    readonly isOpened: i0.Signal<boolean>;
+    /**
+     * @docs-private
+     */
+    protected readonly contentAnimationState: i0.Signal<{
+        value: boolean;
+        params: {
+            marginRight: number;
+        };
+    }>;
+    constructor();
+    /**
+     * Toggles the content panel opened state.
+     */
+    toggle(): void;
+    /**
+     * Opens the content panel.
+     */
+    open(): void;
+    /**
+     * Closes the content panel.
+     */
+    close(): void;
+    /**
+     * @docs-private
+     */
+    protected handleResizerDBLClick(event: MouseEvent): void;
+    /**
+     * @docs-private
+     */
+    protected handleResizerSizeChange({ width }: KbqResizerSizeChangeEvent): void;
+    /**
+     * @docs-private
+     */
+    protected handleEscapeKeydown(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqContentPanelContainer, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqContentPanelContainer, "kbq-content-panel-container", ["kbqContentPanelContainer"], { "opened": { "alias": "opened"; "required": false; "isSignal": true; }; "disableClose": { "alias": "disableClose"; "required": false; "isSignal": true; }; "disableCloseByEscape": { "alias": "disableCloseByEscape"; "required": false; "isSignal": true; }; "disableResizer": { "alias": "disableResizer"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; }, { "openedChange": "openedChange"; }, never, ["*", "kbq-content-panel"], true, never>;
+}
+
+declare class KbqContentPanelModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqContentPanelModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqContentPanelModule, never, [typeof KbqContentPanelContainer, typeof KbqContentPanel, typeof KbqContentPanelAside, typeof KbqContentPanelHeader, typeof KbqContentPanelHeaderTitle, typeof KbqContentPanelHeaderActions, typeof KbqContentPanelBody, typeof KbqContentPanelFooter], [typeof KbqContentPanelContainer, typeof KbqContentPanel, typeof KbqContentPanelAside, typeof KbqContentPanelHeader, typeof KbqContentPanelHeaderTitle, typeof KbqContentPanelHeaderActions, typeof KbqContentPanelBody, typeof KbqContentPanelFooter]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqContentPanelModule>;
+}
+
+export { KbqContentPanel, KbqContentPanelAside, KbqContentPanelBody, KbqContentPanelContainer, KbqContentPanelFooter, KbqContentPanelHeader, KbqContentPanelHeaderActions, KbqContentPanelHeaderTitle, KbqContentPanelModule };

package/core/highlight/_highlight-theme.scss

@@ -6,3 +6,12 @@
         background-color: transparent;
     }
 }
+
+@mixin kbq-highlight-background-theme() {
+    .kbq-highlight-background {
+        color: var(--kbq-foreground-contrast);
+        background-color: var(--kbq-background-highlight);
+
+        border-radius: var(--kbq-size-xxs);
+    }
+}