@ui5/webcomponents-base 0.0.0-0fcda382e → 0.0.0-10f3c0dc7

package/dist/connectToComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"connectToComponent.js","sourceRoot":"","sources":["../src/connectToComponent.ts"],"names":[],"mappings":"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","sourcesContent":["import type UI5Element from \"./UI5Element.js\";\nimport { renderDeferred } from \"./Render.js\";\nimport type { Interval } from \"./types.js\";\n\nconst MISSING_ELEMENT_POLL_TIMEOUT = 500; // how often to poll for not-yet-in-DOM friend elements\nconst connections = new Map<string, HTMLElement>();\nconst intervals = new Map<string, Interval>();\n\ntype ConnectOptions = {\n\thost: UI5Element;\n\tpropName: string;\n\tonConnect?: (friend: HTMLElement) => void;\n\tonDisconnect?: (friend: HTMLElement) => void;\n}\n\nconst connectToComponent = (options: ConnectOptions): HTMLElement | undefined => {\n\tconst host = options.host;\n\tconst propName = options.propName;\n\tconst friend = host[propName as keyof typeof host] as HTMLElement | string | undefined;\n\n\tlet connectedTo: HTMLElement | undefined;\n\tif (friend === undefined || friend === \"\") {\n\t\tconnectedTo = undefined; // do not return early even if a \"menu\" property is not set - it may have been set before and cleanup must run\n\t} else if (friend instanceof HTMLElement) {\n\t\tconnectedTo = friend;\n\t} else {\n\t\tconst rootNode = host.getRootNode() as Document;\n\t\tconnectedTo = (rootNode.getElementById && rootNode.getElementById(friend)) || undefined;\n\t}\n\n\tconst key = `${host._id}-${propName}`;\n\tconst prevConnectedTo = connections.get(key);\n\n\t// Not connected - return undefined\n\tif (!connectedTo) {\n\t\tif (prevConnectedTo) { // but first disconnect, if needed\n\t\t\toptions.onDisconnect && options.onDisconnect(prevConnectedTo);\n\t\t\tconnections.delete(key);\n\t\t}\n\n\t\t// if friend element not in DOM yet, start polling\n\t\tif (typeof friend === \"string\" && friend && !intervals.has(key)) {\n\t\t\tconst interval = setInterval(() => {\n\t\t\t\tconst rootNode = host.getRootNode() as Document;\n\t\t\t\tconst found = (rootNode.getElementById && rootNode.getElementById(friend));\n\n\t\t\t\tif (found) {\n\t\t\t\t\tclearInterval(intervals.get(key));\n\t\t\t\t\tintervals.delete(key);\n\t\t\t\t\trenderDeferred(host);\n\t\t\t\t}\n\t\t\t}, MISSING_ELEMENT_POLL_TIMEOUT);\n\t\t\tintervals.set(key, interval);\n\t\t}\n\n\t\treturn;\n\t}\n\n\t// If connected, but still polling, stop polling\n\tif (intervals.has(key)) {\n\t\tclearInterval(intervals.get(key));\n\t\tintervals.delete(key);\n\t}\n\n\t// Connected - either for the first time, or to something else\n\tif (prevConnectedTo !== connectedTo) {\n\t\tif (prevConnectedTo) {\n\t\t\toptions.onDisconnect && options.onDisconnect(prevConnectedTo);\n\t\t}\n\t\toptions.onConnect && options.onConnect(connectedTo);\n\t\tconnections.set(key, connectedTo);\n\t}\n\n\treturn connections.get(key);\n};\n\nexport default connectToComponent;\n"]}

package/dist/converters/DOMReference.d.ts

@@ -0,0 +1,5 @@
+declare const DOMReferenceConverter: {
+    toAttribute(propertyValue: string | HTMLElement): string | null;
+    fromAttribute(value: string | null): string | null;
+};
+export default DOMReferenceConverter;

package/dist/converters/DOMReference.js

@@ -0,0 +1,13 @@
+const DOMReferenceConverter = {
+    toAttribute(propertyValue) {
+        if (propertyValue instanceof HTMLElement) {
+            return null;
+        }
+        return propertyValue;
+    },
+    fromAttribute(value) {
+        return value;
+    },
+};
+export default DOMReferenceConverter;
+//# sourceMappingURL=DOMReference.js.map

