igniteui-webcomponents 7.0.0 → 7.1.0

package/components/stepper/step.js

@@ -4,17 +4,19 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+import { consume } from '@lit/context';
 import { html, LitElement, nothing } from 'lit';
-import { property, query, queryAssignedElements } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
+import { cache } from 'lit/directives/cache.js';
 import { createRef, ref } from 'lit/directives/ref.js';
-import { when } from 'lit/directives/when.js';
 import { EaseInOut } from '../../animations/easings.js';
 import { addAnimationController } from '../../animations/player.js';
 import { addThemingController } from '../../theming/theming-controller.js';
-import { watch } from '../common/decorators/watch.js';
+import { addSlotController, setSlots } from '../common/controllers/slot.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { partMap } from '../common/part-map.js';
-import { bodyAnimations, contentAnimations, } from './animations.js';
+import { bodyAnimations, contentAnimations } from './common/animations.js';
+import { STEPPER_CONTEXT } from './common/context.js';
 import { styles as shared } from './themes/step/shared/step.common.css.js';
 import { styles } from './themes/step/step.base.css.js';
 import { all } from './themes/step/themes.js';
@@ -24,37 +26,85 @@ export default class IgcStepComponent extends LitElement {
     static register() {
         registerComponent(IgcStepComponent);
     }
+    get _stepper() {
+        return this._stepperContext?.stepper;
+    }
+    get _state() {
+        return this._stepperContext?.state;
+    }
+    get _isHorizontal() {
+        return this._orientation === 'horizontal';
+    }
+    get _hasTitle() {
+        return this._slots.hasAssignedElements('title');
+    }
+    get _hasSubtitle() {
+        return this._slots.hasAssignedElements('subtitle');
+    }
+    get _animation() {
+        const animation = this._isHorizontal
+            ? this._stepper?.horizontalAnimation
+            : this._stepper?.verticalAnimation;
+        return animation ?? (this._isHorizontal ? 'slide' : 'grow');
+    }
+    get _animationDuration() {
+        return this._stepper?.animationDuration ?? 320;
+    }
+    get _contentTop() {
+        return this._stepper?.contentTop ?? false;
+    }
+    get _index() {
+        return this._stepper?.steps.indexOf(this) ?? -1;
+    }
+    get _orientation() {
+        return this._stepper?.orientation ?? 'horizontal';
+    }
+    get _titlePosition() {
+        return this._stepper?.titlePosition ?? 'auto';
+    }
+    get _stepType() {
+        return this._stepper?.stepType ?? 'full';
+    }
+    get _previousComplete() {
+        return this._state?.get(this)?.previousCompleted ?? false;
+    }
+    get _visited() {
+        return this._state?.get(this)?.visited ?? false;
+    }
+    get _isAccessible() {
+        return this._state?.isAccessible(this) ?? true;
+    }
     constructor() {
         super();
-        this.bodyRef = createRef();
-        this.contentRef = createRef();
-        this.bodyAnimationPlayer = addAnimationController(this, this.bodyRef);
-        this.contentAnimationPlayer = addAnimationController(this, this.contentRef);
+        this._bodyRef = createRef();
+        this._contentRef = createRef();
+        this._bodyPlayer = addAnimationController(this, this._bodyRef);
+        this._contentPlayer = addAnimationController(this, this._contentRef);
+        this._slots = addSlotController(this, {
+            slots: setSlots('indicator', 'title', 'subtitle'),
+        });
         this.invalid = false;
         this.active = false;
         this.optional = false;
         this.disabled = false;
         this.complete = false;
-        this.previousComplete = false;
-        this.stepType = 'full';
-        this.titlePosition = 'auto';
-        this.orientation = 'horizontal';
-        this.index = -1;
-        this.contentTop = false;
-        this.linearDisabled = false;
-        this.visited = false;
-        this.animation = 'fade';
-        this.animationDuration = 350;
         addThemingController(this, all);
     }
+    willUpdate(changed) {
+        if (changed.has('active') ||
+            changed.has('complete') ||
+            changed.has('disabled') ||
+            changed.has('invalid') ||
+            changed.has('optional')) {
+            this._state?.onStepPropertyChanged(this, changed);
+        }
+    }
     async toggleAnimation(type, direction = 'normal') {
-        const bodyAnimation = bodyAnimations.get(this.animation).get(type);
-        const contentAnimation = contentAnimations.get(this.animation).get(type);
-        const bodyHeight = window
-            .getComputedStyle(this)
-            .getPropertyValue('--vertical-body-height');
+        const bodyAnimation = bodyAnimations.get(this._animation).get(type);
+        const contentAnimation = contentAnimations.get(this._animation).get(type);
+        const bodyHeight = getComputedStyle(this).getPropertyValue('--vertical-body-height');
         const options = {
-            duration: this.animationDuration,
+            duration: this._animationDuration,
             easing: EaseInOut.Quad,
             direction,
         };
@@ -62,78 +112,49 @@ export default class IgcStepComponent extends LitElement {
             height: bodyHeight,
         };
         const result = await Promise.all([
-            this.bodyAnimationPlayer.playExclusive(bodyAnimation({ keyframe: options, step })),
-            this.contentAnimationPlayer.playExclusive(contentAnimation({ keyframe: options, step })),
+            this._bodyPlayer.playExclusive(bodyAnimation({ keyframe: options, step })),
+            this._contentPlayer.playExclusive(contentAnimation({ keyframe: options, step })),
         ]);
         return result.every(Boolean);
     }
-    activeChange() {
-        if (this.active) {
-            this.dispatchEvent(new CustomEvent('stepActiveChanged', { bubbles: true, detail: false }));
-        }
-    }
-    disabledInvalidOptionalChange() {
-        this.dispatchEvent(new CustomEvent('stepDisabledInvalidChanged', { bubbles: true }));
-    }
-    completeChange() {
-        this.dispatchEvent(new CustomEvent('stepCompleteChanged', { bubbles: true }));
-    }
-    handleClick(event) {
-        event.stopPropagation();
-        if (this.isAccessible) {
-            this.dispatchEvent(new CustomEvent('stepActiveChanged', { bubbles: true, detail: true }));
-        }
-    }
-    handleKeydown(event) {
-        this.dispatchEvent(new CustomEvent('stepHeaderKeydown', {
-            bubbles: true,
-            detail: { event, focusedStep: this },
-        }));
-    }
-    get isAccessible() {
-        return !this.disabled && !this.linearDisabled;
-    }
-    get headerContainerParts() {
+    get _headerContainerParts() {
         return {
             'header-container': true,
-            disabled: !this.isAccessible,
+            disabled: !this._isAccessible,
             'complete-start': this.complete,
-            'complete-end': this.previousComplete,
+            'complete-end': this._previousComplete,
             optional: this.optional,
-            invalid: this.invalid && this.visited && !this.active && this.isAccessible,
-            top: this.titlePosition === 'top',
-            bottom: this.titlePosition === 'bottom' ||
-                (this.orientation === 'horizontal' && this.titlePosition === 'auto'),
-            start: this.titlePosition === 'start',
-            end: this.titlePosition === 'end' ||
-                (this.orientation === 'vertical' && this.titlePosition === 'auto'),
+            invalid: this.invalid && this._visited && !this.active && this._isAccessible,
+            top: this._titlePosition === 'top',
+            bottom: this._titlePosition === 'bottom' ||
+                (this._isHorizontal && this._titlePosition === 'auto'),
+            start: this._titlePosition === 'start',
+            end: this._titlePosition === 'end' ||
+                (!this._isHorizontal && this._titlePosition === 'auto'),
         };
     }
-    get textParts() {
+    get _textParts() {
+        const hasText = this._hasTitle || this._hasSubtitle;
         return {
             text: true,
-            empty: this.stepType === 'indicator'
-                ? true
-                : this.stepType === 'full' &&
-                    !this._titleChildren.length &&
-                    !this._subTitleChildren.length,
+            empty: this._stepType === 'indicator' ||
+                (this._stepType === 'full' && !hasText),
         };
     }
-    renderIndicator() {
-        if (this.stepType !== 'title') {
-            return html `
-        <div part="indicator">
-          <slot name="indicator">
-            <span>${this.index + 1}</span>
-          </slot>
-        </div>
-      `;
-        }
-        return nothing;
+    _renderIndicator() {
+        return this._stepType !== 'title'
+            ? html `
+          <div part="indicator">
+            <slot name="indicator">
+              <span>${this._index + 1}</span>
+            </slot>
+          </div>
+        `
+            : nothing;
     }
-    renderTitleAndSubtitle() {
+    _renderTitleAndSubtitle() {
         return html `
-      <div part=${partMap(this.textParts)}>
+      <div part=${partMap(this._textParts)}>
         <div part="title">
           <slot name="title"></slot>
         </div>
@@ -143,104 +164,68 @@ export default class IgcStepComponent extends LitElement {
       </div>
     `;
     }
-    renderContent() {
-        return html `<div
-      ${ref(this.bodyRef)}
-      id="igc-step-content-${this.index}"
-      part="body"
-      role="tabpanel"
-      aria-labelledby="igc-step-header-${this.index}"
-    >
-      <div part="content" ${ref(this.contentRef)}>
-        <slot></slot>
-      </div>
-    </div>`;
-    }
-    render() {
+    _renderHeader() {
+        const index = this._index + 1;
+        const size = this._stepper?.steps.length ?? 0;
         return html `
-      ${when(this.contentTop && this.orientation === 'horizontal', () => this.renderContent(), () => nothing)}
-      <div part=${partMap(this.headerContainerParts)}>
+      <div part=${partMap(this._headerContainerParts)}>
         <div
-          part="header"
-          tabindex=${this.active ? '0' : '-1'}
+          data-step-header
           role="tab"
+          part="header"
+          id="igc-step-header-${index}"
           aria-selected=${this.active}
-          @click=${this.handleClick}
-          @keydown=${this.handleKeydown}
+          aria-controls="igc-step-content-${index}"
+          aria-posinset=${index}
+          aria-setsize=${size}
+          tabindex=${this.active ? 0 : -1}
         >
-          ${this.renderIndicator()} ${this.renderTitleAndSubtitle()}
+          ${this._renderIndicator()} ${this._renderTitleAndSubtitle()}
+        </div>
+      </div>
+    `;
+    }
+    _renderContent() {
+        const index = this._index + 1;
+        return html `
+      <div
+        ${ref(this._bodyRef)}
+        id="igc-step-content-${index}"
+        part="body"
+        role="tabpanel"
+        aria-labelledby="igc-step-header-${index}"
+      >
+        <div ${ref(this._contentRef)} part="content">
+          <slot></slot>
         </div>
       </div>
-      ${when(this.orientation === 'vertical' || !this.contentTop, () => this.renderContent(), () => nothing)}
+    `;
+    }
+    render() {
+        const renderBeforeHeader = this._contentTop && this._isHorizontal;
+        return html `
+      ${cache(renderBeforeHeader
+            ? html `${this._renderContent()} ${this._renderHeader()}`
+            : html `${this._renderHeader()} ${this._renderContent()}`)}
     `;
     }
 }
 __decorate([
-    queryAssignedElements({ slot: 'title' })
-], IgcStepComponent.prototype, "_titleChildren", void 0);
-__decorate([
-    queryAssignedElements({ slot: 'subtitle' })
-], IgcStepComponent.prototype, "_subTitleChildren", void 0);
-__decorate([
-    query('[part~="header"]')
-], IgcStepComponent.prototype, "header", void 0);
+    consume({ context: STEPPER_CONTEXT, subscribe: true })
+], IgcStepComponent.prototype, "_stepperContext", void 0);
 __decorate([
-    query('[part~="body"]')
-], IgcStepComponent.prototype, "contentBody", void 0);
-__decorate([
-    property({ reflect: true, type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], IgcStepComponent.prototype, "invalid", void 0);
 __decorate([
-    property({ reflect: true, type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], IgcStepComponent.prototype, "active", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], IgcStepComponent.prototype, "optional", void 0);
 __decorate([
-    property({ reflect: true, type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], IgcStepComponent.prototype, "disabled", void 0);
 __decorate([
-    property({ reflect: true, type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], IgcStepComponent.prototype, "complete", void 0);
-__decorate([
-    property({ attribute: false })
-], IgcStepComponent.prototype, "previousComplete", void 0);
-__decorate([
-    property({ attribute: false })
-], IgcStepComponent.prototype, "stepType", void 0);
-__decorate([
-    property({ attribute: false })
-], IgcStepComponent.prototype, "titlePosition", void 0);
-__decorate([
-    property({ attribute: false })
-], IgcStepComponent.prototype, "orientation", void 0);
-__decorate([
-    property({ attribute: false })
-], IgcStepComponent.prototype, "index", void 0);
-__decorate([
-    property({ attribute: false })
-], IgcStepComponent.prototype, "contentTop", void 0);
-__decorate([
-    property({ attribute: false })
-], IgcStepComponent.prototype, "linearDisabled", void 0);
-__decorate([
-    property({ attribute: false })
-], IgcStepComponent.prototype, "visited", void 0);
-__decorate([
-    property({ attribute: false })
-], IgcStepComponent.prototype, "animation", void 0);
-__decorate([
-    property({ attribute: false })
-], IgcStepComponent.prototype, "animationDuration", void 0);
-__decorate([
-    watch('active', { waitUntilFirstUpdate: true })
-], IgcStepComponent.prototype, "activeChange", null);
-__decorate([
-    watch('disabled', { waitUntilFirstUpdate: true }),
-    watch('invalid', { waitUntilFirstUpdate: true }),
-    watch('optional', { waitUntilFirstUpdate: true })
-], IgcStepComponent.prototype, "disabledInvalidOptionalChange", null);
-__decorate([
-    watch('complete', { waitUntilFirstUpdate: true })
-], IgcStepComponent.prototype, "completeChange", null);
 //# sourceMappingURL=step.js.map

package/components/stepper/step.js.map

@@ -1 +1 @@
-{"version":3,"file":"step.js","sourceRoot":"","sources":["../../../src/components/stepper/step.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query, queryAssignedElements } from 'lit/decorators.js';\nimport { createRef, type Ref, ref } from 'lit/directives/ref.js';\nimport { when } from 'lit/directives/when.js';\n\nimport { EaseInOut } from '../../animations/easings.js';\nimport { addAnimationController } from '../../animations/player.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { partMap } from '../common/part-map.js';\nimport type {\n  StepperOrientation,\n  StepperStepType,\n  StepperTitlePosition,\n} from '../types.js';\nimport {\n  type Animation,\n  bodyAnimations,\n  contentAnimations,\n} from './animations.js';\nimport { styles as shared } from './themes/step/shared/step.common.css.js';\nimport { styles } from './themes/step/step.base.css.js';\nimport { all } from './themes/step/themes.js';\n\n/**\n * The step component is used within the `igc-stepper` element and it holds the content of each step.\n * It also supports custom indicators, title and subtitle.\n *\n * @element igc-step\n *\n * @slot - Renders the content of the step.\n * @slot indicator - Renders the indicator of the step. By default, it displays the step index + 1.\n * @slot title - Renders the title of the step.\n * @slot subtitle - Renders the subtitle of the step.\n *\n * @csspart header-container - Wrapper of the step's `header` and its separators.\n * @csspart disabled - Indicates a disabled state. Applies to `header-container`.\n * @csspart complete-start - Indicates a complete state of the current step. Applies to `header-container`.\n * @csspart complete-end - Indicates a complete state of the previous step. Applies to `header-container`.\n * @csspart optional - Indicates an optional state. Applies to `header-container`.\n * @csspart invalid - Indicates an invalid state. Applies to `header-container`.\n * @csspart top - Indicates that the title should be above the indicator. Applies to `header-container`.\n * @csspart bottom - Indicates that the title should be below the indicator. Applies to `header-container`.\n * @csspart start - Indicates that the title should be before the indicator. Applies to `header-container`.\n * @csspart end - Indicates that the title should be after the indicator. Applies to `header-container`.\n * @csspart header - Wrapper of the step's `indicator` and `text`.\n * @csspart indicator - The indicator of the step.\n * @csspart text - Wrapper of the step's `title` and `subtitle`.\n * @csspart empty - Indicates that no title and subtitle has been provided to the step. Applies to `text`.\n * @csspart title - The title of the step.\n * @csspart subtitle - The subtitle of the step.\n * @csspart body - Wrapper of the step's `content`.\n * @csspart content - The steps `content`.\n */\nexport default class IgcStepComponent extends LitElement {\n  public static readonly tagName = 'igc-step';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcStepComponent);\n  }\n\n  private bodyRef: Ref<HTMLElement> = createRef();\n  private contentRef: Ref<HTMLElement> = createRef();\n\n  private bodyAnimationPlayer = addAnimationController(this, this.bodyRef);\n  private contentAnimationPlayer = addAnimationController(\n    this,\n    this.contentRef\n  );\n\n  @queryAssignedElements({ slot: 'title' })\n  private _titleChildren!: Array<HTMLElement>;\n\n  @queryAssignedElements({ slot: 'subtitle' })\n  private _subTitleChildren!: Array<HTMLElement>;\n\n  /* blazorSuppress */\n  @query('[part~=\"header\"]')\n  public header!: HTMLElement;\n\n  /* blazorSuppress */\n  @query('[part~=\"body\"]')\n  public contentBody!: HTMLElement;\n\n  /** Gets/sets whether the step is invalid. */\n  @property({ reflect: true, type: Boolean })\n  public invalid = false;\n\n  /** Gets/sets whether the step is activе. */\n  @property({ reflect: true, type: Boolean })\n  public active = false;\n\n  /**\n   * Gets/sets whether the step is optional.\n   *\n   * @remarks\n   * Optional steps validity does not affect the default behavior when the stepper is in linear mode i.e.\n   * if optional step is invalid the user could still move to the next step.\n   */\n  @property({ type: Boolean })\n  public optional = false;\n\n  /** Gets/sets whether the step is interactable. */\n  @property({ reflect: true, type: Boolean })\n  public disabled = false;\n\n  /** Gets/sets whether the step is completed.\n   *\n   * @remarks\n   * When set to `true` the following separator is styled `solid`.\n   */\n  @property({ reflect: true, type: Boolean })\n  public complete = false;\n\n  /** @hidden @internal @private */\n  @property({ attribute: false })\n  public previousComplete = false;\n\n  /** @hidden @internal @private */\n  @property({ attribute: false })\n  public stepType: StepperStepType = 'full';\n\n  /** @hidden @internal @private */\n  @property({ attribute: false })\n  public titlePosition: StepperTitlePosition = 'auto';\n\n  /** @hidden @internal @private */\n  @property({ attribute: false })\n  public orientation: StepperOrientation = 'horizontal';\n\n  /** @hidden @internal @private */\n  @property({ attribute: false })\n  public index = -1;\n\n  /** @hidden @internal @private */\n  @property({ attribute: false })\n  public contentTop = false;\n\n  /** @hidden @internal @private */\n  @property({ attribute: false })\n  public linearDisabled = false;\n\n  /** @hidden @internal @private */\n  @property({ attribute: false })\n  public visited = false;\n\n  /** @hidden @internal @private */\n  @property({ attribute: false })\n  public animation: Animation = 'fade';\n\n  /** @hidden @internal @private */\n  @property({ attribute: false })\n  public animationDuration = 350;\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  /**\n   * @hidden @internal\n   * @deprecated since 5.4.0. Use the Stepper's `navigateTo` method instead.\n   */\n  public async toggleAnimation(\n    type: 'in' | 'out',\n    direction: 'normal' | 'reverse' = 'normal'\n  ) {\n    const bodyAnimation = bodyAnimations.get(this.animation)!.get(type)!;\n    const contentAnimation = contentAnimations.get(this.animation)!.get(type)!;\n    const bodyHeight = window\n      .getComputedStyle(this)\n      .getPropertyValue('--vertical-body-height');\n\n    const options: KeyframeAnimationOptions = {\n      duration: this.animationDuration,\n      easing: EaseInOut.Quad,\n      direction,\n    };\n\n    const step = {\n      height: bodyHeight,\n    };\n\n    const result = await Promise.all([\n      this.bodyAnimationPlayer.playExclusive(\n        bodyAnimation({ keyframe: options, step })\n      ),\n      this.contentAnimationPlayer.playExclusive(\n        contentAnimation({ keyframe: options, step })\n      ),\n    ]);\n\n    return result.every(Boolean);\n  }\n\n  @watch('active', { waitUntilFirstUpdate: true })\n  protected activeChange() {\n    if (this.active) {\n      this.dispatchEvent(\n        new CustomEvent('stepActiveChanged', { bubbles: true, detail: false })\n      );\n    }\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  @watch('invalid', { waitUntilFirstUpdate: true })\n  @watch('optional', { waitUntilFirstUpdate: true })\n  protected disabledInvalidOptionalChange() {\n    this.dispatchEvent(\n      new CustomEvent('stepDisabledInvalidChanged', { bubbles: true })\n    );\n  }\n\n  @watch('complete', { waitUntilFirstUpdate: true })\n  protected completeChange() {\n    this.dispatchEvent(\n      new CustomEvent('stepCompleteChanged', { bubbles: true })\n    );\n  }\n\n  private handleClick(event: MouseEvent): void {\n    event.stopPropagation();\n    if (this.isAccessible) {\n      this.dispatchEvent(\n        new CustomEvent('stepActiveChanged', { bubbles: true, detail: true })\n      );\n    }\n  }\n\n  private handleKeydown(event: KeyboardEvent): void {\n    this.dispatchEvent(\n      new CustomEvent('stepHeaderKeydown', {\n        bubbles: true,\n        detail: { event, focusedStep: this },\n      })\n    );\n  }\n\n  /** @hidden @internal */\n  public get isAccessible(): boolean {\n    return !this.disabled && !this.linearDisabled;\n  }\n\n  private get headerContainerParts() {\n    return {\n      'header-container': true,\n      disabled: !this.isAccessible,\n      'complete-start': this.complete,\n      'complete-end': this.previousComplete,\n      optional: this.optional,\n      invalid:\n        this.invalid && this.visited && !this.active && this.isAccessible,\n      top: this.titlePosition === 'top',\n      bottom:\n        this.titlePosition === 'bottom' ||\n        (this.orientation === 'horizontal' && this.titlePosition === 'auto'),\n      start: this.titlePosition === 'start',\n      end:\n        this.titlePosition === 'end' ||\n        (this.orientation === 'vertical' && this.titlePosition === 'auto'),\n    };\n  }\n\n  private get textParts() {\n    return {\n      text: true,\n      empty:\n        this.stepType === 'indicator'\n          ? true\n          : this.stepType === 'full' &&\n            !this._titleChildren.length &&\n            !this._subTitleChildren.length,\n    };\n  }\n\n  protected renderIndicator() {\n    if (this.stepType !== 'title') {\n      return html`\n        <div part=\"indicator\">\n          <slot name=\"indicator\">\n            <span>${this.index + 1}</span>\n          </slot>\n        </div>\n      `;\n    }\n    return nothing;\n  }\n\n  protected renderTitleAndSubtitle() {\n    return html`\n      <div part=${partMap(this.textParts)}>\n        <div part=\"title\">\n          <slot name=\"title\"></slot>\n        </div>\n        <div part=\"subtitle\">\n          <slot name=\"subtitle\"></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  protected renderContent() {\n    return html`<div\n      ${ref(this.bodyRef)}\n      id=\"igc-step-content-${this.index}\"\n      part=\"body\"\n      role=\"tabpanel\"\n      aria-labelledby=\"igc-step-header-${this.index}\"\n    >\n      <div part=\"content\" ${ref(this.contentRef)}>\n        <slot></slot>\n      </div>\n    </div>`;\n  }\n\n  protected override render() {\n    return html`\n      ${when(\n        this.contentTop && this.orientation === 'horizontal',\n        () => this.renderContent(),\n        () => nothing\n      )}\n      <div part=${partMap(this.headerContainerParts)}>\n        <div\n          part=\"header\"\n          tabindex=${this.active ? '0' : '-1'}\n          role=\"tab\"\n          aria-selected=${this.active}\n          @click=${this.handleClick}\n          @keydown=${this.handleKeydown}\n        >\n          ${this.renderIndicator()} ${this.renderTitleAndSubtitle()}\n        </div>\n      </div>\n      ${when(\n        this.orientation === 'vertical' || !this.contentTop,\n        () => this.renderContent(),\n        () => nothing\n      )}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-step': IgcStepComponent;\n  }\n}\n"]}
+{"version":3,"file":"step.js","sourceRoot":"","sources":["../../../src/components/stepper/step.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume } from '@lit/context';\nimport { html, LitElement, nothing, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { cache } from 'lit/directives/cache.js';\nimport { createRef, ref } from 'lit/directives/ref.js';\nimport { EaseInOut } from '../../animations/easings.js';\nimport { addAnimationController } from '../../animations/player.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { addSlotController, setSlots } from '../common/controllers/slot.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { partMap } from '../common/part-map.js';\nimport type {\n  HorizontalTransitionAnimation,\n  StepperOrientation,\n  StepperStepType,\n  StepperTitlePosition,\n  StepperVerticalAnimation,\n} from '../types.js';\nimport { bodyAnimations, contentAnimations } from './common/animations.js';\nimport { STEPPER_CONTEXT, type StepperContext } from './common/context.js';\nimport type { StepperState } from './common/state.js';\nimport type IgcStepperComponent from './stepper.js';\nimport { styles as shared } from './themes/step/shared/step.common.css.js';\nimport { styles } from './themes/step/step.base.css.js';\nimport { all } from './themes/step/themes.js';\n\n/**\n * A step component used within an `igc-stepper` to represent an individual step in a wizard-like workflow.\n *\n * @remarks\n * Each step has a header (with an indicator, title, and subtitle) and a content area.\n * Steps can be marked as `active`, `complete`, `disabled`, `optional`, or `invalid`\n * to control their appearance and behavior within the stepper.\n *\n * Custom indicators can be provided via the `indicator` slot, and the content area\n * is rendered in the default slot.\n *\n * @element igc-step\n *\n * @slot - Renders the content of the step.\n * @slot indicator - Renders the indicator of the step. By default, it displays the step index + 1.\n * @slot title - Renders the title of the step.\n * @slot subtitle - Renders the subtitle of the step.\n *\n * @csspart header-container - Wrapper of the step's `header` and its separators.\n * @csspart disabled - Indicates a disabled state. Applies to `header-container`.\n * @csspart complete-start - Indicates a complete state of the current step. Applies to `header-container`.\n * @csspart complete-end - Indicates a complete state of the previous step. Applies to `header-container`.\n * @csspart optional - Indicates an optional state. Applies to `header-container`.\n * @csspart invalid - Indicates an invalid state. Applies to `header-container`.\n * @csspart top - Indicates that the title should be above the indicator. Applies to `header-container`.\n * @csspart bottom - Indicates that the title should be below the indicator. Applies to `header-container`.\n * @csspart start - Indicates that the title should be before the indicator. Applies to `header-container`.\n * @csspart end - Indicates that the title should be after the indicator. Applies to `header-container`.\n * @csspart header - Wrapper of the step's `indicator` and `text`.\n * @csspart indicator - The indicator of the step.\n * @csspart text - Wrapper of the step's `title` and `subtitle`.\n * @csspart empty - Indicates that no title and subtitle have been provided to the step. Applies to `text`.\n * @csspart title - The title of the step.\n * @csspart subtitle - The subtitle of the step.\n * @csspart body - Wrapper of the step's `content`.\n * @csspart content - The step's `content`.\n *\n * @example\n * ```html\n * <igc-step>\n *   <igc-icon slot=\"indicator\" name=\"home\"></igc-icon>\n *   <span slot=\"title\">Home</span>\n *   <span slot=\"subtitle\">Return to the home page</span>\n *   <p>Welcome! This is the first step.</p>\n * </igc-step>\n * ```\n *\n * @example Step with state attributes\n * ```html\n * <igc-step complete>\n *   <span slot=\"title\">Completed step</span>\n *   <p>This step has been completed.</p>\n * </igc-step>\n *\n * <igc-step active invalid>\n *   <span slot=\"title\">Current step</span>\n *   <p>This step has validation errors.</p>\n * </igc-step>\n *\n * <igc-step disabled>\n *   <span slot=\"title\">Disabled step</span>\n *   <p>This step is not accessible.</p>\n * </igc-step>\n * ```\n */\nexport default class IgcStepComponent extends LitElement {\n  public static readonly tagName = 'igc-step';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcStepComponent);\n  }\n\n  //#region Internal state and properties\n\n  private readonly _bodyRef = createRef<HTMLElement>();\n  private readonly _contentRef = createRef<HTMLElement>();\n\n  private readonly _bodyPlayer = addAnimationController(this, this._bodyRef);\n  private readonly _contentPlayer = addAnimationController(\n    this,\n    this._contentRef\n  );\n\n  private readonly _slots = addSlotController(this, {\n    slots: setSlots('indicator', 'title', 'subtitle'),\n  });\n\n  @consume({ context: STEPPER_CONTEXT, subscribe: true })\n  private readonly _stepperContext?: StepperContext;\n\n  private get _stepper(): IgcStepperComponent | undefined {\n    return this._stepperContext?.stepper;\n  }\n\n  private get _state(): StepperState | undefined {\n    return this._stepperContext?.state;\n  }\n\n  private get _isHorizontal(): boolean {\n    return this._orientation === 'horizontal';\n  }\n\n  private get _hasTitle(): boolean {\n    return this._slots.hasAssignedElements('title');\n  }\n\n  private get _hasSubtitle(): boolean {\n    return this._slots.hasAssignedElements('subtitle');\n  }\n\n  private get _animation():\n    | StepperVerticalAnimation\n    | HorizontalTransitionAnimation {\n    const animation = this._isHorizontal\n      ? this._stepper?.horizontalAnimation\n      : this._stepper?.verticalAnimation;\n\n    return animation ?? (this._isHorizontal ? 'slide' : 'grow');\n  }\n\n  private get _animationDuration(): number {\n    return this._stepper?.animationDuration ?? 320;\n  }\n\n  private get _contentTop(): boolean {\n    return this._stepper?.contentTop ?? false;\n  }\n\n  private get _index(): number {\n    return this._stepper?.steps.indexOf(this) ?? -1;\n  }\n\n  private get _orientation(): StepperOrientation {\n    return this._stepper?.orientation ?? 'horizontal';\n  }\n\n  private get _titlePosition(): StepperTitlePosition {\n    return this._stepper?.titlePosition ?? 'auto';\n  }\n\n  private get _stepType(): StepperStepType {\n    return this._stepper?.stepType ?? 'full';\n  }\n\n  private get _previousComplete(): boolean {\n    return this._state?.get(this)?.previousCompleted ?? false;\n  }\n\n  private get _visited(): boolean {\n    return this._state?.get(this)?.visited ?? false;\n  }\n\n  private get _isAccessible(): boolean {\n    return this._state?.isAccessible(this) ?? true;\n  }\n\n  //#endregion\n\n  //#region Public attributes and properties\n\n  /**\n   * Whether the step is invalid.\n   *\n   * Invalid steps are styled with an error state and are not\n   * interactive when the stepper is in linear mode.\n   *\n   * @attr invalid\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public invalid = false;\n\n  /**\n   * Whether the step is active.\n   *\n   * Active steps are styled with an active state and their content is visible.\n   *\n   * @attr active\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public active = false;\n\n  /**\n   * Whether the step is optional.\n   *\n   * Optional steps validity does not affect the default behavior when the stepper is in linear mode i.e.\n   * if optional step is invalid the user could still move to the next step.\n   *\n   * @attr optional\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public optional = false;\n\n  /**\n   * Whether the step is disabled.\n   *\n   * Disabled steps are styled with a disabled state and are not interactive.\n   *\n   * @attr disabled\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  /**\n   * Whether the step is completed.\n   *\n   * @attr complete\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public complete = false;\n\n  //#endregion\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected override willUpdate(changed: PropertyValues<this>): void {\n    if (\n      changed.has('active') ||\n      changed.has('complete') ||\n      changed.has('disabled') ||\n      changed.has('invalid') ||\n      changed.has('optional')\n    ) {\n      this._state?.onStepPropertyChanged(this, changed);\n    }\n  }\n\n  /**\n   * @hidden @internal\n   * @deprecated since 5.4.0. Use the Stepper's `navigateTo` method instead.\n   */\n  public async toggleAnimation(\n    type: 'in' | 'out',\n    direction: 'normal' | 'reverse' = 'normal'\n  ) {\n    const bodyAnimation = bodyAnimations.get(this._animation)!.get(type)!;\n    const contentAnimation = contentAnimations.get(this._animation)!.get(type)!;\n    const bodyHeight = getComputedStyle(this).getPropertyValue(\n      '--vertical-body-height'\n    );\n\n    const options: KeyframeAnimationOptions = {\n      duration: this._animationDuration,\n      easing: EaseInOut.Quad,\n      direction,\n    };\n\n    const step = {\n      height: bodyHeight,\n    };\n\n    const result = await Promise.all([\n      this._bodyPlayer.playExclusive(\n        bodyAnimation({ keyframe: options, step })\n      ),\n      this._contentPlayer.playExclusive(\n        contentAnimation({ keyframe: options, step })\n      ),\n    ]);\n\n    return result.every(Boolean);\n  }\n\n  private get _headerContainerParts() {\n    return {\n      'header-container': true,\n      disabled: !this._isAccessible,\n      'complete-start': this.complete,\n      'complete-end': this._previousComplete,\n      optional: this.optional,\n      invalid:\n        this.invalid && this._visited && !this.active && this._isAccessible,\n      top: this._titlePosition === 'top',\n      bottom:\n        this._titlePosition === 'bottom' ||\n        (this._isHorizontal && this._titlePosition === 'auto'),\n      start: this._titlePosition === 'start',\n      end:\n        this._titlePosition === 'end' ||\n        (!this._isHorizontal && this._titlePosition === 'auto'),\n    };\n  }\n\n  private get _textParts() {\n    const hasText = this._hasTitle || this._hasSubtitle;\n\n    return {\n      text: true,\n      empty:\n        this._stepType === 'indicator' ||\n        (this._stepType === 'full' && !hasText),\n    };\n  }\n\n  private _renderIndicator() {\n    return this._stepType !== 'title'\n      ? html`\n          <div part=\"indicator\">\n            <slot name=\"indicator\">\n              <span>${this._index + 1}</span>\n            </slot>\n          </div>\n        `\n      : nothing;\n  }\n\n  private _renderTitleAndSubtitle() {\n    return html`\n      <div part=${partMap(this._textParts)}>\n        <div part=\"title\">\n          <slot name=\"title\"></slot>\n        </div>\n        <div part=\"subtitle\">\n          <slot name=\"subtitle\"></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private _renderHeader() {\n    const index = this._index + 1;\n    const size = this._stepper?.steps.length ?? 0;\n\n    return html`\n      <div part=${partMap(this._headerContainerParts)}>\n        <div\n          data-step-header\n          role=\"tab\"\n          part=\"header\"\n          id=\"igc-step-header-${index}\"\n          aria-selected=${this.active}\n          aria-controls=\"igc-step-content-${index}\"\n          aria-posinset=${index}\n          aria-setsize=${size}\n          tabindex=${this.active ? 0 : -1}\n        >\n          ${this._renderIndicator()} ${this._renderTitleAndSubtitle()}\n        </div>\n      </div>\n    `;\n  }\n\n  private _renderContent() {\n    const index = this._index + 1;\n\n    return html`\n      <div\n        ${ref(this._bodyRef)}\n        id=\"igc-step-content-${index}\"\n        part=\"body\"\n        role=\"tabpanel\"\n        aria-labelledby=\"igc-step-header-${index}\"\n      >\n        <div ${ref(this._contentRef)} part=\"content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  protected override render() {\n    const renderBeforeHeader = this._contentTop && this._isHorizontal;\n\n    return html`\n      ${cache(\n        renderBeforeHeader\n          ? html`${this._renderContent()} ${this._renderHeader()}`\n          : html`${this._renderHeader()} ${this._renderContent()}`\n      )}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-step': IgcStepComponent;\n  }\n}\n"]}