matcha-components 20.191.0 → 20.193.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -750,7 +750,7 @@ class MatchaAutocompleteComponent {
|
|
|
750
750
|
provide: MATCHA_OPTION_PARENT,
|
|
751
751
|
useExisting: forwardRef(() => MatchaAutocompleteComponent)
|
|
752
752
|
}
|
|
753
|
-
], queries: [{ propertyName: "options", predicate: MatchaOptionComponent, descendants: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: MatchaPanelComponent, descendants: true }], ngImport: i0, template: "<div class=\"matcha-autocomplete-container\">\n <matcha-panel #panel [open]=\"open\" [placement]=\"placement\" [maxHeight]=\"maxHeight\" [minWidth]=\"minWidth\"\n [triggerElement]=\"triggerElement\" (opened)=\"opened.emit()\" (closed)=\"closePanel()\">\n <div class=\"matcha-panel-content flex-column\">\n <ng-content></ng-content>\n </div>\n </matcha-panel>\n</div>", dependencies: [{ kind: "component", type: MatchaPanelComponent, selector: "matcha-panel", inputs: ["placement", "maxHeight", "minWidth", "offset", "triggerElement", "open", "hasOverlay", "ignoreClickOutsideElements", "suppressGlobalClose", "portalToBody"], outputs: ["opened", "closed"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
753
|
+
], queries: [{ propertyName: "options", predicate: MatchaOptionComponent, descendants: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: MatchaPanelComponent, descendants: true }], ngImport: i0, template: "<div class=\"matcha-autocomplete-container\">\n <matcha-panel #panel [open]=\"open\" [placement]=\"placement\" [maxHeight]=\"maxHeight\" [minWidth]=\"minWidth\"\n [triggerElement]=\"triggerElement\" [portalToBody]=\"true\" (opened)=\"opened.emit()\" (closed)=\"closePanel()\">\n <div class=\"matcha-panel-content flex-column\">\n <ng-content></ng-content>\n </div>\n </matcha-panel>\n</div>", dependencies: [{ kind: "component", type: MatchaPanelComponent, selector: "matcha-panel", inputs: ["placement", "maxHeight", "minWidth", "offset", "triggerElement", "open", "hasOverlay", "ignoreClickOutsideElements", "suppressGlobalClose", "portalToBody"], outputs: ["opened", "closed"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
754
754
|
}
|
|
755
755
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MatchaAutocompleteComponent, decorators: [{
|
|
756
756
|
type: Component,
|
|
@@ -759,7 +759,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
|
|
|
759
759
|
provide: MATCHA_OPTION_PARENT,
|
|
760
760
|
useExisting: forwardRef(() => MatchaAutocompleteComponent)
|
|
761
761
|
}
|
|
762
|
-
], template: "<div class=\"matcha-autocomplete-container\">\n <matcha-panel #panel [open]=\"open\" [placement]=\"placement\" [maxHeight]=\"maxHeight\" [minWidth]=\"minWidth\"\n [triggerElement]=\"triggerElement\" (opened)=\"opened.emit()\" (closed)=\"closePanel()\">\n <div class=\"matcha-panel-content flex-column\">\n <ng-content></ng-content>\n </div>\n </matcha-panel>\n</div>" }]
|
|
762
|
+
], template: "<div class=\"matcha-autocomplete-container\">\n <matcha-panel #panel [open]=\"open\" [placement]=\"placement\" [maxHeight]=\"maxHeight\" [minWidth]=\"minWidth\"\n [triggerElement]=\"triggerElement\" [portalToBody]=\"true\" (opened)=\"opened.emit()\" (closed)=\"closePanel()\">\n <div class=\"matcha-panel-content flex-column\">\n <ng-content></ng-content>\n </div>\n </matcha-panel>\n</div>" }]
|
|
763
763
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { options: [{
|
|
764
764
|
type: ContentChildren,
|
|
765
765
|
args: [MatchaOptionComponent, { descendants: true }]
|
|
@@ -1661,7 +1661,7 @@ class MatchaSelectComponent {
|
|
|
1661
1661
|
provide: MATCHA_OPTION_PARENT,
|
|
1662
1662
|
useExisting: forwardRef(() => MatchaSelectComponent)
|
|
1663
1663
|
}
|
|
1664
|
-
], queries: [{ propertyName: "options", predicate: MatchaOptionComponent, descendants: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: MatchaPanelComponent, descendants: true }], ngImport: i0, template: "<div class=\"matcha-select-container\" [class.matcha-select-disabled]=\"isCurrentlyDisabled\">\n <div class=\"matcha-select-trigger\" [class.matcha-select-open]=\"open\"\n [class.matcha-select-disabled]=\"isCurrentlyDisabled\" (click)=\"onTriggerClick()\"\n [attr.tabindex]=\"isCurrentlyDisabled ? -1 : 0\" role=\"combobox\" [attr.aria-expanded]=\"open\"\n [attr.aria-haspopup]=\"true\" [attr.aria-disabled]=\"isCurrentlyDisabled\">\n\n <span class=\"matcha-select-value\"\n [class.matcha-select-placeholder]=\"selectedValue === undefined || selectedValue === null || selectedValue === ''\">\n {{ getSelectedLabel() || placeholder }}\n </span>\n\n <span class=\"matcha-select-arrow\" [class.matcha-select-arrow-open]=\"open\">\n <span class=\"i-matcha-action_arrow_down\"></span>\n </span>\n </div>\n\n <matcha-panel #panel [placement]=\"placement\" [maxHeight]=\"maxHeight\" [minWidth]=\"minWidth\" [open]=\"open\"\n (closed)=\"closePanel()\">\n <ng-content></ng-content>\n </matcha-panel>\n</div>", styles: [""], dependencies: [{ kind: "component", type: MatchaPanelComponent, selector: "matcha-panel", inputs: ["placement", "maxHeight", "minWidth", "offset", "triggerElement", "open", "hasOverlay", "ignoreClickOutsideElements", "suppressGlobalClose", "portalToBody"], outputs: ["opened", "closed"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1664
|
+
], queries: [{ propertyName: "options", predicate: MatchaOptionComponent, descendants: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: MatchaPanelComponent, descendants: true }], ngImport: i0, template: "<div class=\"matcha-select-container\" [class.matcha-select-disabled]=\"isCurrentlyDisabled\">\n <div class=\"matcha-select-trigger\" [class.matcha-select-open]=\"open\"\n [class.matcha-select-disabled]=\"isCurrentlyDisabled\" (click)=\"onTriggerClick()\"\n [attr.tabindex]=\"isCurrentlyDisabled ? -1 : 0\" role=\"combobox\" [attr.aria-expanded]=\"open\"\n [attr.aria-haspopup]=\"true\" [attr.aria-disabled]=\"isCurrentlyDisabled\">\n\n <span class=\"matcha-select-value\"\n [class.matcha-select-placeholder]=\"selectedValue === undefined || selectedValue === null || selectedValue === ''\">\n {{ getSelectedLabel() || placeholder }}\n </span>\n\n <span class=\"matcha-select-arrow\" [class.matcha-select-arrow-open]=\"open\">\n <span class=\"i-matcha-action_arrow_down\"></span>\n </span>\n </div>\n\n <matcha-panel #panel [placement]=\"placement\" [maxHeight]=\"maxHeight\" [minWidth]=\"minWidth\" [open]=\"open\"\n [portalToBody]=\"true\" (closed)=\"closePanel()\">\n <ng-content></ng-content>\n </matcha-panel>\n</div>", styles: [""], dependencies: [{ kind: "component", type: MatchaPanelComponent, selector: "matcha-panel", inputs: ["placement", "maxHeight", "minWidth", "offset", "triggerElement", "open", "hasOverlay", "ignoreClickOutsideElements", "suppressGlobalClose", "portalToBody"], outputs: ["opened", "closed"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1665
1665
|
}
|
|
1666
1666
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MatchaSelectComponent, decorators: [{
|
|
1667
1667
|
type: Component,
|
|
@@ -1675,7 +1675,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
|
|
|
1675
1675
|
provide: MATCHA_OPTION_PARENT,
|
|
1676
1676
|
useExisting: forwardRef(() => MatchaSelectComponent)
|
|
1677
1677
|
}
|
|
1678
|
-
], template: "<div class=\"matcha-select-container\" [class.matcha-select-disabled]=\"isCurrentlyDisabled\">\n <div class=\"matcha-select-trigger\" [class.matcha-select-open]=\"open\"\n [class.matcha-select-disabled]=\"isCurrentlyDisabled\" (click)=\"onTriggerClick()\"\n [attr.tabindex]=\"isCurrentlyDisabled ? -1 : 0\" role=\"combobox\" [attr.aria-expanded]=\"open\"\n [attr.aria-haspopup]=\"true\" [attr.aria-disabled]=\"isCurrentlyDisabled\">\n\n <span class=\"matcha-select-value\"\n [class.matcha-select-placeholder]=\"selectedValue === undefined || selectedValue === null || selectedValue === ''\">\n {{ getSelectedLabel() || placeholder }}\n </span>\n\n <span class=\"matcha-select-arrow\" [class.matcha-select-arrow-open]=\"open\">\n <span class=\"i-matcha-action_arrow_down\"></span>\n </span>\n </div>\n\n <matcha-panel #panel [placement]=\"placement\" [maxHeight]=\"maxHeight\" [minWidth]=\"minWidth\" [open]=\"open\"\n (closed)=\"closePanel()\">\n <ng-content></ng-content>\n </matcha-panel>\n</div>" }]
|
|
1678
|
+
], template: "<div class=\"matcha-select-container\" [class.matcha-select-disabled]=\"isCurrentlyDisabled\">\n <div class=\"matcha-select-trigger\" [class.matcha-select-open]=\"open\"\n [class.matcha-select-disabled]=\"isCurrentlyDisabled\" (click)=\"onTriggerClick()\"\n [attr.tabindex]=\"isCurrentlyDisabled ? -1 : 0\" role=\"combobox\" [attr.aria-expanded]=\"open\"\n [attr.aria-haspopup]=\"true\" [attr.aria-disabled]=\"isCurrentlyDisabled\">\n\n <span class=\"matcha-select-value\"\n [class.matcha-select-placeholder]=\"selectedValue === undefined || selectedValue === null || selectedValue === ''\">\n {{ getSelectedLabel() || placeholder }}\n </span>\n\n <span class=\"matcha-select-arrow\" [class.matcha-select-arrow-open]=\"open\">\n <span class=\"i-matcha-action_arrow_down\"></span>\n </span>\n </div>\n\n <matcha-panel #panel [placement]=\"placement\" [maxHeight]=\"maxHeight\" [minWidth]=\"minWidth\" [open]=\"open\"\n [portalToBody]=\"true\" (closed)=\"closePanel()\">\n <ng-content></ng-content>\n </matcha-panel>\n</div>" }]
|
|
1679
1679
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { options: [{
|
|
1680
1680
|
type: ContentChildren,
|
|
1681
1681
|
args: [MatchaOptionComponent, { descendants: true }]
|
|
@@ -8210,18 +8210,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
|
|
|
8210
8210
|
}] } });
|
|
8211
8211
|
|
|
8212
8212
|
class MatchaTabsComponent {
|
|
8213
|
-
constructor() {
|
|
8214
|
-
this.selectedIndex = 0;
|
|
8215
|
-
this.selectedIndexChange = new EventEmitter();
|
|
8216
|
-
this.selectedTabChange = new EventEmitter();
|
|
8217
|
-
this.tabSelected = new EventEmitter();
|
|
8218
|
-
}
|
|
8219
8213
|
get activeTabIndex() {
|
|
8220
8214
|
return this.selectedIndex;
|
|
8221
8215
|
}
|
|
8222
8216
|
set activeTabIndex(value) {
|
|
8223
8217
|
this.selectedIndex = value;
|
|
8224
8218
|
}
|
|
8219
|
+
constructor(cdr) {
|
|
8220
|
+
this.cdr = cdr;
|
|
8221
|
+
this.selectedIndex = 0;
|
|
8222
|
+
this.selectedIndexChange = new EventEmitter();
|
|
8223
|
+
this.selectedTabChange = new EventEmitter();
|
|
8224
|
+
this.tabSelected = new EventEmitter();
|
|
8225
|
+
}
|
|
8225
8226
|
ngOnChanges(changes) {
|
|
8226
8227
|
if (changes['selectedIndex'] && !changes['selectedIndex'].firstChange) {
|
|
8227
8228
|
this.selectTabByIndex(this.selectedIndex);
|
|
@@ -8231,21 +8232,21 @@ class MatchaTabsComponent {
|
|
|
8231
8232
|
this.tabs.changes.subscribe(() => {
|
|
8232
8233
|
this.handleTabsChange();
|
|
8233
8234
|
});
|
|
8234
|
-
|
|
8235
|
+
// Defer initial tab activation to avoid NG0100
|
|
8236
|
+
Promise.resolve().then(() => this.handleTabsChange());
|
|
8235
8237
|
}
|
|
8236
8238
|
handleTabsChange() {
|
|
8237
8239
|
const activeTabs = this.tabs.filter(tab => tab.active);
|
|
8238
8240
|
if (activeTabs.length === 0 && this.tabs.first) {
|
|
8239
|
-
this.
|
|
8241
|
+
this.activateTabByIndex(this.selectedIndex);
|
|
8240
8242
|
}
|
|
8241
8243
|
}
|
|
8244
|
+
/** Ativa uma tab por interação do usuário (emite eventos) */
|
|
8242
8245
|
selectTab(tab) {
|
|
8243
8246
|
if (tab.active)
|
|
8244
8247
|
return;
|
|
8245
|
-
|
|
8246
|
-
|
|
8247
|
-
tab.active = true;
|
|
8248
|
-
const index = tabsArray.indexOf(tab);
|
|
8248
|
+
this.setActiveTab(tab);
|
|
8249
|
+
const index = this.tabs.toArray().indexOf(tab);
|
|
8249
8250
|
this.selectedIndex = index;
|
|
8250
8251
|
this.selectedIndexChange.emit(index);
|
|
8251
8252
|
this.selectedTabChange.emit({ index, tab });
|
|
@@ -8257,6 +8258,20 @@ class MatchaTabsComponent {
|
|
|
8257
8258
|
this.selectTab(tab);
|
|
8258
8259
|
}
|
|
8259
8260
|
}
|
|
8261
|
+
/** Ativa uma tab silenciosamente (sem emitir eventos, para inicialização) */
|
|
8262
|
+
activateTabByIndex(index) {
|
|
8263
|
+
const tabsArray = this.tabs.toArray();
|
|
8264
|
+
const safeIndex = Math.min(Math.max(index, 0), tabsArray.length - 1);
|
|
8265
|
+
if (safeIndex >= 0 && tabsArray[safeIndex]) {
|
|
8266
|
+
this.setActiveTab(tabsArray[safeIndex]);
|
|
8267
|
+
this.selectedIndex = safeIndex;
|
|
8268
|
+
this.cdr.detectChanges();
|
|
8269
|
+
}
|
|
8270
|
+
}
|
|
8271
|
+
setActiveTab(tab) {
|
|
8272
|
+
this.tabs.forEach(t => t.active = false);
|
|
8273
|
+
tab.active = true;
|
|
8274
|
+
}
|
|
8260
8275
|
handleKeyboardEvent(event) {
|
|
8261
8276
|
// Ignorar se o evento vier de um input, textarea ou select
|
|
8262
8277
|
const target = event.target;
|
|
@@ -8272,13 +8287,13 @@ class MatchaTabsComponent {
|
|
|
8272
8287
|
this.selectTabByIndex(tabsArray.length - 1);
|
|
8273
8288
|
}
|
|
8274
8289
|
}
|
|
8275
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MatchaTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8290
|
+
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 }); }
|
|
8276
8291
|
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] }); }
|
|
8277
8292
|
}
|
|
8278
8293
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MatchaTabsComponent, decorators: [{
|
|
8279
8294
|
type: Component,
|
|
8280
8295
|
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" }]
|
|
8281
|
-
}], propDecorators: { tabs: [{
|
|
8296
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { tabs: [{
|
|
8282
8297
|
type: ContentChildren,
|
|
8283
8298
|
args: [MatchaTabItemComponent]
|
|
8284
8299
|
}], selectedIndex: [{
|