Rule Designer Input | Unified UX

Here is an example of using the Rule Designer Input in a plain html page:
<html>
  <head>
    <link href="https://developer.temenos.com/uux/base.css" rel="stylesheet" />
    <script src="./dist/web/unified-ux-product-designer.min.js"></script>
  </head>
  <body>
    <uwc-rule-designer label="Conditional Rule" ruleValue></uwc-rule-designer>
    <script>
      const el = document.querySelector("uwc-rule-designer-input");
      el.rules = [
        {
          name: "MINIMUM.BALANCE",
          description: "Minimum Balance",
          type: "number",
        },
        {
          name: "MAXIMUM.BALANCE",
          description: "Maximum Balance",
          type: "number",
        },
        {
          name: "MINIMUM.WITHDRAWALS",
          description: "Maximum # of Withdrawals",
          type: "number",
        },
        {
          name: "MINIMUM.PAYROLL.DEPOSIT",
          description: "Minimum Payroll Deposit",
          type: "number",
        },
        {
          name: "ARRANGEMENT.CHANNEL",
          description: "Arrangement Channel is",
        },
      ];
    </script>
  </body>
</html>