matcha-components 20.178.0 → 20.180.0

package/fesm2022/matcha-components.mjs

@@ -11498,6 +11498,88 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 args: ['sticky-end']
             }] } });
 
+class MatchaMenuComponent {
+    get maxHeight() { return this._maxHeight; }
+    set maxHeight(value) { this._maxHeight = typeof value === 'string' ? parseInt(value, 10) : value; }
+    get minWidth() { return this._minWidth; }
+    set minWidth(value) { this._minWidth = typeof value === 'string' ? parseInt(value, 10) : value; }
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.placement = 'auto';
+        this._maxHeight = 240;
+        this._minWidth = 160;
+        this.opened = new EventEmitter();
+        this.closed = new EventEmitter();
+        this.open = false;
+    }
+    openPanel(trigger) {
+        this.triggerElement = trigger;
+        this.open = true;
+        this.cdr.detectChanges();
+        this.panel.attachTo(this.triggerElement);
+        this.panel.openPanel();
+        this.opened.emit();
+    }
+    closePanel() {
+        if (!this.open)
+            return;
+        this.open = false;
+        this.panel.closePanel();
+        this.closed.emit();
+        this.cdr.detectChanges();
+    }
+    togglePanel(trigger) {
+        this.open ? this.closePanel() : this.openPanel(trigger);
+    }
+    onContentClick(event) {
+        // Se clicar em um botão ou item dentro do menu, fechamos o painel
+        const target = event.target;
+        if (target.closest('button') || target.closest('.matcha-menu-item') || target.closest('[matcha-button]')) {
+            // Pequeno timeout para permitir que o evento de clique original seja processado antes de remover o elemento do DOM
+            setTimeout(() => {
+                this.closePanel();
+            }, 100);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaMenuComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaMenuComponent, isStandalone: false, selector: "matcha-menu", inputs: { placement: "placement", maxHeight: "maxHeight", minWidth: "minWidth" }, outputs: { opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "panel", first: true, predicate: MatchaPanelComponent, descendants: true }], exportAs: ["matchaMenu"], ngImport: i0, template: `
+    <matcha-panel #panel [placement]="placement" [maxHeight]="maxHeight" [minWidth]="minWidth" [open]="open" (closed)="closePanel()">
+      <div class="matcha-menu-content" (click)="onContentClick($event)">
+        <ng-content></ng-content>
+      </div>
+    </matcha-panel>
+  `, isInline: true, dependencies: [{ kind: "component", type: MatchaPanelComponent, selector: "matcha-panel", inputs: ["placement", "maxHeight", "minWidth", "offset", "triggerElement", "open", "hasOverlay"], outputs: ["opened", "closed"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaMenuComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'matcha-menu',
+                    template: `
+    <matcha-panel #panel [placement]="placement" [maxHeight]="maxHeight" [minWidth]="minWidth" [open]="open" (closed)="closePanel()">
+      <div class="matcha-menu-content" (click)="onContentClick($event)">
+        <ng-content></ng-content>
+      </div>
+    </matcha-panel>
+  `,
+                    exportAs: 'matchaMenu',
+                    encapsulation: ViewEncapsulation.None,
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { panel: [{
+                type: ViewChild,
+                args: [MatchaPanelComponent]
+            }], placement: [{
+                type: Input
+            }], maxHeight: [{
+                type: Input
+            }], minWidth: [{
+                type: Input
+            }], opened: [{
+                type: Output
+            }], closed: [{
+                type: Output
+            }] } });
+
 class MatchaTooltipDirective {
     get tooltipText() { return this._tooltipText; }
     set tooltipText(v) {
@@ -13220,6 +13302,125 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 }]
         }] });
 
