var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    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 { html, LitElement, nothing } from 'lit';
import { property, query, queryAssignedElements } from 'lit/decorators.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 { registerComponent } from '../common/definitions/register.js';
import { partMap } from '../common/part-map.js';
import { bodyAnimations, contentAnimations, } from './animations.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';
export default class IgcStepComponent extends LitElement {
    static { this.tagName = 'igc-step'; }
    static { this.styles = [styles, shared]; }
    static register() {
        registerComponent(IgcStepComponent);
    }
    constructor() {
        super();
        this.bodyRef = createRef();
        this.contentRef = createRef();
        this.bodyAnimationPlayer = addAnimationController(this, this.bodyRef);
        this.contentAnimationPlayer = addAnimationController(this, this.contentRef);
        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);
    }
    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 options = {
            duration: this.animationDuration,
            easing: EaseInOut.Quad,
            direction,
        };
        const step = {
            height: bodyHeight,
        };
        const [_, event] = await Promise.all([
            this.bodyAnimationPlayer.stopAll(),
            this.bodyAnimationPlayer.play(bodyAnimation({ keyframe: options, step })),
            this.contentAnimationPlayer.stopAll(),
            this.contentAnimationPlayer.play(contentAnimation({ keyframe: options, step })),
        ]);
        return event.type;
    }
    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() {
        return {
            'header-container': true,
            disabled: !this.isAccessible,
            'complete-start': this.complete,
            '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'),
        };
    }
    get textParts() {
        return {
            text: true,
            empty: this.stepType === 'indicator'
                ? true
                : this.stepType === 'full' &&
                    !this._titleChildren.length &&
                    !this._subTitleChildren.length,
        };
    }
    renderIndicator() {
        if (this.stepType !== 'title') {
            return html `
        <div part="indicator">
          <slot name="indicator">
            <span>${this.index + 1}</span>
          </slot>
        </div>
      `;
        }
        return nothing;
    }
    renderTitleAndSubtitle() {
        return html `
      <div part=${partMap(this.textParts)}>
        <div part="title">
          <slot name="title"></slot>
        </div>
        <div part="subtitle">
          <slot name="subtitle"></slot>
        </div>
      </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() {
        return html `
      ${when(this.contentTop && this.orientation === 'horizontal', () => this.renderContent(), () => nothing)}
      <div part=${partMap(this.headerContainerParts)}>
        <div
          part="header"
          tabindex="${this.active ? '0' : '-1'}"
          role="tab"
          aria-selected="${this.active}"
          @click=${this.handleClick}
          @keydown=${this.handleKeydown}
        >
          ${this.renderIndicator()} ${this.renderTitleAndSubtitle()}
        </div>
      </div>
      ${when(this.orientation === 'vertical' || !this.contentTop, () => this.renderContent(), () => nothing)}
    `;
    }
}
__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);
__decorate([
    query('[part~="body"]')
], IgcStepComponent.prototype, "contentBody", void 0);
__decorate([
    property({ reflect: true, type: Boolean })
], IgcStepComponent.prototype, "invalid", void 0);
__decorate([
    property({ reflect: true, type: Boolean })
], IgcStepComponent.prototype, "active", void 0);
__decorate([
    property({ type: Boolean })
], IgcStepComponent.prototype, "optional", void 0);
__decorate([
    property({ reflect: true, type: Boolean })
], IgcStepComponent.prototype, "disabled", void 0);
__decorate([
    property({ reflect: true, type: Boolean })
], 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