igniteui-webcomponents 7.0.0 → 7.1.0

package/components/stepper/common/state.js

@@ -0,0 +1,134 @@
+class StepperState {
+    constructor() {
+        this._state = new WeakMap();
+        this._steps = [];
+        this.linear = false;
+    }
+    get steps() {
+        return this._steps;
+    }
+    get activeStep() {
+        return this._activeStep;
+    }
+    get accessibleSteps() {
+        return this._steps.filter((step) => this.isAccessible(step));
+    }
+    set(step, state) {
+        this.has(step)
+            ? this._state.set(step, { ...this.get(step), ...state })
+            : this._state.set(step, {
+                linearDisabled: false,
+                previousCompleted: false,
+                visited: false,
+                ...state,
+            });
+        step.requestUpdate();
+    }
+    has(step) {
+        return this._state.has(step);
+    }
+    get(step) {
+        return this._state.get(step);
+    }
+    delete(step) {
+        return this._state.delete(step);
+    }
+    isAccessible(step) {
+        return !(step.disabled || this.get(step)?.linearDisabled);
+    }
+    setSteps(steps) {
+        this._steps = steps;
+    }
+    changeActiveStep(step) {
+        if (step === this._activeStep) {
+            return;
+        }
+        if (this._activeStep) {
+            this._activeStep.active = false;
+        }
+        step.active = true;
+        this.set(step, { visited: true });
+        this._activeStep = step;
+    }
+    activateFirstStep() {
+        const step = this._steps.find((s) => !s.disabled);
+        if (step) {
+            this.changeActiveStep(step);
+        }
+    }
+    getAdjacentStep(next = true) {
+        const steps = this.accessibleSteps;
+        const activeIndex = steps.indexOf(this._activeStep);
+        if (activeIndex === -1) {
+            return undefined;
+        }
+        return next ? steps[activeIndex + 1] : steps[activeIndex - 1];
+    }
+    syncState() {
+        for (const [index, step] of this._steps.entries()) {
+            step.active = this._activeStep === step;
+            if (index > 0) {
+                this.set(step, {
+                    previousCompleted: this._steps[index - 1].complete,
+                });
+            }
+        }
+    }
+    setVisitedState(value) {
+        const activeIndex = this._steps.indexOf(this._activeStep);
+        this.linear = value;
+        for (const [index, step] of this._steps.entries()) {
+            this.set(step, { visited: index <= activeIndex });
+        }
+        this.setLinearState();
+    }
+    setLinearState() {
+        if (!this.linear) {
+            for (const step of this._steps) {
+                this.set(step, { linearDisabled: false });
+            }
+            return;
+        }
+        const invalidIndex = this._steps.findIndex((step) => !(step.disabled || step.optional) && step.invalid);
+        if (invalidIndex > -1) {
+            for (const [index, step] of this._steps.entries()) {
+                this.set(step, { linearDisabled: index > invalidIndex });
+            }
+        }
+        else {
+            for (const step of this._steps) {
+                this.set(step, { linearDisabled: false });
+            }
+        }
+    }
+    onStepPropertyChanged(step, changed) {
+        if (changed.has('active') && step.active) {
+            this.changeActiveStep(step);
+        }
+        this.syncState();
+        this.setLinearState();
+    }
+    stepsChanged() {
+        const lastActiveStep = this._steps.findLast((step) => step.active);
+        if (lastActiveStep) {
+            this.changeActiveStep(lastActiveStep);
+        }
+        else {
+            this.activateFirstStep();
+        }
+        this.syncState();
+        this.setLinearState();
+    }
+    reset() {
+        for (const step of this._steps) {
+            this.delete(step);
+        }
+        this.activateFirstStep();
+        this.setLinearState();
+    }
+}
+function createStepperState() {
+    return new StepperState();
+}
+export { createStepperState };
+//# sourceMappingURL=state.js.map

