xmlui 0.10.14 → 0.10.16

package/dist/scripts/src/components-core/rendering/ComponentAdapter.js

@@ -53,6 +53,7 @@ const lodash_es_1 = require("lodash-es");
 const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
 const extractParam_1 = require("../utils/extractParam");
 const ThemeContext_1 = require("../theming/ThemeContext");
+const StyleContext_1 = require("../theming/StyleContext");
 const mergeProps_1 = require("../utils/mergeProps");
 const ComponentDecorator_1 = __importDefault(require("../ComponentDecorator"));
 const valueExtractor_1 = require("../rendering/valueExtractor");
@@ -68,9 +69,7 @@ const event_handlers_1 = require("../event-handlers");
 const UnknownComponent_1 = __importDefault(require("./UnknownComponent"));
 const InvalidComponent_1 = __importDefault(require("./InvalidComponent"));
 const layout_resolver_1 = require("../theming/layout-resolver");
-const TooltipNative_1 = require("../../components/Tooltip/TooltipNative");
-const StyleContext_1 = require("../theming/StyleContext");
-const AnimationNative_1 = require("../../components/Animation/AnimationNative");
+const BehaviorContext_1 = require("../behaviors/BehaviorContext");
 /**
  * This component's primary responsibility is to transform a particular component definition
  * into its React representation using the current rendering context.
@@ -176,39 +175,32 @@ const ComponentAdapter = (0, react_1.forwardRef)(function ComponentAdapter(_a, r
         // });
     }, [appContext.mediaSize, layoutContextRef, safeNode.props, valueExtractor]);
     // const className = useComponentStyle(cssProps);
-    // --- Check if the component has a tooltip property
-    const tooltipText = (0, react_1.useMemo)(() => { var _a; return valueExtractor((_a = safeNode.props) === null || _a === void 0 ? void 0 : _a.tooltip, true); }, [safeNode.props, valueExtractor]);
-    // --- Check if the component has a tooltip property
-    const tooltipMarkdown = (0, react_1.useMemo)(() => { var _a; return valueExtractor((_a = safeNode.props) === null || _a === void 0 ? void 0 : _a.tooltipMarkdown, true); }, [safeNode.props, valueExtractor]);
-    const tooltipOptions = (0, react_1.useMemo)(() => { var _a; return valueExtractor((_a = safeNode.props) === null || _a === void 0 ? void 0 : _a.tooltipOptions, true); }, [safeNode.props, valueExtractor]);
-    const animation = (0, react_1.useMemo)(() => { var _a; return valueExtractor((_a = safeNode.props) === null || _a === void 0 ? void 0 : _a.animation, true); }, [safeNode.props, valueExtractor]);
-    const animationOptions = (0, react_1.useMemo)(() => { var _a; return valueExtractor((_a = safeNode.props) === null || _a === void 0 ? void 0 : _a.animationOptions, true); }, [safeNode.props, valueExtractor]);
     // --- As compileLayout generates new cssProps and nonCssProps objects every time, we need to
     // --- memoize them using shallow comparison to avoid unnecessary re-renders.
     const stableLayoutCss = (0, hooks_1.useShallowCompareMemoize)(cssProps);
     const className = (0, StyleContext_1.useComponentStyle)(stableLayoutCss);
     const { inspectId, refreshInspection } = (0, InspectorContext_1.useInspector)(safeNode, uid);
+    // --- Assemble the renderer context we pass down the rendering chain
+    const rendererContext = {
+        node: safeNode,
+        state: state[uid] || constants_1.EMPTY_OBJECT,
+        updateState: memoedUpdateState,
+        appContext,
+        extractValue: valueExtractor,
+        lookupEventHandler: memoedLookupEventHandler,
+        lookupAction: memoedLookupAction,
+        lookupSyncCallback: memoedLookupSyncCallback,
+        extractResourceUrl,
+        renderChild: memoedRenderChild,
+        registerComponentApi: memoedRegisterComponentApi,
+        className,
+        layoutContext: layoutContextRef === null || layoutContextRef === void 0 ? void 0 : layoutContextRef.current,
+        uid,
+    };
     // --- No special behavior, let's render the component according to its definition.
     let renderedNode = null;
     let renderingError = null;
     try {
-        // --- Assemble the renderer context we pass down the rendering chain
-        const rendererContext = {
-            node: safeNode,
-            state: state[uid] || constants_1.EMPTY_OBJECT,
-            updateState: memoedUpdateState,
-            appContext,
-            extractValue: valueExtractor,
-            lookupEventHandler: memoedLookupEventHandler,
-            lookupAction: memoedLookupAction,
-            lookupSyncCallback: memoedLookupSyncCallback,
-            extractResourceUrl,
-            renderChild: memoedRenderChild,
-            registerComponentApi: memoedRegisterComponentApi,
-            className,
-            layoutContext: layoutContextRef === null || layoutContextRef === void 0 ? void 0 : layoutContextRef.current,
-            uid,
-        };
         if (safeNode.type === "Slot") {
             // --- Transpose the children from the parent component to the slot in
             // --- the compound component
@@ -245,6 +237,18 @@ const ComponentAdapter = (0, react_1.forwardRef)(function ComponentAdapter(_a, r
         if (isApiBound) {
             return ((0, jsx_runtime_1.jsx)(ApiBoundComponent_1.ApiBoundComponent, { uid: uid, renderChild: memoedRenderChild, node: safeNode, apiBoundEvents: apiBoundEvents, apiBoundProps: apiBoundProps, layoutContextRef: layoutContextRef, parentRendererContext: parentRenderContext }, safeNode.uid));
         }
+        /**
+         *
+         */
+        const { getBehaviors } = (0, BehaviorContext_1.useBehaviors)();
+        const behaviors = getBehaviors();
+        if (!isCompoundComponent) {
+            for (const behavior of behaviors) {
+                if (behavior.canAttach(rendererContext.node, descriptor)) {
+                    renderedNode = behavior.attach(rendererContext, renderedNode);
+                }
+            }
+        }
         // --- The current layout context may suggest to wrap the rendered node.
         if ((_b = layoutContextRef.current) === null || _b === void 0 ? void 0 : _b.wrapChild) {
             renderedNode = layoutContextRef.current.wrapChild(rendererContext, renderedNode, descriptor);
@@ -280,27 +284,7 @@ const ComponentAdapter = (0, react_1.forwardRef)(function ComponentAdapter(_a, r
                 ? (0, react_1.cloneElement)(renderedNode, null, children)
                 : renderedNode;
     }
-    const applyWrappers = (node) => {
-        // --- Handle animations and tooltips together
-        if (animation && (tooltipMarkdown || tooltipText)) {
-            const parsedOptions = (0, TooltipNative_1.parseTooltipOptions)(tooltipOptions);
-            const parsedAnimationOptions = (0, AnimationNative_1.parseAnimationOptions)(animationOptions);
-            return ((0, jsx_runtime_1.jsx)(TooltipNative_1.Tooltip, Object.assign({ text: tooltipText, markdown: tooltipMarkdown }, parsedOptions, { children: (0, jsx_runtime_1.jsx)(AnimationNative_1.Animation, Object.assign({ animation: (0, AnimationNative_1.parseAnimation)(animation) }, parsedAnimationOptions, { children: node })) })));
-        }
-        // --- Handle animation
-        if (animation) {
-            const parsedAnimationOptions = (0, AnimationNative_1.parseAnimationOptions)(animationOptions);
-            return ((0, jsx_runtime_1.jsx)(AnimationNative_1.Animation, Object.assign({ animation: (0, AnimationNative_1.parseAnimation)(animation) }, parsedAnimationOptions, { children: node })));
-        }
-        // --- Handle tooltip
-        if (tooltipMarkdown || tooltipText) {
-            const parsedOptions = (0, TooltipNative_1.parseTooltipOptions)(tooltipOptions);
-            return ((0, jsx_runtime_1.jsx)(TooltipNative_1.Tooltip, Object.assign({ text: tooltipText, markdown: tooltipMarkdown }, parsedOptions, { children: node })));
-        }
-        // --- No wrappers needed
-        return node;
-    };
-    return applyWrappers(nodeToRender);
+    return nodeToRender;
 });
 /**
  * This function renders the content of a slot. If the slot is named, it looks for a template

package/dist/scripts/src/components-core/rendering/nodeUtils.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasRenderableChildren = hasRenderableChildren;
+function hasRenderableChildren(children) {
+    return !!(children === null || children === void 0 ? void 0 : children.some((child) => (child === null || child === void 0 ? void 0 : child.type) !== "Slot"));
+}

package/dist/scripts/src/components-core/theming/layout-resolver.js

@@ -144,6 +144,7 @@ function resolveLayoutProps(layoutProps = constants_1.EMPTY_OBJECT, layoutContex
     collectCss("zoom");
     collectCss("cursor");
     collectCss("whiteSpace");
+    collectCss("transform");
     // --- Outline
     collectCss("outline");
     collectCss("outlineWidth");
@@ -375,6 +376,7 @@ const layoutPatterns = {
     textDecorationStyle: [],
     textDecorationThickness: [],
     textUnderlineOffset: [],
+    transform: [],
     // --- Outline
     outline: [],
     outlineWidth: [],

package/dist/scripts/src/components-core/utils/treeUtils.js

@@ -4,21 +4,34 @@ exports.flattenNode = flattenNode;
 exports.toFlatTree = toFlatTree;
 exports.walkTree = walkTree;
 exports.unPackTree = unPackTree;
-function flattenNode(node, depth, result, openedIds) {
-    const { children, uid } = node;
-    const isExpanded = openedIds.includes(uid);
-    result.push(Object.assign(Object.assign({}, node), { hasChildren: !!children && children.length > 0, depth,
-        isExpanded }));
+exports.flatToNative = flatToNative;
+exports.hierarchyToNative = hierarchyToNative;
+function flattenNode(node, depth, result, openedIds, dynamicField, nodeStates) {
+    const { children, key } = node;
+    const isExpanded = openedIds.includes(key);
+    // Check if node has actual children OR is a dynamic node that can load children
+    const hasActualChildren = !!children && children.length > 0;
+    const isDynamic = dynamicField && node[dynamicField];
+    const hasChildren = hasActualChildren || isDynamic;
+    // Get loading state for this node
+    const loadingState = (nodeStates === null || nodeStates === void 0 ? void 0 : nodeStates.get(key)) || 'unloaded';
+    const flatNode = Object.assign(Object.assign({}, node), { hasChildren,
+        depth,
+        isExpanded,
+        loadingState, 
+        // Ensure key is preserved (in case it was overwritten by ...node spread)
+        key: key || node.key || node.id });
+    result.push(flatNode);
     if (isExpanded && children) {
         for (let child of children) {
-            flattenNode(child, depth + 1, result, openedIds);
+            flattenNode(child, depth + 1, result, openedIds, dynamicField, nodeStates);
         }
     }
 }
-function toFlatTree(treeData, openedIds) {
+function toFlatTree(treeData, openedIds, dynamicField, nodeStates) {
     const ret = [];
     treeData.forEach((node) => {
-        flattenNode(node, 0, ret, openedIds);
+        flattenNode(node, 0, ret, openedIds, dynamicField, nodeStates);
     });
     return ret;
 }
@@ -33,12 +46,12 @@ function unPackTree(items = [], parentIds = [], parentPath = []) {
     let treeItemsById = {};
     items.forEach((item, index) => {
         const path = [...parentPath, index];
-        const uid = item.uid || item.cid;
-        const childTree = unPackTree(item.children, [...parentIds, uid], path);
-        const treeItem = Object.assign(Object.assign({}, item), { uid: uid, key: uid, parentIds,
+        const id = item.id || item.cid;
+        const childTree = unPackTree(item.children, [...parentIds, id], path);
+        const treeItem = Object.assign(Object.assign({}, item), { id: id, key: id, parentIds,
             path, children: childTree.treeData, selectable: item.selectable });
         treeData.push(treeItem);
-        treeItemsById[uid] = treeItem;
+        treeItemsById[id] = treeItem;
         treeItemsById = Object.assign(Object.assign({}, treeItemsById), childTree.treeItemsById);
     });
     return {
@@ -46,3 +59,165 @@ function unPackTree(items = [], parentIds = [], parentPath = []) {
         treeItemsById,
     };
 }
+/**
+ * Transforms flat array data with parent-child relationships into UnPackedTreeData format
+ * @param flatData Array of flat objects with id and parentId relationships
+ * @param fieldConfig Configuration for mapping object fields to tree properties
+ * @returns UnPackedTreeData structure suitable for Tree component
+ */
+function flatToNative(flatData, fieldConfig) {
+    if (!flatData || flatData.length === 0) {
+        return { treeData: [], treeItemsById: {} };
+    }
+    // Build parent-to-children map for efficient lookup
+    const childrenMap = new Map();
+    const itemsById = new Map();
+    const rootItems = [];
+    // First pass: organize items and build relationships
+    flatData.forEach(item => {
+        const id = item[fieldConfig.idField];
+        const parentId = item[fieldConfig.parentField || 'parentId'];
+        // Store item for lookup
+        itemsById.set(id, item);
+        if (parentId && parentId !== '') {
+            // Has parent - add to children map
+            if (!childrenMap.has(parentId)) {
+                childrenMap.set(parentId, []);
+            }
+            childrenMap.get(parentId).push(item);
+        }
+        else {
+            // Root item
+            rootItems.push(item);
+        }
+    });
+    // Generate unique IDs for internal tree structure
+    let idCounter = 1;
+    const sourceIdToId = new Map();
+    const getOrCreateId = (sourceId) => {
+        if (!sourceIdToId.has(sourceId)) {
+            sourceIdToId.set(sourceId, `flat_${idCounter++}`);
+        }
+        return sourceIdToId.get(sourceId);
+    };
+    // Recursive function to build TreeNode structure
+    const buildTreeNode = (item, parentIds = [], pathSegments = []) => {
+        var _a;
+        const sourceId = item[fieldConfig.idField];
+        const id = getOrCreateId(sourceId);
+        const displayName = item[fieldConfig.labelField] || sourceId;
+        const currentPath = [...pathSegments, displayName];
+        // Get children for this item
+        const childItems = childrenMap.get(sourceId) || [];
+        const children = childItems.map(childItem => buildTreeNode(childItem, [...parentIds, sourceId], currentPath));
+        // Build the TreeNode
+        const treeNode = Object.assign(Object.assign(Object.assign(Object.assign({ id, key: sourceId, path: currentPath, displayName,
+            parentIds, selectable: fieldConfig.selectableField ? ((_a = item[fieldConfig.selectableField]) !== null && _a !== void 0 ? _a : true) : true, children }, item), (fieldConfig.iconField && item[fieldConfig.iconField] && {
+            icon: item[fieldConfig.iconField]
+        })), (fieldConfig.iconExpandedField && item[fieldConfig.iconExpandedField] && {
+            iconExpanded: item[fieldConfig.iconExpandedField]
+        })), (fieldConfig.iconCollapsedField && item[fieldConfig.iconCollapsedField] && {
+            iconCollapsed: item[fieldConfig.iconCollapsedField]
+        }));
+        return treeNode;
+    };
+    // Build tree structure from root items
+    const treeData = rootItems.map(rootItem => buildTreeNode(rootItem));
+    // Build lookup map by ID
+    const treeItemsById = {};
+    const collectNodes = (nodes) => {
+        nodes.forEach(node => {
+            treeItemsById[node.id] = node;
+            if (node.children) {
+                collectNodes(node.children);
+            }
+        });
+    };
+    collectNodes(treeData);
+    return {
+        treeData,
+        treeItemsById,
+    };
+}
+/**
+ * Transforms hierarchical nested object data into UnPackedTreeData format
+ * @param hierarchyData Single object or array of objects with nested children structure
+ * @param fieldConfig Configuration for mapping object fields to tree properties
+ * @returns UnPackedTreeData structure suitable for Tree component
+ */
+function hierarchyToNative(hierarchyData, fieldConfig) {
+    if (!hierarchyData) {
+        return { treeData: [], treeItemsById: {} };
+    }
+    // Ensure we're working with an array
+    const rootItems = Array.isArray(hierarchyData) ? hierarchyData : [hierarchyData];
+    if (rootItems.length === 0) {
+        return { treeData: [], treeItemsById: {} };
+    }
+    // Generate unique IDs for internal tree structure
+    let idCounter = 1;
+    const sourceIdToId = new Map();
+    const getOrCreateId = (sourceId) => {
+        if (!sourceIdToId.has(sourceId)) {
+            sourceIdToId.set(sourceId, `hierarchy_${idCounter++}`);
+        }
+        return sourceIdToId.get(sourceId);
+    };
+    // Set to track visited nodes for circular reference detection
+    const visitedIds = new Set();
+    // Recursive function to build TreeNode structure from hierarchical data
+    const buildTreeNode = (item, parentIds = [], pathSegments = []) => {
+        var _a, _b;
+        const sourceId = item[fieldConfig.idField];
+        const displayName = item[fieldConfig.labelField] || sourceId;
+        // Circular reference detection
+        if (visitedIds.has(sourceId)) {
+            // Return a simple node without children to break the cycle
+            const id = getOrCreateId(sourceId);
+            return Object.assign(Object.assign({ id, key: sourceId, path: [...pathSegments, displayName], displayName,
+                parentIds, selectable: fieldConfig.selectableField ? ((_a = item[fieldConfig.selectableField]) !== null && _a !== void 0 ? _a : true) : true, children: [] }, item), (fieldConfig.iconField && item[fieldConfig.iconField] && {
+                icon: item[fieldConfig.iconField]
+            }));
+        }
+        // Mark as visited
+        visitedIds.add(sourceId);
+        const id = getOrCreateId(sourceId);
+        const currentPath = [...pathSegments, displayName];
+        // Get children from the specified children field
+        const childrenField = fieldConfig.childrenField || 'children';
+        const childItems = item[childrenField] || [];
+        // Recursively build children
+        const children = childItems.map((childItem) => buildTreeNode(childItem, [...parentIds, sourceId], currentPath));
+        // Unmark as visited after processing (for depth-first traversal)
+        visitedIds.delete(sourceId);
+        // Build the TreeNode
+        const treeNode = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ id, path: currentPath, displayName,
+            parentIds, selectable: fieldConfig.selectableField ? ((_b = item[fieldConfig.selectableField]) !== null && _b !== void 0 ? _b : true) : true }, item), (fieldConfig.iconField && item[fieldConfig.iconField] && {
+            icon: item[fieldConfig.iconField]
+        })), (fieldConfig.iconExpandedField && item[fieldConfig.iconExpandedField] && {
+            iconExpanded: item[fieldConfig.iconExpandedField]
+        })), (fieldConfig.iconCollapsedField && item[fieldConfig.iconCollapsedField] && {
+            iconCollapsed: item[fieldConfig.iconCollapsedField]
+        })), { 
+            // Set TreeNode-specific properties AFTER spreading item to ensure they're not overwritten
+            children, key: sourceId });
+        return treeNode;
+    };
+    // Build tree structure from root items
+    const treeData = rootItems.map(rootItem => buildTreeNode(rootItem));
+    // Build lookup map by ID
+    const treeItemsById = {};
+    const collectNodes = (nodes) => {
+        nodes.forEach(node => {
+            treeItemsById[node.id] = node;
+            if (node.children) {
+                collectNodes(node.children);
+            }
+        });
+    };
+    collectNodes(treeData);
+    return {
+        treeData,
+        treeItemsById,
+    };
+}

