@wavemaker/app-ng-runtime 11.10.5-rc.6096 → 11.11.0-next.27920

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@wm/components/base'), require('@wm/core')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', '@angular/forms', '@wm/components/base', '@wm/core'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.containers = global.wm.components.containers || {}, global.wm.components.containers.wizard = {}), global.ng.core, global.ng.common, global.ng.forms, global.wm.components.base, global.wm.core));
-})(this, (function (exports, i0, i1$1, i1, i2, core) { 'use strict';
+    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, i3, i0, i1$1, i1, lodashEs) { 'use strict';
 
     function _interopNamespaceDefault(e) {
         var n = Object.create(null);
@@ -21,47 +21,57 @@
         return Object.freeze(n);
     }
 
+    var i2__namespace = /*#__PURE__*/_interopNamespaceDefault(i2);
+    var i3__namespace = /*#__PURE__*/_interopNamespaceDefault(i3);
     var i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
     var i1$1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1$1);
     var i1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1);
-    var i2__namespace = /*#__PURE__*/_interopNamespaceDefault(i2);
 
     const registerProps$2 = () => {
-        i2.register('wm-wizard', new Map([
-            ['actionsalignment', { value: 'right', ...i2.PROP_STRING }],
-            ['cancelable', { value: true, ...i2.PROP_BOOLEAN }],
-            ['enablenext', { value: false, ...i2.PROP_BOOLEAN }],
-            ['cancelbtnlabel', { value: 'Cancel', ...i2.PROP_STRING }],
-            ['class', { value: 'classic', ...i2.PROP_STRING }],
-            ['defaultstep', { value: 'none', ...i2.PROP_STRING }],
-            ['donebtnlabel', { value: 'Done', ...i2.PROP_STRING }],
-            ['name', i2.PROP_STRING],
-            ['nextbtnlabel', { value: 'Next', ...i2.PROP_STRING }],
-            ['previousbtnlabel', { value: 'Previous', ...i2.PROP_STRING }],
-            ['show', { value: true, ...i2.PROP_BOOLEAN }],
-            ['stepstyle', { value: 'auto', ...i2.PROP_STRING }]
+        i3.register('wm-wizard', new Map([
+            ['actionsalignment', { value: 'right', ...i3.PROP_STRING }],
+            ['cancelable', { value: true, ...i3.PROP_BOOLEAN }],
+            ['cancelbtnlabel', { value: 'Cancel', ...i3.PROP_STRING }],
+            ['class', { value: 'classic', ...i3.PROP_STRING }],
+            ['dataset', i3.PROP_ANY],
+            ['defaultstep', { value: 'none', ...i3.PROP_STRING }],
+            ['defaultstepindex', { value: 0, ...i3.PROP_NUMBER }],
+            ['donebtnlabel', { value: 'Done', ...i3.PROP_STRING }],
+            ['enablenext', { value: false, ...i3.PROP_BOOLEAN }],
+            ['name', i3.PROP_STRING],
+            ['nextbtnlabel', { value: 'Next', ...i3.PROP_STRING }],
+            ['nodatamessage', { value: 'No Data Found', ...i3.PROP_STRING }],
+            ['previousbtnlabel', { value: 'Previous', ...i3.PROP_STRING }],
+            ['show', { value: true, ...i3.PROP_BOOLEAN }],
+            ['stepstyle', { value: 'auto', ...i3.PROP_STRING }],
+            ['type', i3.PROP_STRING]
         ]));
     };
 
     const registerProps$1 = () => {
-        i2.register('wm-wizardstep', new Map([
-            ['class', i2.PROP_STRING],
-            ['enableskip', { value: false, ...i2.PROP_BOOLEAN }],
-            ['iconclass', { value: 'wi wi-person', ...i2.PROP_STRING }],
-            ['doneiconclass', { value: 'wi wi-done', ...i2.PROP_STRING }],
-            ['name', i2.PROP_STRING],
-            ['show', { value: true, ...i2.PROP_BOOLEAN }],
-            ['title', { value: 'Step Title', ...i2.PROP_STRING }],
-            ['subtitle', i2.PROP_STRING]
+        i3.register('wm-wizardstep', new Map([
+            ['class', i3.PROP_STRING],
+            ['content', i3.PROP_STRING],
+            ['doneiconclass', { value: 'wi wi-done', ...i3.PROP_STRING }],
+            ['dynamicStepIndex', i3.PROP_NUMBER], // internal property
+            ['enableskip', { value: false, ...i3.PROP_BOOLEAN }],
+            ['iconclass', { value: 'wi wi-person', ...i3.PROP_STRING }],
+            ['isdynamic', i3.PROP_STRING], // internal property
+            ['name', i3.PROP_STRING],
+            ['show', { value: true, ...i3.PROP_BOOLEAN }],
+            ['subtitle', i3.PROP_STRING],
+            ['title', { value: 'Step Title', ...i3.PROP_STRING }]
         ]));
     };
 
+    const _c0$1 = ["wmWizardStep", ""];
+    const _c1$1 = ["*"];
     const DEFAULT_CLS$1 = 'app-wizard-step-content';
     const WIDGET_CONFIG$1 = {
         widgetType: 'wm-wizardstep',
         hostClass: DEFAULT_CLS$1,
     };
-    class WizardStepDirective extends i2.BaseComponent {
+    class WizardStepComponent extends i3.StylableComponent {
         static { this.initializeProps = registerProps$1(); }
         get isCurrent() {
             return this.active;
@@ -127,6 +137,7 @@
         constructor(inj, ngForm, explicitContext) {
             super(inj, WIDGET_CONFIG$1, explicitContext);
             this.ngForm = ngForm;
+            this.$lazyLoad = i1$1.noop;
             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
@@ -151,25 +162,56 @@
                 this.invokeEventCallback('load', { stepIndex });
             }, 100);
         }
-        static { this.ɵfac = function WizardStepDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || WizardStepDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1__namespace.NgForm, 2), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
-        static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: WizardStepDirective, selectors: [["form", "wmWizardStep", ""]], contentQueries: function WizardStepDirective_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
-                i0__namespace.ɵɵcontentQuery(dirIndex, i2.RedrawableDirective, 5);
+        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();
+        }
+        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);
+            }
+        }
+        static { this.ɵfac = function WizardStepComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || WizardStepComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1__namespace.NgForm, 2), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
+        static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: WizardStepComponent, selectors: [["form", "wmWizardStep", ""]], contentQueries: function WizardStepComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
+                i0__namespace.ɵɵcontentQuery(dirIndex, i3.RedrawableDirective, 5);
             } if (rf & 2) {
                 let _t;
                 i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.reDrawableComponents = _t);
-            } }, hostVars: 2, hostBindings: function WizardStepDirective_HostBindings(rf, ctx) { if (rf & 2) {
+            } }, hostVars: 2, hostBindings: function WizardStepComponent_HostBindings(rf, ctx) { if (rf & 2) {
                 i0__namespace.ɵɵclassProp("current", ctx.isCurrent);
-            } }, exportAs: ["wmWizardStep"], features: [i0__namespace.ɵɵProvidersFeature([
-                    i2.provideAsWidgetRef(WizardStepDirective),
+            } }, exportAs: ["wmWizardStep"], standalone: true, features: [i0__namespace.ɵɵProvidersFeature([
+                    i3.provideAsWidgetRef(WizardStepComponent),
                     i1.NgForm
-                ]), i0__namespace.ɵɵInheritDefinitionFeature] }); }
+                ]), i0__namespace.ɵɵInheritDefinitionFeature, i0__namespace.ɵɵStandaloneFeature], attrs: _c0$1, ngContentSelectors: _c1$1, decls: 1, vars: 0, template: function WizardStepComponent_Template(rf, ctx) { if (rf & 1) {
+                i0__namespace.ɵɵprojectionDef();
+                i0__namespace.ɵɵprojection(0, 0, ["partial-container-target", ""]);
+            } }, encapsulation: 2 }); }
     }