+class MatchaMenuTriggerDirective {
+    constructor(el) {
+        this.el = el;
+        this.subs = new Subscription();
+    }
+    ngAfterViewInit() {
+        if (!this.menu) {
+            throw new Error('Você precisa passar uma referência para <matcha-menu> ex: [matchaMenuTriggerFor]="menu"');
+        }
+        // Lógica para fechar ao clicar fora
+        const clickSub = fromEvent(document, 'click').pipe(filter((ev) => {
+            const target = ev.target;
+            const isInsideTrigger = this.el.nativeElement.contains(target);
+            // O painel do menu está dentro de um overlay no body, então precisamos verificar se o clique foi fora dele também.
+            // Como o MatchaMenuComponent gerencia o MatchaPanel, podemos confiar na lógica interna do MatchaPanel para fechar clicar fora,
+            // mas aqui reforçamos para o trigger.
+            return this.menu.open && !isInsideTrigger;
+        })).subscribe(() => {
+            // Apenas fechar se o clique não for dentro do painel (que é gerenciado pelo próprio MatchaPanel)
+            // Mas o MatchaPanel já tem essa lógica.
+        });
+        this.subs.add(clickSub);
+    }
+    onClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.menu.togglePanel(this.el.nativeElement);
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaMenuTriggerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: MatchaMenuTriggerDirective, isStandalone: false, selector: "[matchaMenuTriggerFor]", inputs: { menu: ["matchaMenuTriggerFor", "menu"] }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaMenuTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[matchaMenuTriggerFor]',
+                    standalone: false,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { menu: [{
+                type: Input,
+                args: ['matchaMenuTriggerFor']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+class MatchaMenuItemDirective {
+    get matchaMenuItem() {
+        return this._matchaMenuItem;
+    }
+    set matchaMenuItem(value) {
+        this._matchaMenuItem = value === 'false' ? false : !!value;
+    }
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+        this._matchaMenuItem = false;
+    }
+    ngOnInit() {
+        this.updateClass();
+    }
+    ngOnChanges() {
+        this.updateClass();
+    }
+    updateClass() {
+        if (this._matchaMenuItem) {
+            this.renderer.addClass(this.el.nativeElement, 'matcha-menu-item');
+        }
+        else {
+            this.renderer.removeClass(this.el.nativeElement, 'matcha-menu-item');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaMenuItemDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: MatchaMenuItemDirective, isStandalone: false, selector: "[matcha-menu-item]", inputs: { matchaMenuItem: ["matcha-menu-item", "matchaMenuItem"] }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaMenuItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[matcha-menu-item]',
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { matchaMenuItem: [{
+                type: Input,
+                args: ['matcha-menu-item']
+            }] } });
+
+class MatchaMenuModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaMenuModule, declarations: [MatchaMenuComponent,
+            MatchaMenuTriggerDirective,
+            MatchaMenuItemDirective], imports: [CommonModule,
+            MatchaPanelModule], exports: [MatchaMenuComponent,
+            MatchaMenuTriggerDirective,
+            MatchaMenuItemDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaMenuModule, imports: [CommonModule,
+            MatchaPanelModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaMenuModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        MatchaMenuComponent,
+                        MatchaMenuTriggerDirective,
+                        MatchaMenuItemDirective
+                    ],
+                    imports: [
+                        CommonModule,
+                        MatchaPanelModule
+                    ],
+                    exports: [
+                        MatchaMenuComponent,
+                        MatchaMenuTriggerDirective,
+                        MatchaMenuItemDirective
+                    ]
+                }]
+        }] });
+
 class MatchaSpinModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSpinModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaSpinModule, declarations: [MatchaSpinComponent], imports: [CommonModule], exports: [MatchaSpinComponent] }); }
@@ -13902,7 +14103,8 @@ class MatchaComponentsModule {
             MatchaDrawerModule,
             MatchaHighlightModule,
             MatchaMaskModule,
-            MatchaChipModule], exports: [MatchaAccordionModule,
+            MatchaChipModule,
+            MatchaMenuModule], exports: [MatchaAccordionModule,
             MatchaAutocompleteModule,
             MatchaOptionModule,
             MatchaPanelModule,
@@ -13940,7 +14142,8 @@ class MatchaComponentsModule {
             MatchaDrawerModule,
             MatchaHighlightModule,
             MatchaMaskModule,
-            MatchaChipModule] }); }
+            MatchaChipModule,
+            MatchaMenuModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaComponentsModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
@@ -13981,7 +14184,8 @@ class MatchaComponentsModule {
             MatchaDrawerModule,
             MatchaHighlightModule,
             MatchaMaskModule,
-            MatchaChipModule, MatchaAccordionModule,
+            MatchaChipModule,
+            MatchaMenuModule, MatchaAccordionModule,
             MatchaAutocompleteModule,
             MatchaOptionModule,
             MatchaPanelModule,
@@ -14019,7 +14223,8 @@ class MatchaComponentsModule {
             MatchaDrawerModule,
             MatchaHighlightModule,
             MatchaMaskModule,
-            MatchaChipModule] }); }
+            MatchaChipModule,
+            MatchaMenuModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaComponentsModule, decorators: [{
             type: NgModule,
@@ -14066,7 +14271,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         MatchaDrawerModule,
                         MatchaHighlightModule,
                         MatchaMaskModule,
-                        MatchaChipModule
+                        MatchaChipModule,
+                        MatchaMenuModule
                     ],
                     exports: [MatchaAccordionModule,
                         MatchaAutocompleteModule,
@@ -14106,7 +14312,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         MatchaDrawerModule,
                         MatchaHighlightModule,
                         MatchaMaskModule,
-                        MatchaChipModule
+                        MatchaChipModule,
+                        MatchaMenuModule
                     ],
                 }]
         }] });
