Case Activity Details List

Shows the case activities list with header and list items

HTML

<div class="t-content" ng-controller="listExpandableSectionExampleController as controller">
    <div class="c-expandableSection c-expandableSection-list is-listHeader">
        <div class="c-expandableSection-header">
            <div class="c-expandableSection-heading u-flexItemSized+">
                <div class="u-flexItemGrow c-expandableSection-tableHeader">Activity</div>
            </div>
            <div class="c-expandableSection-heading u-flexItemSized">Created</div>
            <div class="c-expandableSection-heading u-flexItemSized">Completed</div>
        </div>
    </div>
    <div class="c-expandableSection c-expandableSection-list"
         ng-class="{ 'is-expanded': expandableItem.isExpanded}"
         ng-repeat="expandableItem in controller.expandableItems track by $index">
        <div class="c-expandableSection-header">
            <div class="c-expandableSection-heading u-flexItemSized+">
                <div class="u-flex u-flexRow u-flexMiddle">
                    <div class="c-expandableSection-expander" ng-click="controller.handleExpansion(expandableItem)">
                        <inv-icon glyph="'caret-right'" ng-show="!expandableItem.isExpanded"></inv-icon>
                        <inv-icon glyph="'caret-down'" ng-show="expandableItem.isExpanded"></inv-icon>
                    </div>
                    <inv-step-progress-indicator class="u-mr+" status="expandableItem.status" light-theme="true"></inv-step-progress-indicator>
                    <div class="u-flexItemGrow u-textTruncate" ng-bind="expandableItem.title"></div>
                </div>
            </div>
            <div class="c-expandableSection-heading is-field u-flexItemSized" ng-bind="expandableItem.createDate"></div>
            <div class="c-expandableSection-heading is-field u-flexItemSized" ng-bind="expandableItem.completeDate"></div>
        </div>
        <div class="c-expandableSection-content" ng-if="expandableItem.isExpanded">
            <div class="t-content">
                <div class="c-remark c-remark-card is-low u-pv++ u-ph+">
                    <span>Content Here</span>
                </div>
            </div>
        </div>
    </div>
</div>