import * as i0 from '@angular/core';
import { booleanAttribute, Input, ViewEncapsulation, Component, inject, Injectable, EventEmitter, ViewChildren, ContentChildren, Output } from '@angular/core';
import { uniqueId, consumeEvent } from '@eui/core';
import * as i1 from '@eui/components/eui-icon';
import { EUI_ICON } from '@eui/components/eui-icon';
import { Router } from '@angular/router';

/**
 * @description
 * Individual step component within an eui-wizard.
 * Represents a single stage in a multi-step process with configurable state indicators.
 * Supports completion, validation, and warning states with custom labels and icons.
 * Must be used as a child of eui-wizard component.
 * Automatically manages visual state based on wizard navigation and step progression.
 */
class EuiWizardStepComponent {
    constructor() {
        /**
         * Marks the step as completed.
         * Displays completion indicator (typically a checkmark) in the step circle.
         * @default false
         */
        this.isCompleted = false;
        /**
         * Marks the step as currently active.
         * Applies active styling and indicates current wizard position.
         * @default false
         */
        this.isActive = false;
        /**
         * Shows the step title below the step indicator.
         * Inherited from parent wizard but can be overridden per step.
         * @default false
         */
        this.isShowStepTitle = false;
        /**
         * Marks the step as invalid or containing errors.
         * Displays error styling to indicate validation failure.
         * @default false
         */
        this.isInvalid = false;
        /**
         * Marks the step with a warning state.
         * Displays warning styling to indicate attention needed.
         * @default false
         */
        this.isWarning = false;
        /**
         * Disables the step from being selected or navigated to.
         * Prevents user interaction with the step indicator.
         * @default false
         */
        this.isDisabled = false;
    }
    /**
     * TODO: from which one is this method being used from?
     */
    toJSON() {
        return {
            id: this.id,
            indexLabel: this.indexLabel,
            indexIconSvgName: this.indexIconSvgName,
            label: this.label,
            subLabel: this.subLabel,
            isCompleted: this.isCompleted,
            isActive: this.isActive,
            isShowStepTitle: this.isShowStepTitle,
            isInvalid: this.isInvalid,
            isWarning: this.isWarning,
            isDisabled: this.isDisabled,
            index: this.index,
            url: this.url,
        };
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiWizardStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: EuiWizardStepComponent, isStandalone: true, selector: "eui-wizard-step", inputs: { id: "id", indexLabel: "indexLabel", indexIconSvgName: "indexIconSvgName", label: "label", subLabel: "subLabel", index: "index", url: "url", isCompleted: ["isCompleted", "isCompleted", booleanAttribute], isActive: ["isActive", "isActive", booleanAttribute], isShowStepTitle: ["isShowStepTitle", "isShowStepTitle", booleanAttribute], isInvalid: ["isInvalid", "isInvalid", booleanAttribute], isWarning: ["isWarning", "isWarning", booleanAttribute], isDisabled: ["isDisabled", "isDisabled", booleanAttribute] }, ngImport: i0, template: "@if(isActive) {\n    <ng-content />\n}\n", encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiWizardStepComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-wizard-step', encapsulation: ViewEncapsulation.None, template: "@if(isActive) {\n    <ng-content />\n}\n" }]
        }], propDecorators: { id: [{
                type: Input
            }], indexLabel: [{
                type: Input
            }], indexIconSvgName: [{
                type: Input
            }], label: [{
                type: Input
            }], subLabel: [{
                type: Input
            }], index: [{
                type: Input
            }], url: [{
                type: Input
            }], isCompleted: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isActive: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isShowStepTitle: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isInvalid: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isWarning: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isDisabled: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }] } });

/**
 * @description
 * Service for managing wizard state and navigation in eui-wizard components.
 * Tracks active step index, handles step transitions, and integrates with Angular Router for URL-based navigation.
 * Provides programmatic control over wizard progression and step selection.
 * Intended injection scope: Component-level (provided in wizard component).
 * Dependencies: Angular Router for route-based step navigation.
 */
