key: bs-collapsible
name: $string.bscollapsible_name
category: bootstrap
icon: fa fa-caret-square-o-down
engine: ejs
template: |
  <div id="acc_<%= id %>" class="collapsible">
    <% for(var i=1; i<=n; i++) { %>
    <div class="card">      
      <div class="card-header" id="head_<%= id %>_<%= i %>">
        <h5 class="mb-0">
          <button type="button" class="btn btn-link" data-toggle="collapse" data-bs-toggle="collapse" data-target="#coll_<%= id %>_<%= i %>"
            data-bs-target="#coll_<%= id %>_<%= i %>" 
            aria-expanded="<%= i==1 ? 'true' : 'false' %>" aria-controls="coll_<%= id %>_<%= i %>">
            <span>$string.bscollapsible_label #<%= i %></span>
          </button>
        </h5>
      </div>
      <div id="coll_<%= id %>_<%= i %>" class="collapse<%= i==1 ? ' show' : '' %>" aria-labelledby="head_<%= id %>_<%= i %>"
       <%- indp ? '' : ' data-parent="#acc_' + id + '" data-bs-parent="#acc_' + id + '"' %>>
        <div class="card-body">
          <p>Lorem ipsum section <%= i %></p>
        </div>
      </div>
    </div>
    <% } %>
  </div>
  <p><br></p>
selectors: div.collapsible
unwrap: .card-header span, .card-body>*
parameters:
  - name: id
    title: Element id
    value: $RND
    hidden: true
    editable: false
  - name: 'n'
    title: $string.bscollapsible_number
    value: 3
    min: 1
  - name: indp
    title: $string.bscollapsible_indp
    tooltip: $string.bscollapsible_indp_tip
    value: false
    bind:
      getValue: (el) => el.querySelector('div.collapse[data-parent],div.collapse[data-bs-parent]') === null
      setValue: |
        (el, v) => {
          var id = el.getAttribute('id');
          el.querySelectorAll('div.collapse').forEach(elem => {
            if (v) {
              elem.removeAttribute('data-parent');
              elem.removeAttribute('data-bs-parent');
            } else {
              elem.setAttribute('data-parent', `#${id}`);
              elem.setAttribute('data-bs-parent', `#${id}`);
            }
          });
        }
contextmenu:
  - predicate: .card
    actions: moveup movedown insertafter | remove
author: Josep Mulet <pep.mulet@gmail.com>
version: 2.1.1
