import { LitElement, TemplateResult, PropertyValues } from 'lit';
/**
Element wrapper for the [marked](https://github.com/chjj/marked) library.

`<marked-highlight>` accepts Markdown source and renders it to a child
element with the class `markdown-html`. This child element can be styled
as you would a normal DOM element. If you do not provide a child element
with the `markdown-html` class, the Markdown source will still be rendered,
but to a shadow DOM child that cannot be styled.

### Markdown Content

The Markdown source can be specified several ways:

#### Use the `markdown` attribute to bind markdown

```html
<marked-highlight markdown="`Markdown` is _awesome_!">
  <div slot="markdown-html"></div>
</marked-highlight>
```
#### Use `<script type="text/markdown">` element child to inline markdown

```html
<marked-highlight>
  <div slot="markdown-html"></div>
  <script type="text/markdown">
    Check out my markdown!
    We can even embed elements without fear of the HTML parser mucking up their
    textual representation:
  </script>
</marked-highlight>
```
#### Use `<script type="text/markdown" src="URL">` element child to specify remote markdown

```html
<marked-highlight>
  <div slot="markdown-html"></div>
  <script type="text/markdown" src="../guidelines.md"></script>
</marked-highlight>
```

Note that the `<script type="text/markdown">` approach is *static*. Changes to
the script content will *not* update the rendered markdown!

Though, you can data bind to the `src` attribute to change the markdown.

```html
<marked-highlight>
  <div slot="markdown-html"></div>
  <script type="text/markdown" src$="[[source]]"></script>
</marked-highlight>
<script>
  ...
  this.source = '../guidelines.md';
</script>
```

### Styling

If you are using a child with the `markdown-html` class, you can style it
as you would a regular DOM element:

```css
[slot="markdown-html"] p {
  color: red;
}
[slot="markdown-html"] td:first-child {
  padding-left: 24px;
}
```

@fires markedrendercomplete - Event dispatched when the element renders the output.
@fires markedloaded - Event dispatched when the element loads the script from the URL.
@fires markedloaderror - An event dispatched when an error ocurred when downloading
                         the script content. The detail has the original error.
 */
export default class MarkedHighlight extends LitElement {
    /**
     * The markdown source to be rendered by this element.
     * @attribute
     */
    accessor markdown: string | undefined;
    /**
     * Enable GFM line breaks (regular newlines instead of two spaces for
     * breaks)
     * @attribute
     */
    accessor breaks: boolean | undefined;
    /**
     * Conform to obscure parts of markdown.pl as much as possible. Don't fix
     * any of the original markdown bugs or poor behavior.
     * @attribute
     */
    accessor pedantic: boolean | undefined;
    /**
     * Function used to customize a renderer based on the [API specified in the
     * Marked
     * library](https://github.com/chjj/marked#overriding-renderer-methods).
     * It takes one argument: a marked renderer object, which is mutated by the
     * function.
     */
    accessor renderer: Function | undefined;
    /**
     * Sanitize the output. Ignore any HTML that has been input.
     * @attribute
     */
    accessor sanitize: boolean | undefined;
    /**
     * Function used to customize a sanitize behavior.
     * It takes one argument: element String without text Contents.
     *
     * e.g. `<div>` `<a href="/">` `</p>'.
     * Note: To enable this function, must set `sanitize` to true.
     * WARNING: If you are using this option to un-trusted text, you must to
     * prevent XSS Attacks.
     */
    accessor sanitizer: Function | undefined;
    /**
     * If true, disables the default sanitization of any markdown received by
     * a request and allows fetched un-sanitized markdown
     *
     * e.g. fetching markdown via `src` that has HTML.
     * Note: this value overrides `sanitize` if a request is made.
     * @attribute
     */
    accessor disableRemoteSanitization: boolean | undefined;
    /**
     * @returns A reference to the output element.
     */
    get outputElement(): HTMLElement | null;
    protected willUpdate(cp: PropertyValues<this>): void;
    protected markdownElement?: HTMLScriptElement | null;
    protected attachedValue: boolean;
    firstUpdated(): void;
    connectedCallback(): void;
    disconnectedCallback(): void;
    protected processScript(): Promise<void>;
    /**
     * Renders `markdown` into this element's DOM.
     *
     * This is automatically called whenever the `markdown` property is changed.
     *
     * The only case where you should be calling this is if you are providing
     * markdown via `<script type="text/markdown">` after this element has been
     * constructed (or updating that markdown).
     * @event markedrendercomplete
     */
    renderMarkdown(): void;
    /**
     * Un-indents the markdown source that will be rendered.
     */
    unindent(text?: string): string;
    /**
     * Fired when the XHR finishes loading
     */
    protected requestMarkdown(url: string): Promise<void>;
    /**
     * Fired when an error is received while fetching remote markdown content.
     */
    protected handleError(e: Error): void;
    protected scriptAttributeHandler(mutation: MutationRecord[]): void;
    render(): TemplateResult;
}
//# sourceMappingURL=MarkedHighlight.d.ts.map