import { children, elements, html, ref, repeat } from '@ni/fast-element';
import { toolbarTag } from '../../toolbar';
import { toggleButtonTag } from '../../toggle-button';
import { iconBoldBTag } from '../../icons/bold-b';
import { iconItalicITag } from '../../icons/italic-i';
import { iconListTag } from '../../icons/list';
import { iconNumberListTag } from '../../icons/number-list';
import { richTextToggleBoldLabel, richTextToggleItalicsLabel, richTextToggleBulletedListLabel, richTextToggleNumberedListLabel } from '../../label-provider/rich-text/label-tokens';
import { errorTextTemplate } from '../../patterns/error/template';
import { iconExclamationMarkTag } from '../../icons/exclamation-mark';
import { richTextMentionListboxTag } from '../mention-listbox';
import { buttonTag } from '../../button';
import { listOptionTag } from '../../list-option';
export const template = html `
    <template
        ${children({ property: 'childItems', filter: elements() })}
        @focusout="${x => x.focusoutHandler()}"
    >
        <div class="container">
            <section ${ref('editorContainer')} class="editor-container">
            </section>
            <${iconExclamationMarkTag}
                severity="error"
                class="error-icon ${x => (x.scrollbarWidth >= 0 ? 'scrollbar-width-calculated' : '')}"
                style="--ni-private-rich-text-editor-scrollbar-width: ${x => x.scrollbarWidth}px;"
            ></${iconExclamationMarkTag}>
            <section class="footer-section">
                <${toolbarTag}>
                    <${toggleButtonTag}
                        ${ref('boldButton')}
                        appearance="ghost"
                        content-hidden
                        ?disabled="${x => x.disabled}"
                        slot="start"
                        title=${x => richTextToggleBoldLabel.getValueFor(x)}
                        @click=${x => x.boldButtonClick()}
                        @change=${(x, c) => x.stopEventPropagation(c.event)}
                        @keydown=${(x, c) => x.boldButtonKeyDown(c.event)}
                    >
                        ${x => richTextToggleBoldLabel.getValueFor(x)}
                        <${iconBoldBTag} slot="start"></${iconBoldBTag}>
                    </${toggleButtonTag}>
                    <${toggleButtonTag}
                        ${ref('italicsButton')}
                        appearance="ghost"
                        content-hidden
                        ?disabled="${x => x.disabled}"
                        slot="start"
                        title=${x => richTextToggleItalicsLabel.getValueFor(x)}
                        @click=${x => x.italicsButtonClick()}
                        @change=${(x, c) => x.stopEventPropagation(c.event)}
                        @keydown=${(x, c) => x.italicsButtonKeyDown(c.event)}
                    >
                        ${x => richTextToggleItalicsLabel.getValueFor(x)}
                        <${iconItalicITag} slot="start"></${iconItalicITag}>
                    </${toggleButtonTag}>
                    <${toggleButtonTag}
                        ${ref('bulletListButton')}
                        appearance="ghost"
                        content-hidden
                        ?disabled="${x => x.disabled}"
                        slot="start"
                        title=${x => richTextToggleBulletedListLabel.getValueFor(x)}
                        @click=${x => x.bulletListButtonClick()}
                        @change=${(x, c) => x.stopEventPropagation(c.event)}
                        @keydown=${(x, c) => x.bulletListButtonKeyDown(c.event)}
                    >
                        ${x => richTextToggleBulletedListLabel.getValueFor(x)}
                        <${iconListTag} slot="start"></${iconListTag}>
                    </${toggleButtonTag}>
                    <${toggleButtonTag}
                        ${ref('numberedListButton')}
                        appearance="ghost"
                        content-hidden
                        ?disabled="${x => x.disabled}"
                        slot="start"
                        title=${x => richTextToggleNumberedListLabel.getValueFor(x)}
                        @click=${x => x.numberedListButtonClick()}
                        @change=${(x, c) => x.stopEventPropagation(c.event)}
                        @keydown=${(x, c) => x.numberedListButtonKeyDown(c.event)}
                    >
                        ${x => richTextToggleNumberedListLabel.getValueFor(x)}
                        <${iconNumberListTag} slot="start"></${iconNumberListTag}>
                    </${toggleButtonTag}>
                    ${repeat(x => x.getMentionExtensionConfig(), html `
                        <${buttonTag}
                            appearance="ghost"
                            content-hidden
                            ?disabled="${(_x, c) => c.parent.disabled}"
                            slot="start"
                            title=${x => x.buttonLabel}
                            @click=${(x, c) => c.parent.mentionButtonClick(x.character)}
                        >
                            ${x => x.buttonLabel}
                            ${x => x.iconTemplate}
                        </${buttonTag}>
                    `)}
                </${toolbarTag}>
                <span class="footer-actions" part="footer-actions">
                    <slot name="footer-actions"></slot>
                </span>
            </section>
            ${errorTextTemplate}
        </div>
        <${richTextMentionListboxTag}
            ${ref('mentionListbox')}
            @mention-selected=${(x, c) => x.onMentionSelect(c.event)}
        >
            ${repeat(x => Array.from(x.activeMappingConfigs ? x.activeMappingConfigs.values() : []), html `
                <${listOptionTag} value="${x => x.mentionHref}">${x => x.displayName}</${listOptionTag}>
            `, { recycle: false })}
        </${richTextMentionListboxTag}>
    </template>
`;
//# sourceMappingURL=template.js.map