uuid: ee8d2589-3654-484d-b83c-658705fdeaec
langcode: en
status: true
dependencies:
  config:
    - cohesion_custom_styles.cohesion_custom_style.097f31b2
    - cohesion_elements.cohesion_component_category.cpt_cat_tab_components
  content:
    - 'file:file:57f36efa-2909-4bce-a687-40f59c0d7fa4'
  enforced:
    module:
      - acquia_cms_site_studio
label: 'Tab item'
id: cpt_tab_item
json_values: |
  {
      "canvas": [
          {
              "type": "container",
              "uid": "accordion-tabs-item",
              "title": "Accordion tabs item",
              "status": {
                  "collapsed": true
              },
              "parentIndex": 4,
              "uuid": "37eb25c2-8b40-4731-b3e5-214116218fdf",
              "parentUid": "root",
              "children": [
                  {
                      "type": "container",
                      "uid": "container",
                      "title": "Container",
                      "status": {
                          "collapsed": true,
                          "collapsedParents": [
                              "37eb25c2-8b40-4731-b3e5-214116218fdf"
                          ]
                      },
                      "parentIndex": 2,
                      "uuid": "bb157524-39a9-4283-866b-491bfac4d7bf",
                      "parentUid": "accordion-tabs-item",
                      "children": [
                          {
                              "type": "item",
                              "uid": "component-drop-zone-placeholder",
                              "title": "Component drop zone",
                              "status": {
                                  "collapsed": true,
                                  "collapsedParents": [
                                      "37eb25c2-8b40-4731-b3e5-214116218fdf"
                                  ]
                              },
                              "parentIndex": 0,
                              "uuid": "52044c51-96ba-4c27-8e2d-ee0b4807bbad",
                              "parentUid": "container",
                              "children": []
                          }
                      ]
                  }
              ]
          }
      ],
      "componentForm": [
          {
              "type": "form-container",
              "uid": "form-tab-container",
              "title": "Tab container",
              "parentIndex": "form-layout",
              "status": {
                  "collapsed": false
              },
              "options": {
                  "formBuilder": true
              },
              "parentUid": "root",
              "uuid": "59b48c37-ad3d-49ab-a71b-dd273be6c70c",
              "children": [
                  {
                      "type": "form-container",
                      "uid": "form-tab-item",
                      "title": "Tab item",
                      "parentIndex": "form-layout",
                      "status": {
                          "collapsed": true,
                          "collapsedParents": []
                      },
                      "options": {
                          "formBuilder": true
                      },
                      "parentUid": "form-tab-container",
                      "uuid": "e77a7719-0cbe-4dbd-a0d2-936f2c6a72ba",
                      "children": [
                          {
                              "type": "form-container",
                              "uid": "form-section",
                              "title": "Field group",
                              "parentIndex": "form-layout",
                              "status": {
                                  "collapsed": true,
                                  "collapsedParents": [
                                      "e77a7719-0cbe-4dbd-a0d2-936f2c6a72ba"
                                  ]
                              },
                              "options": {
                                  "formBuilder": true
                              },
                              "parentUid": "form-tab-item",
                              "uuid": "5d7d17e0-1df8-4b10-b7f1-7451d0a68139",
                              "children": [
                                  {
                                      "type": "form-field",
                                      "uid": "form-input",
                                      "title": "Input",
                                      "parentIndex": "form-fields",
                                      "status": {
                                          "collapsed": false,
                                          "collapsedParents": [
                                              "5d7d17e0-1df8-4b10-b7f1-7451d0a68139"
                                          ]
                                      },
                                      "uuid": "a3fc925d-7210-4e02-86d6-27731b0288d4",
                                      "parentUid": "form-section",
                                      "children": []
                                  }
                              ]
                          }
                      ]
                  },
                  {
                      "type": "form-container",
                      "uid": "form-tab-item",
                      "title": "Tab item",
                      "parentIndex": "form-layout",
                      "status": {
                          "collapsed": true,
                          "collapsedParents": []
                      },
                      "options": {
                          "formBuilder": true
                      },
                      "parentUid": "form-tab-container",
                      "uuid": "65d305f9-fd0f-4e57-9913-0be3ede68c57",
                      "children": [
                          {
                              "type": "form-container",
                              "uid": "form-section",
                              "title": "Field group",
                              "parentIndex": "form-layout",
                              "status": {
                                  "collapsed": true,
                                  "collapsedParents": [
                                      "65d305f9-fd0f-4e57-9913-0be3ede68c57"
                                  ]
                              },
                              "options": {
                                  "formBuilder": true
                              },
                              "uuid": "7f73cdd9-cb19-4429-ab51-903793b7f8ca",
                              "parentUid": "form-tab-item",
                              "children": [
                                  {
                                      "type": "form-field",
                                      "uid": "form-colorpicker",
                                      "title": "Color picker",
                                      "status": {
                                          "collapsed": false,
                                          "collapsedParents": [
                                              "7f73cdd9-cb19-4429-ab51-903793b7f8ca"
                                          ]
                                      },
                                      "uuid": "af4eca46-d7e1-4896-87bc-44c84b322fc9",
                                      "parentUid": "form-section",
                                      "children": []
                                  }
                              ]
                          },
                          {
                              "type": "form-container",
                              "uid": "form-section",
                              "title": "Field group",
                              "parentIndex": "form-layout",
                              "status": {
                                  "collapsed": true,
                                  "collapsedParents": [
                                      "65d305f9-fd0f-4e57-9913-0be3ede68c57"
                                  ]
                              },
                              "options": {
                                  "formBuilder": true
                              },
                              "uuid": "9c4b667d-b1af-4092-a49a-83ddf6195d83",
                              "parentUid": "form-tab-item",
                              "children": [
                                  {
                                      "type": "form-field",
                                      "uid": "form-select",
                                      "title": "Select",
                                      "status": {
                                          "collapsed": false,
                                          "collapsedParents": [
                                              "9c4b667d-b1af-4092-a49a-83ddf6195d83"
                                          ]
                                      },
                                      "uuid": "67e8761d-1e9f-47c9-99a1-b94b91941d2f",
                                      "parentUid": "form-section",
                                      "children": []
                                  }
                              ]
                          }
                      ]
                  },
                  {
                      "type": "form-container",
                      "uid": "form-tab-item",
                      "title": "Tab item",
                      "parentIndex": "form-layout",
                      "status": {
                          "collapsed": true,
                          "collapsedParents": []
                      },
                      "options": {
                          "formBuilder": true
                      },
                      "parentUid": "form-tab-container",
                      "uuid": "992bfa07-2081-4c0e-81af-c7ddf14d7887",
                      "children": [
                          {
                              "type": "form-help",
                              "uid": "form-helptext",
                              "title": "Help text",
                              "parentIndex": "form-help",
                              "status": {
                                  "collapsed": false,
                                  "collapsedParents": [
                                      "992bfa07-2081-4c0e-81af-c7ddf14d7887"
                                  ]
                              },
                              "uuid": "26a67ebd-fa79-44fa-96cd-042480e04320",
                              "parentUid": "form-tab-item",
                              "children": []
                          }
                      ]
                  }
              ]
          }
      ],
      "mapper": {
          "37eb25c2-8b40-4731-b3e5-214116218fdf": {
              "settings": {
                  "selectorType": "topLevel",
                  "formDefinition": [
                      {
                          "formKey": "accordion-tabs-item-settings",
                          "children": [
                              {
                                  "formKey": "accordion-tabs-item-settings-label",
                                  "breakpoints": [],
                                  "activeFields": [
                                      {
                                          "name": "title",
                                          "active": true
                                      }
                                  ]
                              }
                          ]
                      },
                      {
                          "formKey": "accordion-tabs-item-accordion-settings",
                          "children": [
                              {
                                  "formKey": "accordion-tabs-item-accordion-html-element",
                                  "breakpoints": [],
                                  "activeFields": [
                                      {
                                          "name": "accordionTabElement",
                                          "active": true
                                      }
                                  ]
                              },
                              {
                                  "formKey": "accordion-tabs-item-accordion-settings-style",
                                  "breakpoints": [],
                                  "activeFields": [
                                      {
                                          "name": "customStyle",
                                          "active": true
                                      }
                                  ]
                              }
                          ]
                      },
                      {
                          "formKey": "accordion-tabs-item-tab-settings",
                          "children": [
                              {
                                  "formKey": "accordion-tabs-item-tab-settings-tab-style",
                                  "breakpoints": [],
                                  "activeFields": [
                                      {
                                          "name": "customStyle",
                                          "active": true
                                      }
                                  ]
                              }
                          ]
                      }
                  ],
                  "form": null
              },
              "styles": {
                  "items": [],
                  "formDefinition": [],
                  "selectorType": "topLevel",
                  "form": null
              }
          },
          "bb157524-39a9-4283-866b-491bfac4d7bf": {
              "settings": {
                  "selectorType": "topLevel",
                  "formDefinition": [
                      {
                          "formKey": "container-settings",
                          "children": [
                              {
                                  "formKey": "container-width",
                                  "breakpoints": [],
                                  "activeFields": [
                                      {
                                          "name": "width",
                                          "active": true
                                      }
                                  ]
                              },
                              {
                                  "formKey": "common-link-animation",
                                  "breakpoints": [
                                      {
                                          "name": "xl"
                                      }
                                  ],
                                  "activeFields": [
                                      {
                                          "name": "linkAnimation",
                                          "active": true
                                      },
                                      {
                                          "name": "animationType",
                                          "active": true
                                      },
                                      {
                                          "name": "animationScope",
                                          "active": true
                                      },
                                      {
                                          "name": "animationParent",
                                          "active": true
                                      },
                                      {
                                          "name": "animationTarget",
                                          "active": true
                                      },
                                      {
                                          "name": "animationScale",
                                          "active": true
                                      },
                                      {
                                          "name": "animationDirection",
                                          "active": true
                                      },
                                      {
                                          "name": "animationDirection",
                                          "active": true
                                      },
                                      {
                                          "name": "animationDirection",
                                          "active": true
                                      },
                                      {
                                          "name": "animationDistance",
                                          "active": true
                                      },
                                      {
                                          "name": "animationPieces",
                                          "active": true
                                      },
                                      {
                                          "name": "animationOrigin",
                                          "active": true
                                      },
                                      {
                                          "name": "animationFoldHeight",
                                          "active": true
                                      },
                                      {
                                          "name": "animationHorizontalFirst",
                                          "active": true
                                      },
                                      {
                                          "name": "animationIterations",
                                          "active": true
                                      },
                                      {
                                          "name": "animationEasing",
                                          "active": true
                                      },
                                      {
                                          "name": "animationDuration",
                                          "active": true
                                      }
                                  ]
                              },
                              {
                                  "formKey": "container-style",
                                  "breakpoints": [],
                                  "activeFields": [
                                      {
                                          "name": "customStyle",
                                          "active": true
                                      },
                                      {
                                          "name": "customStyle",
                                          "active": true
                                      },
                                      {
                                          "name": "customStyle",
                                          "active": true
                                      }
                                  ]
                              },
                              {
                                  "formKey": "common-link-modifier",
                                  "breakpoints": [],
                                  "activeFields": [
                                      {
                                          "name": "modifier",
                                          "active": true
                                      },
                                      {
                                          "name": "modifierType",
                                          "active": true
                                      },
                                      {
                                          "name": "interactionScope",
                                          "active": true
                                      },
                                      {
                                          "name": "interactionParent",
                                          "active": true
                                      },
                                      {
                                          "name": "interactionTarget",
                                          "active": true
                                      },
                                      {
                                          "name": "modifierName",
                                          "active": true
                                      }
                                  ]
                              }
                          ]
                      }
                  ],
                  "form": null
              },
              "styles": {
                  "items": [],
                  "formDefinition": [
                      {
                          "formKey": "background",
                          "children": [
                              {
                                  "formKey": "background-color",
                                  "breakpoints": [
                                      {
                                          "name": "xl"
                                      }
                                  ],
                                  "activeFields": [
                                      {
                                          "name": "background-color",
                                          "active": true
                                      }
                                  ]
                              }
                          ]
                      },
                      {
                          "formKey": "layout",
                          "children": [
                              {
                                  "formKey": "padding",
                                  "breakpoints": [
                                      {
                                          "name": "ps"
                                      }
                                  ],
                                  "activeFields": [
                                      {
                                          "name": "padding-equal",
                                          "active": true
                                      },
                                      {
                                          "name": "padding-top",
                                          "active": false
                                      },
                                      {
                                          "name": "padding-bottom",
                                          "active": false
                                      },
                                      {
                                          "name": "padding-left",
                                          "active": false
                                      },
                                      {
                                          "name": "padding-right",
                                          "active": false
                                      }
                                  ]
                              }
                          ]
                      }
                  ],
                  "selectorType": "topLevel",
                  "form": null
              },
              "markup": {
                  "title": "Markup",
                  "selectorType": "topLevel",
                  "formDefinition": [
                      {
                          "formKey": "tab-markup-classes-and-ids",
                          "children": [
                              {
                                  "formKey": "tab-markup-add-classes",
                                  "breakpoints": [],
                                  "activeFields": [
                                      {
                                          "name": "classes",
                                          "active": true
                                      }
                                  ]
                              }
                          ]
                      }
                  ],
                  "form": null
              }
          },
          "52044c51-96ba-4c27-8e2d-ee0b4807bbad": {
              "settings": {
                  "topLevel": {
                      "formDefinition": [
                          {
                              "formKey": "component-drop-zone-placeholder-settings",
                              "children": [
                                  {
                                      "formKey": "component-drop-zone-placeholder-hide",
                                      "breakpoints": [],
                                      "activeFields": [
                                          {
                                              "name": "dropzoneHideSelector",
                                              "active": true
                                          }
                                      ]
                                  }
                              ]
                          }
                      ],
                      "selectorType": "topLevel",
                      "form": null
                  },
                  "dropzone": [],
                  "selectorType": "topLevel"
              }
          },
          "5d7d17e0-1df8-4b10-b7f1-7451d0a68139": {}
      },
      "model": {
          "37eb25c2-8b40-4731-b3e5-214116218fdf": {
              "settings": {
                  "title": "Accordion tabs item",
                  "accordionTabElement": "div",
                  "settings": {
                      "title": "[field.a3fc925d-7210-4e02-86d6-27731b0288d4]"
                  },
                  "accordionStyle": {
                      "customStyle": ""
                  },
                  "tabStyle": {
                      "customStyle": ""
                  }
              },
              "context-visibility": {
                  "contextVisibility": {
                      "condition": "ALL"
                  }
              },
              "styles": {
                  "settings": {
                      "element": "accordion-tabs-item"
                  },
                  "styles": {
                      "xl": {
                          "background-color": {}
                      }
                  }
              },
              "isVariableMode": false
          },
          "bb157524-39a9-4283-866b-491bfac4d7bf": {
              "settings": {
                  "title": "",
                  "width": "fluid",
                  "customStyle": [
                      {
                          "customStyle": "[field.67e8761d-1e9f-47c9-99a1-b94b91941d2f]"
                      }
                  ],
                  "admin": {}
              },
              "context-visibility": {
                  "contextVisibility": {
                      "condition": "ALL"
                  }
              },
              "styles": {
                  "settings": {
                      "element": "container"
                  },
                  "styles": {
                      "xl": {
                          "background-color": {
                              "value": "[field.af4eca46-d7e1-4896-87bc-44c84b322fc9]"
                          }
                      },
                      "ps": {
                          "padding": {
                              "padding-equal": {
                                  "value": "24"
                              }
                          }
                      }
                  }
              },
              "isVariableMode": false,
              "markup": {
                  "classes": ""
              }
          },
          "52044c51-96ba-4c27-8e2d-ee0b4807bbad": {
              "settings": {
                  "dropzoneHideSelector": "",
                  "title": "Content drop zone"
              }
          },
          "59b48c37-ad3d-49ab-a71b-dd273be6c70c": {
              "settings": {
                  "type": "cohTabContainer",
                  "title": "Tab container",
                  "responsiveMode": true
              }
          },
          "e77a7719-0cbe-4dbd-a0d2-936f2c6a72ba": {
              "settings": {
                  "type": "cohTabItem",
                  "title": "Content",
                  "breakpointIcon": ""
              },
              "contextVisibility": {
                  "condition": "ALL"
              }
          },
          "5d7d17e0-1df8-4b10-b7f1-7451d0a68139": {
              "settings": {
                  "title": "Navigation label",
                  "type": "cohSection",
                  "hideRowHeading": 0,
                  "columnCount": "auto",
                  "breakpoints": false,
                  "propertiesMenu": false,
                  "disableScrollbar": true,
                  "disableEllipsisMenu": true,
                  "isOpen": true,
                  "removePadding": 0,
                  "breakpointIcon": ""
              },
              "contextVisibility": {
                  "condition": "ALL"
              }
          },
          "a3fc925d-7210-4e02-86d6-27731b0288d4": {
              "settings": {
                  "title": "Navigation label",
                  "schema": {
                      "type": "string",
                      "escape": true
                  },
                  "validationMessage": {
                      "302": "Please enter a navigation label."
                  },
                  "machineName": "navigation-label",
                  "required": true
              },
              "contextVisibility": {
                  "condition": "ALL"
              },
              "model": {
                  "value": "Enter label here"
              }
          },
          "65d305f9-fd0f-4e57-9913-0be3ede68c57": {
              "settings": {
                  "type": "cohTabItem",
                  "title": "Layout and style",
                  "breakpointIcon": ""
              },
              "contextVisibility": {
                  "condition": "ALL"
              }
          },
          "7f73cdd9-cb19-4429-ab51-903793b7f8ca": {
              "settings": {
                  "title": "Color",
                  "type": "cohSection",
                  "hideRowHeading": 0,
                  "columnCount": "1",
                  "breakpoints": false,
                  "propertiesMenu": false,
                  "disableScrollbar": true,
                  "disableEllipsisMenu": true,
                  "isOpen": true,
                  "removePadding": 0,
                  "breakpointIcon": ""
              },
              "contextVisibility": {
                  "condition": "ALL"
              }
          },
          "af4eca46-d7e1-4896-87bc-44c84b322fc9": {
              "settings": {
                  "title": "Background color",
                  "type": "cohColourPickerOpener",
                  "colourPickerOptions": {
                      "flat": true,
                      "showOnly": ""
                  },
                  "schema": {
                      "type": "object"
                  },
                  "restrictBy": "none",
                  "tooltipPlacement": "auto right",
                  "machineName": "background-color"
              },
              "contextVisibility": {
                  "condition": "ALL"
              }
          },
          "9c4b667d-b1af-4092-a49a-83ddf6195d83": {
              "settings": {
                  "title": "Padding",
                  "type": "cohSection",
                  "hideRowHeading": 0,
                  "columnCount": "auto",
                  "breakpoints": false,
                  "propertiesMenu": false,
                  "disableScrollbar": true,
                  "disableEllipsisMenu": true,
                  "isOpen": true,
                  "removePadding": 0,
                  "breakpointIcon": ""
              },
              "contextVisibility": {
                  "condition": "ALL"
              }
          },
          "67e8761d-1e9f-47c9-99a1-b94b91941d2f": {
              "settings": {
                  "title": "Padding around content",
                  "type": "cohSelect",
                  "selectType": "custom",
                  "schema": {
                      "type": "string"
                  },
                  "options": [
                      {
                          "label": "None",
                          "value": ""
                      },
                      {
                          "label": "Apply padding around content",
                          "value": "coh-style-padding-small"
                      }
                  ],
                  "machineName": "padding-around-content",
                  "tooltipPlacement": "auto right"
              },
              "contextVisibility": {
                  "condition": "ALL"
              },
              "model": {
                  "value": "coh-style-padding-small"
              }
          },
          "992bfa07-2081-4c0e-81af-c7ddf14d7887": {
              "settings": {
                  "type": "cohTabItem",
                  "title": "Help",
                  "breakpointIcon": ""
              },
              "contextVisibility": {
                  "condition": "ALL"
              }
          },
          "26a67ebd-fa79-44fa-96cd-042480e04320": {
              "settings": {
                  "title": "Help text",
                  "type": "cohHelpText",
                  "options": {
                      "helpText": "# Using the Tab item component\n- Use Tab items within the Horizontal and Vertical tabs container components to create a tabbed area of content.\n- Add content to each Tab item.\n\n# Navigation label\n- **Navigation label -** Enter text for the tab navigation.\n\n# Padding\n- **Padding around content -** Add padding around the content within the Tab item.",
                      "showClose": false,
                      "helpType": "help"
                  }
              },
              "contextVisibility": {
                  "condition": "ALL"
              },
              "model": {}
          }
      },
      "previewModel": {
          "5d7d17e0-1df8-4b10-b7f1-7451d0a68139": {},
          "7f73cdd9-cb19-4429-ab51-903793b7f8ca": {},
          "af4eca46-d7e1-4896-87bc-44c84b322fc9": {},
          "bb157524-39a9-4283-866b-491bfac4d7bf": {
              "settings": {
                  "customStyle": [
                      {
                          "customStyle": ""
                      },
                      {},
                      {}
                  ]
              }
          },
          "37eb25c2-8b40-4731-b3e5-214116218fdf": {},
          "67e8761d-1e9f-47c9-99a1-b94b91941d2f": {},
          "9c4b667d-b1af-4092-a49a-83ddf6195d83": {},
          "26a67ebd-fa79-44fa-96cd-042480e04320": {}
      },
      "variableFields": {
          "37eb25c2-8b40-4731-b3e5-214116218fdf": [
              "settings.settings.title"
          ],
          "bb157524-39a9-4283-866b-491bfac4d7bf": [
              "styles.styles.xl.background-color.value",
              "settings.customStyle.0.customStyle"
          ],
          "5d7d17e0-1df8-4b10-b7f1-7451d0a68139": [],
          "7f73cdd9-cb19-4429-ab51-903793b7f8ca": [],
          "af4eca46-d7e1-4896-87bc-44c84b322fc9": [],
          "67e8761d-1e9f-47c9-99a1-b94b91941d2f": [],
          "9c4b667d-b1af-4092-a49a-83ddf6195d83": [],
          "26a67ebd-fa79-44fa-96cd-042480e04320": []
      },
      "meta": {
          "fieldHistory": [
              {
                  "uuid": "67e8761d-1e9f-47c9-99a1-b94b91941d2f",
                  "type": "form-select",
                  "machineName": "padding-around-content"
              },
              {
                  "uuid": "af4eca46-d7e1-4896-87bc-44c84b322fc9",
                  "type": "form-colorpicker",
                  "machineName": "background-color"
              },
              {
                  "uuid": "a3fc925d-7210-4e02-86d6-27731b0288d4",
                  "type": "form-input",
                  "machineName": "navigation-label"
              },
              {
                  "machineName": "padding-around-content"
              },
              {
                  "uuid": "0ff50e15-095a-469f-8da2-18c4690f9e2e",
                  "type": "form-select",
                  "machineName": "padding-top-and-bottom"
              },
              {
                  "uuid": "1c6875c3-9cea-4efc-8476-57a333564e68",
                  "type": "form-select",
                  "machineName": "padding-left-and-right"
              }
          ]
      }
  }
json_mapper: '{}'
last_entity_update: entityupdate_0042
locked: false
modified: true
selectable: true
category: cpt_cat_tab_components
preview_image: 'public://element-preview-images/Tab item.png'
has_quick_edit: true
entity_type_access: {  }
bundle_access: {  }
twig_template: component--cohesion-cpt-tab-item
weight: 45
