@wavemaker-ai/app-ng-runtime 1.0.0-rc.647469

package/components/containers/wizard/bundles/index.umd.js

@@ -0,0 +1,1074 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@wm/components/base'), require('@angular/core'), require('@wm/core'), require('@angular/forms'), require('lodash-es')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@angular/common', '@wm/components/base', '@angular/core', '@wm/core', '@angular/forms', 'lodash-es'], 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.common, global.wm.components.base, global.ng.core, global.wm.core, global.ng.forms, global._));
+})(this, (function (exports, i2, base, i0, i1$1, i1, lodashEs) { '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 i2__namespace = /*#__PURE__*/_interopNamespaceDefault(i2);
+    var i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
+    var i1$1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1$1);
+    var i1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1);
+
+    const registerProps$2 = () => {
+        base.register('wm-wizard', new Map([
+            ['actionsalignment', { value: 'right', ...base.PROP_STRING }],
+            ['cancelable', { value: true, ...base.PROP_BOOLEAN }],
+            ['cancelbtnlabel', { value: 'Cancel', ...base.PROP_STRING }],
+            ['class', { value: 'classic', ...base.PROP_STRING }],
+            ['dataset', base.PROP_ANY],
+            ['defaultstep', { value: 'none', ...base.PROP_STRING }],
+            ['defaultstepindex', { value: 0, ...base.PROP_NUMBER }],
+            ['donebtnlabel', { value: 'Done', ...base.PROP_STRING }],
+            ['enablenext', { value: false, ...base.PROP_BOOLEAN }],
+            ['name', base.PROP_STRING],
+            ['nextbtnlabel', { value: 'Next', ...base.PROP_STRING }],
+            ['nodatamessage', { value: 'No Data Found', ...base.PROP_STRING }],
+            ['previousbtnlabel', { value: 'Previous', ...base.PROP_STRING }],
+            ['show', { value: true, ...base.PROP_BOOLEAN }],
+            ['stepstyle', { value: 'auto', ...base.PROP_STRING }],
+            ['type', base.PROP_STRING]
+        ]));
+    };
+
+    const registerProps$1 = () => {
+        base.register('wm-wizardstep', new Map([
+            ['class', base.PROP_STRING],
+            ['content', base.PROP_STRING],
+            ['doneiconclass', { value: 'wi wi-done', ...base.PROP_STRING }],
+            ['dynamicStepIndex', base.PROP_NUMBER], // internal property
+            ['enableskip', { value: false, ...base.PROP_BOOLEAN }],
+            ['iconclass', { value: 'wi wi-person', ...base.PROP_STRING }],
+            ['isdynamic', base.PROP_STRING], // internal property
+            ['name', base.PROP_STRING],
+            ['show', { value: true, ...base.PROP_BOOLEAN }],
+            ['subtitle', base.PROP_STRING],
+            ['title', { value: 'Step Title', ...base.PROP_STRING }]
+        ]));
+    };
+
+    const DEFAULT_CLS$1 = 'app-wizard-step-content';
+    const WIDGET_CONFIG$1 = {
+        widgetType: 'wm-wizardstep',
+        hostClass: DEFAULT_CLS$1,
+    };
+    class WizardStepComponent extends base.StylableComponent {
+        static { this.initializeProps = registerProps$1(); }
+        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() {
+            for (const form of this.getAllEmbeddedForms()) {
+                if (form.widget && form.widget.ngform && !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.$lazyLoad = i1$1.noop;
+            this.isDone = false;
+            this.nextCBInProgress = false;
+            this.prevCBInProgress = false;
+            this.status = 2 /* STEP_STATUS.DISABLED */;
+            this._currentWizardWidgets = {};
+            // 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());
+                }
+                if (this.wizardComponent) {
+                    const stepIndex = this.wizardComponent.getCurrentStepIndex();
+                    this.invokeEventCallback('load', { stepIndex });
+                }
+            }, 100);
+        }
+        remove() {
+            if (this.active) {
+                this === this.wizardComponent.steps.last ? this.wizardComponent.prev() : this.wizardComponent.next();
+            }
+            const availablePanes = this.wizardComponent.steps.toArray();
+            availablePanes.splice(this.wizardComponent.getStepIndexByRef(this), 1);
+            this.wizardComponent.steps.reset([...availablePanes]);
+            this.nativeElement.remove();
+        }
+        get currentWizardWidgets() {
+            return base.getCurrentWidgets(this.nativeElement, this._currentWizardWidgets);
+        }
+        onPropertyChange(key, nv, ov) {
+            if (key === 'content') {
+                setTimeout(() => this.$lazyLoad(), 100);
+            }
+            else {
+                super.onPropertyChange(key, nv, ov);
+            }
+        }
+        ngOnInit() {
+            super.ngOnInit();
+        }
+        ngAfterViewInit() {
+            super.ngAfterViewInit();
+            if (this.isdynamic) {
+                this.wizardComponent.registerDynamicStep(this);
+            }
+        }
+        ngOnDestroy() {
+            // MEMORY LEAK FIX: Clear redrawable components references
+            if (this.reDrawableComponents) {
+                this.reDrawableComponents.reset([]);
+            }
+            // MEMORY LEAK FIX: Clear wizard component reference
+            this.wizardComponent = null;
+            // Call parent ngOnDestroy (StylableComponent → BaseComponent)
+            // This will clear the context and unregister the widget
+            super.ngOnDestroy();
+        }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0__namespace, type: WizardStepComponent, deps: [{ token: i0__namespace.Injector }, { token: i1__namespace.NgForm, self: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
+        static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: WizardStepComponent, isStandalone: true, selector: "form[wmWizardStep]", host: { properties: { "class.active": "this.isCurrent" } }, providers: [
+                base.provideAsWidgetRef(WizardStepComponent),
+                i1.NgForm
+            ], queries: [{ propertyName: "reDrawableComponents", predicate: base.RedrawableDirective, descendants: true }], exportAs: ["wmWizardStep"], usesInheritance: true, ngImport: i0__namespace, template: `<ng-content partial-container-target></ng-content>`, isInline: true }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0__namespace, type: WizardStepComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        standalone: true,
+                        selector: 'form[wmWizardStep]',
+                        template: `<ng-content partial-container-target></ng-content>`,
+                        providers: [
+                            base.provideAsWidgetRef(WizardStepComponent),
+                            i1.NgForm
+                        ],
+                        exportAs: 'wmWizardStep'
+                    }]
+            }], ctorParameters: () => [{ type: i0__namespace.Injector }, { type: i1__namespace.NgForm, decorators: [{
+                        type: i0.Self
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Inject,
+                        args: ['EXPLICIT_CONTEXT']
+                    }, {
+                        type: i0.Optional
+                    }] }], propDecorators: { reDrawableComponents: [{
+                    type: i0.ContentChildren,
+                    args: [base.RedrawableDirective, { descendants: true }]
+                }], isCurrent: [{
+                    type: i0.HostBinding,
+                    args: ['class.active']
+                }] } });
+
+    const DEFAULT_CLS = 'app-wizard panel clearfix';
+    const WIDGET_CONFIG = {
+        widgetType: 'wm-wizard',
+        hostClass: DEFAULT_CLS
+    };
+    class WizardComponent extends base.StylableComponent {
+        static { this.initializeProps = registerProps$2(); }
+        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);
+        }
+        /**
+         * Step header icons (iconclass / doneiconclass): same rules as iconstepper, plus tabstepper
+         * (e.g. wizard-tabstepper, tabstepper, tabstepper_vertical). Uses class property + host className
+         * so preview stays correct when the DOM is updated before the bound property.
+         */
+        wizardHostClassString() {
+            const fromProp = typeof this.class === 'string' ? this.class : '';
+            const rawDom = this.nativeElement?.className;
+            const fromDom = typeof rawDom === 'string' ? rawDom : rawDom?.baseVal || '';
+            return `${fromProp} ${fromDom}`.trim();
+        }
+        get showWizardStepIcons() {
+            const c = this.wizardHostClassString();
+            if (!c) {
+                return false;
+            }
+            return c.includes('iconstepper') || c.includes('tabstepper');
+        }
+        /** Tab layout only (not icon stepper): omit icon column when step has no icon. */
+        get isTabStepperWizard() {
+            const c = this.wizardHostClassString();
+            return c.includes('tabstepper') && !c.includes('iconstepper');
+        }
+        /** Default matches wm-wizardstep props; used for icon stepper when iconclass is empty. */
+        stepIconClassOrDefault(step) {
+            const c = step?.iconclass;
+            return typeof c === 'string' && c.trim() ? c.trim() : 'wi wi-person';
+        }
+        hasNonEmptyIconClass(step) {
+            const ic = step?.iconclass;
+            return typeof ic === 'string' && ic.trim() !== '';
+        }
+        /**
+         * Primary `app-icon` for icon/tab stepper: only when `iconclass` is set (no default glyph for icon stepper).
+         * When `doneiconclass` is set, the done row is shown instead of this primary icon.
+         */
+        shouldShowPrimaryStepIcon(step) {
+            if (!step || !this.showWizardStepIcons) {
+                return false;
+            }
+            if (!step.isDone) {
+                return this.hasNonEmptyIconClass(step);
+            }
+            const d = step.doneiconclass;
+            const hasDone = typeof d === 'string' && d.trim() !== '';
+            if (hasDone) {
+                return false;
+            }
+            return this.hasNonEmptyIconClass(step);
+        }
+        /**
+         * Tab stepper: no `wizard-step-number` when the step is done but `doneiconclass` is empty.
+         * Icon stepper: omit the wrapper when there is no primary icon and no done icon to show.
+         * Other layouts: keep the wrapper (numbers, dots, etc.).
+         */
+        shouldRenderWizardStepNumberSpan(step) {
+            if (!this.showWizardStepIcons) {
+                return true;
+            }
+            if (this.isTabStepperWizard) {
+                if (step.isDone && !this.hasNonEmptyDoneIconClass(step)) {
+                    return false;
+                }
+                return (this.shouldShowPrimaryStepIcon(step) ||
+                    (step.isDone && this.hasNonEmptyDoneIconClass(step)));
+            }
+            if (this.wizardHostClassString().includes('iconstepper')) {
+                return (this.shouldShowPrimaryStepIcon(step) ||
+                    (step.isDone && this.hasNonEmptyDoneIconClass(step)));
+            }
+            return true;
+        }
+        /** Avoid `String()` in templates (strict mode treats it as a component property). */
+        hasNonEmptyDoneIconClass(step) {
+            const d = step?.doneiconclass;
+            return typeof d === 'string' && d.trim() !== '';
+        }
+        get enableDone() {
+            if (!this.currentStep) {
+                return;
+            }
+            return this.currentStep.enableDone && this.currentStep.isValid;
+        }
+        /**
+         * returns current step index of the Wizard's current step
+         */
+        get currentStepIndex() {
+            return this.getStepIndexByRef(this.currentStep);
+        }
+        /**
+         * returns weather the current step is first step or not
+         */
+        get isFirstStep() {
+            return this._isFirstStep(this.currentStep);
+        }
+        /**
+         * returns weather the current step is last step or not
+         */
+        get isLastStep() {
+            return this._isLastStep(this.currentStep);
+        }
+        constructor(inj, dynamicComponentProvider, contexts, explicitContext) {
+            let resolveFn = i1$1.noop;
+            super(inj, WIDGET_CONFIG, explicitContext, new Promise(res => resolveFn = res));
+            this._isFirstLoad = true;
+            this.isPromise = (obj) => obj instanceof Promise || (obj !== null && typeof obj === 'object' && typeof obj.then === 'function' && typeof obj.catch === 'function');
+            base.styler(this.nativeElement, this, base.APPLY_STYLES_TYPE.SHELL);
+            this.promiseResolverFn = resolveFn;
+            // initialize the message object with default values
+            this.message = {
+                caption: '',
+                type: ''
+            };
+            this.wizContext = contexts[0];
+            this.dynamicComponentProvider = dynamicComponentProvider;
+            this.dynamicWizard = [];
+            this.dynamicStepIndex = 0;
+        }
+        /**
+         * This method is used to register the dynamic steps.
+         * After all steps are initialzed, update the querylist manually based on index.
+         * @param stepRef - refrence of the wizardstep
+         */
+        registerDynamicStep(stepRef) {
+            this.dynamicWizard.push(stepRef);
+            const isLastStep = this.dynamicWizard.length === this.dynamicStepIndex;
+            if (isLastStep) {
+                for (let i = 0; i < this.dynamicWizard.length; i++) {
+                    const newStepRef = lodashEs.find(this.dynamicWizard, step => step.dynamicStepIndex === i);
+                    const isStepAlreadyExist = lodashEs.find(this.steps.toArray(), newStepRef);
+                    if (!isStepAlreadyExist) {
+                        this.steps.reset([...this.steps.toArray(), newStepRef]);
+                        if (newStepRef.active) {
+                            setTimeout(() => {
+                                newStepRef.select();
+                            }, 20);
+                        }
+                    }
+                }
+            }
+        }
+        /**
+         * This method is to add the wizard step dynamically
+         * @param wizardSteps - list of wizardsteps
+         */
+        addStep(wizardSteps) {
+            if (!lodashEs.isArray(wizardSteps)) {
+                wizardSteps = [wizardSteps];
+            }
+            const stepNamesList = [];
+            lodashEs.forEach(wizardSteps, (step, index) => {
+                const isStepAlreadyCreated = lodashEs.find(this.steps.toArray(), { name: step.name });
+                const isStepNameExist = lodashEs.indexOf(stepNamesList, step.name);
+                // If user tries to add wizardstep with the same name which is already exists then do not create the step
+                if (isStepAlreadyCreated || isStepNameExist > 0) {
+                    console.warn(`The wizard step with name ${step.name} already exists`);
+                    return;
+                }
+                let paramMarkup = '';
+                let propsTmpl = '';
+                this.dynamicStepIndex++;
+                const name = step.name ? step.name : `wizardstep${this.steps.toArray().length + (index + 1)}`;
+                stepNamesList.push(name);
+                const partialParams = lodashEs.get(step, 'params');
+                lodashEs.forEach(step, (value, key) => {
+                    if (key !== 'params') {
+                        propsTmpl = `${propsTmpl} ${key}="${value}"`;
+                    }
+                });
+                lodashEs.forEach(partialParams, (value, key) => {
+                    paramMarkup = `${paramMarkup} <wm-param name="${key}" value="${value}"></wm-param>`;
+                });
+                const markup = `<wm-wizardstep dynamicStepIndex="${this.dynamicStepIndex - 1}" isdynamic="true" name="${name}" ${propsTmpl}>
+                            ${paramMarkup}
+                        </wm-wizardstep>`;
+                if (!this._dynamicContext) {
+                    this._dynamicContext = Object.create(this.viewParent);
+                    this._dynamicContext[this.getAttr('wmWizard')] = this;
+                }
+                this.dynamicComponentProvider.addComponent(this.getNativeElement().querySelector('.app-wizard-body'), markup, this._dynamicContext, { inj: this.inj });
+            });
+            return stepNamesList;
+        }
+        /**
+         * This method is to remove the wizard step
+         * @param step - index or name of the step
+         */
+        removeStep(step) {
+            const stepRef = lodashEs.isString(step) ? this.getStepRefByName(step) : lodashEs.isNumber(step)
+                ? this.getStepRefByIndex(step) : null;
+            stepRef ? stepRef.remove() : console.warn(`Could not find step with name or index '${step}' to remove`);
+        }
+        /**
+         * returns next valid step. the index passed is also checked if its valid step
+         * @param index
+         * @returns {WizardStepComponent}
+         */
+        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 {WizardStepComponent}
+         */
+        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 {WizardStepComponent}
+         */
+        getStepRefByIndex(index) {
+            return this.steps.toArray()[index];
+        }
+        /**
+         * returns the index value of the step.
+         * @param {WizardStepComponent} wizardStep
+         * @returns {number}
+         */
+        getStepIndexByRef(wizardStep) {
+            return this.steps.toArray().indexOf(wizardStep);
+        }
+        /**
+         * gets stepRef by searching on the name property.
+         * @param {string} name
+         * @returns {WizardStepComponent}
+         */
+        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 {WizardStepComponent} 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 {WizardStepComponent} 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
+        handleNext(value, currentStep, currentStepIndex) {
+            if (this.isPromise(value)) {
+                value.then(response => {
+                    this.currentStep.nextCBInProgress = false;
+                    if (response === false) {
+                        return;
+                    }
+                    this.extendNextFn(currentStep, currentStepIndex);
+                }, err => {
+                    this.currentStep.nextCBInProgress = false;
+                });
+            }
+            else {
+                this.currentStep.nextCBInProgress = false;
+                if (value === false) {
+                    return;
+                }
+                this.extendNextFn(currentStep, currentStepIndex);
+            }
+        }
+        next(eventName = 'next') {
+            if (this.currentStep.nextCBInProgress) {
+                return;
+            }
+            const currentStep = this.currentStep;
+            const currentStepIndex = this.getCurrentStepIndex();
+            // abort if onSkip method returns false
+            if (eventName === 'skip') {
+                this.currentStep.nextCBInProgress = true;
+                const response = currentStep.invokeSkipCB(currentStepIndex);
+                this.handleNext(response, currentStep, currentStepIndex);
+            }
+            else if (this.currentStep.isValid && eventName === 'next') {
+                this.currentStep.nextCBInProgress = true;
+                const response = currentStep.invokeNextCB(currentStepIndex);
+                this.handleNext(response, currentStep, currentStepIndex);
+            }
+            else if (this.enablenext && !this.currentStep.isValid) {
+                Array.from(this.currentStep.getAllEmbeddedForms())?.forEach((form) => {
+                    form.widget.highlightInvalidFields();
+                });
+                const invalidFormInputElement = this.currentStep.nativeElement?.querySelector("input.ng-invalid");
+                invalidFormInputElement?.focus();
+            }
+        }
+        extendNextFn(currentStep, currentStepIndex) {
+            const nextStep = this.getNextValidStepFormIndex(currentStepIndex + 1);
+            // If there are any steps which has show then only change state of current step else remain same
+            if (nextStep) {
+                nextStep.isInitialized = true;
+                currentStep.isDone = true;
+                currentStep.done = true;
+                nextStep.active = true;
+                this.currentStep = nextStep;
+                // Remove 'active' class from all wizard steps in header
+                const allStepItems = this.nativeElement.querySelectorAll('li[data-stepid]');
+                allStepItems.forEach((el) => {
+                    el.classList.remove('active');
+                    const anchor = el.querySelector('a');
+                    if (anchor) {
+                        anchor.setAttribute('tabindex', '-1');
+                    }
+                });
+                // Add 'active' to next step header item
+                const newStepLi = this.nativeElement.querySelector(`li[data-stepid="${nextStep.widgetId}"]`);
+                const newStepAnchor = newStepLi?.querySelector('a');
+                if (newStepLi && newStepAnchor) {
+                    newStepLi.classList.add('active');
+                    newStepAnchor.setAttribute('tabindex', '0');
+                    newStepAnchor.focus();
+                }
+                this.updateStepFocus();
+            }
+            this.addMoreText();
+        }
+        // Method to navigate to previous step
+        prev() {
+            if (this.currentStep.prevCBInProgress) {
+                return;
+            }
+            const currentStep = this.currentStep;
+            const currentStepIndex = this.getCurrentStepIndex();
+            this.currentStep.prevCBInProgress = true;
+            // abort if onPrev method returns false.
+            const response = currentStep.invokePrevCB(currentStepIndex);
+            if (this.isPromise(response)) {
+                response.then(response => {
+                    this.currentStep.prevCBInProgress = false;
+                    if (response === false) {
+                        return;
+                    }
+                    this.extendPrevFn(currentStep, currentStepIndex);
+                }, err => {
+                    this.currentStep.prevCBInProgress = false;
+                });
+            }
+            else {
+                this.currentStep.prevCBInProgress = false;
+                if (response === false) {
+                    return;
+                }
+                this.extendPrevFn(currentStep, currentStepIndex);
+            }
+        }
+        extendPrevFn(currentStep, currentStepIndex) {
+            const 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;
+                //  Remove 'active' class from all steps
+                const allStepItems = this.nativeElement.querySelectorAll('li[data-stepid]');
+                allStepItems.forEach((el) => {
+                    el.classList.remove('active');
+                    const anchor = el.querySelector('a');
+                    if (anchor) {
+                        anchor.setAttribute('tabindex', '-1');
+                    }
+                });
+                // Apply 'active' to prev step
+                const prevStepLi = this.nativeElement.querySelector(`li[data-stepid="${prevStep.widgetId}"]`);
+                const prevStepAnchor = prevStepLi?.querySelector('a');
+                if (prevStepLi && prevStepAnchor) {
+                    prevStepLi.classList.add('active');
+                    prevStepAnchor.setAttribute('tabindex', '0');
+                    prevStepAnchor.focus();
+                }
+                this.updateStepFocus();
+            }
+            this.addMoreText();
+        }
+        skip() {
+            this.next('skip');
+        }
+        /**
+         * Navigates to the given step based on step name or step index
+         * This will work only if the step is already in done state
+         * @param step
+         */
+        gotoStep(step) {
+            let gotoStepIndex;
+            if (lodashEs.isString(step)) {
+                gotoStepIndex = this.steps.toArray().map(step => step.name).indexOf(step);
+                if (gotoStepIndex === -1) {
+                    console.error(`Could not find step '${step}'`);
+                    return;
+                }
+            }
+            else if (lodashEs.isNumber(step) && step >= 0) {
+                gotoStepIndex = step;
+            }
+            else {
+                console.error("Invalid step name or index provided");
+                return;
+            }
+            const gotoStep = this.getStepRefByIndex(gotoStepIndex);
+            if (gotoStep?.show) {
+                this.onWizardHeaderClick(event, gotoStep);
+            }
+            else {
+                console.error("The gotoStep function cannot navigate to hidden steps");
+            }
+        }
+        // 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.active .subtitle-wrapper .step-title").css({ "height": "auto", "display": "block" });
+                    var subtitleTextLength = $(".app-wizard-step.active .subtitle-wrapper .step-title").height();
+                    $(".read_more").css("display", "none");
+                    $(".app-wizard-step.active .subtitle-wrapper").removeClass("readmore_subtitle");
+                    if (subtitleTextLength > 44) {
+                        $(".app-wizard-step.active .subtitle-wrapper .step-title").css({ "height": "44px", "display": "-webkit-box" });
+                        $(".app-wizard-step.active .read_more").css("display", "block");
+                        $(".app-wizard-step.finished .read_more").css("display", "none");
+                        $(".app-wizard-step.default .read_more").css("display", "none");
+                        $(".app-wizard-step>a").css("height", "100px");
+                    }
+                }
+            });
+        }
+        readMoreSubtitle() {
+            $(".app-wizard-step.active .subtitle-wrapper").addClass("readmore_subtitle");
+            $(".app-wizard-step.active .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) {
+                    $(".app-wizard-step.active .subtitle-wrapper").removeClass("readmore_subtitle");
+                    $(".app-wizard-step.active .read_more").css("display", "block");
+                    $(document).off("mouseup");
+                }
+            });
+        }
+        _isFirstStep(stepRef) {
+            return this.steps.first === stepRef;
+        }
+        _isLastStep(stepRef) {
+            return this.steps.last === stepRef;
+        }
+        onDataChange(newVal) {
+            this.fieldDefs = base.createArrayFrom(newVal);
+        }
+        updateStepFocus() {
+            setTimeout(() => {
+                const currentStepElement = this.nativeElement.querySelector(".app-wizard-heading li.active a");
+                currentStepElement?.focus();
+            });
+        }
+        // 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 === 'dataset') {
+                this.onDataChange(nv);
+            }
+            else if (key === 'defaultstep') {
+                this.setDefaultStep(this.getStepRefByName(nv));
+            }
+            else if (key === 'actionsalignment') {
+                this.nativeElement.querySelector('div.app-wizard-actions')?.classList.replace(ov, nv);
+            }
+            else {
+                super.onPropertyChange(key, nv, ov);
+            }
+        }
+        ngAfterContentInit() {
+            super.ngAfterContentInit();
+            this.promiseResolverFn();
+            this.wizContext.hasNextStep = () => this.hasNextStep;
+            this.wizContext.hasPreviousStep = () => this.hasPrevStep;
+            this.wizContext.hasNoNextStep = () => this.showDoneBtn;
+            this.wizContext.cancelable = () => this.cancelable;
+            this.wizContext.skippable = () => this.currentStep?.enableskip;
+            this.wizContext.next = () => this.next();
+            this.wizContext.previous = () => this.prev();
+            this.wizContext.done = () => this.done();
+            this.wizContext.cancel = () => this.cancel();
+            this.wizContext.skip = () => this.skip();
+            this.wizContext.nextbtnlabel = () => this.nextbtnlabel;
+            this.wizContext.previousbtnlabel = () => this.previousbtnlabel;
+            this.wizContext.donebtnlabel = () => this.donebtnlabel;
+            this.wizContext.cancelbtnlabel = () => this.cancelbtnlabel;
+            this.wizContext.actionsalignment = () => this.actionsalignment;
+            this.wizContext.disableNext = () => !this.enableNext;
+            this.wizContext.disablePrevious = () => !this.enablePrev;
+            this.wizContext.disableDone = () => !this.enableDone;
+            // MEMORY LEAK FIX: Store subscription for cleanup
+            this.stepsSubscription = this.steps.changes.subscribe(() => {
+                if (this.steps.length > 1 && this.type === 'dynamic' && this._isFirstLoad) {
+                    this.setDefaultStep(this.getStepRefByIndex(this.defaultstepindex));
+                    this._isFirstLoad = false;
+                }
+            });
+        }
+        isSelectableStep(stepRef) {
+            return stepRef.show && !stepRef.disabled;
+        }
+        getSelectableStepBeforeIndex(index) {
+            for (let i = index - 1; i >= 0; i--) {
+                const step = this.getStepRefByIndex(i);
+                if (this.isSelectableStep(step)) {
+                    return step;
+                }
+            }
+            if (index === 0) {
+                const step = this.getStepRefByIndex(this.steps.length - 1);
+                if (this.isSelectableStep(step)) {
+                    return step;
+                }
+            }
+        }
+        getSelectableStepAfterIndex(index) {
+            for (let i = index + 1; i < this.steps.length; i++) {
+                const step = this.getStepRefByIndex(i);
+                if (this.isSelectableStep(step)) {
+                    return step;
+                }
+            }
+            if (index === this.steps.length - 1) {
+                const step = this.getStepRefByIndex(0);
+                if (this.isSelectableStep(step)) {
+                    return step;
+                }
+            }
+        }
+        getWidgets(widgteName, index) {
+            let $target;
+            const retVal = [];
+            if (!widgteName) {
+                return;
+            }
+            if (!i1$1.isDefined(index)) {
+                lodashEs.forEach(this.steps.toArray(), (el) => {
+                    $target = lodashEs.get(el.currentWizardWidgets, widgteName);
+                    if ($target) {
+                        retVal.push($target);
+                    }
+                });
+                return retVal;
+            }
+            index = +index || 0;
+            $target = lodashEs.get(this.steps.toArray(), index);
+            if ($target) {
+                return [lodashEs.get($target.currentWizardWidgets, widgteName)];
+            }
+        }
+        ngAfterViewInit() {
+            super.ngAfterViewInit();
+            base.styler(this.nativeElement.querySelector('.panel-body'), this, base.APPLY_STYLES_TYPE.INNER_SHELL);
+            setTimeout(() => {
+                if ($(window).width() < 768) {
+                    $(".app-wizard").removeClass("vertical");
+                }
+            });
+        }
+        ngAfterViewChecked() {
+            this.nativeElement.querySelectorAll('div.app-wizard-actions').forEach(el => el?.classList.add(this.actionsalignment));
+            this.nativeElement.querySelectorAll('div.app-wizard-actions-right').forEach(el => el?.classList.remove('app-container'));
+        }
+        getActiveStepIndex() {
+            return lodashEs.findIndex(this.steps.toArray(), { isCurrent: true });
+        }
+        onkeydown(event) {
+            let newStep;
+            switch (event.key) {
+                case 'ArrowLeft':
+                case 'ArrowUp':
+                    event.preventDefault();
+                    newStep = this.autoActivation ? null : this.getSelectableStepBeforeIndex(this.getSelectedStepIndex());
+                    break;
+                case 'ArrowRight':
+                case 'ArrowDown':
+                    event.preventDefault();
+                    newStep = this.autoActivation ? null : this.getSelectableStepAfterIndex(this.getSelectedStepIndex());
+                    break;
+                case 'Enter':
+                case ' ':
+                case 'Spacebar':
+                    event.preventDefault();
+                    setTimeout(() => {
+                        const activeElement = this.nativeElement.querySelector('li.active');
+                        const stepLi = activeElement.closest('li[data-stepid]');
+                        const isInWizardHeader = activeElement.closest('.app-wizard-heading');
+                        if (stepLi && isInWizardHeader) {
+                            const stepId = stepLi.getAttribute('data-stepid');
+                            const stepIndex = this.steps.toArray().findIndex(step => step.widgetId === stepId);
+                            const currentStep = this.steps.toArray()[stepIndex];
+                            if (currentStep && currentStep !== this.currentStep) {
+                                this.onWizardHeaderClick(event, currentStep);
+                                // Update tabindex for accessibility
+                                const allStepItems = this.nativeElement.querySelectorAll('li[data-stepid]');
+                                allStepItems.forEach((el) => {
+                                    el.setAttribute('tabindex', '-1');
+                                });
+                                const stepAnchor = stepLi.querySelector('a');
+                                if (stepAnchor) {
+                                    stepAnchor.setAttribute('tabindex', '0');
+                                    stepAnchor.focus();
+                                }
+                            }
+                        }
+                    }, 0);
+                    break;
+                default:
+                    return;
+            }
+            if (newStep) {
+                this.nativeElement.querySelector('li.active')?.classList.remove('active');
+                this.nativeElement.querySelector(`li[data-stepid="${newStep.widgetId}"]`)?.classList.add('active');
+                const stepLi = this.nativeElement.querySelector(".app-wizard-heading li.active a");
+                const allStepItems = this.nativeElement.querySelectorAll('li[data-stepid] a');
+                allStepItems.forEach((el) => {
+                    el.setAttribute('tabindex', '-1');
+                });
+                (stepLi).setAttribute('tabindex', '0');
+                stepLi?.focus();
+            }
+        }
+        getSelectedStepIndex() {
+            const index = this.steps.toArray().findIndex(step => this.nativeElement.querySelector(`li[data-stepid="${step.widgetId}"]`)?.classList.contains("active"));
+            return index >= 0 ? index : this.getActiveStepIndex();
+        }
+        ngOnDestroy() {
+            // MEMORY LEAK FIX: Unsubscribe from steps changes
+            if (this.stepsSubscription) {
+                this.stepsSubscription.unsubscribe();
+                this.stepsSubscription = null;
+            }
+            // MEMORY LEAK FIX: Remove jQuery event handlers
+            $(document).off("mouseup");
+            // MEMORY LEAK FIX: Clear wizard context to release references to step data
+            if (this.wizContext) {
+                Object.keys(this.wizContext).forEach(key => {
+                    delete this.wizContext[key];
+                });
+                this.wizContext = null;
+            }
+            // MEMORY LEAK FIX: Clear dynamic context
+            if (this._dynamicContext) {
+                Object.keys(this._dynamicContext).forEach(key => {
+                    delete this._dynamicContext[key];
+                });
+                this._dynamicContext = null;
+            }
+            // MEMORY LEAK FIX: Clear dynamic wizard array
+            if (this.dynamicWizard) {
+                this.dynamicWizard = [];
+            }
+            // MEMORY LEAK FIX: Clear current step reference
+            this.currentStep = null;
+            super.ngOnDestroy();
+        }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0__namespace, type: WizardComponent, deps: [{ token: i0__namespace.Injector }, { token: i1$1__namespace.DynamicComponentRefProvider }, { token: base.Context, self: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
+        static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: WizardComponent, isStandalone: true, selector: "div[wmWizard]", providers: [
+                base.provideAsWidgetRef(WizardComponent),
+                { provide: base.Context, useFactory: () => { return {}; }, multi: true }
+            ], queries: [{ propertyName: "wizardAction", first: true, predicate: ["wizardAction"], read: i0.TemplateRef }, { propertyName: "steps", predicate: WizardStepComponent }], exportAs: ["wmWizard"], usesInheritance: true, ngImport: i0__namespace, template: "<div class=\"app-wizard-heading\">\n  <ul class=\"app-wizard-steps nav nav-pills {{stepClass}}\">\n    @for (step of steps; track step; let i = $index) {\n      <li class=\"app-wizard-step\" [hidden]=\"!step.show\"\n        [ngClass]=\"{finished: step.done, active: step.active, default: step.disabled}\"\n        (click)=\"onWizardHeaderClick($event, step)\" [attr.data-stepid]=\"step.widgetId\">\n        <a href=\"javascript:void(0)\" [attr.aria-current]=\"step.active ? 'step' : null\"\n          [attr.aria-disabled]=\"step.disabled\" [attr.aria-label]='step.subtitle ? \"step \" + (i + 1) + \" \" +  step.title + \" \" + step.subtitle : \"step \" + (i + 1) + \" \" +  step.title' [attr.title]= \"step.title\"\n          [ngClass]=\"{'title-center-align':class && class.includes('classic') && !step.subtitle}\" [tabindex]=\"step.active ? '0' : '-1'\" (keydown)=\"onkeydown($event)\">\n          @if (class && class.includes('classic')) {\n            <span class=\"arrow\"></span>\n          }\n          @if (shouldRenderWizardStepNumberSpan(step)) {\n            <span class=\"wizard-step-number\">\n              @if (class && class.includes('number') && !step.isDone && !showWizardStepIcons) {\n                <span class=\"count\">{{i+1}}</span>\n              }\n              @if (class && (class.includes('dottedstepper') || class.includes('text-inline') && !showWizardStepIcons) && !step.isDone) {\n                <i class=\"dottedstepper\"></i>\n              }\n              @if (class && (class.includes('dottedstepper') || class.includes('number')) && step.isDone) {\n                <i class=\"app-icon wi wi-done\"></i>\n              }\n              @if (shouldShowPrimaryStepIcon(step)) {\n                <i class=\"app-icon {{ stepIconClassOrDefault(step) }}\"></i>\n              }\n              @if (showWizardStepIcons && step.isDone && hasNonEmptyDoneIconClass(step)) {\n                <i class=\"app-icon {{ step.doneiconclass }}\"></i>\n              }\n            </span>\n          }\n          <span class=\"title-wrapper\">\n            @if (class && class.includes('text-inline')) {\n              <span>{{'0' + (i+1)}}</span>\n            }\n            <span class=\"step-title\" [textContent]=\"step.title\"></span>\n          </span>\n          @if (step.subtitle) {\n            <span class=\"subtitle-wrapper\" [attr.title]=\"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          }\n        </a>\n      </li>\n    }\n  </ul>\n</div>\n@if (type !== 'dynamic') {\n<div class=\"app-wizard-body panel-body\">\n  @if (message.caption) {\n    <p wmMessage caption.bind=\"message.caption\" type.bind=\"message.type\"></p>\n  }\n  <ng-content ngProjectAs=\"form[wmWizardStep]\"></ng-content>\n</div>\n}\n@if (type === 'dynamic') {\n<div class=\"app-wizard-body panel-body\">\n    @if(!fieldDefs?.length) {\n    <div>{{nodatamessage}}</div>\n    }\n    <ng-content select=\"div[wmRepeatTemplate]\"></ng-content>\n</div>\n}\n@if(fieldDefs && fieldDefs.length || type !== 'dynamic') {\n    <ng-container *ngTemplateOutlet=\"wizardAction\"></ng-container>\n}\n", dependencies: [{ kind: "ngmodule", type: i2.CommonModule }, { kind: "directive", type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: base.TextContentDirective, selector: "[textContent]", inputs: ["textContent"] }] }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0__namespace, type: WizardComponent, decorators: [{
+                type: i0.Component,
+                args: [{ standalone: true, imports: [i2.CommonModule, base.TextContentDirective], selector: 'div[wmWizard]', providers: [
+                            base.provideAsWidgetRef(WizardComponent),
+                            { provide: base.Context, useFactory: () => { return {}; }, multi: true }
+                        ], exportAs: 'wmWizard', template: "<div class=\"app-wizard-heading\">\n  <ul class=\"app-wizard-steps nav nav-pills {{stepClass}}\">\n    @for (step of steps; track step; let i = $index) {\n      <li class=\"app-wizard-step\" [hidden]=\"!step.show\"\n        [ngClass]=\"{finished: step.done, active: step.active, default: step.disabled}\"\n        (click)=\"onWizardHeaderClick($event, step)\" [attr.data-stepid]=\"step.widgetId\">\n        <a href=\"javascript:void(0)\" [attr.aria-current]=\"step.active ? 'step' : null\"\n          [attr.aria-disabled]=\"step.disabled\" [attr.aria-label]='step.subtitle ? \"step \" + (i + 1) + \" \" +  step.title + \" \" + step.subtitle : \"step \" + (i + 1) + \" \" +  step.title' [attr.title]= \"step.title\"\n          [ngClass]=\"{'title-center-align':class && class.includes('classic') && !step.subtitle}\" [tabindex]=\"step.active ? '0' : '-1'\" (keydown)=\"onkeydown($event)\">\n          @if (class && class.includes('classic')) {\n            <span class=\"arrow\"></span>\n          }\n          @if (shouldRenderWizardStepNumberSpan(step)) {\n            <span class=\"wizard-step-number\">\n              @if (class && class.includes('number') && !step.isDone && !showWizardStepIcons) {\n                <span class=\"count\">{{i+1}}</span>\n              }\n              @if (class && (class.includes('dottedstepper') || class.includes('text-inline') && !showWizardStepIcons) && !step.isDone) {\n                <i class=\"dottedstepper\"></i>\n              }\n              @if (class && (class.includes('dottedstepper') || class.includes('number')) && step.isDone) {\n                <i class=\"app-icon wi wi-done\"></i>\n              }\n              @if (shouldShowPrimaryStepIcon(step)) {\n                <i class=\"app-icon {{ stepIconClassOrDefault(step) }}\"></i>\n              }\n              @if (showWizardStepIcons && step.isDone && hasNonEmptyDoneIconClass(step)) {\n                <i class=\"app-icon {{ step.doneiconclass }}\"></i>\n              }\n            </span>\n          }\n          <span class=\"title-wrapper\">\n            @if (class && class.includes('text-inline')) {\n              <span>{{'0' + (i+1)}}</span>\n            }\n            <span class=\"step-title\" [textContent]=\"step.title\"></span>\n          </span>\n          @if (step.subtitle) {\n            <span class=\"subtitle-wrapper\" [attr.title]=\"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          }\n        </a>\n      </li>\n    }\n  </ul>\n</div>\n@if (type !== 'dynamic') {\n<div class=\"app-wizard-body panel-body\">\n  @if (message.caption) {\n    <p wmMessage caption.bind=\"message.caption\" type.bind=\"message.type\"></p>\n  }\n  <ng-content ngProjectAs=\"form[wmWizardStep]\"></ng-content>\n</div>\n}\n@if (type === 'dynamic') {\n<div class=\"app-wizard-body panel-body\">\n    @if(!fieldDefs?.length) {\n    <div>{{nodatamessage}}</div>\n    }\n    <ng-content select=\"div[wmRepeatTemplate]\"></ng-content>\n</div>\n}\n@if(fieldDefs && fieldDefs.length || type !== 'dynamic') {\n    <ng-container *ngTemplateOutlet=\"wizardAction\"></ng-container>\n}\n" }]
+            }], ctorParameters: () => [{ type: i0__namespace.Injector }, { type: i1$1__namespace.DynamicComponentRefProvider }, { type: Array, decorators: [{
+                        type: i0.Self
+                    }, {
+                        type: i0.Inject,
+                        args: [base.Context]
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Inject,
+                        args: ['EXPLICIT_CONTEXT']
+                    }, {
+                        type: i0.Optional
+                    }] }], propDecorators: { steps: [{
+                    type: i0.ContentChildren,
+                    args: [WizardStepComponent]
+                }], wizardAction: [{
+                    type: i0.ContentChild,
+                    args: ['wizardAction', { read: i0.TemplateRef, descendants: false }]
+                }] } });
+
+    const registerProps = () => {
+        base.register('wm-wizardaction', new Map([
+            ['class', base.PROP_STRING],
+            ['name', base.PROP_STRING],
+            ['show', { value: true, ...base.PROP_BOOLEAN }]
+        ]));
+    };
+
+    const WIDGET_INFO = {
+        widgetType: 'wm-wizardaction',
+        hostClass: 'app-wizard-actions panel-footer '
+    };
+    class WizardActionDirective extends base.BaseComponent {
+        static { this.initializeProps = registerProps(); }
+        constructor(inj, explicitContext) {
+            super(inj, WIDGET_INFO, explicitContext);
+        }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0__namespace, type: WizardActionDirective, deps: [{ token: i0__namespace.Injector }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: WizardActionDirective, isStandalone: true, selector: "div[wmWizardAction]", providers: [
+                base.provideAsWidgetRef(WizardActionDirective)
+            ], exportAs: ["wmWizardAction"], usesInheritance: true, ngImport: i0__namespace }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0__namespace, type: WizardActionDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        standalone: true,
+                        selector: 'div[wmWizardAction]',
+                        providers: [
+                            base.provideAsWidgetRef(WizardActionDirective)
+                        ],
+                        exportAs: 'wmWizardAction',
+                    }]
+            }], ctorParameters: () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                        type: i0.Inject,
+                        args: ['EXPLICIT_CONTEXT']
+                    }, {
+                        type: i0.Optional
+                    }] }] });
+
+    exports.WizardActionDirective = WizardActionDirective;
+    exports.WizardComponent = WizardComponent;
+    exports.WizardStepComponent = WizardStepComponent;
+
+}));