kalidea/kaligraphi

<h1>Stepper</h1>

<div class="example">
  <article>
    <kal-stepper [linear]="linear"
                 orientation="horizontal"
                 (selectionChange)="selectionUpdated($event)"
                 #stepper>

      <kal-step [stepControl]="firstFormGroup">

        <ng-template kalStepLabel>
          <kal-button [kalTheme]="stepper.selectedIndex === 0 ? 'primary' : 'tertiary'">
            First step
          </kal-button>
        </ng-template>

        <form [formGroup]="firstFormGroup">

          <kal-input formControlName="email"></kal-input>
          <div>
            <kal-button (click)="stepper.next()"
                        kalTheme="primary"
                        [disabled]="linear && firstFormGroup.invalid">
              Next 1
            </kal-button>
          </div>
        </form>

      </kal-step>

      <kal-step [stepControl]="secondFormGroup">

        <ng-template kalStepLabel>
          <kal-button [kalTheme]="stepper.selectedIndex === 1 ? 'primary' : 'tertiary'">
            Second Step
          </kal-button>
        </ng-template>

        <form [formGroup]="secondFormGroup">
          <kal-input formControlName="firstname"></kal-input>
          <div>
            <kal-button (click)="stepper.previous()"
                    kalTheme="tertiary">
                    Previous 2
            </kal-button>
            <kal-button (click)="stepper.next()"
                        kalTheme="primary"
                        [disabled]="linear && firstFormGroup.invalid">
              Next 2
            </kal-button>
          </div>
        </form>

      </kal-step>

      <kal-step>

        <ng-template kalStepLabel>
          <kal-button [kalTheme]="stepper.selectedIndex === 2 ? 'primary' : 'tertiary'">
            Third Step
          </kal-button>
        </ng-template>

        <p>
          Thanks for your subscription
        </p>

        <div>
          <kal-button (click)="stepper.previous()"
                  kalTheme="tertiary">
          Previous 3
          </kal-button>
        </div>

      </kal-step>
    </kal-stepper>
  </article>
</div>

<div class="configurator">

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