@ni/nimble-components 20.16.1 → 20.16.3

package/dist/esm/rich-text/mention-listbox/index.js

@@ -0,0 +1,234 @@
+import { __decorate } from "tslib";
+import { Observable, observable } from '@microsoft/fast-element';
+import { DesignSystem, ListboxElement as FoundationListbox } from '@microsoft/fast-foundation';
+import { keyEnter, keyEscape, keyTab } from '@microsoft/fast-web-utilities';
+import { styles } from './styles';
+import { template } from './template';
+import { diacriticInsensitiveStringNormalizer } from '../../utilities/models/string-normalizers';
+/**
+ * A rich text mention listbox which acts as a popup for "@mention" support in editor
+ */
+export class RichTextMentionListbox extends FoundationListbox {
+    constructor() {
+        super(...arguments);
+        /**
+         * @internal
+         */
+        this.filter = '';
+        /**
+         * The collection of currently filtered options.
+         * The approach is defined based on the `Combobox.filteredOptions` implementation.
+         *
+         * @internal
+         */
+        this.filteredOptions = [];
+        this.anchorElementIntersectionObserver = new IntersectionObserver(entries => {
+            if (!entries[0]?.isIntersecting) {
+                this.setOpen(false);
+            }
+        }, { threshold: 1.0, root: document });
+    }
+    /**
+     * @public
+     */
+    close() {
+        this.setOpen(false);
+    }
+    /**
+     * The list of options.
+     *
+     * @public
+     * @remarks
+     * Overrides `Listbox.options`.
+     */
+    get options() {
+        Observable.track(this, 'options');
+        return this.filteredOptions?.length ? this.filteredOptions : [];
+    }
+    set options(value) {
+        this._options = value;
+        Observable.notify(this, 'options');
+    }
+    /**
+     * Triggers when the mention plugin is activated upon pressing the `key`
+     *
+     * @public
+     */
+    show(options) {
+        this.filter = options.filter;
+        this.anchorElement = options.anchorNode;
+        this.setOpen(true);
+        this.filterOptions();
+    }
+    /**
+     * Handle keydown actions for listbox navigation and selection.
+     *
+     * @param e - the keyboard event
+     * @public
+     */
+    keydownHandler(event) {
+        if (!this.open) {
+            return false;
+        }
+        switch (event.key) {
+            case keyTab:
+            case keyEnter: {
+                if (!this.hasSelectableOptions) {
+                    return false;
+                }
+                const mentionDetail = {
+                    href: this.firstSelectedOption.value,
+                    displayName: this.firstSelectedOption.text
+                };
+                this.emitMentionSelected(mentionDetail);
+                return true;
+            }
+            case keyEscape: {
+                this.setOpen(false);
+                return false;
+            }
+            default: {
+                super.keydownHandler(event);
+                return false;
+            }
+        }
+    }
+    /**
+     * Filter available options by filter value.
+     * The method is defined based on the `Combobox.filterOptions` and `Combobox.inputHandler` implementation.
+     *
+     * @internal
+     */
+    filterOptions() {
+        if (!this.filter) {
+            this.filteredOptions = this._options;
+        }
+        else {
+            const normalizedFilter = diacriticInsensitiveStringNormalizer(this.filter);
+            this.filteredOptions = this._options.filter(o => diacriticInsensitiveStringNormalizer(o.text).includes(normalizedFilter));
+        }
+        this._options.forEach(o => {
+            o.hidden = !this.filteredOptions.includes(o);
+        });
+        if (this.filteredOptions.length) {
+            this.selectedOptions = [this.filteredOptions[0]];
+            this.selectedIndex = this.options.indexOf(this.firstSelectedOption);
+        }
+        else {
+            this.selectedOptions = [];
+            this.selectedIndex = -1;
+        }
+    }
+    /**
+     * Synchronize the form-associated proxy and update the value property of the element.
+     *
+     * @param prev - the previous collection of slotted option elements
+     * @param next - the next collection of slotted option elements
+     *
+     * @internal
+     */
+    slottedOptionsChanged(prev, next) {
+        super.slottedOptionsChanged(prev, next);
+        this.filterOptions();
+    }
+    /**
+     * Triggers the `suggestionProps` command to notify the tiptap editor to select the option.
+     * The method is defined based on the `Listbox.clickHandler` implementation.
+     *
+     * @internal
+     */
+    clickHandler(e) {
+        const capturedElement = e.target.closest('option,[role=option]');
+        const capturedListOption = capturedElement;
+        if (!capturedListOption || capturedListOption.disabled) {
+            return false;
+        }
+        const mentionDetail = {
+            href: capturedListOption.value,
+            displayName: capturedListOption.text
+        };
+        this.emitMentionSelected(mentionDetail);
+        return true;
+    }
+    /**
+     * Observes the anchor element using intersection observer.
+     * Once the anchor element intersects, the anchor region will be closed.
+     *
+     * @internal
+     */
+    anchorElementChanged(prev, next) {
+        if (prev) {
+            this.anchorElementIntersectionObserver.unobserve(prev);
+        }
+        if (this.region && this.anchorElement) {
+            this.region.anchorElement = this.anchorElement;
+            this.region.update();
+            this.anchorElementIntersectionObserver.observe(next);
+        }
+    }
+    /**
+     * Observes the anchor region.
+     *
+     * @internal
+     */
+    regionChanged() {
+        if (this.regionNotifier) {
+            this.regionNotifier.unsubscribe(this);
+        }
+        this.regionNotifier = Observable.getNotifier(this.region);
+        this.regionNotifier.subscribe(this);
+    }
+    /**
+     * Handles the events of the anchored region.
+     * Repositions the listbox scroll bar when the `initialLayoutComplete` event is triggered.
+     * Other events will be passed to the base class.
+     *
+     * @internal
+     */
+    handleChange(source, args) {
+        super.handleChange(source, args);
+        if (args === 'initialLayoutComplete') {
+            this.focusAndScrollOptionIntoView();
+        }
+    }
+    /**
+     * Focus the control and scroll the first selected option into view.
+     *
+     * @internal
+     * @remarks
+     * Overrides: `Listbox.focusAndScrollOptionIntoView`
+     */
+    focusAndScrollOptionIntoView() {
+        if (this.firstSelectedOption) {
+            requestAnimationFrame(() => {
+                this.firstSelectedOption?.scrollIntoView({ block: 'nearest' });
+            });
+        }
+    }
+    emitMentionSelected(mentionDetail) {
+        this.$emit('mention-selected', mentionDetail);
+        this.setOpen(false);
+    }
+    setOpen(value) {
+        this.open = value;
+    }
+}
+__decorate([
+    observable
+], RichTextMentionListbox.prototype, "open", void 0);
+__decorate([
+    observable
+], RichTextMentionListbox.prototype, "region", void 0);
+__decorate([
+    observable
+], RichTextMentionListbox.prototype, "anchorElement", void 0);
+const nimbleRichTextMentionListbox = RichTextMentionListbox.compose({
+    baseName: 'rich-text-mention-listbox',
+    template,
+    styles
+});
+DesignSystem.getOrCreate()
+    .withPrefix('nimble')
+    .register(nimbleRichTextMentionListbox());
+export const richTextMentionListboxTag = DesignSystem.tagFor(RichTextMentionListbox);
+//# sourceMappingURL=index.js.map

