matcha-components 20.191.0 → 20.192.0

package/fesm2022/matcha-components.mjs

@@ -8210,18 +8210,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
             }] } });
 
 class MatchaTabsComponent {
-    constructor() {
-        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;
     }
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.selectedIndex = 0;
+        this.selectedIndexChange = new EventEmitter();
+        this.selectedTabChange = new EventEmitter();
+        this.tabSelected = new EventEmitter();
+    }
     ngOnChanges(changes) {
         if (changes['selectedIndex'] && !changes['selectedIndex'].firstChange) {
             this.selectTabByIndex(this.selectedIndex);
@@ -8231,21 +8232,21 @@ class MatchaTabsComponent {
         this.tabs.changes.subscribe(() => {
             this.handleTabsChange();
         });
-        this.handleTabsChange();
+        // Defer initial tab activation to avoid NG0100
+        Promise.resolve().then(() => this.handleTabsChange());
     }
     handleTabsChange() {
         const activeTabs = this.tabs.filter(tab => tab.active);
         if (activeTabs.length === 0 && this.tabs.first) {
-            this.selectTabByIndex(this.selectedIndex);
+            this.activateTabByIndex(this.selectedIndex);
         }
     }
+    /** Ativa uma tab por interação do usuário (emite eventos) */
     selectTab(tab) {
         if (tab.active)
             return;
-        const tabsArray = this.tabs.toArray();
-        tabsArray.forEach(t => t.active = false);
-        tab.active = true;
-        const index = tabsArray.indexOf(tab);
+        this.setActiveTab(tab);
+        const index = this.tabs.toArray().indexOf(tab);
         this.selectedIndex = index;
         this.selectedIndexChange.emit(index);
         this.selectedTabChange.emit({ index, tab });
@@ -8257,6 +8258,20 @@ class MatchaTabsComponent {
             this.selectTab(tab);
         }
     }
+    /** Ativa uma tab silenciosamente (sem emitir eventos, para inicialização) */
+    activateTabByIndex(index) {
+        const tabsArray = this.tabs.toArray();
+        const safeIndex = Math.min(Math.max(index, 0), tabsArray.length - 1);
+        if (safeIndex >= 0 && tabsArray[safeIndex]) {
+            this.setActiveTab(tabsArray[safeIndex]);
+            this.selectedIndex = safeIndex;
+            this.cdr.detectChanges();
+        }
+    }
+    setActiveTab(tab) {
+        this.tabs.forEach(t => t.active = false);
+        tab.active = true;
+    }
     handleKeyboardEvent(event) {
         // Ignorar se o evento vier de um input, textarea ou select
         const target = event.target;
@@ -8272,13 +8287,13 @@ class MatchaTabsComponent {
             this.selectTabByIndex(tabsArray.length - 1);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MatchaTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MatchaTabsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", 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] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", 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" }]
-        }], propDecorators: { tabs: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { tabs: [{
                 type: ContentChildren,
                 args: [MatchaTabItemComponent]
             }], selectedIndex: [{