-    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(WizardStepDirective, [{
-            type: i0.Directive,
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(WizardStepComponent, [{
+            type: i0.Component,
             args: [{
+                    standalone: true,
                     selector: 'form[wmWizardStep]',
+                    template: `<ng-content partial-container-target></ng-content>`,
                     providers: [
-                        i2.provideAsWidgetRef(WizardStepDirective),
+                        i3.provideAsWidgetRef(WizardStepComponent),
                         i1.NgForm
                     ],
                     exportAs: 'wmWizardStep'
@@ -183,62 +225,64 @@
                     type: i0.Optional
                 }] }], { reDrawableComponents: [{
                 type: i0.ContentChildren,
-                args: [i2.RedrawableDirective, { descendants: true }]
+                args: [i3.RedrawableDirective, { descendants: true }]
             }], isCurrent: [{
                 type: i0.HostBinding,
                 args: ['class.current']
             }] }); })();
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(WizardStepComponent, { className: "WizardStepComponent", filePath: "wizard-step/wizard-step.component.ts", lineNumber: 47 }); })();
 
     const _c0 = ["wizardAction"];
     const _c1 = ["wmWizard", ""];
-    const _c2 = ["*"];
-    const _c3 = (a0, a1, a2) => ({ active: a0, current: a1, disabled: a2 });
-    const _c4 = a0 => ({ "title-center-align": a0 });
-    function WizardComponent_li_2_span_2_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelement(0, "span", 17);
+    const _c2 = ["*", [["div", "wmRepeatTemplate", ""]]];
+    const _c3 = ["*", "div[wmRepeatTemplate]"];
+    const _c4 = (a0, a1, a2) => ({ active: a0, current: a1, disabled: a2 });
+    const _c5 = a0 => ({ "title-center-align": a0 });
+    function WizardComponent_For_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelement(0, "span", 5);
     } }
-    function WizardComponent_li_2_span_4_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelementStart(0, "span", 18);
+    function WizardComponent_For_3_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelementStart(0, "span", 7);
         i0__namespace.ɵɵtext(1);
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
-        const i_r4 = i0__namespace.ɵɵnextContext().index;
+        const ɵ$index_5_r4 = i0__namespace.ɵɵnextContext().$index;
         i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵtextInterpolate(i_r4 + 1);