package/dist/converters/DOMReference.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DOMReference.js","sourceRoot":"","sources":["../../src/converters/DOMReference.ts"],"names":[],"mappings":"AAAA,MAAM,qBAAqB,GAAG;IAC7B,WAAW,CAAC,aAAmC;QAC9C,IAAI,aAAa,YAAY,WAAW,EAAE,CAAC;YAC1C,OAAO,IAAI,CAAC;QACb,CAAC;QAED,OAAO,aAAa,CAAC;IACtB,CAAC;IACD,aAAa,CAAC,KAAoB;QACjC,OAAO,KAAK,CAAC;IACd,CAAC;CACD,CAAC;AAEF,eAAe,qBAAqB,CAAC","sourcesContent":["const DOMReferenceConverter = {\n\ttoAttribute(propertyValue: string | HTMLElement) {\n\t\tif (propertyValue instanceof HTMLElement) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn propertyValue;\n\t},\n\tfromAttribute(value: string | null) {\n\t\treturn value;\n\t},\n};\n\nexport default DOMReferenceConverter;\n"]}

package/dist/createReactComponent.d.ts

@@ -0,0 +1,26 @@
+/**
+ * React wrapper factory for UI5 Web Components.
+ *
+ * This lightweight factory creates typed React components that wrap UI5 Web Components.
+ * It handles:
+ * - Event prop conversion (onXxx → ui5-xxx event listeners)
+ * - Ref forwarding
+ * - Children handling
+ *
+ * Note: Supports React >=19.
+ *
+ * Note: This is for documentation samples only - for production React apps,
+ * use the official @ui5/webcomponents-react library.
+ */
+import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+/**
+ * Creates a React component wrapper for a UI5 Web Component.
+ *
+ * @param ComponentClass - The UI5 Web Component class (e.g., Button from "@ui5/webcomponents/dist/Button.js")
+ * @returns A React component that renders the custom element with proper TypeScript types
+ * @since 2.21.0
+ * @example
+ * import Button from "@ui5/webcomponents/dist/Button.js";
+ * const ReactButton = createReactComponent(Button);
+ */
+export default function createReactComponent<T extends typeof UI5Element>(klass: T): (props: InstanceType<T>["_jsxProps"]) => import("react").DOMElement<Record<string, unknown>, Element>;

package/dist/createReactComponent.js

@@ -0,0 +1,51 @@
+/**
+ * React wrapper factory for UI5 Web Components.
+ *
+ * This lightweight factory creates typed React components that wrap UI5 Web Components.
+ * It handles:
+ * - Event prop conversion (onXxx → ui5-xxx event listeners)
+ * - Ref forwarding
+ * - Children handling
+ *
+ * Note: Supports React >=19.
+ *
+ * Note: This is for documentation samples only - for production React apps,
+ * use the official @ui5/webcomponents-react library.
+ */
+import { createElement } from "react";
+/**
+ * Creates a React component wrapper for a UI5 Web Component.
+ *
+ * @param ComponentClass - The UI5 Web Component class (e.g., Button from "@ui5/webcomponents/dist/Button.js")
+ * @returns A React component that renders the custom element with proper TypeScript types
+ * @since 2.21.0
+ * @example
+ * import Button from "@ui5/webcomponents/dist/Button.js";
+ * const ReactButton = createReactComponent(Button);
+ */
+export default function createReactComponent(klass) {
+    const tag = klass.getMetadata().getTag();
+    return function Component(props) {
+        const patchedProps = {};
+        Object.entries(props).forEach(([key, value]) => {
+            if (key.startsWith("on") && typeof value === "function") {
+                // React 19 wraps DOM events (change, click, input, etc.) in SyntheticEvent,
+                // hiding CustomEvent.detail under nativeEvent.detail.
+                // Patch all event handlers to restore detail from nativeEvent.
+                const originalHandler = value;
+                patchedProps[key] = (e) => {
+                    const nativeDetail = e.nativeEvent?.detail;
+                    if (nativeDetail !== undefined) {
+                        e.detail = nativeDetail;
+                    }
+                    originalHandler(e);
+                };
+            }
+            else {
+                patchedProps[key] = value;
+            }
+        });
+        return createElement(tag, patchedProps);
+    };
+}
+//# sourceMappingURL=createReactComponent.js.map

