@wavemaker/app-ng-runtime 11.11.6-rc.6191 → 11.11.7-rc.6211

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

@@ -296,6 +296,7 @@
         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.ɵɵlistener("keydown", function WizardComponent_For_3_Template_a_keydown_1_listener($event) { i0__namespace.ɵɵrestoreView(_r1); const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r2.onkeydown($event)); });
         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);
@@ -310,9 +311,10 @@
         const step_r2 = ctx.$implicit;
         const ɵ$index_5_r4 = ctx.$index;
         const ctx_r2 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵproperty("hidden", !step_r2.show)("ngClass", i0__namespace.ɵɵpureFunction3(17, _c4, step_r2.done, step_r2.active, step_r2.disabled));
+        i0__namespace.ɵɵproperty("hidden", !step_r2.show)("ngClass", i0__namespace.ɵɵpureFunction3(18, _c4, step_r2.done, step_r2.active, step_r2.disabled));
+        i0__namespace.ɵɵattribute("data-stepid", step_r2.widgetId);
         i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(21, _c5, ctx_r2.class && ctx_r2.class.includes("classic") && !step_r2.subtitle))("tabindex", step_r2.active ? "0" : "-1");
+        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(22, _c5, ctx_r2.class && ctx_r2.class.includes("classic") && !step_r2.subtitle))("tabindex", step_r2.active ? "0" : "-1");
         i0__namespace.ɵɵattribute("aria-current", step_r2.active ? "step" : null)("aria-disabled", step_r2.disabled)("aria-label", step_r2.subtitle ? "step " + (ɵ$index_5_r4 + 1) + " " + step_r2.title + " " + step_r2.subtitle : "step " + (ɵ$index_5_r4 + 1) + " " + step_r2.title)("title", step_r2.title);
         i0__namespace.ɵɵadvance();
         i0__namespace.ɵɵconditional(ctx_r2.class && ctx_r2.class.includes("classic") ? 2 : -1);
@@ -677,6 +679,23 @@
                 currentStep.done = true;
                 nextStep.active = true;
                 this.currentStep = nextStep;
+                // Remove 'current' class from all wizard steps in header
+                const allStepItems = this.nativeElement.querySelectorAll('li[data-stepid]');
+                allStepItems.forEach((el) => {
+                    el.classList.remove('current');
+                    const anchor = el.querySelector('a');
+                    if (anchor) {
+                        anchor.setAttribute('tabindex', '-1');
+                    }
+                });
+                // Add 'current' to next step header item
+                const newStepLi = this.nativeElement.querySelector(`li[data-stepid="${nextStep.widgetId}"]`);
+                const newStepAnchor = newStepLi?.querySelector('a');
+                if (newStepLi && newStepAnchor) {
+                    newStepLi.classList.add('current');
+                    newStepAnchor.setAttribute('tabindex', '0');
+                    newStepAnchor.focus();
+                }
                 this.updateStepFocus();
             }
             this.addMoreText();
@@ -710,6 +729,23 @@
                 currentStep.disabled = true;
                 prevStep.active = true;
                 this.currentStep = prevStep;
+                //  Remove 'current' class from all steps
+                const allStepItems = this.nativeElement.querySelectorAll('li[data-stepid]');
+                allStepItems.forEach((el) => {
+                    el.classList.remove('current');
+                    const anchor = el.querySelector('a');
+                    if (anchor) {
+                        anchor.setAttribute('tabindex', '-1');
+                    }
+                });
+                // Apply 'current' to prev step
+                const prevStepLi = this.nativeElement.querySelector(`li[data-stepid="${prevStep.widgetId}"]`);
+                const prevStepAnchor = prevStepLi?.querySelector('a');
+                if (prevStepLi && prevStepAnchor) {
+                    prevStepLi.classList.add('current');
+                    prevStepAnchor.setAttribute('tabindex', '0');
+                    prevStepAnchor.focus();
+                }
                 this.updateStepFocus();
             }
             this.addMoreText();
@@ -848,6 +884,37 @@
                 }
             });
         }
+        isSelectableStep(stepRef) {
+            return stepRef.show && !stepRef.disabled;
+        }
+        getSelectableStepBeforeIndex(index) {
+            for (let i = index - 1; i >= 0; i--) {
+                const step = this.getStepRefByIndex(i);
+                if (this.isSelectableStep(step)) {
+                    return step;
+                }
+            }
+            if (index === 0) {
+                const step = this.getStepRefByIndex(this.steps.length - 1);
+                if (this.isSelectableStep(step)) {
+                    return step;
+                }
+            }
+        }
+        getSelectableStepAfterIndex(index) {
+            for (let i = index + 1; i < this.steps.length; i++) {
+                const step = this.getStepRefByIndex(i);
+                if (this.isSelectableStep(step)) {
+                    return step;
+                }
+            }
+            if (index === this.steps.length - 1) {
+                const step = this.getStepRefByIndex(0);
+                if (this.isSelectableStep(step)) {
+                    return step;
+                }
+            }
+        }
         ngAfterViewInit() {
             super.ngAfterViewInit();
             i3.styler(this.nativeElement.querySelector('.panel-body'), this, i3.APPLY_STYLES_TYPE.INNER_SHELL);
@@ -861,6 +928,69 @@
             this.nativeElement.querySelectorAll('div.app-wizard-actions').forEach(el => el?.classList.add(this.actionsalignment));
             this.nativeElement.querySelectorAll('div.app-wizard-actions-right').forEach(el => el?.classList.remove('app-container'));
         }
