@koobiq/components 20.4.2 → 21.0.1

package/{code-block/index.d.ts → types/koobiq-components-code-block.d.ts}

@@ -1,14 +1,14 @@
 import * as _angular_core from '@angular/core';
 import { InjectionToken, AfterViewInit, TemplateRef, Provider } from '@angular/core';
-import { CdkScrollable, ExtendedScrollToOptions } from '@angular/cdk/scrolling';
 import { KbqButtonStyles } from '@koobiq/components/button';
-import { KbqCodeBlockLocaleConfiguration, KbqComponentColors } from '@koobiq/components/core';
+import * as i1 from '@koobiq/components/core';
+import { KbqCodeBlockLocaleConfiguration, KbqComponentColors, KbqDeepPartial } from '@koobiq/components/core';
+import { KbqScrollbarScrollToOptions } from '@koobiq/components/scrollbar';
 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.
+ * Context provided to the tab link template: `$implicit` is the code block file for the current tab, and
+ * `fallbackFileName` is displayed when the file has no explicit name.
  */
 type KbqTabLinkTemplateContext = {
     $implicit: KbqCodeBlockFile;
@@ -26,11 +26,12 @@ type KbqCodeBlockFile = {
      */
     filename?: string;
     /**
-     * File language, requires for correct syntax highlighting.
-     * If not provided or invalid, will be set to `KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE`.
+     * File language, required for correct syntax highlighting. It has to be registered in `languages` of
+     * `KbqCodeBlockHighlightJsConfig`, unless the full bundle of highlight.js is loaded. If not provided or not
+     * registered, will be set to `KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE`, or to `plaintext` if that is not registered
+     * either.
      *
-     * List of supported languages:
-     * @link https://highlightjs.readthedocs.io/en/stable/supported-languages.html
+     * See the [list of supported languages](https://github.com/highlightjs/highlight.js/blob/11-stable/SUPPORTED_LANGUAGES.md).
      */
     language?: string;
     /**
@@ -42,8 +43,11 @@ type KbqCodeBlockFile = {
 
 /** 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;
+/**
+ * Utility provider for `KBQ_CODE_BLOCK_LOCALE_CONFIGURATION`. Only the strings you pass are overridden;
+ * the rest keep following the active locale.
+ */
+declare const kbqCodeBlockLocaleConfigurationProvider: (configuration: KbqDeepPartial<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`. */
@@ -71,39 +75,53 @@ declare class KbqCodeBlockTabLinkContent {
 declare class KbqCodeBlock implements AfterViewInit {
     private readonly copyButtonTooltip;
     private readonly defaultOptions;
+    private readonly highlight;
+    private readonly scrollbarViewport;
+    /** Memoized so every waiter shares one `toObservable` effect instead of installing one each. */
+    private highlightPending?;
+    private readonly preElementRef;
+    private readonly codeElementRef;
     /**
-     * Reference to the scrollable code content.
-     *
-     * @deprecated Use `scrollTo` method instead, will be removed from public API (mark as private) in the next major release.
+     * Whether the code runs past `maxHeight`, or `undefined` until the browser has measured it. The server
+     * never measures, and its markup keeps the limit so that a block hydrated later holds its height.
      *
      * @docs-private
      */
-    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>;
+    protected readonly contentExceedsMaxHeight: _angular_core.WritableSignal<boolean | undefined>;
     /** @docs-private */
-    protected readonly tabLinkTemplate: TemplateRef<KbqTabLinkTemplateContext>;
+    protected readonly tabLinkTemplate: _angular_core.Signal<TemplateRef<KbqTabLinkTemplateContext> | undefined>;
     /** 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>;
+    /**
+     * Backing input of `softWrap`. Bind through the `softWrap` attribute; read and write the signal.
+     *
+     * `model()` cannot carry the `booleanAttribute` transform a valueless attribute needs, and an input
+     * is read-only while `toggleSoftWrap()` writes this as well as the binding - hence the pair.
+     *
+     * @docs-private
+     */
+    readonly softWrapInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Whether sequences of whitespace should be preserved. */
-    softWrap: boolean;
+    readonly softWrap: _angular_core.WritableSignal<boolean>;
     /**
      * Output to support two-way binding on `[(softWrap)]` property.
      */
     readonly softWrapChange: _angular_core.OutputEmitterRef<boolean>;
+    /**
+     * Backing input of `viewAll`, in the same shape as `softWrapInput`.
+     *
+     * @docs-private
+     */
+    readonly viewAllInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * Allows to view all the code, otherwise it will be hidden.
      * Works only with `maxHeight` property.
      */
-    viewAll: boolean;
+    readonly viewAll: _angular_core.WritableSignal<boolean>;
     /**
      * Output to support two-way binding on `[(viewAll)]` property.
      */
@@ -112,37 +130,55 @@ declare class KbqCodeBlock implements AfterViewInit {
      * 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>;
+    readonly maxHeight: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
     /**
      * @docs-private
      */
-    protected get calculatedMaxHeight(): number | null;
+    protected readonly calculatedMaxHeight: _angular_core.Signal<number | null>;
     /**
-     * @deprecated Will be removed in next major release, use `canDownload` instead.
+     * Backing input of `canDownload`.
      *
      * @docs-private
      */
-    set canLoad(value: boolean);
+    readonly canDownloadInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Added download code button. */
-    canDownload: boolean;
+    readonly canDownload: _angular_core.WritableSignal<boolean>;
     /** Added copy code button. */
     readonly canCopy: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Whether the actionbar should remain visible when tabs are hidden. */
     readonly alwaysShowActionbar: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
-     * @deprecated Will be removed in next major release, use `files` instead.
+     * Backing input of `files`.
+     *
+     * @docs-private
      */
-    set codeFiles(files: KbqCodeBlockFile[]);
+    readonly filesInput: _angular_core.InputSignal<KbqCodeBlockFile[]>;
+    /** Files to display. */
+    readonly files: _angular_core.WritableSignal<KbqCodeBlockFile[]>;
     /**
-     * @TODO Mark as `required`, after removing `codeFiles`
+     * Backing input of `activeFileIndex`. `numberAttribute` yields NaN for anything not cleanly numeric,
+     * and an unbound `index?: number` reaches it as `undefined`, so the transform floors both at 0 rather
+     * than letting NaN through a signal typed `number`.
      *
-     * Files to display.
+     * @docs-private
      */
-    get files(): KbqCodeBlockFile[];
-    set files(files: KbqCodeBlockFile[]);
-    private _files;
+    readonly activeFileIndexInput: _angular_core.InputSignalWithTransform<number, unknown>;
     /** Defines which file (index) is active. */
-    activeFileIndex: number;
+    readonly activeFileIndex: _angular_core.WritableSignal<number>;
+    /**
+     * Index of the file actually rendered. `files` and `activeFileIndex` are written one after the other,
+     * so either order leaves the pair briefly inconsistent: the render falls back to the first file rather
+     * than resetting the input, which would write back into a `[(activeFileIndex)]` mid-update.
+     *
+     * @docs-private
+     */
+    protected readonly renderedFileIndex: _angular_core.Signal<number>;
+    /**
+     * The file being rendered, or `undefined` while `files` is empty.
+     *
+     * @docs-private
+     */
+    protected readonly activeFile: _angular_core.Signal<KbqCodeBlockFile | undefined>;
     /**
      * Output to support two-way binding on `[(activeFileIndex)]` property.
      */
@@ -150,13 +186,26 @@ declare class KbqCodeBlock implements AfterViewInit {
     /** 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.
+     * Backing input of `hideTabs`.
+     *
+     * @docs-private
+     */
+    readonly hideTabsInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether to hide header tabs. A single file without a filename hides them regardless - read
+     * `tabsHidden` for what the header actually does.
      * Makes actionbar floating if tabs are hidden.
      */
-    get hideTabs(): boolean;
-    set hideTabs(value: boolean);
-    private readonly _hideTabs;
+    readonly hideTabs: _angular_core.WritableSignal<boolean>;
+    /**
+     * A lone file with no filename has nothing to label a tab with, so the bar is hidden whatever was
+     * bound. Derived rather than written into `hideTabs`: the write latched the bar off for the life of
+     * the component, so naming the files later never brought it back, and it re-emitted `hideTabsChange`
+     * on every `files` assignment.
+     *
+     * @docs-private
+     */
+    readonly tabsHidden: _angular_core.Signal<boolean>;
     private readonly actionbarHovered;
     /**
      * Output to support two-way binding on `[(hideTabs)]` property.
@@ -167,19 +216,10 @@ declare class KbqCodeBlock implements AfterViewInit {
      *
      * @docs-private
      */
-    protected get localeConfiguration(): KbqCodeBlockLocaleConfiguration;
-    private _localeConfiguration;
-    /**
-     * Code content tab index.
-     *
-     * @docs-private
-     */
-    protected get codeContentTabIndex(): number;
+    protected readonly localeConfiguration: _angular_core.Signal<KbqCodeBlockLocaleConfiguration>;
     /**
-     * Determines whether the code content can be focused.
-     *
-     * This checks if the scrollable code content element is present,
-     * has a scroll, and the calculated maximum height is not set.
+     * Whether the code content scrolls while nothing collapses it, which leaves keyboard users a way to scroll it.
+     * Collapsed under `maxHeight` it is clipped instead, and the "view all" button is the way in.
      */
     private get canCodeContentBeFocused();
     /**
@@ -192,8 +232,6 @@ declare class KbqCodeBlock implements AfterViewInit {
     protected readonly buttonStyle: typeof KbqButtonStyles;
     private readonly elementRef;
     private readonly injector;
-    private readonly changeDetectorRef;
-    private readonly localeService;
     private readonly destroyRef;
     private readonly platform;
     private readonly focusMonitor;
@@ -221,7 +259,7 @@ declare class KbqCodeBlock implements AfterViewInit {
      */
     toggleViewAll(): void;
     /** Scrolls the code content to the specified position. */
-    scrollTo(options: ExtendedScrollToOptions): void;
+    scrollTo(options: KbqScrollbarScrollToOptions): void;
     /**
      * Toggles `softWrap` property.
      *
@@ -241,7 +279,23 @@ declare class KbqCodeBlock implements AfterViewInit {
     protected onSelectedTabChange(index: number): void;
     /** Tracks hover when tabs are hidden and `alwaysShowActionbar` is disabled. */
     private trackHoverState;
+    /**
+     * Briefly reveals the scrollbar once highlighting settles, so whether the code scrolls is answered
+     * on arrival rather than only after the pointer enters the block. Switching files needs nothing of
+     * its own: `onSelectedTabChange` scrolls the content back to the top, and that scroll reveals the
+     * track by itself.
+     *
+     * A viewport with nothing to scroll paints no track, so this stays silent for code that fits.
+     */
+    private revealScrollbarOnHighlight;
+    /**
+     * Emits every time highlighting finishes. Built once and reused: `toObservable` installs an Angular
+     * effect that lives as long as the injector, so creating one per call — as `scrollTo` did on every
+     * tab click while a file was still highlighting — left an effect behind each time.
+     */
+    private highlightSettled;
     private setupContentOverflowDetection;
+    private measureContentOverflow;
     /** Whether the element has scroll. */
     private hasScroll;
     /**
@@ -250,7 +304,6 @@ declare class KbqCodeBlock implements AfterViewInit {
      * @docs-private
      */
     protected onViewAllEnterKeydown(event: Event): void;
-    private updateLocaleParams;
     /**
      * Copies the file code to the clipboard.
      *
@@ -276,22 +329,29 @@ declare class KbqCodeBlock implements AfterViewInit {
      */
     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; }; "alwaysShowActionbar": { "alias": "alwaysShowActionbar"; "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;
+    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; }; "softWrapInput": { "alias": "softWrap"; "required": false; "isSignal": true; }; "viewAllInput": { "alias": "viewAll"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "canDownloadInput": { "alias": "canDownload"; "required": false; "isSignal": true; }; "canCopy": { "alias": "canCopy"; "required": false; "isSignal": true; }; "alwaysShowActionbar": { "alias": "alwaysShowActionbar"; "required": false; "isSignal": true; }; "filesInput": { "alias": "files"; "required": false; "isSignal": true; }; "activeFileIndexInput": { "alias": "activeFileIndex"; "required": false; "isSignal": true; }; "noBorder": { "alias": "noBorder"; "required": false; "isSignal": true; }; "hideTabsInput": { "alias": "hideTabs"; "required": false; "isSignal": true; }; }, { "softWrapChange": "softWrapChange"; "viewAllChange": "viewAllChange"; "activeFileIndexChange": "activeFileIndexChange"; "hideTabsChange": "hideTabsChange"; }, ["tabLinkTemplate"], never, true, [{ directive: typeof i1.KbqLocaleOverridesDirective; inputs: { "kbqLocaleOverrides": "localeOverrides"; }; outputs: {}; }]>;
 }
 
-/** `highlight.js` configuration */
+/**
+ * Configuration of highlight.js, which highlights the code of a code block: how to load it and which languages to
+ * register. Without a configuration, the code block loads the highlight.js core, which has no languages, and shows the
+ * code as plain text. Provide it with `kbqCodeBlockHighlightJsConfigProvider`.
+ */
 type KbqCodeBlockHighlightJsConfig = Partial<{
-    /** Lazy loader for highlight.js core (no bundled languages). When omitted, the full bundle is loaded. */
+    /**
+     * Lazy loader for the highlight.js instance. The core has no languages: register the ones the files use in
+     * `languages`, or load all of them with `() => import('highlight.js')`, the full bundle of about 1 MB.
+     * Defaults to `() => import('highlight.js/lib/core')`.
+     */
     core: () => Promise<{
         default: HLJSApi;
     }>;
-    /** Map of language name to lazy loader for that language's LanguageFn. */
+    /**
+     * Map of language name to lazy loader for that language's LanguageFn. A language of highlight.js loads from
+     * `highlight.js/lib/languages/<name>`, where `<name>` is the name of its file in
+     * [src/languages](https://github.com/highlightjs/highlight.js/tree/11-stable/src/languages). Plain text needs no
+     * entry: the code block registers it as the fallback language.
+     */
     languages: Record<string, () => Promise<{
         default: LanguageFn;
     }>>;
@@ -300,11 +360,20 @@ type KbqCodeBlockHighlightJsConfig = Partial<{
  * 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. */
+    /**
+     * Lazy loader for the highlight.js instance. The core has no languages: register the ones the files use in
+     * `languages`, or load all of them with `() => import('highlight.js')`, the full bundle of about 1 MB.
+     * Defaults to `() => import('highlight.js/lib/core')`.
+     */
     core: () => Promise<{
         default: HLJSApi;
     }>;
-    /** Map of language name to lazy loader for that language's LanguageFn. */
+    /**
+     * Map of language name to lazy loader for that language's LanguageFn. A language of highlight.js loads from
+     * `highlight.js/lib/languages/<name>`, where `<name>` is the name of its file in
+     * [src/languages](https://github.com/highlightjs/highlight.js/tree/11-stable/src/languages). Plain text needs no
+     * entry: the code block registers it as the fallback language.
+     */
     languages: Record<string, () => Promise<{
         default: LanguageFn;
     }>>;
@@ -316,7 +385,6 @@ declare const KBQ_CODE_BLOCK_HIGHLIGHT_JS_CONFIG: InjectionToken<Partial<{
  * ```ts
  * providers: [
  *   kbqCodeBlockHighlightJsConfigProvider({
- *     core: () => import('highlight.js/lib/core'),
  *     languages: {
  *       typescript: () => import('highlight.js/lib/languages/typescript'),
  *       css: () => import('highlight.js/lib/languages/css'),
@@ -328,10 +396,11 @@ declare const KBQ_CODE_BLOCK_HIGHLIGHT_JS_CONFIG: InjectionToken<Partial<{
  */
 declare const kbqCodeBlockHighlightJsConfigProvider: (options: KbqCodeBlockHighlightJsConfig) => Provider;
 /**
- * Fallback language for code block if language is not supported/specified.
+ * Fallback language for code block if language is not supported/specified. It has to be registered in `languages` of
+ * `KbqCodeBlockHighlightJsConfig`, unless it is plain text or the full bundle of highlight.js is loaded, or the code
+ * block falls back to `plaintext`.
  *
- * List of supported languages:
- * @link https://highlightjs.readthedocs.io/en/stable/supported-languages.html
+ * See the [list of supported languages](https://github.com/highlightjs/highlight.js/blob/11-stable/SUPPORTED_LANGUAGES.md).
  */
 declare const KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE: InjectionToken<string>;
 /** Utility provider for `KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE`. */
@@ -343,13 +412,12 @@ declare const kbqCodeBlockFallbackFileLanguageProvider: (language: string) => Pr
  */
 declare class KbqCodeBlockHighlight {
     private readonly nativeElement;
-    private readonly document;
     private readonly renderer;
     private readonly domSanitizer;
+    private readonly pendingTasks;
+    private readonly loader;
     private readonly fallbackFileLanguage;
-    private readonly window;
     private readonly config;
-    private hljs;
     private readonly _pending;
     /**
      * Whether syntax highlighting is pending.
@@ -358,24 +426,18 @@ declare class KbqCodeBlockHighlight {
      */
     readonly pending: _angular_core.Signal<boolean>;
     /** The code file. */
-    set file(file: KbqCodeBlockFile);
+    readonly file: _angular_core.InputSignal<KbqCodeBlockFile>;
+    constructor();
     /** 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;
+    /** The fallback language, or plain text, which the loader registers on every instance, if it is unknown too. */
+    private fallbackLanguage;
     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>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqCodeBlockHighlight, "code[kbqCodeBlockHighlight]", ["kbqCodeBlockHighlight"], { "file": { "alias": "file"; "required": true; "isSignal": true; }; "startFrom": { "alias": "startFrom"; "required": false; "isSignal": true; }; "singleLine": { "alias": "singleLine"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class KbqCodeBlockModule {

package/{content-panel/index.d.ts → types/koobiq-components-content-panel.d.ts}

@@ -1,6 +1,7 @@
+import * as i0 from '@angular/core';
+import { OnInit } from '@angular/core';
 import * as _koobiq_components_core from '@koobiq/components/core';
 import { KbqOverflowShadowContainer, KbqComponentColors } 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';
@@ -32,8 +33,10 @@ declare class KbqContentPanelHeader {
      * @docs-private
      */
     protected readonly componentColors: typeof KbqComponentColors;
+    /** Accessible name for the icon-only close button. */
+    protected readonly a11yLocaleConfiguration: i0.Signal<_koobiq_components_core.KbqA11yLocaleConfiguration>;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqContentPanelHeader, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqContentPanelHeader, "kbq-content-panel-header", never, {}, {}, never, ["[kbqContentPanelHeaderTitle]", "[kbqContentPanelHeaderActions]", "*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqContentPanelHeader, "kbq-content-panel-header", never, {}, {}, never, ["[kbqContentPanelHeaderTitle]", "[kbqContentPanelHeaderActions]", "*"], true, [{ directive: typeof _koobiq_components_core.KbqLocaleOverridesDirective; inputs: { "kbqLocaleOverrides": "localeOverrides"; }; outputs: {}; }]>;
 }
 declare class KbqContentPanelBody {
     /** @docs-private */
@@ -51,26 +54,41 @@ declare class KbqContentPanelFooter {
 }
 declare class KbqContentPanel {
     private readonly contentPanelBody;
-    /** Current body overflow state. Read by the header and footer to render their `box-shadow`. */
+    /**
+     * Current body overflow state. Read by the header and footer to render their `box-shadow`.
+     *
+     * @docs-private
+     */
     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 {
+/** The persisted state of a content panel — whether it was open, and how wide it was dragged. */
+interface KbqContentPanelState {
+    opened: boolean;
+    width: number;
+}
+declare class KbqContentPanelContainer implements OnInit {
     /**
-     * Whether the content panel is opened.
+     * Persistence of the opened state and width, applied as a host directive. `useStateSaving` and
+     * `stateSavingKey` are its inputs, surfaced on the container.
+     */
+    private readonly stateSaving;
+    /**
+     * Whether the content panel is opened. Defaults to `undefined`.
      *
-     * @default false
+     * Bound through the `opened` attribute. Unset it is `undefined` rather than `false`, which is how the
+     * container tells an application that drives the panel from one that leaves it to remember its own
+     * state. Read {@link isOpened} for the state itself.
      */
-    readonly opened: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly openedInput: i0.InputSignalWithTransform<boolean | undefined, 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
+     * Defaults to `false`.
      */
     readonly disableClose: i0.InputSignalWithTransform<boolean, unknown>;
     /**
@@ -82,24 +100,21 @@ declare class KbqContentPanelContainer {
      */
     readonly disableResizer: i0.InputSignalWithTransform<boolean, unknown>;
     /**
-     * Minimum width of the `KbqContentPanel`.
-     *
-     * @default 480
+     * Minimum width of the `KbqContentPanel`. Defaults to `480`.
      */
     readonly minWidth: i0.InputSignalWithTransform<number, unknown>;
     /**
-     * Width of the `KbqContentPanel`.
-     *
-     * @default 640
+     * Width of the `KbqContentPanel`. Defaults to `640`.
      */
     readonly width: i0.InputSignalWithTransform<number, unknown>;
     /**
-     * Max width of the `KbqContentPanel`.
-     *
-     * @default 800
+     * Max width of the `KbqContentPanel`. Defaults to `800`.
      */
     readonly maxWidth: i0.InputSignalWithTransform<number, unknown>;
     /**
+     * A linked signal rather than a plain one: it follows the input whenever the input changes, and keeps
+     * a local write until then — which is what lets a restored state survive the input's initial value.
+     *
      * @docs-private
      */
     protected readonly openedState: i0.WritableSignal<boolean>;
@@ -112,15 +127,50 @@ declare class KbqContentPanelContainer {
      */
     readonly isOpened: i0.Signal<boolean>;
     /**
+     * The room the content leaves for the opened panel.
+     *
      * @docs-private
      */
-    protected readonly contentAnimationState: i0.Signal<{
-        value: boolean;
-        params: {
-            marginRight: number;
-        };
-    }>;
+    protected readonly contentMargin: i0.Signal<number>;
+    /**
+     * Whether the margin of the content transitions: only while it makes room for the panel opening or
+     * closing, so that a resize of the panel moves the content at once.
+     *
+     * @docs-private
+     */
+    protected readonly contentAnimating: i0.WritableSignal<boolean>;
+    /** @docs-private */
+    protected readonly animationsDisabled: boolean;
+    private readonly content;
+    private readonly injector;
+    private contentAnimation?;
+    /**
+     * Resizing reports on every pointer move, so the width is written once the drag settles rather than
+     * on each frame. The store's unchanged-payload skip does not help here — every frame is a new number.
+     */
+    private readonly resized;
     constructor();
+    ngOnInit(): void;
+    private animateContent;
+    /** Reads the persisted state and applies it. Runs while initializing, and again on a key change. */
+    private restoreState;
+    /**
+     * Persists whether the panel is open and how wide it is.
+     *
+     * Called whenever the panel is opened, closed or resized.
+     */
+    saveState(): void;
+    /**
+     * Removes the state persisted for this panel.
+     *
+     * Persistence itself stays on — the next change is written again. Unset `useStateSaving` to stop it.
+     */
+    clearSavedState(): void;
+    /**
+     * Whether state is currently persisted for this panel — restored on init, or written since.
+     * Always `false` while `useStateSaving` is unset, and `false` again after `clearSavedState()`.
+     */
+    get hasSavedState(): boolean;
     /**
      * Toggles the content panel opened state.
      */
@@ -133,6 +183,7 @@ declare class KbqContentPanelContainer {
      * Closes the content panel.
      */
     close(): void;
+    private setOpened;
     /**
      * @docs-private
      */
@@ -141,12 +192,16 @@ declare class KbqContentPanelContainer {
      * @docs-private
      */
     protected handleResizerSizeChange({ width }: KbqResizerSizeChangeEvent): void;
+    /** Whether this panel reads and writes its state at all. */
+    private get persists();
+    /** Holds a width inside the configured bounds, which can differ from the ones a state was saved under. */
+    private clampWidth;
     /**
      * @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>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqContentPanelContainer, "kbq-content-panel-container", ["kbqContentPanelContainer"], { "openedInput": { "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, [{ directive: typeof _koobiq_components_core.KbqStateSaving; inputs: { "useStateSaving": "useStateSaving"; "stateSavingKey": "stateSavingKey"; }; outputs: {}; }]>;
 }
 
 declare class KbqContentPanelModule {
@@ -156,3 +211,4 @@ declare class KbqContentPanelModule {
 }
 
 export { KbqContentPanel, KbqContentPanelAside, KbqContentPanelBody, KbqContentPanelContainer, KbqContentPanelFooter, KbqContentPanelHeader, KbqContentPanelHeaderActions, KbqContentPanelHeaderTitle, KbqContentPanelModule };
+export type { KbqContentPanelState };