package/dist/createReactComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createReactComponent.js","sourceRoot":"","sources":["../src/createReactComponent.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAGtC;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAA8B,KAAQ;IACjF,MAAM,GAAG,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,CAAC;IAEzC,OAAO,SAAS,SAAS,CAAC,KAAmC;QAC5D,MAAM,YAAY,GAA4B,EAAE,CAAC;QAEjD,MAAM,CAAC,OAAO,CAAC,KAAgC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;YACzE,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,OAAO,KAAK,KAAK,UAAU,EAAE,CAAC;gBACzD,4EAA4E;gBAC5E,sDAAsD;gBACtD,+DAA+D;gBAC/D,MAAM,eAAe,GAAG,KAAK,CAAC;gBAC9B,YAAY,CAAC,GAAG,CAAC,GAAG,CAAC,CAAQ,EAAE,EAAE;oBAChC,MAAM,YAAY,GAAI,CAAsD,CAAC,WAAW,EAAE,MAAM,CAAC;oBACjG,IAAI,YAAY,KAAK,SAAS,EAAE,CAAC;wBAC/B,CAAoC,CAAC,MAAM,GAAG,YAAY,CAAC;oBAC7D,CAAC;oBACD,eAAe,CAAC,CAAC,CAAC,CAAC;gBACpB,CAAC,CAAC;YACH,CAAC;iBAAM,CAAC;gBACP,YAAY,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;YAC3B,CAAC;QACF,CAAC,CAAC,CAAC;QAEH,OAAO,aAAa,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC;IACzC,CAAC,CAAC;AACH,CAAC","sourcesContent":["/**\n * React wrapper factory for UI5 Web Components.\n *\n * This lightweight factory creates typed React components that wrap UI5 Web Components.\n * It handles:\n * - Event prop conversion (onXxx → ui5-xxx event listeners)\n * - Ref forwarding\n * - Children handling\n *\n * Note: Supports React >=19.\n *\n * Note: This is for documentation samples only - for production React apps,\n * use the official @ui5/webcomponents-react library.\n */\n\nimport { createElement } from \"react\";\nimport type UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\n\n/**\n * Creates a React component wrapper for a UI5 Web Component.\n *\n * @param ComponentClass - The UI5 Web Component class (e.g., Button from \"@ui5/webcomponents/dist/Button.js\")\n * @returns A React component that renders the custom element with proper TypeScript types\n * @since 2.21.0\n * @example\n * import Button from \"@ui5/webcomponents/dist/Button.js\";\n * const ReactButton = createReactComponent(Button);\n */\nexport default function createReactComponent<T extends typeof UI5Element>(klass: T) {\n\tconst tag = klass.getMetadata().getTag();\n\n\treturn function Component(props: InstanceType<T>[\"_jsxProps\"]) {\n\t\tconst patchedProps: Record<string, unknown> = {};\n\n\t\tObject.entries(props as Record<string, unknown>).forEach(([key, value]) => {\n\t\t\tif (key.startsWith(\"on\") && typeof value === \"function\") {\n\t\t\t\t// React 19 wraps DOM events (change, click, input, etc.) in SyntheticEvent,\n\t\t\t\t// hiding CustomEvent.detail under nativeEvent.detail.\n\t\t\t\t// Patch all event handlers to restore detail from nativeEvent.\n\t\t\t\tconst originalHandler = value;\n\t\t\t\tpatchedProps[key] = (e: Event) => {\n\t\t\t\t\tconst nativeDetail = (e as unknown as { nativeEvent?: { detail: unknown } }).nativeEvent?.detail;\n\t\t\t\t\tif (nativeDetail !== undefined) {\n\t\t\t\t\t\t(e as unknown as { detail: unknown }).detail = nativeDetail;\n\t\t\t\t\t}\n\t\t\t\t\toriginalHandler(e);\n\t\t\t\t};\n\t\t\t} else {\n\t\t\t\tpatchedProps[key] = value;\n\t\t\t}\n\t\t});\n\n\t\treturn createElement(tag, patchedProps);\n\t};\n}\n"]}

package/dist/css/BusyIndicator.css