+        i0__namespace.ɵɵtextInterpolate(ɵ$index_5_r4 + 1);
     } }
-    function WizardComponent_li_2_i_5_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelement(0, "i", 19);
+    function WizardComponent_For_3_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelement(0, "i", 8);
     } }
-    function WizardComponent_li_2_i_6_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelement(0, "i", 20);
+    function WizardComponent_For_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelement(0, "i", 9);
     } }
-    function WizardComponent_li_2_i_7_Template(rf, ctx) { if (rf & 1) {
+    function WizardComponent_For_3_Conditional_7_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelement(0, "i");
     } if (rf & 2) {
         const step_r2 = i0__namespace.ɵɵnextContext().$implicit;
         i0__namespace.ɵɵclassMapInterpolate1("app-icon ", step_r2.iconclass, "");
     } }
-    function WizardComponent_li_2_i_8_Template(rf, ctx) { if (rf & 1) {
+    function WizardComponent_For_3_Conditional_8_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelement(0, "i");
     } if (rf & 2) {
         const step_r2 = i0__namespace.ɵɵnextContext().$implicit;
         i0__namespace.ɵɵclassMapInterpolate1("app-icon ", step_r2.doneiconclass, "");
     } }
-    function WizardComponent_li_2_span_10_Template(rf, ctx) { if (rf & 1) {
+    function WizardComponent_For_3_Conditional_10_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelementStart(0, "span");
         i0__namespace.ɵɵtext(1);
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
-        const i_r4 = i0__namespace.ɵɵnextContext().index;
+        const ɵ$index_5_r4 = i0__namespace.ɵɵnextContext().$index;
         i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵtextInterpolate("0" + (i_r4 + 1));
+        i0__namespace.ɵɵtextInterpolate("0" + (ɵ$index_5_r4 + 1));
     } }
-    function WizardComponent_li_2_span_12_Template(rf, ctx) { if (rf & 1) {
+    function WizardComponent_For_3_Conditional_12_Template(rf, ctx) { if (rf & 1) {
         const _r5 = i0__namespace.ɵɵgetCurrentView();
-        i0__namespace.ɵɵelementStart(0, "span", 21);
-        i0__namespace.ɵɵelement(1, "span", 15);
-        i0__namespace.ɵɵelementStart(2, "a", 22);
-        i0__namespace.ɵɵlistener("click", function WizardComponent_li_2_span_12_Template_a_click_2_listener() { i0__namespace.ɵɵrestoreView(_r5); const ctx_r2 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r2.readMoreSubtitle()); });
+        i0__namespace.ɵɵelementStart(0, "span", 13);
+        i0__namespace.ɵɵelement(1, "span", 12);
+        i0__namespace.ɵɵelementStart(2, "a", 14);
+        i0__namespace.ɵɵlistener("click", function WizardComponent_For_3_Conditional_12_Template_a_click_2_listener() { i0__namespace.ɵɵrestoreView(_r5); const ctx_r2 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r2.readMoreSubtitle()); });
         i0__namespace.ɵɵtext(3, "more");
         i0__namespace.ɵɵelementEnd()();
     } if (rf & 2) {
@@ -247,65 +291,100 @@
         i0__namespace.ɵɵadvance();
         i0__namespace.ɵɵproperty("textContent", step_r2.subtitle);
     } }
