Skip to content

Commit

Permalink
feat(stepper): add component sample
Browse files Browse the repository at this point in the history
  • Loading branch information
mmart1n committed Oct 28, 2021
1 parent 45d5f42 commit 45c8c9c
Show file tree
Hide file tree
Showing 7 changed files with 455 additions and 1 deletion.
5 changes: 5 additions & 0 deletions src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -449,6 +449,11 @@ export class AppComponent implements OnInit {
icon: 'feedback',
name: 'Snackbar'
},
{
link: '/stepper',
icon: 'format_list_bulleted',
name: 'Stepper'
},
{
link: '/tabs',
icon: 'tab',
Expand Down
4 changes: 3 additions & 1 deletion src/app/app.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,7 @@ import { GridLocalizationSampleComponent } from './grid-localization/grid-locali
import { TreeGridGroupBySampleComponent } from './tree-grid-groupby/tree-grid-groupby.sample';
import { PaginationSampleComponent } from './pagination/pagination.component';
import { GridCellAPISampleComponent } from './grid-cell-api/grid-cell-api.sample';
import { IgxStepperSampleComponent } from './stepper/stepper.sample';

const components = [
AccordionSampleComponent,
Expand Down Expand Up @@ -288,7 +289,8 @@ const components = [
GridNestedPropsSampleComponent,
IgxColumnGroupingDirective,
GridColumnTypesSampleComponent,
GridLocalizationSampleComponent
GridLocalizationSampleComponent,
IgxStepperSampleComponent
];

@NgModule({
Expand Down
5 changes: 5 additions & 0 deletions src/app/app.routing.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@ import { GridLocalizationSampleComponent } from './grid-localization/grid-locali
import { TreeGridGroupBySampleComponent } from './tree-grid-groupby/tree-grid-groupby.sample';
import { PaginationSampleComponent } from './pagination/pagination.component';
import { GridCellAPISampleComponent } from './grid-cell-api/grid-cell-api.sample';
import { IgxStepperSampleComponent } from './stepper/stepper.sample';

const appRoutes = [
{
Expand Down Expand Up @@ -446,6 +447,10 @@ const appRoutes = [
{
path: 'pagination',
Comment: PaginationSampleComponent
},
{
path: 'stepper',
component: IgxStepperSampleComponent
}
];

Expand Down
5 changes: 5 additions & 0 deletions src/app/routing.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,7 @@ import { GridLocalizationSampleComponent } from './grid-localization/grid-locali
import { TreeGridGroupBySampleComponent } from './tree-grid-groupby/tree-grid-groupby.sample';
import { PaginationSampleComponent } from './pagination/pagination.component';
import { GridCellAPISampleComponent } from './grid-cell-api/grid-cell-api.sample';
import { IgxStepperSampleComponent as StepperSampleComponent } from './stepper/stepper.sample';

const appRoutes = [
{
Expand Down Expand Up @@ -598,6 +599,10 @@ const appRoutes = [
},{
path: 'pagination',
component: PaginationSampleComponent
},
{
path: 'stepper',
component: StepperSampleComponent
}
];

Expand Down
224 changes: 224 additions & 0 deletions src/app/stepper/stepper.sample.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,224 @@
<div class="sample-actions">
<button igxButton="outlined" (click)="changeOrientation()">Change Orientation</button>
<div class="sample-actions__btg">
<p>Vertical Animation Type</p>
<igx-buttongroup [values]="verticalAnimationTypes" (selected)="toggleVerticalAnimations($event)">
</igx-buttongroup>
</div>
<div class="sample-actions__btg">
<p>Horizontal Animation Type</p>
<igx-buttongroup [values]="horizontalAnimationTypes" (selected)="toggleHorizontalAnimations($event)">
</igx-buttongroup>
</div>
<igx-input-group type="border">
<label igxLabel>Animation Duration</label>
<input igxInput type="number" [(ngModel)]="animationDuration">
<igx-suffix>ms</igx-suffix>
</igx-input-group>
</div>
<div class="sample-actions">
<igx-switch [checked]="false" (change)="setTitlePosition($event)">Set Title Position</igx-switch>
<div class="sample-actions__btg">
<p>Title Position</p>
<igx-buttongroup [values]="titlePositions" (selected)="toggleTitlePos($event)">
</igx-buttongroup>
</div>
<div class="sample-actions__btg">
<p>Step Type</p>
<igx-buttongroup [values]="stepTypes" (selected)="toggleStepTypes($event)"></igx-buttongroup>
</div>
</div>

<div class="sample-stepper-wrapper">
<igx-stepper #stepper [verticalAnimationType]="verticalAnimationType"
[horizontalAnimationType]="horizontalAnimationType" [animationDuration]="animationDuration"
(activeStepChanging)="activeStepChanging($event)" (activeStepChanged)="activeChanged($event)"
[stepType]="stepType">

<ng-template igxStepActiveIndicator>
<igx-icon>edit</igx-icon>
</ng-template>

<!-- <ng-template igxStepInvalidIndicator>
<igx-icon>error</igx-icon>
</ng-template> -->

<!-- <ng-template igxStepCompletedIndicator>
<igx-icon>check</igx-icon>
</ng-template> -->

<igx-step #step (activeChange)="activeStepChange($event)" [isValid]="form1.form.valid"
[completed]="form1.form.valid && stepper.linear">
<igx-icon igxStepIndicator>shopping_cart</igx-icon>
<span igxStepTitle>Shopping Card</span>
<span igxStepSubTitle>{{stepper.linear === true ? '(Required)' : 'Optional'}}</span>
<div igxStepContent class="sample-body" [tabIndex]="-1">
<form #form1="ngForm">
<igx-input-group>
<input igxInput name="firstName" type="text" [(ngModel)]="user.firstName" required />
<label igxLabel for="firstName">First Name</label>
</igx-input-group>

<igx-input-group>
<input igxInput name="lastName" type="text" [(ngModel)]="user.lastName" />
<label igxLabel for="lastName">Last Name</label>
</igx-input-group>

<div class="nav-buttons">
<button igxButton="outlined" (click)="stepper.next()"
[disabled]="!form1.form.valid && stepper.linear">NEXT
</button>
</div>
</form>
</div>
</igx-step>
<igx-step #step1 (activeChange)="activeStepChange($event)" [completed]="true">
<igx-icon igxStepIndicator>place</igx-icon>
<span igxStepTitle>Delivery Address</span>
<span igxStepSubTitle>(Required)</span>
<div igxStepContent class="sample-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum eos asperiores, doloribus reiciendis, esse
earum, iusto expedita rem quo mollitia voluptatem quas saepe quia! Rem illum quo officia eum quisquam?
</div>
</igx-step>

<igx-step *ngIf="displayStep"></igx-step>

<igx-step #step2 [active]="true" (activeChange)="activeStepChange($event)" [isValid]="form2.form.valid"
[completed]="form2.form.valid && stepper.linear">

<div igxStepIndicator>
<igx-avatar src="https://www.infragistics.com/angular-demos/assets/images/men/1.jpg"
[roundShape]="true"></igx-avatar>
<igx-badge icon="check" type="success"></igx-badge>
</div>

<span igxStepTitle>User Details</span>
<span igxStepSubTitle>(Requred)</span>
<div igxStepContent class="sample-body">
<form #form2="ngForm">
<igx-input-group>
<input igxInput name="password" type="password" [(ngModel)]="user1.password" required />
<label igxLabel for="password">Password</label>
</igx-input-group>

<igx-input-group>
<input igxInput name="phone" type="tel" [(ngModel)]="user1.phone" required />
<label igxLabel for="phone">Phone</label>
</igx-input-group>

<igx-input-group>
<input igxInput name="dateOfBirth" type="date" [(ngModel)]="user1.dateOfBirth" />
<label igxLabel for="dateOfBirth">Date of Birth</label>
</igx-input-group>

<div class="nav-buttons">
<button igxButton="outlined" (click)="stepper.prev()">PREV</button>
<button igxButton="outlined" (click)="stepper.next()">NEXT</button>
</div>
</form>
</div>
</igx-step>

<igx-step #step3 [disabled]="true" (activeChange)="activeStepChange($event)" [isValid]="form3.form.valid">
<igx-icon igxStepIndicator>attach_money</igx-icon>
<span igxStepTitle>Payment method</span>
<span igxStepSubTitle>Currently you can pay only cash</span>
<div igxStepContent class="sample-body">
<form #form3="ngForm">
<igx-input-group>
<input igxInput name="firstName" type="text" [(ngModel)]="user2.firstName" required />
<label igxLabel for="firstName">First Name</label>
</igx-input-group>

<igx-input-group>
<input igxInput name="lastName" type="text" [(ngModel)]="user2.lastName" />
<label igxLabel for="lastName">Last Name</label>
</igx-input-group>
<igx-time-picker></igx-time-picker>

<div class="nav-buttons">
<button igxButton="outlined" (click)="stepper.prev()">PREV</button>
<button igxButton="outlined" (click)="stepper.next()" [disabled]="!form3.form.valid">NEXT
</button>
</div>
</form>
</div>
</igx-step>

<igx-step #step4 (activeChange)="activeStepChange($event)" [isValid]="user3.valid"
[completed]="user3.valid && stepper.linear">
<igx-icon igxStepIndicator>notes</igx-icon>
<span igxStepTitle>Additional notes</span>
<span igxStepSubTitle>{{stepper.linear === true ? '(Required)' : 'Optional'}}</span>
<div igxStepContent class="sample-body">
<form [formGroup]="user3">
<div>
<igx-input-group>
<input igxInput name="fullName" type="text" formControlName="fullName" />
<label igxLabel for="fullName">Full Name</label>
<igx-suffix>
<igx-icon>person</igx-icon>
</igx-suffix>
</igx-input-group>
<igx-input-group>
<label igxLabel for="email">Email address</label>
<input igxInput name="email" type="email" formControlName="email" />
<igx-suffix>
<igx-icon>email</igx-icon>
</igx-suffix>
</igx-input-group>

<igx-select [placeholder]="'Pick One'">
<igx-select-item [value]="'Apple'" [disabled]="true">Apple</igx-select-item>
<igx-select-item [value]="'Orange'">Orange</igx-select-item>
<igx-select-item [value]="'Grapes'">Grapes</igx-select-item>
<igx-select-item [value]="'Banana'">Banana</igx-select-item>
</igx-select>
</div>
<div class="nav-buttons">
<button igxButton="outlined" (click)="stepper.prev()">PREV</button>
<button igxButton="outlined" (click)="stepper.next()"
[disabled]="!user3.valid && stepper.linear">NEXT
</button>
</div>
</form>
</div>
</igx-step>

<igx-step #step5 (activeChange)="activeStepChange($event)" [isValid]="user4.valid">
<igx-icon igxStepIndicator>receipt_long</igx-icon>
<span igxStepTitle>Finish order</span>
<span igxStepSubTitle>(#12542653)</span>
<div igxStepContent class="sample-body">
<form [formGroup]="user4">
<div>
<igx-time-picker name="dateTime" formControlName="dateTime"></igx-time-picker>
<igx-input-group>
<igx-prefix>+359</igx-prefix>
<label igxLabel for="phone">Phone</label>
<input igxInput name="phone" type="text" formControlName="phone" />
<igx-suffix>
<igx-icon>phone</igx-icon>
</igx-suffix>
<igx-hint position="start">Ex.: +359 888 123 456</igx-hint>
</igx-input-group>
</div>
<div class="nav-buttons">
<button igxButton="outlined" (click)="stepper.prev()">PREV</button>
<button igxButton="outlined" [disabled]="!user4.valid">Submit</button>
</div>
</form>
</div>
</igx-step>
</igx-stepper>
</div>

<div class="sample-actions">
<button igxButton="outlined" (click)="stepper.contentTop = !stepper.contentTop">change horizontal content
position</button>
<button igxButton="outlined" (click)="stepper.navigateTo(2)">navigate to third</button>
<button igxButton="outlined" (click)="stepper.reset()">reset</button>
<igx-switch [(ngModel)]="stepper.linear">Linear</igx-switch>
<igx-switch [(ngModel)]="displayStep">Display Step</igx-switch>
</div>
42 changes: 42 additions & 0 deletions src/app/stepper/stepper.sample.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
.sample-actions {
margin: 20px 0;
display: flex;
gap: 25px;

p {
margin-top: 0;
margin-bottom: 4px;
font-size: 14px;
}

button {
align-self: center;
}

&__btg {
width: 250px;
}
}

igx-badge {
position: absolute;
top: -6px;
right: -6px;
width: 16px;
height: 16px;
min-width: 0;
}

.nav-buttons {
margin: 40px 0;

> * {
margin-right: 16px;
}
}

.sample-stepper-wrapper {
margin: 16px 0;
padding: 16px;
border: 1px solid rgba(54, 54, 54, .43);
}
Loading

0 comments on commit 45c8c9c

Please sign in to comment.