chrv-components 1.12.220 → 1.12.221

package/fesm2022/chrv-components.mjs

@@ -4214,22 +4214,49 @@ class ChrPopoverDirective {
             throw "A string matching the target element's [id] attribute must be set";
         if (!this.targetElement())
             throw "Could not find target element. Check that it's [id] attribute is set with the proper value";
-        if (!this.hostElement)
+        if (!this.hostElement())
             throw 'Could not get a reference to the host element';
+        const host = this.hostElement();
         if (this.chrPopoverOnHover()) {
             this.setupSubject();
             this.setupHostListeners();
             this.setupTargetListeners();
         }
         this.renderer.setAttribute(this.targetElement(), 'popover', 'manual');
-        this.renderer.setAttribute(this.hostElement(), 'popovertarget', this.targetElementId());
+        this.renderer.setAttribute(host, 'popovertarget', this.targetElementId());
         this.renderer.setStyle(this.targetElement(), 'position-area', this.chrPopoverPosition());
         this.renderer.addClass(this.targetElement(), 'card');
         this.renderer.addClass(this.targetElement(), 'glass');
         this.renderer.setStyle(this.targetElement(), 'border', 'none');
+        const isNativePopoverTrigger = host instanceof HTMLButtonElement ||
+            (host instanceof HTMLInputElement && host.type === 'button');
+        if (!this.chrPopoverOnHover() && !isNativePopoverTrigger) {
+            this.renderer.listen(this.hostElement(), 'click', () => {
+                if (this.isOpen()) {
+                    this.hidePopover();
+                }
+                else {
+                    this.showPopover();
+                }
+            });
+        }
+    }
+    onOutsideClick(event) {
+        const isOpen = this.isOpen();
+        if (!isOpen)
+            return;
+        const targetElement = this.targetElement();
+        const hostElement = this.hostElement();
+        const clickedNode = event.target;
+        if (targetElement &&
+            !targetElement.contains(clickedNode) &&
+            hostElement &&
+            !hostElement.contains(clickedNode)) {
+            this.hidePopover();
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrPopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: ChrPopoverDirective, isStandalone: true, selector: "[chrPopover]", inputs: { chrPopover: { classPropertyName: "chrPopover", publicName: "chrPopover", isSignal: true, isRequired: true, transformFunction: null }, chrPopoverPosition: { classPropertyName: "chrPopoverPosition", publicName: "chrPopoverPosition", isSignal: true, isRequired: false, transformFunction: null }, chrPopoverData: { classPropertyName: "chrPopoverData", publicName: "chrPopoverData", isSignal: true, isRequired: false, transformFunction: null }, chrPopoverOnHover: { classPropertyName: "chrPopoverOnHover", publicName: "chrPopoverOnHover", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keyup.escape": "hidePopover()", "document:mousemove": "updateLastKnownMousePosition($event)" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: ChrPopoverDirective, isStandalone: true, selector: "[chrPopover]", inputs: { chrPopover: { classPropertyName: "chrPopover", publicName: "chrPopover", isSignal: true, isRequired: true, transformFunction: null }, chrPopoverPosition: { classPropertyName: "chrPopoverPosition", publicName: "chrPopoverPosition", isSignal: true, isRequired: false, transformFunction: null }, chrPopoverData: { classPropertyName: "chrPopoverData", publicName: "chrPopoverData", isSignal: true, isRequired: false, transformFunction: null }, chrPopoverOnHover: { classPropertyName: "chrPopoverOnHover", publicName: "chrPopoverOnHover", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keyup.escape": "hidePopover()", "document:mousemove": "updateLastKnownMousePosition($event)", "document:click": "onOutsideClick($event)" }, properties: { "style.cursor": "'pointer'", "attr.role": "'button'" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrPopoverDirective, decorators: [{
             type: Directive,
@@ -4238,6 +4265,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     host: {
                         '(keyup.escape)': 'hidePopover()',
                         '(document:mousemove)': 'updateLastKnownMousePosition($event)',
+                        '[style.cursor]': "'pointer'",
+                        '[attr.role]': "'button'",
+                        '(document:click)': 'onOutsideClick($event)',
                     },
                 }]
         }], propDecorators: { chrPopover: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrPopover", required: true }] }], chrPopoverPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrPopoverPosition", required: false }] }], chrPopoverData: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrPopoverData", required: false }] }], chrPopoverOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrPopoverOnHover", required: false }] }] } });