refactor(stepper): scope styles to component

projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss

@@ -608,13 +608,13 @@
         @include tabs($tabs-theme-map);
     }
 
-    @if is-used('igx-stepper', $exclude) {
-        $stepper-theme-map: stepper-theme(
-            $schema: $schema,
-        );
-        $stepper-theme-map: meta.call($theme-handler, $stepper-theme-map);
-        @include stepper($stepper-theme-map);
-    }
+    //@if is-used('igx-stepper', $exclude) {
+    //    $stepper-theme-map: stepper-theme(
+    //        $schema: $schema,
+    //    );
+    //    $stepper-theme-map: meta.call($theme-handler, $stepper-theme-map);
+    //    @include stepper($stepper-theme-map);
+    //}
 
     // @if is-used('igx-toast', $exclude) {
     //     $toast-theme-map: toast-theme(

projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss

@@ -107,7 +107,7 @@
         header-hour: 'h4',
         selected-time: 'h4'
     ));
-    @include stepper-typography();
+    //@include stepper-typography();
     // @include toast-typography();
     @include tooltip-typography();
     @include tree-typography();

projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss

@@ -111,7 +111,7 @@
         label: 'body-2'
     ));
     @include time-picker-typography();
-    @include stepper-typography();
+    //@include stepper-typography();
     // @include toast-typography($categories: (
     //     text: 'caption'
     // ));

projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss

@@ -112,12 +112,12 @@
         header-hour: 'h5',
         selected-time: 'h6'
     ));
-    @include stepper-typography($categories: (
-        title: 'body-2',
-        subtitle: 'caption',
-        indicator: 'button',
-        body-content: 'body-2'
-    ));
+    //@include stepper-typography($categories: (
+    //    title: 'body-2',
+    //    subtitle: 'caption',
+    //    indicator: 'button',
+    //    body-content: 'body-2'
+    //));
     // @include toast-typography();
     @include tooltip-typography($categories: (
         tooltip-text: 'subtitle-2'

projects/igniteui-angular/src/lib/core/styles/typography/_material.scss

@@ -62,7 +62,7 @@
     @include switch-typography();
     @include tabs-typography();
     @include time-picker-typography();
-    @include stepper-typography();
+    //@include stepper-typography();
     // @include toast-typography();
     @include tooltip-typography();
     @include tree-typography();

projects/igniteui-angular/src/lib/stepper/step/step.component.html

@@ -23,22 +23,23 @@
     <ng-content select="[igxStepIndicator]"></ng-content>
 </ng-template>
 
-<div class="igx-stepper__step-header" igxRipple [ngClass]="stepHeaderClasses" (keydown)="handleKeydown($event)"
-    (click)="onPointerDown($event)">
+<div class="igx-step__header igx-step-header" igxRipple (keydown)="handleKeydown($event)"
+     [ngClass]="stepHeaderClasses"
+     (click)="onPointerDown($event)">
 
     @if (isIndicatorVisible) {
-        <div class="igx-stepper__step-indicator">
+        <div class="igx-step__indicator igx-step-header__indicator">
             <ng-container *ngTemplateOutlet="indicatorTemplate ? indicatorTemplate : defaultIndicator"></ng-container>
         </div>
     }
 
-    <div class="igx-stepper__step-title-wrapper">
+    <div class="igx-step__title-wrapper">
         <ng-container *ngTemplateOutlet="defaultTitle"></ng-container>
     </div>
 </div>
 
 @if (!isHorizontal) {
-    <div class="igx-stepper__step-content-wrapper">
+    <div class="igx-step__content-wrapper">
         <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
     </div>
 }

projects/igniteui-angular/src/lib/stepper/step/step.component.scss

@@ -0,0 +1,2 @@
+@use 'themes/base';
+@use 'themes/shared';

projects/igniteui-angular/src/lib/stepper/step/step.component.ts

@@ -15,7 +15,8 @@ import {
     Output,
     Renderer2,
     TemplateRef,
-    ViewChild
+    ViewChild,
+    ViewEncapsulation
 } from '@angular/core';
 import { takeUntil } from 'rxjs/operators';
 import { Direction, IgxSlideComponentBase } from '../../carousel/carousel-base';
@@ -54,6 +55,8 @@ let NEXT_ID = 0;
 @Component({
     selector: 'igx-step',
     templateUrl: 'step.component.html',
+    styleUrl: 'step.component.css',
+    encapsulation: ViewEncapsulation.None,
     providers: [
         { provide: IGX_STEP_COMPONENT, useExisting: IgxStepComponent }
     ],
@@ -121,7 +124,7 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements IgxStep,
      * ```
      */
     @Input({ transform: booleanAttribute })
-    @HostBinding('class.igx-stepper__step--completed')
+    @HostBinding('class.igx-step--completed')
     public completed = false;
 
     /**
@@ -215,11 +218,17 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements IgxStep,
     }
 
     /** @hidden @internal */
-    @HostBinding('class.igx-stepper__step')
+    @HostBinding('class.igx-step')
     public cssClass = true;
 
     /** @hidden @internal */
-    @HostBinding('class.igx-stepper__step--disabled')
+    @HostBinding('class.igx-step--vertical')
+    public get isVertical(): boolean {
+        return this.stepper.orientation === 'vertical';
+    }
+
+    /** @hidden @internal */
+    @HostBinding('class.igx-step--disabled')
     public get generalDisabled(): boolean {
         return this.disabled || this.linearDisabled;
     }
@@ -228,10 +237,35 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements IgxStep,
     @HostBinding('class')
     public get titlePositionTop(): string {
         if (this.stepper.stepType !== IgxStepType.Full) {
-            return 'igx-stepper__step--simple';
+            return 'igx-step--simple';
         }
 
-        return `igx-stepper__step--${this.titlePosition}`;
+        return `igx-step--${this.titlePosition}`;
+    }
+
+    /** @hidden @internal */
+    @HostBinding('class.igx-step--current')
+    public get isActive(): boolean {
+        return this.active;
+    }
+
+    /** @hidden @internal */
+    @HostBinding('class.igx-step--invalid')
+    public get isInvalid(): boolean {
+        return !this.isValid
+            && this.stepperService.visitedSteps.has(this)
+            && !this.active
+            && this.isAccessible;
+    }
+
+    /** @hidden @internal */
+    public get stepHeaderClasses(): { [key: string]: boolean } {
+        return {
+            'igx-step-header--invalid': this.isInvalid,
+            'igx-step-header--disabled': this.disabled || this.linearDisabled,
+            'igx-step-header--current': this.active,
+            'igx-step-header--completed': this.completed,
+        };
     }
 
     /**
@@ -317,6 +351,7 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements IgxStep,
     }
 
     /** @hidden @internal */
+    @HostBinding('class.igx-step--horizontal')
     public get isHorizontal(): boolean {
         return this.stepper.orientation === IgxStepperOrientation.Horizontal;
     }
@@ -360,17 +395,7 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements IgxStep,
         }
     }
 
-    /** @hidden @internal */
-    public get stepHeaderClasses(): any {
-        return {
-            'igx-stepper__step--optional': this.optional,
-            'igx-stepper__step-header--current': this.active,
-            'igx-stepper__step-header--invalid': !this.isValid
-                && this.stepperService.visitedSteps.has(this) && !this.active && this.isAccessible
-        };
-    }
-
-    /** @hidden @internal */
+/** @hidden @internal */
     public get nativeElement(): HTMLElement {
         return this.element.nativeElement;
     }