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

package/components/containers/wizard/fesm2022/index.mjs

@@ -1,49 +1,60 @@
-import * as i0 from '@angular/core';
-import { Directive, Self, Inject, Optional, ContentChildren, HostBinding, TemplateRef, Component, ContentChild, NgModule } from '@angular/core';
-import * as i1$1 from '@angular/common';
+import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i1 from '@angular/forms';
-import { NgForm, FormsModule } from '@angular/forms';
-import * as i2 from '@wm/components/base';
-import { register, PROP_STRING, PROP_BOOLEAN, BaseComponent, RedrawableDirective, provideAsWidgetRef, StylableComponent, styler, APPLY_STYLES_TYPE, Context, WmComponentsModule } from '@wm/components/base';
+import * as i3 from '@wm/components/base';
+import { register, PROP_STRING, PROP_BOOLEAN, PROP_ANY, PROP_NUMBER, StylableComponent, RedrawableDirective, provideAsWidgetRef, styler, APPLY_STYLES_TYPE, createArrayFrom, Context, WmComponentsModule, BaseComponent } from '@wm/components/base';
+import * as i0 from '@angular/core';
+import { Component, Self, Inject, Optional, ContentChildren, HostBinding, TemplateRef, ContentChild, Directive } from '@angular/core';
+import * as i1$1 from '@wm/core';
 import { noop } from '@wm/core';