package/dist/esm/rich-text/mention-listbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/rich-text/mention-listbox/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/rich-text/mention-listbox/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/rich-text/mention-listbox/styles.js

@@ -0,0 +1,22 @@
+import { css } from '@microsoft/fast-element';
+import { styles as dropdownStyles } from '../../patterns/dropdown/styles';
+import { focusVisible } from '../../utilities/style/focus';
+import { controlHeight, menuMinWidth } from '../../theme-provider/design-tokens';
+export const styles = css `
+    ${dropdownStyles}
+
+    :host {
+        height: auto;
+    }
+
+    :host(:hover)::after,
+    :host(${focusVisible})::after {
+        width: auto;
+    }
+
+    .listbox {
+        min-width: ${menuMinWidth};
+        max-height: calc(5.5 * ${controlHeight});
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/rich-text/mention-listbox/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/rich-text/mention-listbox/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EACH,aAAa,EACb,YAAY,EACf,MAAM,oCAAoC,CAAC;AAE5C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,cAAc;;;;;;;YAOR,YAAY;;;;;qBAKH,YAAY;iCACA,aAAa;;CAE7C,CAAC"}

package/dist/esm/rich-text/mention-listbox/template.d.ts

@@ -0,0 +1,2 @@
+import type { RichTextMentionListbox } from '.';
+export declare const template: import("@microsoft/fast-element").ViewTemplate<RichTextMentionListbox, any>;

package/dist/esm/rich-text/mention-listbox/template.js

@@ -0,0 +1,33 @@
+import { html, ref, slotted } from '@microsoft/fast-element';
+import { Listbox } from '../../listbox';
+import { anchoredRegionTag } from '../../anchored-region';
+// prettier-ignore
+export const template = html `
+    <template>
+        <${anchoredRegionTag}
+            ${ref('region')}
+            class="anchored-region"
+            fixed-placement
+            auto-update-mode="auto"
+            vertical-default-position="bottom"
+            vertical-positioning-mode="locktodefault"
+            horizontal-default-position="center"
+            horizontal-positioning-mode="locktodefault"
+            horizontal-scaling="anchor"
+            ?hidden="${x => !x.open}">
+            <div
+                class="listbox"
+                part="listbox"
+                role="listbox"
+                @click="${(x, c) => x.clickHandler(c.event)}"
+                ?disabled="${x => x.disabled}"
+            >
+                <slot
+                    ${slotted({ filter: (n) => n instanceof HTMLElement && Listbox.slottedOptionFilter(n), flatten: true, property: 'slottedOptions' })}
+                >
+                </slot>
+            </div>
+            </${anchoredRegionTag}>
+    </template>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/rich-text/mention-listbox/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/rich-text/mention-listbox/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAwB;;WAEzC,iBAAiB;cACd,GAAG,CAAC,QAAQ,CAAC;;;;;;;;;uBASJ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI;;;;;0BAKT,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;6BAC5C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;;sBAGtB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC,CAAO,EAAE,EAAE,CAAC,CAAC,YAAY,WAAW,IAAI,OAAO,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAC;;;;gBAI7I,iBAAiB;;CAEhC,CAAC"}