-    function WizardComponent_li_2_Template(rf, ctx) { if (rf & 1) {
+    function WizardComponent_For_3_Template(rf, ctx) { if (rf & 1) {
         const _r1 = i0__namespace.ɵɵgetCurrentView();
-        i0__namespace.ɵɵelementStart(0, "li", 5);
-        i0__namespace.ɵɵlistener("click", function WizardComponent_li_2_Template_li_click_0_listener($event) { const step_r2 = i0__namespace.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r2.onWizardHeaderClick($event, step_r2)); });
-        i0__namespace.ɵɵelementStart(1, "a", 6);
-        i0__namespace.ɵɵtemplate(2, WizardComponent_li_2_span_2_Template, 1, 0, "span", 7);
-        i0__namespace.ɵɵelementStart(3, "span", 8);
-        i0__namespace.ɵɵtemplate(4, WizardComponent_li_2_span_4_Template, 2, 1, "span", 9)(5, WizardComponent_li_2_i_5_Template, 1, 0, "i", 10)(6, WizardComponent_li_2_i_6_Template, 1, 0, "i", 11)(7, WizardComponent_li_2_i_7_Template, 1, 3, "i", 12)(8, WizardComponent_li_2_i_8_Template, 1, 3, "i", 12);
+        i0__namespace.ɵɵelementStart(0, "li", 3);
+        i0__namespace.ɵɵlistener("click", function WizardComponent_For_3_Template_li_click_0_listener($event) { const step_r2 = i0__namespace.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r2.onWizardHeaderClick($event, step_r2)); });
+        i0__namespace.ɵɵelementStart(1, "a", 4);
+        i0__namespace.ɵɵtemplate(2, WizardComponent_For_3_Conditional_2_Template, 1, 0, "span", 5);
+        i0__namespace.ɵɵelementStart(3, "span", 6);
+        i0__namespace.ɵɵtemplate(4, WizardComponent_For_3_Conditional_4_Template, 2, 1, "span", 7)(5, WizardComponent_For_3_Conditional_5_Template, 1, 0, "i", 8)(6, WizardComponent_For_3_Conditional_6_Template, 1, 0, "i", 9)(7, WizardComponent_For_3_Conditional_7_Template, 1, 3, "i", 10)(8, WizardComponent_For_3_Conditional_8_Template, 1, 3, "i", 10);
         i0__namespace.ɵɵelementEnd();
-        i0__namespace.ɵɵelementStart(9, "span", 13);
-        i0__namespace.ɵɵtemplate(10, WizardComponent_li_2_span_10_Template, 2, 1, "span", 14);
-        i0__namespace.ɵɵelement(11, "span", 15);
+        i0__namespace.ɵɵelementStart(9, "span", 11);
+        i0__namespace.ɵɵtemplate(10, WizardComponent_For_3_Conditional_10_Template, 2, 1, "span");
+        i0__namespace.ɵɵelement(11, "span", 12);
         i0__namespace.ɵɵelementEnd();
-        i0__namespace.ɵɵtemplate(12, WizardComponent_li_2_span_12_Template, 4, 2, "span", 16);
+        i0__namespace.ɵɵtemplate(12, WizardComponent_For_3_Conditional_12_Template, 4, 2, "span", 13);
         i0__namespace.ɵɵelementEnd()();
     } if (rf & 2) {
         const step_r2 = ctx.$implicit;
         const ctx_r2 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵproperty("hidden", !step_r2.show)("ngClass", i0__namespace.ɵɵpureFunction3(15, _c3, step_r2.done, step_r2.active, step_r2.disabled));
+        i0__namespace.ɵɵproperty("hidden", !step_r2.show)("ngClass", i0__namespace.ɵɵpureFunction3(15, _c4, step_r2.done, step_r2.active, step_r2.disabled));
         i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(19, _c4, ctx_r2.class && ctx_r2.class.includes("classic") && !step_r2.subtitle));
+        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(19, _c5, ctx_r2.class && ctx_r2.class.includes("classic") && !step_r2.subtitle));
         i0__namespace.ɵɵattribute("aria-current", step_r2.active ? "step" : null)("aria-disabled", step_r2.disabled)("title", step_r2.title);
         i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵproperty("ngIf", ctx_r2.class && ctx_r2.class.includes("classic"));
+        i0__namespace.ɵɵconditional(ctx_r2.class && ctx_r2.class.includes("classic") ? 2 : -1);
         i0__namespace.ɵɵadvance(2);
-        i0__namespace.ɵɵproperty("ngIf", ctx_r2.class && ctx_r2.class.includes("number") && !step_r2.isDone);
+        i0__namespace.ɵɵconditional(ctx_r2.class && ctx_r2.class.includes("number") && !step_r2.isDone ? 4 : -1);
         i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵproperty("ngIf", ctx_r2.class && (ctx_r2.class.includes("dottedstepper") || ctx_r2.class.includes("text-inline") && !ctx_r2.class.includes("iconstepper")) && !step_r2.isDone);
+        i0__namespace.ɵɵconditional(ctx_r2.class && (ctx_r2.class.includes("dottedstepper") || ctx_r2.class.includes("text-inline") && !ctx_r2.class.includes("iconstepper")) && !step_r2.isDone ? 5 : -1);
         i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵproperty("ngIf", ctx_r2.class && (ctx_r2.class.includes("dottedstepper") || ctx_r2.class.includes("number")) && step_r2.isDone);
+        i0__namespace.ɵɵconditional(ctx_r2.class && (ctx_r2.class.includes("dottedstepper") || ctx_r2.class.includes("number")) && step_r2.isDone ? 6 : -1);
         i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵproperty("ngIf", ctx_r2.class && ctx_r2.class.includes("iconstepper") && (step_r2.iconclass && !step_r2.isDone || step_r2.iconclass && step_r2.isDone && step_r2.doneiconclass === ""));
+        i0__namespace.ɵɵconditional(ctx_r2.class && ctx_r2.class.includes("iconstepper") && (step_r2.iconclass && !step_r2.isDone || step_r2.iconclass && step_r2.isDone && step_r2.doneiconclass === "") ? 7 : -1);
         i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵproperty("ngIf", step_r2.doneiconclass && step_r2.isDone && (ctx_r2.class && ctx_r2.class.includes("iconstepper")));
+        i0__namespace.ɵɵconditional(step_r2.doneiconclass && step_r2.isDone && (ctx_r2.class && ctx_r2.class.includes("iconstepper")) ? 8 : -1);
         i0__namespace.ɵɵadvance(2);
-        i0__namespace.ɵɵproperty("ngIf", ctx_r2.class && ctx_r2.class.includes("text-inline"));
+        i0__namespace.ɵɵconditional(ctx_r2.class && ctx_r2.class.includes("text-inline") ? 10 : -1);
         i0__namespace.ɵɵadvance();
         i0__namespace.ɵɵproperty("textContent", step_r2.title);
         i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵproperty("ngIf", step_r2.subtitle);