@@ -14202,5 +14409,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CopyButtonComponent, INITIAL_CONFIG, MATCHA_MASK_CONFIG, MATCHA_OPTION_PARENT, MatchaAccordionComponent, MatchaAccordionContentComponent, MatchaAccordionHeaderComponent, MatchaAccordionItemComponent, MatchaAccordionModule, MatchaAutocompleteComponent, MatchaAutocompleteModule, MatchaAutocompleteTriggerDirective, MatchaAvatarComponent, MatchaAvatarModule, MatchaBreakpointObservableModule, MatchaBreakpointObserver, MatchaButtonComponent, MatchaButtonModule, MatchaButtonToggleComponent, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardModule, MatchaCheckboxComponent, MatchaCheckboxModule, MatchaChipComponent, MatchaChipListComponent, MatchaChipModule, MatchaComponentsModule, MatchaDateComponent, MatchaDateModule, MatchaDateRangeComponent, MatchaDateRangeModule, MatchaDividerComponent, MatchaDividerModule, MatchaDragDirective, MatchaDragHandleDirective, MatchaDrawerComponent, MatchaDrawerContainerComponent, MatchaDrawerContentComponent, MatchaDrawerModule, MatchaDropListComponent, MatchaDropListModule, MatchaElevationDirective, MatchaElevationModule, MatchaErrorComponent, MatchaFormFieldComponent, MatchaFormFieldModule, MatchaGridComponent, MatchaGridModule, MatchaHighlightComponent, MatchaHighlightModule, MatchaHintTextComponent, MatchaHintTextModule, MatchaIconComponent, MatchaIconModule, MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent, MatchaInfiniteScrollModule, MatchaInputPhoneComponent, MatchaInputPhoneModule, MatchaLabelComponent, MatchaLazyloadComponent, MatchaLazyloadDataComponent, MatchaLazyloadModule, MatchaMaskApplierService, MatchaMaskCompatibleDirective, MatchaMaskModule, MatchaMaskPipe, MatchaMaskService, MatchaMasonryComponent, MatchaMasonryModule, MatchaModalComponent, MatchaModalContentComponent, MatchaModalFooterComponent, MatchaModalHeaderComponent, MatchaModalModule, MatchaModalOptionsComponent, MatchaModalService, MatchaOptionComponent, MatchaOptionModule, MatchaOverlayService, MatchaPageLayoutComponent, MatchaPageLayoutModule, MatchaPaginatorComponent, MatchaPaginatorIntl, MatchaPaginatorModule, MatchaPanelComponent, MatchaPanelModule, MatchaRadioComponent, MatchaRadioGroupComponent, MatchaRadioModule, MatchaRippleDirective, MatchaRippleModule, MatchaSelectComponent, MatchaSelectModule, MatchaSelectTriggerDirective, MatchaSkeletonComponent, MatchaSkeletonModule, MatchaSlideToggleComponent, MatchaSlideToggleModule, MatchaSliderComponent, MatchaSliderModule, MatchaSpinComponent, MatchaSpinModule, MatchaSpinnerComponent, MatchaSpinnerModule, MatchaStepperComponent, MatchaStepperContentComponent, MatchaStepperControllerComponent, MatchaStepperModule, MatchaStepperStateService, MatchaTabItemComponent, MatchaTableComponent, MatchaTableModule, MatchaTabsComponent, MatchaTabsModule, MatchaTimeComponent, MatchaTimeModule, MatchaTitleComponent, MatchaTitleModule, MatchaToolbarButtonComponent, MatchaToolbarComponent, MatchaToolbarContentComponent, MatchaToolbarCustomButtonComponent, MatchaToolbarMainButtonComponent, MatchaToolbarModule, MatchaTooltipDirective, MatchaTooltipModule, NEW_CONFIG, NextStepDirective, PrevStepDirective, StepComponent, StepContentDirective, compatibleOptions, initialConfig, timeMasks, withoutValidation };
+export { CopyButtonComponent, INITIAL_CONFIG, MATCHA_MASK_CONFIG, MATCHA_OPTION_PARENT, MatchaAccordionComponent, MatchaAccordionContentComponent, MatchaAccordionHeaderComponent, MatchaAccordionItemComponent, MatchaAccordionModule, MatchaAutocompleteComponent, MatchaAutocompleteModule, MatchaAutocompleteTriggerDirective, MatchaAvatarComponent, MatchaAvatarModule, MatchaBreakpointObservableModule, MatchaBreakpointObserver, MatchaButtonComponent, MatchaButtonModule, MatchaButtonToggleComponent, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardModule, MatchaCheckboxComponent, MatchaCheckboxModule, MatchaChipComponent, MatchaChipListComponent, MatchaChipModule, MatchaComponentsModule, MatchaDateComponent, MatchaDateModule, MatchaDateRangeComponent, MatchaDateRangeModule, MatchaDividerComponent, MatchaDividerModule, MatchaDragDirective, MatchaDragHandleDirective, MatchaDrawerComponent, MatchaDrawerContainerComponent, MatchaDrawerContentComponent, MatchaDrawerModule, MatchaDropListComponent, MatchaDropListModule, MatchaElevationDirective, MatchaElevationModule, MatchaErrorComponent, MatchaFormFieldComponent, MatchaFormFieldModule, MatchaGridComponent, MatchaGridModule, MatchaHighlightComponent, MatchaHighlightModule, MatchaHintTextComponent, MatchaHintTextModule, MatchaIconComponent, MatchaIconModule, MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent, MatchaInfiniteScrollModule, MatchaInputPhoneComponent, MatchaInputPhoneModule, MatchaLabelComponent, MatchaLazyloadComponent, MatchaLazyloadDataComponent, MatchaLazyloadModule, MatchaMaskApplierService, MatchaMaskCompatibleDirective, MatchaMaskModule, MatchaMaskPipe, MatchaMaskService, MatchaMasonryComponent, MatchaMasonryModule, MatchaMenuComponent, MatchaMenuItemDirective, MatchaMenuModule, MatchaMenuTriggerDirective, MatchaModalComponent, MatchaModalContentComponent, MatchaModalFooterComponent, MatchaModalHeaderComponent, MatchaModalModule, MatchaModalOptionsComponent, MatchaModalService, MatchaOptionComponent, MatchaOptionModule, MatchaOverlayService, MatchaPageLayoutComponent, MatchaPageLayoutModule, MatchaPaginatorComponent, MatchaPaginatorIntl, MatchaPaginatorModule, MatchaPanelComponent, MatchaPanelModule, MatchaRadioComponent, MatchaRadioGroupComponent, MatchaRadioModule, MatchaRippleDirective, MatchaRippleModule, MatchaSelectComponent, MatchaSelectModule, MatchaSelectTriggerDirective, MatchaSkeletonComponent, MatchaSkeletonModule, MatchaSlideToggleComponent, MatchaSlideToggleModule, MatchaSliderComponent, MatchaSliderModule, MatchaSpinComponent, MatchaSpinModule, MatchaSpinnerComponent, MatchaSpinnerModule, MatchaStepperComponent, MatchaStepperContentComponent, MatchaStepperControllerComponent, MatchaStepperModule, MatchaStepperStateService, MatchaTabItemComponent, MatchaTableComponent, MatchaTableModule, MatchaTabsComponent, MatchaTabsModule, MatchaTimeComponent, MatchaTimeModule, MatchaTitleComponent, MatchaTitleModule, MatchaToolbarButtonComponent, MatchaToolbarComponent, MatchaToolbarContentComponent, MatchaToolbarCustomButtonComponent, MatchaToolbarMainButtonComponent, MatchaToolbarModule, MatchaTooltipDirective, MatchaTooltipModule, NEW_CONFIG, NextStepDirective, PrevStepDirective, StepComponent, StepContentDirective, compatibleOptions, initialConfig, timeMasks, withoutValidation };
 //# sourceMappingURL=matcha-components.mjs.map