+import * as i1 from '@angular/forms';
+import { NgForm } from '@angular/forms';
+import { find, isArray, forEach, indexOf, get, isString, isNumber } from 'lodash-es';
 
 const registerProps$2 = () => {
     register('wm-wizard', new Map([
         ['actionsalignment', { value: 'right', ...PROP_STRING }],
         ['cancelable', { value: true, ...PROP_BOOLEAN }],
-        ['enablenext', { value: false, ...PROP_BOOLEAN }],
         ['cancelbtnlabel', { value: 'Cancel', ...PROP_STRING }],
         ['class', { value: 'classic', ...PROP_STRING }],
+        ['dataset', PROP_ANY],
         ['defaultstep', { value: 'none', ...PROP_STRING }],
+        ['defaultstepindex', { value: 0, ...PROP_NUMBER }],
         ['donebtnlabel', { value: 'Done', ...PROP_STRING }],
+        ['enablenext', { value: false, ...PROP_BOOLEAN }],
         ['name', PROP_STRING],
         ['nextbtnlabel', { value: 'Next', ...PROP_STRING }],
+        ['nodatamessage', { value: 'No Data Found', ...PROP_STRING }],
         ['previousbtnlabel', { value: 'Previous', ...PROP_STRING }],
         ['show', { value: true, ...PROP_BOOLEAN }],
-        ['stepstyle', { value: 'auto', ...PROP_STRING }]
+        ['stepstyle', { value: 'auto', ...PROP_STRING }],
+        ['type', PROP_STRING]
     ]));
 };
 
 const registerProps$1 = () => {
     register('wm-wizardstep', new Map([
         ['class', PROP_STRING],
+        ['content', PROP_STRING],
+        ['doneiconclass', { value: 'wi wi-done', ...PROP_STRING }],
+        ['dynamicStepIndex', PROP_NUMBER], // internal property
         ['enableskip', { value: false, ...PROP_BOOLEAN }],
         ['iconclass', { value: 'wi wi-person', ...PROP_STRING }],
-        ['doneiconclass', { value: 'wi wi-done', ...PROP_STRING }],
+        ['isdynamic', PROP_STRING], // internal property
         ['name', PROP_STRING],
         ['show', { value: true, ...PROP_BOOLEAN }],
-        ['title', { value: 'Step Title', ...PROP_STRING }],
-        ['subtitle', PROP_STRING]
+        ['subtitle', PROP_STRING],
+        ['title', { value: 'Step Title', ...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 BaseComponent {
+class WizardStepComponent extends StylableComponent {
     static { this.initializeProps = registerProps$1(); }
     get isCurrent() {
         return this.active;
@@ -109,6 +120,7 @@ class WizardStepDirective extends BaseComponent {
     constructor(inj, ngForm, explicitContext) {
         super(inj, WIDGET_CONFIG$1, explicitContext);
         this.ngForm = ngForm;
+        this.$lazyLoad = 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
@@ -133,25 +145,56 @@ class WizardStepDirective extends BaseComponent {
             this.invokeEventCallback('load', { stepIndex });
         }, 100);
     }
-    static { this.ɵfac = function WizardStepDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || WizardStepDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1.NgForm, 2), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: WizardStepDirective, selectors: [["form", "wmWizardStep", ""]], contentQueries: function WizardStepDirective_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
+    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.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1.NgForm, 2), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WizardStepComponent, selectors: [["form", "wmWizardStep", ""]], contentQueries: function WizardStepComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
             i0.ɵɵcontentQuery(dirIndex, RedrawableDirective, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.reDrawableComponents = _t);
-        } }, hostVars: 2, hostBindings: function WizardStepDirective_HostBindings(rf, ctx) { if (rf & 2) {
+        } }, hostVars: 2, hostBindings: function WizardStepComponent_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵclassProp("current", ctx.isCurrent);
-        } }, exportAs: ["wmWizardStep"], features: [i0.ɵɵProvidersFeature([
-                provideAsWidgetRef(WizardStepDirective),
+        } }, exportAs: ["wmWizardStep"], standalone: true, features: [i0.ɵɵProvidersFeature([
+                provideAsWidgetRef(WizardStepComponent),
                 NgForm
-            ]), i0.ɵɵInheritDefinitionFeature] }); }
+            ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], attrs: _c0$1, ngContentSelectors: _c1$1, decls: 1, vars: 0, template: function WizardStepComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0, 0, ["partial-container-target", ""]);
+        } }, encapsulation: 2 }); }
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WizardStepDirective, [{
-        type: Directive,
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WizardStepComponent, [{
+        type: Component,
         args: [{
+                standalone: true,
                 selector: 'form[wmWizardStep]',
+                template: `<ng-content partial-container-target></ng-content>`,
                 providers: [
-                    provideAsWidgetRef(WizardStepDirective),
+                    provideAsWidgetRef(WizardStepComponent),
                     NgForm
                 ],
                 exportAs: 'wmWizardStep'
@@ -170,57 +213,59 @@ class WizardStepDirective extends BaseComponent {
             type: HostBinding,
             args: ['class.current']
         }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵ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.ɵɵ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.ɵɵelement(0, "span", 5);
 } }
-function WizardComponent_li_2_span_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 18);
+function WizardComponent_For_3_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 7);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const i_r4 = i0.ɵɵnextContext().index;
+    const ɵ$index_5_r4 = i0.ɵɵnextContext().$index;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(i_r4 + 1);
+    i0.ɵɵtextInterpolate(ɵ$index_5_r4 + 1);
 } }
-function WizardComponent_li_2_i_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 19);
+function WizardComponent_For_3_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 8);
 } }
-function WizardComponent_li_2_i_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 20);
+function WizardComponent_For_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵ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.ɵɵelement(0, "i");
 } if (rf & 2) {
     const step_r2 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵclassMapInterpolate1("app-icon ", step_r2.iconclass, "");
 } }
-function WizardComponent_li_2_i_8_Template(rf, ctx) { if (rf & 1) {
+function WizardComponent_For_3_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i");
 } if (rf & 2) {
     const step_r2 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵclassMapInterpolate1("app-icon ", step_r2.doneiconclass, "");
 } }