package/dist/esm/rich-text/mention-listbox/types.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Options passed to the `show()` method of the mention listbox
+ */
+export interface MentionListboxShowOptions {
+    anchorNode: HTMLElement;
+    filter: string;
+}

package/dist/esm/rich-text/mention-listbox/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/rich-text/mention-listbox/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/rich-text/mention-listbox/types.ts"],"names":[],"mappings":""}

package/dist/esm/rich-text/models/markdown-parser.js

@@ -65,7 +65,11 @@ export class RichTextMarkdownParser {
                 link: {
                     attrs: {
                         href: {},
-                        rel: { default: 'noopener noreferrer' }
+                        rel: { default: 'noopener noreferrer' },
+                        // Adding `class` here is a workaround to render two mentions without a whitespace as display names
+                        // This attribute can be removed when the below issue is resolved
+                        // https://github.com/ni/nimble/issues/1707
+                        class: { default: '' }
                     },
                     // Inclusive can be updated when hyperlink support added
                     // See: https://github.com/ni/nimble/issues/1527
@@ -99,7 +103,11 @@ export class RichTextMarkdownParser {
                                  * With this, the user can click the links only when the scheme is HTTP/HTTPS
                                  */
                                 href: /^https?:\/\//i.test(href) ? href : null,
-                                rel: node.attrs.rel
+                                rel: node.attrs.rel,
+                                // Adding `class` here is a workaround to render two mentions without a whitespace as display names
+                                // This attribute can be removed when the below issue is resolved
+                                // https://github.com/ni/nimble/issues/1707
+                                class: href
                             }
                         ];
                     }

package/dist/esm/rich-text/models/markdown-parser.js.map

