{
  "name": "divitorque/modal-popup",
  "moduleClassName": "dtq_modal_popup",
  "moduleOrderClassName": "dtq_modal_popup",
  "title": "Modal Popup",
  "titles": "Modal Popups",
  "moduleIcon": "divitorque/modal-popup",
  "category": "module",
  "attributes": {
    "module": {
      "type": "object",
      "selector": "{{selector}}",
      "default": {
        "advanced": {
          "animation": {
            "desktop": {
              "value": "fade"
            }
          },
          "size": {
            "desktop": {
              "value": "medium"
            }
          },
          "position": {
            "desktop": {
              "value": "center"
            }
          },
          "closeOnOverlay": {
            "desktop": {
              "value": "on"
            }
          },
          "showClose": {
            "desktop": {
              "value": "on"
            }
          },
          "openOn": {
            "desktop": {
              "value": "click"
            }
          },
          "closeOnEsc": {
            "desktop": {
              "value": "on"
            }
          },
          "triggerAlign": {
            "desktop": {
              "value": "left"
            }
          },
          "closeShape": {
            "desktop": {
              "value": "plain"
            }
          },
          "closePosition": {
            "desktop": {
              "value": "inside"
            }
          },
          "contentType": {
            "desktop": {
              "value": "text"
            }
          }
        }
      },
      "settings": {
        "meta": {
          "adminLabel": {}
        },
        "advanced": {
          "htmlAttributes": {},
          "animation": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentBehavior",
              "attrName": "module.advanced.animation",
              "label": "Open Animation",
              "description": "How the popup animates in when opened.",
              "priority": 10,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/select",
                "props": {
                  "options": {
                    "fade": {
                      "label": "Fade"
                    },
                    "zoom": {
                      "label": "Zoom"
                    },
                    "slideUp": {
                      "label": "Slide Up"
                    },
                    "slideDown": {
                      "label": "Slide Down"
                    }
                  }
                }
              }
            }
          },
          "size": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentBehavior",
              "attrName": "module.advanced.size",
              "label": "Popup Size",
              "description": "Maximum width of the popup box.",
              "priority": 20,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/select",
                "props": {
                  "options": {
                    "small": {
                      "label": "Small"
                    },
                    "medium": {
                      "label": "Medium"
                    },
                    "large": {
                      "label": "Large"
                    }
                  }
                }
              }
            }
          },
          "position": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentBehavior",
              "attrName": "module.advanced.position",
              "label": "Vertical Position",
              "description": "Where the popup sits vertically on screen.",
              "priority": 30,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/select",
                "props": {
                  "options": {
                    "center": {
                      "label": "Center"
                    },
                    "top": {
                      "label": "Top"
                    }
                  }
                }
              }
            }
          },
          "closeOnOverlay": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentBehavior",
              "attrName": "module.advanced.closeOnOverlay",
              "label": "Close on Overlay Click",
              "description": "Close the popup when the dark overlay outside the box is clicked.",
              "priority": 40,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/toggle"
              }
            }
          },
          "showClose": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentBehavior",
              "attrName": "module.advanced.showClose",
              "label": "Show Close Button",
              "description": "Show the (x) close button in the corner of the popup.",
              "priority": 50,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/toggle"
              }
            }
          },
          "overlayColor": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designOverlay",
              "attrName": "module.advanced.overlayColor",
              "label": "Overlay Color",
              "description": "Color of the dimmed background behind the popup.",
              "priority": 10,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/color-picker",
                "props": {
                  "isAlpha": true
                }
              }
            }
          },
          "closeColor": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designClose",
              "attrName": "module.advanced.closeColor",
              "label": "Close Icon Color",
              "description": "Color of the (x) close button.",
              "priority": 10,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": true
              },
              "component": {
                "type": "field",
                "name": "divi/color-picker",
                "props": {
                  "isAlpha": true
                }
              }
            }
          },
          "closeSize": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designClose",
              "attrName": "module.advanced.closeSize",
              "label": "Close Icon Size",
              "description": "Size of the (x) close button.",
              "priority": 20,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/range",
                "props": {
                  "min": 10,
                  "max": 60,
                  "step": 1,
                  "defaultUnit": "px"
                }
              }
            }
          },
          "openOn": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentBehavior",
              "attrName": "module.advanced.openOn",
              "label": "Open Popup On",
              "description": "Open when the trigger is clicked, or automatically on page load.",
              "priority": 5,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/select",
                "props": {
                  "options": {
                    "click": {
                      "label": "Trigger Click"
                    },
                    "load": {
                      "label": "Page Load"
                    }
                  }
                }
              }
            }
          },
          "loadDelay": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentBehavior",
              "attrName": "module.advanced.loadDelay",
              "label": "Page Load Delay",
              "description": "Seconds to wait before auto-opening on page load.",
              "priority": 6,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/range",
                "props": {
                  "min": 0,
                  "max": 30,
                  "step": 1,
                  "defaultUnit": "s",
                  "allowedUnits": [
                    "s"
                  ]
                }
              }
            }
          },
          "closeOnEsc": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentBehavior",
              "attrName": "module.advanced.closeOnEsc",
              "label": "Close on Escape Key",
              "description": "Allow the Escape key to close the popup.",
              "priority": 45,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/toggle"
              }
            }
          },
          "animDuration": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentBehavior",
              "attrName": "module.advanced.animDuration",
              "label": "Animation Speed",
              "description": "How long the open animation takes.",
              "priority": 60,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/range",
                "props": {
                  "min": 100,
                  "max": 1200,
                  "step": 50,
                  "defaultUnit": "ms",
                  "allowedUnits": [
                    "ms"
                  ]
                }
              }
            }
          },
          "triggerAlign": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentTrigger",
              "attrName": "module.advanced.triggerAlign",
              "label": "Trigger Alignment",
              "description": "Horizontal alignment of the trigger button.",
              "priority": 20,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": true,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/select",
                "props": {
                  "options": {
                    "left": {
                      "label": "Left"
                    },
                    "center": {
                      "label": "Center"
                    },
                    "right": {
                      "label": "Right"
                    }
                  }
                }
              }
            }
          },
          "maxWidth": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designBox",
              "attrName": "module.advanced.maxWidth",
              "label": "Custom Max Width",
              "description": "Override the size preset with a custom popup width.",
              "priority": 5,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": true,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/range",
                "props": {
                  "min": 200,
                  "max": 1200,
                  "step": 10,
                  "defaultUnit": "px"
                }
              }
            }
          },
          "overlayBlur": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designOverlay",
              "attrName": "module.advanced.overlayBlur",
              "label": "Overlay Blur",
              "description": "Blur the page behind the popup (frosted-glass effect).",
              "priority": 20,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/range",
                "props": {
                  "min": 0,
                  "max": 20,
                  "step": 1,
                  "defaultUnit": "px"
                }
              }
            }
          },
          "closeBg": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designClose",
              "attrName": "module.advanced.closeBg",
              "label": "Close Button Background",
              "description": "Background color of the close button.",
              "priority": 15,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": true
              },
              "component": {
                "type": "field",
                "name": "divi/color-picker",
                "props": {
                  "isAlpha": true
                }
              }
            }
          },
          "closeShape": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designClose",
              "attrName": "module.advanced.closeShape",
              "label": "Close Button Shape",
              "description": "Plain icon or a circular button.",
              "priority": 30,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/select",
                "props": {
                  "options": {
                    "plain": {
                      "label": "Plain"
                    },
                    "circle": {
                      "label": "Circle"
                    }
                  }
                }
              }
            }
          },
          "closePosition": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designClose",
              "attrName": "module.advanced.closePosition",
              "label": "Close Button Position",
              "description": "Inside the popup corner, or outside above it.",
              "priority": 40,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/select",
                "props": {
                  "options": {
                    "inside": {
                      "label": "Inside"
                    },
                    "outside": {
                      "label": "Outside"
                    }
                  }
                }
              }
            }
          },
          "contentType": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentPopup",
              "attrName": "module.advanced.contentType",
              "label": "Content Source",
              "description": "Show your own text/media, or pull in a saved Divi Library layout, page or post.",
              "priority": 5,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/select",
                "props": {
                  "options": {
                    "text": {
                      "label": "Text / Media"
                    },
                    "layout": {
                      "label": "Saved Layout / Post"
                    }
                  }
                }
              }
            }
          },
          "layoutId": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentPopup",
              "attrName": "module.advanced.layoutId",
              "label": "Choose Layout / Post",
              "description": "Pick a published Divi Library layout (or a page/post) to display inside the popup.",
              "priority": 30,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divitorque/select-layout"
              }
            }
          }
        },
        "decoration": {
          "animation": {},
          "layout": {},
          "background": {},
          "border": {},
          "boxShadow": {},
          "filters": {},
          "overflow": {},
          "position": {},
          "scroll": {},
          "spacing": {},
          "sizing": {},
          "sticky": {},
          "transform": {},
          "transition": {},
          "zIndex": {},
          "disabledOn": {}
        }
      }
    },
    "box": {
      "type": "object",
      "selector": "{{selector}} .dtq-modalpopup__box",
      "settings": {
        "decoration": {
          "background": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designBox",
              "priority": 10,
              "render": true,
              "attrName": "box.decoration.background",
              "component": {
                "name": "divi/background",
                "type": "group",
                "props": {
                  "grouped": false,
                  "fieldLabel": "Popup"
                }
              }
            }
          },
          "border": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designBox",
              "priority": 20,
              "render": true,
              "attrName": "box.decoration.border",
              "component": {
                "name": "divi/border",
                "type": "group",
                "props": {
                  "grouped": false,
                  "fieldLabel": "Popup"
                }
              }
            }
          },
          "boxShadow": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designBox",
              "priority": 30,
              "render": true,
              "attrName": "box.decoration.boxShadow",
              "component": {
                "name": "divi/box-shadow",
                "type": "group",
                "props": {
                  "grouped": false,
                  "fieldLabel": "Popup"
                }
              }
            }
          },
          "spacing": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designBox",
              "priority": 40,
              "render": true,
              "attrName": "box.decoration.spacing",
              "component": {
                "name": "divi/spacing",
                "type": "group",
                "props": {
                  "grouped": false,
                  "fieldLabel": "Popup"
                }
              }
            }
          }
        }
      }
    },
    "title": {
      "type": "object",
      "selector": "{{selector}} .dtq-modalpopup__title",
      "elementType": "heading",
      "tagName": "h3",
      "inlineEditor": "plainText",
      "attributes": {
        "class": "dtq-modalpopup__title"
      },
      "childrenSanitizer": "et_core_esc_previously",
      "default": {
        "decoration": {
          "font": {
            "font": {
              "desktop": {
                "value": {
                  "size": "24px",
                  "weight": "700",
                  "lineHeight": "1.3em"
                }
              }
            }
          }
        }
      },
      "settings": {
        "innerContent": {
          "groupType": "group-item",
          "item": {
            "groupSlug": "contentPopup",
            "priority": 10,
            "render": true,
            "attrName": "title.innerContent",
            "label": "Popup Title",
            "description": "The heading shown at the top of the popup.",
            "component": {
              "type": "field",
              "name": "divi/text"
            },
            "features": {
              "sticky": false,
              "responsive": false,
              "hover": false,
              "dynamicContent": true
            }
          }
        },
        "decoration": {
          "font": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designTitle",
              "priority": 10,
              "render": true,
              "component": {
                "name": "divi/font",
                "type": "group",
                "props": {
                  "grouped": false,
                  "fieldLabel": "Title",
                  "fields": {
                    "headingLevel": {
                      "render": false
                    }
                  }
                }
              }
            }
          },
          "spacing": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designTitle",
              "priority": 20,
              "render": true,
              "attrName": "title.decoration.spacing",
              "component": {
                "name": "divi/spacing",
                "type": "group",
                "props": {
                  "grouped": false,
                  "fieldLabel": "Title"
                }
              }
            }
          }
        }
      }
    },
    "content": {
      "type": "object",
      "selector": "{{selector}} .dtq-modalpopup__content",
      "elementType": "content",
      "attributes": {
        "class": "dtq-modalpopup__content"
      },
      "settings": {
        "innerContent": {
          "groupType": "group-item",
          "item": {
            "groupSlug": "contentPopup",
            "priority": 20,
            "render": true,
            "attrName": "content.innerContent",
            "label": "Popup Content",
            "description": "The body content shown inside the popup.",
            "component": {
              "type": "field",
              "name": "divi/richtext"
            },
            "features": {
              "sticky": false,
              "responsive": false,
              "hover": false,
              "dynamicContent": true
            }
          }
        },
        "decoration": {
          "bodyFont": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designContent",
              "priority": 10,
              "render": true,
              "component": {
                "name": "divi/font-body",
                "type": "group",
                "props": {
                  "grouped": false,
                  "fieldLabel": "Content",
                  "hideTextAlign": true
                }
              }
            }
          },
          "spacing": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designContent",
              "priority": 20,
              "render": true,
              "attrName": "content.decoration.spacing",
              "component": {
                "name": "divi/spacing",
                "type": "group",
                "props": {
                  "grouped": false,
                  "fieldLabel": "Content"
                }
              }
            }
          }
        }
      }
    },
    "triggerText": {
      "type": "object",
      "selector": "{{selector}} .dtq-modalpopup__trigger",
      "default": {
        "innerContent": {
          "desktop": {
            "value": "Open Popup"
          }
        }
      },
      "settings": {
        "innerContent": {
          "groupType": "group-item",
          "item": {
            "groupSlug": "contentTrigger",
            "attrName": "triggerText.innerContent",
            "label": "Trigger Text",
            "description": "The label shown on the button that opens the popup.",
            "priority": 10,
            "render": true,
            "features": {
              "sticky": false,
              "responsive": false,
              "hover": false,
              "dynamicContent": {
                "type": "text"
              }
            },
            "component": {
              "name": "divi/text",
              "type": "field"
            }
          }
        }
      }
    }
  },
  "customCssFields": {
    "trigger": {
      "subName": "trigger",
      "selectorSuffix": " .dtq-modalpopup__trigger"
    },
    "box": {
      "subName": "box",
      "selectorSuffix": " .dtq-modalpopup__box"
    },
    "title": {
      "subName": "title",
      "selectorSuffix": " .dtq-modalpopup__title"
    },
    "content": {
      "subName": "content",
      "selectorSuffix": " .dtq-modalpopup__content"
    }
  },
  "settings": {
    "content": "auto",
    "design": "auto",
    "advanced": "auto",
    "groups": {
      "contentTrigger": {
        "panel": "content",
        "priority": 10,
        "groupName": "contentTrigger",
        "component": {
          "name": "divi/composite",
          "props": {
            "groupLabel": "Trigger"
          }
        }
      },
      "contentPopup": {
        "panel": "content",
        "priority": 20,
        "groupName": "contentPopup",
        "component": {
          "name": "divi/composite",
          "props": {
            "groupLabel": "Popup Content"
          }
        }
      },
      "contentBehavior": {
        "panel": "content",
        "priority": 30,
        "groupName": "contentBehavior",
        "component": {
          "name": "divi/composite",
          "props": {
            "groupLabel": "Behavior"
          }
        }
      },
      "designBox": {
        "panel": "design",
        "priority": 20,
        "groupName": "designBox",
        "component": {
          "name": "divi/composite",
          "props": {
            "groupLabel": "Popup Box"
          }
        }
      },
      "designTitle": {
        "panel": "design",
        "priority": 30,
        "groupName": "designTitle",
        "multiElements": true,
        "component": {
          "name": "divi/composite",
          "props": {
            "groupLabel": "Title Typography",
            "clipboardCategory": "style",
            "presetGroup": "divi/font"
          }
        }
      },
      "designContent": {
        "panel": "design",
        "priority": 40,
        "groupName": "designContent",
        "multiElements": true,
        "component": {
          "name": "divi/composite",
          "props": {
            "groupLabel": "Content Typography",
            "clipboardCategory": "style",
            "presetGroup": "divi/font-body"
          }
        }
      },
      "designOverlay": {
        "panel": "design",
        "priority": 50,
        "groupName": "designOverlay",
        "component": {
          "name": "divi/composite",
          "props": {
            "groupLabel": "Overlay"
          }
        }
      },
      "designClose": {
        "panel": "design",
        "priority": 60,
        "groupName": "designClose",
        "component": {
          "name": "divi/composite",
          "props": {
            "groupLabel": "Close Button"
          }
        }
      }
    }
  }
}