@ui5/webcomponents 0.0.0-389bdbabc → 0.0.0-3e3654870

package/dist/features/ColorPaletteMoreColors.d.ts

@@ -0,0 +1,13 @@
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import Dialog from "../Dialog.js";
+import Button from "../Button.js";
+import ColorPicker from "../ColorPicker.js";
+declare class ColorPaletteMoreColors {
+    static get dependencies(): (typeof Button | typeof Dialog | typeof ColorPicker)[];
+    static i18nBundle: I18nBundle;
+    static init(): Promise<void>;
+    get colorPaletteDialogTitle(): string;
+    get colorPaletteDialogOKButton(): string;
+    get colorPaletteCancelButton(): string;
+}
+export default ColorPaletteMoreColors;

package/dist/features/ColorPaletteMoreColors.js

@@ -0,0 +1,30 @@
+import { registerFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import Dialog from "../Dialog.js";
+import Button from "../Button.js";
+import ColorPicker from "../ColorPicker.js";
+import { COLOR_PALETTE_DIALOG_CANCEL_BUTTON, COLOR_PALETTE_DIALOG_OK_BUTTON, COLOR_PALETTE_DIALOG_TITLE, } from "../generated/i18n/i18n-defaults.js";
+class ColorPaletteMoreColors {
+    static get dependencies() {
+        return [
+            Dialog,
+            Button,
+            ColorPicker,
+        ];
+    }
+    static async init() {
+        ColorPaletteMoreColors.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+    }
+    get colorPaletteDialogTitle() {
+        return ColorPaletteMoreColors.i18nBundle.getText(COLOR_PALETTE_DIALOG_TITLE);
+    }
+    get colorPaletteDialogOKButton() {
+        return ColorPaletteMoreColors.i18nBundle.getText(COLOR_PALETTE_DIALOG_OK_BUTTON);
+    }
+    get colorPaletteCancelButton() {
+        return ColorPaletteMoreColors.i18nBundle.getText(COLOR_PALETTE_DIALOG_CANCEL_BUTTON);
+    }
+}
+registerFeature("ColorPaletteMoreColors", ColorPaletteMoreColors);
+export default ColorPaletteMoreColors;
+//# sourceMappingURL=ColorPaletteMoreColors.js.map

package/dist/features/ColorPaletteMoreColors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPaletteMoreColors.js","sourceRoot":"","sources":["../../src/features/ColorPaletteMoreColors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AACnF,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAG3E,OAAO,MAAM,MAAM,cAAc,CAAC;AAClC,OAAO,MAAM,MAAM,cAAc,CAAC;AAClC,OAAO,WAAW,MAAM,mBAAmB,CAAC;AAE5C,OAAO,EACN,kCAAkC,EAClC,8BAA8B,EAC9B,0BAA0B,GAC1B,MAAM,oCAAoC,CAAC;AAE5C,MAAM,sBAAsB;IAC3B,MAAM,KAAK,YAAY;QACtB,OAAO;YACN,MAAM;YACN,MAAM;YACN,WAAW;SACX,CAAC;IACH,CAAC;IAID,MAAM,CAAC,KAAK,CAAC,IAAI;QAChB,sBAAsB,CAAC,UAAU,GAAG,MAAM,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAC/E,CAAC;IAED,IAAI,uBAAuB;QAC1B,OAAO,sBAAsB,CAAC,UAAU,CAAC,OAAO,CAAC,0BAA0B,CAAC,CAAC;IAC9E,CAAC;IAED,IAAI,0BAA0B;QAC7B,OAAO,sBAAsB,CAAC,UAAU,CAAC,OAAO,CAAC,8BAA8B,CAAC,CAAC;IAClF,CAAC;IAED,IAAI,wBAAwB;QAC3B,OAAO,sBAAsB,CAAC,UAAU,CAAC,OAAO,CAAC,kCAAkC,CAAC,CAAC;IACtF,CAAC;CACD;AAED,eAAe,CAAC,wBAAwB,EAAE,sBAAsB,CAAC,CAAC;AAElE,eAAe,sBAAsB,CAAC","sourcesContent":["import { registerFeature } from \"@ui5/webcomponents-base/dist/FeaturesRegistry.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\n\nimport Dialog from \"../Dialog.js\";\nimport Button from \"../Button.js\";\nimport ColorPicker from \"../ColorPicker.js\";\n\nimport {\n\tCOLOR_PALETTE_DIALOG_CANCEL_BUTTON,\n\tCOLOR_PALETTE_DIALOG_OK_BUTTON,\n\tCOLOR_PALETTE_DIALOG_TITLE,\n} from \"../generated/i18n/i18n-defaults.js\";\n\nclass ColorPaletteMoreColors {\n\tstatic get dependencies() {\n\t\treturn [\n\t\t\tDialog,\n\t\t\tButton,\n\t\t\tColorPicker,\n\t\t];\n\t}\n\n\tstatic i18nBundle: I18nBundle;\n\n\tstatic async init() {\n\t\tColorPaletteMoreColors.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\n\t}\n\n\tget colorPaletteDialogTitle() {\n\t\treturn ColorPaletteMoreColors.i18nBundle.getText(COLOR_PALETTE_DIALOG_TITLE);\n\t}\n\n\tget colorPaletteDialogOKButton() {\n\t\treturn ColorPaletteMoreColors.i18nBundle.getText(COLOR_PALETTE_DIALOG_OK_BUTTON);\n\t}\n\n\tget colorPaletteCancelButton() {\n\t\treturn ColorPaletteMoreColors.i18nBundle.getText(COLOR_PALETTE_DIALOG_CANCEL_BUTTON);\n\t}\n}\n\nregisterFeature(\"ColorPaletteMoreColors\", ColorPaletteMoreColors);\n\nexport default ColorPaletteMoreColors;\n"]}