package/components/stepper/common/state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"state.js","sourceRoot":"","sources":["../../../../src/components/stepper/common/state.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\nimport type IgcStepComponent from '../step.js';\n\ntype StepState = {\n  linearDisabled: boolean;\n  previousCompleted: boolean;\n  visited: boolean;\n};\n\nclass StepperState {\n  private readonly _state = new WeakMap<IgcStepComponent, StepState>();\n\n  private _steps: IgcStepComponent[] = [];\n  private _activeStep?: IgcStepComponent;\n\n  public linear = false;\n\n  //#region Collection accessors\n\n  /** Returns all registered step components. */\n  public get steps(): readonly IgcStepComponent[] {\n    return this._steps;\n  }\n\n  /** Returns the currently active step. */\n  public get activeStep(): IgcStepComponent | undefined {\n    return this._activeStep;\n  }\n\n  /** Returns all steps that are currently accessible (not disabled or linear-disabled). */\n  public get accessibleSteps(): IgcStepComponent[] {\n    return this._steps.filter((step) => this.isAccessible(step));\n  }\n\n  //#endregion\n\n  //#region Per-step state\n\n  /**\n   * Sets the state of a given step component.\n   *\n   * If the step already has an existing state, it merges the new state with the existing one.\n   * If the step does not have an existing state, it initializes it with default values and then applies the new state.\n   *\n   * After updating the state, it requests an update on the step component to reflect the changes in the UI.\n   */\n  public set(step: IgcStepComponent, state: Partial<StepState>): void {\n    this.has(step)\n      ? this._state.set(step, { ...this.get(step)!, ...state })\n      : this._state.set(step, {\n          linearDisabled: false,\n          previousCompleted: false,\n          visited: false,\n          ...state,\n        });\n\n    step.requestUpdate();\n  }\n\n  /** Checks if a given step component has an associated state. */\n  public has(step: IgcStepComponent): boolean {\n    return this._state.has(step);\n  }\n\n  /** Retrieves the state of a given step component. */\n  public get(step: IgcStepComponent): StepState | undefined {\n    return this._state.get(step);\n  }\n\n  /** Deletes the state of a given step component. */\n  public delete(step: IgcStepComponent): boolean {\n    return this._state.delete(step);\n  }\n\n  /**\n   * Determines if a given step component is accessible based on its `disabled` state\n   * and the `linearDisabled` state from the stepper state management.\n   */\n  public isAccessible(step: IgcStepComponent): boolean {\n    return !(step.disabled || this.get(step)?.linearDisabled);\n  }\n\n  //#endregion\n\n  //#region Active step management\n\n  /** Updates the registered steps collection. */\n  public setSteps(steps: IgcStepComponent[]): void {\n    this._steps = steps;\n  }\n\n  /** Changes the active step, deactivating the previous one and marking the new one as visited. */\n  public changeActiveStep(step: IgcStepComponent): void {\n    if (step === this._activeStep) {\n      return;\n    }\n\n    if (this._activeStep) {\n      this._activeStep.active = false;\n    }\n    step.active = true;\n    this.set(step, { visited: true });\n    this._activeStep = step;\n  }\n\n  /** Activates the first non-disabled step. */\n  public activateFirstStep(): void {\n    const step = this._steps.find((s) => !s.disabled);\n    if (step) {\n      this.changeActiveStep(step);\n    }\n  }\n\n  /** Returns the next or previous accessible step relative to the active step. */\n  public getAdjacentStep(next = true): IgcStepComponent | undefined {\n    const steps = this.accessibleSteps;\n    const activeIndex = steps.indexOf(this._activeStep!);\n\n    if (activeIndex === -1) {\n      return undefined;\n    }\n\n    return next ? steps[activeIndex + 1] : steps[activeIndex - 1];\n  }\n\n  //#endregion\n\n  //#region State synchronization\n\n  /** Synchronizes the `active` and `previousCompleted` state across all steps. */\n  public syncState(): void {\n    for (const [index, step] of this._steps.entries()) {\n      step.active = this._activeStep === step;\n\n      if (index > 0) {\n        this.set(step, {\n          previousCompleted: this._steps[index - 1].complete,\n        });\n      }\n    }\n  }\n\n  /**\n   * Sets the visited state for all steps based on the current active step and the linear mode.\n   */\n  public setVisitedState(value: boolean): void {\n    const activeIndex = this._steps.indexOf(this._activeStep!);\n    this.linear = value;\n\n    for (const [index, step] of this._steps.entries()) {\n      this.set(step, { visited: index <= activeIndex });\n    }\n\n    this.setLinearState();\n  }\n\n  /** Computes and applies the linear-disabled state for all steps. */\n  public setLinearState(): void {\n    if (!this.linear) {\n      for (const step of this._steps) {\n        this.set(step, { linearDisabled: false });\n      }\n      return;\n    }\n\n    const invalidIndex = this._steps.findIndex(\n      (step) => !(step.disabled || step.optional) && step.invalid\n    );\n\n    if (invalidIndex > -1) {\n      for (const [index, step] of this._steps.entries()) {\n        this.set(step, { linearDisabled: index > invalidIndex });\n      }\n    } else {\n      for (const step of this._steps) {\n        this.set(step, { linearDisabled: false });\n      }\n    }\n  }\n\n  /** Handles step property changes, updating active step tracking and re-syncing state. */\n  public onStepPropertyChanged(\n    step: IgcStepComponent,\n    changed: PropertyValues<IgcStepComponent>\n  ): void {\n    if (changed.has('active') && step.active) {\n      this.changeActiveStep(step);\n    }\n    this.syncState();\n    this.setLinearState();\n  }\n\n  /** Processes a change in the steps collection, resolving the active step and syncing state. */\n  public stepsChanged(): void {\n    const lastActiveStep = this._steps.findLast((step) => step.active);\n\n    if (lastActiveStep) {\n      this.changeActiveStep(lastActiveStep);\n    } else {\n      this.activateFirstStep();\n    }\n\n    this.syncState();\n    this.setLinearState();\n  }\n\n  /** Resets all step states and activates the first step. */\n  public reset(): void {\n    for (const step of this._steps) {\n      this.delete(step);\n    }\n\n    this.activateFirstStep();\n    this.setLinearState();\n  }\n\n  //#endregion\n}\n\n/**\n * Creates a new instance of the StepperState class, which manages the state of steps in a stepper component.\n */\nfunction createStepperState(): StepperState {\n  return new StepperState();\n}\n\nexport { createStepperState };\nexport type { StepperState };\n"]}

