matcha-components 20.24.0 → 20.25.0

package/fesm2022/matcha-components.mjs

@@ -3192,13 +3192,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
 
 class MatchaTabsComponent {
     constructor() {
-        this.activeTabIndex = 0;
+        this.selectedIndex = 0;
+        this.selectedIndexChange = new EventEmitter();
+        this.selectedTabChange = new EventEmitter();
         this.tabSelected = new EventEmitter();
     }
+    get activeTabIndex() {
+        return this.selectedIndex;
+    }
+    set activeTabIndex(value) {
+        this.selectedIndex = value;
+    }
+    ngOnChanges(changes) {
+        if (changes['selectedIndex'] && !changes['selectedIndex'].firstChange) {
+            this.selectTabByIndex(this.selectedIndex);
+        }
+    }
     ngAfterContentInit() {
+        this.tabs.changes.subscribe(() => {
+            this.handleTabsChange();
+        });
+        this.handleTabsChange();
+    }
+    handleTabsChange() {
         const activeTabs = this.tabs.filter(tab => tab.active);
         if (activeTabs.length === 0 && this.tabs.first) {
-            this.selectTabByIndex(this.activeTabIndex);
+            this.selectTabByIndex(this.selectedIndex);
         }
     }
     selectTab(tab) {
@@ -3208,6 +3227,9 @@ class MatchaTabsComponent {
         tabsArray.forEach(t => t.active = false);
         tab.active = true;
         const index = tabsArray.indexOf(tab);
+        this.selectedIndex = index;
+        this.selectedIndexChange.emit(index);
+        this.selectedTabChange.emit({ index, tab });
         this.tabSelected.emit(index);
     }
     selectTabByIndex(index) {
@@ -3235,7 +3257,7 @@ class MatchaTabsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MatchaTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: MatchaTabsComponent, isStandalone: false, selector: "matcha-tabs", inputs: { activeTabIndex: "activeTabIndex" }, outputs: { tabSelected: "tabSelected" }, host: { listeners: { "keydown": "handleKeyboardEvent($event)" } }, queries: [{ propertyName: "tabs", predicate: MatchaTabItemComponent }], 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-88 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.1", 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-88 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.1", ngImport: i0, type: MatchaTabsComponent, decorators: [{
             type: Component,
@@ -3243,6 +3265,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
         }], propDecorators: { tabs: [{
                 type: ContentChildren,
                 args: [MatchaTabItemComponent]
+            }], selectedIndex: [{
+                type: Input
+            }], selectedIndexChange: [{
+                type: Output
+            }], selectedTabChange: [{
+                type: Output
             }], activeTabIndex: [{
                 type: Input
             }], tabSelected: [{
@@ -7502,23 +7530,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
 
 class MatchaTabsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MatchaTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.1", ngImport: i0, type: MatchaTabsModule, declarations: [MatchaTabsComponent, MatchaTabItemComponent], imports: [CommonModule,
-            MatchaTooltipModule,
-            MatchaIconModule], exports: [MatchaTabsComponent, MatchaTabItemComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.1", ngImport: i0, type: MatchaTabsModule, declarations: [MatchaTabsComponent,
+            MatchaTabItemComponent], imports: [CommonModule,
+            MatchaIconModule], exports: [MatchaTabsComponent,
+            MatchaTabItemComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MatchaTabsModule, imports: [CommonModule,
-            MatchaTooltipModule,
             MatchaIconModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MatchaTabsModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [MatchaTabsComponent, MatchaTabItemComponent],
+                    declarations: [
+                        MatchaTabsComponent,
+                        MatchaTabItemComponent
+                    ],
                     imports: [
                         CommonModule,
-                        MatchaTooltipModule,
-                        MatchaIconModule,
+                        MatchaIconModule
                     ],
-                    exports: [MatchaTabsComponent, MatchaTabItemComponent]
+                    exports: [
+                        MatchaTabsComponent,
+                        MatchaTabItemComponent
+                    ]
                 }]
         }] });