chrv-components 1.12.227 → 1.12.230

package/fesm2022/chrv-components.mjs

@@ -4249,10 +4249,18 @@ class ChrPopoverDirective {
         }
         this.renderer.setAttribute(this.targetElement(), 'popover', 'manual');
         this.renderer.setAttribute(host, 'popovertarget', this.targetElementId());
-        this.renderer.setStyle(this.targetElement(), 'position-area', this.chrPopoverPosition());
-        this.renderer.addClass(this.targetElement(), 'card');
+        // We are temporaryly not using position-area anymore cause it doesn't work on Firefox
+        // 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');
+        this.renderer.setStyle(this.targetElement(), 'padding', 0);
+        this.renderer.setStyle(this.targetElement(), 'background', 'none');
+        this.renderer.setStyle(this.targetElement(), 'border-radius', '0.5rem');
         if (!this.chrPopoverOnHover() && !this.isNativePopoverTrigger()) {
             this.renderer.listen(this.hostElement(), 'click', () => {
                 if (this.chrPopoverIsOpen()) {
@@ -4327,16 +4335,16 @@ class ChrPopoverDirective {
         if (left + updatedTargetRect.width > viewportWidth) {
             left = viewportWidth - updatedTargetRect.width;
         }
-        // if (left < padding) {
-        //   left = padding;
-        // }
+        if (left < 0) {
+            left = 0;
+        }
         // Prevent vertical overflow
         if (top + updatedTargetRect.height > viewportHeight) {
             top = viewportHeight - updatedTargetRect.height;
         }
-        // if (top < padding) {
-        //   top = padding;
-        // }
+        if (top < 0) {
+            top = 0;
+        }
         // Apply
         this.renderer.setStyle(target, 'top', `${top}px`);
         this.renderer.setStyle(target, 'left', `${left}px`);