@refinitiv-ui/elements 5.12.0-alpha.0 → 5.12.0

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.12.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.11.0...@refinitiv-ui/elements@5.12.0) (2022-02-15)
+
+
+### Bug Fixes
+
+* radio-button not add to group ([#167](https://github.com/Refinitiv/refinitiv-ui/issues/167)) ([fb05273](https://github.com/Refinitiv/refinitiv-ui/commit/fb052730cf8c7eeb376a3a49501b85dc363bf614))
+* **slider:** value-changed event is not fired ([#174](https://github.com/Refinitiv/refinitiv-ui/issues/174)) ([687f244](https://github.com/Refinitiv/refinitiv-ui/commit/687f244b4d848a684dc986158f324974931a3689))
+
+
+### Features
+
+* **button-bar:** improve screen reader support ([#176](https://github.com/Refinitiv/refinitiv-ui/issues/176)) ([f121ea6](https://github.com/Refinitiv/refinitiv-ui/commit/f121ea62fbdc160823dff386ec937b45d0a131e7))
+* **collapse:** accessibility support ([#203](https://github.com/Refinitiv/refinitiv-ui/issues/203)) ([12ae2f7](https://github.com/Refinitiv/refinitiv-ui/commit/12ae2f7fe036d0351e69f5daca4369fae4097917))
+* **collapse:** add accessibility support ([#161](https://github.com/Refinitiv/refinitiv-ui/issues/161)) ([158f031](https://github.com/Refinitiv/refinitiv-ui/commit/158f0317dd4df9ab76e1bd27d4aa02151787c252))
+
+
+### Reverts
+
+* Revert "feat(collapse): add accessibility support (#161)" (#179) ([9a0ad70](https://github.com/Refinitiv/refinitiv-ui/commit/9a0ad709d71c243fe68dbc38318a04745ea5b23b)), closes [#161](https://github.com/Refinitiv/refinitiv-ui/issues/161) [#179](https://github.com/Refinitiv/refinitiv-ui/issues/179)
+
+
+
+
+
 # [5.11.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.10.1...@refinitiv-ui/elements@5.11.0) (2022-01-14)
 
 

package/README.md

@@ -29,10 +29,10 @@ Finally, import both elements that you want to use and its themes into your appl
 import '@refinitiv-ui/halo-theme/dark/imports/native-elements';
 
 // import element and its Halo dark theme
-import '@refinitiv-ui/elements/button';
-import '@refinitiv-ui/elements/panel';
-import '@refinitiv-ui/elements/button/themes/halo/dark';
-import '@refinitiv-ui/elements/panel/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/button';
+import '@refinitiv-ui/elements/lib/panel';
+import '@refinitiv-ui/elements/lib/button/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/panel/themes/halo/dark';
 ```
 
 Now, you can use the elements in your app.

package/lib/accordion/index.d.ts

@@ -0,0 +1,76 @@
+import { JSXInterface } from '../jsx';
+import { PropertyValues, TemplateResult, CSSResultGroup } from '@refinitiv-ui/core';
+import { Collapse } from '../collapse/index.js';
+/**
+ * Used to display a group of `Collapse` control.
+ * Only one item will be able to expand by default but you can customize its behavior.
+ *
+ * @slot header-left - Slot to add custom contents to the left side of header e.g. ef-icon, ef-checkbox
+ * @slot header-right - Slot to add custom contents to the right side of header e.g. ef-icon, ef-checkbox
+ *
+ */
+export declare class Accordion extends Collapse {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+     * A `CSSResultGroup` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @return CSS template
+     */
+    static get styles(): CSSResultGroup;
+    /**
+     * Allow multiple sections expand at the same time
+     */
+    autoCollapseDisabled: boolean;
+    /**
+     * Add spacing to content section in all collapse items
+     */
+    spacing: boolean;
+    /**
+     * Called once after the component is first rendered
+     * @param changedProperties map of changed properties with old values
+     * @returns {void}
+     */
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    /**
+     * handle bubbled clicks from items
+     * @param event the click event object
+     * @return void
+     */
+    private handleClick;
+    /**
+     * get a list of items
+     * @returns array of accordion items
+     */
+    private getChildItems;
+    /**
+     * collapse non selected child items on click
+     * @param target currently selected item
+     * @return void
+     */
+    private processChildrenOnClick;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return {TemplateResult}  Render template
+     */
+    protected render(): TemplateResult;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-accordion': Accordion;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-accordion': Partial<Accordion> | JSXInterface.HTMLAttributes<Accordion>;
+    }
+  }
+}
+
+export {};

package/lib/accordion/index.js

@@ -0,0 +1,136 @@
+import { __decorate } from "tslib";
+import { html, css } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { VERSION } from '../version.js';
+import { Collapse } from '../collapse/index.js';
+/**
+ * Finds closest accordion parent of element.
+ * Created, because IE11 doesn't support closest() method.
+ * @param element - potential child of accordion
+ * @returns found accordion parent or null, if not found
+ */
+const getClosestAccordion = (element) => {
+    while (element) {
+        if (element.localName === 'ef-accordion') {
+            return element;
+        }
+        else {
+            element = element.parentElement;
+        }
+    }
+    return null;
+};
+/**
+ * Checks if specified element is a direct child of current accordion.
+ * @param element - child that checked
+ * @param accordion - parent accordion
+ * @returns is current accordion has child accordion that wraps checked element
+ */
+const isDirectAccordionChild = (element, accordion) => {
+    return getClosestAccordion(element) === accordion;
+};
+/**
+ * Used to display a group of `Collapse` control.
+ * Only one item will be able to expand by default but you can customize its behavior.
+ *
+ * @slot header-left - Slot to add custom contents to the left side of header e.g. ef-icon, ef-checkbox
+ * @slot header-right - Slot to add custom contents to the right side of header e.g. ef-icon, ef-checkbox
+ *
+ */
+let Accordion = class Accordion extends Collapse {
+    constructor() {
+        super(...arguments);
+        /**
+         * Allow multiple sections expand at the same time
+         */
+        this.autoCollapseDisabled = false;
+        /**
+         * Add spacing to content section in all collapse items
+         */
+        this.spacing = false;
+        /**
+         * handle bubbled clicks from items
+         * @param event the click event object
+         * @return void
+         */
+        this.handleClick = (event) => {
+            if (!this.autoCollapseDisabled && isDirectAccordionChild(event.target, this)) {
+                this.processChildrenOnClick(event.target);
+                event.stopPropagation();
+            }
+        };
+    }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * A `CSSResultGroup` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @return CSS template
+     */
+    static get styles() {
+        return css `
+      :host {
+        display: block;
+      }
+    `;
+    }
+    /**
+     * Called once after the component is first rendered
+     * @param changedProperties map of changed properties with old values
+     * @returns {void}
+     */
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.addEventListener('expanded-changed', this.handleClick, true);
+    }
+    /**
+     * get a list of items
+     * @returns array of accordion items
+     */
+    getChildItems() {
+        return [...this.querySelectorAll('ef-collapse')]
+            .filter((el) => isDirectAccordionChild(el, this));
+    }
+    /**
+     * collapse non selected child items on click
+     * @param target currently selected item
+     * @return void
+     */
+    processChildrenOnClick(target) {
+        const children = this.getChildItems();
+        for (let i = 0, len = children.length; i < len; ++i) {
+            if (children[i] !== target) {
+                children[i].expanded = false;
+            }
+        }
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return {TemplateResult}  Render template
+     */
+    render() {
+        return html `
+      <slot></slot>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, attribute: 'auto-collapse-disabled' })
+], Accordion.prototype, "autoCollapseDisabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Accordion.prototype, "spacing", void 0);
+Accordion = __decorate([
+    customElement('ef-accordion', {
+        alias: 'coral-accordion'
+    })
+], Accordion);
+export { Accordion };

package/lib/accordion/themes/halo/dark/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/collapse/themes/halo/dark';
+
+elf.customStyles.define('ef-accordion', ':host([spacing]) ::slotted(ef-collapse){--panel-padding:12px 8px}:host ::slotted(ef-collapse:not(:last-child):not([expanded])){border-bottom:1px solid #404040}');

package/lib/accordion/themes/halo/light/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/collapse/themes/halo/light';
+
+elf.customStyles.define('ef-accordion', ':host([spacing]) ::slotted(ef-collapse){--panel-padding:12px 8px}:host ::slotted(ef-collapse:not(:last-child):not([expanded])){border-bottom:1px solid #d9d9d9}');

package/lib/accordion/themes/solar/charcoal/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/collapse/themes/solar/charcoal';
+
+elf.customStyles.define('ef-accordion', ':host([spacing]) ::slotted(ef-collapse){--panel-padding:6px 10px}:host ::slotted(ef-collapse:not(:last-child):not([expanded])){border-bottom:1px solid #0a0a0a}');

package/lib/accordion/themes/solar/pearl/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/collapse/themes/solar/pearl';
+
+elf.customStyles.define('ef-accordion', ':host([spacing]) ::slotted(ef-collapse){--panel-padding:6px 10px}:host ::slotted(ef-collapse:not(:last-child):not([expanded])){border-bottom:1px solid #d5d8db}');

package/lib/appstate-bar/index.d.ts

@@ -0,0 +1,65 @@
+import { JSXInterface } from '../jsx';
+import { BasicElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import '../icon/index.js';
+/**
+ * Used to display at the top of application to provide a status or information.
+ * @slot right - place custom content on the right of bar.
+ *
+ * @fires clear - fired when clear button is clicked
+ */
+export declare class AppstateBar extends BasicElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+     * A `CSSResultGroup` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     *
+     * @returns CSS template
+     */
+    static get styles(): CSSResultGroup;
+    /**
+     * Text to display in heading section.
+     */
+    heading: string;
+    /**
+     * (optional) Type of state bar. Supported value are `info`, `highlight`.
+     */
+    state: 'info' | 'highlight' | null;
+    /**
+     * Invoked whenever the element is updated
+     * @param {PropertyValues} changedProperties Map of changed properties with old values
+     * @returns {void}
+     */
+    protected updated(changedProperties: PropertyValues): void;
+    /**
+     * Hide the element when clear button is clicked
+     * @param {Event} event - event params
+     * @fires AppstateBar#clear
+     * @returns {void}
+     */
+    private clear;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return {TemplateResult}  Render template
+     */
+    protected render(): TemplateResult;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-appstate-bar': AppstateBar;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-appstate-bar': Partial<AppstateBar> | JSXInterface.HTMLAttributes<AppstateBar>;
+    }
+  }
+}
+
+export {};

package/lib/appstate-bar/index.js

@@ -0,0 +1,100 @@
+import { __decorate } from "tslib";
+import { BasicElement, html, css } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { VERSION } from '../version.js';
+import '../icon/index.js';
+/**
+ * Used to display at the top of application to provide a status or information.
+ * @slot right - place custom content on the right of bar.
+ *
+ * @fires clear - fired when clear button is clicked
+ */
+let AppstateBar = class AppstateBar extends BasicElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Text to display in heading section.
+         */
+        this.heading = '';
+        /**
+         * (optional) Type of state bar. Supported value are `info`, `highlight`.
+         */
+        this.state = null;
+        /**
+         * Hide the element when clear button is clicked
+         * @param {Event} event - event params
+         * @fires AppstateBar#clear
+         * @returns {void}
+         */
+        this.clear = (event) => {
+            event.stopPropagation();
+            this.style.display = 'none';
+            /**
+             * Clear Event
+             * Fired when clear button is clicked
+             *
+             * @event clear
+             */
+            this.dispatchEvent(new CustomEvent('clear'));
+        };
+    }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * A `CSSResultGroup` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     *
+     * @returns CSS template
+     */
+    static get styles() {
+        return css `
+      :host {
+        display: block;
+      }
+    `;
+    }
+    /**
+     * Invoked whenever the element is updated
+     * @param {PropertyValues} changedProperties Map of changed properties with old values
+     * @returns {void}
+     */
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        // Call this.updateStyles() to update css variables
+        if (changedProperties.has('state')) {
+            this.updateStyles();
+        }
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return {TemplateResult}  Render template
+     */
+    render() {
+        return html `
+      <div part="heading">${this.heading}</div>
+      <div part="message"><slot></slot></div>
+      <div part="right"><slot name="right"></slot></div>
+      <ef-icon part="close"  @tap="${this.clear}" icon="cross"></ef-icon>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AppstateBar.prototype, "heading", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], AppstateBar.prototype, "state", void 0);
+AppstateBar = __decorate([
+    customElement('ef-appstate-bar', {
+        alias: 'amber-appstate-bar'
+    })
+], AppstateBar);
+export { AppstateBar };

package/lib/appstate-bar/themes/halo/dark/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/icon/themes/halo/dark';
+
+elf.customStyles.define('ef-appstate-bar', ':host{--heading-text-color:#CCCCCC;--heading-background-color:#334BFF;--text-color:#000000;--background-color:hsl(236, 77%, 92%);--border-color:#404040;display:flex;align-items:center;background:var(--background-color);color:var(--text-color);outline:solid 1px var(--border-color);font-size:12rem;height:28px;--heading-text-color:#FFFFFF;--heading-background-color:#0F1E8A;--text-color:#CCCCCC;--background-color:#262626}:host([state=highlight]){--heading-background-color:hsl(337, 80%, 49%);--heading-background-color:#334BFF}:host([state=info]){--heading-background-color:#6678FF;--heading-background-color:#007678}:host ::slotted(*){padding-right:10px}:host [part=heading]{display:flex;flex:0 0 auto;align-items:center;height:100%;text-transform:uppercase;font-weight:600;background:var(--heading-background-color);color:var(--heading-text-color);padding:0 8px}:host [part=message]{flex:1 1000000 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:10px;text-align:inherit}:host [part=right]{flex:0 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [part=close]{touch-action:manipulation;flex:0 0 auto;width:16px;height:16px;margin-right:10px;stroke-width:.11em;cursor:pointer}');

package/lib/appstate-bar/themes/halo/light/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/icon/themes/halo/light';
+
+elf.customStyles.define('ef-appstate-bar', ':host{--heading-text-color:#0D0D0D;--heading-background-color:#334BFF;--text-color:#000000;--background-color:hsl(236, 77%, 92%);--border-color:#595959;display:flex;align-items:center;background:var(--background-color);color:var(--text-color);outline:solid 1px var(--border-color);font-size:12rem;height:28px;--heading-text-color:#FFFFFF;--heading-background-color:#0F1E8A;--text-color:#0D0D0D;--background-color:#F2F2F2;--border-color:#CCCCCC}:host([state=highlight]){--heading-background-color:hsl(337, 80%, 49%);--heading-background-color:#334BFF}:host([state=info]){--heading-background-color:#6678FF;--heading-background-color:#007678}:host ::slotted(*){padding-right:10px}:host [part=heading]{display:flex;flex:0 0 auto;align-items:center;height:100%;text-transform:uppercase;font-weight:600;background:var(--heading-background-color);color:var(--heading-text-color);padding:0 8px}:host [part=message]{flex:1 1000000 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:10px;text-align:inherit}:host [part=right]{flex:0 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [part=close]{touch-action:manipulation;flex:0 0 auto;width:16px;height:16px;margin-right:10px;stroke-width:.11em;cursor:pointer}');

package/lib/appstate-bar/themes/solar/charcoal/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/icon/themes/solar/charcoal';
+
+elf.customStyles.define('ef-appstate-bar', ':host{--heading-text-color:#E2E2E2;--heading-background-color:#FF9933;--text-color:#000000;--background-color:hsl(236, 77%, 92%);--border-color:#4A4A52;display:flex;align-items:center;background:var(--background-color);color:var(--text-color);outline:solid 1px var(--border-color);font-size:14rem;--heading-text-color:#46A0F0;--heading-background-color:#142E45;--text-color:#C2C2C2;--background-color:#0F2233;--border-color:#000000;height:24px}:host([state=highlight]){--heading-background-color:hsl(337, 80%, 49%);--heading-text-color:#000000;--heading-background-color:#FF9933}:host([state=info]){--heading-background-color:#b35900;--heading-text-color:#C2C2C2;--heading-background-color:#282E33}:host ::slotted(*){padding-right:10px}:host [part=heading]{display:flex;flex:0 0 auto;align-items:center;height:100%;text-transform:uppercase;font-weight:600;background:var(--heading-background-color);color:var(--heading-text-color);padding:0 10px}:host [part=message]{flex:1 1000000 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:10px;text-align:inherit}:host [part=right]{flex:0 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [part=close]{touch-action:manipulation;flex:0 0 auto;margin-right:10px;stroke-width:.11em;cursor:pointer;width:15px;height:15px;stroke-width:.12em}');

package/lib/appstate-bar/themes/solar/pearl/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/icon/themes/solar/pearl';
+
+elf.customStyles.define('ef-appstate-bar', ':host{--heading-text-color:#484848;--heading-background-color:#FF9933;--text-color:#000000;--background-color:hsl(236, 77%, 92%);--border-color:#A9AFBA;display:flex;align-items:center;background:var(--background-color);color:var(--text-color);outline:solid 1px var(--border-color);font-size:14rem;--heading-text-color:#FFFFFF;--heading-background-color:#2A6090;--text-color:#484848;--background-color:#C1E3FE;--border-color:#FFFFFF;height:24px}:host([state=highlight]){--heading-background-color:hsl(337, 80%, 49%);--heading-text-color:#FFFFFF;--heading-background-color:#CC7F33}:host([state=info]){--heading-background-color:#EE7600;--heading-text-color:#FFFFFF;--heading-background-color:#666570}:host ::slotted(*){padding-right:10px}:host [part=heading]{display:flex;flex:0 0 auto;align-items:center;height:100%;text-transform:uppercase;font-weight:600;background:var(--heading-background-color);color:var(--heading-text-color);padding:0 10px}:host [part=message]{flex:1 1000000 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:10px;text-align:inherit}:host [part=right]{flex:0 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [part=close]{touch-action:manipulation;flex:0 0 auto;margin-right:10px;stroke-width:.11em;cursor:pointer;width:15px;height:15px;stroke-width:.12em}');

package/lib/autosuggest/helpers/types.d.ts

@@ -0,0 +1,54 @@
+import type { ItemType } from '../../item';
+export declare type AutosuggestSelectItemEvent = CustomEvent<{
+    query: string;
+    suggestion: Suggestion;
+}>;
+export declare type AutosuggestHighlightItem = {
+    highlighted: boolean;
+};
+export declare type AutosuggestHighlightItemEvent = CustomEvent<{
+    target: AutosuggestHighlightItem;
+    oldTarget: AutosuggestHighlightItem;
+}>;
+export declare type AutosuggestQueryAction = (event: CustomEvent) => void;
+export declare type AutosuggestReason = 'value-changed' | 'input-focus' | 'suggestions-revealed' | 'escape-pressed' | 'enter-pressed' | 'more-results';
+export interface Suggestion {
+    /**
+     * Type of item. Value can be `text`, `header`, `divider`
+     */
+    type?: ItemType;
+    /**
+     * The text for the label indicating the meaning of the item.
+     */
+    label?: string;
+    /**
+     * The text for the pop-up of item when it's hover.
+     */
+    title?: string;
+    /**
+     * Set the icon name from the coral-icon list
+     */
+    icon?: string;
+    /**
+     * Sets the item to be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Value of the data item.
+     */
+    value?: string;
+    /**
+     * Sort data item into the group.
+     */
+    group?: string;
+}
+export declare type AutosuggestItem = Suggestion | string | unknown;
+export interface AutosuggestQuery {
+    toString(): string;
+}
+export declare type AutosuggestTargetElement = HTMLElement & {
+    value: string;
+};
+export declare type AutosuggestMethodType = 'click' | 'enter' | 'clear' | 'reset' | 'navigation';
+export declare type AutosuggestRenderer = (suggestion: AutosuggestItem, query: AutosuggestQuery | null) => HTMLElement;
+export declare type AutosuggestHighlightable = (suggestion: AutosuggestItem, target: HTMLElement) => boolean;

package/lib/autosuggest/helpers/types.js

@@ -0,0 +1 @@
+export {};

package/lib/autosuggest/helpers/utils.d.ts

@@ -0,0 +1,39 @@
+import type { Item } from '../../item';
+import type { AutosuggestHighlightable, AutosuggestRenderer } from './types';
+/**
+ * Check whether item can be highlighted
+ * @param suggestion Suggestion object
+ * @param target item element
+ * @returns highlightable
+ */
+export declare const itemHighlightable: AutosuggestHighlightable;
+/**
+ * Replace forbidden characters in regular expressions
+ * @param string A string to process
+ * @returns clean string
+ */
+export declare const escapeRegExp: (string?: string) => string;
+/**
+ * A basic regexp matching pattern to replace text based on string input.
+ * @param text Value to test against
+ * @param query The query
+ * @param [pattern=<mark>$1</mark>] Provide a pattern to replace string
+ * @returns innerHTML The text that can be used as innerHTML
+ */
+export declare const queryWordSelect: (text: string, query?: string, pattern?: string) => string;
+/**
+ * Update element content
+ * @param el to update content
+ * @param query to search
+ * @param label text to test against
+ * @param value text to use as fallback
+ * @return {void}
+ */
+export declare const updateElementContent: (el: Item, query: string, label: string, value: string | number) => void;
+/**
+ * Build item element from data object
+ * @param suggestion Suggestion data
+ * @param query A query data (usually string, but could be any entity )
+ * @returns item
+ */
+export declare const itemRenderer: AutosuggestRenderer;

package/lib/autosuggest/helpers/utils.js

@@ -0,0 +1,75 @@
+/**
+ * Check whether item can be highlighted
+ * @param suggestion Suggestion object
+ * @param target item element
+ * @returns highlightable
+ */
+export const itemHighlightable = (suggestion, target) => {
+    return target.highlightable;
+};
+/**
+ * Replace forbidden characters in regular expressions
+ * @param string A string to process
+ * @returns clean string
+ */
+export const escapeRegExp = (string = '') => {
+    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+};
+/**
+ * A basic regexp matching pattern to replace text based on string input.
+ * @param text Value to test against
+ * @param query The query
+ * @param [pattern=<mark>$1</mark>] Provide a pattern to replace string
+ * @returns innerHTML The text that can be used as innerHTML
+ */
+export const queryWordSelect = (text, query = '', pattern = '<mark>$1</mark>') => {
+    query = query && query.trim();
+    if (!query) {
+        return text;
+    }
+    const regExReplace = new RegExp(`(${escapeRegExp(query)})`, 'ig');
+    return text.replace(regExReplace, pattern);
+};
+/**
+ * Update element content
+ * @param el to update content
+ * @param query to search
+ * @param label text to test against
+ * @param value text to use as fallback
+ * @return {void}
+ */
+export const updateElementContent = (el, query, label, value) => {
+    if (itemHighlightable(value, el)) {
+        el.innerHTML = queryWordSelect(label, query);
+    }
+    else {
+        el.label = `${value}`;
+    }
+};
+/**
+ * Build item element from data object
+ * @param suggestion Suggestion data
+ * @param query A query data (usually string, but could be any entity )
+ * @returns item
+ */
+export const itemRenderer = (suggestion, query) => {
+    const el = document.createElement('ef-item');
+    if (typeof suggestion === 'object') {
+        const { type, label, title, icon, disabled, value } = suggestion;
+        el.type = type || null;
+        el.disabled = !!disabled;
+        el.icon = icon || null;
+        el.value = value || label || '';
+        if (title) {
+            el.title = title;
+        }
+        updateElementContent(el, query || '', label || '', el.value);
+    }
+    else {
+        const value = suggestion || '';
+        el.label = value;
+        el.value = value;
+        updateElementContent(el, query || '', value, value);
+    }
+    return el;
+};