package/dist/features/InputElementsFormSupport.d.ts

@@ -0,0 +1,32 @@
+import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+interface IFormElement extends UI5Element {
+    value?: string | number;
+    name?: string;
+    disabled?: boolean;
+    required?: boolean;
+    multiple?: boolean;
+    checked?: boolean;
+}
+type NativeInputUpdateCallback = (element: IFormElement, nativeInput: HTMLInputElement) => void;
+type NativeInputChangeCallback = (e: Event) => void;
+declare class FormSupport {
+    /**
+     * Syncs the native input element, rendered into the component's light DOM,
+     * with the component's state.
+     * @param { IFormElement} element - the component with form support
+     * @param { NativeInputUpdateCallback } nativeInputUpdateCallback - callback to calculate the native input's "disabled" and "value" properties
+     */
+    static syncNativeHiddenInput(element: IFormElement, nativeInputUpdateCallback?: NativeInputUpdateCallback): void;
+    /**
+     * Syncs the native file input element, rendered into the <code>ui5-file-uploader</code> component's light DOM,
+     * with the <code>ui5-file-uploader</code> component's state.
+     * @param { IFormFileElement} element - the component with form support
+     * @param { NativeInputUpdateCallback } nativeInputUpdateCallback - callback to calculate the native input's "disabled" and "value" properties
+     * @param { NativeInputChangeCallback } nativeInputChangeCallback - callback, added to native input's "change" event
+     */
+    static syncNativeFileInput(element: IFormElement, nativeInputUpdateCallback: NativeInputUpdateCallback, nativeInputChangeCallback: NativeInputChangeCallback): void;
+    static triggerFormSubmit(element: IFormElement): void;
+    static triggerFormReset(element: IFormElement): void;
+}
+export default FormSupport;
+export { IFormElement, NativeInputChangeCallback, NativeInputUpdateCallback, };

package/dist/features/InputElementsFormSupport.js

