@assaabloy/gw-group-accordion v21.3.88

Global web - web components

Accordion

Custom HTML element

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

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

content

{
  "title": "", // NEW
  "text": "", // NEW
  "sections": [
    {
      "title": "Specifications 1",
      "layout": "1-large" | "1-small" | "2-small",
      "column1": {
        "text": "", // NEW
        "table": <table>, // NEW
        "assetsAndLinks": <assetsAndLinks>[] // NEW

      },
      "column2": {
        "type": "richText" | "assetsAndLinks" | "table", // REMOVED
        "content": "<p>Some richtext <b>content</b>.</p>" | "[<AssetsAndLinks>]" // REMOVED
        "text": "", // NEW
        "table": <table>, // NEW
        "assetsAndLinks": <assetsAndLinks>[] // NEW
      }
    },
  ]
  "config": {
    "padding": {
      "bottom": false,
      "top": true
    }
  }
}

assetsAndLinks

{
  "title": "Technical guidelines",
  "links": [
    {
      "title": "Yale",
      "url": "https://www.assaabloy.com/some-document",
      "asset": false,
      "external": false,
      "fileSize": 1000
    },
  ]
}

table For the table to be generated correctly the keys in tableColumns and tableItems can be whatever but they have to match.

{
  "tableColumns": [
    {
      "name": "Displayed text"
      "key": "Match with tableitem key"
      "position": "1"
    },
    {
      "name": "Barcode"
      "key": "barcode"
      "position": "1"
    },
    {
      "name": "Description"
      "key": "description"
      "position": "2"
    },
    {
      "name": "Part number"
      "key": "partNumber"
      "position": "2"
    }
  ],
  "tableItems": [
    {
      "barcode": "Barcode 1",
      "description": "Description 1",
      "partNumber": "Part Number 1"
    },
    {
      "barcode": "Barcode 2",
      "description": "Description 2",
      "partNumber": "Part Number 2"
    }
  ]
}

theme Two different background options:

• "theme-alt-1" (white)
• "theme-alt-2" (grey)

Dependencies @assaabloy/gw-group-vendor @assaabloy/brand-styles