import { __decorate } from "tslib";
import { DesignSystem } from '@ni/fast-foundation';
import { attr } from '@ni/fast-element';
import { template } from './template';
import { styles } from './styles';
import { RichTextMarkdownParser } from '../models/markdown-parser';
import { RichText } from '../base';
/**
 * A nimble styled rich text viewer
 */
export class RichTextViewer extends RichText {
    constructor() {
        super(...arguments);
        /**
         *
         * @public
         * Markdown string to render its corresponding rich text content in the component.
         * @remarks
         * HTML Attribute: markdown
         */
        this.markdown = '';
        this.mentionedHrefs = [];
    }
    /**
     * @internal
     */
    connectedCallback() {
        super.connectedCallback();
        this.updateView();
    }
    /**
     * @internal
     */
    markdownChanged() {
        this.updateView();
    }
    /**
     * @internal
     */
    configurationChanged() {
        this.updateView();
    }
    getMentionedHrefs() {
        return Array.from(this.mentionedHrefs);
    }
    updateView() {
        if (!this.$fastController.isConnected) {
            return;
        }
        if (this.markdown) {
            const parseResult = RichTextMarkdownParser.parseMarkdownToDOM(this.markdown, this.configuration?.parserMentionConfig);
            this.viewer.replaceChildren(parseResult.fragment);
            this.mentionedHrefs = parseResult.mentionedHrefs;
        }
        else {
            this.viewer.innerHTML = '';
            this.mentionedHrefs = [];
        }
    }
}
__decorate([
    attr({ mode: 'fromView' })
], RichTextViewer.prototype, "markdown", void 0);
const nimbleRichTextViewer = RichTextViewer.compose({
    baseName: 'rich-text-viewer',
    template,
    styles
});
DesignSystem.getOrCreate()
    .withPrefix('nimble')
    .register(nimbleRichTextViewer());
export const richTextViewerTag = 'nimble-rich-text-viewer';
//# sourceMappingURL=index.js.map