@refinitiv-ui/elements 6.0.0-next.3 → 6.0.2

package/lib/autosuggest/index.js

@@ -4,14 +4,21 @@ import { css, html } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { query } from '@refinitiv-ui/core/decorators/query.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { ref, createRef } from '@refinitiv-ui/core/directives/ref.js';
+import { unsafeHTML } from '@refinitiv-ui/core/directives/unsafe-html.js';
 import { VERSION } from '../version.js';
 import { AnimationTaskRunner, TimeoutTaskRunner } from '@refinitiv-ui/utils/async.js';
-import { escapeRegExp, itemHighlightable, itemRenderer, queryWordSelect } from './helpers/utils.js';
 import { isIE, isMobile } from '@refinitiv-ui/utils/browser.js';
+import { translate, TranslatePropertyKey } from '@refinitiv-ui/translate';
+import { escapeRegExp, itemHighlightable, queryWordSelect } from './helpers/utils.js';
+import { renderer } from './helpers/renderer.js';
 import { Overlay } from '../overlay/index.js';
 import '../loader/index.js';
 import '../item/index.js';
-export { queryWordSelect, itemRenderer, escapeRegExp, itemHighlightable, updateElementContent } from './helpers/utils.js';
+import '@refinitiv-ui/phrasebook/locale/en/autosuggest.js';
+export { updateElementContent } from './helpers/utils.js';
+export { itemHighlightable, escapeRegExp, queryWordSelect, renderer, renderer as itemRenderer // compatibility
+ };
 /**
  * Shows suggestions based on users' query.
  * It can be used by attaching to text form control
@@ -40,9 +47,9 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
      */
     constructor() {
         super();
+        this.defaultRole = 'listbox';
         /**
          * An HTML Element or CSS selector
-         * @type {AutosuggestTargetElement | string | null}
          */
         this.attach = null;
         /**
@@ -57,14 +64,13 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
          * Custom text for More Search
          * @default More results for {0}
          */
-        this.moreSearchText = Autosuggest_1.defaultMoreSearchText;
+        this.moreSearchText = '';
         /**
          * If set to true show loading mask
          */
         this.loading = false;
         /**
          * An object that represents a query from attach target
-         * @type {AutosuggestQuery | null}
          */
         this.query = null;
         /**
@@ -76,19 +82,16 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
         /**
          * A renderer applied to suggestion.
          * By default a render maps data to item attributes
-         * @type {AutosuggestRenderer}
          */
-        this.renderer = itemRenderer;
+        this.renderer = renderer;
         /**
          * A function that is applied to every suggestion during the render process
          * to say whether the item can be highlighted and selected. Only items that return true are considered.
          * By default the function checks for `item` `highlightable` property.
-         * @type {AutosuggestHighlightable}
          */
         this.highlightable = itemHighlightable;
         /**
          * A list of suggestion items
-         * @type {AutosuggestItem[]}
          */
         this.suggestions = [];
         /**
@@ -97,6 +100,10 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
          * may have performance benefits in frameworks that use virtual DOM (such as `Vue`, `React`, `hyperHTML` and others)
          */
         this.htmlRenderer = false;
+        this.contentSlotRef = createRef();
+        this.contentElementRef = createRef();
+        this.headerElementRef = createRef();
+        this.footerElementRef = createRef();
         // used to map render elements with data
         this.suggestionMap = new Map();
         this.highlightedItem = null;
@@ -109,86 +116,9 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
         this.attachChangeRunner = new AnimationTaskRunner();
         this.moreResultsRunner = new AnimationTaskRunner();
         this.loadingRunner = new AnimationTaskRunner();
-        /**
-         * Run when document click event happens.
-         * @param  event object
-         * @returns {void}
-         */
-        this.onOutsideClick = (event) => {
-            const path = event.composedPath();
-            // outside click
-            if (!path.includes(this) && this.attachTarget && !path.includes(this.attachTarget)) {
-                this.setOpened(false);
-            }
-        };
-        /**
-         * fire event and reinit listeners if attach was changed
-         * @returns {void}
-         */
-        this.attachChangeFrameCallback = () => {
-            this.dispatchAttachEventsRemoveAction();
-            const attachTarget = (typeof this.attach === 'string' ? document.querySelector(this.attach) : this.attach);
-            if (attachTarget && attachTarget.nodeType === document.ELEMENT_NODE) {
-                this.attachTarget = attachTarget;
-                if (!this.positionTarget) {
-                    this.positionTarget = attachTarget; // in most cases attachTarget and positionTarget must be the same
-                }
-                /**
-                 * @event add-attach-target-events
-                 * Fired when attach has been set.
-                 * Add attach target listeners.
-                 */
-                this.dispatchEventDefault(new CustomEvent('add-attach-target-events', {
-                    cancelable: true
-                }), this.attachEventsAddAction);
-            }
-        };
-        /**
-         * set opened state due to status of focus and content
-         * @returns {void}
-         */
-        this.moreResultsFrameCallback = () => {
-            this.setOpened(this.attachTargetFocused && this.hasContent);
-        };
-        /**
-         * initialize opened state depends on focus and content
-         * @returns {void}
-         */
-        this.loadingFrameCallback = () => {
-            if (this.loading && !this.opened && this.attachTargetFocused) {
-                this.setOpened(true);
-            }
-            else if (!this.loading && this.opened && !this.hasContent) {
-                this.setOpened(false);
-            }
-        };
-        this.removeChildNode = (el) => {
-            el.parentNode && el.parentNode.removeChild(el);
-        };
-        this.generateSuggestionsFragment = (fragment, suggestion) => {
-            const el = this.renderer(suggestion, this.preservedQueryValue);
-            fragment.appendChild(el);
-            return fragment;
-        };
-        /**
-         * Fired when mouse down event happens. Select the item
-         * @param event Mouse down event
-         * @returns {void}
-         */
-        this.onItemMousedown = (event) => {
-            // do not loose focus from input when click happens on the popup
-            // note, in IE when scrolling the focus is lost regardless, so
-            // do hacking here and with on blur
-            /* istanbul ignore next */
-            requestAnimationFrame(() => {
-                // Ignore any focus query events!
-                this.focusSuspended = true;
-                this.attachTarget && this.attachTarget.focus();
-                this.focusSuspended = false;
-            });
-            event.stopPropagation();
-            event.preventDefault();
-        };
+        // Used to escape unsafe string character
+        // TODO: think of a nicer way to do this
+        this.xmlSerializer = null;
         /**
         * @ignore
         */
@@ -213,6 +143,10 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
         * @ignore
         */
         this.withShadow = false;
+        /**
+         * @ignore
+         */
+        this.noFocusManagement = true;
         /**
         * @ignore
         */
@@ -244,10 +178,6 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
         /**
         * @ignore
         */
-        this.highlightText = this.highlightText.bind(this);
-        /**
-        * @ignore
-        */
         this.suggestionsFetchRequestedAction = this.suggestionsFetchRequestedAction.bind(this);
         /**
         * @ignore
@@ -261,6 +191,14 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
         * @ignore
         */
         this.attachEventsRemoveAction = this.attachEventsRemoveAction.bind(this);
+        /**
+         * @ignore
+         */
+        this.onItemMousedown = this.onItemMousedown.bind(this);
+        /**
+         * @ignore
+         */
+        this.onOutsideClick = this.onOutsideClick.bind(this);
     }
     /**
      * Element version number
@@ -313,7 +251,7 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
      * @returns item
      */
     static ItemRenderer(suggestion, query) {
-        return itemRenderer(suggestion, query);
+        return renderer(suggestion, query);
     }
     /**
      * Replace forbidden characters in regular expressions
@@ -383,21 +321,29 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
      * @returns {void}
      */
     onInputKeyDown(event) {
-        if (event.key === 'Up' || event.key === 'ArrowUp') {
-            this.onUpKey();
-        }
-        else if (event.key === 'Down' || event.key === 'ArrowDown') {
-            this.onDownKey();
-        }
-        else if (event.key === 'Esc' || event.key === 'Escape') {
-            this.onEscKey();
-        }
-        else if (event.key === 'Enter' || event.key === 'Return') {
-            this.onEnterKey(event);
-        }
-        else {
+        if (event.defaultPrevented) {
             return;
         }
+        switch (event.key) {
+            case 'ArrowUp':
+            case 'Up':
+                this.onUpKey();
+                break;
+            case 'ArrowDown':
+            case 'Down':
+                this.onDownKey();
+                break;
+            case 'Escape':
+            case 'Esc':
+                this.onEscKey();
+                break;
+            case 'Return':
+            case 'Enter':
+                this.onEnterKey(event);
+                break;
+            default:
+                return;
+        }
         event.preventDefault();
     }
     /**
@@ -410,51 +356,6 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
         super.resizedCallback(size);
         this.calculateContentMaxHeight(size);
     }
-    /**
-     * @returns template of loader if currently query loading
-     */
-    get loaderTemplate() {
-        if (!this.loading) {
-            return null;
-        }
-        return html `
-      <div part="loader">
-        <div part="backdrop"></div>
-        <ef-loader size="medium"></ef-loader>
-      </div>
-    `;
-    }
-    /**
-     * @returns template of moreResults
-     */
-    get moreResultsTemplate() {
-        if (!this.moreResults) {
-            return null;
-        }
-        return html `
-      <ef-item id="moreResults" part="more-results">${this.highlightText(this.moreResults, this.moreSearchText, this.query)}</ef-item>
-    `;
-    }
-    /**
-     * A `TemplateResult` that will be used
-     * to render the updated internal template.
-     * @return Render template
-     */
-    render() {
-        return html `
-        <div part="header">
-          <slot id="headerSlot" name="header"></slot>
-        </div>
-        <div id="content" part="content" @mousemove="${this.onItemMouseMove}" @mouseleave="${this.onItemMouseLeave}" @tap="${this.onItemMouseClick}">
-          <slot id="contentSlot" @slotchange="${this.onSlotChange}"></slot>
-          ${this.moreResultsTemplate}
-        </div>
-        <div part="footer">
-          <slot id="footerSlot" name="footer"></slot>
-        </div>
-        ${this.loaderTemplate}
-    `;
-    }
     /**
      * Called once after the component is first rendered
      * @param changedProperties map of changed properties with old values
@@ -496,7 +397,8 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
      */
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onSlotChange(event) {
-        const nodes = (this.contentSlot && this.contentSlot.assignedNodes()) || [];
+        const contentSlot = this.contentSlotRef.value;
+        const nodes = (contentSlot && contentSlot.assignedNodes()) || [];
         this.setOpened(this.attachTargetFocused && this.hasContent);
         // make a brave assumption that suggestions are populated as well
         const suggestions = this.suggestions;
@@ -544,9 +446,12 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
         const oldTarget = event.detail.oldTarget;
         if (target) {
             target.highlighted = true;
+            // Required for aria-activedescendant to work correctly
+            target.setAttribute('aria-selected', 'true');
         }
         if (oldTarget) {
             oldTarget.highlighted = false;
+            oldTarget.setAttribute('aria-selected', 'false');
         }
     }
     /**
@@ -643,31 +548,23 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
     }
     /**
      * Calculate more search text inner html
-     * @param moreResults True if has more results
-     * @param moreSearchText More search text template
-     * @param query A query
      * @returns innerHTML
      */
-    highlightText(moreResults, moreSearchText, query) {
-        if (!moreResults) {
+    get moreResultsTextTemplate() {
+        if (!this.moreResults) {
             return null;
         }
-        query = query ? query.toString() : query;
-        const htmlString = [];
-        const pattern = /({0\})/g;
-        let previousIndex = 0;
-        let matches;
-        while ((matches = pattern.exec(moreSearchText)) !== null) {
-            const match = matches[0];
-            const text = moreSearchText.substring(previousIndex, pattern.lastIndex - match.length);
-            htmlString.push(html `${text}<mark>${query}</mark>`);
-            previousIndex = pattern.lastIndex;
+        if (!this.xmlSerializer) {
+            this.xmlSerializer = new XMLSerializer();
         }
-        htmlString.push(html `${moreSearchText.substring(previousIndex)}`);
+        const query = this.xmlSerializer.serializeToString(document.createTextNode(this.query ? this.query.toString() : ''));
         return html `
-      <span part="more-results-text">
-        ${htmlString}
-      </span>
+      <span part="more-results-text">${this.moreSearchText
+            ? unsafeHTML(this.moreSearchText.replace(/{0\}/g, `<mark>${query}</mark>`))
+            : this.t('MORE_RESULTS', {
+                query,
+                mark: (chunks) => `<mark>${chunks}</mark>`
+            })}</span>
       <span part="more-results-keys" slot="right"><kbd>SHIFT</kbd> + <kbd>ENTER</kbd></span>
     `;
     }
@@ -876,7 +773,10 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
      * @returns {void}
      */
     onItemMouseClick(event) {
-        this.selectItem(this.getTarget(event), 'click');
+        const target = this.getTarget(event);
+        if (target) {
+            this.selectItem(target, 'click');
+        }
     }
     /**
      * check some of native properties was modified
@@ -884,17 +784,41 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
      * @returns true if some of changedProperties modified
      */
     shouldAutosuggestUpdate(changedProperties) {
-        return changedProperties.has('attach') || changedProperties.has('suggestions') || changedProperties.has('moreResults') || changedProperties.has('loading') || changedProperties.has('debounceRate');
+        return changedProperties.has('attach')
+            || changedProperties.has('suggestions')
+            || changedProperties.has('moreResults')
+            || changedProperties.has('moreSearchText')
+            || changedProperties.has('loading')
+            || changedProperties.has('debounceRate')
+            || changedProperties.has(TranslatePropertyKey);
+    }
+    /**
+     * Run when document click event happens.
+     * @param  event object
+     * @returns {void}
+     */
+    onOutsideClick(event) {
+        const path = event.composedPath();
+        // outside click
+        if (!path.includes(this) && this.attachTarget && !path.includes(this.attachTarget)) {
+            this.setOpened(false);
+        }
     }
     changedCallbacks(changedProperties) {
         if (changedProperties.has('attach')) {
-            this.attachChangeRunner.schedule(this.attachChangeFrameCallback);
+            this.attachChangeRunner.schedule(() => {
+                this.attachChangeFrameCallback();
+            });
         }
         if (changedProperties.has('moreResults')) {
-            this.moreResultsRunner.schedule(this.moreResultsFrameCallback);
+            this.moreResultsRunner.schedule(() => {
+                this.moreResultsFrameCallback();
+            });
         }
         if (changedProperties.has('loading')) {
-            this.loadingRunner.schedule(this.loadingFrameCallback);
+            this.loadingRunner.schedule(() => {
+                this.loadingFrameCallback();
+            });
         }
         if (changedProperties.has('opened')) {
             this.handleAfterOpened();
@@ -918,6 +842,29 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
         this.jobRunner.fulfil();
         this.jobRunner = new TimeoutTaskRunner(this.debounceRate);
     }
+    /**
+     * fire event and re-init listeners if attach was changed
+     * @returns {void}
+     */
+    attachChangeFrameCallback() {
+        this.dispatchAttachEventsRemoveAction();
+        const attachTarget = (typeof this.attach === 'string' ? document.querySelector(this.attach) : this.attach);
+        if (attachTarget && attachTarget.nodeType === document.ELEMENT_NODE) {
+            this.attachTarget = attachTarget;
+            this.focusBoundary = attachTarget;
+            if (!this.positionTarget) {
+                this.positionTarget = attachTarget; // in most cases attachTarget and positionTarget must be the same
+            }
+            /**
+             * @event add-attach-target-events
+             * Fired when attach has been set.
+             * Add attach target listeners.
+             */
+            this.dispatchEventDefault(new CustomEvent('add-attach-target-events', {
+                cancelable: true
+            }), this.attachEventsAddAction);
+        }
+    }
     /**
      * Dispatch attach events remove action event
      * @returns {void}
@@ -933,16 +880,27 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
                 cancelable: true
             }), this.attachEventsRemoveAction);
             this.attachTarget = null;
+            this.focusBoundary = null;
         }
     }
+    /**
+     * set opened state due to status of focus and content
+     * @returns {void}
+     */
+    moreResultsFrameCallback() {
+        this.setOpened(this.attachTargetFocused && this.hasContent);
+    }
     /**
      * Run when suggestions get changed
      * NB: this function is only run when htmlRenderer is set to false
      * @returns {void}
      */
     suggestionsChange() {
-        this.contentSlot && this.contentSlot.assignedNodes().forEach(this.removeChildNode);
-        this.appendChild(this.suggestions.reduce(this.generateSuggestionsFragment, document.createDocumentFragment()));
+        const contentSlot = this.contentSlotRef.value;
+        contentSlot && contentSlot.assignedNodes().forEach((node) => {
+            node.parentNode && node.parentNode.removeChild(node);
+        });
+        this.appendChild(this.suggestions.reduce((fragment, suggestion) => this.generateSuggestionsFragment(fragment, suggestion), document.createDocumentFragment()));
     }
     /**
      * Dispatch item select event
@@ -956,7 +914,7 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
         /**
          * @event item-select
          * Fired when an item gets selected
-         * @param {AutosuggestMethodType} method Select method
+         * @param method Select method
          * @param {HTMLElement} target Selection target
          * @param {*} [suggestion] Selected suggestion or null
          * @param {*} [query] Saved query object or null
@@ -1067,7 +1025,8 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
             return true;
         }
         // Space characters (e.g. space, tab, EOL) don't count as having content
-        const nodes = this.contentSlot && this.contentSlot.assignedNodes() || [];
+        const contentSlot = this.contentSlotRef.value;
+        const nodes = contentSlot && contentSlot.assignedNodes() || [];
         return nodes.some(({ nodeType, textContent }) => nodeType === Node.ELEMENT_NODE || (textContent && textContent.search(/\S/) >= 0)); // If node is element always return true
     }
     /**
@@ -1143,6 +1102,18 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
             });
         }
     }
+    /**
+     * initialize opened state depends on focus and content
+     * @returns {void}
+     */
+    loadingFrameCallback() {
+        if (this.loading && !this.opened && this.attachTargetFocused) {
+            this.setOpened(true);
+        }
+        else if (!this.loading && this.opened && !this.hasContent) {
+            this.setOpened(false);
+        }
+    }
     /**
      * @returns {void}
      */
@@ -1156,6 +1127,11 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
             this.suggestionsChange();
         }
     }
+    generateSuggestionsFragment(fragment, suggestion) {
+        const el = this.renderer(suggestion, this.preservedQueryValue);
+        fragment.appendChild(el);
+        return fragment;
+    }
     /**
      * Set the width
      * @returns {void}
@@ -1168,6 +1144,80 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
         }
         this.restrictContentMaxHeight();
     }
+    /**
+     * Fired when mouse down event happens. Select the item
+     * @param event Mouse down event
+     * @returns {void}
+     */
+    onItemMousedown(event) {
+        // do not loose focus from input when click happens on the popup
+        // note, in IE when scrolling the focus is lost regardless, so
+        // do hacking here and with on blur
+        /* istanbul ignore next */
+        requestAnimationFrame(() => {
+            // Ignore any focus query events!
+            this.focusSuspended = true;
+            this.attachTarget && this.attachTarget.focus();
+            this.focusSuspended = false;
+        });
+        event.stopPropagation();
+        event.preventDefault();
+    }
+    /**
+     * @returns template of loader if currently query loading
+     */
+    get loaderTemplate() {
+        if (!this.loading) {
+            return null;
+        }
+        return html `
+      <div part="loader">
+        <div part="backdrop"></div>
+        <ef-loader aria-label="${this.t('LOADING')}" aria-live="assertive"></ef-loader>
+      </div>
+    `;
+    }
+    /**
+     * @returns template of moreResults
+     */
+    get moreResultsTemplate() {
+        if (!this.moreResults) {
+            return null;
+        }
+        return html `
+      <ef-item tabIndex="-1"
+               role="option"
+               id="moreResults"
+               part="more-results">${this.moreResultsTextTemplate}</ef-item>
+    `;
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    render() {
+        return html `
+        <div ${ref(this.headerElementRef)}
+             part="header">
+          <slot id="headerSlot" name="header"></slot>
+        </div>
+        <div ${ref(this.contentElementRef)}
+             part="content"
+             @mousemove="${this.onItemMouseMove}"
+             @mouseleave="${this.onItemMouseLeave}"
+             @tap="${this.onItemMouseClick}">
+          <slot ${ref(this.contentSlotRef)}
+                @slotchange="${this.onSlotChange}"></slot>
+          ${this.moreResultsTemplate}
+        </div>
+        <div ${ref(this.footerElementRef)}
+             part="footer">
+          <slot id="footerSlot" name="footer"></slot>
+        </div>
+        ${this.loaderTemplate}
+    `;
+    }
     /**
      * IE11 only: Restrict maximum height of content element
      * @param [maxHeight] Maximum height of content element
@@ -1175,14 +1225,15 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
      */
     /* istanbul ignore next */
     restrictContentMaxHeight(maxHeight) {
-        if (!isIE) {
+        const contentElement = this.contentElementRef.value;
+        if (!isIE || !contentElement) {
             return;
         }
         if (maxHeight) {
-            this.contentElement && this.contentElement.style.setProperty('max-height', `${maxHeight}px`);
+            contentElement.style.setProperty('max-height', `${maxHeight}px`);
         }
         else {
-            this.contentElement && this.contentElement.style.removeProperty('max-height');
+            contentElement.style.removeProperty('max-height');
         }
     }
     /**
@@ -1195,9 +1246,12 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
         if (!isIE) {
             return;
         }
-        const headerRect = this.headerElement?.getBoundingClientRect();
-        const footerRect = this.footerElement?.getBoundingClientRect();
-        const contentRect = this.contentElement?.getBoundingClientRect();
+        const headerElement = this.headerElementRef.value;
+        const footerElement = this.footerElementRef.value;
+        const contentElement = this.contentElementRef.value;
+        const headerRect = headerElement?.getBoundingClientRect();
+        const footerRect = footerElement?.getBoundingClientRect();
+        const contentRect = contentElement?.getBoundingClientRect();
         const dialogHeight = size.height;
         const headerHeight = headerRect ? headerRect.height : 0;
         const footerHeight = footerRect ? footerRect.height : 0;
@@ -1208,7 +1262,6 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
     }
 };
 Autosuggest.defaultDebounceRate = 100;
-Autosuggest.defaultMoreSearchText = 'More results for {0}';
 __decorate([
     property({ type: String })
 ], Autosuggest.prototype, "attach", void 0);
@@ -1231,10 +1284,10 @@ __decorate([
     property({ type: Number, attribute: 'debounce-rate' })
 ], Autosuggest.prototype, "debounceRate", void 0);
 __decorate([
-    property({ type: Function, attribute: false })
+    property({ attribute: false })
 ], Autosuggest.prototype, "renderer", void 0);
 __decorate([
-    property({ type: Function, attribute: false })
+    property({ attribute: false })
 ], Autosuggest.prototype, "highlightable", void 0);
 __decorate([
     property({ type: Array, attribute: false })
@@ -1242,21 +1295,12 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'html-renderer' })
 ], Autosuggest.prototype, "htmlRenderer", void 0);
+__decorate([
+    translate({ scope: 'ef-autosuggest' })
+], Autosuggest.prototype, "t", void 0);
 __decorate([
     query('#moreResults')
 ], Autosuggest.prototype, "moreResultsItem", void 0);
-__decorate([
-    query('#contentSlot')
-], Autosuggest.prototype, "contentSlot", void 0);
-__decorate([
-    query('[part="content"]')
-], Autosuggest.prototype, "contentElement", void 0);
-__decorate([
-    query('[part="header"]')
-], Autosuggest.prototype, "headerElement", void 0);
-__decorate([
-    query('[part="footer"]')
-], Autosuggest.prototype, "footerElement", void 0);
 Autosuggest = Autosuggest_1 = __decorate([
     customElement('ef-autosuggest', {
         alias: 'emerald-autosuggest'