matcha-components 20.198.0 → 20.199.0

package/fesm2022/matcha-components.mjs

@@ -331,7 +331,7 @@ class MatchaPanelComponent {
         const viewportWidth = window.innerWidth;
         const margin = 10;
         // Posicionamento lateral (para submenus)
-        if (this.placement === 'right' || this.placement === 'left') {
+        if (this.placement === 'side') {
             return this.calculateSidePosition(rect, viewportWidth, viewportHeight, margin);
         }
         let top;
@@ -341,6 +341,13 @@ class MatchaPanelComponent {
         let maxHeight = this.maxHeight;
         let placement = 'bottom';
         let actualHeight = 0;
+        // Para max-content, medir a largura real renderizada do painel
+        if (this.widthMode === 'max-content' && this.paneRef) {
+            const panelWidth = this.paneRef.nativeElement.scrollWidth;
+            if (panelWidth > width) {
+                width = panelWidth;
+            }
+        }
         // Determinar se deve abrir para cima ou para baixo
         const spaceBelow = viewportHeight - rect.bottom - margin;
         const spaceAbove = rect.top - margin;
@@ -366,10 +373,11 @@ class MatchaPanelComponent {
         }
         // Posicionamento horizontal: alinhar à esquerda do trigger
         left = rect.left;
-        // Garantir que não saia da tela horizontalmente
+        // Se o painel ultrapassa a tela pela direita, alinhar pela direita do trigger
         if (left + width > viewportWidth - margin) {
-            left = viewportWidth - width - margin;
+            left = rect.right - width;
         }
+        // Se ainda ultrapassa pela esquerda, empurrar para a margem
         if (left < margin) {
             left = margin;
             width = Math.min(width, viewportWidth - 2 * margin);
@@ -383,21 +391,33 @@ class MatchaPanelComponent {
     }
     /**
      * Calcula posição lateral (para submenus multinível)
+     * Detecta automaticamente se deve abrir à direita ou à esquerda
      */
     calculateSidePosition(rect, viewportWidth, viewportHeight, margin) {
-        const width = this.minWidth;
+        let width = this.minWidth;
         const maxHeight = this.maxHeight;
-        // Tentar abrir à direita do trigger
+        // Para max-content, medir a largura real renderizada
+        if (this.widthMode === 'max-content' && this.paneRef) {
+            const panelWidth = this.paneRef.nativeElement.scrollWidth;
+            if (panelWidth > width) {
+                width = panelWidth;
+            }
+        }
+        // Auto-detectar: preferir direita, usar esquerda se não houver espaço
         const spaceRight = viewportWidth - rect.right - margin;
         const spaceLeft = rect.left - margin;
         let left;
-        if (this.placement === 'left' || (spaceRight < width && spaceLeft >= width)) {
-            // Abrir à esquerda
+        if (spaceRight >= width) {
+            left = rect.right + 2;
+        }
+        else if (spaceLeft >= width) {
             left = rect.left - width - 2;
         }
         else {
-            // Abrir à direita
-            left = rect.right + 2;
+            // Nenhum lado cabe: abrir no lado com mais espaço
+            left = spaceRight >= spaceLeft
+                ? rect.right + 2
+                : rect.left - width - 2;
         }
         // Posição vertical: alinhar o topo do submenu com o topo do item trigger
         let top = rect.top;
@@ -411,7 +431,7 @@ class MatchaPanelComponent {
         }
         // Garantir que não saia da tela horizontalmente
         if (left + width > viewportWidth - margin) {
-            left = rect.left - width - 2;
+            left = viewportWidth - width - margin;
         }
         if (left < margin) {
             left = margin;
@@ -7457,7 +7477,7 @@ class MatchaMenuComponent {
     constructor(cdr) {
         this.cdr = cdr;
         this.placement = 'auto';
-        this._maxHeight = 240;
+        this._maxHeight = 300;
         this._minWidth = 160;
         this.opened = new EventEmitter();
         this.closed = new EventEmitter();
@@ -7714,6 +7734,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
             }] } });
 
 class MatchaSubmenuTriggerDirective {
+    /** Detecta dispositivos sem hover (touch-primary) */
+    get isTouch() {
+        return window.matchMedia('(hover: none)').matches;
+    }
     constructor(el) {
         this.el = el;
         this.hasSubmenuClass = true;
@@ -7727,14 +7751,38 @@ class MatchaSubmenuTriggerDirective {
         // Quando o mouse entra no painel do submenu, cancela TODA a cadeia de fechamento
         this.submenu.onPanelMouseEnter = () => this.cancelClose();
         // Quando o mouse sai do painel do submenu, agenda fechamento
-        // apenas se não houver submenus filhos abertos
+        // apenas se não houver submenus filhos abertos (ignora em touch)
         this.submenu.onPanelMouseLeave = () => {
-            if (!this.submenu.hasOpenSubMenus()) {
+            if (!this.isTouch && !this.submenu.hasOpenSubMenus()) {
                 this.scheduleClose();
             }
         };
     }
+    onClick(event) {
+        if (!this.isTouch)
+            return;
+        // Impedir que o clique propague para o onContentClick do menu pai
+        event.stopPropagation();
+        if (!this.submenu || !this.parentMenu)
+            return;
+        // Toggle: se já está aberto, fecha; senão, abre
+        if (this.submenu.open) {
+            this.submenu.closePanel();
+            this.parentMenu.unregisterSubMenu(this.submenu);
+            return;
+        }
+        // Fechar outros submenus do mesmo nível
+        this.parentMenu.closeOtherSubMenus(this.submenu);
+        // Configurar relação pai/filho e abrir
+        this.submenu.parentMenu = this.parentMenu;
+        this.submenu.placement = 'side';
+        this.submenu.openPanel(this.el.nativeElement);
+        this.parentMenu.registerSubMenu(this.submenu);
+    }
     onMouseEnter() {
+        // Em touch, o submenu é controlado por click
+        if (this.isTouch)
+            return;
         // Cancelar qualquer fechamento pendente neste nível e nos pais
         this.cancelClose();
         if (this.parentMenu) {
@@ -7746,7 +7794,7 @@ class MatchaSubmenuTriggerDirective {
         this.parentMenu.closeOtherSubMenus(this.submenu);
         // Configurar relação pai/filho
         this.submenu.parentMenu = this.parentMenu;
-        this.submenu.placement = 'right';
+        this.submenu.placement = 'side';
         // Abrir o submenu posicionado ao lado deste item
         if (!this.submenu.open) {
             this.submenu.openPanel(this.el.nativeElement);
@@ -7754,6 +7802,9 @@ class MatchaSubmenuTriggerDirective {
         }
     }
     onMouseLeave() {
+        // Em touch, o submenu é controlado por click
+        if (this.isTouch)
+            return;
         // Agendar fechamento mas o cancelClose será chamado
         // se o mouse entrar no painel do submenu ou no item novamente
         this.scheduleClose();
@@ -7789,7 +7840,7 @@ class MatchaSubmenuTriggerDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MatchaSubmenuTriggerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.2", type: MatchaSubmenuTriggerDirective, isStandalone: false, selector: "[matchaSubmenuTriggerFor]", inputs: { submenu: ["matchaSubmenuTriggerFor", "submenu"], parentMenu: "parentMenu" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" }, properties: { "class.matcha-menu-item-has-submenu": "this.hasSubmenuClass" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.2", type: MatchaSubmenuTriggerDirective, isStandalone: false, selector: "[matchaSubmenuTriggerFor]", inputs: { submenu: ["matchaSubmenuTriggerFor", "submenu"], parentMenu: "parentMenu" }, host: { listeners: { "click": "onClick($event)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" }, properties: { "class.matcha-menu-item-has-submenu": "this.hasSubmenuClass" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MatchaSubmenuTriggerDirective, decorators: [{
             type: Directive,
@@ -7805,6 +7856,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
             }], hasSubmenuClass: [{
                 type: HostBinding,
                 args: ['class.matcha-menu-item-has-submenu']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
             }], onMouseEnter: [{
                 type: HostListener,
                 args: ['mouseenter']