kalidea/kaligraphi

<h1>Accordion</h1>

<div class="example">
  <article>
    <kal-accordion [multi]="multiple">

      <kal-expansion-panel [disabled]="disabled">
        <kal-expansion-panel-header><span>First panel {{ disabled ? 'disabled' : ''}}</span>
        </kal-expansion-panel-header>

        <kal-expansion-panel-content>
          <p>Main panel 1 content Lorem ipsum dolor sit amet, consectetur adipisicing elit. A at consequuntur eveniet
            maxime modi nobis sint soluta vero? Atque culpa deleniti facilis necessitatibus omnis. Architecto culpa
            dolore natus nisi perspiciatis?</p>
        </kal-expansion-panel-content>

        <kal-action-row>
          <button type="button">Submit</button>
        </kal-action-row>
      </kal-expansion-panel>

      <kal-expansion-panel>
        <kal-expansion-panel-header><span>Second panel</span></kal-expansion-panel-header>

        <kal-expansion-panel-content>
          <p>Main panel 2 content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad assumenda facere ipsam
            neque rerum! Aliquid cupiditate, dolorem esse, impedit ipsa molestiae obcaecati odio reiciendis sed sunt
            unde veniam vero voluptates.</p>
        </kal-expansion-panel-content>
      </kal-expansion-panel>

      <kal-expansion-panel>
        <kal-expansion-panel-header><span>Third panel</span></kal-expansion-panel-header>

        <kal-expansion-panel-content>
          <p>Main panel 3 content Lorem ipsum dolor sit amet, consectetur adipisicing elit. At consequatur dolores
            eveniet, illum nemo perspiciatis reiciendis sit soluta. Deleniti eius, eligendi excepturi id ipsum nostrum
            obcaecati officia sapiente tempore voluptatibus!</p>
        </kal-expansion-panel-content>

      </kal-expansion-panel>

    </kal-accordion>
  </article>
</div>

<div class="configurator">

  <kal-form-field>
    <kal-checkbox
      [(ngModel)]="disabled"
      label="disabled"
    ></kal-checkbox>
  </kal-form-field>

  <kal-form-field>
    <kal-checkbox
      [(ngModel)]="multiple"
      label="multiple"
    ></kal-checkbox>
  </kal-form-field>
</div>