@aquera/nile-elements 0.0.45 → 0.0.47

package/src/nile-popover/nile-popover.ts

@@ -65,6 +65,16 @@ export class NilePopover extends LitElement {
     | 'center'
     | 'anchor' = 'anchor';
 
+
+  /**
+   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
+   * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
+   */
+  @property({ type: Boolean }) hoist = false;
+
+  @property({ type: Boolean }) flip = false;
+
+
   /* #endregion */
 
   /* #region Methods */
@@ -86,6 +96,13 @@ export class NilePopover extends LitElement {
 
   private handleClick = () => {
     this.isShow = !this.isShow;
+    const allPopovers = document.querySelectorAll('nile-popover');
+    
+    allPopovers.forEach(popover => {
+      if (popover !== this) {
+        popover.isShow=false;
+      }
+    });
   };
 
   private handleDocumentClick = () => {
@@ -103,8 +120,9 @@ export class NilePopover extends LitElement {
         placement="${this.placement}"
         @click=${(e: Event) => e.stopPropagation()}
         arrowPlacement="${this.arrowPlacement}"
-        flip
+        .flip="${this.flip}"
         shift
+        strategy=${this.hoist ? 'fixed' : 'absolute'}
       >
         <slot
           slot="anchor"
@@ -118,7 +136,7 @@ export class NilePopover extends LitElement {
               class="popover__box"
             >
               <slot name="title" class="popover__title">${this.title}</slot>
-              <slot></slot>
+              <slot part="base"></slot>
               <slot name="action" class="popover__action"> </slot>
             </div>`
           : html``}