@dile/ui 2.21.2 → 2.21.4

package/components/select/src/DileSelectAjax.js

@@ -20,6 +20,9 @@ export class DileSelectAjax  extends DileEmmitChange(LitElement) {
         position: relative;
         margin-bottom: 10px;
       }
+      #result {
+          margin-bottom: 0.5rem;
+      }
       label {
         display: block;
         margin-bottom: var(--dile-input-label-margin-bottom, 4px);
@@ -83,11 +86,11 @@ export class DileSelectAjax  extends DileEmmitChange(LitElement) {
       displayProperty: { type: String },
       idProperty: { type: String },
       delay: { type: Number },
-      opened: { 
+      opened: {
         type: Boolean,
         state: true,
       },
-      keyword: { 
+      keyword: {
         type: String,
         state: true,
        },
@@ -102,7 +105,7 @@ export class DileSelectAjax  extends DileEmmitChange(LitElement) {
       /* When static is true there is no posibility to search, then all the options are displayed on the select on initialization */
       static: {
         type: Boolean,
-      }, 
+      },
       /** Message Displayed */
       message: { type: String },
       /** Hide errors on input */
@@ -166,9 +169,9 @@ export class DileSelectAjax  extends DileEmmitChange(LitElement) {
       .then(json => this.registerText(json))
       .catch(error => this.registerError(error));
   }
-  
+
   registerText(json) {
-    this.selectedText = json[this.resultDataProperty][this.displayProperty]; 
+    this.selectedText = json[this.resultDataProperty][this.displayProperty];
     this.loading = false;
   }
 
@@ -198,9 +201,9 @@ export class DileSelectAjax  extends DileEmmitChange(LitElement) {
 
   get selectedTemplate() {
     return html`
-      <dile-input-search 
+      <dile-input-search
         id="result"
-        ?errored=${this.errored} 
+        ?errored=${this.errored}
         ?disabled=${this.disabled}
         value="${this.selectedText}"
         readOnly
@@ -212,11 +215,11 @@ export class DileSelectAjax  extends DileEmmitChange(LitElement) {
 
   get searchTemplate() {
     return html`
-      <dile-input-search 
+      <dile-input-search
         id="search"
-        placeholder="${this.placeholder}" 
-        label="${this.label}" 
-        ?errored=${this.errored} 
+        placeholder="${this.placeholder}"
+        label="${this.label}"
+        ?errored=${this.errored}
         ?disabled=${this.disabled}
         @focus=${this.onFocus}
         @dile-input-search=${this.onTextInput}
@@ -267,8 +270,8 @@ export class DileSelectAjax  extends DileEmmitChange(LitElement) {
 
   get dataTemplate() {
     return html`
-        <dile-select 
-          id="elselect" 
+        <dile-select
+          id="elselect"
           @element-changed=${this.doSelected}
           name="generated-select-field"
           ?errored=${this.errored}
@@ -279,13 +282,13 @@ export class DileSelectAjax  extends DileEmmitChange(LitElement) {
               <option value="${item[this.idProperty]}">${item[this.displayProperty]}</option>
             `)}
           </select>
-        </dile-select> 
+        </dile-select>
     `;
   }
 
   get messageTemplate() {
     return html`
-      ${this.message 
+      ${this.message
         ? html`<div class="message ${this.errored ? 'errored-msg' : ''}"><span>${this.message}</span></div>`
         : ''
       }
@@ -312,38 +315,38 @@ export class DileSelectAjax  extends DileEmmitChange(LitElement) {
     this.loading = true;
     this.ajaxError = false;
     const url = this.computeRequestURL();
-    
+
     fetch(url)
       .then(response => response.json())
       .then(json => this.registerData(json))
       .catch(error => this.registerError(error));
   }
-  
+
   computeRequestURL() {
     const baseUrl = `${this.endpoint}?${this.queryStringVariable}=${this.keyword}`;
-    
+
     if (this.additionalQueryString && typeof this.additionalQueryString === 'object') {
       const additionalParams = Object.entries(this.additionalQueryString)
         .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
         .join('&');
-        
+
       return `${baseUrl}&${additionalParams}`;
     }
-    
+
     return baseUrl;
   }
-  
+
 
   registerError(err) {
     this.ajaxError = true;
     this.loading = false;
   }
-  
+
   registerData(json) {
     this.data = this.getResultData(json);
     this.updateComplete.then( () => this.loading = false )
   }
-  
+
   getResultData(json) {
     if (this.resultDataProperty === undefined || this.resultDataProperty === '') {
       return json;
@@ -401,12 +404,12 @@ export class DileSelectAjax  extends DileEmmitChange(LitElement) {
   }
 
   dispatchSelectedTextChanged() {
-    this.dispatchEvent(new CustomEvent('dile-select-ajax-selected-text-changed', 
-      { 
+    this.dispatchEvent(new CustomEvent('dile-select-ajax-selected-text-changed',
+      {
         bubbles: true,
         composed: true,
         detail: { selectedText: this.selectedText }
       }
     ));
   }
-}
+}

package/mixins/overlay/src/DileOverlay.js

@@ -46,6 +46,14 @@ export const DileOverlay = function(superClass) {
       this.horizontalAlign = 'under_left';
       this.verticalAlign = 'bottom';
       this.delayId = null;
+      this._rafId = null;
+      this._onScrollResize = () => {
+        if (this._rafId) return;
+        this._rafId = requestAnimationFrame(() => {
+          this._rafId = null;
+          if (this._overlayClass === 'opened') this.updatePosition();
+        });
+      };
     }
 
     firstUpdated() {
@@ -80,6 +88,7 @@ export const DileOverlay = function(superClass) {
       }));
       if(!this._opening && this._overlayClass=='opened') {
         this._overlayClass = '';
+        this._removePositionListeners();
         this.cancelDelay();
         this.delayId = setTimeout(() => {
           this.overlay.style.display = 'none'
@@ -106,64 +115,96 @@ export const DileOverlay = function(superClass) {
           this._overlayClass = 'opened'
           this._opening = false;
           this.overlay.style.display = 'block';
+          this._addPositionListeners();
         }, 50);
       }
     }
 
+    _addPositionListeners() {
+      window.addEventListener('scroll', this._onScrollResize, { passive: true, capture: true });
+      window.addEventListener('resize', this._onScrollResize, { passive: true });
+    }
+
+    _removePositionListeners() {
+      window.removeEventListener('scroll', this._onScrollResize, { capture: true });
+      window.removeEventListener('resize', this._onScrollResize);
+      if (this._rafId) {
+        cancelAnimationFrame(this._rafId);
+        this._rafId = null;
+      }
+    }
+
     updatePosition() {
-      let triggerWidth = parseInt(this.trigger.offsetWidth);
-      let triggerHeight = parseInt(this.trigger.offsetHeight);
       let moveTop = parseInt(this.moveTop);
       let moveLeft = parseInt(this.moveLeft);
-      
+
+      let triggerRect = this.trigger.getBoundingClientRect();
+
+      // Switch to fixed positioning so overflow:hidden ancestors don't clip the overlay
+      this.overlay.style.position = 'fixed';
       let lastDisplay = this.overlay.style.display;
-      this.overlay.style.top = "-1000px";
+      this.overlay.style.top = '-10000px';
+      this.overlay.style.left = '-10000px';
       this.overlay.style.display = 'block';
-      
+
       let overlayWidth = parseInt(this.overlay.offsetWidth);
       let overlayHeight = parseInt(this.overlay.offsetHeight);
-      
+
       switch(this.verticalAlign) {
         case 'top':
-          this.overlay.style.top = (0 - overlayHeight + moveTop) + 'px';
+          this.setOverlayStyleTop(triggerRect.top - overlayHeight + moveTop, triggerRect, overlayHeight, 'top');
           break;
         case 'center':
-          this.overlay.style.top = '-' + (((overlayHeight - (triggerHeight / 2)) / 2) + moveTop) + 'px';
+          this.setOverlayStyleTop(triggerRect.top - ((overlayHeight - (triggerRect.height / 2)) / 2) - moveTop, triggerRect, overlayHeight, 'center');
           break;
         default:
-          this.overlay.style.top = (triggerHeight + 10 + moveTop) + 'px';
+          this.setOverlayStyleTop(triggerRect.bottom + 10 + moveTop, triggerRect, overlayHeight, 'bottom');
       }
+
       switch(this.horizontalAlign) {
         case 'under_left':
-          this.setOverlayStyleLeft('0px');
+          this.setOverlayStyleLeft(triggerRect.left);
+          break;
+        case 'under_right':
+          this.setOverlayStyleLeft(triggerRect.right - overlayWidth);
           break;
-          case 'under_right':
-            this.setOverlayStyleLeft(`-${overlayWidth - triggerWidth}px`);
-            break;
         case 'left':
-          this.setOverlayStyleLeft('-' + (overlayWidth + moveLeft) + 'px');
+          this.setOverlayStyleLeft(triggerRect.left - overlayWidth - moveLeft);
           break;
         case 'right':
-            this.setOverlayStyleLeft((triggerWidth + moveLeft) + 'px');
+          this.setOverlayStyleLeft(triggerRect.right + moveLeft);
           break;
         default:
-            this.setOverlayStyleLeft('-' + (((overlayWidth - triggerWidth) / 2) + moveLeft) + 'px');
+          this.setOverlayStyleLeft(triggerRect.left - ((overlayWidth - triggerRect.width) / 2) - moveLeft);
       }
+
       this.overlay.style.display = lastDisplay;
     }
-    
-    setOverlayStyleLeft(pos) {
-      this.overlay.style.left = pos;
-      var rect = this.overlay.getBoundingClientRect();
-      let posLeft = parseInt(this.overlay.style.left);
-      if (rect.left < 0) {
-        this.overlay.style.left = (posLeft - rect.left + 10) + 'px';
+
+    setOverlayStyleTop(topValue, triggerRect, overlayHeight, direction) {
+      const viewportHeight = document.documentElement.clientHeight;
+      const margin = 10;
+      if (direction === 'bottom' && topValue + overlayHeight > viewportHeight - margin) {
+        const flipped = triggerRect.top - overlayHeight - margin;
+        topValue = flipped >= margin ? flipped : viewportHeight - overlayHeight - margin;
+      } else if (direction === 'top' && topValue < margin) {
+        const flipped = triggerRect.bottom + margin;
+        topValue = flipped + overlayHeight <= viewportHeight - margin ? flipped : margin;
       }
-      let pageWidth = document.querySelector('html').clientWidth;
-      if (rect.left + rect.width > pageWidth) {
-        let displacement = posLeft - (rect.right - pageWidth) - 15;  
-        this.overlay.style.left = (displacement ) + 'px';
+      if (topValue < margin) topValue = margin;
+      if (topValue + overlayHeight > viewportHeight - margin) topValue = viewportHeight - overlayHeight - margin;
+      this.overlay.style.top = topValue + 'px';
+    }
+
+    setOverlayStyleLeft(posLeft) {
+      const pageWidth = document.querySelector('html').clientWidth;
+      const overlayWidth = this.overlay.offsetWidth;
+      if (posLeft < 10) {
+        posLeft = 10;
+      } else if (posLeft + overlayWidth > pageWidth - 15) {
+        posLeft = pageWidth - overlayWidth - 15;
       }
+      this.overlay.style.left = posLeft + 'px';
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "2.21.2",
+  "version": "2.21.4",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "scripts": {
@@ -26,5 +26,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f310fdea494e5d964961f5918c1906dfb0f6b66d"
+  "gitHead": "f3d7061476125162d6d9822928d40dc15e110c6c"
 }