Make accordion headers customizable

[tilwinjoy]

Below is the common bootstrap accordion template structure:

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
     <!-- Hey, I CAN ADD STUFF HERE AS I WISH! that's cool -->
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
     <!-- CONTENT GOES HERE -->
      </div>
    </div>
  </div>
</div>

If you look closely, the reason there is a panel-title inside panel-heading is because there can be other things in the accordion header other than just title. Otherwise bootstrap could've assumed whatever is inside panel-heading is the title and styled it as such without having element with panel-title inside it.

But as far as I have experimented with ui-bootstrap accordion, it only lets the developer specify the content inside .panel-title, everything goes inside <h4><a>{{heading}}</a></h4>.

A common use case that I'm stuck with currently is, displaying data regarding the tab content in header while it is closed - for example, the status of an activity going on inside the tab content... or the validation state of a form inside tab content... or number of items selected inside tab content etc.

It looks like instead of specifying transclude:true, transcluding everything into body and plucking the title content and appending it inside <h4><a></a></h4>, if we use mult-slot transclusion like

transclude: {
     heading: 'uibAccordionHeading',
     body: 'uibAccordionBody'
},

Then the user gets much more control over the heading, like when he is normally using bootstrap. He can do stuff like:

<uib-accordion>
        <uib-accordion-group>
             <uib-accordion-heading title="my-title"> <!-- this whole thing goes inside panel-heading-->
                   <uib-accordion-title>or title here<uib-accordion-title>
                   <span class="pull-right">{{status}}</span> <!-- and lot more cool stuff here-->
            </uib-accordion-heading>
            <uib-accordion-body>content</uib-accordion-body>
        </uib-accordion-group>
</uib-accordion>

Let me know what you guys think about this. I'd happy to work on this (I've already made an attempt, I'm not that familiar with grunt, the tests are failing for me locally and couldn't find any info about how to build the project and get the demo running in CONTRIBUTING.md

[wesleycho]

Does this proposal require multislot transclusion present in angular 1.5? If so, we cannot have it implemented until we remove 1.4 support.

Otherwise, this is an interesting proposal. In this case, a breaking change would have to be made to the accordion transclude directive I think to make it more flexible or whatever.

As for the tests, just run grunt to run the template cache building and tests, and in subsequent runs, running karma start is sufficient (it lets you also use tools such as fdescribe, fit, and xdescribe, xit when running tests that way).