import { default as CxCopyButton } from '../../../atoms/src/components/copy-button/copy-button.ts';
import { default as CxIcon } from '../../../atoms/src/components/icon/icon.ts';
import { default as CxMarkdown } from '../../../atoms/src/components/markdown/markdown.ts';
import { default as CortexElement } from '../../../base/src/cortex-element.ts';
import { TemplateResult } from 'lit';

/**
 * `CxDocsExample` is a custom element that renders a code example along with a toggleable code block.
 * It allows users to view and copy the code snippet and see a live demo of the markup.
 *
 * The element works by extracting HTML content placed inside it (light DOM),
 * processing this content to remove unnecessary wrappers or adjust formatting,
 * and then displaying both the live content and its corresponding code in a formatted manner.
 *
 * @example
 * Example 1: Adding a div with slot="html"
 * This example demonstrates how to ensure that your content is slotted correctly.
 *
 * <cx-docs-example>
 *   <p slot="html">Your content here</p>
 * </cx-docs-example>
 *
 * @example
 * Example 2: Adding the slot to an existing div
 * This shows how to add the slot attribute if your content does not contain a wrapper element.
 * Note that in this case, the div will be stripped out of the code block on display.
 *
 * <cx-docs-example>
 *   <div slot="html">
 *     <existing-component></existing-component>
 *     <existing-component></existing-component>
 *   </div>
 * </cx-docs-example>
 *
 * @example
 * Example 3: Executing a script in the same context
 * This illustrates that a script tag included in the markup will be executed in the same context.
 * Note that you do not need to slot the script tag.
 *
 * <cx-docs-example>
 *   <div class="example-3" slot="html">
 *   </div>
 *
 *   <script>
 *     const el = document.querySelector('.example-3'); // works!
 *   </script>
 * </cx-docs-example>
 */
export default class CxDocsExample extends CortexElement {
    static styles: import('lit').CSSResult;
    static dependencies: {
        'cx-copy-button': typeof CxCopyButton;
        'cx-icon': typeof CxIcon;
        'cx-markdown': typeof CxMarkdown;
    };
    private readonly localize;
    /**
     * Stores all the code markup contained within the component's light DOM.
     */
    markup: string;
    /**
     * Whether or not the code block is open.
     */
    isOpen: boolean;
    resizer: HTMLElement;
    preview: HTMLElement;
    connectedCallback(): void;
    handleToggle(): void;
    handleResizerDrag(event: MouseEvent | TouchEvent): void;
    render(): TemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-docs-example': CxDocsExample;
    }
}
