import { Actions, Config, EmbedOptions, Mode, VisualizationSpec } from 'vega-embed';
import { Options as TooltipOptions } from 'vega-tooltip';
import { Loader, LoaderOptions, Renderers, Spec as VgSpec, TooltipHandler, View } from 'vega-typings';
import { LitElement, PropertyValues } from '@polymer/lit-element';
import { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';
export declare const embed: any;
declare const I18N: {
    COMPILED_ACTION: string;
    EDITOR_ACTION: string;
    PNG_ACTION: string;
    SOURCE_ACTION: string;
    SVG_ACTION: string;
};
export declare type SafeAny = any;
/** Cast any value into a boolean if appropriate, else return a string. */
export declare function asBoolOrGeneric(value: any): any;
/**
`vega-embed` is a custom element that wraps around the [VegaEmbed](https://github.com/vega/vega-embed) micro-lib
to visualize `[Vega](https://vega.github.io/vega)` and `[Vega-Lite](https://vega.github.io/vega-lite)` views.

## Usage
### Installing the npm package
```bash
npm i @polymer-vis/vega-elements --save
```

### Usage in html
```html
<vega-embed spec="/path/to/some/vega/spec.json"></vega-embed>
```

### Usage in online code sharing hosts (e.g. jsfiddle, gist, etc)
```html
<!-- Import Vega 4 & Vega-Lite 2 -->
<script src="https://cdn.jsdelivr.net/npm/vega@[VERSION]"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@[VERSION]"></script>

<!-- Load a bundled version of vega-embed custom element with jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/@polymer-vis/vega-elements/dist/vega-embed.bundled.min.js"></script>

<vega-embed spec="/path/to/some/vega/spec.json"></vega-embed>

<script>
// create a new vega-embed element programmatically
const ele = new VegaElements.VegaEmbed();
// set attribute
ele.setAttribute("show-export", true);
// set property
ele.showSource = true;
// set some spec
ele.spec = {...};
// attach to DOM
document.body.appendChild(ele);
</script>
```

### Usage with [`lit-html`](https://github.com/Polymer/lit-html)
```js
// import lit-html
import {render, html} from "lit-html";

// import the vega-embed element
import "./node_modules/vega-elements/vega-embed.js";

// vega-lite specification
conse scatterplot = {
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "description": "A scatterplot showing horsepower and miles per gallons for various cars.",
  "data": {"url": "data/cars.json"},
  "mark": {"type": "point", "tooltip": {"content": "data"}},
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative"},
    "y": {"field": "Miles_per_Gallon", "type": "quantitative"},
    "tooltip": [
      {"field": "Horsepower", "type": "quantitative"},
      {"field": "Miles_per_Gallon", "type": "quantitative"}
    ]
  }
};

// create the factory method to create a html template result
const embedTmpl = (spec, opts) => html`<vega-embed spec=${spec} opts=${opts}></vega-embed>`;

// render the template result to document body
render(embedTmpl(scatterplot, {tooltip: true, renderer: "canvas"}), document.body);
```

## UMD bundles
`vega-elements` provides 2 pre-build UMD distributions (under the named scope `VegaElements`) for `vega-embed` custom element.

- `./dist/vega-embed.min.js`: Minimal bundle with only [`@polymer/lit-element`](https://github.com/Polymer/lit-element) and `@polymer-vis/vega-elements`.
  Vega, Vega-Lite, and [`vega-embed`](https://github.com/vega/vega-embed) should be imported separately.

- `./dist/vega-embed.bundled.min.js`: Bundle with [`@polymer/lit-element`](https://github.com/Polymer/lit-element),
  [`vega-embed`](https://github.com/vega/vega-embed), and `@polymer-vis/vega-elements`. Vega or/and Vega-Lite should be
  imported separately.


@element vega-embed
@demo index.html Examples
 */
export declare class VegaEmbed extends LitElement {
    /**
     * A JSON object or url to the Vega or Vega-Lite specification.
     * @type {String|VgSpec}
     */
    spec?: string | VgSpec;
    /**
     * Show the control to export SVG/PNG.
     * @type {Boolean}
     */
    showExport: boolean;
    /**
     * Show the control to display the source specification.
     * @type {Boolean}
     */
    showSource: boolean;
    /**
     * Show the control to display the compiled vega specification (for vega-lite source).
     * @type {Boolean}
     */
    showCompiled: boolean;
    /**
     * Show the control to display the specification in an editor at
     * https://vega.github.io/editor
     * @type {Boolean}
     */
    showEditor: boolean;
    /**
     * Whether to parse the specification as `vega` or `vega-lite`.
     * If not provided, `vega-embed` will try to infer from the `$schema` field,
     * otherwise it will default to `vega`.
     * @type {String}
     */
    mode?: Mode;
    /**
     * The theme to apply: `excel` | `ggplot2` | `quartz` | `vox` | `dark`.
     */
    theme?: 'excel' | 'ggplot2' | 'quartz' | 'vox' | 'dark';
    /**
     * Whether to show a tooltip (with the corresponding `tooltip` field).
     * Alternatively, you can pass in a `TooltipOptions` or a custom `TooltipHandler`.
     *
     * See [vega-tooltip](https://github.com/vega/vega-tooltip) for more details.
     * @type {Boolean|Object}
     */
    tooltip: TooltipHandler | TooltipOptions | boolean;
    /**
     * Whether to apply the default style for the controls. Alternatively, you can pass in the
     * style directly. Default to `true`.
     * @type {Boolean|String}
     */
    defaultStyle?: boolean | string;
    /**
     * Set `true` to show all actions: `export`, `source`, `compiled`, and `editor.
     * Defaults to `true`.
     * Set `false` to hide all actions.
     * Otherwise, you can also pass in an Object with a boolean for each of the following
     * available actions.
     *
     * @example
     * ```html
     * <vega-embed actions='{"export": true, "source": false}'></vega-embed>
     * ```
     *
     */
    actions?: boolean | Actions;
    /**
     * Sets the current log level. See [Vega docs](https://vega.github.io/vega/docs/api/view/#view_logLevel) for details.
     * (0: None, 1: Error, 2: Warn, 3: Info, 4: Debug)
     *
     * @type {Number}
     */
    logLevel: number;
    /**
     * Sets a custom Vega `loader` or `loader` options.
     * See [Vega docs](https://vega.github.io/vega/docs/api/view/#view) for details.
     *
     * @type {Object}
     */
    loader?: Loader | LoaderOptions;
    /**
     * The renderer to use for the view. One of `canvas` (default) or `svg`.
     *
     * @type {String}
     */
    renderer: Renderers;
    /**
     * A callback function that can modify an input specification before it is parsed.
     *
     * @type {Function}
     */
    onBeforeParse?: (spec: VisualizationSpec) => VisualizationSpec;
    /**
     * Sets the view width in pixels. Note that Vega-Lite overrides this option.
     *
     * @type {Number}
     */
    width?: number;
    /**
     * Sets the view height in pixels. Note that Vega-Lite overrides this option.
     *
     * @type {Number}
     */
    height?: number;
    /**
     * Sets the view padding in pixels.
     * See [Vega docs](https://vega.github.io/vega/docs/api/view/#view_padding) for details.
     *
     * @type {Number|{left?: Number, right?: Number, top?: Number, bottom?: Number}}
     */
    padding?: number | {
        left?: number;
        right?: number;
        top?: number;
        bottom?: number;
    };
    /**
     * The number by which to multiply the width and height (default 1) of an exported PNG or SVG image.
     *
     * @type {Number}
     */
    scaleFactor: number;
    /**
     * Either a URL string from which to load a [Vega](https://vega.github.io/vega/docs/config/)/Vega-Lite
     * or [Vega-Lite](https://vega.github.io/vega-lite/docs/config.html) configuration file, or
     * a JSON object to override the default configuration options.
     *
     * @type {String|Object}
     */
    config?: string | Config;
    /**
     * HTML to inject into the `` tag of the page generated by the "View Source" and "View Vega" action link.
     * For example, this can be used to add code for syntax highlighting.
     *
     * @type {String}
     */
    sourceHeader?: string;
    /**
     * HTML to inject into the end of the page generated by the "View Source" and "View Vega" action link.
     * The text will be added immediately before the closing `` tag.
     *
     * @type {String}
     */
    sourceFooter?: string;
    /**
     * The URL at which to open embedded Vega specs in a Vega editor.
     * Defaults to "http://vega.github.io/editor/".
     * Internally, Vega-Embed uses HTML5 postMessage to pass the specification information to the editor.
     *
     * @type {String}
     */
    editorUrl?: string;
    /**
     * Enable `hover` event processing. `Hover` event processing is enabled on Vega by default.
     * Alternatively, you can provide an Object with keys (`hoverSet` and/or `updateSet`) to specify which named
     * encoding sets to invoke upon mouseover and mouseout.
     *
     * @type {Boolean|{hoverSet?: String; updateSet?: String}}
     */
    hover: boolean | {
        hoverSet?: string;
        updateSet?: string;
    };
    /**
     * Use [runAsync](https://vega.github.io/vega/docs/api/view/#view_runAsync) instead of [run](https://vega.github.io/vega/docs/api/view/#view_run).
     *
     * @type {Boolean}
     */
    runAsync?: boolean;
    /**
     * This property maps keys (`COMPILED_ACTION`, `EDITOR_ACTION`, `PNG_ACTION`, `SOURCE_ACTION`, `SVG_ACTION`)
     * to string values for the action's text. By default, the text is in English.
     *
     * @type {{COMPILED_ACTION: String, EDITOR_ACTION: String, PNG_ACTION: String, SOURCE_ACTION: String, SVG_ACTION: String}}
     */
    i18n?: Partial<typeof I18N>;
    /**
     * Instead of configuring `vega-embed` through its properties or attributes,
     * you can also pass in the entire configuration Object directly.
     * See [Vega-Embed docs](https://github.com/vega/vega-embed#options) for more details.
     *
     * @type {Object}
     */
    opts: EmbedOptions;
    /**
     * The default style for the `vega-embed` actions. Do not modify unless you know
     * what you are doing.
     *
     * @type {String}
     */
    embedStyle: string;
    /**
     * A list of dataset to observe. Will fire event `data` with the arguments
     * `{name, value}`, where `name` is the name of the observed dataset, and
     * `value` is the observed dataset.
     *
     * Only available for `vega@4`.
     *
     * @type {String[]}
     */
    observeData?: string[];
    /**
     * Set `observe-state` flag for the element to dispatch custom event
     * `state` whenever the view is updated.
     *
     * @type {Boolean}
     */
    observeState: boolean;
    /**
     * Promise to current [Vega view](https://github.com/vega/vega-view#vega-view) object.
     * @type {View}
     */
    view?: View;
    /**
     * The current state of signals and data sets in this view’s backing dataflow graph. Available only if `observe-state` attribute is set.
     *
     * @type {data: Object, signals: Object}
     */
    state?: any;
    /**
     * HTMLElement containing the embedded view.
     * @type {HTMLElement}
     */
    ele?: HTMLElement;
    /**
     * List of dataset that has a listener.
     *
     * @type String[]
     */
    protected dataListeners: string[];
    /**
     * Debouncer
     */
    protected debouncer: Debouncer | null;
    /**
     * Fired when `observe-data` is set.
     *
     * @event data
     * @param {{name: String, value: Array}} dataset.
     */
    /**
     * Default dataHandler.
     */
    protected dataHandler: (name: string, value: any) => void;
    static readonly properties: {};
    protected firstUpdated(): void;
    protected update(changedProperties: PropertyValues): void;
    protected finalizeView(view: View): void;
    /**
     * Fired when the view is updated.
     *
     * @event view
     * @param {View} Vega view object.
     */
    /**
     * Update the view and register data and register data listeners.
     * @param {View} Vega view object.
     */
    protected updateView(view: View): void;
    protected updateEmbed(): Promise<void>;
    /**
     * Fired when error is encountered parsing or rendering the view.
     *
     * @event error
     * @param {Error} error object from Vega.
     */
    protected getView(spec: string | VgSpec, opts: EmbedOptions): Promise<View | undefined>;
    protected unregisterDataListeners(view: View): void;
    protected registerDataListeners(view: View): void;
    protected updateState(view: View): void;
    protected render(): import("lit-html/lib/template-result").TemplateResult;
}
export default VegaEmbed;