matcha-components 20.200.0 → 20.202.0

package/fesm2022/matcha-components.mjs

@@ -3119,7 +3119,7 @@ class MatchaButtonComponent {
     ngOnDestroy() {
         const buttons = document.querySelectorAll('.matcha-button');
         buttons.forEach(button => {
-            button.removeEventListener('click', this.addRippleEffect, false);
+            button.removeEventListener('mousedown', this.addRippleEffect, false);
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaButtonComponent, deps: [{ token: ElementRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
@@ -8372,11 +8372,11 @@ class MatchaTabsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTabsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaTabsComponent, isStandalone: false, selector: "matcha-tabs", inputs: { selectedIndex: "selectedIndex", activeTabIndex: "activeTabIndex" }, outputs: { selectedIndexChange: "selectedIndexChange", selectedTabChange: "selectedTabChange", tabSelected: "tabSelected" }, host: { listeners: { "keydown": "handleKeyboardEvent($event)" } }, queries: [{ propertyName: "tabs", predicate: MatchaTabItemComponent }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex-column gap-24 w-100-p\">\n  <nav class=\"button-group overflow-auto w-100-p flex-row gap-8 list-style-none pl-0 pb-4\" role=\"tablist\">\n    <button *ngFor=\"let tab of tabs; let i = index\" (click)=\"selectTabByIndex(i)\"\n            [attr.aria-selected]=\"tab.active\"\n            [attr.aria-controls]=\"'tab-content-' + i\"\n            [ngClass]=\"{'active': tab.active}\"\n            class=\"\n              border-color-{{tab.active?'accent':'surface'}} background-surface\n              cursor-pointer w-100-p min-w-128 b-2 radius-8 p-8 flex-column flex-align-center gap-4 flex-space-between\"\n            role=\"tab\"\n            tabindex=\"{{tab.active ? 0 : -1}}\">\n      <matcha-icon [name]=\"tab.icon\" color=\"accent\" size=\"md\"></matcha-icon>\n      <span class=\"color-fg fw-900 fs-14 lh-16 line-clamp-2\">\n        {{ tab.title }}\n      </span>\n    </button>\n  </nav>\n\n  <div>\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatchaIconComponent, selector: "matcha-icon", inputs: ["name", "size", "color", "class", "loading"] }], animations: [...createAnimations] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaTabsComponent, isStandalone: false, selector: "matcha-tabs", inputs: { selectedIndex: "selectedIndex", activeTabIndex: "activeTabIndex" }, outputs: { selectedIndexChange: "selectedIndexChange", selectedTabChange: "selectedTabChange", tabSelected: "tabSelected" }, host: { listeners: { "keydown": "handleKeyboardEvent($event)" } }, queries: [{ propertyName: "tabs", predicate: MatchaTabItemComponent }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex-column gap-outside w-100-p\">\n  <nav class=\"button-group overflow-auto w-100-p flex-row gap-8 list-style-none pl-0\" role=\"tablist\">\n    <button *ngFor=\"let tab of tabs; let i = index\" (click)=\"selectTabByIndex(i)\"\n            [attr.aria-selected]=\"tab.active\"\n            [attr.aria-controls]=\"'tab-content-' + i\"\n            [ngClass]=\"{'active': tab.active}\"\n            class=\"\n              border-color-{{tab.active?'accent':'surface'}} background-surface\n              cursor-pointer w-100-p min-w-128 b-2 radius-8 p-8 flex-column flex-align-center gap-4 flex-space-between\"\n            role=\"tab\"\n            tabindex=\"{{tab.active ? 0 : -1}}\">\n      <matcha-icon [name]=\"tab.icon\" color=\"accent\" size=\"md\"></matcha-icon>\n      <span class=\"color-fg fw-900 fs-14 lh-16 line-clamp-2\">\n        {{ tab.title }}\n      </span>\n    </button>\n  </nav>\n\n  <div>\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatchaIconComponent, selector: "matcha-icon", inputs: ["name", "size", "color", "class", "loading"] }], animations: [...createAnimations] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-tabs', animations: [...createAnimations], standalone: false, template: "<div class=\"flex-column gap-24 w-100-p\">\n  <nav class=\"button-group overflow-auto w-100-p flex-row gap-8 list-style-none pl-0 pb-4\" role=\"tablist\">\n    <button *ngFor=\"let tab of tabs; let i = index\" (click)=\"selectTabByIndex(i)\"\n            [attr.aria-selected]=\"tab.active\"\n            [attr.aria-controls]=\"'tab-content-' + i\"\n            [ngClass]=\"{'active': tab.active}\"\n            class=\"\n              border-color-{{tab.active?'accent':'surface'}} background-surface\n              cursor-pointer w-100-p min-w-128 b-2 radius-8 p-8 flex-column flex-align-center gap-4 flex-space-between\"\n            role=\"tab\"\n            tabindex=\"{{tab.active ? 0 : -1}}\">\n      <matcha-icon [name]=\"tab.icon\" color=\"accent\" size=\"md\"></matcha-icon>\n      <span class=\"color-fg fw-900 fs-14 lh-16 line-clamp-2\">\n        {{ tab.title }}\n      </span>\n    </button>\n  </nav>\n\n  <div>\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'matcha-tabs', animations: [...createAnimations], standalone: false, template: "<div class=\"flex-column gap-outside w-100-p\">\n  <nav class=\"button-group overflow-auto w-100-p flex-row gap-8 list-style-none pl-0\" role=\"tablist\">\n    <button *ngFor=\"let tab of tabs; let i = index\" (click)=\"selectTabByIndex(i)\"\n            [attr.aria-selected]=\"tab.active\"\n            [attr.aria-controls]=\"'tab-content-' + i\"\n            [ngClass]=\"{'active': tab.active}\"\n            class=\"\n              border-color-{{tab.active?'accent':'surface'}} background-surface\n              cursor-pointer w-100-p min-w-128 b-2 radius-8 p-8 flex-column flex-align-center gap-4 flex-space-between\"\n            role=\"tab\"\n            tabindex=\"{{tab.active ? 0 : -1}}\">\n      <matcha-icon [name]=\"tab.icon\" color=\"accent\" size=\"md\"></matcha-icon>\n      <span class=\"color-fg fw-900 fs-14 lh-16 line-clamp-2\">\n        {{ tab.title }}\n      </span>\n    </button>\n  </nav>\n\n  <div>\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { tabs: [{
                 type: ContentChildren,
                 args: [MatchaTabItemComponent]
@@ -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]
             }] } });