package/dist/scripts/src/index.js

@@ -36,7 +36,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StandaloneComponent = exports.useEvent = exports.StyleRegistry = exports.StyleProvider = exports.useAppLayoutContext = exports.useSearchContextContent = exports.Breakout = exports.Logo = exports.ToneChangerButton = exports.LinkNative = exports.VisuallyHidden = exports.NestedApp = exports.TextBox = exports.Text = exports.XmlUiHelper = exports.builtInThemes = exports.useThemes = exports.Spinner = exports.ApiInterceptorProvider = exports.xmlUiMarkupToComponent = exports.errReportComponent = exports.useLogger = exports.useDevTools = exports.toCssVar = exports.useColors = exports.Tabs = exports.TabItem = exports.getColor = exports.Splitter = exports.Button = exports.Stack = exports.Icon = exports.ErrorBoundary = exports.AppRoot = exports.useTheme = exports.startApp = exports.parseScssVar = exports.dComponent = exports.d = exports.createMetadata = exports.createUserDefinedComponentRenderer = exports.createComponentRenderer = exports.StandaloneExtensionManager = exports.StandaloneApp = void 0;
+exports.Splitter = exports.Button = exports.Stack = exports.Icon = exports.ErrorBoundary = exports.AppRoot = exports.useTheme = exports.startApp = exports.parseScssVar = exports.dValueApi = exports.dValue = exports.dValidationStatus = exports.dTriggerTemplate = exports.dSetValueApi = exports.dStartText = exports.dStartIcon = exports.dRequired = exports.dReadonly = exports.dPlaceholder = exports.dOrientation = exports.dMulti = exports.dMaxLength = exports.dLostFocus = exports.dLabelWidth = exports.dLabelPosition = exports.dLabelBreak = exports.dLabel = exports.dInternal = exports.dInitialValue = exports.dIndeterminate = exports.dGotFocus = exports.dExpand = exports.dExpanded = exports.dEndText = exports.dEndIcon = exports.dFocus = exports.dEnabled = exports.dDidOpen = exports.dDidClose = exports.dDidChange = exports.dCollapse = exports.dClick = exports.dAutoFocus = exports.dComponent = exports.d = exports.createMetadata = exports.createUserDefinedComponentRenderer = exports.createComponentRenderer = exports.StandaloneExtensionManager = exports.StandaloneApp = void 0;
+exports.Theme = exports.StandaloneComponent = exports.useEvent = exports.StyleRegistry = exports.StyleProvider = exports.useAppLayoutContext = exports.useSearchContextContent = exports.Breakout = exports.Logo = exports.ToneChangerButton = exports.LinkNative = exports.VisuallyHidden = exports.NestedApp = exports.TextBox = exports.Text = exports.XmlUiHelper = exports.builtInThemes = exports.useThemes = exports.Spinner = exports.ApiInterceptorProvider = exports.xmlUiMarkupToComponent = exports.errReportComponent = exports.useLogger = exports.useDevTools = exports.toCssVar = exports.useColors = exports.Tabs = exports.TabItem = exports.getColor = void 0;
 const StandaloneApp_1 = __importStar(require("./components-core/StandaloneApp"));
 exports.StandaloneApp = StandaloneApp_1.default;
 Object.defineProperty(exports, "startApp", { enumerable: true, get: function () { return StandaloneApp_1.startApp; } });