-function WizardComponent_li_2_span_10_Template(rf, ctx) { if (rf & 1) {
+function WizardComponent_For_3_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const i_r4 = i0.ɵɵnextContext().index;
+    const ɵ$index_5_r4 = i0.ɵɵnextContext().$index;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate("0" + (i_r4 + 1));
+    i0.ɵɵ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.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 21);
-    i0.ɵɵelement(1, "span", 15);
-    i0.ɵɵelementStart(2, "a", 22);
-    i0.ɵɵlistener("click", function WizardComponent_li_2_span_12_Template_a_click_2_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.readMoreSubtitle()); });
+    i0.ɵɵelementStart(0, "span", 13);
+    i0.ɵɵelement(1, "span", 12);
+    i0.ɵɵelementStart(2, "a", 14);
+    i0.ɵɵlistener("click", function WizardComponent_For_3_Conditional_12_Template_a_click_2_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.readMoreSubtitle()); });
     i0.ɵɵtext(3, "more");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -229,53 +274,88 @@ function WizardComponent_li_2_span_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵ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.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "li", 5);
-    i0.ɵɵlistener("click", function WizardComponent_li_2_Template_li_click_0_listener($event) { const step_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onWizardHeaderClick($event, step_r2)); });
-    i0.ɵɵelementStart(1, "a", 6);
-    i0.ɵɵtemplate(2, WizardComponent_li_2_span_2_Template, 1, 0, "span", 7);
-    i0.ɵɵelementStart(3, "span", 8);
-    i0.ɵɵ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.ɵɵelementStart(0, "li", 3);
+    i0.ɵɵlistener("click", function WizardComponent_For_3_Template_li_click_0_listener($event) { const step_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onWizardHeaderClick($event, step_r2)); });
+    i0.ɵɵelementStart(1, "a", 4);
+    i0.ɵɵtemplate(2, WizardComponent_For_3_Conditional_2_Template, 1, 0, "span", 5);
+    i0.ɵɵelementStart(3, "span", 6);
+    i0.ɵɵ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.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "span", 13);
-    i0.ɵɵtemplate(10, WizardComponent_li_2_span_10_Template, 2, 1, "span", 14);
-    i0.ɵɵelement(11, "span", 15);
+    i0.ɵɵelementStart(9, "span", 11);
+    i0.ɵɵtemplate(10, WizardComponent_For_3_Conditional_10_Template, 2, 1, "span");
+    i0.ɵɵelement(11, "span", 12);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(12, WizardComponent_li_2_span_12_Template, 4, 2, "span", 16);
+    i0.ɵɵtemplate(12, WizardComponent_For_3_Conditional_12_Template, 4, 2, "span", 13);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const step_r2 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("hidden", !step_r2.show)("ngClass", i0.ɵɵpureFunction3(15, _c3, step_r2.done, step_r2.active, step_r2.disabled));
+    i0.ɵɵproperty("hidden", !step_r2.show)("ngClass", i0.ɵɵpureFunction3(15, _c4, step_r2.done, step_r2.active, step_r2.disabled));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(19, _c4, ctx_r2.class && ctx_r2.class.includes("classic") && !step_r2.subtitle));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(19, _c5, ctx_r2.class && ctx_r2.class.includes("classic") && !step_r2.subtitle));
     i0.ɵɵattribute("aria-current", step_r2.active ? "step" : null)("aria-disabled", step_r2.disabled)("title", step_r2.title);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.class && ctx_r2.class.includes("classic"));
+    i0.ɵɵconditional(ctx_r2.class && ctx_r2.class.includes("classic") ? 2 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r2.class && ctx_r2.class.includes("number") && !step_r2.isDone);
+    i0.ɵɵconditional(ctx_r2.class && ctx_r2.class.includes("number") && !step_r2.isDone ? 4 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.class && (ctx_r2.class.includes("dottedstepper") || ctx_r2.class.includes("text-inline") && !ctx_r2.class.includes("iconstepper")) && !step_r2.isDone);
+    i0.ɵɵ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.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.class && (ctx_r2.class.includes("dottedstepper") || ctx_r2.class.includes("number")) && step_r2.isDone);
+    i0.ɵɵconditional(ctx_r2.class && (ctx_r2.class.includes("dottedstepper") || ctx_r2.class.includes("number")) && step_r2.isDone ? 6 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.class && ctx_r2.class.includes("iconstepper") && (step_r2.iconclass && !step_r2.isDone || step_r2.iconclass && step_r2.isDone && step_r2.doneiconclass === ""));
+    i0.ɵɵ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.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", step_r2.doneiconclass && step_r2.isDone && (ctx_r2.class && ctx_r2.class.includes("iconstepper")));
+    i0.ɵɵconditional(step_r2.doneiconclass && step_r2.isDone && (ctx_r2.class && ctx_r2.class.includes("iconstepper")) ? 8 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r2.class && ctx_r2.class.includes("text-inline"));
+    i0.ɵɵconditional(ctx_r2.class && ctx_r2.class.includes("text-inline") ? 10 : -1);
     i0.ɵɵadvance();
     i0.ɵɵproperty("textContent", step_r2.title);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", step_r2.subtitle);