+        getActiveStepIndex() {
+            return lodashEs.findIndex(this.steps.toArray(), { isCurrent: true });
+        }
+        onkeydown(event) {
+            let newStep;
+            switch (event.key) {
+                case 'ArrowLeft':
+                case 'ArrowUp':
+                    event.preventDefault();
+                    newStep = this.autoActivation ? null : this.getSelectableStepBeforeIndex(this.getSelectedStepIndex());
+                    break;
+                case 'ArrowRight':
+                case 'ArrowDown':
+                    event.preventDefault();
+                    newStep = this.autoActivation ? null : this.getSelectableStepAfterIndex(this.getSelectedStepIndex());
+                    break;
+                case 'Enter':
+                case ' ':
+                case 'Spacebar':
+                    event.preventDefault();
+                    setTimeout(() => {
+                        const activeElement = this.nativeElement.querySelector('li.current');
+                        const stepLi = activeElement.closest('li[data-stepid]');
+                        const isInWizardHeader = activeElement.closest('.app-wizard-heading');
+                        if (stepLi && isInWizardHeader) {
+                            const stepId = stepLi.getAttribute('data-stepid');
+                            const stepIndex = this.steps.toArray().findIndex(step => step.widgetId === stepId);
+                            const currentStep = this.steps.toArray()[stepIndex];
+                            if (currentStep && currentStep !== this.currentStep) {
+                                this.onWizardHeaderClick(event, currentStep);
+                                // Update tabindex for accessibility
+                                const allStepItems = this.nativeElement.querySelectorAll('li[data-stepid]');
+                                allStepItems.forEach((el) => {
+                                    el.setAttribute('tabindex', '-1');
+                                });
+                                const stepAnchor = stepLi.querySelector('a');
+                                if (stepAnchor) {
+                                    stepAnchor.setAttribute('tabindex', '0');
+                                    stepAnchor.focus();
+                                }
+                            }
+                        }
+                    }, 0);
+                    break;
+                default:
+                    return;
+            }
+            if (newStep) {
+                this.nativeElement.querySelector('li.current')?.classList.remove('current');
+                this.nativeElement.querySelector(`li[data-stepid="${newStep.widgetId}"]`)?.classList.add('current');
+                const stepLi = this.nativeElement.querySelector(".app-wizard-heading li.current a");
+                const allStepItems = this.nativeElement.querySelectorAll('li[data-stepid] a');
+                allStepItems.forEach((el) => {
+                    el.setAttribute('tabindex', '-1');
+                });
+                (stepLi).setAttribute('tabindex', '0');
+                stepLi?.focus();
+            }
+        }
+        getSelectedStepIndex() {
+            const index = this.steps.toArray().findIndex(step => this.nativeElement.querySelector(`li[data-stepid="${step.widgetId}"]`)?.classList.contains("current"));
+            return index >= 0 ? index : this.getActiveStepIndex();
+        }
         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);
@@ -872,10 +1002,10 @@
             } }, 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", "tabindex"], [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.ɵɵ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, "keydown", "ngClass", "tabindex"], [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.ɵɵrepeaterCreate(2, WizardComponent_For_3_Template, 13, 23, "li", 1, i0__namespace.ɵɵrepeaterTrackByIdentity);
+                i0__namespace.ɵɵrepeaterCreate(2, WizardComponent_For_3_Template, 13, 24, "li", 1, i0__namespace.ɵɵrepeaterTrackByIdentity);
                 i0__namespace.ɵɵelementEnd()();
                 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) {
@@ -896,7 +1026,7 @@
             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.aria-label]='step.subtitle ? \"step \" + (i + 1) + \" \" +  step.title + \" \" + step.subtitle : \"step \" + (i + 1) + \" \" +  step.title' [attr.title]= \"step.title\"\n          [ngClass]=\"{'title-center-align':class && class.includes('classic') && !step.subtitle}\" [tabindex]=\"step.active ? '0' : '-1'\">\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" }]
+                    ], 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)\" [attr.data-stepid]=\"step.widgetId\">\n        <a href=\"javascript:void(0)\" [attr.aria-current]=\"step.active ? 'step' : null\"\n          [attr.aria-disabled]=\"step.disabled\" [attr.aria-label]='step.subtitle ? \"step \" + (i + 1) + \" \" +  step.title + \" \" + step.subtitle : \"step \" + (i + 1) + \" \" +  step.title' [attr.title]= \"step.title\"\n          [ngClass]=\"{'title-center-align':class && class.includes('classic') && !step.subtitle}\" [tabindex]=\"step.active ? '0' : '-1'\" (keydown)=\"onkeydown($event)\">\n          @if (class && class.includes('classic')) {\n            <span class=\"arrow\"></span>\n          }\n          <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
                 }, {