@@ -1,54 +1,115 @@
 import { registerFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
-
+const findNearestFormElement = (element) => {
+    let currentElement = element.parentElement;
+    while (currentElement && currentElement.tagName.toLowerCase() !== "form") {
+        currentElement = currentElement.parentElement;
+    }
+    if (currentElement instanceof HTMLFormElement) {
+        return currentElement;
+    }
+};
 class FormSupport {
-	/**
-	 *
-	 * @param element - the WebComponent that needs form support
-	 * @param nativeInputUpdateCallback - determines how the native input's disabled and value properties are calculated
-	 */
-	static syncNativeHiddenInput(element, nativeInputUpdateCallback) {
-		const needsNativeInput = !!element.name;
-		let nativeInput = element.querySelector("input[type=hidden][data-ui5-form-support]");
-		if (needsNativeInput && !nativeInput) {
-			nativeInput = document.createElement("input");
-			nativeInput.type = "hidden";
-			nativeInput.setAttribute("data-ui5-form-support", "");
-			nativeInput.slot = "formSupport"; // Needed for IE - otherwise input elements are not part of the real DOM tree and are not detected by forms
-			element.appendChild(nativeInput);
-		}
-		if (!needsNativeInput && nativeInput) {
-			element.removeChild(nativeInput);
-		}
-
-		if (needsNativeInput) {
-			nativeInput.name = element.name;
-			(nativeInputUpdateCallback || copyDefaultProperties)(element, nativeInput);
-		}
-	}
-
-	static triggerFormSubmit(element) {
-		if (!element.submits) {
-			return;
-		}
-		let currentElement = element.parentElement;
-		while (currentElement && currentElement.tagName.toLowerCase() !== "form") {
-			currentElement = currentElement.parentElement;
-		}
-		if (currentElement) {
-			currentElement.submit();
-		} else {
-			console.error(`${element} is not within a form. Please add it in a form.`); // eslint-disable-line
-		}
-	}
+    /**
+     * Syncs the native input element, rendered into the component's light DOM,
+     * with the component's state.
+     * @param { IFormElement} element - the component with form support
+     * @param { NativeInputUpdateCallback } nativeInputUpdateCallback - callback to calculate the native input's "disabled" and "value" properties
+     */
+    static syncNativeHiddenInput(element, nativeInputUpdateCallback) {
+        const needsNativeInput = !!element.name || element.required;
+        let nativeInput = element.querySelector("input[data-ui5-form-support]");
+        if (needsNativeInput && !nativeInput) {
+            nativeInput = document.createElement("input");
+            nativeInput.style.clip = "rect(0 0 0 0)";
+            nativeInput.style.clipPath = "inset(50%)";
+            nativeInput.style.height = "1px";
+            nativeInput.style.overflow = "hidden";
+            nativeInput.style.position = "absolute";
+            nativeInput.style.whiteSpace = "nowrap";
+            nativeInput.style.width = "1px";
+            nativeInput.style.bottom = "0";
+            nativeInput.setAttribute("tabindex", "-1");
+            nativeInput.required = element.required;
+            nativeInput.setAttribute("data-ui5-form-support", "");
+            nativeInput.setAttribute("aria-hidden", "true");
+            nativeInput.addEventListener("focusin", () => element.getFocusDomRef()?.focus());
+            nativeInput.slot = "formSupport"; // Needed for IE - otherwise input elements are not part of the real DOM tree and are not detected by forms
+            element.appendChild(nativeInput);
+        }
+        if (!needsNativeInput && nativeInput) {
+            element.removeChild(nativeInput);
+        }
+        if (needsNativeInput) {
+            nativeInput.name = element.name;
+            (nativeInputUpdateCallback || copyDefaultProperties)(element, nativeInput);
+        }
+    }
+    /**
+     * Syncs the native file input element, rendered into the <code>ui5-file-uploader</code> component's light DOM,
+     * with the <code>ui5-file-uploader</code> component's state.
+     * @param { IFormFileElement} element - the component with form support
+     * @param { NativeInputUpdateCallback } nativeInputUpdateCallback - callback to calculate the native input's "disabled" and "value" properties
+     * @param { NativeInputChangeCallback } nativeInputChangeCallback - callback, added to native input's "change" event
+     */
+    static syncNativeFileInput(element, nativeInputUpdateCallback, nativeInputChangeCallback) {
+        const needsNativeInput = !!element.name;
+        let nativeInput = element.querySelector(`input[type="file"][data-ui5-form-support]`);
+        if (needsNativeInput && !nativeInput) {
+            nativeInput = document.createElement("input");
+            nativeInput.type = "file";
+            nativeInput.setAttribute("data-ui5-form-support", "");
+            nativeInput.slot = "formSupport"; // Needed to visualize the input in the light dom
+            nativeInput.style.position = "absolute";
+            nativeInput.style.top = "0";
+            nativeInput.style.left = "0";
+            nativeInput.style.width = "100%";
+            nativeInput.style.height = "100%";
+            nativeInput.style.opacity = "0";
+            if (element.multiple) {
+                nativeInput.multiple = true;
+            }
+            nativeInput.addEventListener("change", nativeInputChangeCallback);
+            element.appendChild(nativeInput);
+        }
+        if (!needsNativeInput && nativeInput) {
+            element.removeChild(nativeInput);
+        }
+        if (needsNativeInput) {
+            nativeInput.name = element.name;
+            (nativeInputUpdateCallback || copyDefaultProperties)(element, nativeInput);
+        }
+    }
+    static triggerFormSubmit(element) {
+        const formElement = findNearestFormElement(element);
+        if (formElement) {
+            if (!formElement.checkValidity()) {
+                formElement.reportValidity();
+                return;
+            }
+            // eslint-disable-next-line no-undef
+            const submitPrevented = !formElement.dispatchEvent(new SubmitEvent("submit", {
+                bubbles: true,
+                cancelable: true,
+                submitter: element,
+            }));
+            if (submitPrevented) {
+                return;
+            }
+            formElement.submit();
+        }
+    }
+    static triggerFormReset(element) {
+        const formElement = findNearestFormElement(element);
+        if (formElement) {
+            formElement.reset();
+        }
+    }
 }
-
-
 const copyDefaultProperties = (element, nativeInput) => {
-	nativeInput.disabled = element.disabled;
-	nativeInput.value = element.value;
+    nativeInput.disabled = element.disabled;
+    nativeInput.value = element.value; // We do not explicitly convert to string to retain the current browser behavior
 };
-
 // Add form support to the global features registry so that Web Components can find and use it
 registerFeature("FormSupport", FormSupport);
-
 export default FormSupport;
+//# sourceMappingURL=InputElementsFormSupport.js.map

package/dist/features/InputElementsFormSupport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputElementsFormSupport.js","sourceRoot":"","sources":["../../src/features/InputElementsFormSupport.ts"],"names":[],"mappings":"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","sourcesContent":["import { registerFeature } from \"@ui5/webcomponents-base/dist/FeaturesRegistry.js\";\nimport type UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\n\ninterface IFormElement extends UI5Element {\n\tvalue?: string | number,\n\tname?: string,\n\tdisabled?: boolean,\n\trequired?: boolean,\n\tmultiple?: boolean,\n\tchecked?: boolean,\n}\n\ntype NativeInputUpdateCallback = (element: IFormElement, nativeInput: HTMLInputElement) => void;\ntype NativeInputChangeCallback = (e: Event) => void;\n\nconst findNearestFormElement = (element: IFormElement) => {\n\tlet currentElement = element.parentElement;\n\twhile (currentElement && currentElement.tagName.toLowerCase() !== \"form\") {\n\t\tcurrentElement = currentElement.parentElement;\n\t}\n\n\tif (currentElement instanceof HTMLFormElement) {\n\t\treturn currentElement;\n\t}\n};\n\nclass FormSupport {\n\t/**\n\t * Syncs the native input element, rendered into the component's light DOM,\n\t * with the component's state.\n\t * @param { IFormElement} element - the component with form support\n\t * @param { NativeInputUpdateCallback } nativeInputUpdateCallback - callback to calculate the native input's \"disabled\" and \"value\" properties\n\t */\n\tstatic syncNativeHiddenInput(element: IFormElement, nativeInputUpdateCallback?: NativeInputUpdateCallback) {\n\t\tconst needsNativeInput = !!element.name || element.required;\n\t\tlet nativeInput = element.querySelector(\"input[data-ui5-form-support]\") as HTMLInputElement;\n\t\tif (needsNativeInput && !nativeInput) {\n\t\t\tnativeInput = document.createElement(\"input\");\n\n\t\t\tnativeInput.style.clip = \"rect(0 0 0 0)\";\n\t\t\tnativeInput.style.clipPath = \"inset(50%)\";\n\t\t\tnativeInput.style.height = \"1px\";\n\t\t\tnativeInput.style.overflow = \"hidden\";\n\t\t\tnativeInput.style.position = \"absolute\";\n\t\t\tnativeInput.style.whiteSpace = \"nowrap\";\n\t\t\tnativeInput.style.width = \"1px\";\n\t\t\tnativeInput.style.bottom = \"0\";\n\t\t\tnativeInput.setAttribute(\"tabindex\", \"-1\");\n\t\t\tnativeInput.required = element.required!;\n\t\t\tnativeInput.setAttribute(\"data-ui5-form-support\", \"\");\n\t\t\tnativeInput.setAttribute(\"aria-hidden\", \"true\");\n\n\t\t\tnativeInput.addEventListener(\"focusin\", () => element.getFocusDomRef()?.focus());\n\n\t\t\tnativeInput.slot = \"formSupport\"; // Needed for IE - otherwise input elements are not part of the real DOM tree and are not detected by forms\n\t\t\telement.appendChild(nativeInput);\n\t\t}\n\t\tif (!needsNativeInput && nativeInput) {\n\t\t\telement.removeChild(nativeInput);\n\t\t}\n\n\t\tif (needsNativeInput) {\n\t\t\tnativeInput.name = element.name!;\n\t\t\t(nativeInputUpdateCallback || copyDefaultProperties)(element, nativeInput);\n\t\t}\n\t}\n\n\t/**\n\t * Syncs the native file input element, rendered into the <code>ui5-file-uploader</code> component's light DOM,\n\t * with the <code>ui5-file-uploader</code> component's state.\n\t * @param { IFormFileElement} element - the component with form support\n\t * @param { NativeInputUpdateCallback } nativeInputUpdateCallback - callback to calculate the native input's \"disabled\" and \"value\" properties\n\t * @param { NativeInputChangeCallback } nativeInputChangeCallback - callback, added to native input's \"change\" event\n\t */\n\tstatic syncNativeFileInput(element: IFormElement, nativeInputUpdateCallback: NativeInputUpdateCallback, nativeInputChangeCallback: NativeInputChangeCallback) {\n\t\tconst needsNativeInput = !!element.name;\n\t\tlet nativeInput = element.querySelector(`input[type=\"file\"][data-ui5-form-support]`) as HTMLInputElement;\n\n\t\tif (needsNativeInput && !nativeInput) {\n\t\t\tnativeInput = document.createElement(\"input\");\n\t\t\tnativeInput.type = \"file\";\n\t\t\tnativeInput.setAttribute(\"data-ui5-form-support\", \"\");\n\t\t\tnativeInput.slot = \"formSupport\"; // Needed to visualize the input in the light dom\n\t\t\tnativeInput.style.position = \"absolute\";\n\t\t\tnativeInput.style.top = \"0\";\n\t\t\tnativeInput.style.left = \"0\";\n\t\t\tnativeInput.style.width = \"100%\";\n\t\t\tnativeInput.style.height = \"100%\";\n\t\t\tnativeInput.style.opacity = \"0\";\n\n\t\t\tif (element.multiple) {\n\t\t\t\tnativeInput.multiple = true;\n\t\t\t}\n\n\t\t\tnativeInput.addEventListener(\"change\", nativeInputChangeCallback);\n\n\t\t\telement.appendChild(nativeInput);\n\t\t}\n\n\t\tif (!needsNativeInput && nativeInput) {\n\t\t\telement.removeChild(nativeInput);\n\t\t}\n\n\t\tif (needsNativeInput) {\n\t\t\tnativeInput.name = element.name!;\n\t\t\t(nativeInputUpdateCallback || copyDefaultProperties)(element, nativeInput);\n\t\t}\n\t}\n\n\tstatic triggerFormSubmit(element: IFormElement) {\n\t\tconst formElement = findNearestFormElement(element);\n\t\tif (formElement) {\n\t\t\tif (!formElement.checkValidity()) {\n\t\t\t\tformElement.reportValidity();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// eslint-disable-next-line no-undef\n\t\t\tconst submitPrevented = !formElement.dispatchEvent(new SubmitEvent(\"submit\", {\n\t\t\t\tbubbles: true,\n\t\t\t\tcancelable: true,\n\t\t\t\tsubmitter: element,\n\t\t\t}));\n\n\t\t\tif (submitPrevented) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tformElement.submit();\n\t\t}\n\t}\n\n\tstatic triggerFormReset(element: IFormElement) {\n\t\tconst formElement = findNearestFormElement(element);\n\t\tif (formElement) {\n\t\t\tformElement.reset();\n\t\t}\n\t}\n}\n\nconst copyDefaultProperties = (element: IFormElement, nativeInput: HTMLInputElement) => {\n\tnativeInput.disabled = element.disabled!;\n\tnativeInput.value = element.value as string; // We do not explicitly convert to string to retain the current browser behavior\n};\n\n// Add form support to the global features registry so that Web Components can find and use it\nregisterFeature(\"FormSupport\", FormSupport);\n\nexport default FormSupport;\n\nexport {\n\tIFormElement,\n\tNativeInputChangeCallback,\n\tNativeInputUpdateCallback,\n};\n"]}

