feat(collapses): horizontal example

Author: xidedix

src/app/views/base/accordion/accordions.component.html

@@ -13,19 +13,19 @@
         </p>
         <app-docs-example href="components/accordion">
           <c-accordion [alwaysOpen]="false" [flush]="false" class="shadow">
-            <c-accordion-item #item0="cAccordionItem" [open]="false">
+            <c-accordion-item #item0="cAccordionItem" [visible]="false">
               <ng-template cTemplateId="accordionHeaderTemplate">
-                <button (click)="item0.toggleItem()" [collapsed]="!item0.open" cAccordionButton cBgColor="info">
+                <button (click)="item0.toggleItem()" [collapsed]="!item0.visible" cAccordionButton cBgColor="info">
                   Accordion item #0
                 </button>
               </ng-template>
               <ng-template cTemplateId="accordionBodyTemplate">
                 <div [innerHTML]="getAccordionBodyText('first')" cBgColor="info" class="accordion-body"></div>
               </ng-template>
             </c-accordion-item>
-            <c-accordion-item #item1="cAccordionItem" [open]="false">
+            <c-accordion-item #item1="cAccordionItem" [visible]="false">
               <ng-template cTemplateId="accordionHeaderTemplate">
-                <button (click)="item1.toggleItem()" [collapsed]="!item1.open" cAccordionButton>
+                <button (click)="item1.toggleItem()" [collapsed]="!item1.visible" cAccordionButton>
                   Accordion item #1
                 </button>
               </ng-template>
@@ -43,9 +43,9 @@
                 </div>
               </ng-template>
             </c-accordion-item>
-            <c-accordion-item #item2="cAccordionItem" [open]="false">
+            <c-accordion-item #item2="cAccordionItem" [visible]="false">
               <ng-template cTemplateId="accordionHeaderTemplate">
-                <button (click)="item2.toggleItem()" [collapsed]="!item2.open" cAccordionButton>
+                <button (click)="item2.toggleItem()" [collapsed]="!item2.visible" cAccordionButton>
                   Accordion item #2
                 </button>
               </ng-template>
@@ -69,23 +69,23 @@
         </p>
         <app-docs-example href="components/accordion#flush">
           <c-accordion [flush]="true">
-            <c-accordion-item [open]="true">
+            <c-accordion-item visible>
               <ng-template cTemplateId="accordionHeader">
                 Accordion item #0
               </ng-template>
               <ng-template cTemplateId="accordionBody">
                 <span [innerHTML]="getAccordionBodyText('first')"></span>
               </ng-template>
             </c-accordion-item>
-            <c-accordion-item [open]="false">
+            <c-accordion-item [visible]="false">
               <ng-template cTemplateId="accordionHeader">
                 Accordion item #1
               </ng-template>
               <ng-template cTemplateId="accordionBody">
                 <span [innerHTML]="getAccordionBodyText('second')"></span>
               </ng-template>
             </c-accordion-item>
-            <c-accordion-item [open]="false">
+            <c-accordion-item [visible]="false">
               <ng-template cTemplateId="accordionHeader">
                 Accordion item #2
               </ng-template>
@@ -104,7 +104,7 @@
       <c-card-body>
         <app-docs-example href="components/accordion#always-open">
           <c-accordion [alwaysOpen]="true" class="shadow accordion-custom">
-            <c-accordion-item *ngFor="let item of items; index as i" [open]="i===1">
+            <c-accordion-item *ngFor="let item of items; let i = index;" [visible]="i===1">
               <ng-template cTemplateId="accordionHeader">
                 Custom Accordion item #{{i}}
               </ng-template>

src/app/views/base/collapses/collapses.component.html

@@ -23,6 +23,26 @@
       </c-card-body>
     </c-card>
   </c-col>
+  <c-col xs="12">
+    <c-card class="mb-4">
+      <c-card-header ngPreserveWhitespaces>
+        <strong>Angular Collapse</strong> <small>horizontal</small>
+      </c-card-header>
+      <c-card-body>
+        <p class="text-medium-emphasis small">Add the <code>horizontal</code> property to transition the width instead of height and set a width on the immediate child element.</p>
+        <app-docs-example href="components/collapse">
+          <button (click)="toggleCollapse(1)" cButton class="me-1 mb-3" color="primary" [attr.aria-expanded]="collapses[1]">Button</button>
+          <div style="min-height: 130px;">
+            <c-card [visible]="collapses[1]" cCollapse horizontal class="shadow"  style="max-width: 260px;">
+              <c-card-body style="width: 260px;">
+                This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
+              </c-card-body>
+            </c-card>
+          </div>
+        </app-docs-example>
+      </c-card-body>
+    </c-card>
+  </c-col>
   <c-col xs="12">
     <c-card class="mb-4">
       <c-card-header>
@@ -33,13 +53,13 @@
           A <code>&lt;c-button&gt;</code> can show and hide multiple elements.
         </p>
         <app-docs-example href="components/collapse#multiple-targets">
-          <button (click)="toggleCollapse(1)" cButton class="me-1" color="primary">Toggle first element</button>
-          <button (click)="toggleCollapse(2)" cButton class="me-1" color="primary">Toggle second element</button>
-          <button (click)="toggleCollapse(1); toggleCollapse(2);" cButton class="me-1" color="primary">Toggle both
+          <button (click)="toggleCollapse(2)" cButton class="me-1" color="primary">Toggle first element</button>
+          <button (click)="toggleCollapse(3)" cButton class="me-1" color="primary">Toggle second element</button>
+          <button (click)="toggleCollapse(2); toggleCollapse(3);" cButton class="me-1" color="primary">Toggle both
           </button>
-          <c-row>
+          <c-row style="min-height: 130px;">
             <c-col xs="6">
-              <c-card [visible]="collapses[1]" cCollapse class="mt-3">
+              <c-card [visible]="collapses[2]" cCollapse class="mt-3">
                 <c-card-body>
                   Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
                   richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
@@ -48,7 +68,7 @@
               </c-card>
             </c-col>
             <c-col xs="6">
-              <c-card [visible]="collapses[2]" cCollapse class="mt-3">
+              <c-card [visible]="collapses[3]" cCollapse class="mt-3">
                 <c-card-body>
                   Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
                   richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes

src/app/views/base/collapses/collapses.component.ts

@@ -7,7 +7,7 @@ import { Component } from '@angular/core';
 })
 export class CollapsesComponent {
 
-  collapses = [false, false, false];
+  collapses = [false, false, false, false];
 
   constructor() { }