class EuiWizardService {
    constructor() {
        this.activeStepIndex = 1;
        this.steps = [];
        this.router = inject(Router);
    }
    /**
     * Initializes the wizard service with step configuration and routing context.
     * Sets up step collection and determines active step based on current URL.
     * Must be called before using other service methods.
     * @param steps - Array of wizard step configurations to manage
     * @param route - ActivatedRoute for relative navigation context
     */
    init(steps, route) {
        this.steps = steps;
        this.route = route;
        const currentRoute = this.router.url;
        const currentStepUrl = currentRoute.substr(currentRoute.lastIndexOf('/') + 1);
        this.steps.forEach((step, index) => {
            if (step.url === currentStepUrl) {
                this.activeStepIndex = index + 1;
            }
        });
    }
    /**
     * Navigates to a step relative to the current active step.
     * Increments or decrements the active step index by the specified amount.
     * Prevents navigation beyond first or last step boundaries.
     * @param increment - Number of steps to move (positive for forward, negative for backward)
     */
    navigationIncrement(increment) {
        const newIndex = this.activeStepIndex + increment;
        if (newIndex >= 1 && newIndex <= this.steps.length) {
            this.activeStepIndex = newIndex;
        }
    }
    /**
     * Activates a specific wizard step and navigates to its URL if defined.
     * Updates active step index and triggers route navigation when step has associated URL.
     * @param step - The wizard step to select and navigate to
     */
    selectStep(step) {
        this.activeStepIndex = step.index;
        if (step.url) {
            this._navigateToStep(step.url);
        }
    }
    _navigateToStep(url) {
        this.router.navigate([url], { relativeTo: this.route });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiWizardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiWizardService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiWizardService, decorators: [{
            type: Injectable
        }] });

/**
 * @description
 * Multi-step wizard component for guiding users through sequential processes or forms.
 * Displays step indicators with navigation controls and manages step activation state.
 * Supports keyboard navigation with arrow keys and programmatic step selection.
 * Provides both declarative (content children) and programmatic (steps array) configuration.
 * Commonly used for onboarding flows, multi-page forms, checkout processes, and guided workflows.
 *
 * @usageNotes
 * ### Basic Usage
 * ```html
 * <eui-wizard [activeStepIndex]="1" (selectStep)="onStepChange($event)">
 *   <eui-wizard-step label="Personal Info">
 *     <form><!-- step 1 content --></form>
 *   </eui-wizard-step>
 *   <eui-wizard-step label="Address">
 *     <form><!-- step 2 content --></form>
 *   </eui-wizard-step>
 *   <eui-wizard-step label="Review">
 *     <div><!-- step 3 content --></div>
 *   </eui-wizard-step>
 * </eui-wizard>
 * ```
 *
 * ### Programmatic Steps
 * ```html
 * <eui-wizard [steps]="wizardSteps" [activeStepIndex]="currentStep">
 * </eui-wizard>
 * ```
 *
 * ```typescript
 * wizardSteps: EuiWizardStep[] = [
 *   { label: 'Step 1', id: 'step1' },
 *   { label: 'Step 2', id: 'step2' },
 *   { label: 'Step 3', id: 'step3' }
 * ];
 * currentStep = 1;
 * ```
 *
 * ### Accessibility
 * - Use role="navigation" with aria-label describing the wizard
 * - Each step has clear labels and state indicators
 * - Keyboard navigation: Arrow keys to move between steps
 * - Current step is announced to screen readers
 *
 * ### Notes
 * - activeStepIndex is 1-based (first step is 1, not 0)
 * - Steps can be defined declaratively or programmatically
 * - Visual indicators show completed, current, and upcoming steps
 * - Supports both linear and non-linear navigation patterns
 */
