uuid: dcf61e58-52ba-4861-8779-b4034b1f900a
langcode: en
status: true
dependencies:
  config:
    - cohesion_elements.cohesion_component_category.cpt_cat_slider_components
  content:
    - 'file:file:43c51005-9605-4d0c-a693-a5b64d588a95'
  enforced:
    module:
      - acquia_cms_site_studio
label: 'Slide item'
id: cpt_slide_item
json_values: |
  {
      "canvas": [
          {
              "type": "container",
              "uid": "slide",
              "title": "Slide",
              "status": {
                  "collapsed": false
              },
              "parentIndex": 4,
              "uuid": "1c13a84b-f54f-49a4-9aa8-f790afa4ed87",
              "parentUid": "root",
              "children": [
                  {
                      "type": "item",
                      "uid": "component-drop-zone-placeholder",
                      "title": "Component drop zone",
                      "status": {
                          "collapsed": true,
                          "collapsedParents": []
                      },
                      "parentIndex": 0,
                      "uuid": "2bfc06a2-ae95-48c0-b149-4f8146d14e20",
                      "parentUid": "slide",
                      "children": []
                  }
              ]
          }
      ],
      "componentForm": [
          {
              "type": "form-help",
              "uid": "form-helptext",
              "title": "Help text",
              "parentIndex": "form-help",
              "status": {
                  "collapsed": false
              },
              "uuid": "ea0c5db4-b9b3-42a7-a8da-e155e24926d4",
              "parentUid": "root",
              "children": []
          }
      ],
      "mapper": {
          "1c13a84b-f54f-49a4-9aa8-f790afa4ed87": {
              "settings": {
                  "selectorType": "topLevel",
                  "formDefinition": [
                      {
                          "formKey": "slide-settings",
                          "children": [
                              {
                                  "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": "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
                                      }
                                  ]
                              },
                              {
                                  "formKey": "slide-style",
                                  "breakpoints": [],
                                  "activeFields": [
                                      {
                                          "name": "customStyle",
                                          "active": true
                                      },
                                      {
                                          "name": "customStyle",
                                          "active": true
                                      }
                                  ]
                              }
                          ]
                      },
                      {
                          "formKey": "common-admin",
                          "children": [
                              {
                                  "formKey": "common-comments",
                                  "breakpoints": [],
                                  "activeFields": [
                                      {
                                          "name": "comments",
                                          "active": true
                                      }
                                  ]
                              }
                          ]
                      }
                  ],
                  "form": null
              },
              "styles": {
                  "items": [],
                  "formDefinition": [
                      {
                          "formKey": "layout",
                          "children": [
                              {
                                  "formKey": "flex-container",
                                  "breakpoints": [
                                      {
                                          "name": "xl"
                                      }
                                  ],
                                  "activeFields": [
                                      {
                                          "name": "flex-direction",
                                          "active": true
                                      },
                                      {
                                          "name": "flex-wrap",
                                          "active": false
                                      },
                                      {
                                          "name": "justify-content",
                                          "active": false
                                      },
                                      {
                                          "name": "justify-content-safety",
                                          "active": true
                                      },
                                      {
                                          "name": "align-content",
                                          "active": false
                                      },
                                      {
                                          "name": "align-content-safety",
                                          "active": true
                                      },
                                      {
                                          "name": "align-items",
                                          "active": false
                                      },
                                      {
                                          "name": "align-items-safety",
                                          "active": true
                                      }
                                  ]
                              }
                          ]
                      },
                      {
                          "formKey": "custom-css",
                          "children": [
                              {
                                  "formKey": "css-property-and-css-value",
                                  "breakpoints": [
                                      {
                                          "name": "xl"
                                      }
                                  ],
                                  "activeFields": [
                                      {
                                          "name": "custom-css",
                                          "active": true
                                      },
                                      {
                                          "name": "customCssProperty",
                                          "active": true
                                      },
                                      {
                                          "name": "customCss",
                                          "active": true
                                      }
                                  ]
                              }
                          ]
                      }
                  ],
                  "selectorType": "topLevel",
                  "form": null
              }
          },
          "2bfc06a2-ae95-48c0-b149-4f8146d14e20": {}
      },
      "model": {
          "1c13a84b-f54f-49a4-9aa8-f790afa4ed87": {
              "settings": {
                  "title": "Slide",
                  "customStyle": [
                      {
                          "customStyle": ""
                      }
                  ],
                  "admin": {
                      "comments": "On the 'Styles' tab, note that a custom CSS property has been added for the `display` property.\n\nThis is to support use of the `!important` value rule, which ensures the slide item will always be `display: flex`.\n\nThis is necessary because the slide elements come with default styles for the display property that have higher specificity than those that can be set using the `Layout > Display` option."
                  }
              },
              "context-visibility": {
                  "contextVisibility": {
                      "condition": "ALL"
                  }
              },
              "styles": {
                  "settings": {
                      "element": "slide"
                  },
                  "styles": {
                      "xl": {
                          "flex-container": {
                              "flex-direction": {
                                  "value": "column"
                              }
                          },
                          "custom-css": [
                              {
                                  "customCssProperty": {
                                      "value": "display"
                                  },
                                  "customCss": {
                                      "value": "flex !important"
                                  }
                              }
                          ]
                      }
                  }
              }
          },
          "2bfc06a2-ae95-48c0-b149-4f8146d14e20": {
              "settings": {
                  "dropzoneHideSelector": "",
                  "title": "Drop slide content here"
              }
          },
          "ea0c5db4-b9b3-42a7-a8da-e155e24926d4": {
              "settings": {
                  "title": "Help text",
                  "type": "cohHelpText",
                  "options": {
                      "helpText": "# Using the Slide item component\n- This component has no editable settings but it must be used when creating a slider.\n- Drop multiple Slide items into the Slide container component.\n- Drop content into each Slide item component.",
                      "showClose": false,
                      "helpType": "help"
                  }
              },
              "contextVisibility": {
                  "condition": "ALL"
              },
              "model": {}
          }
      },
      "previewModel": {
          "1c13a84b-f54f-49a4-9aa8-f790afa4ed87": {
              "settings": {
                  "customStyle": [
                      {},
                      {}
                  ]
              }
          },
          "ea0c5db4-b9b3-42a7-a8da-e155e24926d4": {}
      },
      "variableFields": {
          "1c13a84b-f54f-49a4-9aa8-f790afa4ed87": [],
          "ea0c5db4-b9b3-42a7-a8da-e155e24926d4": []
      },
      "meta": {
          "fieldHistory": [
              {
                  "uuid": "4563edaa-8cc1-4516-be7d-c9bd8e3cd0d3",
                  "type": "form-colorpicker",
                  "machineName": "background-color"
              },
              {
                  "uuid": "0cb7315a-69d0-453d-94f0-65439728fb4c",
                  "type": "form-select",
                  "machineName": "padding-top-and-bottom"
              },
              {
                  "uuid": "6c9a7be7-ae5a-472c-8368-0710c3cd4f56",
                  "type": "form-select",
                  "machineName": "padding-left-and-right"
              }
          ]
      }
  }
json_mapper: '{}'
last_entity_update: entityupdate_0042
locked: false
modified: true
selectable: true
category: cpt_cat_slider_components
preview_image: 'public://element-preview-images/Slide item.png'
has_quick_edit: true
entity_type_access: {  }
bundle_access: {  }
twig_template: component--cohesion-cpt-slide-item
weight: 39
