(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@wm/components/base'), require('@wm/core')) :
    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', '@angular/forms', '@wm/components/base', '@wm/core'], factory) :
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.containers = global.wm.components.containers || {}, global.wm.components.containers.wizard = {}), global.ng.core, global.ng.common, global.ng.forms, global.wm.components.base, global.wm.core));
})(this, (function (exports, i0, i1$1, i1, i2, core) { 'use strict';

    function _interopNamespaceDefault(e) {
        var n = Object.create(null);
        if (e) {
            Object.keys(e).forEach(function (k) {
                if (k !== 'default') {
                    var d = Object.getOwnPropertyDescriptor(e, k);
                    Object.defineProperty(n, k, d.get ? d : {
                        enumerable: true,
                        get: function () { return e[k]; }
                    });
                }
            });
        }
        n.default = e;
        return Object.freeze(n);
    }

    var i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
    var i1$1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1$1);
    var i1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1);
    var i2__namespace = /*#__PURE__*/_interopNamespaceDefault(i2);

    const registerProps$1 = () => {
        i2.register('wm-wizard', new Map([
            ['actionsalignment', { value: 'right', ...i2.PROP_STRING }],
            ['cancelable', { value: true, ...i2.PROP_BOOLEAN }],
            ['enablenext', { value: false, ...i2.PROP_BOOLEAN }],
            ['cancelbtnlabel', { value: 'Cancel', ...i2.PROP_STRING }],
            ['class', { value: 'classic', ...i2.PROP_STRING }],
            ['defaultstep', { value: 'none', ...i2.PROP_STRING }],
            ['donebtnlabel', { value: 'Done', ...i2.PROP_STRING }],
            ['name', i2.PROP_STRING],
            ['nextbtnlabel', { value: 'Next', ...i2.PROP_STRING }],
            ['previousbtnlabel', { value: 'Previous', ...i2.PROP_STRING }],
            ['show', { value: true, ...i2.PROP_BOOLEAN }],
            ['stepstyle', { value: 'auto', ...i2.PROP_STRING }]
        ]));
    };

    const registerProps = () => {
        i2.register('wm-wizardstep', new Map([
            ['class', i2.PROP_STRING],
            ['enableskip', { value: false, ...i2.PROP_BOOLEAN }],
            ['iconclass', { value: 'wi wi-person', ...i2.PROP_STRING }],
            ['doneiconclass', { value: 'wi wi-done', ...i2.PROP_STRING }],
            ['name', i2.PROP_STRING],
            ['show', { value: true, ...i2.PROP_BOOLEAN }],
            ['title', { value: 'Step Title', ...i2.PROP_STRING }],
            ['subtitle', i2.PROP_STRING]
        ]));
    };

    const DEFAULT_CLS$1 = 'app-wizard-step-content';
    const WIDGET_CONFIG$1 = {
        widgetType: 'wm-wizardstep',
        hostClass: DEFAULT_CLS$1,
    };
    class WizardStepDirective extends i2.BaseComponent {
        static { this.initializeProps = registerProps(); }
        get isCurrent() {
            return this.active;
        }
        /**
         * along with the wizard form , also validate the forms
         * if there are any inside the wizard
         * @returns {boolean}
         */
        get isValid() {
            return (this.ngForm.valid || this.ngForm.disabled) && this.areEmbeddedFormsValid();
        }
        /**
         * get all the forms inside the wizard if any and validate
         * @returns {boolean}
         */
        areEmbeddedFormsValid() {
            let embeddedForms = this.getAllEmbeddedForms();
            for (let form of embeddedForms) {
                if (form.widget && !form.widget.ngform.valid) {
                    return false;
                }
            }
            return true;
        }
        getAllEmbeddedForms() {
            return this.$element.find('form');
        }
        get enableNext() {
            return !this.disablenext;
        }
        get enableDone() {
            return !this.disabledone;
        }
        get enablePrev() {
            return !this.disableprevious;
        }
        set active(nv) {
            const isActive = this.active;
            this.status = 1 /* STEP_STATUS.CURRENT */;
            if (nv && !isActive) {
                this.redrawChildren();
            }
        }
        get active() {
            return this.status === 1 /* STEP_STATUS.CURRENT */;
        }
        set done(nv) {
            if (nv) {
                this.status = 3 /* STEP_STATUS.COMPLETED */;
            }
        }
        get done() {
            return this.status === 3 /* STEP_STATUS.COMPLETED */;
        }
        set disabled(nv) {
            if (nv) {
                this.status = 2 /* STEP_STATUS.DISABLED */;
            }
        }
        get disabled() {
            return this.status === 2 /* STEP_STATUS.DISABLED */;
        }
        constructor(inj, ngForm, explicitContext) {
            super(inj, WIDGET_CONFIG$1, explicitContext);
            this.ngForm = ngForm;
            this.isDone = false;
            this.status = 2 /* STEP_STATUS.DISABLED */;
            // If we inject directly as a param in the constructor, getting circular dependency error in unit testcases
            this.wizardComponent = this.inj.get(WizardComponent);
        }
        invokeNextCB(index) {
            return this.invokeEventCallback('next', { currentStep: this, stepIndex: index });
        }
        invokePrevCB(index) {
            return this.invokeEventCallback('prev', { currentStep: this, stepIndex: index });
        }
        invokeSkipCB(index) {
            return this.invokeEventCallback('skip', { currentStep: this, stepIndex: index });
        }
        // redraw all the projected components which are projected.
        redrawChildren() {
            setTimeout(() => {
                if (this.reDrawableComponents) {
                    this.reDrawableComponents.forEach(c => c.redraw());
                }
                const stepIndex = this.wizardComponent.getCurrentStepIndex();
                this.invokeEventCallback('load', { stepIndex });
            }, 100);
        }
        static { this.ɵfac = function WizardStepDirective_Factory(t) { return new (t || WizardStepDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1__namespace.NgForm, 2), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
        static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: WizardStepDirective, selectors: [["form", "wmWizardStep", ""]], contentQueries: function WizardStepDirective_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
                i0__namespace.ɵɵcontentQuery(dirIndex, i2.RedrawableDirective, 5);
            } if (rf & 2) {
                let _t;
                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.reDrawableComponents = _t);
            } }, hostVars: 2, hostBindings: function WizardStepDirective_HostBindings(rf, ctx) { if (rf & 2) {
                i0__namespace.ɵɵclassProp("current", ctx.isCurrent);
            } }, exportAs: ["wmWizardStep"], features: [i0__namespace.ɵɵProvidersFeature([
                    i2.provideAsWidgetRef(WizardStepDirective),
                    i1.NgForm
                ]), i0__namespace.ɵɵInheritDefinitionFeature] }); }
    }
    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(WizardStepDirective, [{
            type: i0.Directive,
            args: [{
                    selector: 'form[wmWizardStep]',
                    providers: [
                        i2.provideAsWidgetRef(WizardStepDirective),
                        i1.NgForm
                    ],
                    exportAs: 'wmWizardStep'
                }]
        }], () => [{ type: i0__namespace.Injector }, { type: i1__namespace.NgForm, decorators: [{
                    type: i0.Self
                }] }, { type: undefined, decorators: [{
                    type: i0.Inject,
                    args: ['EXPLICIT_CONTEXT']
                }, {
                    type: i0.Optional
                }] }], { reDrawableComponents: [{
                type: i0.ContentChildren,
                args: [i2.RedrawableDirective, { descendants: true }]
            }], isCurrent: [{
                type: i0.HostBinding,
                args: ['class.current']
            }] }); })();

    const _c0 = ["wmWizard", ""];
    const _c1 = ["*"];
    const _c2 = (a0, a1, a2) => ({ active: a0, current: a1, disabled: a2 });
    const _c3 = a0 => ({ "title-center-align": a0 });
    function WizardComponent_li_2_span_2_Template(rf, ctx) { if (rf & 1) {
        i0__namespace.ɵɵelement(0, "span", 22);
    } }
    function WizardComponent_li_2_span_4_Template(rf, ctx) { if (rf & 1) {
        i0__namespace.ɵɵelementStart(0, "span", 23);
        i0__namespace.ɵɵtext(1);
        i0__namespace.ɵɵelementEnd();
    } if (rf & 2) {
        const i_r4 = i0__namespace.ɵɵnextContext().index;
        i0__namespace.ɵɵadvance();
        i0__namespace.ɵɵtextInterpolate(i_r4 + 1);
    } }
    function WizardComponent_li_2_i_5_Template(rf, ctx) { if (rf & 1) {
        i0__namespace.ɵɵelement(0, "i", 24);
    } }
    function WizardComponent_li_2_i_6_Template(rf, ctx) { if (rf & 1) {
        i0__namespace.ɵɵelement(0, "i", 25);
    } }
    function WizardComponent_li_2_i_7_Template(rf, ctx) { if (rf & 1) {
        i0__namespace.ɵɵelement(0, "i");
    } if (rf & 2) {
        const step_r2 = i0__namespace.ɵɵnextContext().$implicit;
        i0__namespace.ɵɵclassMapInterpolate1("app-icon ", step_r2.iconclass, "");
    } }
    function WizardComponent_li_2_i_8_Template(rf, ctx) { if (rf & 1) {
        i0__namespace.ɵɵelement(0, "i");
    } if (rf & 2) {
        const step_r2 = i0__namespace.ɵɵnextContext().$implicit;
        i0__namespace.ɵɵclassMapInterpolate1("app-icon ", step_r2.doneiconclass, "");
    } }
    function WizardComponent_li_2_span_10_Template(rf, ctx) { if (rf & 1) {
        i0__namespace.ɵɵelementStart(0, "span");
        i0__namespace.ɵɵtext(1);
        i0__namespace.ɵɵelementEnd();
    } if (rf & 2) {
        const i_r4 = i0__namespace.ɵɵnextContext().index;
        i0__namespace.ɵɵadvance();
        i0__namespace.ɵɵtextInterpolate("0" + (i_r4 + 1));
    } }
    function WizardComponent_li_2_span_12_Template(rf, ctx) { if (rf & 1) {
        const _r5 = i0__namespace.ɵɵgetCurrentView();
        i0__namespace.ɵɵelementStart(0, "span", 26);
        i0__namespace.ɵɵelement(1, "span", 20);
        i0__namespace.ɵɵelementStart(2, "a", 27);
        i0__namespace.ɵɵlistener("click", function WizardComponent_li_2_span_12_Template_a_click_2_listener() { i0__namespace.ɵɵrestoreView(_r5); const ctx_r2 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r2.readMoreSubtitle()); });
        i0__namespace.ɵɵtext(3, "more");
        i0__namespace.ɵɵelementEnd()();
    } if (rf & 2) {
        const step_r2 = i0__namespace.ɵɵnextContext().$implicit;
        i0__namespace.ɵɵattribute("title", step_r2.subtitle);
        i0__namespace.ɵɵadvance();
        i0__namespace.ɵɵproperty("textContent", step_r2.subtitle);
    } }
    function WizardComponent_li_2_Template(rf, ctx) { if (rf & 1) {
        const _r1 = i0__namespace.ɵɵgetCurrentView();
        i0__namespace.ɵɵelementStart(0, "li", 10);
        i0__namespace.ɵɵlistener("click", function WizardComponent_li_2_Template_li_click_0_listener($event) { const step_r2 = i0__namespace.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r2.onWizardHeaderClick($event, step_r2)); });
        i0__namespace.ɵɵelementStart(1, "a", 11);
        i0__namespace.ɵɵtemplate(2, WizardComponent_li_2_span_2_Template, 1, 0, "span", 12);
        i0__namespace.ɵɵelementStart(3, "span", 13);
        i0__namespace.ɵɵtemplate(4, WizardComponent_li_2_span_4_Template, 2, 1, "span", 14)(5, WizardComponent_li_2_i_5_Template, 1, 0, "i", 15)(6, WizardComponent_li_2_i_6_Template, 1, 0, "i", 16)(7, WizardComponent_li_2_i_7_Template, 1, 3, "i", 17)(8, WizardComponent_li_2_i_8_Template, 1, 3, "i", 17);
        i0__namespace.ɵɵelementEnd();
        i0__namespace.ɵɵelementStart(9, "span", 18);
        i0__namespace.ɵɵtemplate(10, WizardComponent_li_2_span_10_Template, 2, 1, "span", 19);
        i0__namespace.ɵɵelement(11, "span", 20);
        i0__namespace.ɵɵelementEnd();
        i0__namespace.ɵɵtemplate(12, WizardComponent_li_2_span_12_Template, 4, 2, "span", 21);
        i0__namespace.ɵɵelementEnd()();
    } if (rf & 2) {
        const step_r2 = ctx.$implicit;
        const ctx_r2 = i0__namespace.ɵɵnextContext();
        i0__namespace.ɵɵproperty("hidden", !step_r2.show)("ngClass", i0__namespace.ɵɵpureFunction3(14, _c2, step_r2.done, step_r2.active, step_r2.disabled));
        i0__namespace.ɵɵadvance();
        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(18, _c3, ctx_r2.class && ctx_r2.class.includes("classic") && !step_r2.subtitle));
        i0__namespace.ɵɵattribute("aria-label", step_r2.title)("title", step_r2.title);
        i0__namespace.ɵɵadvance();
        i0__namespace.ɵɵproperty("ngIf", ctx_r2.class && ctx_r2.class.includes("classic"));
        i0__namespace.ɵɵadvance(2);
        i0__namespace.ɵɵproperty("ngIf", ctx_r2.class && ctx_r2.class.includes("number") && !step_r2.isDone);
        i0__namespace.ɵɵadvance();
        i0__namespace.ɵɵproperty("ngIf", ctx_r2.class && (ctx_r2.class.includes("dottedstepper") || ctx_r2.class.includes("text-inline") && !ctx_r2.class.includes("iconstepper")) && !step_r2.isDone);
        i0__namespace.ɵɵadvance();
        i0__namespace.ɵɵproperty("ngIf", ctx_r2.class && (ctx_r2.class.includes("dottedstepper") || ctx_r2.class.includes("number")) && step_r2.isDone);
        i0__namespace.ɵɵadvance();
        i0__namespace.ɵɵproperty("ngIf", ctx_r2.class && ctx_r2.class.includes("iconstepper") && (step_r2.iconclass && !step_r2.isDone || step_r2.iconclass && step_r2.isDone && step_r2.doneiconclass === ""));
        i0__namespace.ɵɵadvance();
        i0__namespace.ɵɵproperty("ngIf", step_r2.doneiconclass && step_r2.isDone && (ctx_r2.class && ctx_r2.class.includes("iconstepper")));
        i0__namespace.ɵɵadvance(2);
        i0__namespace.ɵɵproperty("ngIf", ctx_r2.class && ctx_r2.class.includes("text-inline"));
        i0__namespace.ɵɵadvance();
        i0__namespace.ɵɵproperty("textContent", step_r2.title);
        i0__namespace.ɵɵadvance();
        i0__namespace.ɵɵproperty("ngIf", step_r2.subtitle);
    } }
    function WizardComponent_p_4_Template(rf, ctx) { if (rf & 1) {
        i0__namespace.ɵɵelement(0, "p", 28);
    } }
    function WizardComponent_a_7_Template(rf, ctx) { if (rf & 1) {
        const _r6 = i0__namespace.ɵɵgetCurrentView();
        i0__namespace.ɵɵelementStart(0, "a", 29);
        i0__namespace.ɵɵlistener("click", function WizardComponent_a_7_Template_a_click_0_listener() { i0__namespace.ɵɵrestoreView(_r6); const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r2.skip()); });
        i0__namespace.ɵɵtext(1, "Skip \u00BB");
        i0__namespace.ɵɵelementEnd();
    } if (rf & 2) {
        const ctx_r2 = i0__namespace.ɵɵnextContext();
        i0__namespace.ɵɵpropertyInterpolate1("name", "skipStep_", ctx_r2.name, "");
    } }
    function WizardComponent_button_9_Template(rf, ctx) { if (rf & 1) {
        const _r7 = i0__namespace.ɵɵgetCurrentView();
        i0__namespace.ɵɵelementStart(0, "button", 30);
        i0__namespace.ɵɵlistener("click", function WizardComponent_button_9_Template_button_click_0_listener() { i0__namespace.ɵɵrestoreView(_r7); const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r2.cancel()); });
        i0__namespace.ɵɵelementEnd();
    } if (rf & 2) {
        const ctx_r2 = i0__namespace.ɵɵnextContext();
        i0__namespace.ɵɵpropertyInterpolate1("name", "cancelBtn_", ctx_r2.name, "");
        i0__namespace.ɵɵproperty("title", ctx_r2.cancelbtnlabel)("textContent", ctx_r2.cancelbtnlabel);
    } }
    function WizardComponent_button_10_Template(rf, ctx) { if (rf & 1) {
        const _r8 = i0__namespace.ɵɵgetCurrentView();
        i0__namespace.ɵɵelementStart(0, "button", 31);
        i0__namespace.ɵɵlistener("click", function WizardComponent_button_10_Template_button_click_0_listener() { i0__namespace.ɵɵrestoreView(_r8); const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r2.prev()); });
        i0__namespace.ɵɵelement(1, "i", 32)(2, "span", 33);
        i0__namespace.ɵɵelementEnd();
    } if (rf & 2) {
        const ctx_r2 = i0__namespace.ɵɵnextContext();
        i0__namespace.ɵɵpropertyInterpolate1("name", "previousBtn_", ctx_r2.name, "");
        i0__namespace.ɵɵproperty("disabled", !ctx_r2.enablePrev);
        i0__namespace.ɵɵadvance(2);
        i0__namespace.ɵɵproperty("textContent", ctx_r2.previousbtnlabel);
    } }
    function WizardComponent_button_11_Template(rf, ctx) { if (rf & 1) {
        const _r9 = i0__namespace.ɵɵgetCurrentView();
        i0__namespace.ɵɵelementStart(0, "button", 34);
        i0__namespace.ɵɵlistener("click", function WizardComponent_button_11_Template_button_click_0_listener() { i0__namespace.ɵɵrestoreView(_r9); const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r2.next()); });
        i0__namespace.ɵɵelement(1, "span", 33)(2, "i", 35);
        i0__namespace.ɵɵelementEnd();
    } if (rf & 2) {
        const ctx_r2 = i0__namespace.ɵɵnextContext();
        i0__namespace.ɵɵpropertyInterpolate1("name", "nextBtn_", ctx_r2.name, "");
        i0__namespace.ɵɵproperty("disabled", !ctx_r2.enableNext);
        i0__namespace.ɵɵadvance();
        i0__namespace.ɵɵproperty("textContent", ctx_r2.nextbtnlabel);
    } }
    function WizardComponent_button_12_Template(rf, ctx) { if (rf & 1) {
        const _r10 = i0__namespace.ɵɵgetCurrentView();
        i0__namespace.ɵɵelementStart(0, "button", 36);
        i0__namespace.ɵɵlistener("click", function WizardComponent_button_12_Template_button_click_0_listener() { i0__namespace.ɵɵrestoreView(_r10); const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r2.done()); });
        i0__namespace.ɵɵelement(1, "i", 37)(2, "span", 33);
        i0__namespace.ɵɵelementEnd();
    } if (rf & 2) {
        const ctx_r2 = i0__namespace.ɵɵnextContext();
        i0__namespace.ɵɵpropertyInterpolate1("name", "doneBtn_", ctx_r2.name, "");
        i0__namespace.ɵɵproperty("disabled", !ctx_r2.enableDone);
        i0__namespace.ɵɵadvance(2);
        i0__namespace.ɵɵproperty("textContent", ctx_r2.donebtnlabel);
    } }
    const DEFAULT_CLS = 'app-wizard panel clearfix';
    const WIDGET_CONFIG = {
        widgetType: 'wm-wizard',
        hostClass: DEFAULT_CLS
    };
    class WizardComponent extends i2.StylableComponent {
        static { this.initializeProps = registerProps$1(); }
        get hasPrevStep() {
            return !this.isFirstStep(this.currentStep);
        }
        get hasNextStep() {
            return !this.isLastStep(this.currentStep);
        }
        get showDoneBtn() {
            if (!this.currentStep) {
                return;
            }
            return !this.hasNextStep && this.currentStep.enableDone;
        }
        get enablePrev() {
            if (!this.currentStep) {
                return;
            }
            return this.currentStep.enablePrev;
        }
        get enableNext() {
            if (!this.currentStep) {
                return;
            }
            return this.enablenext ? true : (this.currentStep.enableNext && this.currentStep.isValid);
        }
        get enableDone() {
            if (!this.currentStep) {
                return;
            }
            return this.currentStep.enableDone && this.currentStep.isValid;
        }
        constructor(inj, explicitContext) {
            let resolveFn = core.noop;
            super(inj, WIDGET_CONFIG, explicitContext, new Promise(res => resolveFn = res));
            i2.styler(this.nativeElement, this, i2.APPLY_STYLES_TYPE.SHELL);
            this.promiseResolverFn = resolveFn;
            // initialize the message object with default values
            this.message = {
                caption: '',
                type: ''
            };
        }
        /**
         * returns next valid step. the index passed is also checked if its valid step
         * @param index
         * @returns {WizardStepDirective}
         */
        getNextValidStepFormIndex(index) {
            for (let i = index; i < this.steps.length; i++) {
                const step = this.getStepRefByIndex(i);
                if (step.show) {
                    return step;
                }
            }
        }
        /**
         * returns previous valid step. the index passed is also checked if its valid step
         * @param index
         * @returns {WizardStepDirective}
         */
        getPreviousValidStepFormIndex(index) {
            for (let i = index; i >= 0; i--) {
                const step = this.getStepRefByIndex(i);
                if (step.show) {
                    return step;
                }
            }
        }
        /**
         * returns current step index value.
         * @returns {number}
         */
        getCurrentStepIndex() {
            return this.getStepIndexByRef(this.currentStep);
        }
        /**
         * returns stepRef when index is passed.
         * @param {number} index
         * @returns {WizardStepDirective}
         */
        getStepRefByIndex(index) {
            return this.steps.toArray()[index];
        }
        /**
         * returns the index value of the step.
         * @param {WizardStepDirective} wizardStep
         * @returns {number}
         */
        getStepIndexByRef(wizardStep) {
            return this.steps.toArray().indexOf(wizardStep);
        }
        /**
         * gets stepRef by searching on the name property.
         * @param {string} name
         * @returns {WizardStepDirective}
         */
        getStepRefByName(name) {
            return this.steps.find(step => step.name === name);
        }
        /**
         * sets default step as current step if configured
         * or finds first valid step and set it as current step.
         * @param {WizardStepDirective} step
         */
        setDefaultStep(step) {
            // If the default step has show true then only update the currentStep
            if (step && step.show) {
                this.currentStep = step;
                step.active = true;
                step.isInitialized = true;
                // Mark all previous step status COMPLETED
                let index = this.getStepIndexByRef(step) - 1;
                while (index >= 0) {
                    const prevStep = this.getStepRefByIndex(index);
                    prevStep.done = true;
                    prevStep.isInitialized = true;
                    index--;
                }
            }
            else {
                // set next valid step as current step
                step = this.getNextValidStepFormIndex(0);
                if (step) {
                    this.setDefaultStep(step);
                }
            }
            this.addMoreText();
        }
        /**
         * Selects the associated step when the wizard header is clicked.
         * @param $event
         * @param {WizardStepDirective} currentStep
         */
        onWizardHeaderClick($event, currentStep) {
            // select the step if it's status is done
            if (currentStep.done) {
                // set all the next steps status as disabled and previous steps as done
                this.steps.forEach((step, index) => {
                    if (index < this.getStepIndexByRef(currentStep)) {
                        step.done = true;
                        step.isDone = true;
                    }
                    else {
                        step.disabled = true;
                        step.isDone = false;
                    }
                });
                // set the selected step as current step and make it active
                this.currentStep = currentStep;
                this.currentStep.active = true;
                this.addMoreText();
            }
        }
        // Method to navigate to next step
        next(eventName = 'next') {
            const currentStep = this.currentStep;
            const currentStepIndex = this.getCurrentStepIndex();
            // abort if onSkip method returns false
            if (eventName === 'skip') {
                if (currentStep.invokeSkipCB(currentStepIndex) === false) {
                    return;
                }
                this.extendNextFn(currentStep, currentStepIndex);
            }
            else if (this.currentStep.isValid && eventName === 'next') {
                if (currentStep.invokeNextCB(currentStepIndex) === false) {
                    return;
                }
                this.extendNextFn(currentStep, currentStepIndex);
            }
            else if (this.enablenext && !this.currentStep.isValid) {
                Array.from(this.currentStep.getAllEmbeddedForms())?.forEach((form) => {
                    form.widget.highlightInvalidFields();
                });
            }
        }
        extendNextFn(currentStep, currentStepIndex) {
            let nextStep;
            nextStep = this.getNextValidStepFormIndex(currentStepIndex + 1);
            nextStep.isInitialized = true;
            // If there are any steps which has show then only change state of current step else remain same
            if (nextStep) {
                currentStep.isDone = true;
                currentStep.done = true;
                nextStep.active = true;
                this.currentStep = nextStep;
            }
            this.addMoreText();
        }
        // Method to navigate to previous step
        prev() {
            const currentStep = this.currentStep;
            const currentStepIndex = this.getCurrentStepIndex();
            let prevStep;
            // abort if onPrev method returns false.
            if (currentStep.invokePrevCB(currentStepIndex) === false) {
                return;
            }
            prevStep = this.getPreviousValidStepFormIndex(currentStepIndex - 1);
            // If there are any steps which has show then only change state of current step else remain same
            if (prevStep) {
                currentStep.isDone = false;
                currentStep.disabled = true;
                prevStep.active = true;
                this.currentStep = prevStep;
            }
            this.addMoreText();
        }
        skip() {
            this.next('skip');
        }
        gotoStep(stepName) {
            if (stepName) {
                const gotoStepIndex = this.steps.toArray().map(step => step.name).indexOf(stepName);
                if (gotoStepIndex !== -1) {
                    const gotoStep = this.getStepRefByIndex(gotoStepIndex);
                    if (gotoStep?.show) {
                        this.onWizardHeaderClick(event, gotoStep);
                    }
                    else {
                        console.error("The gotoStep function cannot navigate to hidden steps");
                    }
                }
                else {
                    console.error(`Could not find step '${stepName}'`);
                }
            }
        }
        // Method to invoke on-Done event on wizard
        done() {
            this.currentStep.isDone = true;
            this.invokeEventCallback('done', { steps: this.steps.toArray() });
        }
        // Method to invoke on-Cancel event on wizard
        cancel() {
            this.invokeEventCallback('cancel', { steps: this.steps.toArray() });
        }
        addMoreText() {
            setTimeout(() => {
                var newWindowWidth = $(window).width();
                if (newWindowWidth < 768) {
                    $(".app-wizard-step.current .subtitle-wrapper .step-title").css({ "height": "auto", "display": "block" });
                    var subtitleTextLength = $(".app-wizard-step.current .subtitle-wrapper .step-title").height();
                    $(".read_more").css("display", "none");
                    $(".current .subtitle-wrapper").removeClass("readmore_subtitle");
                    if (subtitleTextLength > 44) {
                        $(".app-wizard-step.current .subtitle-wrapper .step-title").css({ "height": "44px", "display": "-webkit-box" });
                        $(".current .read_more").css("display", "block");
                        $(".active .read_more").css("display", "none");
                        $(".disable .read_more").css("display", "none");
                        $(".app-wizard-step>a").css("height", "100px");
                    }
                }
            });
        }
        readMoreSubtitle() {
            $(".current .subtitle-wrapper").addClass("readmore_subtitle");
            $(".current .read_more").css("display", "none");
            $(document).on("mouseup", function (e) {
                var container = $(".subtitle-wrapper");
                // if the target of the click isn't the container nor a descendant of the container
                if (!container.is(e.target) && container.has(e.target).length === 0) {
                    $(".current .subtitle-wrapper").removeClass("readmore_subtitle");
                    $(".current .read_more").css("display", "block");
                    $(document).off("mouseup");
                }
            });
        }
        isFirstStep(stepRef) {
            return this.steps.first === stepRef;
        }
        isLastStep(stepRef) {
            return this.steps.last === stepRef;
        }
        // Define the property change handler. This Method will be triggered when there is a change in the widget property
        onPropertyChange(key, nv, ov) {
            // Monitoring changes for properties and accordingly handling respective changes
            if (key === 'stepstyle') {
                this.stepClass = nv === 'justified' ? 'nav-justified' : '';
            }
            else if (key === 'defaultstep') {
                this.setDefaultStep(this.getStepRefByName(nv));
            }
            else {
                super.onPropertyChange(key, nv, ov);
            }
        }
        ngAfterContentInit() {
            super.ngAfterContentInit();
            this.promiseResolverFn();
        }
        ngAfterViewInit() {
            super.ngAfterViewInit();
            i2.styler(this.nativeElement.querySelector('.panel-body'), this, i2.APPLY_STYLES_TYPE.INNER_SHELL);
            setTimeout(() => {
                if ($(window).width() < 768) {
                    $(".app-wizard").removeClass("vertical");
                }
            });
        }
        static { this.ɵfac = function WizardComponent_Factory(t) { return new (t || WizardComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
        static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: WizardComponent, selectors: [["div", "wmWizard", ""]], contentQueries: function WizardComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
                i0__namespace.ɵɵcontentQuery(dirIndex, WizardStepDirective, 4);
            } if (rf & 2) {
                let _t;
                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.steps = _t);
            } }, features: [i0__namespace.ɵɵProvidersFeature([
                    i2.provideAsWidgetRef(WizardComponent)
                ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0, ngContentSelectors: _c1, decls: 13, vars: 13, consts: [["role", "tab", 1, "app-wizard-heading"], ["class", "app-wizard-step", 3, "hidden", "ngClass", "click", 4, "ngFor", "ngForOf"], ["role", "tabpanel", 1, "app-wizard-body", "panel-body"], ["wmMessage", "", "caption.bind", "message.caption", "type.bind", "message.type", 4, "ngIf"], ["class", "app-wizard-skip", "title", "Skip step", 3, "name", "click", 4, "ngIf"], [1, "app-wizard-actions-right"], ["type", "button", "class", "btn app-button btn-default", 3, "name", "title", "textContent", "click", 4, "ngIf"], ["type", "button", "class", "btn app-button btn-default", 3, "name", "disabled", "click", 4, "ngIf"], ["type", "button", "class", "btn app-button btn-primary", 3, "name", "disabled", "click", 4, "ngIf"], ["type", "button", "class", "btn app-button btn-success", 3, "name", "disabled", "click", 4, "ngIf"], [1, "app-wizard-step", 3, "click", "hidden", "ngClass"], ["href", "javascript:void(0)", 3, "ngClass"], ["class", "arrow", 4, "ngIf"], [1, "wizard-step-number"], ["class", "count", 4, "ngIf"], ["class", "dottedstepper", 4, "ngIf"], ["class", "app-icon wi wi-done", 4, "ngIf"], [3, "class", 4, "ngIf"], [1, "title-wrapper"], [4, "ngIf"], [1, "step-title", 3, "textContent"], ["class", "subtitle-wrapper", 4, "ngIf"], [1, "arrow"], [1, "count"], [1, "dottedstepper"], [1, "app-icon", "wi", "wi-done"], [1, "subtitle-wrapper"], [1, "read_more", 2, "display", "none", 3, "click"], ["wmMessage", "", "caption.bind", "message.caption", "type.bind", "message.type"], ["title", "Skip step", 1, "app-wizard-skip", 3, "click", "name"], ["type", "button", 1, "btn", "app-button", "btn-default", 3, "click", "name", "title", "textContent"], ["type", "button", 1, "btn", "app-button", "btn-default", 3, "click", "name", "disabled"], [1, "app-icon", "wi", "wi-chevron-left"], [1, "btn-caption", 3, "textContent"], ["type", "button", 1, "btn", "app-button", "btn-primary", 3, "click", "name", "disabled"], [1, "app-icon", "wi", "wi-chevron-right"], ["type", "button", 1, "btn", "app-button", "btn-success", 3, "click", "name", "disabled"], [1, "app-icon", "wm-sl-l", "sl-check"]], template: function WizardComponent_Template(rf, ctx) { if (rf & 1) {
                i0__namespace.ɵɵprojectionDef();
                i0__namespace.ɵɵelementStart(0, "div", 0)(1, "ul");
                i0__namespace.ɵɵtemplate(2, WizardComponent_li_2_Template, 13, 20, "li", 1);
                i0__namespace.ɵɵelementEnd()();
                i0__namespace.ɵɵelementStart(3, "div", 2);
                i0__namespace.ɵɵtemplate(4, WizardComponent_p_4_Template, 1, 0, "p", 3);
                i0__namespace.ɵɵprojection(5, 0, ["ngProjectAs", "form[wmWizardStep]", 5, ["form", "wmWizardStep", ""]]);
                i0__namespace.ɵɵelementEnd();
                i0__namespace.ɵɵelementStart(6, "div");
                i0__namespace.ɵɵtemplate(7, WizardComponent_a_7_Template, 2, 2, "a", 4);
                i0__namespace.ɵɵelementStart(8, "div", 5);
                i0__namespace.ɵɵtemplate(9, WizardComponent_button_9_Template, 1, 4, "button", 6)(10, WizardComponent_button_10_Template, 3, 4, "button", 7)(11, WizardComponent_button_11_Template, 3, 4, "button", 8)(12, WizardComponent_button_12_Template, 3, 4, "button", 9);
                i0__namespace.ɵɵelementEnd()();
            } if (rf & 2) {
                i0__namespace.ɵɵadvance();
                i0__namespace.ɵɵclassMapInterpolate1("app-wizard-steps nav nav-pills ", ctx.stepClass, "");
                i0__namespace.ɵɵadvance();
                i0__namespace.ɵɵproperty("ngForOf", ctx.steps);
                i0__namespace.ɵɵadvance(2);
                i0__namespace.ɵɵproperty("ngIf", ctx.message.caption);
                i0__namespace.ɵɵadvance(2);
                i0__namespace.ɵɵclassMapInterpolate1("app-wizard-actions panel-footer ", ctx.actionsalignment, "");
                i0__namespace.ɵɵadvance();
                i0__namespace.ɵɵproperty("ngIf", ctx.currentStep == null ? null : ctx.currentStep.enableskip);
                i0__namespace.ɵɵadvance(2);
                i0__namespace.ɵɵproperty("ngIf", ctx.cancelable);
                i0__namespace.ɵɵadvance();
                i0__namespace.ɵɵproperty("ngIf", ctx.hasPrevStep);
                i0__namespace.ɵɵadvance();
                i0__namespace.ɵɵproperty("ngIf", ctx.hasNextStep);
                i0__namespace.ɵɵadvance();
                i0__namespace.ɵɵproperty("ngIf", ctx.showDoneBtn);
            } }, dependencies: [i1$1__namespace.NgClass, i1$1__namespace.NgForOf, i1$1__namespace.NgIf, i2__namespace.MessageComponent, i2__namespace.TextContentDirective], encapsulation: 2 }); }
    }
    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(WizardComponent, [{
            type: i0.Component,
            args: [{ selector: 'div[wmWizard]', providers: [
                        i2.provideAsWidgetRef(WizardComponent)
                    ], template: "<div class=\"app-wizard-heading\" role=\"tab\">\n    <ul class=\"app-wizard-steps nav nav-pills {{stepClass}}\">\n        <li class=\"app-wizard-step\" *ngFor=\"let step of steps; let i = index\" [hidden]=\"!step.show\"\n            [ngClass]=\"{active: step.done, current: step.active, disabled: step.disabled}\"\n            (click)=\"onWizardHeaderClick($event, step)\">\n            <a href=\"javascript:void(0)\" [attr.aria-label]=\"step.title\" [attr.title]=\"step.title\" [ngClass]=\"{'title-center-align':class && class.includes('classic') && !step.subtitle}\">\n                <span class=\"arrow\" *ngIf=\"class && class.includes('classic')\"></span>\n                <span class=\"wizard-step-number\">\n                    <span class=\"count\" *ngIf=\"class && class.includes('number') && !step.isDone\">{{i+1}}</span>\n                    <i class=\"dottedstepper\" *ngIf=\"class && (class.includes('dottedstepper') || class.includes('text-inline') && !class.includes('iconstepper')) && !step.isDone\"></i>\n                    <i class=\"app-icon wi wi-done\" *ngIf=\"class && (class.includes('dottedstepper') || class.includes('number')) && step.isDone\"></i>\n                    <i class=\"app-icon {{step.iconclass}}\" *ngIf=\"(class && class.includes('iconstepper')) && ((step.iconclass && !step.isDone) || (step.iconclass && step.isDone && step.doneiconclass ===''))\"></i>\n                    <i class=\"app-icon {{step.doneiconclass}}\" *ngIf=\"step.doneiconclass && step.isDone && (class && class.includes('iconstepper'))\"></i>\n                </span>\n                <span class=\"title-wrapper\">\n                    <span *ngIf=\"class && class.includes('text-inline')\">{{'0' + (i+1)}}</span>\n                    <span class=\"step-title\" [textContent]=\"step.title\"></span>\n                </span>\n                <span class=\"subtitle-wrapper\" [attr.title]=\"step.subtitle\" *ngIf=\"step.subtitle\">\n                    <span class=\"step-title\" [textContent]=\"step.subtitle\"></span>\n                    <a class=\"read_more\" (click)=\"readMoreSubtitle()\" style=\"display:none\">more</a>\n                </span>\n            </a>    \n        </li>\n    </ul>\n</div>\n<div class=\"app-wizard-body panel-body\" role=\"tabpanel\">\n    <p wmMessage *ngIf=\"message.caption\" caption.bind=\"message.caption\" type.bind=\"message.type\"></p>\n    <ng-content ngProjectAs=\"form[wmWizardStep]\"></ng-content>\n</div>\n<div class=\"app-wizard-actions panel-footer {{actionsalignment}}\">\n    <a class=\"app-wizard-skip\" name=\"skipStep_{{name}}\" *ngIf=\"currentStep?.enableskip\" title=\"Skip step\" (click)=\"skip()\">Skip &raquo;</a>\n    <div class=\"app-wizard-actions-right\">\n        <button type=\"button\" name=\"cancelBtn_{{name}}\" class=\"btn app-button btn-default\" *ngIf=\"cancelable\"\n                (click)=\"cancel()\" [title]=\"cancelbtnlabel\" [textContent]=\"cancelbtnlabel\"></button>\n        <button type=\"button\" name=\"previousBtn_{{name}}\" class=\"btn app-button btn-default\"\n                *ngIf=\"hasPrevStep\" (click)=\"prev()\" [disabled]=\"!enablePrev\">\n            <i class=\"app-icon wi wi-chevron-left\"></i>\n            <span class=\"btn-caption\" [textContent]=\"previousbtnlabel\"></span>\n        </button>\n        <button type=\"button\" name=\"nextBtn_{{name}}\" class=\"btn app-button btn-primary\"\n                *ngIf=\"hasNextStep\" (click)=\"next()\" [disabled]=\"!enableNext\">\n            <span class=\"btn-caption\" [textContent]=\"nextbtnlabel\"></span>\n            <i class=\"app-icon wi wi-chevron-right\"></i>\n        </button>\n        <button type=\"button\" name=\"doneBtn_{{name}}\" class=\"btn app-button btn-success\"\n                *ngIf=\"showDoneBtn\" (click)=\"done()\"\n                [disabled]=\"!enableDone\">\n            <i class=\"app-icon wm-sl-l sl-check\"></i>\n            <span class=\"btn-caption\" [textContent]=\"donebtnlabel\"></span>\n        </button>\n    </div>\n</div>\n" }]
        }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
                    type: i0.Inject,
                    args: ['EXPLICIT_CONTEXT']
                }, {
                    type: i0.Optional
                }] }], { steps: [{
                type: i0.ContentChildren,
                args: [WizardStepDirective]
            }] }); })();
    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(WizardComponent, { className: "WizardComponent", filePath: "wizard.component.ts", lineNumber: 32 }); })();

    const components = [
        WizardStepDirective,
        WizardComponent
    ];
    class WizardModule {
        static { this.ɵfac = function WizardModule_Factory(t) { return new (t || WizardModule)(); }; }
        static { this.ɵmod = /*@__PURE__*/ i0__namespace.ɵɵdefineNgModule({ type: WizardModule }); }
        static { this.ɵinj = /*@__PURE__*/ i0__namespace.ɵɵdefineInjector({ imports: [i1$1.CommonModule,
                i2.WmComponentsModule,
                i1.FormsModule] }); }
    }
    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(WizardModule, [{
            type: i0.NgModule,
            args: [{
                    imports: [
                        i1$1.CommonModule,
                        i2.WmComponentsModule,
                        i1.FormsModule
                    ],
                    declarations: [...components],
                    exports: [...components]
                }]
        }], null, null); })();
    (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0__namespace.ɵɵsetNgModuleScope(WizardModule, { declarations: [WizardStepDirective,
            WizardComponent], imports: [i1$1.CommonModule,
            i2.WmComponentsModule,
            i1.FormsModule], exports: [WizardStepDirective,
            WizardComponent] }); })();

    exports.WizardComponent = WizardComponent;
    exports.WizardModule = WizardModule;
    exports.WizardStepDirective = WizardStepDirective;

}));