package/components/stepper/common/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/components/stepper/common/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/stepper/common/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface IgcActiveStepChangingEventArgs {\n  oldIndex: number;\n  newIndex: number;\n}\n\nexport interface IgcActiveStepChangedEventArgs {\n  index: number;\n}\n\nexport interface IgcStepperComponentEventMap {\n  igcActiveStepChanging: CustomEvent<IgcActiveStepChangingEventArgs>;\n  igcActiveStepChanged: CustomEvent<IgcActiveStepChangedEventArgs>;\n}\n"]}

package/components/stepper/step.d.ts

@@ -1,9 +1,14 @@
-import { LitElement, nothing } from 'lit';
-import type { StepperOrientation, StepperStepType, StepperTitlePosition } from '../types.js';
-import { type Animation } from './animations.js';
+import { LitElement, type PropertyValues } from 'lit';
 /**
- * The step component is used within the `igc-stepper` element and it holds the content of each step.
- * It also supports custom indicators, title and subtitle.
+ * A step component used within an `igc-stepper` to represent an individual step in a wizard-like workflow.
+ *
+ * @remarks
+ * Each step has a header (with an indicator, title, and subtitle) and a content area.
+ * Steps can be marked as `active`, `complete`, `disabled`, `optional`, or `invalid`
+ * to control their appearance and behavior within the stepper.
+ *
+ * Custom indicators can be provided via the `indicator` slot, and the content area
+ * is rendered in the default slot.
  *
  * @element igc-step
  *
@@ -25,82 +30,123 @@ import { type Animation } from './animations.js';
  * @csspart header - Wrapper of the step's `indicator` and `text`.
  * @csspart indicator - The indicator of the step.
  * @csspart text - Wrapper of the step's `title` and `subtitle`.
- * @csspart empty - Indicates that no title and subtitle has been provided to the step. Applies to `text`.
+ * @csspart empty - Indicates that no title and subtitle have been provided to the step. Applies to `text`.
  * @csspart title - The title of the step.
  * @csspart subtitle - The subtitle of the step.
  * @csspart body - Wrapper of the step's `content`.
- * @csspart content - The steps `content`.
+ * @csspart content - The step's `content`.
+ *
+ * @example
+ * ```html
+ * <igc-step>
+ *   <igc-icon slot="indicator" name="home"></igc-icon>
+ *   <span slot="title">Home</span>
+ *   <span slot="subtitle">Return to the home page</span>
+ *   <p>Welcome! This is the first step.</p>
+ * </igc-step>
+ * ```
+ *
+ * @example Step with state attributes
+ * ```html
+ * <igc-step complete>
+ *   <span slot="title">Completed step</span>
+ *   <p>This step has been completed.</p>
+ * </igc-step>
+ *
+ * <igc-step active invalid>
+ *   <span slot="title">Current step</span>
+ *   <p>This step has validation errors.</p>
+ * </igc-step>
+ *
+ * <igc-step disabled>
+ *   <span slot="title">Disabled step</span>
+ *   <p>This step is not accessible.</p>
+ * </igc-step>
+ * ```
  */
 export default class IgcStepComponent extends LitElement {
     static readonly tagName = "igc-step";
     static styles: import("lit").CSSResult[];
     static register(): void;
-    private bodyRef;
-    private contentRef;
-    private bodyAnimationPlayer;
-    private contentAnimationPlayer;
-    private _titleChildren;
-    private _subTitleChildren;
-    header: HTMLElement;
-    contentBody: HTMLElement;
-    /** Gets/sets whether the step is invalid. */
+    private readonly _bodyRef;
+    private readonly _contentRef;
+    private readonly _bodyPlayer;
+    private readonly _contentPlayer;
+    private readonly _slots;
+    private readonly _stepperContext?;
+    private get _stepper();
+    private get _state();
+    private get _isHorizontal();
+    private get _hasTitle();
+    private get _hasSubtitle();
+    private get _animation();
+    private get _animationDuration();
+    private get _contentTop();
+    private get _index();
+    private get _orientation();
+    private get _titlePosition();
+    private get _stepType();
+    private get _previousComplete();
+    private get _visited();
+    private get _isAccessible();
+    /**
+     * Whether the step is invalid.
+     *
+     * Invalid steps are styled with an error state and are not
+     * interactive when the stepper is in linear mode.
+     *
+     * @attr invalid
+     * @default false
+     */
     invalid: boolean;
-    /** Gets/sets whether the step is activе. */
+    /**
+     * Whether the step is active.
+     *
+     * Active steps are styled with an active state and their content is visible.
+     *
+     * @attr active
+     * @default false
+     */
     active: boolean;
     /**
-     * Gets/sets whether the step is optional.
+     * Whether the step is optional.
      *
-     * @remarks
      * Optional steps validity does not affect the default behavior when the stepper is in linear mode i.e.
      * if optional step is invalid the user could still move to the next step.
+     *
+     * @attr optional
+     * @default false
      */
     optional: boolean;
-    /** Gets/sets whether the step is interactable. */
+    /**
+     * Whether the step is disabled.
+     *
+     * Disabled steps are styled with a disabled state and are not interactive.
+     *
+     * @attr disabled
+     * @default false
+     */
     disabled: boolean;
-    /** Gets/sets whether the step is completed.
+    /**
+     * Whether the step is completed.
      *
-     * @remarks
-     * When set to `true` the following separator is styled `solid`.
+     * @attr complete
+     * @default false
      */
     complete: boolean;
-    /** @hidden @internal @private */
-    previousComplete: boolean;
-    /** @hidden @internal @private */
-    stepType: StepperStepType;
-    /** @hidden @internal @private */
-    titlePosition: StepperTitlePosition;
-    /** @hidden @internal @private */
-    orientation: StepperOrientation;
-    /** @hidden @internal @private */
-    index: number;
-    /** @hidden @internal @private */
-    contentTop: boolean;
-    /** @hidden @internal @private */
-    linearDisabled: boolean;
-    /** @hidden @internal @private */
-    visited: boolean;
-    /** @hidden @internal @private */
-    animation: Animation;
-    /** @hidden @internal @private */
-    animationDuration: number;
     constructor();
+    protected willUpdate(changed: PropertyValues<this>): void;
     /**
      * @hidden @internal
      * @deprecated since 5.4.0. Use the Stepper's `navigateTo` method instead.
      */
     toggleAnimation(type: 'in' | 'out', direction?: 'normal' | 'reverse'): Promise<boolean>;
-    protected activeChange(): void;
-    protected disabledInvalidOptionalChange(): void;
-    protected completeChange(): void;
-    private handleClick;
-    private handleKeydown;
-    /** @hidden @internal */
-    get isAccessible(): boolean;
-    private get headerContainerParts();
-    private get textParts();
-    protected renderIndicator(): typeof nothing | import("lit-html").TemplateResult<1>;
-    protected renderTitleAndSubtitle(): import("lit-html").TemplateResult<1>;
-    protected renderContent(): import("lit-html").TemplateResult<1>;
+    private get _headerContainerParts();
+    private get _textParts();
+    private _renderIndicator;
+    private _renderTitleAndSubtitle;
+    private _renderHeader;
+    private _renderContent;
     protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {