mn-angular-lib 1.0.18 → 1.0.20

package/fesm2022/mn-angular-lib.mjs

@@ -376,6 +376,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 type: Input
             }] } });
 
+const mnBadgeVariants = tv({
+    base: 'inline-flex items-center rounded-md border font-semibold',
+    variants: {
+        size: {
+            sm: 'px-1.5 py-0.5 text-xs',
+            md: 'px-2 py-0.5 text-sm',
+            lg: 'px-2.5 py-1 text-base',
+            xl: 'px-3 py-1.5 text-lg',
+        },
+        color: {
+            primary: 'bg-primary/20 border-primary text-primary',
+            secondary: 'bg-neutral/20 border-neutral text-neutral',
+            danger: 'bg-error/20 border-error text-error',
+            warning: 'bg-warning/20 border-warning text-warning',
+            success: 'bg-success/20 border-success text-success',
+            accent: 'bg-accent/20 border-accent text-accent',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        color: 'primary',
+    },
+});
+
+class MnBadge {
+    data = {};
+    get hostClasses() {
+        return mnBadgeVariants({
+            size: this.data.size,
+            color: this.data.color,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: MnBadge, isStandalone: true, selector: "span[mnBadge]", inputs: { data: "data" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-content></ng-content>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnBadge, decorators: [{
+            type: Component,
+            args: [{ selector: 'span[mnBadge]', standalone: true, template: "<ng-content></ng-content>\n" }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
 /**
  * MnInputField Adapters
  *
@@ -5160,6 +5205,10 @@ class MnWizardBodyComponent {
     get isLastStep() {
         return this.currentVisibleIndex === this.visibleSteps.length - 1;
     }
+    /** Index of the current step for the progress line */
+    get currentProgressIndex() {
+        return this.currentVisibleIndex;
+    }
     get isFreeFlow() {
         return this.config.flow === WizardFlowMode.FREE;
     }
@@ -5269,6 +5318,8 @@ class MnWizardBodyComponent {
         }
         const prevStep = this.visibleSteps[this.currentVisibleIndex - 1];
         const previousStepId = this.currentStepId;
+        // Remove current step from visited so the circle resets
+        this.visitedStepIds = this.visitedStepIds.filter(id => id !== this.currentStepId);
         this.currentStepId = prevStep.id;
         await this.notifyStepChange(previousStepId, NavigationDirection.BACKWARD);
         this.trackCurrentStepValidity();
@@ -5380,11 +5431,11 @@ class MnWizardBodyComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnWizardBodyComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnWizardBodyComponent, isStandalone: true, selector: "mn-wizard-body", inputs: { config: "config", modalRef: "modalRef" }, viewQueries: [{ propertyName: "formBodies", predicate: MnFormBodyComponent, descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-6\" [class.h-full]=\"config.sizeHeight\">\n  @if (config.component || config.template) {\n    <mn-custom-body-host\n      [config]=\"asAny(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n      class=\"block\"\n    ></mn-custom-body-host>\n  }\n\n  <div class=\"flex gap-2 pb-4 border-b border-base-300\">\n    @for (step of visibleSteps; track step.id; let i = $index) {\n      <div\n        class=\"flex items-center gap-2 flex-1\"\n        [class.active]=\"step.id === currentStepId\"\n        [class.complete]=\"visitedStepIds.includes(step.id) && step.id !== currentStepId\"\n        [class.cursor-pointer]=\"isFreeFlow && canNavigateToStep(step)\"\n        (click)=\"isFreeFlow ? goToStep(step) : null\"\n      >\n        <div\n          class=\"w-8 h-8 rounded-full flex items-center justify-center font-semibold transition-all text-sm\"\n          [ngClass]=\"{\n            'bg-blue-500 text-white': step.id === currentStepId,\n            'bg-green-500 text-white': visitedStepIds.includes(step.id) && step.id !== currentStepId,\n            'bg-base-200 text-base-content/50': !visitedStepIds.includes(step.id) && step.id !== currentStepId\n          }\"\n        >{{ i + 1 }}</div>\n        <div\n          class=\"text-sm\"\n          [ngClass]=\"{\n            'text-base-content font-semibold': step.id === currentStepId,\n            'text-base-content/50': step.id !== currentStepId\n          }\"\n        >{{ step.title }}</div>\n      </div>\n    }\n  </div>\n\n  <div class=\"min-h-48 flex-1\">\n    @for (step of config.steps; track step.id) {\n      <div [style.display]=\"step.id === currentStepId ? 'block' : 'none'\">\n        <h3 class=\"text-lg font-semibold text-base-content mb-4\">{{ step.title }}</h3>\n        <div class=\"text-base-content/80\">\n          <!-- Form step -->\n          @if (stepFormConfigs[step.id]) {\n            <mn-form-body\n              [config]=\"stepFormConfigs[step.id]\"\n              [modalRef]=\"asAny(modalRef)\"\n              [hideFooter]=\"true\"\n              [hideCustomBody]=\"true\"\n            ></mn-form-body>\n          }\n\n          <!-- Text body -->\n          @if (!stepFormConfigs[step.id] && isTextBody(step)) {\n            <div>\n              {{ step.body }}\n            </div>\n          }\n\n          <!-- Dynamic content container for component/template bodies -->\n          <ng-container #dynamicContainer></ng-container>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Wizard-level errors (from onBeforeComplete) -->\n  @if (wizardErrors && (wizardErrors | keyvalue).length > 0) {\n    <div class=\"flex flex-col gap-1 px-2 py-2 bg-red-50 rounded-md\">\n      @for (err of wizardErrors | keyvalue; track err.key) {\n        <div class=\"text-red-500 text-sm\">\n          {{ err.value }}\n        </div>\n      }\n    </div>\n  }\n\n  <div class=\"flex gap-3 pt-4 border-t border-base-300\">\n    @if (!currentStep?.hideBack) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (click)=\"back()\"\n      >\n        {{ currentStep?.backLabel || (canGoBack ? labels.back : labels.close) }}\n      </button>\n    }\n\n    <!-- Custom footer actions -->\n    @if (config.footerActions) {\n      <mn-footer-actions\n        [actions]=\"config.footerActions\"\n        (actionClick)=\"handleFooterAction($event)\"\n      ></mn-footer-actions>\n    } @else {\n      <div class=\"flex-1\"></div>\n    }\n\n    @if (!isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid }\"\n        (click)=\"next()\"\n      >\n        {{ currentStep?.nextLabel || labels.next }}\n      </button>\n    }\n\n    @if (isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid || isCompleting }\"\n        [disabled]=\"!isCurrentStepValid || isCompleting\"\n        (click)=\"complete()\"\n      >\n        {{ currentStep?.nextLabel || (isCompleting ? labels.completing : labels.complete) }}\n      </button>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFooterActionsComponent, selector: "mn-footer-actions", inputs: ["actions"], outputs: ["actionClick"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnWizardBodyComponent, isStandalone: true, selector: "mn-wizard-body", inputs: { config: "config", modalRef: "modalRef" }, viewQueries: [{ propertyName: "formBodies", predicate: MnFormBodyComponent, descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-6\" [class.h-full]=\"config.sizeHeight\">\n  @if (config.component || config.template) {\n    <mn-custom-body-host\n      [config]=\"asAny(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n      class=\"block\"\n    ></mn-custom-body-host>\n  }\n\n  <div class=\"relative flex items-start pb-4 border-b border-base-300\">\n    <!-- Background line spanning from first circle center to last circle center -->\n    <div\n      class=\"absolute top-[15px] h-0.5 bg-base-300 z-0\"\n      [style.left]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n      [style.right]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n    ></div>\n\n    <!-- Progress fill line -->\n    @if (visibleSteps.length > 1) {\n      <div\n        class=\"absolute top-[15px] h-0.5 bg-success z-[1] transition-all duration-500\"\n        [style.left]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n        [style.width]=\"'calc(' + (currentProgressIndex / (visibleSteps.length - 1)) * (100 - 100 / visibleSteps.length) + '%)'\"\n      ></div>\n    }\n\n    @for (step of visibleSteps; track step.id; let i = $index; let last = $last) {\n      <div\n        class=\"relative flex flex-col items-center gap-1 z-10 w-0 flex-1\"\n        [class.cursor-pointer]=\"isFreeFlow && canNavigateToStep(step)\"\n        (click)=\"isFreeFlow ? goToStep(step) : null\"\n      >\n        <div\n          class=\"w-8 h-8 rounded-full flex items-center justify-center font-semibold transition-all text-sm\"\n          [ngClass]=\"{\n            'bg-primary text-primary-content': step.id === currentStepId,\n            'bg-success text-success-content': visitedStepIds.includes(step.id) && step.id !== currentStepId,\n            'bg-base-200 text-base-content/50': !visitedStepIds.includes(step.id) && step.id !== currentStepId\n          }\"\n        >{{ i + 1 }}</div>\n        <div\n          class=\"text-xs text-center whitespace-nowrap\"\n          [ngClass]=\"{\n            'text-base-content font-semibold': step.id === currentStepId,\n            'text-base-content/50': step.id !== currentStepId\n          }\"\n        >{{ step.title }}</div>\n\n      </div>\n    }\n  </div>\n\n  <div class=\"min-h-48 flex-1\">\n    @for (step of config.steps; track step.id) {\n      <div [style.display]=\"step.id === currentStepId ? 'block' : 'none'\">\n        <h3 class=\"text-lg font-semibold text-base-content mb-4\">{{ step.title }}</h3>\n        <div class=\"text-base-content/80\">\n          <!-- Form step -->\n          @if (stepFormConfigs[step.id]) {\n            <mn-form-body\n              [config]=\"stepFormConfigs[step.id]\"\n              [modalRef]=\"asAny(modalRef)\"\n              [hideFooter]=\"true\"\n              [hideCustomBody]=\"true\"\n            ></mn-form-body>\n          }\n\n          <!-- Text body -->\n          @if (!stepFormConfigs[step.id] && isTextBody(step)) {\n            <div>\n              {{ step.body }}\n            </div>\n          }\n\n          <!-- Dynamic content container for component/template bodies -->\n          <ng-container #dynamicContainer></ng-container>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Wizard-level errors (from onBeforeComplete) -->\n  @if (wizardErrors && (wizardErrors | keyvalue).length > 0) {\n    <div class=\"flex flex-col gap-1 px-2 py-2 bg-red-50 rounded-md\">\n      @for (err of wizardErrors | keyvalue; track err.key) {\n        <div class=\"text-red-500 text-sm\">\n          {{ err.value }}\n        </div>\n      }\n    </div>\n  }\n\n  <div class=\"flex gap-3 pt-4 border-t border-base-300\">\n    @if (!currentStep?.hideBack) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (click)=\"back()\"\n      >\n        {{ currentStep?.backLabel || (canGoBack ? labels.back : labels.close) }}\n      </button>\n    }\n\n    <!-- Custom footer actions -->\n    @if (config.footerActions) {\n      <mn-footer-actions\n        [actions]=\"config.footerActions\"\n        (actionClick)=\"handleFooterAction($event)\"\n      ></mn-footer-actions>\n    } @else {\n      <div class=\"flex-1\"></div>\n    }\n\n    @if (!isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid }\"\n        (click)=\"next()\"\n      >\n        {{ currentStep?.nextLabel || labels.next }}\n      </button>\n    }\n\n    @if (isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid || isCompleting }\"\n        [disabled]=\"!isCurrentStepValid || isCompleting\"\n        (click)=\"complete()\"\n      >\n        {{ currentStep?.nextLabel || (isCompleting ? labels.completing : labels.complete) }}\n      </button>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFooterActionsComponent, selector: "mn-footer-actions", inputs: ["actions"], outputs: ["actionClick"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnWizardBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-wizard-body', standalone: true, imports: [CommonModule, ReactiveFormsModule, MnButton, MnFormBodyComponent, MnCustomBodyHostComponent, MnFooterActionsComponent], template: "<div class=\"flex flex-col gap-6\" [class.h-full]=\"config.sizeHeight\">\n  @if (config.component || config.template) {\n    <mn-custom-body-host\n      [config]=\"asAny(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n      class=\"block\"\n    ></mn-custom-body-host>\n  }\n\n  <div class=\"flex gap-2 pb-4 border-b border-base-300\">\n    @for (step of visibleSteps; track step.id; let i = $index) {\n      <div\n        class=\"flex items-center gap-2 flex-1\"\n        [class.active]=\"step.id === currentStepId\"\n        [class.complete]=\"visitedStepIds.includes(step.id) && step.id !== currentStepId\"\n        [class.cursor-pointer]=\"isFreeFlow && canNavigateToStep(step)\"\n        (click)=\"isFreeFlow ? goToStep(step) : null\"\n      >\n        <div\n          class=\"w-8 h-8 rounded-full flex items-center justify-center font-semibold transition-all text-sm\"\n          [ngClass]=\"{\n            'bg-blue-500 text-white': step.id === currentStepId,\n            'bg-green-500 text-white': visitedStepIds.includes(step.id) && step.id !== currentStepId,\n            'bg-base-200 text-base-content/50': !visitedStepIds.includes(step.id) && step.id !== currentStepId\n          }\"\n        >{{ i + 1 }}</div>\n        <div\n          class=\"text-sm\"\n          [ngClass]=\"{\n            'text-base-content font-semibold': step.id === currentStepId,\n            'text-base-content/50': step.id !== currentStepId\n          }\"\n        >{{ step.title }}</div>\n      </div>\n    }\n  </div>\n\n  <div class=\"min-h-48 flex-1\">\n    @for (step of config.steps; track step.id) {\n      <div [style.display]=\"step.id === currentStepId ? 'block' : 'none'\">\n        <h3 class=\"text-lg font-semibold text-base-content mb-4\">{{ step.title }}</h3>\n        <div class=\"text-base-content/80\">\n          <!-- Form step -->\n          @if (stepFormConfigs[step.id]) {\n            <mn-form-body\n              [config]=\"stepFormConfigs[step.id]\"\n              [modalRef]=\"asAny(modalRef)\"\n              [hideFooter]=\"true\"\n              [hideCustomBody]=\"true\"\n            ></mn-form-body>\n          }\n\n          <!-- Text body -->\n          @if (!stepFormConfigs[step.id] && isTextBody(step)) {\n            <div>\n              {{ step.body }}\n            </div>\n          }\n\n          <!-- Dynamic content container for component/template bodies -->\n          <ng-container #dynamicContainer></ng-container>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Wizard-level errors (from onBeforeComplete) -->\n  @if (wizardErrors && (wizardErrors | keyvalue).length > 0) {\n    <div class=\"flex flex-col gap-1 px-2 py-2 bg-red-50 rounded-md\">\n      @for (err of wizardErrors | keyvalue; track err.key) {\n        <div class=\"text-red-500 text-sm\">\n          {{ err.value }}\n        </div>\n      }\n    </div>\n  }\n\n  <div class=\"flex gap-3 pt-4 border-t border-base-300\">\n    @if (!currentStep?.hideBack) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (click)=\"back()\"\n      >\n        {{ currentStep?.backLabel || (canGoBack ? labels.back : labels.close) }}\n      </button>\n    }\n\n    <!-- Custom footer actions -->\n    @if (config.footerActions) {\n      <mn-footer-actions\n        [actions]=\"config.footerActions\"\n        (actionClick)=\"handleFooterAction($event)\"\n      ></mn-footer-actions>\n    } @else {\n      <div class=\"flex-1\"></div>\n    }\n\n    @if (!isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid }\"\n        (click)=\"next()\"\n      >\n        {{ currentStep?.nextLabel || labels.next }}\n      </button>\n    }\n\n    @if (isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid || isCompleting }\"\n        [disabled]=\"!isCurrentStepValid || isCompleting\"\n        (click)=\"complete()\"\n      >\n        {{ currentStep?.nextLabel || (isCompleting ? labels.completing : labels.complete) }}\n      </button>\n    }\n  </div>\n</div>\n" }]
+            args: [{ selector: 'mn-wizard-body', standalone: true, imports: [CommonModule, ReactiveFormsModule, MnButton, MnFormBodyComponent, MnCustomBodyHostComponent, MnFooterActionsComponent], template: "<div class=\"flex flex-col gap-6\" [class.h-full]=\"config.sizeHeight\">\n  @if (config.component || config.template) {\n    <mn-custom-body-host\n      [config]=\"asAny(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n      class=\"block\"\n    ></mn-custom-body-host>\n  }\n\n  <div class=\"relative flex items-start pb-4 border-b border-base-300\">\n    <!-- Background line spanning from first circle center to last circle center -->\n    <div\n      class=\"absolute top-[15px] h-0.5 bg-base-300 z-0\"\n      [style.left]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n      [style.right]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n    ></div>\n\n    <!-- Progress fill line -->\n    @if (visibleSteps.length > 1) {\n      <div\n        class=\"absolute top-[15px] h-0.5 bg-success z-[1] transition-all duration-500\"\n        [style.left]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n        [style.width]=\"'calc(' + (currentProgressIndex / (visibleSteps.length - 1)) * (100 - 100 / visibleSteps.length) + '%)'\"\n      ></div>\n    }\n\n    @for (step of visibleSteps; track step.id; let i = $index; let last = $last) {\n      <div\n        class=\"relative flex flex-col items-center gap-1 z-10 w-0 flex-1\"\n        [class.cursor-pointer]=\"isFreeFlow && canNavigateToStep(step)\"\n        (click)=\"isFreeFlow ? goToStep(step) : null\"\n      >\n        <div\n          class=\"w-8 h-8 rounded-full flex items-center justify-center font-semibold transition-all text-sm\"\n          [ngClass]=\"{\n            'bg-primary text-primary-content': step.id === currentStepId,\n            'bg-success text-success-content': visitedStepIds.includes(step.id) && step.id !== currentStepId,\n            'bg-base-200 text-base-content/50': !visitedStepIds.includes(step.id) && step.id !== currentStepId\n          }\"\n        >{{ i + 1 }}</div>\n        <div\n          class=\"text-xs text-center whitespace-nowrap\"\n          [ngClass]=\"{\n            'text-base-content font-semibold': step.id === currentStepId,\n            'text-base-content/50': step.id !== currentStepId\n          }\"\n        >{{ step.title }}</div>\n\n      </div>\n    }\n  </div>\n\n  <div class=\"min-h-48 flex-1\">\n    @for (step of config.steps; track step.id) {\n      <div [style.display]=\"step.id === currentStepId ? 'block' : 'none'\">\n        <h3 class=\"text-lg font-semibold text-base-content mb-4\">{{ step.title }}</h3>\n        <div class=\"text-base-content/80\">\n          <!-- Form step -->\n          @if (stepFormConfigs[step.id]) {\n            <mn-form-body\n              [config]=\"stepFormConfigs[step.id]\"\n              [modalRef]=\"asAny(modalRef)\"\n              [hideFooter]=\"true\"\n              [hideCustomBody]=\"true\"\n            ></mn-form-body>\n          }\n\n          <!-- Text body -->\n          @if (!stepFormConfigs[step.id] && isTextBody(step)) {\n            <div>\n              {{ step.body }}\n            </div>\n          }\n\n          <!-- Dynamic content container for component/template bodies -->\n          <ng-container #dynamicContainer></ng-container>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Wizard-level errors (from onBeforeComplete) -->\n  @if (wizardErrors && (wizardErrors | keyvalue).length > 0) {\n    <div class=\"flex flex-col gap-1 px-2 py-2 bg-red-50 rounded-md\">\n      @for (err of wizardErrors | keyvalue; track err.key) {\n        <div class=\"text-red-500 text-sm\">\n          {{ err.value }}\n        </div>\n      }\n    </div>\n  }\n\n  <div class=\"flex gap-3 pt-4 border-t border-base-300\">\n    @if (!currentStep?.hideBack) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (click)=\"back()\"\n      >\n        {{ currentStep?.backLabel || (canGoBack ? labels.back : labels.close) }}\n      </button>\n    }\n\n    <!-- Custom footer actions -->\n    @if (config.footerActions) {\n      <mn-footer-actions\n        [actions]=\"config.footerActions\"\n        (actionClick)=\"handleFooterAction($event)\"\n      ></mn-footer-actions>\n    } @else {\n      <div class=\"flex-1\"></div>\n    }\n\n    @if (!isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid }\"\n        (click)=\"next()\"\n      >\n        {{ currentStep?.nextLabel || labels.next }}\n      </button>\n    }\n\n    @if (isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid || isCompleting }\"\n        [disabled]=\"!isCurrentStepValid || isCompleting\"\n        (click)=\"complete()\"\n      >\n        {{ currentStep?.nextLabel || (isCompleting ? labels.completing : labels.complete) }}\n      </button>\n    }\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { config: [{
                 type: Input
             }], modalRef: [{
@@ -7870,5 +7921,5 @@ function enableMnPreviewMode(configService, langService, allowedOrigins) {
  * Generated bundle index. Do not edit.
  */
 
-export { API_BASE_URL, ActionStyle, BackdropMode, BaseModalBuilder, CALENDAR_CONFIG, CALENDAR_DATE_FORMATTER, CalendarDayComponent, CalendarEventComponent, CalendarEventDefaultComponent, CalendarEventLayoutService, CalendarMonthComponent, CalendarUtility, CalendarView, CalendarViewComponent, CalendarWeekComponent, CloseMode, ColumnSortType, ConfirmationModalBuilder, ConfirmationTone, CrudService, CustomModalBuilder, DEFAULT_CALENDAR_CONFIG, DEFAULT_MN_ALERT_CONFIG, DefaultCalendarDateFormatter, FieldAppearance, FieldKind, FormLayoutMode, FormModalBuilder, KeyboardMode, MN_ALERT_CONFIG, MN_CALENDAR_COMPONENT_NAME, MN_CALENDAR_CONFIG, MN_CHECKBOX_CONFIG, MN_DATETIME_CONFIG, MN_INPUT_FIELD_CONFIG, MN_INSTANCE_ID, MN_LIB_DUAL_HORIZONTAL_IMAGE, MN_MULTI_SELECT_CONFIG, MN_SECTION_PATH, MN_SELECT_CONFIG, MN_TEXTAREA_CONFIG, MnAlertOutletComponent, MnAlertService, MnAlertStore, MnButton, MnCheckbox, MnConfigService, MnConfirmationBodyComponent, MnCustomBodyHostComponent, MnDatetime, MnDualHorizontalImage, MnFormBodyComponent, MnHiddenBelowDirective, MnInformationCard, MnInputField, MnInstanceDirective, MnLanguageService, MnList, MnModalRef, MnModalService, MnModalShellComponent, MnMultiSelect, MnSectionDirective, MnSelect, MnTabComponent, MnTable, MnTextarea, MnTranslatePipe, MnWizardBodyComponent, ModalBuilder, ModalCloseReason, ModalIntent, ModalKind, ModalSize, NavigationDirection, OptionState, SelectionMode, StepBuilder, StepState, SubmitMode, UpcomingEventRowComponent, UpcomingEventsComponent, ValidationCode, ValidationStatus, WizardFlowMode, WizardModalBuilder, dateTimeAdapter, defaultTextAdapter, enableMnPreviewMode, isTranslatable, mnAlertVariants, mnButtonVariants, mnCheckboxVariants, mnCheckboxWrapperVariants, mnDatetimeVariants, mnInformationCardVariants, mnInputFieldVariants, mnMultiSelectVariants, mnSelectVariants, mnTextareaVariants, numberAdapter, pickAdapter, provideMnAlerts, provideMnCalendarConfig, provideMnComponentConfig, provideMnConfig, provideMnLanguage, resolveCalendarConfig };
+export { API_BASE_URL, ActionStyle, BackdropMode, BaseModalBuilder, CALENDAR_CONFIG, CALENDAR_DATE_FORMATTER, CalendarDayComponent, CalendarEventComponent, CalendarEventDefaultComponent, CalendarEventLayoutService, CalendarMonthComponent, CalendarUtility, CalendarView, CalendarViewComponent, CalendarWeekComponent, CloseMode, ColumnSortType, ConfirmationModalBuilder, ConfirmationTone, CrudService, CustomModalBuilder, DEFAULT_CALENDAR_CONFIG, DEFAULT_MN_ALERT_CONFIG, DefaultCalendarDateFormatter, FieldAppearance, FieldKind, FormLayoutMode, FormModalBuilder, KeyboardMode, MN_ALERT_CONFIG, MN_CALENDAR_COMPONENT_NAME, MN_CALENDAR_CONFIG, MN_CHECKBOX_CONFIG, MN_DATETIME_CONFIG, MN_INPUT_FIELD_CONFIG, MN_INSTANCE_ID, MN_LIB_DUAL_HORIZONTAL_IMAGE, MN_MULTI_SELECT_CONFIG, MN_SECTION_PATH, MN_SELECT_CONFIG, MN_TEXTAREA_CONFIG, MnAlertOutletComponent, MnAlertService, MnAlertStore, MnBadge, MnButton, MnCheckbox, MnConfigService, MnConfirmationBodyComponent, MnCustomBodyHostComponent, MnDatetime, MnDualHorizontalImage, MnFormBodyComponent, MnHiddenBelowDirective, MnInformationCard, MnInputField, MnInstanceDirective, MnLanguageService, MnList, MnModalRef, MnModalService, MnModalShellComponent, MnMultiSelect, MnSectionDirective, MnSelect, MnTabComponent, MnTable, MnTextarea, MnTranslatePipe, MnWizardBodyComponent, ModalBuilder, ModalCloseReason, ModalIntent, ModalKind, ModalSize, NavigationDirection, OptionState, SelectionMode, StepBuilder, StepState, SubmitMode, UpcomingEventRowComponent, UpcomingEventsComponent, ValidationCode, ValidationStatus, WizardFlowMode, WizardModalBuilder, dateTimeAdapter, defaultTextAdapter, enableMnPreviewMode, isTranslatable, mnAlertVariants, mnBadgeVariants, mnButtonVariants, mnCheckboxVariants, mnCheckboxWrapperVariants, mnDatetimeVariants, mnInformationCardVariants, mnInputFieldVariants, mnMultiSelectVariants, mnSelectVariants, mnTextareaVariants, numberAdapter, pickAdapter, provideMnAlerts, provideMnCalendarConfig, provideMnComponentConfig, provideMnConfig, provideMnLanguage, resolveCalendarConfig };
 //# sourceMappingURL=mn-angular-lib.mjs.map