cronapp-framework-js/components/crn-accordion.components.json

Javascript library for CronApp's projects

{
  "name": "crn-accordion",
  "text_pt_BR": "Acordeão",
  "text_en_US": "Accordion",
  "image": "/node_modules/cronapp-framework-js/img/cron-icon/crn-accordion.svg",
  "description": "Estrutura de pergunta e resposta (FAQ)",
  "description_en_US": "Question and Answer Structure (FAQ)",
  "category": [
    "LAYOUTS"
  ],
  "templateURL": "src/main/webapp/node_modules/cronapp-framework-js/dist/components/templates/accordion.template.html",
  "properties": {
    "class": {
      "order": 9999
    },
    "heading-arrow": {
      "displayName_pt_BR": "Seta",
      "displayName_en_US": "Arrow"
    }
  },
  "forcedGroup": true,
  "handleRules": {
    "canOrder": true,
    "canActivate": true,
    "canIncrement": true,
    "rules": [
      {
        "accordionTabClicked": "panel-collapse.collapse",
        "activeSelector": "div.panel-collapse.collapse.in",
        "activeClass": "in",
        "sourceHTML": "<div class=\"panel panel-default\"> <div class=\"panel-heading collapsed\" role=\"tab\" id=\"heading${RANDOM}\" data-toggle=\"collapse\" data-parent=\"#accordion\" href=\"#collapse${RANDOM}\" aria-expanded=\"true\" aria-controls=\"collapse${RANDOM}\"> <div class=\"lead text-center\" data-component=\"crn-title\" xattr-position=\"text-center\"> <h1 class=\"text-center title component-holder h3\" xattr-position=\"h1 text-center\" xattr-type=\"h3\" data-component=\"crn-text-component\">Ungroup and change the component</h1> </div> </div> <div id=\"collapse${RANDOM}\" class=\"panel-collapse collapse\" role=\"tabpanel\" aria-labelledby=\"heading${RANDOM}\"> <div class=\"panel-body\" data-container=\"true\"> <div class=\"lead text-center\" data-component=\"crn-subtitle\" xattr-position=\"text-center\"> <h1 class=\"text-center title component-holder h3\" xattr-position=\"h3 text-center\" xattr-type=\"h3\" data-component=\"crn-text-component\">Ungroup and insert component</h1> </div> </div> </div> </div>",
        "targetSelector": "div.panel-group"
      },
      {
        "accordionTabClicked": "div.panel-collapse.collapse",
        "activeSelector": "div.panel-collapse.collapse.in",
        "activeClass": "in",
        "targetSelector": "div.panel-collapse.content"
      }
    ]
  },
  "attributesForPreview": [
    {
      "name": "heading-arrow",
      "type": "options",
      "target": "class",
      "values": [
        {
          "key": "heading-arrow",
          "value_pt_BR": "Sim",
          "value_en_US": "Yes"
        },
        {
          "key": "heading-not-arrow",
          "value_pt_BR": "Não",
          "value_en_US": "No"
        }
      ]
    }
  ],
  "childrenProperties": [
    {
      "name": "heading-arrow",
      "selector": ".panel .panel-heading",
      "order": 3
    },
    {
      "name": "ng-init",
      "selector": "div.panel-heading",
      "type": "event"
    },
    {
      "name": "ng-click",
      "selector": "div.panel-heading",
      "type": "event"
    },
    {
      "name": "ng-dblclick",
      "selector": "div.panel-heading",
      "type": "event"
    },
    {
      "name": "ng-mouseenter",
      "selector": "div.panel-heading",
      "type": "event"
    },
    {
      "name": "ng-mouseleave",
      "selector": "div.panel-heading",
      "type": "event"
    },
    {
      "name": "ng-mousemove",
      "selector": "div.panel-heading",
      "type": "event"
    }
  ],
  "styles": [
    {
      "selector": "div#{id} .panel-default>.panel-heading",
      "text_pt_BR": "Cabeçalho do acordeão",
      "text_en_US": "Accordion Heading"
    },
    {
      "selector": "div#{id} .panel-collapse>.panel-body",
      "text_pt_BR": "Corpo do acordeão",
      "text_en_US": "Accordion Body"
    }
  ]
}