+        i0__namespace.ɵɵconditional(step_r2.subtitle ? 12 : -1);
+    } }
+    function WizardComponent_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelement(0, "p", 15);
+    } }
+    function WizardComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelementStart(0, "div", 2);
+        i0__namespace.ɵɵtemplate(1, WizardComponent_Conditional_4_Conditional_1_Template, 1, 0, "p", 15);
+        i0__namespace.ɵɵprojection(2, 0, ["ngProjectAs", "form[wmWizardStep]", 5, ["form", "wmWizardStep", ""]]);
+        i0__namespace.ɵɵelementEnd();
+    } if (rf & 2) {
+        const ctx_r2 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵconditional(ctx_r2.message.caption ? 1 : -1);
+    } }
+    function WizardComponent_Conditional_5_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelementStart(0, "div");
+        i0__namespace.ɵɵtext(1);
+        i0__namespace.ɵɵelementEnd();
+    } if (rf & 2) {
+        const ctx_r2 = i0__namespace.ɵɵnextContext(2);
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵtextInterpolate(ctx_r2.nodatamessage);
     } }
-    function WizardComponent_p_4_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelement(0, "p", 23);
+    function WizardComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelementStart(0, "div", 2);
+        i0__namespace.ɵɵtemplate(1, WizardComponent_Conditional_5_Conditional_1_Template, 2, 1, "div");
+        i0__namespace.ɵɵprojection(2, 1);
+        i0__namespace.ɵɵelementEnd();
+    } if (rf & 2) {
+        const ctx_r2 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵconditional(!(ctx_r2.fieldDefs == null ? null : ctx_r2.fieldDefs.length) ? 1 : -1);
     } }
-    function WizardComponent_ng_container_6_Template(rf, ctx) { if (rf & 1) {
+    function WizardComponent_Conditional_6_ng_container_0_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelementContainer(0);
     } }
+    function WizardComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵtemplate(0, WizardComponent_Conditional_6_ng_container_0_Template, 1, 0, "ng-container", 16);
+    } if (rf & 2) {
+        const ctx_r2 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵproperty("ngTemplateOutlet", ctx_r2.wizardAction);
+    } }
     const DEFAULT_CLS = 'app-wizard panel clearfix';
     const WIDGET_CONFIG = {
         widgetType: 'wm-wizard',
         hostClass: DEFAULT_CLS
     };