class EuiWizardComponent {
    constructor() {
        /**
         * Array of wizard step configurations.
         * Can be used instead of or in addition to content children steps.
         * Each step should conform to EuiWizardStep interface.
         * @default []
         */
        this.steps = [];
        /**
         * Tab index value for keyboard navigation focus management.
         * Controls whether wizard is included in tab order.
         * @default 0
         */
        this.tabindex = 0;
        /**
         * Data attribute used for end-to-end testing identification.
         * @default 'eui-wizard'
         */
        this.e2eAttr = 'eui-wizard';
        /**
         * Emitted when a step is selected or activated.
         * Payload: EuiWizardStep object representing the newly active step.
         * Triggers on user click, keyboard navigation, or programmatic selection.
         */
        this.selectStep = new EventEmitter();
        this.stepContentId = uniqueId();
        /**
         * Enables custom content mode where step content is managed externally.
         * When true, wizard only displays step indicators without content areas.
         * @default false
         */
        this.isCustomContent = false;
        /**
         * Displays step titles below step indicators.
         * Provides additional context for each step in the wizard.
         * @default false
         */
        this.isShowStepTitle = false;
        /**
         * Enables or disables step navigation.
         * When false, prevents users from clicking steps or using keyboard navigation.
         * Useful for enforcing sequential completion.
         * @default true
         */
        this.isNavigationAllowed = true;
    }
    ngAfterContentInit() {
        const stepIdsBuffer = [];
        this.childrenSteps.forEach((step) => {
            this.steps.push(step);
            if (!step.id) {
                step.id = uniqueId();
            }
            stepIdsBuffer.push(step.id);
        });
        this.stepIds = stepIdsBuffer.join(' ');
        const activeSteps = this.steps.filter((step) => step.isActive);
        if (activeSteps.length === 0 && !this.activeStepIndex) {
            this._selectStep(this.steps[0], 1);
        }
        else if (this.activeStepIndex) {
            this._selectStep(this._getStep(this.activeStepIndex - 1), this.activeStepIndex);
        }
        this.steps.forEach((step) => (step.isShowStepTitle = this.isShowStepTitle));
    }
    ngOnChanges(changes) {
        if (changes['steps'] || changes['activeStepIndex']) {
            if (this.activeStepIndex && this.steps) {
                this._selectStep(this._getStep(this.activeStepIndex - 1), this.activeStepIndex);
                const stepIdsBuffer = [];
                this.steps.forEach((step) => {
                    if (!step.id) {
                        step.id = uniqueId();
                    }
                    stepIdsBuffer.push(step.id);
                });
                this.stepIds = stepIdsBuffer.join(' ');
            }
        }
    }
    onSelectStep(step, index) {
        if (!step.isDisabled && this.isNavigationAllowed) {
            this._selectStep(step, index);
        }
    }
    onKeyDown(event) {
        if (this.isNavigationAllowed) {
            switch (event.key) {
                case 'ArrowLeft':
                    consumeEvent(event);
                    this.selectPreviousStep();
                    break;
                case 'ArrowRight':
                    consumeEvent(event);
                    this.selectNextStep();
                    break;
            }
        }
    }
    /** @deprecated This will be removed in next version of eUI */
    trackByFn(index, item) {
        return item.id;
    }
    selectPreviousStep() {
        if (this.isNavigationAllowed && this.steps) {
            // get the index of active step
            const activeStepIndex = this.steps.findIndex((step) => step.isActive);
            let previousIndex = activeStepIndex < 0 ? 0 : activeStepIndex;
            do {
                previousIndex--;
                if (previousIndex < 0) {
                    previousIndex = this.steps.length - 1;
                }
            } while (this.steps[previousIndex].isDisabled);
            this._selectStep(this.steps[previousIndex], previousIndex + 1);
            this.canBeFocused.toArray()[previousIndex].nativeElement.focus();
        }
    }
    selectNextStep() {
        if (this.isNavigationAllowed && this.steps) {
            // get the index of active step
            let activeStepIndex = this.steps.findIndex((step) => step.isActive);
            // in case no step is active point to the first step
            activeStepIndex = activeStepIndex < 0 ? 0 : activeStepIndex;
            do {
                if (++activeStepIndex >= this.steps.length) {
                    activeStepIndex = 0;
                }
            } while (this.steps[activeStepIndex].isDisabled);
            this._selectStep(this.steps[activeStepIndex], activeStepIndex + 1);
            this.canBeFocused.toArray()[activeStepIndex].nativeElement.focus();
        }
    }
    _selectStep(step, index) {
        if (step) {
            this.steps.forEach((currentStep) => (currentStep.isActive = false));
            step.isActive = true;
            step.index = index;
            this.selectStep.emit(step);
        }
    }
    _getStep(index) {
        if (index >= 0 && index <= this.steps.length) {
            return this.steps[index];
        }
        return null;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiWizardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: EuiWizardComponent, isStandalone: true, selector: "eui-wizard", inputs: { activeStepIndex: "activeStepIndex", steps: "steps", tabindex: "tabindex", e2eAttr: "e2eAttr", isCustomContent: ["isCustomContent", "isCustomContent", booleanAttribute], isShowStepTitle: ["isShowStepTitle", "isShowStepTitle", booleanAttribute], isNavigationAllowed: ["isNavigationAllowed", "isNavigationAllowed", booleanAttribute] }, outputs: { selectStep: "selectStep" }, providers: [EuiWizardService], queries: [{ propertyName: "childrenSteps", predicate: EuiWizardStepComponent }], viewQueries: [{ propertyName: "canBeFocused", predicate: ["canBeFocused"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"eui-wizard\" role=\"tablist\" aria-orientation=\"horizontal\" attr.data-e2e=\"{{ e2eAttr }}\">\n    @for (step of steps; track step.id; let idx = $index) {\n        <div\n            #canBeFocused\n            class=\"eui-wizard-step\"\n            role=\"tab\"\n            [id]=\"step.id\"\n            attr.aria-label=\"{{ step?.label }} {{ step?.subLabel }}\"\n            [attr.aria-disabled]=\"step?.isDisabled\"\n            [attr.aria-controls]=\"stepContentId\"\n            [attr.aria-describedby]=\"step?.isActive? stepContentId: null\"\n            [attr.aria-selected]=\"step?.isActive\"\n            [tabindex]=\"!isNavigationAllowed ? -1 : tabindex\"\n            [class.eui-wizard-step--completed]=\"step?.isCompleted\"\n            [class.eui-wizard-step--notallowed]=\"!isNavigationAllowed\"\n            [class.eui-wizard-step--active]=\"step?.isActive\"\n            [class.eui-wizard-step--disabled]=\"step?.isDisabled\"\n            [class.eui-wizard-step--error]=\"step?.isInvalid\"\n            [class.eui--danger]=\"step?.isInvalid\"\n            [class.eui-wizard-step--warning]=\"step?.isWarning\"\n            [class.eui--warning]=\"step?.isWarning\"\n            (click)=\"onSelectStep(step, idx + 1)\"\n            (keydown)=\"onKeyDown($event)\">\n            <div class=\"eui-wizard-step__indicator-wrapper\" role=\"presentation\"></div>\n\n            <div class=\"eui-wizard-step__bullet-item\">\n                <span class=\"eui-wizard-step__bullet-item-icon\">\n                    @if(!step?.indexIconSvgName) {\n                        @if (step?.isCompleted) {\n                            <eui-icon-svg icon=\"eui-checkmark\" />\n                        }\n                        @if (step?.isInvalid) {\n                            <eui-icon-svg icon=\"eui-alert\" />\n                        }\n                    } @else {\n                        @if(step?.indexIconSvgName && step?.indexIconSvgName !== undefined) {\n                            <span role=\"presentation\">\n                                <eui-icon-svg icon=\"{{ step?.indexIconSvgName }}\" class=\"eui-wizard-step__icon\" />\n                            </span>\n                        }\n                    }\n                </span>\n                @if(!step?.indexIconSvgName && !step?.isCompleted && !step?.isInvalid) {\n                    <span class=\"eui-wizard-step__bullet-item-text\"\n                          role=\"presentation\">\n                    {{ step?.indexLabel !== undefined ? step?.indexLabel : idx + 1 }}\n                </span>\n                }\n            </div>\n            <div class=\"eui-wizard-step__label-wrapper\" role=\"presentation\">\n                <div class=\"eui-wizard-step__label-wrapper-label\" role=\"presentation\">\n                    {{ step?.label }}\n                </div>\n                <div class=\"eui-wizard-step__label-wrapper-sub-label\" role=\"presentation\">\n                    {{ step?.subLabel }}\n                </div>\n            </div>\n        </div>\n    }\n</div>\n<div [id]=\"stepContentId\" class=\"step-content\" role=\"tabpanel\">\n    <ng-content></ng-content>\n</div>\n", styles: [".eui-21 .eui-wizard{display:flex;margin:var(--eui-s-xl) 0 -1px 0;padding-bottom:var(--eui-s-l)}.eui-21 .eui-wizard-step{cursor:pointer;flex:1;position:relative;text-align:center}.eui-21 .eui-wizard-step__content{margin:var(--eui-s-m) 0}.eui-21 .eui-wizard-step__current-marker{bottom:0;left:50%;position:absolute;transform:translate(-50%,112%)}.eui-21 .eui-wizard-step__current-marker svg{color:var(--eui-c-primary);fill:var(--eui-c-primary)}.eui-21 .eui-wizard-step__indicator-wrapper{border-bottom:var(--eui-bw-xs) solid var(--eui-c-secondary-border);content:\"\";margin-bottom:var(--eui-s-s);top:var(--eui-s-s);width:100%}.eui-21 .eui-wizard-step__bullet-item{display:flex;align-items:center;justify-content:center;background-color:var(--eui-c-surface-container);border:var(--eui-bw-xs) solid var(--eui-c-secondary-border);border-color:var(--eui-c-secondary-border);border-radius:var(--eui-br-max);height:var(--eui-s-4xl);margin:0 auto;margin-top:-2rem;padding-top:var(--eui-s-xs);width:var(--eui-s-4xl)}.eui-21 .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-c-text);fill:var(--eui-c-text)}.eui-21 .eui-wizard-step__bullet-item-text{margin-top:-.5rem;font:var(--eui-f-l)}.eui-21 .eui-wizard-step__label-wrapper{margin-top:var(--eui-s-m)}.eui-21 .eui-wizard-step__label-wrapper-label{color:var(--eui-c-text);font:var(--eui-f-m-semi-bold)}.eui-21 .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-text-light);font-size:95%;margin-top:var(--eui-s-3xs)}.eui-21 .eui-wizard-step:first-child .eui-21 .eui-wizard-step__indicator-wrapper{margin-left:50%;width:50%}.eui-21 .eui-wizard-step:last-child .eui-21 .eui-wizard-step__indicator-wrapper{margin-right:50%;width:50%}.eui-21 .eui-wizard-step:focus-visible .eui-wizard-step__bullet-item{outline:var(--eui-bw-s) solid var(--eui-c-focus-visible);outline-offset:2px}.eui-21 .eui-wizard-step--active{color:var(--eui-c-white)}.eui-21 .eui-wizard-step--active .eui-wizard-step__bullet-item{background-color:var(--eui-c-primary-surface);border-color:var(--eui-c-primary)}.eui-21 .eui-wizard-step--active .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-c-primary-on-surface);fill:var(--eui-c-primary-on-surface)}.eui-21 .eui-wizard-step--active .eui-wizard-step__label-wrapper-label,.eui-21 .eui-wizard-step--active .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-primary)}.eui-21 .eui-wizard-step--completed .eui-wizard-step__bullet-item{border-color:var(--eui-c-success)}.eui-21 .eui-wizard-step--completed .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-c-success);fill:var(--eui-c-success)}.eui-21 .eui-wizard-step--completed .eui-wizard-step__label-wrapper-label,.eui-21 .eui-wizard-step--completed .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-success)}.eui-21 .eui-wizard-step--completed.eui-wizard-step--active .eui-wizard-step__bullet-item{background-color:var(--eui-c-success-surface);color:var(--eui-c-success-on-surface)}.eui-21 .eui-wizard-step--completed.eui-wizard-step--active .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-c-success-on-surface);fill:var(--eui-c-success-on-surface)}.eui-21 .eui-wizard-step--error .eui-wizard-step__bullet-item{border-color:var(--eui-c-danger)}.eui-21 .eui-wizard-step--error .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-c-danger);fill:var(--eui-c-danger)}.eui-21 .eui-wizard-step--error .eui-wizard-step__label-wrapper-label,.eui-21 .eui-wizard-step--error .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-danger)}.eui-21 .eui-wizard-step--error.eui-wizard-step--active .eui-wizard-step__bullet-item{background-color:var(--eui-c-danger-surface);color:var(--eui-c-danger-on-surface)}.eui-21 .eui-wizard-step--error.eui-wizard-step--active .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-c-danger-on-surface);fill:var(--eui-c-danger-on-surface)}.eui-21 .eui-wizard-step--warning .eui-wizard-step__bullet-item{border-color:var(--eui-c-warning)}.eui-21 .eui-wizard-step--warning .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-c-warning);fill:var(--eui-c-warning)}.eui-21 .eui-wizard-step--warning .eui-wizard-step__label-wrapper-label,.eui-21 .eui-wizard-step--warning .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-warning)}.eui-21 .eui-wizard-step--warning.eui-wizard-step--active .eui-wizard-step__bullet-item{background-color:var(--eui-c-warning-surface);color:var(--eui-c-warning-on-surface)}.eui-21 .eui-wizard-step--warning.eui-wizard-step--active .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-c-warning-on-surface);fill:var(--eui-c-warning-on-surface)}.eui-21 .eui-wizard-step--disabled{background-image:none;box-shadow:none;cursor:not-allowed!important;opacity:var(--eui-o-50)}.eui-21 .eui-wizard-step--disabled:hover{cursor:not-allowed}.eui-21 .eui-wizard-step--notallowed{opacity:var(--eui-o-50)}.eui-21 .eui-wizard-step--notallowed .eui-wizard-step__bullet-item-icon{color:var(--eui-c-white)}.eui-21 .eui-wizard-step--notallowed.eui-wizard-step--disabled .eui-wizard-step__bullet-item-icon{color:var(--eui-c-text-light)}.eui-21 .eui-wizard-step--notallowed.eui-wizard-step--disabled.eui-wizard-step--completed .eui-wizard-step__bullet-item-icon,.eui-21 .eui-wizard-step--notallowed.eui-wizard-step--disabled.eui-wizard-step--error .eui-wizard-step__bullet-item-icon{color:var(--eui-c-white)}.eui-21 .eui-wizard-step--notallowed:hover{cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: i1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiWizardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-wizard', encapsulation: ViewEncapsulation.None, providers: [EuiWizardService], imports: [
                        ...EUI_ICON,
                    ], template: "<div class=\"eui-wizard\" role=\"tablist\" aria-orientation=\"horizontal\" attr.data-e2e=\"{{ e2eAttr }}\">\n    @for (step of steps; track step.id; let idx = $index) {\n        <div\n            #canBeFocused\n            class=\"eui-wizard-step\"\n            role=\"tab\"\n            [id]=\"step.id\"\n            attr.aria-label=\"{{ step?.label }} {{ step?.subLabel }}\"\n            [attr.aria-disabled]=\"step?.isDisabled\"\n            [attr.aria-controls]=\"stepContentId\"\n            [attr.aria-describedby]=\"step?.isActive? stepContentId: null\"\n            [attr.aria-selected]=\"step?.isActive\"\n            [tabindex]=\"!isNavigationAllowed ? -1 : tabindex\"\n            [class.eui-wizard-step--completed]=\"step?.isCompleted\"\n            [class.eui-wizard-step--notallowed]=\"!isNavigationAllowed\"\n            [class.eui-wizard-step--active]=\"step?.isActive\"\n            [class.eui-wizard-step--disabled]=\"step?.isDisabled\"\n            [class.eui-wizard-step--error]=\"step?.isInvalid\"\n            [class.eui--danger]=\"step?.isInvalid\"\n            [class.eui-wizard-step--warning]=\"step?.isWarning\"\n            [class.eui--warning]=\"step?.isWarning\"\n            (click)=\"onSelectStep(step, idx + 1)\"\n            (keydown)=\"onKeyDown($event)\">\n            <div class=\"eui-wizard-step__indicator-wrapper\" role=\"presentation\"></div>\n\n            <div class=\"eui-wizard-step__bullet-item\">\n                <span class=\"eui-wizard-step__bullet-item-icon\">\n                    @if(!step?.indexIconSvgName) {\n                        @if (step?.isCompleted) {\n                            <eui-icon-svg icon=\"eui-checkmark\" />\n                        }\n                        @if (step?.isInvalid) {\n                            <eui-icon-svg icon=\"eui-alert\" />\n                        }\n                    } @else {\n                        @if(step?.indexIconSvgName && step?.indexIconSvgName !== undefined) {\n                            <span role=\"presentation\">\n                                <eui-icon-svg icon=\"{{ step?.indexIconSvgName }}\" class=\"eui-wizard-step__icon\" />\n                            </span>\n                        }\n                    }\n                </span>\n                @if(!step?.indexIconSvgName && !step?.isCompleted && !step?.isInvalid) {\n                    <span class=\"eui-wizard-step__bullet-item-text\"\n                          role=\"presentation\">\n                    {{ step?.indexLabel !== undefined ? step?.indexLabel : idx + 1 }}\n                </span>\n                }\n            </div>\n            <div class=\"eui-wizard-step__label-wrapper\" role=\"presentation\">\n                <div class=\"eui-wizard-step__label-wrapper-label\" role=\"presentation\">\n                    {{ step?.label }}\n                </div>\n                <div class=\"eui-wizard-step__label-wrapper-sub-label\" role=\"presentation\">\n                    {{ step?.subLabel }}\n                </div>\n            </div>\n        </div>\n    }\n</div>\n<div [id]=\"stepContentId\" class=\"step-content\" role=\"tabpanel\">\n    <ng-content></ng-content>\n</div>\n", styles: [".eui-21 .eui-wizard{display:flex;margin:var(--eui-s-xl) 0 -1px 0;padding-bottom:var(--eui-s-l)}.eui-21 .eui-wizard-step{cursor:pointer;flex:1;position:relative;text-align:center}.eui-21 .eui-wizard-step__content{margin:var(--eui-s-m) 0}.eui-21 .eui-wizard-step__current-marker{bottom:0;left:50%;position:absolute;transform:translate(-50%,112%)}.eui-21 .eui-wizard-step__current-marker svg{color:var(--eui-c-primary);fill:var(--eui-c-primary)}.eui-21 .eui-wizard-step__indicator-wrapper{border-bottom:var(--eui-bw-xs) solid var(--eui-c-secondary-border);content:\"\";margin-bottom:var(--eui-s-s);top:var(--eui-s-s);width:100%}.eui-21 .eui-wizard-step__bullet-item{display:flex;align-items:center;justify-content:center;background-color:var(--eui-c-surface-container);border:var(--eui-bw-xs) solid var(--eui-c-secondary-border);border-color:var(--eui-c-secondary-border);border-radius:var(--eui-br-max);height:var(--eui-s-4xl);margin:0 auto;margin-top:-2rem;padding-top:var(--eui-s-xs);width:var(--eui-s-4xl)}.eui-21 .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-c-text);fill:var(--eui-c-text)}.eui-21 .eui-wizard-step__bullet-item-text{margin-top:-.5rem;font:var(--eui-f-l)}.eui-21 .eui-wizard-step__label-wrapper{margin-top:var(--eui-s-m)}.eui-21 .eui-wizard-step__label-wrapper-label{color:var(--eui-c-text);font:var(--eui-f-m-semi-bold)}.eui-21 .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-text-light);font-size:95%;margin-top:var(--eui-s-3xs)}.eui-21 .eui-wizard-step:first-child .eui-21 .eui-wizard-step__indicator-wrapper{margin-left:50%;width:50%}.eui-21 .eui-wizard-step:last-child .eui-21 .eui-wizard-step__indicator-wrapper{margin-right:50%;width:50%}.eui-21 .eui-wizard-step:focus-visible .eui-wizard-step__bullet-item{outline:var(--eui-bw-s) solid var(--eui-c-focus-visible);outline-offset:2px}.eui-21 .eui-wizard-step--active{color:var(--eui-c-white)}.eui-21 .eui-wizard-step--active .eui-wizard-step__bullet-item{background-color:var(--eui-c-primary-surface);border-color:var(--eui-c-primary)}.eui-21 .eui-wizard-step--active .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-c-primary-on-surface);fill:var(--eui-c-primary-on-surface)}.eui-21 .eui-wizard-step--active .eui-wizard-step__label-wrapper-label,.eui-21 .eui-wizard-step--active .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-primary)}.eui-21 .eui-wizard-step--completed .eui-wizard-step__bullet-item{border-color:var(--eui-c-success)}.eui-21 .eui-wizard-step--completed .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-c-success);fill:var(--eui-c-success)}.eui-21 .eui-wizard-step--completed .eui-wizard-step__label-wrapper-label,.eui-21 .eui-wizard-step--completed .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-success)}.eui-21 .eui-wizard-step--completed.eui-wizard-step--active .eui-wizard-step__bullet-item{background-color:var(--eui-c-success-surface);color:var(--eui-c-success-on-surface)}.eui-21 .eui-wizard-step--completed.eui-wizard-step--active .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-c-success-on-surface);fill:var(--eui-c-success-on-surface)}.eui-21 .eui-wizard-step--error .eui-wizard-step__bullet-item{border-color:var(--eui-c-danger)}.eui-21 .eui-wizard-step--error .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-c-danger);fill:var(--eui-c-danger)}.eui-21 .eui-wizard-step--error .eui-wizard-step__label-wrapper-label,.eui-21 .eui-wizard-step--error .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-danger)}.eui-21 .eui-wizard-step--error.eui-wizard-step--active .eui-wizard-step__bullet-item{background-color:var(--eui-c-danger-surface);color:var(--eui-c-danger-on-surface)}.eui-21 .eui-wizard-step--error.eui-wizard-step--active .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-c-danger-on-surface);fill:var(--eui-c-danger-on-surface)}.eui-21 .eui-wizard-step--warning .eui-wizard-step__bullet-item{border-color:var(--eui-c-warning)}.eui-21 .eui-wizard-step--warning .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-c-warning);fill:var(--eui-c-warning)}.eui-21 .eui-wizard-step--warning .eui-wizard-step__label-wrapper-label,.eui-21 .eui-wizard-step--warning .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-warning)}.eui-21 .eui-wizard-step--warning.eui-wizard-step--active .eui-wizard-step__bullet-item{background-color:var(--eui-c-warning-surface);color:var(--eui-c-warning-on-surface)}.eui-21 .eui-wizard-step--warning.eui-wizard-step--active .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-c-warning-on-surface);fill:var(--eui-c-warning-on-surface)}.eui-21 .eui-wizard-step--disabled{background-image:none;box-shadow:none;cursor:not-allowed!important;opacity:var(--eui-o-50)}.eui-21 .eui-wizard-step--disabled:hover{cursor:not-allowed}.eui-21 .eui-wizard-step--notallowed{opacity:var(--eui-o-50)}.eui-21 .eui-wizard-step--notallowed .eui-wizard-step__bullet-item-icon{color:var(--eui-c-white)}.eui-21 .eui-wizard-step--notallowed.eui-wizard-step--disabled .eui-wizard-step__bullet-item-icon{color:var(--eui-c-text-light)}.eui-21 .eui-wizard-step--notallowed.eui-wizard-step--disabled.eui-wizard-step--completed .eui-wizard-step__bullet-item-icon,.eui-21 .eui-wizard-step--notallowed.eui-wizard-step--disabled.eui-wizard-step--error .eui-wizard-step__bullet-item-icon{color:var(--eui-c-white)}.eui-21 .eui-wizard-step--notallowed:hover{cursor:not-allowed}\n"] }]
        }], propDecorators: { activeStepIndex: [{
                type: Input
            }], steps: [{
                type: Input
            }], tabindex: [{
                type: Input
            }], e2eAttr: [{
                type: Input
            }], selectStep: [{
                type: Output
            }], childrenSteps: [{
                type: ContentChildren,
                args: [EuiWizardStepComponent]
            }], canBeFocused: [{
                type: ViewChildren,
                args: ['canBeFocused']
            }], isCustomContent: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isShowStepTitle: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isNavigationAllowed: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }] } });

class EuiWizardStep {
    // TODO:  find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    constructor(values = {}) {
        this.isCompleted = false;
        this.isActive = false;
        this.isShowStepTitle = false;
        this.isInvalid = false;
        this.isWarning = false;
        this.isDisabled = false;
        Object.assign(this, values);
    }
    toString() {
        return JSON.stringify(this.toJSON());
    }
    toJSON() {
        return {
            id: this.id,
            indexLabel: this.indexLabel,
            indexIconSvgName: this.indexIconSvgName,
            label: this.label,
            subLabel: this.subLabel,
            isCompleted: this.isCompleted,
            isActive: this.isActive,
            isShowStepTitle: this.isShowStepTitle,
            isInvalid: this.isInvalid,
            isWarning: this.isWarning,
            isDisabled: this.isDisabled,
            index: this.index,
            url: this.url,
        };
    }
}

const EUI_WIZARD = [
    EuiWizardStepComponent,
    EuiWizardComponent,
];

/**
 * Generated bundle index. Do not edit.
 */

export { EUI_WIZARD, EuiWizardComponent, EuiWizardService, EuiWizardStep, EuiWizardStepComponent };
//# sourceMappingURL=eui-components-eui-wizard.mjs.map
