import { LitElement } from 'lit';
import type { CodeBubbleConfig, CodePen, ComponentConfig, FrameworkConfig, StackBlitz } from '../../configs/types.js';
type CodeBlock = {
    [key: string]: string;
};
/**
 * This component is designed for displaying code examples in a visually appealing and interactive manner.
 *
 * @tag code-bubble
 *
 * @cssprop [--code-bubble-border-color=rgb(228, 228, 231)] The border color of the component and the controls
 * @cssprop [--code-bubble-border-radius=4px] The border radius of the component and the controls
 * @cssprop [--code-bubble-border-width=1px] The border width of the component and the controls
 * @cssprop [--code-bubble-preview-padding=1.5rem] The padding of the rendered code example
 * @cssprop [--code-bubble-snippet-padding=1.5rem] The padding for the example code
 * @cssprop [--code-bubble-button-font-weight=inherit] The font weight for the controls
 * @cssprop [--code-bubble-button-icon-gap=0.25rem] The gap between the button text and icon
 * @cssprop [--code-bubble-button-padding-x=1rem] The horizontal padding for the controls at the bottom of the component
 * @cssprop [--code-bubble-button-padding-y=1rem] The vertical padding for the controls at the bottom of the component
 * @cssprop [--code-bubble-copy-button-font-weight=inherit] The font weight for the copy code button
 * @cssprop [--code-bubble-copy-button-padding-x=0.5rem] The horizontal padding for the copy button
 * @cssprop [--code-bubble-copy-button-padding-y=0.5rem] The vertical padding for the copy button
 * @cssprop [--code-bubble-outline=solid 2px rgb(0, 95, 204)] The outline style when elements have keyboard focus
 * @cssprop [--code-bubble-outline-offset=0] The offset of the outline when an element has keyboard focus
 * @cssprop [--code-bubble-button-bg-color=inherit] The background color of the bottom controls
 * @cssprop [--code-bubble-button-border-color=var([--code-bubble-border-color)] The border color of the bottom controls
 * @cssprop [--code-bubble-button-fg-color=inherit] The text color of the bottom controls
 * @cssprop [--code-bubble-copy-button-bg-color=inherit] The background color of the copy code button
 * @cssprop [--code-bubble-copy-button-border-color=var([--code-bubble-border-color)] The border color of the copy code button
 * @cssprop [--code-bubble-copy-button-fg-color=inherit] The text color of the copy code button
 * @cssprop [--code-bubble-button-hover-bg-color=rgb(237 237 237)] The background color of the bottom controls on hover
 * @cssprop [--code-bubble-button-hover-border-color=rgb(135 135 135)] The border color of the bottom controls on hover
 * @cssprop [--code-bubble-button-hover-fg-color=inherit] The text color of the bottom controls on hover
 * @cssprop [--code-bubble-copy-button-hover-bg-color=rgb(237 237 237)] The background color of the copy code button on hover
 * @cssprop [--code-bubble-copy-button-hover-border-color=rgb(135 135 135)] The border color of the copy code button on hover
 * @cssprop [--code-bubble-copy-button-hover-fg-color=inherit] The text color of the copy code button on hover
 * @cssprop [--code-bubble-button-focus-bg-color=inherit] The background color of the bottom controls on focus
 * @cssprop [--code-bubble-button-focus-border-color=inherit] The border color of the bottom controls on hover
 * @cssprop [--code-bubble-button-focus-fg-color=inherit] The text color of the bottom controls on hover
 * @cssprop [--code-bubble-copy-button-focus-bg-color=inherit] The background color of the copy code button on focus
 * @cssprop [--code-bubble-copy-button-focus-border-color=inherit] The border color of the copy code button on focus
 * @cssprop [--code-bubble-copy-button-focus-fg-color=inherit] The text color of the copy code button on focus
 * @cssprop [--code-bubble-button-active-bg-color=inherit] The background color of the bottom controls on active
 * @cssprop [--code-bubble-button-active-border-color=rgb(135 135 135)] The border color of the bottom controls on active
 * @cssprop [--code-bubble-button-active-fg-color=inherit] The text color of the bottom controls on active
 * @cssprop [--code-bubble-button-active-font-weight=bold] The font weight of the bottom controls on active
 * @cssprop [--code-bubble-copy-button-active-bg-color=inherit] The background color of the copy code button on active
 * @cssprop [--code-bubble-copy-button-active-border-color=rgb(135 135 135)] The border color of the copy code button on active
 * @cssprop [--code-bubble-copy-button-active-fg-color=inherit] The text color of the copy code button on active
 *
 * @csspart code-bubble-base The base wrapper for the internal component
 * @csspart code-bubble-preview The element that wraps the rendered example
 * @csspart code-bubble-code The element that wraps the source code section
 * @csspart code-bubble-copy-button The button used to copy code to the clipboard
 * @csspart code-bubble-controls The element that wraps the controls at the bottom of the component
 * @csspart code-bubble-control The buttons at the bottom of the component
 * @csspart code-bubble-show-source The "show source" button
 * @csspart code-bubble-html The "HTML" button
 * @csspart code-bubble-react The "React" button
 * @csspart code-bubble-rtl The "RTL" button
 * @csspart code-bubble-sandbox The "Sandbox" button
 *
 */
export default class CodeBubble extends LitElement {
    static styles: import("lit").CSSResult[];
    private _config;
    private _openShowCode;
    /** Indicates which example should be displayed */
    framework?: string;
    /** Hides the preview display */
    hidePreview?: boolean;
    /** Hides the copy code button */
    hideCopyCode?: boolean;
    /** Hides the RTL button */
    hideRtl?: boolean;
    /** Hides the sandbox button */
    hideSandbox?: boolean;
    /** Hides the resize button */
    hideResize?: boolean;
    /** Hides the framework buttons */
    hideFrameworks?: boolean;
    /** Hides the show code button */
    hideShowCode?: boolean;
    /** Opens the show code button */
    get openShowCode(): boolean;
    set openShowCode(value: boolean);
    /** @internal The configuration object for the component */
    get config(): CodeBubbleConfig;
    set config(value: CodeBubbleConfig);
    protected showSource: boolean;
    protected showRTL: boolean;
    protected codeBlocks: CodeBlock;
    protected componentConfig: ComponentConfig;
    protected sandboxConfig: FrameworkConfig<CodePen | StackBlitz>;
    protected reloadAttempt: number;
    private resizeHandle;
    private resizeContainer;
    private preview;
    constructor();
    connectedCallback(): void;
    protected firstUpdated(): void;
    private loadCode;
    private reloadCode;
    private createPreview;
    private updatePreview;
    private loadScripts;
    private updateConfig;
    private initProperties;
    private getCode;
    private setCodeContent;
    private setLangOnCodeWrapper;
    private setFallbackFramework;
    private handleShowSourceClick;
    private handleExampleClick;
    private showFrameworkToggles;
    private handleRtlClick;
    private handleSandboxClick;
    private handleCopyClick;
    private getFramework;
    private handleKeydown;
    private handleDrag;
    render(): import("lit").TemplateResult<1>;
}
export { CodeBubble };
//# sourceMappingURL=code-bubble.d.ts.map