@ui5/webcomponents 1.9.2 → 1.10.0

package/dist/features/InputElementsFormSupport.js

@@ -1,109 +1,103 @@
 import { registerFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
-
 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 || 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", event => element.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);
-		}
-	}
-
-	static syncNativeFileInput(element, nativeInputUpdateCallback, nativeInputChangeCallback) {
-		const needsNativeInput = !!element.name;
-		let nativeInput = element.querySelector(`input[type=${element._type || "hidden"}][data-ui5-form-support]`);
-
-		if (needsNativeInput && !nativeInput) {
-			nativeInput = document.createElement("input");
-			nativeInput.type = element._type;
-			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) {
-		let currentElement = element.parentElement;
-		while (currentElement && currentElement.tagName.toLowerCase() !== "form") {
-			currentElement = currentElement.parentElement;
-		}
-
-		if (currentElement) {
-			// eslint-disable-next-line no-undef
-			const submitPrevented = !currentElement.dispatchEvent(new SubmitEvent("submit", {
-				bubbles: true,
-				cancelable: true,
-				submitter: element,
-			}));
-
-			if (submitPrevented) {
-				return;
-			}
-
-			currentElement.submit();
-		}
-	}
+    /**
+     * 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) {
+        let currentElement = element.parentElement;
+        while (currentElement && currentElement.tagName.toLowerCase() !== "form") {
+            currentElement = currentElement.parentElement;
+        }
+        if (currentElement instanceof HTMLFormElement) {
+            if (!currentElement.checkValidity()) {
+                currentElement.reportValidity();
+                return;
+            }
+            // eslint-disable-next-line no-undef
+            const submitPrevented = !currentElement.dispatchEvent(new SubmitEvent("submit", {
+                bubbles: true,
+                cancelable: true,
+                submitter: element,
+            }));
+            if (submitPrevented) {
+                return;
+            }
+            currentElement.submit();
+        }
+    }
 }
-
 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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"}

package/dist/features/InputSuggestions.d.ts

@@ -0,0 +1,130 @@
+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 { ClickEventDetail, SelectionChangeEventDetail } 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 InputSuggestionText = {
+    text: string;
+    description: string;
+    image?: string;
+    icon?: string;
+    type: ListItemType;
+    additionalText?: string;
+    additionalTextState: ValueState;
+    groupItem: boolean;
+    key: number;
+};
+type SuggestionsAccInfo = {
+    currentPos: number;
+    listSize: number;
+    itemText: 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<ClickEventDetail | SelectionChangeEventDetail>) => 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): InputSuggestionText[];
+    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<ClickEventDetail | SelectionChangeEventDetail>): 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>;
+    _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 Popover | typeof Button | typeof ResponsivePopover | typeof List | typeof SuggestionListItem | typeof SuggestionItem | typeof GroupHeaderListItem | typeof SuggestionGroupItem)[];
+    static init(): Promise<void>;
+}
+export default Suggestions;
+export type { SuggestionComponent, InputSuggestionText, };