igniteui-webcomponents 7.0.1 → 7.1.0

package/components/stepper/stepper.d.ts

@@ -1,109 +1,154 @@
-import { LitElement } from 'lit';
+import { LitElement, type PropertyValues } from 'lit';
 import type { Constructor } from '../common/mixins/constructor.js';
 import type { HorizontalTransitionAnimation, StepperOrientation, StepperStepType, StepperTitlePosition, StepperVerticalAnimation } from '../types.js';
+import type { IgcStepperComponentEventMap } from './common/types.js';
 import IgcStepComponent from './step.js';
-import type { IgcStepperComponentEventMap } from './stepper.common.js';
 declare const IgcStepperComponent_base: Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcStepperComponentEventMap>> & Constructor<LitElement>;
 /**
- * IgxStepper provides a wizard-like workflow by dividing content into logical steps.
+ * A stepper component that provides a wizard-like workflow by dividing content into logical steps.
  *
  * @remarks
- * The stepper component allows the user to navigate between multiple steps.
- * It supports horizontal and vertical orientation as well as keyboard navigation and provides API methods to control the active step.
+ * The stepper component allows the user to navigate between multiple `igc-step` elements.
+ * It supports horizontal and vertical orientation, linear and non-linear navigation,
+ * keyboard navigation, and provides API methods to control the active step.
+ *
+ * In linear mode, the user can only advance to the next step if the current step is valid
+ * (not marked as `invalid`).
  *
  * @element igc-stepper
  *
- * @slot - Renders the step components inside default slot.
+ * @slot - Renders `igc-step` components inside the default slot.
+ *
+ * @fires igcActiveStepChanging - Emitted when the active step is about to change. Cancelable.
+ * @fires igcActiveStepChanged - Emitted after the active step has changed.
  *
- * @fires igcActiveStepChanging - Emitted when the active step is about to change.
- * @fires igcActiveStepChanged - Emitted when the active step is changed.
+ * @example
+ * ```html
+ * <igc-stepper>
+ *   <igc-step>
+ *     <span slot="title">Step 1</span>
+ *     <p>Step 1 content</p>
+ *   </igc-step>
+ *   <igc-step>
+ *     <span slot="title">Step 2</span>
+ *     <p>Step 2 content</p>
+ *   </igc-step>
+ * </igc-stepper>
+ * ```
+ *
+ * @example Linear stepper with vertical orientation
+ * ```html
+ * <igc-stepper orientation="vertical" linear>
+ *   <igc-step complete>
+ *     <span slot="title">Completed step</span>
+ *     <p>This step is already complete.</p>
+ *   </igc-step>
+ *   <igc-step active>
+ *     <span slot="title">Current step</span>
+ *     <p>Fill in the details to proceed.</p>
+ *   </igc-step>
+ *   <igc-step>
+ *     <span slot="title">Next step</span>
+ *     <p>Upcoming content.</p>
+ *   </igc-step>
+ * </igc-stepper>
+ * ```
  */
 export default class IgcStepperComponent extends IgcStepperComponent_base {
     static readonly tagName = "igc-stepper";
-    protected static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult;
     static register(): void;
-    private readonly keyDownHandlers;
-    private activeStep;
-    private _shouldUpdateLinearState;
+    private readonly _state;
+    private readonly _contextProvider;
+    private readonly _internals;
+    private readonly _slots;
+    private get _isHorizontal();
     /** Returns all of the stepper's steps. */
-    steps: Array<IgcStepComponent>;
-    /** Gets/Sets the orientation of the stepper.
+    get steps(): readonly IgcStepComponent[];
+    /**
+     * The orientation of the stepper.
      *
-     * @remarks
-     * Default value is `horizontal`.
+     * @attr orientation
+     * @default 'horizontal'
      */
     orientation: StepperOrientation;
-    /** Get/Set the type of the steps.
+    /**
+     * The visual type of the steps.
      *
-     * @remarks
-     * Default value is `full`.
+     * @attr step-type
+     * @default 'full'
      */
     stepType: StepperStepType;
     /**
-     * Get/Set whether the stepper is linear.
+     * Whether the stepper is linear.
      *
      * @remarks
      * If the stepper is in linear mode and if the active step is valid only then the user is able to move forward.
+     *
+     * @attr linear
+     * @default false
      */
     linear: boolean;
     /**
-     * Get/Set whether the content is displayed above the steps.
+     * Whether the content is displayed above the steps.
      *
-     * @remarks
-     * Default value is `false` and the content is below the steps.
+     * @attr content-top
+     * @default false
      */
     contentTop: boolean;
     /**
      * The animation type when in vertical mode.
+     *
      * @attr vertical-animation
+     * @default 'grow'
      */
     verticalAnimation: StepperVerticalAnimation;
     /**
      * The animation type when in horizontal mode.
+     *
      * @attr horizontal-animation
+     * @default 'slide'
      */
     horizontalAnimation: HorizontalTransitionAnimation;
     /**
-     * The animation duration in either vertical or horizontal mode.
+     * The animation duration in either vertical or horizontal mode in milliseconds.
+     *
      * @attr animation-duration
+     * @default 320
      */
     animationDuration: number;
     /**
-     * Get/Set the position of the steps title.
+     * The position of the steps title.
      *
      * @remarks
-     * The default value is auto.
      * When the stepper is horizontally orientated the title is positioned below the indicator.
-     * When the stepper is horizontally orientated the title is positioned on the right side of the indicator.
+     * When the stepper is vertically orientated the title is positioned on the right side of the indicator.
+     *
+     * @attr title-position
+     * @default 'auto'
      */
     titlePosition: StepperTitlePosition;
-    protected orientationChange(): void;
-    protected stepTypeChange(): void;
-    protected titlePositionChange(): void;
-    protected contentTopChange(): void;
-    protected linearChange(): void;
-    protected animationTypeChange(): void;
-    protected animationDurationChange(): void;
     constructor();
-    connectedCallback(): void;
-    private activateFirstStep;
-    private animateSteps;
-    private activateStep;
-    private changeActiveStep;
-    private moveToNextStep;
-    private handleKeydown;
-    private onHomeKey;
-    private onEndKey;
-    private onArrowDownKeyDown;
-    private onArrowUpKeyDown;
-    private onArrowRightKeyDown;
-    private onArrowLeftKeyDown;
-    private getNextStep;
-    private getPreviousStep;
-    private updateStepsLinearDisabled;
-    private updateAnimation;
-    private syncProperties;
-    private stepsChanged;
+    protected update(properties: PropertyValues<this>): void;
+    private _skipKeyboard;
+    private _handleHomeKey;
+    private _handleEndKey;
+    private _handleArrowDown;
+    private _handleArrowUp;
+    private _handleArrowLeft;
+    private _handleArrowRight;
+    private _handleInteraction;
+    private _handleSlotChange;
+    private _syncStepperAttributes;
+    private _animateSteps;
+    private _emitChanging;
+    private _emitChanged;
+    private _activateStep;
+    private _moveToNextStep;
+    private _getNextStep;
+    private _getPreviousStep;
+    private _getActiveStepComponent;
+    private _getStepHeader;
     /** Activates the step at a given index. */
     navigateTo(index: number): void;
     /** Activates the next enabled step. */