@procaaso/alphinity-ui-components 1.14.0 → 1.16.0

package/dist/index.cjs

@@ -1347,6 +1347,7 @@ function DeviceControlPanelImpl({
   const statusColor = statusEntry.bg;
   const isUnknownStatus = normalizeDeviceStatus(binding.state.status) === "unknown";
   const startStopRowShown = binding.display?.showStartStop !== false && (activeCapabilities?.canStart === true || activeCapabilities?.canStop === true);
+  const customActionsInRow = binding.display?.customActionsLayout === "row";
   const startEnabledNow = activeCapabilities?.canStart === true && activeCapabilities?.startEnabled !== false && !startPending;
   const stopEnabledNow = activeCapabilities?.canStop === true && activeCapabilities?.stopEnabled !== false;
   const startStopFontPx = Math.max(18, Math.round(18 * fontScale));
@@ -2186,41 +2187,50 @@ function DeviceControlPanelImpl({
           ]
         }
       ),
-      activeCapabilities?.customActions && activeCapabilities.customActions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: "8px" }, children: activeCapabilities.customActions.map((action) => {
-        const actionDisabled = action.disabled === true;
-        return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-          "button",
-          {
-            onClick: () => {
-              if (!actionDisabled) onCustomAction?.(action.id);
-            },
-            disabled: actionDisabled,
-            title: actionDisabled ? action.disabledReason : void 0,
-            style: {
-              flex: 1,
-              minWidth: "120px",
-              height: touchSize,
-              backgroundColor: surfaceColor,
-              color: textColor,
-              border: `1px solid ${borderColor}`,
-              borderRadius: "6px",
-              fontSize: "11px",
-              fontWeight: 600,
-              fontFamily: "monospace",
-              letterSpacing: "0.5px",
-              textTransform: "uppercase",
-              cursor: actionDisabled ? "not-allowed" : "pointer",
-              opacity: actionDisabled ? 0.4 : 1,
-              transition: "all 0.15s"
-            },
-            children: [
-              action.icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { marginRight: "6px" }, children: action.icon }),
-              action.label
-            ]
+      activeCapabilities?.customActions && activeCapabilities.customActions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexWrap: customActionsInRow ? "nowrap" : "wrap",
+            gap: "8px"
           },
-          action.id
-        );
-      }) })
+          children: activeCapabilities.customActions.map((action) => {
+            const actionDisabled = action.disabled === true;
+            return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+              "button",
+              {
+                onClick: () => {
+                  if (!actionDisabled) onCustomAction?.(action.id);
+                },
+                disabled: actionDisabled,
+                title: actionDisabled ? action.disabledReason : void 0,
+                style: {
+                  ...customActionsInRow ? { flex: "1 1 0px", minWidth: 0, paddingLeft: "4px", paddingRight: "4px" } : { flex: 1, minWidth: "120px" },
+                  height: touchSize,
+                  backgroundColor: surfaceColor,
+                  color: textColor,
+                  border: `1px solid ${borderColor}`,
+                  borderRadius: "6px",
+                  fontSize: "11px",
+                  fontWeight: 600,
+                  fontFamily: "monospace",
+                  letterSpacing: "0.5px",
+                  textTransform: "uppercase",
+                  cursor: actionDisabled ? "not-allowed" : "pointer",
+                  opacity: actionDisabled ? 0.4 : 1,
+                  transition: "all 0.15s"
+                },
+                children: [
+                  action.icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { marginRight: "6px" }, children: action.icon }),
+                  action.label
+                ]
+              },
+              action.id
+            );
+          })
+        }
+      )
     ] }),
     binding.state.lastCommandResult && showToast && showBuiltInToast && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "div",