-    class WizardComponent extends i2.StylableComponent {
+    class WizardComponent extends i3.StylableComponent {
         static { this.initializeProps = registerProps$2(); }
         get hasPrevStep() {
-            return !this.isFirstStep(this.currentStep);
+            return !this._isFirstStep(this.currentStep);
         }
         get hasNextStep() {
-            return !this.isLastStep(this.currentStep);
+            return !this._isLastStep(this.currentStep);
         }
         get showDoneBtn() {
             if (!this.currentStep) {
@@ -331,10 +410,29 @@
             }
             return this.currentStep.enableDone && this.currentStep.isValid;
         }
-        constructor(inj, contexts, explicitContext) {
-            let resolveFn = core.noop;
+        /**
+         * 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));
-            i2.styler(this.nativeElement, this, i2.APPLY_STYLES_TYPE.SHELL);
+            this._isFirstLoad = true;
+            i3.styler(this.nativeElement, this, i3.APPLY_STYLES_TYPE.SHELL);
             this.promiseResolverFn = resolveFn;
             // initialize the message object with default values
             this.message = {
@@ -342,11 +440,87 @@
                 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 stepName - index of the step
+         */
+        removeStep(stepName) {
+            const stepRef = this.getStepRefByName(stepName);
+            stepRef ? stepRef.remove() : console.warn(`Could not find step with name '${stepName}'`);
         }
         /**
          * returns next valid step. the index passed is also checked if its valid step
          * @param index
-         * @returns {WizardStepDirective}
+         * @returns {WizardStepComponent}
          */
         getNextValidStepFormIndex(index) {
             for (let i = index; i < this.steps.length; i++) {
@@ -359,7 +533,7 @@
         /**
          * returns previous valid step. the index passed is also checked if its valid step
          * @param index
-         * @returns {WizardStepDirective}
+         * @returns {WizardStepComponent}
          */
         getPreviousValidStepFormIndex(index) {
             for (let i = index; i >= 0; i--) {
@@ -379,14 +553,14 @@
         /**
          * returns stepRef when index is passed.
          * @param {number} index
-         * @returns {WizardStepDirective}
+         * @returns {WizardStepComponent}
          */
         getStepRefByIndex(index) {
             return this.steps.toArray()[index];
         }
         /**
          * returns the index value of the step.
-         * @param {WizardStepDirective} wizardStep
+         * @param {WizardStepComponent} wizardStep
          * @returns {number}
          */
         getStepIndexByRef(wizardStep) {
@@ -395,7 +569,7 @@
         /**
          * gets stepRef by searching on the name property.
          * @param {string} name
-         * @returns {WizardStepDirective}
+         * @returns {WizardStepComponent}
          */
         getStepRefByName(name) {
             return this.steps.find(step => step.name === name);
@@ -403,7 +577,7 @@
         /**
          * sets default step as current step if configured
          * or finds first valid step and set it as current step.
-         * @param {WizardStepDirective} step
+         * @param {WizardStepComponent} step
          */
         setDefaultStep(step) {
             // If the default step has show true then only update the currentStep
@@ -432,7 +606,7 @@
         /**
          * Selects the associated step when the wizard header is clicked.
          * @param $event
-         * @param {WizardStepDirective} currentStep
+         * @param {WizardStepComponent} currentStep
          */
         onWizardHeaderClick($event, currentStep) {
             // select the step if it's status is done
@@ -515,22 +689,34 @@
         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}'`);
+        /**
+         * 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() {
@@ -572,21 +758,30 @@
                 }
             });
         }
-        isFirstStep(stepRef) {
+        _isFirstStep(stepRef) {
             return this.steps.first === stepRef;
         }
-        isLastStep(stepRef) {
+        _isLastStep(stepRef) {
             return this.steps.last === stepRef;
         }
+        onDataChange(newVal) {
+            this.fieldDefs = i3.createArrayFrom(newVal);
+        }
         // 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 === 'defaultstepindex') {
+                this.setDefaultStep(this.getStepRefByIndex(nv));
+            }
             else if (key === 'actionsalignment') {
                 this.nativeElement.querySelector('div.app-wizard-actions')?.classList.replace(ov, nv);
             }
@@ -615,61 +810,67 @@
             this.wizContext.disableNext = () => !this.enableNext;
             this.wizContext.disablePrevious = () => !this.enablePrev;
             this.wizContext.disableDone = () => !this.enableDone;
+            this.steps.changes.subscribe(slides => {
+                if (this.steps.length && this.type === 'dynamic' && this._isFirstLoad) {
+                    this.setDefaultStep(this.getStepRefByIndex(this.defaultstepindex));
+                    this._isFirstLoad = false;
+                }
+            });
         }
         ngAfterViewInit() {
             super.ngAfterViewInit();
-            i2.styler(this.nativeElement.querySelector('.panel-body'), this, i2.APPLY_STYLES_TYPE.INNER_SHELL);
+            i3.styler(this.nativeElement.querySelector('.panel-body'), this, i3.APPLY_STYLES_TYPE.INNER_SHELL);
             setTimeout(() => {
                 if ($(window).width() < 768) {
                     $(".app-wizard").removeClass("vertical");
                 }
-                this.nativeElement.querySelector('div.app-wizard-actions-right')?.classList.remove('app-container');
-                this.nativeElement.querySelector('div.app-wizard-actions')?.classList.add(this.actionsalignment);
             });
         }
-        static { this.ɵfac = function WizardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || WizardComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i2.Context, 2), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
+        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'));
+        }
+        static { this.ɵfac = function WizardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || WizardComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.DynamicComponentRefProvider), i0__namespace.ɵɵdirectiveInject(i3.Context, 2), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
         static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: WizardComponent, selectors: [["div", "wmWizard", ""]], contentQueries: function WizardComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
                 i0__namespace.ɵɵcontentQuery(dirIndex, _c0, 4, i0.TemplateRef);
-                i0__namespace.ɵɵcontentQuery(dirIndex, WizardStepDirective, 4);
+                i0__namespace.ɵɵcontentQuery(dirIndex, WizardStepComponent, 4);
             } if (rf & 2) {
                 let _t;
                 i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.wizardAction = _t.first);
                 i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.steps = _t);
-            } }, features: [i0__namespace.ɵɵProvidersFeature([
-                    i2.provideAsWidgetRef(WizardComponent),
-                    { provide: i2.Context, useFactory: () => { return {}; }, multi: true }
-                ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1, ngContentSelectors: _c2, decls: 7, vars: 6, consts: [[1, "app-wizard-heading"], ["class", "app-wizard-step", 3, "hidden", "ngClass", "click", 4, "ngFor", "ngForOf"], [1, "app-wizard-body", "panel-body"], ["wmMessage", "", "caption.bind", "message.caption", "type.bind", "message.type", 4, "ngIf"], [4, "ngTemplateOutlet"], [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"]], template: function WizardComponent_Template(rf, ctx) { if (rf & 1) {
-                i0__namespace.ɵɵprojectionDef();
+            } }, exportAs: ["wmWizard"], standalone: true, features: [i0__namespace.ɵɵProvidersFeature([
+                    i3.provideAsWidgetRef(WizardComponent),
+                    { provide: i3.Context, useFactory: () => { return {}; }, multi: true }
+                ]), i0__namespace.ɵɵInheritDefinitionFeature, i0__namespace.ɵɵStandaloneFeature], attrs: _c1, ngContentSelectors: _c3, decls: 7, vars: 6, consts: [[1, "app-wizard-heading"], [1, "app-wizard-step", 3, "hidden", "ngClass"], [1, "app-wizard-body", "panel-body"], [1, "app-wizard-step", 3, "click", "hidden", "ngClass"], ["href", "javascript:void(0)", 3, "ngClass"], [1, "arrow"], [1, "wizard-step-number"], [1, "count"], [1, "dottedstepper"], [1, "app-icon", "wi", "wi-done"], [3, "class"], [1, "title-wrapper"], [1, "step-title", 3, "textContent"], [1, "subtitle-wrapper"], [1, "read_more", 2, "display", "none", 3, "click"], ["wmMessage", "", "caption.bind", "message.caption", "type.bind", "message.type"], [4, "ngTemplateOutlet"]], template: function WizardComponent_Template(rf, ctx) { if (rf & 1) {
+                i0__namespace.ɵɵprojectionDef(_c2);
                 i0__namespace.ɵɵelementStart(0, "div", 0)(1, "ul");
-                i0__namespace.ɵɵtemplate(2, WizardComponent_li_2_Template, 13, 21, "li", 1);
+                i0__namespace.ɵɵrepeaterCreate(2, WizardComponent_For_3_Template, 13, 21, "li", 1, i0__namespace.ɵɵrepeaterTrackByIdentity);
                 i0__namespace.ɵɵelementEnd()();
-                i0__namespace.ɵɵelementStart(3, "div", 2);
-                i0__namespace.ɵɵtemplate(4, WizardComponent_p_4_Template, 1, 0, "p", 3);
-                i0__namespace.ɵɵprojection(5, 0, ["ngProjectAs", "form[wmWizardStep]", 5, ["form", "wmWizardStep", ""]]);
-                i0__namespace.ɵɵelementEnd();
-                i0__namespace.ɵɵtemplate(6, WizardComponent_ng_container_6_Template, 1, 0, "ng-container", 4);
+                i0__namespace.ɵɵtemplate(4, WizardComponent_Conditional_4_Template, 3, 1, "div", 2)(5, WizardComponent_Conditional_5_Template, 3, 1, "div", 2)(6, WizardComponent_Conditional_6_Template, 1, 1, "ng-container");
             } if (rf & 2) {
                 i0__namespace.ɵɵadvance();
                 i0__namespace.ɵɵclassMapInterpolate1("app-wizard-steps nav nav-pills ", ctx.stepClass, "");
                 i0__namespace.ɵɵadvance();
-                i0__namespace.ɵɵproperty("ngForOf", ctx.steps);
-                i0__namespace.ɵɵadvance(2);
-                i0__namespace.ɵɵproperty("ngIf", ctx.message.caption);
+                i0__namespace.ɵɵrepeater(ctx.steps);
                 i0__namespace.ɵɵadvance(2);
-                i0__namespace.ɵɵproperty("ngTemplateOutlet", ctx.wizardAction);
-            } }, dependencies: [i1$1__namespace.NgClass, i1$1__namespace.NgForOf, i1$1__namespace.NgIf, i1$1__namespace.NgTemplateOutlet, i2__namespace.MessageComponent, i2__namespace.TextContentDirective], encapsulation: 2 }); }
+                i0__namespace.ɵɵconditional(ctx.type !== "dynamic" ? 4 : -1);
+                i0__namespace.ɵɵadvance();
+                i0__namespace.ɵɵconditional(ctx.type === "dynamic" ? 5 : -1);
+                i0__namespace.ɵɵadvance();
+                i0__namespace.ɵɵconditional(ctx.fieldDefs && ctx.fieldDefs.length || ctx.type !== "dynamic" ? 6 : -1);
+            } }, dependencies: [i2.CommonModule, i2__namespace.NgClass, i2__namespace.NgTemplateOutlet, i3.WmComponentsModule, i3__namespace.MessageComponent, i3__namespace.TextContentDirective], encapsulation: 2 }); }
     }
     (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(WizardComponent, [{
             type: i0.Component,
-            args: [{ selector: 'div[wmWizard]', providers: [
-                        i2.provideAsWidgetRef(WizardComponent),
-                        { provide: i2.Context, useFactory: () => { return {}; }, multi: true }
-                    ], template: "<div class=\"app-wizard-heading\">\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-current]=\"step.active ? 'step' : null\"\n               [attr.aria-disabled]=\"step.disabled\" [attr.title]=\"step.title\"\n               [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\">\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<ng-container *ngTemplateOutlet=\"wizardAction\"></ng-container>\n" }]
-        }], () => [{ type: i0__namespace.Injector }, { type: Array, decorators: [{
+            args: [{ standalone: true, imports: [i2.CommonModule, i3.WmComponentsModule], selector: 'div[wmWizard]', providers: [
+                        i3.provideAsWidgetRef(WizardComponent),
+                        { provide: i3.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]=\"{active: step.done, current: step.active, disabled: step.disabled}\"\n        (click)=\"onWizardHeaderClick($event, step)\">\n        <a href=\"javascript:void(0)\" [attr.aria-current]=\"step.active ? 'step' : null\"\n          [attr.aria-disabled]=\"step.disabled\" [attr.title]=\"step.title\"\n          [ngClass]=\"{'title-center-align':class && class.includes('classic') && !step.subtitle}\">\n          @if (class && class.includes('classic')) {\n            <span class=\"arrow\"></span>\n          }\n          <span class=\"wizard-step-number\">\n            @if (class && class.includes('number') && !step.isDone) {\n              <span class=\"count\">{{i+1}}</span>\n            }\n            @if (class && (class.includes('dottedstepper') || class.includes('text-inline') && !class.includes('iconstepper')) && !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 ((class && class.includes('iconstepper')) && ((step.iconclass && !step.isDone) || (step.iconclass && step.isDone && step.doneiconclass ===''))) {\n              <i class=\"app-icon {{step.iconclass}}\"></i>\n            }\n            @if (step.doneiconclass && step.isDone && (class && class.includes('iconstepper'))) {\n              <i class=\"app-icon {{step.doneiconclass}}\"></i>\n            }\n          </span>\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" }]
+        }], () => [{ type: i0__namespace.Injector }, { type: i1$1__namespace.DynamicComponentRefProvider }, { type: Array, decorators: [{
                     type: i0.Self
                 }, {
                     type: i0.Inject,
-                    args: [i2.Context]
+                    args: [i3.Context]
                 }] }, { type: undefined, decorators: [{
                     type: i0.Inject,
                     args: ['EXPLICIT_CONTEXT']
@@ -677,18 +878,18 @@
                     type: i0.Optional
                 }] }], { steps: [{
                 type: i0.ContentChildren,
-                args: [WizardStepDirective]
+                args: [WizardStepComponent]
             }], wizardAction: [{
                 type: i0.ContentChild,
                 args: ['wizardAction', { read: i0.TemplateRef, descendants: false }]
             }] }); })();
-    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(WizardComponent, { className: "WizardComponent", filePath: "wizard.component.ts", lineNumber: 43 }); })();
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(WizardComponent, { className: "WizardComponent", filePath: "wizard.component.ts", lineNumber: 51 }); })();
 
     const registerProps = () => {
-        i2.register('wm-wizardaction', new Map([
-            ['class', i2.PROP_STRING],
-            ['name', i2.PROP_STRING],
-            ['show', { value: true, ...i2.PROP_BOOLEAN }]
+        i3.register('wm-wizardaction', new Map([
+            ['class', i3.PROP_STRING],
+            ['name', i3.PROP_STRING],
+            ['show', { value: true, ...i3.PROP_BOOLEAN }]
         ]));
     };
 
@@ -696,22 +897,23 @@
         widgetType: 'wm-wizardaction',
         hostClass: 'app-wizard-actions panel-footer '
     };
-    class WizardActionDirective extends i2.BaseComponent {
+    class WizardActionDirective extends i3.BaseComponent {
         static { this.initializeProps = registerProps(); }
         constructor(inj, explicitContext) {
             super(inj, WIDGET_INFO, explicitContext);
         }
         static { this.ɵfac = function WizardActionDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || WizardActionDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
-        static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: WizardActionDirective, selectors: [["div", "wmWizardAction", ""]], exportAs: ["wmWizardAction"], features: [i0__namespace.ɵɵProvidersFeature([
-                    i2.provideAsWidgetRef(WizardActionDirective)
+        static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: WizardActionDirective, selectors: [["div", "wmWizardAction", ""]], exportAs: ["wmWizardAction"], standalone: true, features: [i0__namespace.ɵɵProvidersFeature([
+                    i3.provideAsWidgetRef(WizardActionDirective)
                 ]), i0__namespace.ɵɵInheritDefinitionFeature] }); }
     }
     (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(WizardActionDirective, [{
             type: i0.Directive,
             args: [{
+                    standalone: true,
                     selector: 'div[wmWizardAction]',
                     providers: [
-                        i2.provideAsWidgetRef(WizardActionDirective)
+                        i3.provideAsWidgetRef(WizardActionDirective)
                     ],
                     exportAs: 'wmWizardAction',
                 }]
@@ -722,41 +924,8 @@
                     type: i0.Optional
                 }] }], null); })();
 
-    const components = [
-        WizardActionDirective,
-        WizardStepDirective,
-        WizardComponent
-    ];
-    class WizardModule {
-        static { this.ɵfac = function WizardModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || WizardModule)(); }; }
-        static { this.ɵmod = /*@__PURE__*/ i0__namespace.ɵɵdefineNgModule({ type: WizardModule }); }
-        static { this.ɵinj = /*@__PURE__*/ i0__namespace.ɵɵdefineInjector({ imports: [i1$1.CommonModule,
-                i2.WmComponentsModule,
-                i1.FormsModule] }); }
-    }
-    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(WizardModule, [{
-            type: i0.NgModule,
-            args: [{
-                    imports: [
-                        i1$1.CommonModule,
-                        i2.WmComponentsModule,
-                        i1.FormsModule
-                    ],
-                    declarations: [...components],
-                    exports: [...components]
-                }]
-        }], null, null); })();
-    (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0__namespace.ɵɵsetNgModuleScope(WizardModule, { declarations: [WizardActionDirective,
-            WizardStepDirective,
-            WizardComponent], imports: [i1$1.CommonModule,
-            i2.WmComponentsModule,
-            i1.FormsModule], exports: [WizardActionDirective,
-            WizardStepDirective,
-            WizardComponent] }); })();
-
     exports.WizardActionDirective = WizardActionDirective;
     exports.WizardComponent = WizardComponent;
-    exports.WizardModule = WizardModule;
-    exports.WizardStepDirective = WizardStepDirective;
+    exports.WizardStepComponent = WizardStepComponent;
 
 }));