import * as i0 from '@angular/core';
import { Directive, Self, Inject, Optional, ContentChildren, HostBinding, Component, NgModule } from '@angular/core';
import * as i1$1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i1 from '@angular/forms';
import { NgForm, FormsModule } from '@angular/forms';
import * as i2 from '@wm/components/base';
import { PROP_STRING, PROP_BOOLEAN, register, BaseComponent, RedrawableDirective, provideAsWidgetRef, StylableComponent, APPLY_STYLES_TYPE, styler, WmComponentsModule } from '@wm/components/base';
import { noop } from '@wm/core';

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

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

const DEFAULT_CLS$1 = 'app-wizard-step-content';
const WIDGET_CONFIG$1 = {
    widgetType: 'wm-wizardstep',
    hostClass: DEFAULT_CLS$1,
};
class WizardStepDirective extends 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.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1.NgForm, 2), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: WizardStepDirective, selectors: [["form", "wmWizardStep", ""]], contentQueries: function WizardStepDirective_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
            i0.ɵɵcontentQuery(dirIndex, RedrawableDirective, 5);
        } if (rf & 2) {
            let _t;
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.reDrawableComponents = _t);
        } }, hostVars: 2, hostBindings: function WizardStepDirective_HostBindings(rf, ctx) { if (rf & 2) {
            i0.ɵɵclassProp("current", ctx.isCurrent);
        } }, exportAs: ["wmWizardStep"], features: [i0.ɵɵProvidersFeature([
                provideAsWidgetRef(WizardStepDirective),
                NgForm
            ]), i0.ɵɵInheritDefinitionFeature] }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WizardStepDirective, [{
        type: Directive,
        args: [{
                selector: 'form[wmWizardStep]',
                providers: [
                    provideAsWidgetRef(WizardStepDirective),
                    NgForm
                ],
                exportAs: 'wmWizardStep'
            }]
    }], () => [{ type: i0.Injector }, { type: i1.NgForm, decorators: [{
                type: Self
            }] }, { type: undefined, decorators: [{
                type: Inject,
                args: ['EXPLICIT_CONTEXT']
            }, {
                type: Optional
            }] }], { reDrawableComponents: [{
            type: ContentChildren,
            args: [RedrawableDirective, { descendants: true }]
        }], isCurrent: [{
            type: 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.ɵɵelement(0, "span", 22);
} }
function WizardComponent_li_2_span_4_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 23);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const i_r4 = i0.ɵɵnextContext().index;
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate(i_r4 + 1);
} }
function WizardComponent_li_2_i_5_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "i", 24);
} }
function WizardComponent_li_2_i_6_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "i", 25);
} }
function WizardComponent_li_2_i_7_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "i");
} if (rf & 2) {
    const step_r2 = i0.ɵɵnextContext().$implicit;
    i0.ɵɵclassMapInterpolate1("app-icon ", step_r2.iconclass, "");
} }
function WizardComponent_li_2_i_8_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "i");
} if (rf & 2) {
    const step_r2 = i0.ɵɵnextContext().$implicit;
    i0.ɵɵclassMapInterpolate1("app-icon ", step_r2.doneiconclass, "");
} }
function WizardComponent_li_2_span_10_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span");
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const i_r4 = i0.ɵɵnextContext().index;
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate("0" + (i_r4 + 1));
} }
function WizardComponent_li_2_span_12_Template(rf, ctx) { if (rf & 1) {
    const _r5 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "span", 26);
    i0.ɵɵelement(1, "span", 20);
    i0.ɵɵelementStart(2, "a", 27);
    i0.ɵɵlistener("click", function WizardComponent_li_2_span_12_Template_a_click_2_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.readMoreSubtitle()); });
    i0.ɵɵtext(3, "more");
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const step_r2 = i0.ɵɵnextContext().$implicit;
    i0.ɵɵattribute("title", step_r2.subtitle);
    i0.ɵɵadvance();
    i0.ɵɵproperty("textContent", step_r2.subtitle);
} }
function WizardComponent_li_2_Template(rf, ctx) { if (rf & 1) {
    const _r1 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "li", 10);
    i0.ɵɵlistener("click", function WizardComponent_li_2_Template_li_click_0_listener($event) { const step_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onWizardHeaderClick($event, step_r2)); });
    i0.ɵɵelementStart(1, "a", 11);
    i0.ɵɵtemplate(2, WizardComponent_li_2_span_2_Template, 1, 0, "span", 12);
    i0.ɵɵelementStart(3, "span", 13);
    i0.ɵɵ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.ɵɵelementEnd();
    i0.ɵɵelementStart(9, "span", 18);
    i0.ɵɵtemplate(10, WizardComponent_li_2_span_10_Template, 2, 1, "span", 19);
    i0.ɵɵelement(11, "span", 20);
    i0.ɵɵelementEnd();
    i0.ɵɵtemplate(12, WizardComponent_li_2_span_12_Template, 4, 2, "span", 21);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const step_r2 = ctx.$implicit;
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵproperty("hidden", !step_r2.show)("ngClass", i0.ɵɵpureFunction3(14, _c2, step_r2.done, step_r2.active, step_r2.disabled));
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(18, _c3, ctx_r2.class && ctx_r2.class.includes("classic") && !step_r2.subtitle));
    i0.ɵɵattribute("aria-label", step_r2.title)("title", step_r2.title);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", ctx_r2.class && ctx_r2.class.includes("classic"));
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngIf", ctx_r2.class && ctx_r2.class.includes("number") && !step_r2.isDone);
    i0.ɵɵadvance();
    i0.ɵɵ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.ɵɵadvance();
    i0.ɵɵproperty("ngIf", ctx_r2.class && (ctx_r2.class.includes("dottedstepper") || ctx_r2.class.includes("number")) && step_r2.isDone);
    i0.ɵɵadvance();
    i0.ɵɵ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.ɵɵadvance();
    i0.ɵɵproperty("ngIf", step_r2.doneiconclass && step_r2.isDone && (ctx_r2.class && ctx_r2.class.includes("iconstepper")));
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngIf", ctx_r2.class && ctx_r2.class.includes("text-inline"));
    i0.ɵɵadvance();
    i0.ɵɵproperty("textContent", step_r2.title);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", step_r2.subtitle);
} }
function WizardComponent_p_4_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "p", 28);
} }
function WizardComponent_a_7_Template(rf, ctx) { if (rf & 1) {
    const _r6 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "a", 29);
    i0.ɵɵlistener("click", function WizardComponent_a_7_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.skip()); });
    i0.ɵɵtext(1, "Skip \u00BB");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵpropertyInterpolate1("name", "skipStep_", ctx_r2.name, "");
} }
function WizardComponent_button_9_Template(rf, ctx) { if (rf & 1) {
    const _r7 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 30);
    i0.ɵɵlistener("click", function WizardComponent_button_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.cancel()); });
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵpropertyInterpolate1("name", "cancelBtn_", ctx_r2.name, "");
    i0.ɵɵproperty("title", ctx_r2.cancelbtnlabel)("textContent", ctx_r2.cancelbtnlabel);
} }
function WizardComponent_button_10_Template(rf, ctx) { if (rf & 1) {
    const _r8 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 31);
    i0.ɵɵlistener("click", function WizardComponent_button_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.prev()); });
    i0.ɵɵelement(1, "i", 32)(2, "span", 33);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵpropertyInterpolate1("name", "previousBtn_", ctx_r2.name, "");
    i0.ɵɵproperty("disabled", !ctx_r2.enablePrev);
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("textContent", ctx_r2.previousbtnlabel);
} }
function WizardComponent_button_11_Template(rf, ctx) { if (rf & 1) {
    const _r9 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 34);
    i0.ɵɵlistener("click", function WizardComponent_button_11_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.next()); });
    i0.ɵɵelement(1, "span", 33)(2, "i", 35);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵpropertyInterpolate1("name", "nextBtn_", ctx_r2.name, "");
    i0.ɵɵproperty("disabled", !ctx_r2.enableNext);
    i0.ɵɵadvance();
    i0.ɵɵproperty("textContent", ctx_r2.nextbtnlabel);
} }
function WizardComponent_button_12_Template(rf, ctx) { if (rf & 1) {
    const _r10 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 36);
    i0.ɵɵlistener("click", function WizardComponent_button_12_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.done()); });
    i0.ɵɵelement(1, "i", 37)(2, "span", 33);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵpropertyInterpolate1("name", "doneBtn_", ctx_r2.name, "");
    i0.ɵɵproperty("disabled", !ctx_r2.enableDone);
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("textContent", ctx_r2.donebtnlabel);
} }
const DEFAULT_CLS = 'app-wizard panel clearfix';
const WIDGET_CONFIG = {
    widgetType: 'wm-wizard',
    hostClass: DEFAULT_CLS
};
class WizardComponent extends 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 = noop;
        super(inj, WIDGET_CONFIG, explicitContext, new Promise(res => resolveFn = res));
        styler(this.nativeElement, this, 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();
        styler(this.nativeElement.querySelector('.panel-body'), this, 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.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WizardComponent, selectors: [["div", "wmWizard", ""]], contentQueries: function WizardComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
            i0.ɵɵcontentQuery(dirIndex, WizardStepDirective, 4);
        } if (rf & 2) {
            let _t;
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.steps = _t);
        } }, features: [i0.ɵɵProvidersFeature([
                provideAsWidgetRef(WizardComponent)
            ]), i0.ɵɵ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.ɵɵprojectionDef();
            i0.ɵɵelementStart(0, "div", 0)(1, "ul");
            i0.ɵɵtemplate(2, WizardComponent_li_2_Template, 13, 20, "li", 1);
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(3, "div", 2);
            i0.ɵɵtemplate(4, WizardComponent_p_4_Template, 1, 0, "p", 3);
            i0.ɵɵprojection(5, 0, ["ngProjectAs", "form[wmWizardStep]", 5, ["form", "wmWizardStep", ""]]);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(6, "div");
            i0.ɵɵtemplate(7, WizardComponent_a_7_Template, 2, 2, "a", 4);
            i0.ɵɵelementStart(8, "div", 5);
            i0.ɵɵ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.ɵɵelementEnd()();
        } if (rf & 2) {
            i0.ɵɵadvance();
            i0.ɵɵclassMapInterpolate1("app-wizard-steps nav nav-pills ", ctx.stepClass, "");
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngForOf", ctx.steps);
            i0.ɵɵadvance(2);
            i0.ɵɵproperty("ngIf", ctx.message.caption);
            i0.ɵɵadvance(2);
            i0.ɵɵclassMapInterpolate1("app-wizard-actions panel-footer ", ctx.actionsalignment, "");
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", ctx.currentStep == null ? null : ctx.currentStep.enableskip);
            i0.ɵɵadvance(2);
            i0.ɵɵproperty("ngIf", ctx.cancelable);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", ctx.hasPrevStep);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", ctx.hasNextStep);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", ctx.showDoneBtn);
        } }, dependencies: [i1$1.NgClass, i1$1.NgForOf, i1$1.NgIf, i2.MessageComponent, i2.TextContentDirective], encapsulation: 2 }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WizardComponent, [{
        type: Component,
        args: [{ selector: 'div[wmWizard]', providers: [
                    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.Injector }, { type: undefined, decorators: [{
                type: Inject,
                args: ['EXPLICIT_CONTEXT']
            }, {
                type: Optional
            }] }], { steps: [{
            type: ContentChildren,
            args: [WizardStepDirective]
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵ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.ɵɵdefineNgModule({ type: WizardModule }); }
    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule,
            WmComponentsModule,
            FormsModule] }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WizardModule, [{
        type: NgModule,
        args: [{
                imports: [
                    CommonModule,
                    WmComponentsModule,
                    FormsModule
                ],
                declarations: [...components],
                exports: [...components]
            }]
    }], null, null); })();
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(WizardModule, { declarations: [WizardStepDirective,
        WizardComponent], imports: [CommonModule,
        WmComponentsModule,
        FormsModule], exports: [WizardStepDirective,
        WizardComponent] }); })();

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

export { WizardComponent, WizardModule, WizardStepDirective };
//# sourceMappingURL=index.mjs.map
