matcha-components 20.200.0 → 20.201.0

package/fesm2022/matcha-components.mjs

@@ -9081,27 +9081,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
         }] });
 
 class MatchaStepperControllerComponent {
-    constructor(stepperState) {
+    constructor(stepperState, cdr) {
         this.stepperState = stepperState;
+        this.cdr = cdr;
         this.steps = [];
         this.activeStep = 0;
     }
     ngOnInit() {
-        this.stepperState.steps$.subscribe((steps) => this.steps = steps);
-        this.stepperState.activeStep$.subscribe(step => this.activeStep = step);
+        this.stepperState.steps$.subscribe((steps) => {
+            this.steps = steps;
+            this.cdr.detectChanges();
+        });
+        this.stepperState.activeStep$.subscribe(step => {
+            this.activeStep = step;
+            this.cdr.detectChanges();
+        });
     }
     goToStep(index) {
         if (this.disableNext && this.activeStep < index)
             return;
         this.stepperState.setActiveStep(index);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaStepperControllerComponent, deps: [{ token: MatchaStepperStateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaStepperControllerComponent, deps: [{ token: MatchaStepperStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaStepperControllerComponent, isStandalone: false, selector: "matcha-stepper-controller", inputs: { disableNext: "disableNext" }, providers: [], ngImport: i0, template: "<div class=\"flex-column flex-align-end gap-16\">\n    <span class=\"fw-900 fs-12 lh-12\">{{steps[activeStep]}}</span>\n    <div class=\"d-flex align-center gap-8\">\n        <ng-container *ngFor=\"let step of steps; let i = index\">\n            <div (click)=\"goToStep(i)\" class=\"cursor-pointer w-32 h-8 radius-8\" [class.background-accent]=\"i <= activeStep\" [class.background-disabled]=\"i > activeStep\"></div>          \n        </ng-container>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaStepperControllerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-stepper-controller', providers: [], standalone: false, template: "<div class=\"flex-column flex-align-end gap-16\">\n    <span class=\"fw-900 fs-12 lh-12\">{{steps[activeStep]}}</span>\n    <div class=\"d-flex align-center gap-8\">\n        <ng-container *ngFor=\"let step of steps; let i = index\">\n            <div (click)=\"goToStep(i)\" class=\"cursor-pointer w-32 h-8 radius-8\" [class.background-accent]=\"i <= activeStep\" [class.background-disabled]=\"i > activeStep\"></div>          \n        </ng-container>\n    </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: MatchaStepperStateService }], propDecorators: { disableNext: [{
+        }], ctorParameters: () => [{ type: MatchaStepperStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { disableNext: [{
                 type: Input
             }] } });
 
@@ -9150,8 +9157,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             }] } });
 
 class MatchaStepperContentComponent {
-    constructor(stepperState) {
+    constructor(stepperState, cdr) {
         this.stepperState = stepperState;
+        this.cdr = cdr;
         this.stepsArray = [];
         this.activeStep = 0;
     }
@@ -9160,7 +9168,10 @@ class MatchaStepperContentComponent {
         this.stepsSubscription = this.steps.changes.subscribe(() => {
             this.updateSteps();
         });
-        this.stepperState.activeStep$.subscribe(step => this.activeStep = step);
+        this.stepperState.activeStep$.subscribe(step => {
+            this.activeStep = step;
+            this.cdr.detectChanges();
+        });
     }
     ngOnDestroy() {
         if (this.stepsSubscription) {
@@ -9181,7 +9192,7 @@ class MatchaStepperContentComponent {
     prevStep() {
         this.stepperState.prevStep();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaStepperContentComponent, deps: [{ token: MatchaStepperStateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaStepperContentComponent, deps: [{ token: MatchaStepperStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaStepperContentComponent, isStandalone: false, selector: "matcha-stepper-content", queries: [{ propertyName: "steps", predicate: StepComponent }], ngImport: i0, template: `
     <ng-container *ngIf="stepsArray.length">
       <ng-container *ngTemplateOutlet="stepsArray[activeStep]?.template || null"></ng-container>
@@ -9199,7 +9210,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
   `,
                     standalone: false
                 }]
-        }], ctorParameters: () => [{ type: MatchaStepperStateService }], propDecorators: { steps: [{
+        }], ctorParameters: () => [{ type: MatchaStepperStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { steps: [{
                 type: ContentChildren,
                 args: [StepComponent]
             }] } });