@@ -103,6 +104,8 @@ const ToneChangerButton_1 = require("./components/ToneChangerButton/ToneChangerB
 Object.defineProperty(exports, "ToneChangerButton", { enumerable: true, get: function () { return ToneChangerButton_1.ToneChangerButton; } });
 const LogoNative_1 = require("./components/Logo/LogoNative");
 Object.defineProperty(exports, "Logo", { enumerable: true, get: function () { return LogoNative_1.Logo; } });
+const ThemeNative_1 = require("./components/Theme/ThemeNative");
+Object.defineProperty(exports, "Theme", { enumerable: true, get: function () { return ThemeNative_1.Theme; } });
 const SearchContext_1 = require("./components/App/SearchContext");
 Object.defineProperty(exports, "useSearchContextContent", { enumerable: true, get: function () { return SearchContext_1.useSearchContextContent; } });
 const AppLayoutContext_1 = require("./components/App/AppLayoutContext");
@@ -117,5 +120,39 @@ const metadata_helpers_1 = require("./components/metadata-helpers");
 Object.defineProperty(exports, "createMetadata", { enumerable: true, get: function () { return metadata_helpers_1.createMetadata; } });
 Object.defineProperty(exports, "d", { enumerable: true, get: function () { return metadata_helpers_1.d; } });
 Object.defineProperty(exports, "dComponent", { enumerable: true, get: function () { return metadata_helpers_1.dComponent; } });
+Object.defineProperty(exports, "dAutoFocus", { enumerable: true, get: function () { return metadata_helpers_1.dAutoFocus; } });
+Object.defineProperty(exports, "dClick", { enumerable: true, get: function () { return metadata_helpers_1.dClick; } });
+Object.defineProperty(exports, "dCollapse", { enumerable: true, get: function () { return metadata_helpers_1.dCollapse; } });
+Object.defineProperty(exports, "dDidChange", { enumerable: true, get: function () { return metadata_helpers_1.dDidChange; } });
+Object.defineProperty(exports, "dDidClose", { enumerable: true, get: function () { return metadata_helpers_1.dDidClose; } });
+Object.defineProperty(exports, "dDidOpen", { enumerable: true, get: function () { return metadata_helpers_1.dDidOpen; } });
+Object.defineProperty(exports, "dEnabled", { enumerable: true, get: function () { return metadata_helpers_1.dEnabled; } });
+Object.defineProperty(exports, "dFocus", { enumerable: true, get: function () { return metadata_helpers_1.dFocus; } });
+Object.defineProperty(exports, "dEndIcon", { enumerable: true, get: function () { return metadata_helpers_1.dEndIcon; } });
+Object.defineProperty(exports, "dEndText", { enumerable: true, get: function () { return metadata_helpers_1.dEndText; } });
+Object.defineProperty(exports, "dExpanded", { enumerable: true, get: function () { return metadata_helpers_1.dExpanded; } });
+Object.defineProperty(exports, "dExpand", { enumerable: true, get: function () { return metadata_helpers_1.dExpand; } });
+Object.defineProperty(exports, "dGotFocus", { enumerable: true, get: function () { return metadata_helpers_1.dGotFocus; } });
+Object.defineProperty(exports, "dIndeterminate", { enumerable: true, get: function () { return metadata_helpers_1.dIndeterminate; } });
+Object.defineProperty(exports, "dInitialValue", { enumerable: true, get: function () { return metadata_helpers_1.dInitialValue; } });
+Object.defineProperty(exports, "dInternal", { enumerable: true, get: function () { return metadata_helpers_1.dInternal; } });
+Object.defineProperty(exports, "dLabel", { enumerable: true, get: function () { return metadata_helpers_1.dLabel; } });
+Object.defineProperty(exports, "dLabelBreak", { enumerable: true, get: function () { return metadata_helpers_1.dLabelBreak; } });
+Object.defineProperty(exports, "dLabelPosition", { enumerable: true, get: function () { return metadata_helpers_1.dLabelPosition; } });
+Object.defineProperty(exports, "dLabelWidth", { enumerable: true, get: function () { return metadata_helpers_1.dLabelWidth; } });
+Object.defineProperty(exports, "dLostFocus", { enumerable: true, get: function () { return metadata_helpers_1.dLostFocus; } });
+Object.defineProperty(exports, "dMaxLength", { enumerable: true, get: function () { return metadata_helpers_1.dMaxLength; } });
+Object.defineProperty(exports, "dMulti", { enumerable: true, get: function () { return metadata_helpers_1.dMulti; } });
+Object.defineProperty(exports, "dOrientation", { enumerable: true, get: function () { return metadata_helpers_1.dOrientation; } });
+Object.defineProperty(exports, "dPlaceholder", { enumerable: true, get: function () { return metadata_helpers_1.dPlaceholder; } });
+Object.defineProperty(exports, "dReadonly", { enumerable: true, get: function () { return metadata_helpers_1.dReadonly; } });
+Object.defineProperty(exports, "dRequired", { enumerable: true, get: function () { return metadata_helpers_1.dRequired; } });
+Object.defineProperty(exports, "dStartIcon", { enumerable: true, get: function () { return metadata_helpers_1.dStartIcon; } });
+Object.defineProperty(exports, "dStartText", { enumerable: true, get: function () { return metadata_helpers_1.dStartText; } });
+Object.defineProperty(exports, "dSetValueApi", { enumerable: true, get: function () { return metadata_helpers_1.dSetValueApi; } });
+Object.defineProperty(exports, "dTriggerTemplate", { enumerable: true, get: function () { return metadata_helpers_1.dTriggerTemplate; } });
+Object.defineProperty(exports, "dValidationStatus", { enumerable: true, get: function () { return metadata_helpers_1.dValidationStatus; } });
+Object.defineProperty(exports, "dValue", { enumerable: true, get: function () { return metadata_helpers_1.dValue; } });
+Object.defineProperty(exports, "dValueApi", { enumerable: true, get: function () { return metadata_helpers_1.dValueApi; } });
 const StandaloneComponent_1 = __importDefault(require("./components-core/rendering/StandaloneComponent"));
 exports.StandaloneComponent = StandaloneComponent_1.default;

package/dist/scripts/src/testing/ComponentDrivers.js

@@ -9,8 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SpinnerDriver = exports.LabelDriver = exports.CheckboxDriver = exports.CodeBlockDriver = exports.HtmlTagDriver = exports.FormItemDriver = exports.OptionDriver = exports.NoResultDriver = exports.BadgeDriver = exports.AppFooterDriver = exports.AppHeaderDriver = exports.AccordionDriver = exports.CardDriver = exports.NavPanelDriver = exports.NavGroupDriver = exports.NavLinkDriver = exports.LinkDriver = exports.VStackDriver = exports.HStackDriver = exports.StackDriver = exports.IconDriver = exports.HeadingDriver = exports.TextDriver = exports.ListDriver = exports.ProgressBarDriver = exports.TextAreaDriver = exports.TextBoxDriver = exports.NumberBoxDriver = exports.RadioGroupDriver = exports.SelectDriver = exports.AutoCompleteDriver = exports.DatePickerDriver = exports.RangeDriver = exports.SliderDriver = exports.ItemsDriver = exports.MarkdownDriver = exports.ValidationDisplayDriver = exports.ValidationSummaryDriver = exports.FormDriver = exports.BackdropDriver = exports.FileUploadDropZoneDriver = exports.FileInputDriver = exports.ExpandableItemDriver = exports.SplitterDriver = exports.AvatarDriver = exports.ContentSeparatorDriver = exports.ButtonDriver = exports.TestStateDriver = exports.InputComponentDriver = exports.ComponentDriver = void 0;
-exports.DropdownMenuDriver = void 0;
+exports.SliderDriver = exports.DropdownMenuDriver = exports.SpinnerDriver = exports.LabelDriver = exports.CheckboxDriver = exports.CodeBlockDriver = exports.HtmlTagDriver = exports.FormItemDriver = exports.OptionDriver = exports.NoResultDriver = exports.BadgeDriver = exports.AppFooterDriver = exports.AppHeaderDriver = exports.AccordionDriver = exports.CardDriver = exports.NavPanelDriver = exports.NavGroupDriver = exports.NavLinkDriver = exports.LinkDriver = exports.VStackDriver = exports.HStackDriver = exports.StackDriver = exports.IconDriver = exports.HeadingDriver = exports.TextDriver = exports.ListDriver = exports.ProgressBarDriver = exports.TextAreaDriver = exports.RadioGroupDriver = exports.SelectDriver = exports.AutoCompleteDriver = exports.DatePickerDriver = exports.RangeDriver = exports.ItemsDriver = exports.MarkdownDriver = exports.ValidationDisplayDriver = exports.ValidationSummaryDriver = exports.FormDriver = exports.BackdropDriver = exports.FileUploadDropZoneDriver = exports.FileInputDriver = exports.ExpandableItemDriver = exports.SplitterDriver = exports.AvatarDriver = exports.ContentSeparatorDriver = exports.ButtonDriver = exports.TestStateDriver = exports.InputComponentDriver = exports.ComponentDriver = void 0;
 const component_test_helpers_1 = require("./component-test-helpers");
 class ComponentDriver {
     constructor({ locator, page }) {
@@ -37,9 +36,21 @@ class ComponentDriver {
     get component() {
         return this.locator;
     }
+    getByTestId(testId) {
+        return this.component.getByTestId(testId).first();
+    }
     getByPartName(part) {
         return this.component.locator(`[data-part-id="${part}"]`).first();
     }
+    getIcons() {
+        return this.component.locator('[data-icon-name="*"]');
+    }
+    getIconsByName(name) {
+        return this.component.locator(`[data-icon-name="${name}"]`);
+    }
+    getIconByName(name) {
+        return this.component.locator(`[data-icon-name="${name}"]`).first();
+    }
     /**
      * Gets the html tag name of the final rendered component
      */
@@ -440,7 +451,7 @@ class FileUploadDropZoneDriver extends ComponentDriver {
                 return {
                     name,
                     mimeType: "text/plain",
-                    buffer: Buffer.from("test content")
+                    buffer: Buffer.from("test content"),
                 };
             });
             // Set files on the hidden input
@@ -451,7 +462,7 @@ class FileUploadDropZoneDriver extends ComponentDriver {
                 const event = new DragEvent("drop", {
                     bubbles: true,
                     cancelable: true,
-                    dataTransfer: new DataTransfer()
+                    dataTransfer: new DataTransfer(),
                 });
                 // Add files to dataTransfer if needed for component logic
                 fileNames.forEach((fileName) => {
@@ -623,10 +634,6 @@ exports.MarkdownDriver = MarkdownDriver;
 class ItemsDriver extends ComponentDriver {
 }
 exports.ItemsDriver = ItemsDriver;
-// --- Slider
-class SliderDriver extends ComponentDriver {
-}
-exports.SliderDriver = SliderDriver;
 // --- Range
 class RangeDriver extends ComponentDriver {
 }
@@ -736,29 +743,6 @@ exports.SelectDriver = SelectDriver;
 class RadioGroupDriver extends ComponentDriver {
 }
 exports.RadioGroupDriver = RadioGroupDriver;
-// --- NumberBox
-class NumberBoxDriver extends ComponentDriver {
-    get field() {
-        return this.component.locator("input");
-    }
-    get label() {
-        return this.component.locator("label");
-    }
-    get placeholder() {
-        return this.field.getAttribute("placeholder");
-    }
-    get spinnerUpButton() {
-        return this.component.locator("button").and(this.component.locator("[data-spinner='up']"));
-    }
-    get spinnerDownButton() {
-        return this.component.locator("button").and(this.component.locator("[data-spinner='down']"));
-    }
-}
-exports.NumberBoxDriver = NumberBoxDriver;
-// --- TextBox
-class TextBoxDriver extends InputComponentDriver {
-}
-exports.TextBoxDriver = TextBoxDriver;
 // --- TextArea
 class TextAreaDriver extends InputComponentDriver {
 }
@@ -1353,3 +1337,65 @@ class DropdownMenuDriver extends ComponentDriver {
     }
 }
 exports.DropdownMenuDriver = DropdownMenuDriver;
+// --- Slider
+class SliderDriver extends ComponentDriver {
+    getActiveThumb() {
+        return __awaiter(this, arguments, void 0, function* (thumbNumber = 0) {
+            const thumbs = this.page.getByRole("slider");
+            const thumbCount = yield thumbs.count();
+            if (thumbCount === 0) {
+                throw new Error("No slider thumb found to drag");
+            }
+            if (thumbNumber < 0) {
+                thumbNumber = 0;
+            }
+            else if (thumbNumber >= thumbCount) {
+                thumbNumber = thumbCount - 1;
+            }
+            return thumbs.nth(thumbNumber);
+        });
+    }
+    dragThumbByMouse(location_1) {
+        return __awaiter(this, arguments, void 0, function* (location, thumbNumber = 0) {
+            const track = this.page.locator("[data-track]");
+            yield track.waitFor({ state: "visible" });
+            const activeThumb = yield this.getActiveThumb(thumbNumber);
+            yield activeThumb.waitFor({ state: "visible" });
+            // Get the thumb's current position for relative movement
+            const thumbBox = yield activeThumb.boundingBox();
+            if (!thumbBox) {
+                throw new Error("Could not get thumb bounding box");
+            }
+            const trackBox = yield track.boundingBox();
+            if (!trackBox) {
+                throw new Error("Could not get track bounding box");
+            }
+            // Calculate target position relative to track
+            let targetX;
+            if (location === "start") {
+                targetX = trackBox.x;
+            }
+            else if (location === "end") {
+                targetX = trackBox.x + trackBox.width;
+            }
+            else { // middle
+                targetX = trackBox.x + trackBox.width / 2;
+            }
+            const targetY = trackBox.y + trackBox.height / 2;
+            yield activeThumb.hover();
+            yield this.page.mouse.down({ button: "left" });
+            yield this.page.mouse.move(targetX, targetY);
+            yield this.page.mouse.up();
+        });
+    }
+    stepThumbByKeyboard(key_1) {
+        return __awaiter(this, arguments, void 0, function* (key, thumbNumber = 0, repeat = 1) {
+            const activeThumb = yield this.getActiveThumb(thumbNumber);
+            yield activeThumb.focus();
+            for (let i = 0; i < repeat; i++) {
+                yield this.page.keyboard.press(key);
+            }
+        });
+    }
+}
+exports.SliderDriver = SliderDriver;

package/dist/scripts/src/testing/drivers/NumberBoxDriver.js

@@ -0,0 +1,44 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberBoxDriver = void 0;
+const parts_1 = require("../../components-core/parts");
+const ComponentDrivers_1 = require("../ComponentDrivers");
+const PART_SPINNER_UP = "spinnerUp";
+const PART_SPINNER_DOWN = "spinnerDown";
+class NumberBoxDriver extends ComponentDrivers_1.InputComponentDriver {
+    get input() {
+        return this.getByPartName(parts_1.PART_INPUT);
+    }
+    get startAdornment() {
+        return this.getByPartName(parts_1.PART_START_ADORNMENT);
+    }
+    get endAdornment() {
+        return this.getByPartName(parts_1.PART_END_ADORNMENT);
+    }
+    get spinnerUp() {
+        return this.getByPartName(PART_SPINNER_UP);
+    }
+    get spinnerDown() {
+        return this.getByPartName(PART_SPINNER_DOWN);
+    }
+    increment() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.spinnerUp.click({ force: true });
+        });
+    }
+    decrement() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.spinnerDown.click({ force: true });
+        });
+    }
+}
+exports.NumberBoxDriver = NumberBoxDriver;