package/dist/features/InputSuggestions.d.ts

@@ -0,0 +1,134 @@
+import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import List from "../List.js";
+import type { ListItemClickEventDetail, ListSelectionChangeEventDetail } from "../List.js";
+import ResponsivePopover from "../ResponsivePopover.js";
+import SuggestionItem from "../SuggestionItem.js";
+import SuggestionGroupItem from "../SuggestionGroupItem.js";
+import Button from "../Button.js";
+import Icon from "../Icon.js";
+import Popover from "../Popover.js";
+import GroupHeaderListItem from "../GroupHeaderListItem.js";
+import SuggestionListItem from "../SuggestionListItem.js";
+import type ListItemType from "../types/ListItemType.js";
+interface SuggestionComponent extends UI5Element {
+    _isValueStateFocused: boolean;
+    focused: boolean;
+    hasSuggestionItemSelected: boolean;
+    value: string;
+    typedInValue: string;
+    hasValueStateMessage: boolean;
+    suggestionItems: Array<SuggestionItem>;
+    open: boolean;
+    onItemMouseOver: (e: MouseEvent) => void;
+    onItemMouseOut: (e: MouseEvent) => void;
+    onItemSelected: (pressedItem: SuggestionItem, keyboardUsed: boolean) => void;
+    onItemPreviewed: (item: SuggestionListItem) => void;
+}
+type InputSuggestion = {
+    text: string;
+    description: string;
+    image?: string;
+    icon?: string;
+    type: `${ListItemType}`;
+    additionalText?: string;
+    additionalTextState: `${ValueState}`;
+    groupItem: boolean;
+    key: number;
+};
+type SuggestionsAccInfo = {
+    isGroup: boolean;
+    currentPos: number;
+    listSize: number;
+    itemText: string;
+    description: string;
+    additionalText: string;
+};
+/**
+ * A class to manage the <code>Input</code suggestion items.
+ *
+ * @class
+ * @private
+ * @author SAP SE
+ */
+declare class Suggestions {
+    component: SuggestionComponent;
+    slotName: string;
+    handleFocus: boolean;
+    highlight: boolean;
+    selectedItemIndex: number;
+    accInfo?: SuggestionsAccInfo;
+    responsivePopover?: ResponsivePopover;
+    _scrollContainer?: HTMLElement;
+    _handledPress?: boolean;
+    attachedAfterOpened?: boolean;
+    attachedAfterClose?: boolean;
+    fnOnSuggestionItemPress: (e: CustomEvent<ListItemClickEventDetail | ListSelectionChangeEventDetail>) => void;
+    fnOnSuggestionItemMouseOver: (e: MouseEvent) => void;
+    fnOnSuggestionItemMouseOut: (e: MouseEvent) => void;
+    static i18nBundle: I18nBundle;
+    static SCROLL_STEP: number;
+    constructor(component: SuggestionComponent, slotName: string, highlight: boolean, handleFocus: boolean);
+    defaultSlotProperties(hightlightValue: string): InputSuggestion[];
+    onUp(e: KeyboardEvent): boolean;
+    onDown(e: KeyboardEvent): boolean;
+    onSpace(e: KeyboardEvent): boolean;
+    onEnter(e: KeyboardEvent): boolean;
+    onPageUp(e: KeyboardEvent): boolean;
+    onPageDown(e: KeyboardEvent): boolean;
+    onHome(e: KeyboardEvent): boolean;
+    onEnd(e: KeyboardEvent): boolean;
+    onTab(): boolean;
+    toggle(bToggle: boolean, options: {
+        preventFocusRestore: boolean;
+    }): void;
+    _isScrollable(): Promise<boolean>;
+    open(): void;
+    close(preventFocusRestore?: boolean): Promise<void>;
+    updateSelectedItemPosition(pos: number): void;
+    onItemMouseOver(e: MouseEvent): void;
+    onItemMouseOut(e: MouseEvent): void;
+    onItemSelected(selectedItem: SuggestionListItem | null, keyboardUsed: boolean): void;
+    onItemPreviewed(item: SuggestionListItem): void;
+    onItemPress(e: CustomEvent<ListItemClickEventDetail | ListSelectionChangeEventDetail>): void;
+    _beforeOpen(): void;
+    _attachItemsListeners(): Promise<void>;
+    _attachPopupListeners(): void;
+    _onOpen(): void;
+    _onClose(): void;
+    _applyFocus(): void;
+    _isItemOnTarget(): boolean;
+    get _isGroupOrInactiveItem(): boolean;
+    isOpened(): boolean;
+    _handleItemNavigation(forward: boolean): void;
+    _selectNextItem(): void;
+    _selectPreviousItem(): void;
+    _moveItemSelection(previousIdx: number, nextIdx: number): void;
+    _deselectItems(): void;
+    _clearItemFocus(): void;
+    _isItemIntoView(item: SuggestionListItem): boolean;
+    _scrollItemIntoView(item: SuggestionListItem): Promise<void>;
+    _getScrollContainer(): Promise<HTMLElement>;
+    _getItems(): Array<SuggestionListItem>;
+    _getNonGroupItems(): Array<SuggestionListItem>;
+    _getComponent(): SuggestionComponent;
+    _getList(): Promise<List>;
+    _getListWidth(): Promise<number>;
+    _getRealItems(): SuggestionItem[];
+    _getSuggestionPopover(): Promise<ResponsivePopover>;
+    get itemSelectionAnnounce(): string;
+    getRowText(suggestion: SuggestionItem): string;
+    getRowDesc(suggestion: SuggestionItem): string;
+    getHighlightedText(suggestion: SuggestionItem, input: string): string;
+    getHighlightedDesc(suggestion: SuggestionItem, input: string): string;
+    hightlightInput(text: string, input: string): string;
+    sanitizeText(text: string): string;
+    get _hasValueState(): boolean;
+    _focusValueState(): void;
+    _clearValueStateFocus(): void;
+    static get dependencies(): (typeof Icon | typeof Button | typeof Popover | typeof List | typeof SuggestionListItem | typeof GroupHeaderListItem | typeof SuggestionGroupItem)[];
+    static init(): Promise<void>;
+}
+export default Suggestions;
+export type { SuggestionComponent, InputSuggestion, };