uuid: cac99df3-b29f-4de9-b247-cfb0f6a9b0e0
langcode: en
status: true
dependencies:
  config:
    - cohesion_custom_styles.cohesion_custom_style.1782d7b4
    - cohesion_custom_styles.cohesion_custom_style.54909223
    - cohesion_custom_styles.cohesion_custom_style.da97307a
    - cohesion_elements.cohesion_component_category.cpt_cat_layout_components
    - cohesion_website_settings.cohesion_color.white
  content:
    - 'file:file:421653e6-445a-4a8c-8cf3-6959b37fe82f'
  enforced:
    module:
      - acquia_cms_site_studio
label: 'Modal window'
id: cpt_modal_window
json_values: |
  {
      "canvas": [
          {
              "type": "container",
              "uid": "modal",
              "title": "Modal",
              "status": {
                  "collapsed": false
              },
              "uuid": "d53b56fc-6fda-42ee-b68f-22a951611050",
              "parentUid": "root",
              "children": [
                  {
                      "type": "container",
                      "uid": "container",
                      "title": "Container",
                      "status": {
                          "collapsed": false,
                          "collapsedParents": []
                      },
                      "uuid": "3a994ef1-b6ed-4729-9c0a-fe6bee525867",
                      "parentUid": "modal",
                      "children": [
                          {
                              "type": "item",
                              "uid": "component-drop-zone-placeholder",
                              "title": "Component drop zone",
                              "status": {
                                  "collapsed": true,
                                  "collapsedParents": []
                              },
                              "uuid": "a6fa3724-12fc-4e38-8934-ce0a483075ea",
                              "parentUid": "container",
                              "children": []
                          }
                      ]
                  }
              ]
          }
      ],
      "componentForm": [
          {
              "type": "form-container",
              "uid": "form-tab-container",
              "title": "Tab container",
              "status": {
                  "collapsed": false
              },
              "options": {
                  "formBuilder": true
              },
              "uuid": "0c96cc15-d5a4-4f0a-a094-a4f3467d3abe",
              "parentUid": "root",
              "children": [
                  {
                      "type": "form-container",
                      "uid": "form-tab-item",
                      "title": "Tab item",
                      "status": {
                          "collapsed": false,
                          "collapsedParents": []
                      },
                      "options": {
                          "formBuilder": true
                      },
                      "uuid": "abd47dfa-262a-4bd4-b190-8f9da0e4a55e",
                      "parentUid": "form-tab-container",
                      "children": [
                          {
                              "type": "form-container",
                              "uid": "form-section",
                              "title": "Field group",
                              "status": {
                                  "collapsed": true,
                                  "collapsedParents": []
                              },
                              "options": {
                                  "formBuilder": true
                              },
                              "uuid": "77640ce2-23b1-4e48-aebd-dd03859e852d",
                              "parentUid": "form-tab-item",
                              "children": [
                                  {
                                      "type": "form-field",
                                      "uid": "form-checkbox-toggle",
                                      "title": "Toggle",
                                      "translate": true,
                                      "status": {
                                          "collapsed": false,
                                          "collapsedParents": []
                                      },
                                      "uuid": "f5062934-cf77-4228-b5b2-5dbb5903f3dd",
                                      "parentUid": "form-section",
                                      "children": []
                                  }
                              ]
                          },
                          {
                              "type": "form-container",
                              "uid": "form-section",
                              "title": "Field group",
                              "status": {
                                  "collapsed": false,
                                  "collapsedParents": []
                              },
                              "options": {
                                  "formBuilder": true
                              },
                              "uuid": "5076a78f-c010-41e5-9d55-058a3cf96f1d",
                              "parentUid": "form-tab-item",
                              "children": [
                                  {
                                      "type": "form-field",
                                      "uid": "form-input",
                                      "title": "Input",
                                      "status": {
                                          "collapsed": false,
                                          "collapsedParents": []
                                      },
                                      "uuid": "8ca7519a-ee05-484a-89b4-177062eabe21",
                                      "parentUid": "form-section",
                                      "children": []
                                  },
                                  {
                                      "type": "form-field",
                                      "uid": "form-select",
                                      "title": "Select",
                                      "status": {
                                          "collapsed": false,
                                          "collapsedParents": []
                                      },
                                      "uuid": "77624ceb-d988-4527-a528-5ac6c6892e65",
                                      "parentUid": "form-section",
                                      "children": []
                                  },
                                  {
                                      "type": "form-field",
                                      "uid": "form-colorpicker",
                                      "title": "Color picker",
                                      "status": {
                                          "collapsed": false,
                                          "collapsedParents": []
                                      },
                                      "uuid": "286c0fc8-a11b-43aa-ae7a-2dc25d90e243",
                                      "parentUid": "form-section",
                                      "children": []
                                  },
                                  {
                                      "type": "form-field",
                                      "uid": "form-select",
                                      "title": "Select",
                                      "status": {
                                          "collapsed": false,
                                          "collapsedParents": []
                                      },
                                      "uuid": "132d3714-79f8-4cf8-91ac-baa68993fa32",
                                      "parentUid": "form-section",
                                      "children": []
                                  }
                              ]
                          }
                      ]
                  },
                  {
                      "type": "form-container",
                      "uid": "form-tab-item",
                      "title": "Tab item",
                      "status": {
                          "collapsed": true,
                          "collapsedParents": []
                      },
                      "options": {
                          "formBuilder": true
                      },
                      "uuid": "136353c5-ea32-421d-84b5-faa541fd6576",
                      "parentUid": "form-tab-container",
                      "children": [
                          {
                              "type": "form-help",
                              "uid": "form-helptext",
                              "title": "Help text",
                              "status": {
                                  "collapsed": false,
                                  "collapsedParents": []
                              },
                              "uuid": "121a449e-58be-44e0-98ea-216542accfb8",
                              "parentUid": "form-tab-item",
                              "children": []
                          }
                      ]
                  }
              ]
          }
      ],
      "mapper": {
          "d53b56fc-6fda-42ee-b68f-22a951611050": {
              "settings": {
                  "formDefinition": [
                      {
                          "formKey": "modal-settings",
                          "children": [
                              {
                                  "formKey": "modal",
                                  "breakpoints": [],
                                  "activeFields": [
                                      {
                                          "name": "id",
                                          "active": true
                                      },
                                      {
                                          "name": "modalPositionClass",
                                          "active": true
                                      },
                                      {
                                          "name": "modalCustomStyle",
                                          "active": true
                                      },
                                      {
                                          "name": "autoOpen",
                                          "active": true
                                      },
                                      {
                                          "name": "delayAutoOpen",
                                          "active": true
                                      },
                                      {
                                          "name": "autoClose",
                                          "active": true
                                      },
                                      {
                                          "name": "delayAutoClose",
                                          "active": true
                                      }
                                  ]
                              },
                              {
                                  "formKey": "modal-close-button",
                                  "breakpoints": [],
                                  "activeFields": [
                                      {
                                          "name": "showClose",
                                          "active": true
                                      },
                                      {
                                          "name": "buttonText",
                                          "active": true
                                      },
                                      {
                                          "name": "buttonCustomStyle",
                                          "active": true
                                      },
                                      {
                                          "name": "closePositionOutside",
                                          "active": true
                                      },
                                      {
                                          "name": "closePositionClass",
                                          "active": true
                                      }
                                  ]
                              },
                              {
                                  "formKey": "modal-animation",
                                  "breakpoints": [],
                                  "activeFields": [
                                      {
                                          "name": "animationType",
                                          "active": true
                                      },
                                      {
                                          "name": "animationDirection",
                                          "active": true
                                      },
                                      {
                                          "name": "animationDirection",
                                          "active": true
                                      },
                                      {
                                          "name": "animationDistance",
                                          "active": true
                                      },
                                      {
                                          "name": "animationFoldHeight",
                                          "active": true
                                      },
                                      {
                                          "name": "animationHorizontalFirst",
                                          "active": true
                                      },
                                      {
                                          "name": "animationIterations",
                                          "active": true
                                      },
                                      {
                                          "name": "animationEasing",
                                          "active": true
                                      },
                                      {
                                          "name": "animationDuration",
                                          "active": true
                                      }
                                  ]
                              },
                              {
                                  "formKey": "modal-overlay",
                                  "breakpoints": [],
                                  "activeFields": [
                                      {
                                          "name": "showOverlay",
                                          "active": true
                                      },
                                      {
                                          "name": "clickToClose",
                                          "active": true
                                      },
                                      {
                                          "name": "overlayCustomStyle",
                                          "active": true
                                      }
                                  ]
                              },
                              {
                                  "formKey": "modal-style",
                                  "breakpoints": [],
                                  "activeFields": [
                                      {
                                          "name": "customStyle",
                                          "active": true
                                      },
                                      {
                                          "name": "customStyle",
                                          "active": true
                                      }
                                  ]
                              }
                          ]
                      }
                  ],
                  "selectorType": "topLevel",
                  "form": null,
                  "items": []
              },
              "styles": {
                  "formDefinition": [],
                  "selectorType": "topLevel",
                  "items": [
                      {
                          "title": ".coh-modal-inner",
                          "type": "container",
                          "items": [
                              {
                                  "title": ".modal-small",
                                  "type": "container",
                                  "items": [],
                                  "form": null,
                                  "selectorType": "modifier",
                                  "model": ".modal-small",
                                  "uuid": "9c38a122-daf2-451c-a82f-c49481e830c5",
                                  "allowedTypes": [
                                      "child",
                                      "pseudo",
                                      "modifier"
                                  ],
                                  "formDefinition": [
                                      {
                                          "formKey": "layout",
                                          "children": [
                                              {
                                                  "formKey": "width",
                                                  "breakpoints": [
                                                      {
                                                          "name": "xl"
                                                      }
                                                  ],
                                                  "activeFields": [
                                                      {
                                                          "name": "min-width",
                                                          "active": false
                                                      },
                                                      {
                                                          "name": "max-width",
                                                          "active": true
                                                      },
                                                      {
                                                          "name": "width",
                                                          "active": false
                                                      }
                                                  ]
                                              }
                                          ]
                                      }
                                  ]
                              },
                              {
                                  "title": ".modal-medium",
                                  "type": "container",
                                  "items": [],
                                  "form": null,
                                  "selectorType": "modifier",
                                  "model": ".modal-medium",
                                  "uuid": "12ba5912-3148-4378-b12c-aba6f5b04f14",
                                  "allowedTypes": [
                                      "child",
                                      "pseudo",
                                      "modifier"
                                  ],
                                  "formDefinition": [
                                      {
                                          "formKey": "layout",
                                          "children": [
                                              {
                                                  "formKey": "width",
                                                  "breakpoints": [
                                                      {
                                                          "name": "xl"
                                                      }
                                                  ],
                                                  "activeFields": [
                                                      {
                                                          "name": "min-width",
                                                          "active": false
                                                      },
                                                      {
                                                          "name": "max-width",
                                                          "active": true
                                                      },
                                                      {
                                                          "name": "width",
                                                          "active": false
                                                      }
                                                  ]
                                              }
                                          ]
                                      }
                                  ]
                              },
                              {
                                  "title": ".modal-large",
                                  "type": "container",
                                  "items": [],
                                  "form": null,
                                  "selectorType": "modifier",
                                  "model": ".modal-large",
                                  "uuid": "45c42994-0d3c-4f02-884d-8ec4d77abf70",
                                  "allowedTypes": [
                                      "child",
                                      "pseudo",
                                      "modifier"
                                  ],
                                  "formDefinition": [
                                      {
                                          "formKey": "layout",
                                          "children": [
                                              {
                                                  "formKey": "width",
                                                  "breakpoints": [
                                                      {
                                                          "name": "xl"
                                                      }
                                                  ],
                                                  "activeFields": [
                                                      {
                                                          "name": "min-width",
                                                          "active": false
                                                      },
                                                      {
                                                          "name": "max-width",
                                                          "active": true
                                                      },
                                                      {
                                                          "name": "width",
                                                          "active": false
                                                      }
                                                  ]
                                              }
                                          ]
                                      }
                                  ]
                              },
                              {
                                  "title": ".modal-fullscreen",
                                  "type": "container",
                                  "items": [],
                                  "form": null,
                                  "selectorType": "modifier",
                                  "model": ".modal-fullscreen",
                                  "uuid": "2edf9bc5-5127-42cd-9094-ad6f072c267f",
                                  "allowedTypes": [
                                      "child",
                                      "pseudo",
                                      "modifier"
                                  ],
                                  "formDefinition": [
                                      {
                                          "formKey": "layout",
                                          "children": [
                                              {
                                                  "formKey": "width",
                                                  "breakpoints": [
                                                      {
                                                          "name": "xl"
                                                      }
                                                  ],
                                                  "activeFields": [
                                                      {
                                                          "name": "min-width",
                                                          "active": false
                                                      },
                                                      {
                                                          "name": "max-width",
                                                          "active": true
                                                      },
                                                      {
                                                          "name": "width",
                                                          "active": true
                                                      }
                                                  ]
                                              },
                                              {
                                                  "formKey": "height",
                                                  "breakpoints": [
                                                      {
                                                          "name": "xl"
                                                      }
                                                  ],
                                                  "activeFields": [
                                                      {
                                                          "name": "min-height",
                                                          "active": false
                                                      },
                                                      {
                                                          "name": "max-height",
                                                          "active": false
                                                      },
                                                      {
                                                          "name": "height",
                                                          "active": true
                                                      }
                                                  ]
                                              },
                                              {
                                                  "formKey": "margin",
                                                  "breakpoints": [
                                                      {
                                                          "name": "xl"
                                                      }
                                                  ],
                                                  "activeFields": [
                                                      {
                                                          "name": "margin-equal",
                                                          "active": false
                                                      },
                                                      {
                                                          "name": "margin-top",
                                                          "active": false
                                                      },
                                                      {
                                                          "name": "margin-bottom",
                                                          "active": false
                                                      },
                                                      {
                                                          "name": "margin-left",
                                                          "active": true
                                                      },
                                                      {
                                                          "name": "margin-right",
                                                          "active": true
                                                      },
                                                      {
                                                          "name": "margin-block-start",
                                                          "active": false
                                                      },
                                                      {
                                                          "name": "margin-block-end",
                                                          "active": false
                                                      },
                                                      {
                                                          "name": "margin-inline-start",
                                                          "active": false
                                                      },
                                                      {
                                                          "name": "margin-inline-end",
                                                          "active": false
                                                      }
                                                  ]
                                              }
                                          ]
                                      }
                                  ]
                              }
                          ],
                          "form": null,
                          "selectorType": "child",
                          "model": ".coh-modal-inner",
                          "uuid": "8fd8741d-ed7c-4d35-9390-9f9825d15d83",
                          "allowedTypes": [
                              "child",
                              "pseudo",
                              "modifier"
                          ],
                          "formDefinition": [
                              {
                                  "formKey": "background",
                                  "children": [
                                      {
                                          "formKey": "background-color",
                                          "breakpoints": [
                                              {
                                                  "name": "xl"
                                              }
                                          ],
                                          "activeFields": [
                                              {
                                                  "name": "background-color",
                                                  "active": true
                                              }
                                          ]
                                      }
                                  ]
                              },
                              {
                                  "formKey": "layout",
                                  "children": [
                                      {
                                          "formKey": "margin",
                                          "breakpoints": [
                                              {
                                                  "name": "xl"
                                              },
                                              {
                                                  "name": "md"
                                              }
                                          ],
                                          "activeFields": [
                                              {
                                                  "name": "margin-equal",
                                                  "active": false
                                              },
                                              {
                                                  "name": "margin-top",
                                                  "active": false
                                              },
                                              {
                                                  "name": "margin-bottom",
                                                  "active": false
                                              },
                                              {
                                                  "name": "margin-left",
                                                  "active": true
                                              },
                                              {
                                                  "name": "margin-right",
                                                  "active": true
                                              },
                                              {
                                                  "name": "margin-block-start",
                                                  "active": false
                                              },
                                              {
                                                  "name": "margin-block-end",
                                                  "active": false
                                              },
                                              {
                                                  "name": "margin-inline-start",
                                                  "active": false
                                              },
                                              {
                                                  "name": "margin-inline-end",
                                                  "active": false
                                              }
                                          ]
                                      }
                                  ]
                              }
                          ]
                      }
                  ],
                  "form": null
              }
          },
          "3a994ef1-b6ed-4729-9c0a-fe6bee525867": {
              "settings": {
                  "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": "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": "container-style",
                                  "breakpoints": [],
                                  "activeFields": [
                                      {
                                          "name": "customStyle",
                                          "active": true
                                      },
                                      {
                                          "name": "customStyle",
                                          "active": true
                                      }
                                  ]
                              }
                          ]
                      }
                  ],
                  "selectorType": "topLevel",
                  "form": null,
                  "items": []
              },
              "styles": {
                  "formDefinition": [
                      {
                          "formKey": "layout",
                          "children": [
                              {
                                  "formKey": "display",
                                  "breakpoints": [
                                      {
                                          "name": "xl"
                                      }
                                  ],
                                  "activeFields": [
                                      {
                                          "name": "display",
                                          "active": false
                                      },
                                      {
                                          "name": "visibility",
                                          "active": false
                                      },
                                      {
                                          "name": "overflow",
                                          "active": true
                                      },
                                      {
                                          "name": "overflow-x",
                                          "active": false
                                      },
                                      {
                                          "name": "overflow-y",
                                          "active": false
                                      }
                                  ]
                              },
                              {
                                  "formKey": "height",
                                  "breakpoints": [
                                      {
                                          "name": "xl"
                                      },
                                      {
                                          "name": "md"
                                      }
                                  ],
                                  "activeFields": [
                                      {
                                          "name": "min-height",
                                          "active": false
                                      },
                                      {
                                          "name": "max-height",
                                          "active": true
                                      },
                                      {
                                          "name": "height",
                                          "active": false
                                      }
                                  ]
                              },
                              {
                                  "formKey": "padding",
                                  "breakpoints": [
                                      {
                                          "name": "xl"
                                      },
                                      {
                                          "name": "md"
                                      }
                                  ],
                                  "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
                                      },
                                      {
                                          "name": "padding-block-start",
                                          "active": false
                                      },
                                      {
                                          "name": "padding-block-end",
                                          "active": false
                                      },
                                      {
                                          "name": "padding-inline-start",
                                          "active": false
                                      },
                                      {
                                          "name": "padding-inline-end",
                                          "active": false
                                      }
                                  ]
                              }
                          ]
                      },
                      {
                          "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",
                  "items": [],
                  "form": null
              },
              "markup": {
                  "formDefinition": [
                      {
                          "formKey": "tab-markup-classes-and-ids",
                          "children": [
                              {
                                  "formKey": "tab-markup-add-classes",
                                  "breakpoints": [],
                                  "activeFields": [
                                      {
                                          "name": "classes",
                                          "active": true
                                      }
                                  ]
                              }
                          ]
                      }
                  ],
                  "title": "Markup",
                  "selectorType": "topLevel",
                  "form": null,
                  "items": []
              }
          },
          "a6fa3724-12fc-4e38-8934-ce0a483075ea": {}
      },
      "model": {
          "d53b56fc-6fda-42ee-b68f-22a951611050": {
              "settings": {
                  "title": "Modal",
                  "customStyle": [
                      {
                          "customStyle": ""
                      }
                  ],
                  "autoOpen": "[field.f5062934-cf77-4228-b5b2-5dbb5903f3dd]",
                  "autoClose": false,
                  "showClose": true,
                  "closePositionOutside": false,
                  "showOverlay": true,
                  "clickToClose": true,
                  "settings": {
                      "modalPositionClass": "coh-modal-center",
                      "modalCustomStyle": "",
                      "autoOpen": false,
                      "autoClose": false,
                      "showClose": true,
                      "buttonCustomStyle": "",
                      "closePositionOutside": false,
                      "closePositionClass": "coh-modal-close-top-right",
                      "animationType": "none",
                      "showOverlay": true,
                      "clickToClose": true,
                      "overlayCustomStyle": "",
                      "customStyle": [
                          {
                              "customStyle": ""
                          }
                      ]
                  },
                  "modalPositionClass": "coh-modal-center",
                  "modalCustomStyle": "[field.77624ceb-d988-4527-a528-5ac6c6892e65]",
                  "buttonCustomStyle": "[field.132d3714-79f8-4cf8-91ac-baa68993fa32]",
                  "closePositionClass": "coh-modal-close-top-right",
                  "animationType": "fade",
                  "overlayCustomStyle": "",
                  "animationEasing": "easeInOutCubic",
                  "id": "[field.8ca7519a-ee05-484a-89b4-177062eabe21]",
                  "animationDuration": 200
              },
              "context-visibility": {
                  "contextVisibility": {
                      "condition": "ALL"
                  }
              },
              "styles": {
                  "settings": {
                      "element": "modal"
                  },
                  "8fd8741d-ed7c-4d35-9390-9f9825d15d83": {
                      "settings": {
                          "element": ".coh-modal-inner",
                          "class": "",
                          "combinator": "",
                          "pseudo": ""
                      },
                      "styles": {
                          "xl": {
                              "background-color": {
                                  "value": "[field.286c0fc8-a11b-43aa-ae7a-2dc25d90e243]"
                              },
                              "margin": {
                                  "margin-left": {
                                      "value": "32"
                                  },
                                  "margin-right": {
                                      "value": "32"
                                  }
                              }
                          },
                          "md": {
                              "margin": {
                                  "margin-left": {
                                      "value": "24"
                                  },
                                  "margin-right": {
                                      "value": "24"
                                  }
                              }
                          }
                      }
                  },
                  "9c38a122-daf2-451c-a82f-c49481e830c5": {
                      "settings": {
                          "element": "",
                          "class": ".modal-small",
                          "combinator": "",
                          "pseudo": ""
                      },
                      "styles": {
                          "xl": {
                              "max-width": {
                                  "value": "560"
                              }
                          }
                      }
                  },
                  "12ba5912-3148-4378-b12c-aba6f5b04f14": {
                      "settings": {
                          "element": "",
                          "class": ".modal-medium",
                          "combinator": "",
                          "pseudo": ""
                      },
                      "styles": {
                          "xl": {
                              "max-width": {
                                  "value": "800"
                              }
                          }
                      }
                  },
                  "2edf9bc5-5127-42cd-9094-ad6f072c267f": {
                      "settings": {
                          "element": "",
                          "class": ".modal-fullscreen",
                          "combinator": "",
                          "pseudo": ""
                      },
                      "styles": {
                          "xl": {
                              "max-width": {
                                  "value": "none"
                              },
                              "width": {
                                  "value": "100%"
                              },
                              "height": {
                                  "value": "100%"
                              },
                              "margin": {
                                  "margin-left": {
                                      "value": "0"
                                  },
                                  "margin-right": {
                                      "value": "0"
                                  }
                              }
                          }
                      }
                  },
                  "45c42994-0d3c-4f02-884d-8ec4d77abf70": {
                      "settings": {
                          "element": "",
                          "class": ".modal-large",
                          "combinator": "",
                          "pseudo": ""
                      },
                      "styles": {
                          "xl": {
                              "max-width": {
                                  "value": "1200"
                              }
                          }
                      }
                  }
              }
          },
          "3a994ef1-b6ed-4729-9c0a-fe6bee525867": {
              "settings": {
                  "title": "Container - content-wrapper",
                  "width": "fluid",
                  "customStyle": [
                      {
                          "customStyle": ""
                      }
                  ],
                  "settings": {
                      "width": "fluid",
                      "customStyle": [
                          {
                              "customStyle": ""
                          }
                      ]
                  }
              },
              "context-visibility": {
                  "contextVisibility": {
                      "condition": "ALL"
                  }
              },
              "styles": {
                  "settings": {
                      "element": "container"
                  },
                  "styles": {
                      "xl": {
                          "overflow": {
                              "value": "auto"
                          },
                          "max-height": {
                              "value": "calc(100vh - 4rem)"
                          },
                          "custom-css": [
                              {
                                  "customCssProperty": {
                                      "value": "-webkit-overflow-scrolling"
                                  },
                                  "customCss": {
                                      "value": "touch"
                                  }
                              }
                          ],
                          "padding": {
                              "padding-equal": {
                                  "value": "32"
                              }
                          }
                      },
                      "md": {
                          "max-height": {
                              "value": "calc(100vh - 3rem)"
                          },
                          "padding": {
                              "padding-equal": {
                                  "value": "24"
                              }
                          }
                      }
                  }
              },
              "markup": {
                  "classes": "content-wrapper"
              }
          },
          "a6fa3724-12fc-4e38-8934-ce0a483075ea": {
              "settings": {
                  "title": "Drop modal content here",
                  "dropzoneHideSelector": ""
              }
          },
          "0c96cc15-d5a4-4f0a-a094-a4f3467d3abe": {
              "settings": {
                  "type": "cohTabContainer",
                  "title": "Tab container",
                  "responsiveMode": true
              }
          },
          "abd47dfa-262a-4bd4-b190-8f9da0e4a55e": {
              "settings": {
                  "title": "Settings",
                  "type": "cohTabItem",
                  "breakpointIcon": ""
              },
              "contextVisibility": {
                  "condition": "ALL"
              }
          },
          "77640ce2-23b1-4e48-aebd-dd03859e852d": {
              "settings": {
                  "title": "Modal trigger",
                  "type": "cohSection",
                  "hideRowHeading": 0,
                  "removePadding": 0,
                  "columnCount": "1",
                  "breakpointIcon": "",
                  "breakpoints": false,
                  "propertiesMenu": false,
                  "disableScrollbar": true,
                  "disableEllipsisMenu": true,
                  "isOpen": true
              },
              "contextVisibility": {
                  "condition": "ALL"
              }
          },
          "f5062934-cf77-4228-b5b2-5dbb5903f3dd": {
              "settings": {
                  "title": "Auto open modal",
                  "type": "checkboxToggle",
                  "schema": {
                      "type": "string"
                  },
                  "toggleType": "boolean",
                  "machineName": "auto-open-modal",
                  "tooltipPlacement": "auto right"
              },
              "contextVisibility": {
                  "condition": "ALL"
              },
              "model": {
                  "value": "{{falseValue}}"
              }
          },
          "5076a78f-c010-41e5-9d55-058a3cf96f1d": {
              "settings": {
                  "title": "Modal",
                  "type": "cohSection",
                  "hideRowHeading": 0,
                  "removePadding": 0,
                  "columnCount": "2",
                  "breakpointIcon": "",
                  "breakpoints": false,
                  "propertiesMenu": false,
                  "disableScrollbar": true,
                  "disableEllipsisMenu": true,
                  "isOpen": true,
                  "showCondition": ""
              },
              "contextVisibility": {
                  "condition": "ALL"
              }
          },
          "8ca7519a-ee05-484a-89b4-177062eabe21": {
              "settings": {
                  "title": "Modal window ID",
                  "schema": {
                      "type": "string",
                      "escape": true
                  },
                  "machineName": "modal-window-id",
                  "tooltipPlacement": "auto top-left",
                  "tooltipText": "The ID must be unique to the page.",
                  "validationMessage": {
                      "302": "Please provide an ID."
                  },
                  "required": true
              },
              "contextVisibility": {
                  "condition": "ALL"
              }
          },
          "77624ceb-d988-4527-a528-5ac6c6892e65": {
              "settings": {
                  "title": "Modal size",
                  "type": "cohSelect",
                  "selectType": "custom",
                  "schema": {
                      "type": "string"
                  },
                  "options": [
                      {
                          "label": "Small",
                          "value": "modal-small"
                      },
                      {
                          "label": "Medium",
                          "value": "modal-medium"
                      },
                      {
                          "label": "Large",
                          "value": "modal-large"
                      },
                      {
                          "label": "Full screen",
                          "value": "modal-fullscreen"
                      }
                  ],
                  "machineName": "modal-size",
                  "tooltipPlacement": "auto right"
              },
              "contextVisibility": {
                  "condition": "ALL"
              },
              "model": {
                  "value": "modal-medium"
              }
          },
          "286c0fc8-a11b-43aa-ae7a-2dc25d90e243": {
              "settings": {
                  "title": "Modal background color",
                  "type": "cohColourPickerOpener",
                  "colourPickerOptions": {
                      "flat": true,
                      "showOnly": ""
                  },
                  "schema": {
                      "type": "object"
                  },
                  "machineName": "modal-background-color",
                  "restrictBy": "none",
                  "tooltipPlacement": "auto right"
              },
              "contextVisibility": {
                  "condition": "ALL"
              },
              "model": {
                  "value": {
                      "name": "White",
                      "uid": "white",
                      "value": {
                          "hex": "#ffffff",
                          "rgba": "rgba(255, 255, 255, 1)"
                      },
                      "wysiwyg": true,
                      "class": ".coh-color-white",
                      "variable": "$coh-color-white",
                      "inuse": true,
                      "link": true,
                      "tags": [
                          "Light"
                      ]
                  }
              }
          },
          "132d3714-79f8-4cf8-91ac-baa68993fa32": {
              "settings": {
                  "title": "Close button style",
                  "type": "cohSelect",
                  "selectType": "custom",
                  "schema": {
                      "type": "string"
                  },
                  "machineName": "modal-close-button-style",
                  "tooltipPlacement": "auto right",
                  "options": [
                      {
                          "label": "Color button",
                          "value": "coh-style-modal-close-button-color"
                      },
                      {
                          "label": "Light button",
                          "value": "coh-style-modal-close-button-light"
                      },
                      {
                          "label": "Dark button",
                          "value": "coh-style-modal-close-button-dark"
                      }
                  ]
              },
              "contextVisibility": {
                  "condition": "ALL"
              },
              "model": {
                  "value": "coh-style-modal-close-button-color"
              }
          },
          "136353c5-ea32-421d-84b5-faa541fd6576": {
              "settings": {
                  "title": "Help",
                  "type": "cohTabItem",
                  "breakpointIcon": ""
              },
              "contextVisibility": {
                  "condition": "ALL"
              }
          },
          "121a449e-58be-44e0-98ea-216542accfb8": {
              "settings": {
                  "title": "Help text",
                  "type": "cohHelpText",
                  "options": {
                      "showClose": false,
                      "helpType": "help",
                      "helpText": "# Using the modal window component\n- Use this component to add a modal to your page that can be launched on page load or clicking a button.\n- Add the modal content to the Drop zone. \n\n# Modal trigger\n- **Auto open modal -** Toggle on to open the modal automatically on page load.\n\n# Modal\n- **Modal window ID -** The modal must be given an ID that is unique to the page. The ID is required for the button to target the modal when clicked. The ID should be formed from letters, numbers and hyphens and not include spaces. For example **modal-one**.\n- **Modal size -** Set the size of the modal window.\n- **Modal background color -** Set the background color of the modal window.\n- **Close button style -** Set the style of the button used to close the modal."
                  }
              },
              "contextVisibility": {
                  "condition": "ALL"
              }
          }
      },
      "previewModel": {
          "a6fa3724-12fc-4e38-8934-ce0a483075ea": {},
          "abd47dfa-262a-4bd4-b190-8f9da0e4a55e": {},
          "136353c5-ea32-421d-84b5-faa541fd6576": {},
          "5076a78f-c010-41e5-9d55-058a3cf96f1d": {},
          "8ca7519a-ee05-484a-89b4-177062eabe21": {},
          "132d3714-79f8-4cf8-91ac-baa68993fa32": {},
          "77624ceb-d988-4527-a528-5ac6c6892e65": {},
          "286c0fc8-a11b-43aa-ae7a-2dc25d90e243": {},
          "d53b56fc-6fda-42ee-b68f-22a951611050": {
              "settings": {
                  "buttonCustomStyle": "",
                  "autoOpen": false,
                  "modalCustomStyle": ""
              }
          },
          "f5062934-cf77-4228-b5b2-5dbb5903f3dd": {},
          "77640ce2-23b1-4e48-aebd-dd03859e852d": {},
          "3a994ef1-b6ed-4729-9c0a-fe6bee525867": {},
          "121a449e-58be-44e0-98ea-216542accfb8": {}
      },
      "variableFields": {
          "a6fa3724-12fc-4e38-8934-ce0a483075ea": [],
          "abd47dfa-262a-4bd4-b190-8f9da0e4a55e": [],
          "136353c5-ea32-421d-84b5-faa541fd6576": [],
          "5076a78f-c010-41e5-9d55-058a3cf96f1d": [],
          "8ca7519a-ee05-484a-89b4-177062eabe21": [],
          "132d3714-79f8-4cf8-91ac-baa68993fa32": [],
          "77624ceb-d988-4527-a528-5ac6c6892e65": [],
          "286c0fc8-a11b-43aa-ae7a-2dc25d90e243": [],
          "d53b56fc-6fda-42ee-b68f-22a951611050": [
              "settings.buttonCustomStyle",
              "settings.id",
              "settings.autoOpen",
              "styles.8fd8741d-ed7c-4d35-9390-9f9825d15d83.styles.xl.background-color.value",
              "settings.modalCustomStyle"
          ],
          "f5062934-cf77-4228-b5b2-5dbb5903f3dd": [],
          "77640ce2-23b1-4e48-aebd-dd03859e852d": [],
          "3a994ef1-b6ed-4729-9c0a-fe6bee525867": [],
          "121a449e-58be-44e0-98ea-216542accfb8": []
      },
      "meta": {
          "fieldHistory": [
              {
                  "uuid": "132d3714-79f8-4cf8-91ac-baa68993fa32",
                  "type": "form-select",
                  "machineName": "modal-close-button-style"
              },
              {
                  "uuid": "286c0fc8-a11b-43aa-ae7a-2dc25d90e243",
                  "type": "form-colorpicker",
                  "machineName": "modal-background-color"
              },
              {
                  "uuid": "77624ceb-d988-4527-a528-5ac6c6892e65",
                  "type": "form-select",
                  "machineName": "modal-size"
              },
              {
                  "uuid": "8ca7519a-ee05-484a-89b4-177062eabe21",
                  "type": "form-input",
                  "machineName": "modal-window-id"
              },
              {
                  "uuid": "f5062934-cf77-4228-b5b2-5dbb5903f3dd",
                  "type": "form-checkbox-toggle",
                  "machineName": "auto-open-modal"
              },
              {
                  "uuid": "dc5c7959-9eda-4392-87c9-7eafa0663ec7",
                  "type": "form-select",
                  "machineName": "modal-open-button-style"
              },
              {
                  "uuid": "09709ca0-65f8-4d33-82c9-633143e87784",
                  "type": "form-input",
                  "machineName": "modal-open-button-text"
              },
              {
                  "uuid": "294e8f50-f36a-4e1c-aa5a-5f7b6e161b9a",
                  "type": "form-input",
                  "machineName": "modal-open-button-id"
              },
              {
                  "uuid": "84a60807-2330-49cb-8dbd-b02396e723eb",
                  "type": "form-input-hidden",
                  "machineName": "modal-auto-open"
              }
          ]
      }
  }
json_mapper: '{}'
last_entity_update: entityupdate_0042
locked: false
modified: true
selectable: true
category: cpt_cat_layout_components
preview_image: 'public://element-preview-images/Modal.png'
has_quick_edit: true
entity_type_access: {  }
bundle_access: {  }
twig_template: component--cohesion-cpt-modal-window
weight: 12
