import { TemplateResult, CSSResult } from 'lit';
import '../md/icons/ui-icon.js';
import '../md/button/ui-button.js';
declare const Base: (new (...args: any[]) => import("../mixins/RenderableMixin.js").RenderableMixinInterface) & (new (...args: any[]) => import("../mixins/RouteMixin.js").RouteMixinInterface) & {
    new (): EventTarget;
    prototype: EventTarget;
};
/**
 * A base class for demo pages in the API Client ecosystem.
 */
export declare abstract class DemoPage extends Base {
    static get styles(): CSSResult[];
    /**
     * Component name rendered in the header section.
     */
    accessor componentName: string;
    /**
     * Determines whether the initial render had run and the `firstRender()`
     * function was called.
     */
    accessor firstRendered: boolean;
    /**
     * Whether or not the dark theme is active
     */
    accessor darkThemeActive: boolean;
    /**
     * For some demo pages, whether the user is authenticated in the store.
     */
    authenticated: boolean;
    constructor();
    /**
     * Initializes media queries and observers.
     */
    initMediaQueries(): void;
    protected handleMediaQuery(e: MediaQueryListEvent): void;
    /**
     * The callback is called when the `darkThemeActive` property change.
     * Overwrite this function to change the theme of the demo page.
     *
     * Note, this is not called by the `darkThemeActive` setter. This is called during the
     * initialization and then when the media query event is dispatched.
     * Call this manually when changing this value in the child page.
     */
    protected themeActiveCallback(): void;
    protected activateTheme(type: 'light' | 'dark'): void;
    /**
     * A handler for the `change` event for an element that has `checked` and `name` properties.
     * This can be used with `ui-switch`, `ui-checkbox`, and `checkbox` elements.
     *
     * The `name` should correspond to a variable name to be set. The set value is the value
     * of `checked` property read from the event's target.
     */
    protected _toggleBooleanOption(e: Event): void;
    loadMonaco(): Promise<void>;
    /**
     * The page render function. Usually you don't need to use it.
     * It renders the header template, main section, and the content.
     */
    pageTemplate(): TemplateResult;
    /**
     * Call this on the top of the `render()` method to render demo navigation
     * @returns HTML template for demo header
     */
    headerTemplate(): TemplateResult;
    navigationTemplate(): TemplateResult;
    /**
     * Abstract method. When not overriding `render()` method you can use
     * this function to render content inside the standard API components layout.
     *
     * ```
     * contentTemplate() {
     *  return html`<p>Demo content</p>`;
     * }
     * ```
     */
    abstract contentTemplate(): TemplateResult;
    handleAuthenticate(): void;
    authenticateTemplate(): TemplateResult;
}
export {};
//# sourceMappingURL=DemoPage.d.ts.map