@refinitiv-ui/elements 0.0.0-build.1957399501.1

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/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/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/custom-elements.json

@@ -0,0 +1,49 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-appstate-bar",
+      "description": "Used to display at the top of application to provide a status or information.",
+      "attributes": [
+        {
+          "name": "heading",
+          "description": "Text to display in heading section.",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "state",
+          "description": "(optional) Type of state bar. Supported value are `info`, `highlight`.",
+          "type": "\"info\" | \"highlight\" | null"
+        }
+      ],
+      "properties": [
+        {
+          "name": "heading",
+          "attribute": "heading",
+          "description": "Text to display in heading section.",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "state",
+          "attribute": "state",
+          "description": "(optional) Type of state bar. Supported value are `info`, `highlight`.",
+          "type": "\"info\" | \"highlight\" | null"
+        }
+      ],
+      "events": [
+        {
+          "name": "clear",
+          "description": "fired when clear button is clicked"
+        }
+      ],
+      "slots": [
+        {
+          "name": "right",
+          "description": "place custom content on the right of bar."
+        }
+      ]
+    }
+  ]
+}

package/lib/appstate-bar/custom-elements.md

@@ -0,0 +1,22 @@
+# ef-appstate-bar
+
+Used to display at the top of application to provide a status or information.
+
+## Properties
+
+| Property  | Attribute | Type                            | Default | Description                                      |
+|-----------|-----------|---------------------------------|---------|--------------------------------------------------|
+| `heading` | `heading` | `string`                        | ""      | Text to display in heading section.              |
+| `state`   | `state`   | `"info" \| "highlight" \| null` | null    | (optional) Type of state bar. Supported value are `info`, `highlight`. |
+
+## Events
+
+| Event   | Description                        |
+|---------|------------------------------------|
+| `clear` | fired when clear button is clicked |
+
+## Slots
+
+| Name    | Description                               |
+|---------|-------------------------------------------|
+| `right` | place custom content on the right of bar. |

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/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/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/custom-elements.json

