diff --git a/src/app/app.component.ts b/src/app/app.component.ts index d4100bff3c6..13260d3399e 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -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', diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2aafc090715..f4e87a04e83 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -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, @@ -288,7 +289,8 @@ const components = [ GridNestedPropsSampleComponent, IgxColumnGroupingDirective, GridColumnTypesSampleComponent, - GridLocalizationSampleComponent + GridLocalizationSampleComponent, + IgxStepperSampleComponent ]; @NgModule({ diff --git a/src/app/app.routing.ts b/src/app/app.routing.ts index bf008995af1..43e61f20dd1 100644 --- a/src/app/app.routing.ts +++ b/src/app/app.routing.ts @@ -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 = [ { @@ -446,6 +447,10 @@ const appRoutes = [ { path: 'pagination', Comment: PaginationSampleComponent + }, + { + path: 'stepper', + component: IgxStepperSampleComponent } ]; diff --git a/src/app/routing.ts b/src/app/routing.ts index 2bb4e35eaa4..52ce8e27d16 100644 --- a/src/app/routing.ts +++ b/src/app/routing.ts @@ -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 = [ { @@ -598,6 +599,10 @@ const appRoutes = [ },{ path: 'pagination', component: PaginationSampleComponent + }, + { + path: 'stepper', + component: StepperSampleComponent } ]; diff --git a/src/app/stepper/stepper.sample.html b/src/app/stepper/stepper.sample.html new file mode 100644 index 00000000000..00b7bae344a --- /dev/null +++ b/src/app/stepper/stepper.sample.html @@ -0,0 +1,224 @@ +
+ +
+

Vertical Animation Type

+ + +
+
+

Horizontal Animation Type

+ + +
+ + + + ms + +
+
+ Set Title Position +
+

Title Position

+ + +
+
+

Step Type