@@ -0,0 +1,80 @@
+.busy-indicator-wrapper {
+    position: relative;
+    height: 100%;
+    width: 100%;
+}
+
+.busy-indicator-overlay {
+    display: var(--ui5_web_components_busy_indicator_display);
+    position: absolute;
+    inset: 0;
+    background: var(--ui5_web_components_busy_indicator_background-color);
+    z-index: 99;
+}
+
+.busy-indicator-busy-area {
+    display: var(--ui5_web_components_busy_indicator_display);
+    position: absolute;
+    z-index: 99;
+    inset: 0;
+    justify-content: center;
+    align-items: center;
+    background-color: inherit;
+    flex-direction: column;
+    color: var(--_ui5_busy_indicator_color);
+}
+
+:host([__is-busy]) .busy-indicator-wrapper > :not(.busy-indicator-busy-area):not(.busy-indicator-overlay):not([busy-indicator-before-span]) {
+    --ui5_web_components_busy_indicator_display: none;
+}
+
+.busy-indicator-busy-area:focus {
+    outline: var(--_ui5_busy_indicator_focus_outline);
+    outline-offset: -.125rem;
+}
+
+.busy-indicator-circle {
+    width: 1rem;
+    height: 1rem;
+    display: inline-block;
+    background-color: currentColor;
+    border-radius: 50%;
+}
+
+.circle-animation-0 {
+    animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
+}
+
+.circle-animation-1 {
+    animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
+    animation-delay: 200ms;
+}
+
+.circle-animation-2 {
+    animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
+    animation-delay: 400ms;
+}
+
+.sapUiLocalBusy {
+	--ui5_web_components_busy_indicator_display: none;
+}
+
+.busy-indicator-wrapper [ui5-busy-indicator] {
+    display: none;
+}
+
+@keyframes grow {
+    0%, 50%, 100% {
+        -webkit-transform: scale(0.5);
+        -moz-transform: scale(0.5);
+        -ms-transform: scale(0.5);
+        transform: scale(0.5);
+    }
+
+    25% {
+        -webkit-transform: scale(1);
+        -moz-transform: scale(1);
+        -ms-transform: scale(1);
+        transform: scale(1);
+    }
+}

package/dist/css/MultipleDragGhost.css

@@ -0,0 +1,17 @@
+:host {
+    /* copy list item design */
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    color: var(--sapList_TextColor);
+    background-color: var(--sapList_Background);
+    font-family: var(--sapFontFamily);
+    height: var(--sapElement_LineHeight);
+    border-bottom: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
+    /* drag and drop related */
+    opacity: 0.8;
+    position: absolute;
+    padding: 0 1rem;
+    top: -1000px;
+    left: -1000px;
+}

package/dist/css/OpenUI5PopupStyles.css

@@ -0,0 +1,10 @@
+[data-sap-ui-popup][popover] {
+	border: none;
+	overflow: visible;
+	margin: 0;
+}
+
+.sapUiBLy[popover] {
+	width: 100%;
+	height: 100%;
+}

package/dist/css/ScrollbarStyles.css

@@ -0,0 +1,3 @@
+html:not(.ui5-content-native-scrollbars) {
+	scrollbar-color: var(--sapScrollBar_FaceColor) var(--sapScrollBar_TrackColor);
+}

package/dist/css/SystemCSSVars.css

@@ -0,0 +1,34 @@
+:root {
+	/*
+	Use a non-existent variable to always trigger the fallback.
+	Because this variable is never defined, the fallback is used
+	in all cases.
+
+	Using `initial` as a fallback can work only for properties
+	that treat it as an invalid value. To avoid this inconsistency,
+	we intentionally reference an undefined variable, which is
+	always considered invalid and undefined.
+	*/
+	--_ui5-cozy-size: var(--_ui5-f2d95f8);
+
+	--_ui5-compact-size: ;
+	--_ui5_content_density: cozy;
+}
+
+[data-ui5-compact-size],
+.ui5-content-density-compact,
+.sapUiSizeCompact {
+	--_ui5-cozy-size: ;
+	/*
+	Use a non-existent variable to always trigger the fallback.
+	Because this variable is never defined, the fallback is used
+	in all cases.
+
+	Using `initial` as a fallback can work only for properties
+	that treat it as an invalid value. To avoid this inconsistency,
+	we intentionally reference an undefined variable, which is
+	always considered invalid and undefined.
+	*/
+	--_ui5-compact-size: var(--_ui5-f2d95f8);
+	--_ui5_content_density: compact;
+}