@@ -0,0 +1,243 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-autosuggest",
+      "description": "Shows suggestions based on users' query.\nIt can be used by attaching to text form control\nsuch as TextField, Multi Input, etc.\nAutosuggest supports various use cases such as\ncustom rendering, pagination, asynchronous data request, etc.",
+      "attributes": [
+        {
+          "name": "attach",
+          "description": "An HTML Element or CSS selector",
+          "type": "AutosuggestTargetElement | string | null"
+        },
+        {
+          "name": "request-on-focus",
+          "description": "Request suggestions when attach target is focused",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "more-results",
+          "description": "If set to true display 'Has more results' item",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "more-search-text",
+          "description": "Custom text for More Search",
+          "type": "string",
+          "default": "\"More results for {0}\""
+        },
+        {
+          "name": "loading",
+          "description": "If set to true show loading mask",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "debounce-rate",
+          "description": "Debounce rate in ms of the filter as a number.\nUsed to throttle the filter rate so as not to trigger unneeded filtering",
+          "type": "number",
+          "default": "\"100\""
+        },
+        {
+          "name": "html-renderer",
+          "description": "If set to true, the render function is not called. Instead the wrapper element\nshould populate and destroy suggestion elements. Rendering items manually\nmay have performance benefits in frameworks that use virtual DOM (such as `Vue`, `React`, `hyperHTML` and others)",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "opened",
+          "description": "Auto suggest popup's open state",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "defaultDebounceRate (readonly)",
+          "type": "100",
+          "default": "100"
+        },
+        {
+          "name": "defaultMoreSearchText (readonly)",
+          "type": "\"More results for {0}\"",
+          "default": "\"More results for {0}\""
+        },
+        {
+          "name": "attach",
+          "attribute": "attach",
+          "description": "An HTML Element or CSS selector",
+          "type": "AutosuggestTargetElement | string | null"
+        },
+        {
+          "name": "requestOnFocus",
+          "attribute": "request-on-focus",
+          "description": "Request suggestions when attach target is focused",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "moreResults",
+          "attribute": "more-results",
+          "description": "If set to true display 'Has more results' item",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "moreSearchText",
+          "attribute": "more-search-text",
+          "description": "Custom text for More Search",
+          "type": "string",
+          "default": "\"More results for {0}\""
+        },
+        {
+          "name": "loading",
+          "attribute": "loading",
+          "description": "If set to true show loading mask",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "query",
+          "description": "An object that represents a query from attach target",
+          "type": "AutosuggestQuery | null"
+        },
+        {
+          "name": "debounceRate",
+          "attribute": "debounce-rate",
+          "description": "Debounce rate in ms of the filter as a number.\nUsed to throttle the filter rate so as not to trigger unneeded filtering",
+          "type": "number",
+          "default": "\"100\""
+        },
+        {
+          "name": "renderer",
+          "description": "A renderer applied to suggestion.\nBy default a render maps data to item attributes",
+          "type": "AutosuggestRenderer",
+          "default": "\"itemRenderer\""
+        },
+        {
+          "name": "highlightable",
+          "description": "A function that is applied to every suggestion during the render process\nto say whether the item can be highlighted and selected. Only items that return true are considered.\nBy default the function checks for `item` `highlightable` property.",
+          "type": "AutosuggestHighlightable",
+          "default": "\"itemHighlightable\""
+        },
+        {
+          "name": "suggestions",
+          "description": "A list of suggestion items",
+          "type": "AutosuggestItem[]",
+          "default": "[]"
+        },
+        {
+          "name": "htmlRenderer",
+          "attribute": "html-renderer",
+          "description": "If set to true, the render function is not called. Instead the wrapper element\nshould populate and destroy suggestion elements. Rendering items manually\nmay have performance benefits in frameworks that use virtual DOM (such as `Vue`, `React`, `hyperHTML` and others)",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "opened",
+          "attribute": "opened",
+          "description": "Auto suggest popup's open state",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "events": [
+        {
+          "name": "item-highlight",
+          "description": "Fired when an item gets highlighted or highlight is removed"
+        },
+        {
+          "name": "add-attach-target-events",
+          "description": "Fired when attach has been set"
+        },
+        {
+          "name": "remove-attach-target-events",
+          "description": "Fired when attach has been removed"
+        },
+        {
+          "name": "item-select",
+          "description": "Fired when an item gets selected"
+        },
+        {
+          "name": "suggestions-fetch-requested",
+          "description": "Fired when auto suggest requests the data"
+        },
+        {
+          "name": "suggestions-clear-requested",
+          "description": "Fired when auto suggest requests to clear the data. If used in reactive application, prevent default and set suggestions to []"
+        },
+        {
+          "name": "suggestions-query",
+          "description": "Fired when input value has changed and the query must be set"
+        },
+        {
+          "name": "suggestions-changed",
+          "description": "Fired when suggestions changed"
+        }
+      ],
+      "slots": [
+        {
+          "name": "header",
+          "description": "Slot to add custom contents at the top of autosuggest popup"
+        },
+        {
+          "name": "footer",
+          "description": "Slot to add custom contents at the bottom of autosuggest popup"
+        }
+      ],
+      "methods": [
+        {
+          "name": "onInputValueChange",
+          "description": "Run when attach target value changes.",
+          "params": [
+            {
+              "name": "event",
+              "description": "by default `value-changed` event is listened",
+              "type": "Event"
+            }
+          ]
+        },
+        {
+          "name": "onInputBlur",
+          "description": "Run when input has lost focus",
+          "params": [
+            {
+              "name": "event",
+              "description": "by default `blur` event is listened",
+              "type": "FocusEvent"
+            }
+          ]
+        },
+        {
+          "name": "onInputFocus",
+          "description": "Run when input received focus",
+          "params": [
+            {
+              "name": "event",
+              "description": "by default `focus` event is listened",
+              "type": "FocusEvent"
+            }
+          ]
+        },
+        {
+          "name": "onInputKeyDown",
+          "description": "Run when input key down event has happened",
+          "params": [
+            {
+              "name": "event",
+              "description": "by default `keydown` event is listened",
+              "type": "KeyboardEvent"
+            }
+          ]
+        },
+        {
+          "name": "refit",
+          "description": "Set the width",
+          "params": []
+        }
+      ]
+    }
+  ]
+}