@@ -1 +1 @@
-{"version":3,"file":"markdown-parser.js","sourceRoot":"","sources":["../../../../src/rich-text/models/markdown-parser.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"markdown-parser.js","sourceRoot":"","sources":["../../../../src/rich-text/models/markdown-parser.ts"],"names":[],"mappings":"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"}

package/dist/esm/rich-text/models/mention-extension-configuration.d.ts

@@ -1,15 +1,20 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
 import type { MentionInternals } from '../../rich-text-mention/base/models/mention-internals';
-import type { MentionUpdateEmitter } from '../../rich-text-mention/base/types';
+import type { MappingConfigs, MentionUpdateEmitter } from '../../rich-text-mention/base/types';
 /**
  * A configuration object for a Mention extension, to be used by the editor for loading mention plugins in tiptap.
  * This object maintains the necessary internal values for loading mention extension.
  */
 export declare class MentionExtensionConfiguration {
     private static instance;
+    readonly iconTemplate: ViewTemplate;
     readonly viewElement: string;
     readonly character: string;
     readonly name: string;
     readonly key: string;
+    readonly mappingConfigs?: MappingConfigs;
+    readonly buttonLabel: string;
     readonly mentionUpdateEmitter: MentionUpdateEmitter;
     constructor(mentionInternals: MentionInternals);
+    static isObservedMentionInternalsProperty(arg: unknown): boolean;
 }

package/dist/esm/rich-text/models/mention-extension-configuration.js

@@ -11,8 +11,14 @@ export class MentionExtensionConfiguration {
         this.key = key;
         this.viewElement = mentionInternals.viewElement;
         this.character = mentionInternals.character;
+        this.mappingConfigs = mentionInternals.mappingConfigs;
+        this.iconTemplate = mentionInternals.iconTemplate;
+        this.buttonLabel = mentionInternals.buttonLabel ?? '';
         this.mentionUpdateEmitter = mentionInternals.mentionUpdateEmitter;
     }
+    static isObservedMentionInternalsProperty(arg) {
+        return typeof arg === 'string' && ['buttonLabel'].includes(arg);
+    }
 }
 MentionExtensionConfiguration.instance = 0;
 //# sourceMappingURL=mention-extension-configuration.js.map

package/dist/esm/rich-text/models/mention-extension-configuration.js.map

@@ -1 +1 @@
-{"version":3,"file":"mention-extension-configuration.js","sourceRoot":"","sources":["../../../../src/rich-text/models/mention-extension-configuration.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAEtD;;;GAGG;AACH,MAAM,OAAO,6BAA6B;IAStC,YAAmB,gBAAkC;QACjD,6BAA6B,CAAC,QAAQ,IAAI,CAAC,CAAC;QAC5C,MAAM,GAAG,GAAG,GAAG,mBAAmB,GAAG,6BAA6B,CAAC,QAAQ,EAAE,CAAC;QAC9E,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;QAChB,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;QAEf,IAAI,CAAC,WAAW,GAAG,gBAAgB,CAAC,WAAW,CAAC;QAChD,IAAI,CAAC,SAAS,GAAG,gBAAgB,CAAC,SAAS,CAAC;QAC5C,IAAI,CAAC,oBAAoB,GAAG,gBAAgB,CAAC,oBAAoB,CAAC;IACtE,CAAC;;AAjBc,sCAAQ,GAAG,CAAC,CAAC"}
+{"version":3,"file":"mention-extension-configuration.js","sourceRoot":"","sources":["../../../../src/rich-text/models/mention-extension-configuration.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAMtD;;;GAGG;AACH,MAAM,OAAO,6BAA6B;IAWtC,YAAmB,gBAAkC;QACjD,6BAA6B,CAAC,QAAQ,IAAI,CAAC,CAAC;QAC5C,MAAM,GAAG,GAAG,GAAG,mBAAmB,GAAG,6BAA6B,CAAC,QAAQ,EAAE,CAAC;QAC9E,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;QAChB,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;QACf,IAAI,CAAC,WAAW,GAAG,gBAAgB,CAAC,WAAW,CAAC;QAChD,IAAI,CAAC,SAAS,GAAG,gBAAgB,CAAC,SAAS,CAAC;QAC5C,IAAI,CAAC,cAAc,GAAG,gBAAgB,CAAC,cAAc,CAAC;QACtD,IAAI,CAAC,YAAY,GAAG,gBAAgB,CAAC,YAAY,CAAC;QAClD,IAAI,CAAC,WAAW,GAAG,gBAAgB,CAAC,WAAW,IAAI,EAAE,CAAC;QACtD,IAAI,CAAC,oBAAoB,GAAG,gBAAgB,CAAC,oBAAoB,CAAC;IACtE,CAAC;IAEM,MAAM,CAAC,kCAAkC,CAAC,GAAY;QACzD,OAAO,OAAO,GAAG,KAAK,QAAQ,IAAI,CAAC,aAAa,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;IACpE,CAAC;;AAzBc,sCAAQ,GAAG,CAAC,CAAC"}

package/dist/esm/rich-text-mention/base/index.d.ts

@@ -18,6 +18,10 @@ export declare abstract class RichTextMention<TValidator extends RichTextMention
      * A regex used to extract user ID from user key (url) while parsing and serializing a markdown.
      */
     pattern?: string;
+    /**
+     * @public
+     */
+    buttonLabel?: string;
     /** @internal */
     mappingNotifiers: Notifier[];
     /** @internal */
@@ -39,12 +43,14 @@ export declare abstract class RichTextMention<TValidator extends RichTextMention
      */
     handleChange(source: unknown, args: unknown): void;
     protected abstract createValidator(): TValidator;
+    protected abstract getObservedMappingProperty(): string[];
     protected abstract getMentionInternalsOptions(): MentionInternalsOptions;
     protected abstract createMappingConfig(mapping: Mapping<unknown>): MappingConfig;
     private getMappingConfigs;
     private updateMappingConfigs;
     private mappingElementsChanged;
     private patternChanged;
+    private buttonLabelChanged;
     private removeMappingElementObservers;
     private observeMappingElements;
 }

package/dist/esm/rich-text-mention/base/index.js

@@ -47,7 +47,9 @@ export class RichTextMention extends FoundationElement {
      * @internal
      */
     handleChange(source, args) {
-        if (source instanceof Mapping && typeof args === 'string') {
+        if (source instanceof Mapping
+            && typeof args === 'string'
+            && this.getObservedMappingProperty().includes(args)) {
             this.updateMappingConfigs();
         }
     }
@@ -77,6 +79,9 @@ export class RichTextMention extends FoundationElement {
         this.validator.validate(this.mappingElements, this.pattern);
         this.mentionInternals.pattern = this.pattern;
     }
+    buttonLabelChanged() {
+        this.mentionInternals.buttonLabel = this.buttonLabel;
+    }
     removeMappingElementObservers() {
         this.mappingNotifiers.forEach(notifier => {
             notifier.unsubscribe(this);
@@ -95,6 +100,9 @@ export class RichTextMention extends FoundationElement {
 __decorate([
     attr
 ], RichTextMention.prototype, "pattern", void 0);
+__decorate([
+    attr({ attribute: 'button-label' })
+], RichTextMention.prototype, "buttonLabel", void 0);
 __decorate([
     observable
 ], RichTextMention.prototype, "mappingElements", void 0);

package/dist/esm/rich-text-mention/base/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/rich-text-mention/base/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/rich-text-mention/base/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/rich-text-mention/base/models/mention-internals.d.ts

@@ -1,3 +1,4 @@
+import { ViewTemplate } from '@microsoft/fast-element';
 import type { MappingConfigs, MentionUpdateEmitter } from '../types';
 export interface MentionInternalsOptions {
     readonly icon: string;
@@ -21,9 +22,13 @@ export declare class MentionInternals {
      */
     pattern?: string;
     /**
-     * Icon to display on RichTextEditor Toolbar
+     * Label to use as accessible name and title of mention button
      */
-    readonly icon: string;
+    buttonLabel?: string;
+    /**
+     * Template of the Icon to display on RichTextEditor Toolbar
+     */
+    readonly iconTemplate: ViewTemplate;
     /**
      * Character to show respective mention list
      */

package/dist/esm/rich-text-mention/base/models/mention-internals.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { observable } from '@microsoft/fast-element';
+import { html, observable } from '@microsoft/fast-element';
 /**
  * Internal mention state
  */
@@ -9,7 +9,7 @@ export class MentionInternals {
          * Whether this mention has a valid configuration.
          */
         this.validConfiguration = true;
-        this.icon = options.icon;
+        this.iconTemplate = html `<${options.icon} slot="start"></${options.icon}>`;
         this.character = options.character;
         this.viewElement = options.viewElement;
         this.mentionUpdateEmitter = mentionUpdateEmitter;
@@ -24,4 +24,7 @@ __decorate([
 __decorate([
     observable
 ], MentionInternals.prototype, "pattern", void 0);
+__decorate([
+    observable
+], MentionInternals.prototype, "buttonLabel", void 0);
 //# sourceMappingURL=mention-internals.js.map

package/dist/esm/rich-text-mention/base/models/mention-internals.js.map

@@ -1 +1 @@
-{"version":3,"file":"mention-internals.js","sourceRoot":"","sources":["../../../../../src/rich-text-mention/base/models/mention-internals.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AASrD;;GAEG;AACH,MAAM,OAAO,gBAAgB;IAuCzB,YACI,OAAgC,EAChC,oBAA0C;QAlC9C;;WAEG;QAEI,uBAAkB,GAAG,IAAI,CAAC;QAgC7B,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;QACzB,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC;QACnC,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC;QACvC,IAAI,CAAC,oBAAoB,GAAG,oBAAoB,CAAC;IACrD,CAAC;CACJ;AA3CG;IADC,UAAU;wDAC4B;AAMvC;IADC,UAAU;4DACsB;AAMjC;IADC,UAAU;iDACa"}
+{"version":3,"file":"mention-internals.js","sourceRoot":"","sources":["../../../../../src/rich-text-mention/base/models/mention-internals.ts"],"names":[],"mappings":";AAAA,OAAO,EAAgB,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AASzE;;GAEG;AACH,MAAM,OAAO,gBAAgB;IA6CzB,YACI,OAAgC,EAChC,oBAA0C;QAxC9C;;WAEG;QAEI,uBAAkB,GAAG,IAAI,CAAC;QAsC7B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAA,IAAI,OAAO,CAAC,IAAI,mBAAmB,OAAO,CAAC,IAAI,GAAG,CAAC;QAC3E,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC;QACnC,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC;QACvC,IAAI,CAAC,oBAAoB,GAAG,oBAAoB,CAAC;IACrD,CAAC;CACJ;AAjDG;IADC,UAAU;wDAC4B;AAMvC;IADC,UAAU;4DACsB;AAMjC;IADC,UAAU;iDACa;AAMxB;IADC,UAAU;qDACiB"}

package/dist/esm/rich-text-mention/users/index.d.ts

@@ -15,6 +15,7 @@ declare global {
 export declare class RichTextMentionUsers extends RichTextMention<RichTextMentionUsersValidator> {
     protected createValidator(): RichTextMentionUsersValidator;
     protected getMentionInternalsOptions(): MentionInternalsOptions;
+    protected getObservedMappingProperty(): string[];
     protected createMappingConfig(mapping: Mapping<MappingUserKey>): MappingConfig;
 }
 export declare const richTextMentionUsersTag: string;

package/dist/esm/rich-text-mention/users/index.js

@@ -20,6 +20,9 @@ export class RichTextMentionUsers extends RichTextMention {
             viewElement: richTextMentionUsersViewTag
         };
     }
+    getObservedMappingProperty() {
+        return ['key', 'displayName'];
+    }
     createMappingConfig(mapping) {
         if (mapping instanceof MappingUser) {
             return new MappingUserConfig(mapping.key, mapping.displayName);

package/dist/esm/rich-text-mention/users/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/rich-text-mention/users/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAGjD,OAAO,EAAE,6BAA6B,EAAE,MAAM,4CAA4C,CAAC;AAC3F,OAAO,EAAE,2BAA2B,EAAE,MAAM,QAAQ,CAAC;AAQrD;;GAEG;AACH,MAAM,OAAO,oBAAqB,SAAQ,eAA8C;IACjE,eAAe;QAC9B,OAAO,IAAI,6BAA6B,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IACpE,CAAC;IAEkB,0BAA0B;QACzC,OAAO;YACH,IAAI,EAAE,SAAS;YACf,SAAS,EAAE,GAAG;YACd,WAAW,EAAE,2BAA2B;SAC3C,CAAC;IACN,CAAC;IAES,mBAAmB,CACzB,OAAgC;QAEhC,IAAI,OAAO,YAAY,WAAW,EAAE;YAChC,OAAO,IAAI,iBAAiB,CAAC,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;SAClE;QACD,+EAA+E;QAC/E,mEAAmE;QACnE,MAAM,IAAI,KAAK,CAAC,qBAAqB,CAAC,CAAC;IAC3C,CAAC;CACJ;AACD,MAAM,0BAA0B,GAAG,oBAAoB,CAAC,OAAO,CAAC;IAC5D,QAAQ,EAAE,yBAAyB;IACnC,QAAQ;CACX,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,0BAA0B,EAAE,CAAC,CAAC;AAC5C,MAAM,CAAC,MAAM,uBAAuB,GAAG,YAAY,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/rich-text-mention/users/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAGjD,OAAO,EAAE,6BAA6B,EAAE,MAAM,4CAA4C,CAAC;AAC3F,OAAO,EAAE,2BAA2B,EAAE,MAAM,QAAQ,CAAC;AAQrD;;GAEG;AACH,MAAM,OAAO,oBAAqB,SAAQ,eAA8C;IACjE,eAAe;QAC9B,OAAO,IAAI,6BAA6B,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IACpE,CAAC;IAEkB,0BAA0B;QACzC,OAAO;YACH,IAAI,EAAE,SAAS;YACf,SAAS,EAAE,GAAG;YACd,WAAW,EAAE,2BAA2B;SAC3C,CAAC;IACN,CAAC;IAEkB,0BAA0B;QACzC,OAAO,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IAClC,CAAC;IAES,mBAAmB,CACzB,OAAgC;QAEhC,IAAI,OAAO,YAAY,WAAW,EAAE;YAChC,OAAO,IAAI,iBAAiB,CAAC,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;SAClE;QACD,+EAA+E;QAC/E,mEAAmE;QACnE,MAAM,IAAI,KAAK,CAAC,qBAAqB,CAAC,CAAC;IAC3C,CAAC;CACJ;AACD,MAAM,0BAA0B,GAAG,oBAAoB,CAAC,OAAO,CAAC;IAC5D,QAAQ,EAAE,yBAAyB;IACnC,QAAQ;CACX,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,0BAA0B,EAAE,CAAC,CAAC;AAC5C,MAAM,CAAC,MAAM,uBAAuB,GAAG,YAAY,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC"}

package/dist/esm/rich-text-mention/users/view/styles.js

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { mentionDisabledFontColor, bodyFontColor, bodyFont, mentionFont, bodyDisabledFontColor } from '../../../theme-provider/design-tokens';
+import { mentionFont, mentionDisabledFontColor, bodyFontColor, bodyFont, bodyDisabledFontColor } from '../../../theme-provider/design-tokens';
 export const styles = css `
     ${display('inline-block')}
 
@@ -29,6 +29,10 @@ export const styles = css `
         color: ${bodyDisabledFontColor};
     }
 
+    :host([disable-editing]) {
+        font: ${mentionFont};
+    }
+
     :host([disable-editing]) slot {
         display: none;
     }

package/dist/esm/rich-text-mention/users/view/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/rich-text-mention/users/view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,wBAAwB,EACxB,aAAa,EACb,QAAQ,EACR,WAAW,EACX,qBAAqB,EACxB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;;gBAIb,QAAQ;iBACP,aAAa;;;;;gBAKd,WAAW;;;;;;;;;;iBAUV,wBAAwB;;;;iBAIxB,qBAAqB;;;;;;CAMrC,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/rich-text-mention/users/view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,WAAW,EACX,wBAAwB,EACxB,aAAa,EACb,QAAQ,EACR,qBAAqB,EACxB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;;gBAIb,QAAQ;iBACP,aAAa;;;;;gBAKd,WAAW;;;;;;;;;;iBAUV,wBAAwB;;;;iBAIxB,qBAAqB;;;;gBAItB,WAAW;;;;;;CAM1B,CAAC"}

package/dist/esm/utilities/models/string-normalizers.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generic normalize method that removes the accents and special characters.
+ * This method can be used to normalize the string before performing diacritic-insensitive string comparisons
+ */
+export declare const diacriticInsensitiveStringNormalizer: (value: string) => string;

package/dist/esm/utilities/models/string-normalizers.js

@@ -0,0 +1,13 @@
+/**
+ * Generic normalize method that removes the accents and special characters.
+ * This method can be used to normalize the string before performing diacritic-insensitive string comparisons
+ */
+export const diacriticInsensitiveStringNormalizer = (value) => {
+    // This implementation is based on the below reference.
+    // https://claritydev.net/blog/diacritic-insensitive-string-comparison-javascript
+    return value
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .toLowerCase();
+};
+//# sourceMappingURL=string-normalizers.js.map

package/dist/esm/utilities/models/string-normalizers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"string-normalizers.js","sourceRoot":"","sources":["../../../../src/utilities/models/string-normalizers.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,oCAAoC,GAAG,CAAC,KAAa,EAAU,EAAE;IAC1E,uDAAuD;IACvD,iFAAiF;IACjF,OAAO,KAAK;SACP,SAAS,CAAC,KAAK,CAAC;SAChB,OAAO,CAAC,kBAAkB,EAAE,EAAE,CAAC;SAC/B,WAAW,EAAE,CAAC;AACvB,CAAC,CAAC"}