{
  "name": "divitorque/creative-button",
  "title": "Creative Button",
  "titles": "Creative Buttons",
  "moduleIcon": "divitorque/creative-button",
  "moduleClassName": "dtq_creative_button",
  "moduleOrderClassName": "dtq_creative_button",
  "category": "module",
  "attributes": {
    "module": {
      "type": "object",
      "selector": "{{selector}}",
      "default": {
        "advanced": {
          "effect": { "desktop": { "value": "fill-up" } },
          "effectColor": { "desktop": { "value": "#2b87da" } },
          "effectColor2": { "desktop": { "value": "#ffffff" } },
          "effectSpeed": { "desktop": { "value": "350ms" } },
          "effectEasing": { "desktop": { "value": "ease" } },
          "alignment": { "desktop": { "value": "center" } },
          "fullWidth": { "desktop": { "value": "off" } }
        }
      },
      "settings": {
        "meta": {
          "adminLabel": {}
        },
        "advanced": {
          "htmlAttributes": {},
          "effect": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentEffect",
              "attrName": "module.advanced.effect",
              "label": "Hover Effect",
              "description": "How the button reacts to the pointer. Every effect also runs on keyboard focus, so it is not mouse-only.",
              "priority": 10,
              "render": true,
              "features": { "sticky": false, "responsive": false, "hover": false },
              "component": {
                "type": "field",
                "name": "divi/select",
                "props": {
                  "options": {
                    "none": { "label": "None" },
                    "fill-up": { "label": "Fill Up" },
                    "fill-left": { "label": "Fill From Left" },
                    "fill-diagonal": { "label": "Fill Diagonally" },
                    "sweep-in": { "label": "Sweep In" },
                    "shutter-h": { "label": "Shutter (horizontal)" },
                    "shutter-v": { "label": "Shutter (vertical)" },
                    "radial-out": { "label": "Radial Out" },
                    "border-draw": { "label": "Draw Border" },
                    "shine": { "label": "Shine" },
                    "text-slide-up": { "label": "Slide Up Text" }
                  }
                }
              }
            }
          },
          "hoverText": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentEffect",
              "attrName": "module.advanced.hoverText",
              "label": "Hover Text",
              "description": "Second label revealed by the Slide Up Text effect. The button's real label stays in the page for screen readers.",
              "priority": 20,
              "render": true,
              "features": { "sticky": false, "responsive": false, "hover": false },
              "component": { "type": "field", "name": "divi/text" }
            }
          },
          "alignment": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentLayout",
              "attrName": "module.advanced.alignment",
              "label": "Alignment",
              "description": "Horizontal placement of the button within the column.",
              "priority": 10,
              "render": true,
              "features": { "sticky": false, "responsive": false, "hover": false },
              "component": {
                "type": "field",
                "name": "divi/select",
                "props": {
                  "options": {
                    "left": { "label": "Left" },
                    "center": { "label": "Center" },
                    "right": { "label": "Right" }
                  }
                }
              }
            }
          },
          "fullWidth": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentLayout",
              "attrName": "module.advanced.fullWidth",
              "label": "Full Width",
              "description": "Stretch the button across the whole column.",
              "priority": 20,
              "render": true,
              "features": { "sticky": false, "responsive": false, "hover": false },
              "component": { "type": "field", "name": "divi/toggle" }
            }
          },
          "effectColor": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designEffect",
              "attrName": "module.advanced.effectColor",
              "label": "Effect Color",
              "description": "Colour of the shape that moves across the button on hover.",
              "priority": 10,
              "render": true,
              "features": { "sticky": false, "responsive": false, "hover": false },
              "component": { "type": "field", "name": "divi/color-picker", "props": { "isAlpha": true } }
            }
          },
          "effectColor2": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designEffect",
              "attrName": "module.advanced.effectColor2",
              "label": "Text Color On Hover",
              "description": "Label colour once the effect has covered the button. Set this so the text stays readable against the effect colour.",
              "priority": 20,
              "render": true,
              "features": { "sticky": false, "responsive": false, "hover": false },
              "component": { "type": "field", "name": "divi/color-picker", "props": { "isAlpha": true } }
            }
          },
          "effectSpeed": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designEffect",
              "attrName": "module.advanced.effectSpeed",
              "label": "Effect Speed",
              "description": "How long the effect takes. Ignored for visitors who have asked for reduced motion.",
              "priority": 30,
              "render": true,
              "features": { "sticky": false, "responsive": false, "hover": false },
              "component": {
                "type": "field",
                "name": "divi/range",
                "props": { "min": 0, "max": 2000, "step": 50, "defaultUnit": "ms", "validUnits": ["ms", "s"] }
              }
            }
          },
          "effectEasing": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designEffect",
              "attrName": "module.advanced.effectEasing",
              "label": "Effect Easing",
              "description": "Acceleration curve the effect follows.",
              "priority": 40,
              "render": true,
              "features": { "sticky": false, "responsive": false, "hover": false },
              "component": {
                "type": "field",
                "name": "divi/select",
                "props": {
                  "options": {
                    "ease": { "label": "Ease" },
                    "ease-in": { "label": "Ease In" },
                    "ease-out": { "label": "Ease Out" },
                    "ease-in-out": { "label": "Ease In Out" },
                    "linear": { "label": "Linear" },
                    "cubic-bezier(0.4, 0, 0.2, 1)": { "label": "Smooth" },
                    "cubic-bezier(0.34, 1.56, 0.64, 1)": { "label": "Overshoot" }
                  }
                }
              }
            }
          },
          "text": {}
        },
        "decoration": {
          "animation": {},
          "background": {},
          "border": {},
          "boxShadow": {},
          "disabledOn": {},
          "filters": {},
          "overflow": {},
          "position": {},
          "scroll": {},
          "sizing": {},
          "spacing": {},
          "sticky": {},
          "transform": {},
          "transition": {},
          "zIndex": {}
        }
      }
    },
    "button": {
      "type": "object",
      "selector": "{{selector}} .et_pb_button.dtq-creative-btn__link",
      "elementType": "button",
      "attributes": { "class": "dtq-btn-default dtq-creative-btn__link" },
      "default": {
        "innerContent": {
          "desktop": { "value": { "text": "Click Here", "linkTarget": "off" } }
        }
      },
      "settings": {
        "innerContent": {
          "groupType": "into-multiple-groups",
          "groups": {
            "text": {
              "groupType": "group-item",
              "item": {
                "groupSlug": "contentButton",
                "attrName": "button.innerContent",
                "subName": "text",
                "label": "Button Text",
                "description": "The button's label. Clear it to hide the button.",
                "priority": 10,
                "render": true,
                "features": { "sticky": false, "responsive": false, "hover": false, "dynamicContent": true },
                "component": { "type": "field", "name": "divi/text" }
              }
            },
            "link": {
              "groupType": "group-item",
              "item": {
                "groupSlug": "contentButton",
                "priority": 20,
                "render": true,
                "component": {
                  "name": "divi/button-link",
                  "type": "group",
                  "props": { "grouped": false, "attrName": "button.innerContent", "fieldLabel": "Button" }
                }
              }
            }
          }
        },
        "decoration": {
          "button": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designButton",
              "attrName": "button.decoration.button",
              "priority": 10,
              "render": true,
              "component": { "name": "divi/button", "type": "group" }
            }
          }
        }
      }
    }
  },
  "customCssFields": {
    "slot": {
      "subName": "slot",
      "selectorSuffix": " .dtq-creative-btn__slot"
    },
    "link": {
      "subName": "link",
      "selectorSuffix": " .dtq-creative-btn__link"
    }
  },
  "settings": {
    "content": "auto",
    "design": "auto",
    "advanced": "auto",
    "groups": {
      "contentButton": {
        "panel": "content",
        "priority": 10,
        "groupName": "contentButton",
        "component": { "name": "divi/composite", "props": { "groupLabel": "Button" } }
      },
      "contentEffect": {
        "panel": "content",
        "priority": 20,
        "groupName": "contentEffect",
        "component": { "name": "divi/composite", "props": { "groupLabel": "Effect" } }
      },
      "contentLayout": {
        "panel": "content",
        "priority": 30,
        "groupName": "contentLayout",
        "component": { "name": "divi/composite", "props": { "groupLabel": "Layout" } }
      },
      "designEffect": {
        "panel": "design",
        "priority": 10,
        "groupName": "designEffect",
        "component": { "name": "divi/composite", "props": { "groupLabel": "Effect" } }
      },
      "designButton": {
        "panel": "design",
        "priority": 20,
        "groupName": "designButton",
        "component": { "name": "divi/composite", "props": { "groupLabel": "Button" } }
      }
    }
  }
}