@theseam/ui-common 0.4.30 → 1.0.0-beta.0

package/fesm2022/theseam-ui-common-rich-text.mjs

@@ -0,0 +1,782 @@
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { NgIf, NgTemplateOutlet, AsyncPipe, DecimalPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, forwardRef, inject, ElementRef, EventEmitter, HostListener, ViewChild, Output, Input, Optional, Inject, Component, NgModule } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule } from '@angular/forms';
+import { BehaviorSubject, filter, shareReplay, Subject, combineLatest, map, switchMap, startWith, of, tap, take, lastValueFrom } from 'rxjs';
+import * as i2 from 'ngx-quill';
+import { QuillModule } from 'ngx-quill';
+import 'quill-mention/autoregister';
+import { isNullOrUndefined, notNullOrUndefined, notNullOrUndefinedOrEmpty } from '@theseam/ui-common/utils';
+import * as i3 from '@theseam/ui-common/form-field';
+import { TheSeamFormFieldModule } from '@theseam/ui-common/form-field';
+
+const HTML_ENTITY_REGEX = /<[^>]+>/gm;
+const THESEAM_QUILL_TOOLBAR_OPTIONS_DEFAULT = [
+    ['bold', 'italic', 'underline', 'strike'],
+    [{ header: [0, 1, 2, 3, 4, 5] }],
+    [{ list: 'ordered' }, { list: 'bullet' }],
+    [{ align: [] }],
+    ['link'],
+    ['clean'],
+];
+const THESEAM_QUILL_MENTION_OPTIONS_DEFAULT = {
+    spaceAfterInsert: false,
+    positioningStrategy: 'fixed',
+    dataAttributes: ['type']
+};
+const THESEAM_QUILL_MODULES_DEFAULT = {
+    toolbar: THESEAM_QUILL_TOOLBAR_OPTIONS_DEFAULT
+};
+const THESEAM_QUILL_FORMATS_DEFAULT = [
+    'align',
+    'bold',
+    'header',
+    'indent',
+    'italic',
+    'link',
+    'list',
+    'size',
+    'strike',
+    'underline',
+    'mention'
+];
+const THESEAM_QUILL_EDITOR_CONFIG_DEFAULT = {
+    format: 'html',
+    modules: THESEAM_QUILL_MODULES_DEFAULT,
+    formats: THESEAM_QUILL_FORMATS_DEFAULT,
+    linkPlaceholder: 'https://google.com',
+    customToolbarPosition: 'top',
+    sanitize: false,
+    customOptions: [],
+    customModules: [],
+    trimOnValidation: false,
+    compareValues: false,
+    filterNull: false
+};
+const THESEAM_QUILL_EDITOR_CONFIG = new InjectionToken('TheSeamQuillEditorConfig');
+const defaultHtmlCharacterCounterFn = (value, format) => {
+    if (format === 'html') {
+        return value.replace(HTML_ENTITY_REGEX, ' ').replace(/\s\s+/g, ' ').trim().length;
+    }
+    else if (format === 'text') {
+        return value.replace(/\s\s+/g, ' ').trim().length;
+    }
+    else {
+        console.warn(`Format ${format} not supported!`);
+        return 0;
+    }
+};
+function isMentionMenuOption(value) {
+    if (isNullOrUndefined(value) || typeof value !== 'object') {
+        return false;
+    }
+    return Object.prototype.hasOwnProperty.call(value, 'id');
+}
+const defaultMentionSearchFn = (source, textAfter, mentionChar) => {
+    return source.filter(u => {
+        if (!isMentionMenuOption(u) || u.searchIgnore === true) {
+            return true;
+        }
+        return u.value.toLowerCase().includes(textAfter.toLowerCase());
+    });
+};
+const defaultMentionRenderListFn = (source, searchFn, emptyListItem, textAfter, renderList, mentionChar) => {
+    let list = searchFn(source, textAfter, mentionChar);
+    if (list.length === 0 && notNullOrUndefined(emptyListItem)) {
+        list.push(emptyListItem);
+    }
+    else {
+        let reduceIdx = 0;
+        list = list.reduce((acc, mention) => {
+            const previousMenuItem = acc[reduceIdx - 1];
+            const previousMenuItemGroupName = isMentionMenuOption(previousMenuItem) ? previousMenuItem.groupName : undefined;
+            if (isMentionMenuOption(mention) &&
+                notNullOrUndefinedOrEmpty(mention.groupName) &&
+                mention.groupName !== previousMenuItemGroupName) {
+                acc.push({
+                    value: mention.groupName,
+                    disabled: true,
+                    type: 'groupName'
+                });
+                reduceIdx++;
+            }
+            if (!isMentionMenuOption(mention)) {
+                mention.disabled = true;
+            }
+            acc.push(mention);
+            reduceIdx++;
+            return acc;
+        }, []);
+    }
+    renderList(list, textAfter);
+};
+// Keeping this as an example for a custom menu item.
+// There doesn't appear to be a better way of passing in a custom template.
+// export const defaultMentionRenderItem = (item: TheSeamQuillMentionListItem) => {
+// if (item.type === 'groupName') {
+//   const text = document.createElement('div')
+//   text.setAttribute('class', 'small text-black-50')
+//   text.innerText = item.value
+//   return text.outerHTML
+// }
+// else if (item.type === 'divider') {
+//   const div = document.createElement('hr')
+//   div.setAttribute('class', 'my-2')
+//   return div.outerHTML
+// }
+// else {
+//   return item.value
+// }
+// }
+
+const RICH_TEXT_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => RichTextComponent),
+    multi: true,
+};
+class RichTextComponent {
+    _renderer;
+    _customConfig;
+    _elementRef = inject(ElementRef);
+    onChange;
+    onTouched;
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    val;
+    formControl = new FormControl(null);
+    get required() {
+        return this._required;
+    }
+    set required(value) {
+        if (notNullOrUndefined(value)) {
+            this._required = coerceBooleanProperty(value);
+        }
+    }
+    _required = false;
+    /** @default '' (empty string) */
+    get placeholder() {
+        return this._placeholder;
+    }
+    set placeholder(value) {
+        if (notNullOrUndefined(value)) {
+            this._placeholder = value;
+        }
+    }
+    _placeholder = '';
+    /**
+     * Initial rows visible in text area, set using `height` and `minHeight`.
+     *
+     * NOTE: Resizable editors will not be able to size below the height calculated from this value.
+     *
+     * @default 5
+     */
+    get rows() {
+        return this._rows;
+    }
+    set rows(value) {
+        if (notNullOrUndefined(value)) {
+            this._rows = value;
+            this._pollCalculatedRowHeight.next();
+        }
+    }
+    _rows = 5;
+    /**
+     * When `true`, text area can be resized vertically.
+     *
+     * @default true
+     */
+    get resizable() {
+        return this._resizable;
+    }
+    set resizable(value) {
+        if (notNullOrUndefined(value)) {
+            this._resizable = coerceBooleanProperty(value);
+        }
+    }
+    _resizable = true;
+    /** @default false */
+    get readOnly() {
+        return this._readOnly;
+    }
+    set readOnly(value) {
+        if (notNullOrUndefined(value)) {
+            this._readOnly = coerceBooleanProperty(value);
+        }
+    }
+    _readOnly = false;
+    // TODO: fix bug where initial html value is rendered in plain text
+    /**
+     * When `true`, overrides all other provided settings to present the editor
+     * as a standard textbox.
+     *
+     * NOTE: For the moment, `<p></p>` tags are still allowed, triggered by the `Enter` key.
+     * https://github.com/slab/quill/issues/1432
+     *
+     * @default false
+     */
+    get disableRichText() {
+        return this._disableRichText;
+    }
+    set disableRichText(value) {
+        if (notNullOrUndefined(value)) {
+            this._disableRichText = coerceBooleanProperty(value);
+            this._updateQuillConfig();
+        }
+    }
+    _disableRichText = false;
+    /**
+     * When `true`, displays a character counter at the bottom of the editor.
+     * Character counter text is determined by values provided in `minLength`
+     * and `maxLength`.
+     *
+     * The default count algorithm strips out html entities and replaces them
+     * with spaces to get the string length. To override this behavior, pass
+     * a custom function to `characterCounterFn`.
+     *
+     * To override default character counter display, pass a custom template to `characterCountTpl`.
+     *
+     * @default false
+     */
+    get displayCharacterCounter() {
+        return this._displayCharacterCounter;
+    }
+    set displayCharacterCounter(value) {
+        if (notNullOrUndefined(value)) {
+            this._displayCharacterCounter = coerceBooleanProperty(value);
+        }
+    }
+    _displayCharacterCounter = false;
+    get minLength() {
+        return this._minLength;
+    }
+    set minLength(value) {
+        if (notNullOrUndefined(value)) {
+            this._minLength = value;
+        }
+    }
+    _minLength;
+    get maxLength() {
+        return this._maxLength;
+    }
+    set maxLength(value) {
+        if (notNullOrUndefined(value)) {
+            this._maxLength = value;
+        }
+    }
+    _maxLength;
+    /**
+     * Set to override default character counter display.
+     *
+     * Template context includes variables `minLength`, `maxLength`, and `characterCount`.
+     */
+    get characterCounterTpl() {
+        return this._characterCounterTpl;
+    }
+    set characterCounterTpl(value) {
+        if (notNullOrUndefined(value)) {
+            this._characterCounterTpl = value;
+        }
+    }
+    _characterCounterTpl = null;
+    /**
+     * Set to override default counter function, which strips html entities and
+     * replaces them with a space.
+     */
+    get characterCounterFn() {
+        return this._characterCounterFn;
+    }
+    set characterCounterFn(value) {
+        if (notNullOrUndefined(value)) {
+            this._characterCounterFn = value;
+        }
+    }
+    _characterCounterFn = defaultHtmlCharacterCounterFn;
+    /**
+     * If `true`, component will configure the Quill editor with the quill-mentions extension
+     * and listen for values passed to `mentionItems` to populate the mentions menu.
+     *
+     * @default false
+     */
+    get useMentions() {
+        return this._useMentions;
+    }
+    set useMentions(value) {
+        if (notNullOrUndefined(value)) {
+            this._useMentions = coerceBooleanProperty(value);
+            this._updateQuillConfig();
+        }
+    }
+    _useMentions = false;
+    /**
+     * List of users, user groups, or other entities to display in mentions menu.
+     * Minimum required properties are `id` (unique) and `value`, which acts as the label.
+     *
+     * By default, the menu is triggered by typing the `@` symbol into the text area.
+     */
+    get mentionItems() {
+        return this._mentionItems.value;
+    }
+    set mentionItems(value) {
+        if (notNullOrUndefined(value)) {
+            this._mentionItems.next(value);
+        }
+    }
+    _mentionItems = new BehaviorSubject(undefined);
+    mentionItems$ = this._mentionItems.asObservable().pipe(filter(mentions => notNullOrUndefined(mentions) && mentions.length > 0), shareReplay({ bufferSize: 1, refCount: true }));
+    /**
+     * Set to override default search function when user is typing a mention.
+     */
+    get mentionSearchFn() {
+        return this._mentionSearchFn;
+    }
+    set mentionSearchFn(value) {
+        if (notNullOrUndefined(value)) {
+            this._mentionSearchFn = value;
+        }
+    }
+    _mentionSearchFn = defaultMentionSearchFn;
+    /**
+     * Set to override default render function for mentions list.
+     *
+     * Function should call `renderList`.
+     */
+    get mentionRenderListFn() {
+        return this._mentionRenderListFn;
+    }
+    set mentionRenderListFn(value) {
+        if (notNullOrUndefined(value)) {
+            this._mentionRenderListFn = value;
+        }
+    }
+    _mentionRenderListFn = defaultMentionRenderListFn;
+    /**
+     * Set to override default text shown while mention items are loading.
+     *
+     * @default 'Loading...'
+     */
+    get mentionListLoadingText() {
+        return this._mentionListLoadingText;
+    }
+    set mentionListLoadingText(value) {
+        if (notNullOrUndefined(value)) {
+            this._mentionListLoadingText = value;
+        }
+    }
+    _mentionListLoadingText = 'Loading...';
+    /**
+     * Set to override default text shown when a mention search returns no items.
+     *
+     * @default 'No matches found.'
+     */
+    get mentionListEmptyText() {
+        return this._mentionListEmptyText;
+    }
+    set mentionListEmptyText(value) {
+        if (notNullOrUndefined(value)) {
+            this._mentionListEmptyText = value;
+        }
+    }
+    _mentionListEmptyText = 'No matches found.';
+    get mentionListEmptyItem() {
+        return {
+            id: 'undefined',
+            value: this.mentionListEmptyText,
+            disabled: true,
+            emptyList: true
+        };
+    }
+    quillEditorCreated = new EventEmitter();
+    quillEditorChanged = new EventEmitter();
+    quillContentChanged = new EventEmitter();
+    quillSelectionChanged = new EventEmitter();
+    quillFocus = new EventEmitter();
+    quillBlur = new EventEmitter();
+    mentionsUpdated = new EventEmitter();
+    get quillEditor() {
+        return this._quillEditor;
+    }
+    set quillEditor(value) {
+        this._quillEditor = value;
+        // setTimeout because full html isn't available until the next tick
+        setTimeout(() => {
+            this._pollCalculatedRowHeight.next();
+        }, 0);
+    }
+    _quillEditor;
+    defaultCharacterCounterTpl;
+    _handleKeydown(event) {
+        if (event.code === 'Escape') {
+            const qlEditor = this._quillEditor?.editorElem?.querySelector('.ql-editor');
+            if (notNullOrUndefined(qlEditor) && qlEditor === document.activeElement && qlEditor instanceof HTMLElement) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                qlEditor.blur();
+            }
+        }
+    }
+    _isWritingValue = false;
+    _pollCalculatedRowHeight = new Subject();
+    _configSet = new BehaviorSubject(false);
+    configSet$ = this._configSet.asObservable();
+    _stylesSet = new BehaviorSubject(false);
+    _templateSet = new BehaviorSubject(false);
+    initialized$;
+    characterCount$;
+    _config = new BehaviorSubject(undefined);
+    config$ = this._config.asObservable();
+    _selectedMentions = new BehaviorSubject([]);
+    selectedMentions$ = this._selectedMentions.asObservable();
+    constructor(_renderer, _customConfig) {
+        this._renderer = _renderer;
+        this._customConfig = _customConfig;
+        this.initialized$ = combineLatest([
+            this._configSet.asObservable(),
+            this._stylesSet.asObservable(),
+            this._templateSet.asObservable(),
+        ]).pipe(map(sets => sets.findIndex(s => !s) === -1));
+        this.characterCount$ = this.initialized$.pipe(filter(i => i), switchMap(() => {
+            if (notNullOrUndefined(this.formControl)) {
+                return this.formControl.valueChanges.pipe(startWith(this.formControl.value), map(v => this.characterCounterFn(v || '', this._config.value?.format)));
+            }
+            return of(0);
+        }));
+        this.selectedMentions$.pipe(tap(mentions => this.mentionsUpdated.emit(mentions))).subscribe();
+    }
+    ngOnInit() {
+        // TODO: test this more
+        // ignore quill initial valueChange event, to keep functionality in line with other inputs
+        let initialEmitComplete = false;
+        this._configSet.pipe(filter(s => s), switchMap(() => this.formControl.valueChanges.pipe(
+        // skip(1),
+        take(1), tap(() => initialEmitComplete = true)))).subscribe();
+        this.formControl.valueChanges.pipe(filter(() => !this._isWritingValue && initialEmitComplete), tap(value => this.value = value)).subscribe();
+        this._pollCalculatedRowHeight.asObservable().pipe(tap(() => {
+            this._stylesSet.next(false);
+            const calculatedRowsHeight = `${this.rows * 1.5}rem`;
+            if (notNullOrUndefined(this.rows) && notNullOrUndefined(this._quillEditor)) {
+                const editorEl = this._elementRef.nativeElement.querySelector('.ql-editor');
+                if (notNullOrUndefined(editorEl)) {
+                    this._renderer.setStyle(editorEl, 'height', calculatedRowsHeight);
+                    this._renderer.setStyle(editorEl, 'min-height', calculatedRowsHeight);
+                }
+            }
+            this._stylesSet.next(true);
+        })).subscribe();
+        this._buildQuillConfig();
+    }
+    ngAfterViewInit() {
+        if (isNullOrUndefined(this.characterCounterTpl)) {
+            this.characterCounterTpl = this.defaultCharacterCounterTpl || null;
+        }
+        this._templateSet.next(true);
+    }
+    ngOnDestroy() {
+        // hacky way to ensure mentions menu gets destroyed when component is destroyed
+        const mentionModule = this._quillEditor?.quillEditor.getModule('mention');
+        const hideMentionList = mentionModule?.hideMentionList;
+        if (hideMentionList && typeof hideMentionList === 'function') {
+            hideMentionList.call(mentionModule);
+        }
+    }
+    _buildQuillConfig() {
+        this._configSet.next(false);
+        const config = {
+            ...THESEAM_QUILL_EDITOR_CONFIG_DEFAULT
+        };
+        if (this.disableRichText) {
+            config.format = 'text';
+            config.formats = [];
+            config.modules = {
+                toolbar: false
+            };
+        }
+        else {
+            config.format = this._getConfigOrDefault('format');
+            config.formats = this._getConfigOrDefault('formats');
+            config.modules = {
+                ...this._getConfigOrDefault('modules')
+            };
+        }
+        if (this.useMentions) {
+            const mentionModules = {
+                ...config.modules,
+                mention: {
+                    ...THESEAM_QUILL_MENTION_OPTIONS_DEFAULT,
+                    renderLoading: () => this.mentionListLoadingText,
+                    source: async (searchTerm, renderList, mentionChar) => {
+                        // this function is called every time the menu is triggered,
+                        // so it will always have the latest value from mentionItems$
+                        const mentionsAsync = await lastValueFrom(this.mentionItems$.pipe(take(1)));
+                        if (notNullOrUndefined(mentionsAsync)) {
+                            this.mentionRenderListFn(mentionsAsync, this.mentionSearchFn, this.mentionListEmptyItem, searchTerm, renderList, mentionChar);
+                        }
+                    },
+                    ...config.modules?.mention,
+                }
+            };
+            config.modules = mentionModules;
+        }
+        config.theme = this._getConfigOrDefault('theme');
+        config.debug = this._getConfigOrDefault('debug');
+        config.customToolbarPosition = this._getConfigOrDefault('customToolbarPosition');
+        config.sanitize = this._getConfigOrDefault('sanitize');
+        config.styles = this._getConfigOrDefault('styles');
+        config.bounds = this._getConfigOrDefault('bounds');
+        config.customOptions = this._getConfigOrDefault('customOptions');
+        config.customModules = this._getConfigOrDefault('customModules');
+        config.trackChanges = this._getConfigOrDefault('trackChanges');
+        config.classes = this._getConfigOrDefault('classes');
+        config.trimOnValidation = this._getConfigOrDefault('trimOnValidation');
+        config.linkPlaceholder = this._getConfigOrDefault('linkPlaceholder');
+        config.compareValues = this._getConfigOrDefault('compareValues');
+        config.filterNull = this._getConfigOrDefault('filterNull');
+        config.debounceTime = this._getConfigOrDefault('debounceTime');
+        this._config.next(config);
+        // setTimeout bc ngx-quill library doesn't listen for input changes,
+        // so we must destroy and create the component each time config is updated
+        setTimeout(() => {
+            this._configSet.next(true);
+        }, 0);
+    }
+    _getConfigOrDefault(prop) {
+        if (this._customConfig && Object.prototype.hasOwnProperty.call(this._customConfig, prop)) {
+            return this._customConfig[prop];
+        }
+        return THESEAM_QUILL_EDITOR_CONFIG_DEFAULT[prop];
+    }
+    _updateQuillConfig() {
+        if (this._configSet.value) {
+            this._buildQuillConfig();
+        }
+    }
+    // Not usable, bc config has to be set immediately, potentially before mentions populate.
+    // To set customDataAttributes, provide a custom config.
+    // private _getCustomDataAttributes(mentions: TheSeamQuillMentionMenuOption[]): string[] {
+    //   return mentions.reduce((acc, mention) => {
+    //     const keys = Object.keys(mention)
+    //     keys.forEach(key => {
+    //       if (acc.findIndex(a => a === key) === -1) {
+    //         acc.push(key)
+    //       }
+    //     })
+    //     return acc
+    //   }, <string[]>[] satisfies string[])
+    // }
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        this._value = value;
+        if (this.onChange) {
+            this.onChange(value);
+        }
+        if (this.onTouched) {
+            this.onTouched();
+        }
+    }
+    _value;
+    writeValue(value) {
+        this._isWritingValue = true;
+        this.formControl.setValue(value);
+        this.value = value;
+        this._isWritingValue = false;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.readOnly = isDisabled;
+    }
+    _onEditorCreated(event) {
+        this.quillEditorCreated.emit(event);
+    }
+    _onEditorChanged(event) {
+        this.quillEditorChanged.emit(event);
+    }
+    _onContentChanged(event) {
+        this.quillContentChanged.emit(event);
+        this._updateMentionsFromDelta(event.content);
+    }
+    _onSelectionChanged(event) {
+        this.quillSelectionChanged.emit(event);
+    }
+    _onFocus(event) {
+        this.quillFocus.emit(event);
+    }
+    _onBlur(event) {
+        this.quillBlur.emit(event);
+        if (this.onTouched) {
+            this.onTouched();
+        }
+    }
+    /**
+     * Hacky way to track mention inserts/deletes
+     */
+    _updateMentionsFromDelta(content) {
+        if (notNullOrUndefined(content.ops)) {
+            const contentMentionIds = content.ops.map((o) => o.insert?.mention?.id).filter(notNullOrUndefined);
+            const selectedMentions = [...this._selectedMentions.value];
+            const mentionOptions = [...this._mentionItems.value || []];
+            const newMentions = contentMentionIds.reduce((acc, mentionId) => {
+                const insertMention = mentionOptions.find((m) => isMentionMenuOption(m) && m.id === mentionId);
+                if (notNullOrUndefined(insertMention)) {
+                    acc.push(insertMention);
+                }
+                else {
+                    console.warn('Mention addition failed! Selected mention option not found:', mentionId);
+                }
+                return acc;
+            }, []);
+            let emitUpdate = false;
+            if (selectedMentions.length !== newMentions.length) {
+                // if the length has changed, we know an update occurred
+                emitUpdate = true;
+            }
+            else {
+                // otherwise, test ids for old and new items to see if we need to emit a change
+                const selectedMentionIds = this._selectedMentions.value.map(m => m.id);
+                const newMentionIds = newMentions.map(m => m.id);
+                if (selectedMentionIds.findIndex(m => !newMentionIds.includes(m)) !== -1 ||
+                    newMentionIds.findIndex(m => !selectedMentionIds.includes(m)) !== -1) {
+                    emitUpdate = true;
+                }
+            }
+            if (emitUpdate) {
+                this._selectedMentions.next(newMentions);
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: RichTextComponent, deps: [{ token: i0.Renderer2 }, { token: THESEAM_QUILL_EDITOR_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: RichTextComponent, isStandalone: true, selector: "seam-rich-text", inputs: { val: ["value", "val"], required: "required", placeholder: "placeholder", rows: "rows", resizable: "resizable", disableRichText: "disableRichText", displayCharacterCounter: "displayCharacterCounter", minLength: "minLength", maxLength: "maxLength", characterCounterTpl: "characterCounterTpl", characterCounterFn: "characterCounterFn", useMentions: "useMentions", mentionItems: "mentionItems", mentionSearchFn: "mentionSearchFn", mentionRenderListFn: "mentionRenderListFn", mentionListLoadingText: "mentionListLoadingText", mentionListEmptyText: "mentionListEmptyText" }, outputs: { quillEditorCreated: "quillEditorCreated", quillEditorChanged: "quillEditorChanged", quillContentChanged: "quillContentChanged", quillSelectionChanged: "quillSelectionChanged", quillFocus: "quillFocus", quillBlur: "quillBlur", mentionsUpdated: "mentionsUpdated" }, host: { listeners: { "keydown": "_handleKeydown($event)" } }, providers: [
+            RICH_TEXT_VALUE_ACCESSOR,
+        ], viewQueries: [{ propertyName: "quillEditor", first: true, predicate: ["quillEditor"], descendants: true }, { propertyName: "defaultCharacterCounterTpl", first: true, predicate: ["characterCounter"], descendants: true }], ngImport: i0, template: "<div class=\"editor\" *ngIf=\"configSet$ | async\" [class.initializing]=\"!(initialized$ | async)\">\n  <ng-container *ngIf=\"config$ | async as config\">\n    <quill-editor\n      #quillEditor\n      seamInput\n      [class.disabled]=\"readOnly\"\n      [attr.disabled]=\"readOnly\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"placeholder\"\n      [readOnly]=\"readOnly\"\n      [required]=\"required\"\n      [minLength]=\"$any(minLength)\"\n      [maxLength]=\"$any(maxLength)\"\n      [format]=\"config.format\"\n      [theme]=\"$any(config.theme)\"\n      [modules]=\"$any(config.modules)\"\n      [debug]=\"$any(config.debug)\"\n      [formats]=\"$any(config.formats)\"\n      [customToolbarPosition]=\"config.customToolbarPosition\"\n      [sanitize]=\"config.sanitize\"\n      [styles]=\"config.styles\"\n      [bounds]=\"$any(config.bounds)\"\n      [customOptions]=\"config.customOptions\"\n      [customModules]=\"config.customModules\"\n      [trackChanges]=\"$any(config.trackChanges)\"\n      [classes]=\"$any(config.classes)\"\n      [trimOnValidation]=\"config.trimOnValidation\"\n      [linkPlaceholder]=\"$any(config.linkPlaceholder)\"\n      [compareValues]=\"config.compareValues\"\n      [filterNull]=\"config.filterNull\"\n      [debounceTime]=\"$any(config.debounceTime)\"\n      [class.can-resize]=\"resizable\"\n      (onEditorCreated)=\"_onEditorCreated($event)\"\n      (onEditorChanged)=\"_onEditorChanged($event)\"\n      (onContentChanged)=\"_onContentChanged($event)\"\n      (onSelectionChanged)=\"_onSelectionChanged($event)\"\n      (onFocus)=\"_onFocus($event)\"\n      (onBlur)=\"_onBlur($event)\"></quill-editor>\n    <ng-container *ngIf=\"displayCharacterCounter\">\n      <ng-container\n        [ngTemplateOutlet]=\"characterCounterTpl\"\n        [ngTemplateOutletContext]=\"{ $implicit: characterCount$ | async, minLength: minLength, maxLength: maxLength, characterCount: characterCount$ | async }\"></ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n\n<ng-template #characterCounter let-implicit let-minLength=\"minLength\" let-maxLength=\"maxLength\" let-characterCount=\"characterCount\">\n  <div class=\"small text-black-50 text-right\">\n    <ng-container *ngIf=\"characterCount || characterCount === 0\">\n      Character Count:\n      <span [class.text-danger]=\"characterCount && ((maxLength && characterCount > maxLength) || (minLength && characterCount < minLength))\">\n        {{ characterCount | number }}\n      </span>\n      <ng-container *ngIf=\"maxLength\">\n        / {{ maxLength }}\n      </ng-container>\n      <span *ngIf=\"minLength\" class=\"font-italic\">\n        (minimum {{ minLength }} expected)\n      </span>\n    </ng-container>\n  </div>\n</ng-template>\n", styles: [":host .editor{position:relative}:host .editor.initializing:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:#f8f9fa;z-index:1}:host quill-editor.can-resize ::ng-deep .ql-editor{overflow:auto;resize:vertical}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: QuillModule }, { kind: "component", type: i2.QuillEditorComponent, selector: "quill-editor" }, { kind: "ngmodule", type: TheSeamFormFieldModule }, { kind: "directive", type: i3.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput], seam-rich-text[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DecimalPipe, name: "number" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: RichTextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-rich-text', providers: [
+                        RICH_TEXT_VALUE_ACCESSOR,
+                    ], imports: [
+                        NgIf,
+                        NgTemplateOutlet,
+                        AsyncPipe,
+                        DecimalPipe,
+                        ReactiveFormsModule,
+                        QuillModule,
+                        TheSeamFormFieldModule,
+                    ], template: "<div class=\"editor\" *ngIf=\"configSet$ | async\" [class.initializing]=\"!(initialized$ | async)\">\n  <ng-container *ngIf=\"config$ | async as config\">\n    <quill-editor\n      #quillEditor\n      seamInput\n      [class.disabled]=\"readOnly\"\n      [attr.disabled]=\"readOnly\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"placeholder\"\n      [readOnly]=\"readOnly\"\n      [required]=\"required\"\n      [minLength]=\"$any(minLength)\"\n      [maxLength]=\"$any(maxLength)\"\n      [format]=\"config.format\"\n      [theme]=\"$any(config.theme)\"\n      [modules]=\"$any(config.modules)\"\n      [debug]=\"$any(config.debug)\"\n      [formats]=\"$any(config.formats)\"\n      [customToolbarPosition]=\"config.customToolbarPosition\"\n      [sanitize]=\"config.sanitize\"\n      [styles]=\"config.styles\"\n      [bounds]=\"$any(config.bounds)\"\n      [customOptions]=\"config.customOptions\"\n      [customModules]=\"config.customModules\"\n      [trackChanges]=\"$any(config.trackChanges)\"\n      [classes]=\"$any(config.classes)\"\n      [trimOnValidation]=\"config.trimOnValidation\"\n      [linkPlaceholder]=\"$any(config.linkPlaceholder)\"\n      [compareValues]=\"config.compareValues\"\n      [filterNull]=\"config.filterNull\"\n      [debounceTime]=\"$any(config.debounceTime)\"\n      [class.can-resize]=\"resizable\"\n      (onEditorCreated)=\"_onEditorCreated($event)\"\n      (onEditorChanged)=\"_onEditorChanged($event)\"\n      (onContentChanged)=\"_onContentChanged($event)\"\n      (onSelectionChanged)=\"_onSelectionChanged($event)\"\n      (onFocus)=\"_onFocus($event)\"\n      (onBlur)=\"_onBlur($event)\"></quill-editor>\n    <ng-container *ngIf=\"displayCharacterCounter\">\n      <ng-container\n        [ngTemplateOutlet]=\"characterCounterTpl\"\n        [ngTemplateOutletContext]=\"{ $implicit: characterCount$ | async, minLength: minLength, maxLength: maxLength, characterCount: characterCount$ | async }\"></ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n\n<ng-template #characterCounter let-implicit let-minLength=\"minLength\" let-maxLength=\"maxLength\" let-characterCount=\"characterCount\">\n  <div class=\"small text-black-50 text-right\">\n    <ng-container *ngIf=\"characterCount || characterCount === 0\">\n      Character Count:\n      <span [class.text-danger]=\"characterCount && ((maxLength && characterCount > maxLength) || (minLength && characterCount < minLength))\">\n        {{ characterCount | number }}\n      </span>\n      <ng-container *ngIf=\"maxLength\">\n        / {{ maxLength }}\n      </ng-container>\n      <span *ngIf=\"minLength\" class=\"font-italic\">\n        (minimum {{ minLength }} expected)\n      </span>\n    </ng-container>\n  </div>\n</ng-template>\n", styles: [":host .editor{position:relative}:host .editor.initializing:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:#f8f9fa;z-index:1}:host quill-editor.can-resize ::ng-deep .ql-editor{overflow:auto;resize:vertical}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [THESEAM_QUILL_EDITOR_CONFIG]
+                }] }], propDecorators: { val: [{
+                type: Input,
+                args: ['value']
+            }], required: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], resizable: [{
+                type: Input
+            }], disableRichText: [{
+                type: Input
+            }], displayCharacterCounter: [{
+                type: Input
+            }], minLength: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }], characterCounterTpl: [{
+                type: Input
+            }], characterCounterFn: [{
+                type: Input
+            }], useMentions: [{
+                type: Input
+            }], mentionItems: [{
+                type: Input
+            }], mentionSearchFn: [{
+                type: Input
+            }], mentionRenderListFn: [{
+                type: Input
+            }], mentionListLoadingText: [{
+                type: Input
+            }], mentionListEmptyText: [{
+                type: Input
+            }], quillEditorCreated: [{
+                type: Output
+            }], quillEditorChanged: [{
+                type: Output
+            }], quillContentChanged: [{
+                type: Output
+            }], quillSelectionChanged: [{
+                type: Output
+            }], quillFocus: [{
+                type: Output
+            }], quillBlur: [{
+                type: Output
+            }], mentionsUpdated: [{
+                type: Output
+            }], quillEditor: [{
+                type: ViewChild,
+                args: ['quillEditor']
+            }], defaultCharacterCounterTpl: [{
+                type: ViewChild,
+                args: ['characterCounter']
+            }], _handleKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+const THESEAM_QUILL_FORMATS = [
+    'align',
+    'background',
+    'blockquote',
+    'bold',
+    'code-block',
+    'code',
+    'color',
+    'direction',
+    'font',
+    'header',
+    'image',
+    'indent',
+    'italic',
+    'link',
+    'list',
+    'script',
+    'size',
+    'strike',
+    'underline',
+    'video',
+    'mention'
+];
+
+class TheSeamRichTextModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamRichTextModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: TheSeamRichTextModule, imports: [RichTextComponent], exports: [RichTextComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamRichTextModule, imports: [RichTextComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamRichTextModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        RichTextComponent,
+                    ],
+                    exports: [
+                        RichTextComponent,
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { HTML_ENTITY_REGEX, RICH_TEXT_VALUE_ACCESSOR, RichTextComponent, THESEAM_QUILL_EDITOR_CONFIG, THESEAM_QUILL_EDITOR_CONFIG_DEFAULT, THESEAM_QUILL_FORMATS, THESEAM_QUILL_FORMATS_DEFAULT, THESEAM_QUILL_MENTION_OPTIONS_DEFAULT, THESEAM_QUILL_MODULES_DEFAULT, THESEAM_QUILL_TOOLBAR_OPTIONS_DEFAULT, TheSeamRichTextModule, defaultHtmlCharacterCounterFn, defaultMentionRenderListFn, defaultMentionSearchFn, isMentionMenuOption };
+//# sourceMappingURL=theseam-ui-common-rich-text.mjs.map