matcha-components 20.48.0 → 20.50.0

package/fesm2022/matcha-components.mjs

@@ -8737,7 +8737,7 @@ class MatchaSelectComponent {
                 useExisting: forwardRef(() => MatchaSelectComponent),
                 multi: true
             }
-        ], 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]=\"disabled || isDisabled\">\n  <div\n    class=\"matcha-select-trigger\"\n    [class.matcha-select-open]=\"open\"\n    [class.matcha-select-disabled]=\"disabled || isDisabled\"\n    (click)=\"onTriggerClick()\"\n    [attr.tabindex]=\"(disabled || isDisabled) ? -1 : 0\"\n    role=\"combobox\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-haspopup]=\"true\"\n    [attr.aria-disabled]=\"disabled || isDisabled\">\n\n    <span class=\"matcha-select-value\" [class.matcha-select-placeholder]=\"!selectedValue\">\n      {{ getSelectedLabel() || placeholder }}\n    </span>\n\n    <span class=\"matcha-select-arrow\" [class.matcha-select-arrow-open]=\"open\">\n      <span class=\"i-matcha-arrow-down\"></span>\n    </span>\n  </div>\n\n  <matcha-panel\n    #panel\n    [placement]=\"placement\"\n    [maxHeight]=\"maxHeight\"\n    [minWidth]=\"minWidth\"\n    [open]=\"open\">\n    <ng-content></ng-content>\n  </matcha-panel>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatchaPanelComponent, selector: "matcha-panel", inputs: ["placement", "maxHeight", "minWidth", "offset", "triggerElement", "open"], outputs: ["opened", "closed"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], 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]=\"disabled || isDisabled\">\n  <div\n    class=\"matcha-select-trigger\"\n    [class.matcha-select-open]=\"open\"\n    [class.matcha-select-disabled]=\"disabled || isDisabled\"\n    (click)=\"onTriggerClick()\"\n    [attr.tabindex]=\"(disabled || isDisabled) ? -1 : 0\"\n    role=\"combobox\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-haspopup]=\"true\"\n    [attr.aria-disabled]=\"disabled || isDisabled\">\n\n    <span class=\"matcha-select-value\" [class.matcha-select-placeholder]=\"!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\n    #panel\n    [placement]=\"placement\"\n    [maxHeight]=\"maxHeight\"\n    [minWidth]=\"minWidth\"\n    [open]=\"open\">\n    <ng-content></ng-content>\n  </matcha-panel>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatchaPanelComponent, selector: "matcha-panel", inputs: ["placement", "maxHeight", "minWidth", "offset", "triggerElement", "open"], outputs: ["opened", "closed"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSelectComponent, decorators: [{
             type: Component,
@@ -8747,7 +8747,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                             useExisting: forwardRef(() => MatchaSelectComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"matcha-select-container\" [class.matcha-select-disabled]=\"disabled || isDisabled\">\n  <div\n    class=\"matcha-select-trigger\"\n    [class.matcha-select-open]=\"open\"\n    [class.matcha-select-disabled]=\"disabled || isDisabled\"\n    (click)=\"onTriggerClick()\"\n    [attr.tabindex]=\"(disabled || isDisabled) ? -1 : 0\"\n    role=\"combobox\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-haspopup]=\"true\"\n    [attr.aria-disabled]=\"disabled || isDisabled\">\n\n    <span class=\"matcha-select-value\" [class.matcha-select-placeholder]=\"!selectedValue\">\n      {{ getSelectedLabel() || placeholder }}\n    </span>\n\n    <span class=\"matcha-select-arrow\" [class.matcha-select-arrow-open]=\"open\">\n      <span class=\"i-matcha-arrow-down\"></span>\n    </span>\n  </div>\n\n  <matcha-panel\n    #panel\n    [placement]=\"placement\"\n    [maxHeight]=\"maxHeight\"\n    [minWidth]=\"minWidth\"\n    [open]=\"open\">\n    <ng-content></ng-content>\n  </matcha-panel>\n</div>\n" }]
+                    ], template: "<div class=\"matcha-select-container\" [class.matcha-select-disabled]=\"disabled || isDisabled\">\n  <div\n    class=\"matcha-select-trigger\"\n    [class.matcha-select-open]=\"open\"\n    [class.matcha-select-disabled]=\"disabled || isDisabled\"\n    (click)=\"onTriggerClick()\"\n    [attr.tabindex]=\"(disabled || isDisabled) ? -1 : 0\"\n    role=\"combobox\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-haspopup]=\"true\"\n    [attr.aria-disabled]=\"disabled || isDisabled\">\n\n    <span class=\"matcha-select-value\" [class.matcha-select-placeholder]=\"!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\n    #panel\n    [placement]=\"placement\"\n    [maxHeight]=\"maxHeight\"\n    [minWidth]=\"minWidth\"\n    [open]=\"open\">\n    <ng-content></ng-content>\n  </matcha-panel>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { options: [{
                 type: ContentChildren,
                 args: [MatchaOptionComponent, { descendants: true }]
