Global web - web components

Wizard

Custom HTML element

<gw-group-wizard content="" theme=""></gw-group-wizard>

Properties | Name | Type | Description | | ------------- | --------- | ----------------------------- | | content | Object | base64 encoded | | theme | String | |

content

{
  "title": "",
  "text": "",
  "next": "",
  "previous": "",
  "reset": "",
  "start": "",
  "decisionTree": {
    "id": "",
    "title": "",
    "text": "",
    "options": [
      {
        "id": "",
        "title": "",
        "text": "",
        "card": {
          "title": "",
          "text": "",
         
          "image": {
            "width": 0,
            "height": 0,
            "alt": "",
            "url": "https://picsum.photos/900/500",
            "renditions": {
              "blur-up": "https://dummyimage.com/40x20/",
              "400": "https://dummyimage.com/400x200/",
              "800": "https://dummyimage.com/800x400/",
              "1200": "https://dummyimage.com/1200x600/",
              "1600": "https://dummyimage.com/1600x800/",
              "2500": "https://dummyimage.com/2500x1250/"
            },
            "smartCrops": {
              "1-1-S": "",
              "1-1-M": "",
              "1-1-L": "",
              "4-3-S": "",
              "4-3-M": "",
              "4-3-L": "",
              "3-4-S": "",
              "3-4-M": "",
              "3-4-L": "",
              "8-3-S": "",
              "8-3-M": "",
              "8-3-L": "",
              "16-9-S": "",
              "16-9-M": "",
              "16-9-L": "",
              "blur-up": ""
            },                                                              
          }
        },
        "options": [...]
      }
    ]
  },
   "config": {
    "padding": {
      "top": true,
      "bottom": true
    },
     "aspectRatio": {
      "cards": "1-1" | "4-3" | "3-4" | "8-3" | "16-9",
      "endFrame": "1-1" | "4-3" | "3-4" | "8-3" | "16-9"
     }
  },
  
}

theme Background options:

• "theme-alt-1" (complementary 1)
• "theme-alt-2" (complementary 2)
• "theme-alt-3" (complementary 3)
• "theme-alt-4" (complementary 4)