+    i0.ɵɵconditional(step_r2.subtitle ? 12 : -1);
 } }
-function WizardComponent_p_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "p", 23);
+function WizardComponent_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "p", 15);
 } }
-function WizardComponent_ng_container_6_Template(rf, ctx) { if (rf & 1) {
+function WizardComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 2);
+    i0.ɵɵtemplate(1, WizardComponent_Conditional_4_Conditional_1_Template, 1, 0, "p", 15);
+    i0.ɵɵprojection(2, 0, ["ngProjectAs", "form[wmWizardStep]", 5, ["form", "wmWizardStep", ""]]);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.message.caption ? 1 : -1);
+} }
+function WizardComponent_Conditional_5_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r2.nodatamessage);
+} }
+function WizardComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 2);
+    i0.ɵɵtemplate(1, WizardComponent_Conditional_5_Conditional_1_Template, 2, 1, "div");
+    i0.ɵɵprojection(2, 1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!(ctx_r2.fieldDefs == null ? null : ctx_r2.fieldDefs.length) ? 1 : -1);
+} }
+function WizardComponent_Conditional_6_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
+function WizardComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, WizardComponent_Conditional_6_ng_container_0_Template, 1, 0, "ng-container", 16);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.wizardAction);
+} }
 const DEFAULT_CLS = 'app-wizard panel clearfix';
 const WIDGET_CONFIG = {
     widgetType: 'wm-wizard',
@@ -284,10 +364,10 @@ const WIDGET_CONFIG = {
 class WizardComponent extends 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) {
@@ -313,9 +393,28 @@ class WizardComponent extends StylableComponent {
         }
         return this.currentStep.enableDone && this.currentStep.isValid;
     }
-    constructor(inj, contexts, explicitContext) {
+    /**
+     * 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 = noop;
         super(inj, WIDGET_CONFIG, explicitContext, new Promise(res => resolveFn = res));
+        this._isFirstLoad = true;
         styler(this.nativeElement, this, APPLY_STYLES_TYPE.SHELL);
         this.promiseResolverFn = resolveFn;
         // initialize the message object with default values
@@ -324,11 +423,88 @@ class WizardComponent extends StylableComponent {
             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 = find(this.dynamicWizard, step => step.dynamicStepIndex === i);
+                const isStepAlreadyExist = 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 (!isArray(wizardSteps)) {
+            wizardSteps = [wizardSteps];
+        }
+        const stepNamesList = [];
+        forEach(wizardSteps, (step, index) => {
+            const isStepAlreadyCreated = find(this.steps.toArray(), { name: step.name });
+            const isStepNameExist = 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 = get(step, 'params');
+            forEach(step, (value, key) => {
+                if (key !== 'params') {
+                    propsTmpl = `${propsTmpl} ${key}="${value}"`;
+                }
+            });
+            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 = isString(step) ? this.getStepRefByName(step) : 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 {WizardStepDirective}
+     * @returns {WizardStepComponent}
      */
     getNextValidStepFormIndex(index) {
         for (let i = index; i < this.steps.length; i++) {
@@ -341,7 +517,7 @@ class WizardComponent extends StylableComponent {
     /**
      * 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--) {
@@ -361,14 +537,14 @@ class WizardComponent extends StylableComponent {
     /**
      * 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) {
@@ -377,7 +553,7 @@ class WizardComponent extends StylableComponent {
     /**
      * 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);
@@ -385,7 +561,7 @@ class WizardComponent extends StylableComponent {
     /**
      * 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
@@ -414,7 +590,7 @@ class WizardComponent extends StylableComponent {
     /**
      * 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
@@ -462,11 +638,10 @@ class WizardComponent extends StylableComponent {
         }
     }
     extendNextFn(currentStep, currentStepIndex) {
-        let nextStep;
-        nextStep = this.getNextValidStepFormIndex(currentStepIndex + 1);
-        nextStep.isInitialized = true;
+        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;
@@ -497,22 +672,34 @@ class WizardComponent extends StylableComponent {
     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 (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 (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() {
@@ -554,18 +741,24 @@ class WizardComponent extends StylableComponent {
             }
         });
     }
-    isFirstStep(stepRef) {
+    _isFirstStep(stepRef) {
         return this.steps.first === stepRef;
     }
-    isLastStep(stepRef) {
+    _isLastStep(stepRef) {
         return this.steps.last === stepRef;
     }
+    onDataChange(newVal) {
+        this.fieldDefs = 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));
         }
@@ -597,6 +790,12 @@ class WizardComponent extends StylableComponent {
         this.wizContext.disableNext = () => !this.enableNext;
         this.wizContext.disablePrevious = () => !this.enablePrev;
         this.wizContext.disableDone = () => !this.enableDone;
+        this.steps.changes.subscribe(slides => {
+            if (this.steps.length > 1 && this.type === 'dynamic' && this._isFirstLoad) {
+                this.setDefaultStep(this.getStepRefByIndex(this.defaultstepindex));
+                this._isFirstLoad = false;
+            }
+        });
     }
     ngAfterViewInit() {
         super.ngAfterViewInit();
@@ -605,49 +804,49 @@ class WizardComponent extends StylableComponent {
             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.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(Context, 2), i0.ɵɵ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.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1$1.DynamicComponentRefProvider), i0.ɵɵdirectiveInject(Context, 2), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WizardComponent, selectors: [["div", "wmWizard", ""]], contentQueries: function WizardComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
             i0.ɵɵcontentQuery(dirIndex, _c0, 4, TemplateRef);
-            i0.ɵɵcontentQuery(dirIndex, WizardStepDirective, 4);
+            i0.ɵɵcontentQuery(dirIndex, WizardStepComponent, 4);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.wizardAction = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.steps = _t);
-        } }, features: [i0.ɵɵProvidersFeature([
+        } }, exportAs: ["wmWizard"], standalone: true, features: [i0.ɵɵProvidersFeature([
                 provideAsWidgetRef(WizardComponent),
                 { provide: Context, useFactory: () => { return {}; }, multi: true }
-            ]), i0.ɵɵ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.ɵɵprojectionDef();
+            ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵ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.ɵɵprojectionDef(_c2);
             i0.ɵɵelementStart(0, "div", 0)(1, "ul");
-            i0.ɵɵtemplate(2, WizardComponent_li_2_Template, 13, 21, "li", 1);
+            i0.ɵɵrepeaterCreate(2, WizardComponent_For_3_Template, 13, 21, "li", 1, i0.ɵɵrepeaterTrackByIdentity);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(3, "div", 2);
-            i0.ɵɵtemplate(4, WizardComponent_p_4_Template, 1, 0, "p", 3);
-            i0.ɵɵprojection(5, 0, ["ngProjectAs", "form[wmWizardStep]", 5, ["form", "wmWizardStep", ""]]);
-            i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(6, WizardComponent_ng_container_6_Template, 1, 0, "ng-container", 4);
+            i0.ɵɵ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.ɵɵadvance();
             i0.ɵɵclassMapInterpolate1("app-wizard-steps nav nav-pills ", ctx.stepClass, "");
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngForOf", ctx.steps);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.message.caption);
+            i0.ɵɵrepeater(ctx.steps);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngTemplateOutlet", ctx.wizardAction);
-        } }, dependencies: [i1$1.NgClass, i1$1.NgForOf, i1$1.NgIf, i1$1.NgTemplateOutlet, i2.MessageComponent, i2.TextContentDirective], encapsulation: 2 }); }
+            i0.ɵɵconditional(ctx.type !== "dynamic" ? 4 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.type === "dynamic" ? 5 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.fieldDefs && ctx.fieldDefs.length || ctx.type !== "dynamic" ? 6 : -1);
+        } }, dependencies: [CommonModule, i2.NgClass, i2.NgTemplateOutlet, WmComponentsModule, i3.MessageComponent, i3.TextContentDirective], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WizardComponent, [{
         type: Component,
-        args: [{ selector: 'div[wmWizard]', providers: [
+        args: [{ standalone: true, imports: [CommonModule, WmComponentsModule], selector: 'div[wmWizard]', providers: [
                     provideAsWidgetRef(WizardComponent),
                     { provide: 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.Injector }, { type: Array, decorators: [{
+                ], 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.Injector }, { type: i1$1.DynamicComponentRefProvider }, { type: Array, decorators: [{
                 type: Self
             }, {
                 type: Inject,
@@ -659,12 +858,12 @@ class WizardComponent extends StylableComponent {
                 type: Optional
             }] }], { steps: [{
             type: ContentChildren,
-            args: [WizardStepDirective]
+            args: [WizardStepComponent]
         }], wizardAction: [{
             type: ContentChild,
             args: ['wizardAction', { read: TemplateRef, descendants: false }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(WizardComponent, { className: "WizardComponent", filePath: "wizard.component.ts", lineNumber: 43 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(WizardComponent, { className: "WizardComponent", filePath: "wizard.component.ts", lineNumber: 51 }); })();
 
 const registerProps = () => {
     register('wm-wizardaction', new Map([
@@ -684,13 +883,14 @@ class WizardActionDirective extends BaseComponent {
         super(inj, WIDGET_INFO, explicitContext);
     }
     static { this.ɵfac = function WizardActionDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || WizardActionDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: WizardActionDirective, selectors: [["div", "wmWizardAction", ""]], exportAs: ["wmWizardAction"], features: [i0.ɵɵProvidersFeature([
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: WizardActionDirective, selectors: [["div", "wmWizardAction", ""]], exportAs: ["wmWizardAction"], standalone: true, features: [i0.ɵɵProvidersFeature([
                 provideAsWidgetRef(WizardActionDirective)
             ]), i0.ɵɵInheritDefinitionFeature] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WizardActionDirective, [{
         type: Directive,
         args: [{
+                standalone: true,
                 selector: 'div[wmWizardAction]',
                 providers: [
                     provideAsWidgetRef(WizardActionDirective)
@@ -704,41 +904,9 @@ class WizardActionDirective extends BaseComponent {
                 type: 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.ɵɵdefineNgModule({ type: WizardModule }); }
-    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule,
-            WmComponentsModule,
-            FormsModule] }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WizardModule, [{
-        type: NgModule,
-        args: [{
-                imports: [
-                    CommonModule,
-                    WmComponentsModule,
-                    FormsModule
-                ],
-                declarations: [...components],
-                exports: [...components]
-            }]
-    }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(WizardModule, { declarations: [WizardActionDirective,
-        WizardStepDirective,
-        WizardComponent], imports: [CommonModule,
-        WmComponentsModule,
-        FormsModule], exports: [WizardActionDirective,
-        WizardStepDirective,
-        WizardComponent] }); })();
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { WizardActionDirective, WizardComponent, WizardModule, WizardStepDirective };
+export { WizardActionDirective, WizardComponent, WizardStepComponent };
 //# sourceMappingURL=index.mjs.map