@@ -9780,21 +9780,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             }] } });
 
 class MatchaTooltipDirective {
+    get tooltipDisabled() { return this._tooltipDisabled; }
+    set tooltipDisabled(v) { this._tooltipDisabled = v === 'false' ? false : !!v; }
+    get tooltipDisabledAttr() {
+        return this.tooltipDisabled ? 'true' : 'false';
+    }
+    get preferAbove() { return this._preferAbove; }
+    set preferAbove(v) { this._preferAbove = v === 'false' ? false : !!v; }
+    get preferAboveAttr() {
+        return this.preferAbove ? 'true' : 'false';
+    }
+    get preferBelow() { return this._preferBelow; }
+    set preferBelow(v) { this._preferBelow = v === 'false' ? false : !!v; }
+    get preferBelowAttr() {
+        return this.preferBelow ? 'true' : 'false';
+    }
+    get preferLeft() { return this._preferLeft; }
+    set preferLeft(v) { this._preferLeft = v === 'false' ? false : !!v; }
+    get preferLeftAttr() {
+        return this.preferLeft ? 'true' : 'false';
+    }
+    get preferRight() { return this._preferRight; }
+    set preferRight(v) { this._preferRight = v === 'false' ? false : !!v; }
+    get preferRightAttr() {
+        return this.preferRight ? 'true' : 'false';
+    }
+    get tooltipEnableClose() { return this._tooltipEnableClose; }
+    set tooltipEnableClose(v) { this._tooltipEnableClose = v === 'false' ? false : !!v; }
+    get tooltipEnableCloseAttr() {
+        return this.tooltipEnableClose ? 'true' : 'false';
+    }
     constructor(el, renderer) {
         this.el = el;
         this.renderer = renderer;
         this.tooltipText = '';
-        this.tooltipDisabled = false;
-        this.preferAbove = false;
-        this.preferBelow = false;
-        this.preferLeft = false;
-        this.preferRight = false;
-        this.tooltipEnableClose = false;
+        this._tooltipDisabled = false;
+        this._preferAbove = false;
+        this._preferBelow = false;
+        this._preferLeft = false;
+        this._preferRight = false;
+        this._tooltipEnableClose = false;
         this.tooltipElement = null;
         this.documentClickListener = null;
+        this.isDestroyed = false;
     }
     onMouseEnter() {
-        if (this.tooltipEnableClose) {
+        if (this.isDestroyed || this.tooltipEnableClose) {
             // Em modo de clique/tap, não abre via hover
             return;
         }
@@ -9804,12 +9835,12 @@ class MatchaTooltipDirective {
         this.createTooltip();
     }
     onMouseLeave() {
-        if (!this.tooltipEnableClose && this.tooltipElement) {
+        if (this.isDestroyed || (!this.tooltipEnableClose && this.tooltipElement)) {
             this.destroyTooltip();
         }
     }
     onClick(event) {
-        if (!this.tooltipEnableClose) {
+        if (this.isDestroyed || !this.tooltipEnableClose) {
             return;
         }
         event.stopPropagation();
@@ -9818,6 +9849,10 @@ class MatchaTooltipDirective {
         }
     }
     createTooltip() {
+        // Verificar se já existe um tooltip ativo
+        if (this.tooltipElement || this.isDestroyed) {
+            return;
+        }
         // Cria o tooltip e adiciona a classe base
         this.tooltipElement = this.renderer.createElement('div');
         this.renderer.addClass(this.tooltipElement, 'matcha-tooltip-content');
@@ -9838,6 +9873,11 @@ class MatchaTooltipDirective {
                 e.stopPropagation();
                 this.destroyTooltip();
             });
+            // Remover listener anterior se existir
+            if (this.documentClickListener) {
+                this.documentClickListener();
+                this.documentClickListener = null;
+            }
             this.documentClickListener = this.renderer.listen('document', 'click', (e) => {
                 if (this.tooltipElement && !this.tooltipElement.contains(e.target)) {
                     this.destroyTooltip();
@@ -9920,8 +9960,12 @@ class MatchaTooltipDirective {
             this.documentClickListener = null;
         }
     }
+    ngOnDestroy() {
+        this.isDestroyed = true;
+        this.destroyTooltip();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTooltipDirective, 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: MatchaTooltipDirective, isStandalone: false, selector: "[matchaTooltip]", inputs: { tooltipText: ["matchaTooltip", "tooltipText"], tooltipDisabled: ["matchaTooltipDisabled", "tooltipDisabled"], preferAbove: ["matchaTooltipAbove", "preferAbove"], preferBelow: ["matchaTooltipBelow", "preferBelow"], preferLeft: ["matchaTooltipLeft", "preferLeft"], preferRight: ["matchaTooltipRight", "preferRight"], tooltipEnableClose: ["matchaTooltipEnableClose", "tooltipEnableClose"] }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "click": "onClick($event)" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: MatchaTooltipDirective, isStandalone: false, selector: "[matchaTooltip]", inputs: { tooltipText: ["matchaTooltip", "tooltipText"], tooltipDisabled: ["matchaTooltipDisabled", "tooltipDisabled"], preferAbove: ["matchaTooltipAbove", "preferAbove"], preferBelow: ["matchaTooltipBelow", "preferBelow"], preferLeft: ["matchaTooltipLeft", "preferLeft"], preferRight: ["matchaTooltipRight", "preferRight"], tooltipEnableClose: ["matchaTooltipEnableClose", "tooltipEnableClose"] }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "click": "onClick($event)" }, properties: { "attr.tooltip-disabled": "this.tooltipDisabledAttr", "attr.tooltip-above": "this.preferAboveAttr", "attr.tooltip-below": "this.preferBelowAttr", "attr.tooltip-left": "this.preferLeftAttr", "attr.tooltip-right": "this.preferRightAttr", "attr.tooltip-enable-close": "this.tooltipEnableCloseAttr" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTooltipDirective, decorators: [{
             type: Directive,
@@ -9935,21 +9979,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             }], tooltipDisabled: [{
                 type: Input,
                 args: ['matchaTooltipDisabled']
+            }], tooltipDisabledAttr: [{
+                type: HostBinding,
+                args: ['attr.tooltip-disabled']
             }], preferAbove: [{
                 type: Input,
                 args: ['matchaTooltipAbove']
+            }], preferAboveAttr: [{
+                type: HostBinding,
+                args: ['attr.tooltip-above']
             }], preferBelow: [{
                 type: Input,
                 args: ['matchaTooltipBelow']
+            }], preferBelowAttr: [{
+                type: HostBinding,
+                args: ['attr.tooltip-below']
             }], preferLeft: [{
                 type: Input,
                 args: ['matchaTooltipLeft']
+            }], preferLeftAttr: [{
+                type: HostBinding,
+                args: ['attr.tooltip-left']
             }], preferRight: [{
                 type: Input,
                 args: ['matchaTooltipRight']
+            }], preferRightAttr: [{
+                type: HostBinding,
+                args: ['attr.tooltip-right']
             }], tooltipEnableClose: [{
                 type: Input,
                 args: ['matchaTooltipEnableClose']
+            }], tooltipEnableCloseAttr: [{
+                type: HostBinding,
+                args: ['attr.tooltip-enable-close']
             }], onMouseEnter: [{
                 type: HostListener,
                 args: ['mouseenter']