+ +
+
+ +
+ + + + edit + + + + + + + + shopping_cart + Shopping Card + {{stepper.linear === true ? '(Required)' : 'Optional'}} +
+
+ + + + + + + + + + +
+ +
+
+
+ + + place + Delivery Address + (Required) +
+ 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? +
+ + + + + + +
+ + +
+ + User Details + (Requred) +
+
+ + + + + + + + + + + + + + + +
+ + +
+
+
+ + + + attach_money + Payment method + Currently you can pay only cash +
+
+ + + + + + + + + + + +
+ + +
+
+
+ + + + notes + Additional notes + {{stepper.linear === true ? '(Required)' : 'Optional'}} +
+
+
+ + + + + person + + + + + + + email + + + + + Apple + Orange + Grapes + Banana + +
+
+ + +
+
+
+ + + + receipt_long + Finish order + (#12542653) +
+
+
+ + + +359 + + + + phone + + Ex.: +359 888 123 456 + +
+
+ + +
+
+
+ + +
+ +
+ + + + Linear + Display Step +
diff --git a/src/app/stepper/stepper.sample.scss b/src/app/stepper/stepper.sample.scss new file mode 100644 index 00000000000..d21544f68ad --- /dev/null +++ b/src/app/stepper/stepper.sample.scss @@ -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); +} diff --git a/src/app/stepper/stepper.sample.ts b/src/app/stepper/stepper.sample.ts new file mode 100644 index 00000000000..bee6bc8ba81 --- /dev/null +++ b/src/app/stepper/stepper.sample.ts @@ -0,0 +1,171 @@ +import { AfterViewInit, ChangeDetectorRef, Component, ViewChild } from '@angular/core'; +import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; +import { HorizontalAnimationType } from 'projects/igniteui-angular/src/lib/carousel/carousel-base'; +import { + IgxStepperTitlePosition, IgxStepperOrientation, IgxStepType, VerticalAnimationType +} from 'projects/igniteui-angular/src/lib/stepper/stepper.common'; +import { IgxStepperComponent } from 'projects/igniteui-angular/src/lib/stepper/stepper.component'; + +@Component({ + templateUrl: 'stepper.sample.html', + styleUrls: ['stepper.sample.scss'] +}) +export class IgxStepperSampleComponent implements AfterViewInit { + @ViewChild('stepper', { static: true }) public stepper: IgxStepperComponent; + public displayStep = false; + public horizontalAnimationType: HorizontalAnimationType = 'slide'; + public verticalAnimationType: VerticalAnimationType = 'grow'; + public animationDuration = 320; + public stepType: IgxStepType = IgxStepType.Full; + public titlePos: IgxStepperTitlePosition = IgxStepperTitlePosition.Bottom; + public setTitlePos = false; + public stepTypes = []; + public titlePositions = []; + public horizontalAnimationTypes = []; + public verticalAnimationTypes = []; + + public user = { + firstName: 'John', + lastName: 'Doe' + }; + + public user1 = { + password: '1337s3cr3t', + phone: '', + dateOfBirth: new Date('07 July, 1987') + }; + + public user2 = { + firstName: 'Sam', + lastName: '' + }; + + public user3: FormGroup; + public user4: FormGroup; + + constructor(private cdr: ChangeDetectorRef, fb: FormBuilder) { + this.stepTypes = [ + { + label: 'Indicator', stepType: IgxStepType.Indicator, + selected: this.stepType === IgxStepType.Indicator, togglable: true + }, + { + label: 'Title', stepType: IgxStepType.Title, + selected: this.stepType === IgxStepType.Title, togglable: true + }, + { + label: 'Full', stepType: IgxStepType.Full, + selected: this.stepType === IgxStepType.Full, togglable: true + } + ]; + + this.titlePositions = [ + { + label: 'Bottom', titlePos: IgxStepperTitlePosition.Bottom, + selected: this.titlePos === IgxStepperTitlePosition.Bottom, togglable: true + }, + { + label: 'Top', titlePos: IgxStepperTitlePosition.Top, + selected: this.titlePos === IgxStepperTitlePosition.Top, togglable: true + }, + { + label: 'End', titlePos: IgxStepperTitlePosition.End, + selected: this.titlePos === IgxStepperTitlePosition.End, togglable: true + }, + { + label: 'Start', titlePos: IgxStepperTitlePosition.Start, + selected: this.titlePos === IgxStepperTitlePosition.Start, togglable: true + } + ]; + + this.horizontalAnimationTypes = [ + { + label: 'slide', horizontalAnimationType: HorizontalAnimationType.slide, + selected: this.horizontalAnimationType === HorizontalAnimationType.slide, togglable: true + }, + { + label: 'fade', horizontalAnimationType: HorizontalAnimationType.fade, + selected: this.horizontalAnimationType === HorizontalAnimationType.fade, togglable: true + }, + { + label: 'none', horizontalAnimationType: HorizontalAnimationType.none, + selected: this.horizontalAnimationType === HorizontalAnimationType.none, togglable: true + } + ]; + + this.verticalAnimationTypes = [ + { + label: 'grow', verticalAnimationType: VerticalAnimationType.Grow, + selected: this.verticalAnimationType === VerticalAnimationType.Grow, togglable: true + }, + { + label: 'fade', verticalAnimationType: VerticalAnimationType.Fade, + selected: this.verticalAnimationType === VerticalAnimationType.Fade, togglable: true + }, + { + label: 'none', verticalAnimationType: VerticalAnimationType.None, + selected: this.verticalAnimationType === VerticalAnimationType.None, togglable: true + } + ]; + + this.user3 = fb.group({ + fullName: new FormControl('', Validators.required), + email: ['', Validators.required] + }); + + this.user4 = fb.group({ + phone: ['', Validators.required], + dateTime: [''] + }); + } + + public ngAfterViewInit() { + } + + public toggleStepTypes(event) { + this.stepType = this.stepTypes[event.index].stepType; + } + + public toggleHorizontalAnimations(event) { + this.horizontalAnimationType = this.horizontalAnimationTypes[event.index].horizontalAnimationType; + } + + public toggleVerticalAnimations(event) { + this.verticalAnimationType = this.verticalAnimationTypes[event.index].verticalAnimationType; + } + + public setTitlePosition(event) { + this.setTitlePos = event.checked; + this.stepper.titlePosition = event.checked ? this.titlePos : null; + } + + public toggleTitlePos(event) { + this.titlePos = this.titlePositions[event.index].titlePos; + if (this.setTitlePos) { + this.stepper.titlePosition = this.titlePos; + } + } + + public activeChanged(event) { + console.log('GOLQM ACTIVE CHANGED'); + // console.log(event); + } + + public activeStepChange(ev) { + console.log('MALUK CHANGE', ev); + } + + public activeStepChanging(ev) { + console.log('ACTIVE STEP CHANGING'); + // ev.cancel = true; + console.log(ev); + } + + public changeOrientation() { + if (this.stepper.orientation === IgxStepperOrientation.Horizontal) { + this.stepper.orientation = IgxStepperOrientation.Vertical; + } else { + this.stepper.orientation = IgxStepperOrientation.Horizontal; + } + } +}