diff --git a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-component.scss index 02bf77c1462..ff96d643b53 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-component.scss @@ -31,8 +31,12 @@ @extend %igx-stepper__step-content !optional; } - @include e(step, $m: active) { - @extend %igx-stepper__step--active !optional; + @include e(step-content-wrapper) { + @extend %igx-stepper__step-content-wrapper !optional; + } + + @include e(step, $m: current) { + @extend %igx-stepper__step--current !optional; } @include e(step, $m: skip) { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss index 1250e3b5801..11823239d6c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss @@ -23,13 +23,11 @@ $title-color: null, $subtitle-color: null, $incomplete-color: null, - //$complete-color: null, - //$error-color: null, - //$optional-color: null, - //$current-color: null, - //$disabled-color: null, + $current-color: null, + $step-line: null, + $complete-step-line: null, ) { - $name: 'igx-switch'; + $name: 'igx-stepper'; $switch-schema: (); @if map-has-key($schema, $name) { @@ -43,10 +41,14 @@ @return extend($theme, ( name: $name, palette: $palette, + step-hover-background: $step-hover-background, title-color: $title-color, subtitle-color: $subtitle-color, incomplete-color: $incomplete-color, + current-color: $current-color, + step-line: $step-line, + complete-step-line: $complete-step-line, )); } @@ -59,6 +61,9 @@ $variant: map-get($theme, variant); + $dashed-border: #fff; + $dashed-border-size: rem(20px) rem(1px); + $left: if-ltr(left, right); $right: if-ltr(right, left); @@ -72,7 +77,6 @@ %stepper-display { flex-direction: column; width: 100%; - overflow: hidden; } %igx-stepper__header { @@ -81,37 +85,55 @@ } %igx-stepper__body { - overflow: hidden; position: relative } + %stepper-display, + %igx-stepper__body, + %igx-stepper__step-header, + %igx-stepper__title-wrapper { + overflow: hidden; + } + %igx-stepper__step { position: relative; flex-direction: column; align-content: center; justify-content: center; + align-self: flex-start; &:last-of-type { - &::before { - display: none; + %igx-stepper__step-content-wrapper { + &::before { + display: none; + } } } } %igx-stepper__step-header { - padding: rem(24px); display: flex; - align-content: center; + align-items: center; + padding: rem(24px); + position: relative; + + igx-icon, + igx-avatar, + igx-badge, + igx-circular-bar, + [igxbutton] { + max-height: rem(24px); + max-width: rem(24px); + } &:hover { - //background: --var($theme, 'title-color'); - background: rgba(255, 255, 255, .1); + background: --var($theme, 'step-hover-background'); } } - %igx-stepper__step--active { + %igx-stepper__step--current { %igx-stepper__step-icon { - color: #4dff12; + color: --var($theme, 'current-color'); } } @@ -131,21 +153,6 @@ cursor: default; } - %igx-stepper__step-content { - margin-#{$left}: rem(36px); - position: relative; - - &::before { - content: ''; - position: absolute; - top: rem(-16px); - bottom: rem(-16px); - #{$left}: rem(0); - width: rem(1px); - background: #999; - } - } - %igx-stepper__body-content { display: block; position: absolute; @@ -160,7 +167,7 @@ z-index: -1; } - %igx-stepper__step-content, + %igx-stepper__step-content-wrapper, %igx-stepper__body-content { padding: 0 rem(24px) rem(24px) rem(24px); } @@ -170,8 +177,23 @@ position: relative; } + %igx-stepper__step-content-wrapper { + margin-#{$left}: rem(36px); + position: relative; + + &::before { + content: ''; + position: absolute; + top: rem(-16px); + bottom: rem(-16px); + #{$left}: rem(0); + width: rem(1px); + background: #999; + } + } + %igx-stepper__step-icon { - color: #09f; + color: --var($theme, 'incomplete-color'); margin-#{$right}: rem(12px); } @@ -185,16 +207,14 @@ %igx-stepper__title-wrapper { width: 100%; - overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: rem(50px); } %igx-stepper__title { - color: #fff; + color: --var($theme, 'title-color'); text-overflow: ellipsis; - overflow: hidden; } %igx-stepper__title--top { @@ -211,23 +231,22 @@ } %igx-stepper__step { + position: relative; + overflow: hidden; flex-direction: row; flex-grow: 1; - &::after { + &::after, + &::before { content: ''; width: auto; - height: 1px; flex: 1; - top: rem(-13px); + top: rem(36px); position: relative; - align-self: center; - background: #999; + border-top: rem(1px) solid --var($theme, 'step-line'); } &:last-of-type { - flex-basis: 0; - %igx-stepper__step-header::after, &::after { display: none; @@ -235,7 +254,8 @@ } &:first-of-type { - %igx-stepper__step-header::before { + %igx-stepper__step-header::before, + &::before { display: none; } } @@ -244,11 +264,9 @@ %igx-stepper__step-header { display: flex; flex-direction: column; - justify-content: center; + justify-content: flex-start; align-items: center; - position: relative; padding: rem(24px) rem(32px); - margin: 0 rem(8px); cursor: pointer; &::before, @@ -256,8 +274,7 @@ top: rem(36px); content: ''; position: absolute; - height: rem(1px); - background: #999; + border-top: rem(1px) solid --var($theme, 'step-line'); width: calc(50% - 16px); } @@ -279,6 +296,10 @@ %igx-stepper__step-icon { margin: 0; } + + %igx-stepper__step-content-wrapper { + text-align: center; + } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_stepper.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_stepper.scss index 50b152af17e..34cae3b34ca 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_stepper.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_stepper.scss @@ -26,7 +26,19 @@ $_light-stepper: ( incomplete-color: ( igx-color: ('grays', 400) - ) + ), + + current-color: ( + igx-color: ('primary', 500) + ), + + step-line: ( + igx-color: ('grays', 200) + ), + + complete-step-line: ( + igx-color: ('grays', 900) + ), ); /// Generates a fluent stepper schema. diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss index c066145e58b..37a12ac5c8f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss @@ -33,6 +33,7 @@ @import '../components/slider/slider-theme'; @import '../components/snackbar/snackbar-theme'; @import '../components/switch/switch-theme'; +@import '../components/stepper/stepper-theme'; @import '../components/tabs/tabs-theme'; @import '../components/time-picker/time-picker-theme'; @import '../components/toast/toast-theme'; diff --git a/projects/igniteui-angular/src/lib/stepper/igx-stepper.component.ts b/projects/igniteui-angular/src/lib/stepper/igx-stepper.component.ts index 38806cbe395..e327003b991 100644 --- a/projects/igniteui-angular/src/lib/stepper/igx-stepper.component.ts +++ b/projects/igniteui-angular/src/lib/stepper/igx-stepper.component.ts @@ -2,13 +2,12 @@ import { AnimationBuilder } from '@angular/animations'; import { CommonModule } from '@angular/common'; import { AfterViewInit, Component, HostBinding, OnDestroy, OnInit, - Input, Output, EventEmitter, ContentChildren, QueryList, ElementRef, NgModule, ChangeDetectorRef + Input, Output, EventEmitter, ContentChildren, QueryList, ElementRef, NgModule } from '@angular/core'; -import { IgxCarouselComponentBase } from 'igniteui-angular'; +import {IgxCarouselComponentBase, IgxRippleModule} from 'igniteui-angular'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { growVerIn, growVerOut } from '../animations/grow'; -import { slideInLeft, slideOutRight } from '../animations/slide'; import { ToggleAnimationSettings } from '../expansion-panel/toggle-animation-component'; import { IgxStepperOrienatation, IGX_STEPPER_COMPONENT, IStepToggledEventArgs, IStepTogglingEventArgs } from './common'; import { @@ -40,11 +39,11 @@ export class IgxStepperComponent extends IgxCarouselComponentBase implements OnI return this.orientation === IgxStepperOrienatation.Horizontal; } - /** Get/Set the animation settings that branches should use when expanding/collpasing. + /** Get/Set the animation settings that should be used when the active step is changed in vertical orientation mode. * * ```html - * - * + * + * * ``` * * ```typescript @@ -53,15 +52,45 @@ export class IgxStepperComponent extends IgxCarouselComponentBase implements OnI * closeAnimation: growVerOut * }; * - * this.tree.animationSettings = animationSettings; + * this.stepper.verticalAnimationSettings = animationSettings; * ``` */ @Input() - public animationSettings: ToggleAnimationSettings = { + public verticalAnimationSettings: ToggleAnimationSettings = { openAnimation: growVerIn, - closeAnimation: growVerOut + closeAnimation: growVerOut, }; + /** + * Gets/sets the animation type of the stepper when the orientation direction is horizontal. + * Default value is `slide`. Another possible values are `none` and `fade`. + * ```html + * + * + * ``` + * + * @memberOf IgxSlideComponent + */ + @Input() + public get horizontalAnimationType(): string { + return this.animationType; + } + + public set horizontalAnimationType(value: string) { + // TODO: activeChange event is not emitted for the collapsing steps + this.stepperService.collapsingSteps.clear(); + this.animationType = value; + } + + @Input() + public get horizontalAnimationDuration(): number { + return this.animationDuration; + } + + public set horizontalAnimationDuration(value: number) { + this.animationDuration = value; + } + /** * Get/Set whether the stepper is linear. * Only if the active step is valid the user is able to move forward. @@ -89,17 +118,7 @@ export class IgxStepperComponent extends IgxCarouselComponentBase implements OnI if (this._orientation === value) { return; } - if (value === IgxStepperOrienatation.Horizontal) { - this.animationSettings = { - openAnimation: slideInLeft, - closeAnimation: slideOutRight - }; - } else { - this.animationSettings = { - openAnimation: growVerIn, - closeAnimation: growVerOut - }; - } + // TODO: activeChange event is not emitted for the collapsing steps this.stepperService.collapsingSteps.clear(); this._orientation = value; @@ -226,7 +245,8 @@ export class IgxStepperComponent extends IgxCarouselComponentBase implements OnI @NgModule({ imports: [ - CommonModule + CommonModule, + IgxRippleModule ], declarations: [ IgxStepComponent, diff --git a/projects/igniteui-angular/src/lib/stepper/step/igx-step.component.html b/projects/igniteui-angular/src/lib/stepper/step/igx-step.component.html index 99dadc24335..67289c10a5f 100644 --- a/projects/igniteui-angular/src/lib/stepper/step/igx-step.component.html +++ b/projects/igniteui-angular/src/lib/stepper/step/igx-step.component.html @@ -8,7 +8,7 @@ -
+
@@ -16,5 +16,8 @@
- +
+ +
+ diff --git a/projects/igniteui-angular/src/lib/stepper/step/igx-step.component.ts b/projects/igniteui-angular/src/lib/stepper/step/igx-step.component.ts index 2c40aa0f228..654f7b56d52 100644 --- a/projects/igniteui-angular/src/lib/stepper/step/igx-step.component.ts +++ b/projects/igniteui-angular/src/lib/stepper/step/igx-step.component.ts @@ -45,7 +45,7 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements OnInit, A /** @hidden @internal */ public get animationSettings(): ToggleAnimationSettings { - return this.stepper.animationSettings; + return this.stepper.verticalAnimationSettings; } /** @@ -288,7 +288,9 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements OnInit, A public ngOnInit() { this.openAnimationDone.pipe(takeUntil(this.destroy$)).subscribe( () => { - this.stepper.activeStepChanged.emit({ owner: this.stepper, activeStep: this }); + if (this.stepperService.activeStep === this) { + this.stepper.activeStepChanged.emit({ owner: this.stepper, activeStep: this }); + } } ); this.closeAnimationDone.pipe(takeUntil(this.destroy$)).subscribe(() => { @@ -310,7 +312,7 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements OnInit, A public get stepHeaderClasses() { if (this.active) { - return 'igx-stepper__step--active'; + return 'igx-stepper__step--current'; } if (this.disabled) { return 'igx-stepper__step--disabled'; @@ -352,11 +354,42 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements OnInit, A */ public onPointerDown(event) { event.stopPropagation(); - this.stepperService.expand(this); + if (this.isHorizontal) { + this.changeHorizontalActiveStep(); + } else { + this.changeVerticalActiveStep(); + } } public ngOnDestroy() { super.ngOnDestroy(); } + private changeHorizontalActiveStep(): void { + // pointer events none on active step and remove this.stepperService.activeStep !== this on the next line + if (this.stepper.animationType === 'none' && this.stepperService.activeStep !== this) { + this.active = true; + this.stepper.activeStepChanged.emit({ owner: this.stepper, activeStep: this }); + return; + } + this.stepperService.expand(this); + if (this.stepper.animationType === 'fade') { + if (this.stepperService.collapsingSteps.has(this.stepperService.previousActiveStep)) { + this.stepperService.previousActiveStep.active = false; + } + } + } + + private changeVerticalActiveStep(): void { + this.stepperService.expand(this); + + if (!this.animationSettings.closeAnimation) { + this.stepperService.previousActiveStep.openAnimationPlayer?.finish(); + } + + if (!this.animationSettings.openAnimation) { + this.stepperService.activeStep.closeAnimationPlayer?.finish(); + } + } + } diff --git a/src/app/stepper/stepper.sample.html b/src/app/stepper/stepper.sample.html index 9e25d090cd6..93694906c06 100644 --- a/src/app/stepper/stepper.sample.html +++ b/src/app/stepper/stepper.sample.html @@ -1,31 +1,52 @@ - - - +
+ + + + +
+

Vertical Animation Settings

+ + +
+
+

Horizontal Animation Type

+ + +
+ + + + ms + +
+ + done
Test me daddy
 - - calendar_today + + - - alarm + + - - check_circle + + Apple @@ -35,19 +56,13 @@ - - delete + +
- -
- - - - -
- diff --git a/src/app/stepper/stepper.sample.scss b/src/app/stepper/stepper.sample.scss index 9d5295a8da6..0502b0b7f1f 100644 --- a/src/app/stepper/stepper.sample.scss +++ b/src/app/stepper/stepper.sample.scss @@ -1,5 +1,20 @@ .sample-actions { - margin-top: 20px; + margin: 20px 0; display: flex; - align-items: center; + gap: 25px; + + p { + margin-top: 0; + margin-bottom: 4px; + font-size: 14px; + } + + button { + align-self: center; + } + + &__btg { + width: 250px; + } } + diff --git a/src/app/stepper/stepper.sample.ts b/src/app/stepper/stepper.sample.ts index 9c93f2a8ebc..65c848c0467 100644 --- a/src/app/stepper/stepper.sample.ts +++ b/src/app/stepper/stepper.sample.ts @@ -1,4 +1,6 @@ -import { AfterViewInit, Component, ViewChild } from '@angular/core'; +import { AfterViewInit, ChangeDetectorRef, Component, ViewChild } from '@angular/core'; +import { growVerIn, growVerOut, slideInLeft, slideOutRight } from 'igniteui-angular'; +import { ToggleAnimationSettings } from 'projects/igniteui-angular/src/lib/expansion-panel/toggle-animation-component'; import { IgxStepperOrienatation } from 'projects/igniteui-angular/src/lib/stepper/common'; import { IgxStepperComponent } from 'projects/igniteui-angular/src/lib/stepper/igx-stepper.component'; @@ -8,6 +10,12 @@ import { IgxStepperComponent } from 'projects/igniteui-angular/src/lib/stepper/i }) export class IgxStepperSampleComponent implements AfterViewInit { @ViewChild('stepper', { static: true }) public stepper: IgxStepperComponent; + public animationType = 'slide'; + public animationSettings: ToggleAnimationSettings = { + openAnimation: growVerIn, + closeAnimation: growVerOut + }; + public animationDuration = 320; // public stepType = IgxStepType.Full; // public labelPos = IgxStepperLabelPosition.Bottom; // public stepTypes = [ @@ -25,26 +33,58 @@ export class IgxStepperSampleComponent implements AfterViewInit { // { label: 'Start', labelPos: IgxStepperLabelPosition.Start, // selected: this.labelPos === IgxStepperLabelPosition.Start, togglable: true } // ]; + public horizontalAnimationTypes = []; + + public verticalAnimations = []; + + constructor(private cdr: ChangeDetectorRef) { + this.horizontalAnimationTypes = [ + { label: 'slide', animationType: 'slide', selected: this.animationType === 'slide', togglable: true }, + { label: 'fade', animationType: 'fade', selected: this.animationType === 'fade', togglable: true }, + { label: 'none', animationType: 'none', selected: this.animationType === 'none', togglable: true } + ]; + this.verticalAnimations = [ + { + label: 'default', + animationSettings: { openAnimation: growVerIn, closeAnimation: growVerOut }, + selected: this.animationSettings.openAnimation === growVerIn, + togglable: true + }, + { + label: 'custom', + animationSettings: { openAnimation: slideInLeft, closeAnimation: slideOutRight }, + selected: this.animationSettings.openAnimation === slideOutRight, + togglable: true + } + ]; + } + public ngAfterViewInit() { - // requestAnimationFrame(() => { - // this.stepper.steps[1].completedStyle = IgxStepperProgressLine.Dashed; - // }); } + // public toggleStepTypes(event){ // this.stepType = this.stepTypes[event.index].stepType; // } + + public toggleHorizontalAnimations(event) { + this.animationType = this.horizontalAnimationTypes[event.index].animationType; + } + + public toggleVerticalAnimations(event) { + this.animationSettings = this.verticalAnimations[event.index].animationSettings; + } // public toggleLabelPos(event){ // this.labelPos = this.labelPositions[event.index].labelPos; // } - public activeChanged(event, step) { - console.log('ACTIVE CHANGED'); - console.log(event, step); + + public activeChanged(event) { + console.log('GOLQM ACTIVE CHANGED'); + // console.log(event); } - public activeStepChanged(ev) { - console.log('ACTIVE STEP CHANGED'); - console.log(ev); + public activeStepChange(ev) { + console.log('MALUK CHANGE', ev); } public activeStepChanging(ev) {