q2-tecton-elements 1.23.0-alpha.0 → 1.24.0

package/dist/cjs/q2-option-list_2.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-734296a7.js');
-const index$1 = require('./index-3518c78c.js');
+const index$1 = require('./index-e00b4210.js');
 
 const stylesCss$1 = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{position:relative;width:100%;display:block;line-height:var(--tct-option-list-line-height, var(--t-option-list-line-height, var(--app-line-height, 1.428571429em)))}.content{text-align:start}:host([is-sizeable]) .content{display:block;height:auto}";
 
@@ -12,57 +12,136 @@ const Q2OptionList = class {
     index.registerInstance(this, hostRef);
     this.change = index.createEvent(this, "change", 7);
     this.popoverState = index.createEvent(this, "popoverState", 7);
+    this.ready = index.createEvent(this, "ready", 3);
     this.scheduledAfterRender = [];
     /// Event Handlers ///
     /* tslint:disable:cyclomatic-complexity */
-    this.keydownHandler = (event, ignoreSelectionEvents) => {
+    this.externalKeydownHandler = (event) => {
+      event.stopPropagation();
+      const { activeIndex, customSearch, allOptions } = this;
+      const { key } = event;
+      let nextIndex;
+      switch (key) {
+        case ' ':
+          if (this.searchString) {
+            if (customSearch)
+              break;
+            this.searchOptions(key, true);
+            break;
+          }
+          this.setDefaultActiveElement();
+          break;
+        case 'Enter':
+          this.setDefaultActiveElement();
+          break;
+        case 'ArrowUp':
+          event.preventDefault();
+          this.activeIndex = 0;
+          nextIndex = !!this.selectedOptions.length ? this.getDefaultActiveIndex() : this.getNextVisibleIndex(-1);
+          if (nextIndex === -1)
+            break;
+          this.openDropdownWithActiveElement(nextIndex);
+          break;
+        case 'ArrowDown':
+          event.preventDefault();
+          this.activeIndex = 0;
+          nextIndex = !!this.selectedOptions.length ? this.getDefaultActiveIndex() : this.getNextVisibleIndex(0);
+          if (nextIndex === -1)
+            break;
+          this.openDropdownWithActiveElement(nextIndex);
+          break;
+        case 'Home':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(0);
+          break;
+        case 'End':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(allOptions.length - 1);
+          break;
+        case 'PageUp':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(Math.max((activeIndex || 0) - 10, 0));
+          break;
+        case 'PageDown':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(Math.min((activeIndex || 0) + 10, allOptions.length - 1));
+          break;
+        case 'Tab':
+          this.popoverState.emit({ open: false, action: 'close' });
+          break;
+        case 'Esc':
+        case 'Escape':
+          if (this.noSelect)
+            this.setActiveElement(null);
+          this.popoverState.emit({ open: false, action: 'close' });
+          break;
+        default:
+          if (customSearch)
+            break;
+          if (!key.match(/^[\w]$/))
+            break;
+          this.searchOptions(key, true);
+          break;
+      }
+    };
+    this.internalKeydownHandler = (event) => {
       event.stopPropagation();
       const { activeIndex, customSearch, allOptions } = this;
       const { key, shiftKey } = event;
       let newOption;
       switch (key) {
         case ' ':
-        case 'Enter':
-          if (ignoreSelectionEvents) {
-            this.setDefaultActiveElement();
+          if (this.searchString) {
+            if (customSearch)
+              break;
+            this.searchOptions(key, false);
             break;
           }
           event.preventDefault();
           newOption = allOptions.find(element => element.active);
           if (!newOption || newOption.disabled)
             break;
-          this.selectOption(newOption.value);
+          this.selectOption(newOption);
+          break;
+        case 'Enter':
+          event.preventDefault();
+          newOption = allOptions.find(element => element.active);
+          if (!newOption || newOption.disabled)
+            break;
+          this.selectOption(newOption);
           break;
         case 'ArrowUp':
           event.preventDefault();
-          const isFirstOption = activeIndex === 0;
-          if (isFirstOption)
+          const isFirstOptionActive = activeIndex === 0;
+          if (isFirstOptionActive)
             break;
           if (activeIndex === undefined) {
             this.setDefaultActiveElement();
+            break;
           }
           else {
             const nextIndex = this.getNextVisibleIndex(-1);
             if (nextIndex === -1)
               break;
             this.adjustActiveOptionAndScroll(nextIndex - activeIndex);
+            break;
           }
-          break;
         case 'ArrowDown':
           event.preventDefault();
-          const isLastOption = activeIndex === allOptions.length - 1;
-          if (isLastOption)
+          const isLastOptionActive = activeIndex === allOptions.length - 1;
+          if (isLastOptionActive)
             break;
           if (activeIndex === undefined) {
             this.setDefaultActiveElement();
+            break;
           }
           else {
             const nextIndex = this.getNextVisibleIndex(1);
             if (nextIndex === -1)
               break;
             this.adjustActiveOptionAndScroll(nextIndex - activeIndex);
+            break;
           }
-          break;
         case 'Home':
           event.preventDefault();
           this.openDropdownWithActiveElement(0);
@@ -80,28 +159,25 @@ const Q2OptionList = class {
           this.openDropdownWithActiveElement(Math.min(activeIndex + 10, allOptions.length - 1));
           break;
         case 'Tab':
-          if (ignoreSelectionEvents)
-            break;
           if (shiftKey)
             break;
           newOption = allOptions.find(element => element.active);
           if (!newOption || newOption.disabled)
             return;
-          this.selectOption(newOption.value);
+          this.selectOption(newOption);
           break;
         case 'Esc':
         case 'Escape':
           if (this.noSelect)
             this.setActiveElement(null);
-          this.popoverState.emit({ open: false });
+          this.popoverState.emit({ open: false, action: 'close' });
           break;
         default:
           if (customSearch)
             break;
-          if (!key.match(/^[A-Za-z0-9]$/))
+          if (!key.match(/^[\w]$/))
             break;
-          // search in non-searchable select: alpha-numeric only
-          this.searchAndFocus(key);
+          this.searchOptions(key, false);
           break;
       }
     };
@@ -116,19 +192,17 @@ const Q2OptionList = class {
     };
     this.clickHandler = (event) => {
       const target = event.target;
-      if (target.localName !== 'q2-option' || target.disabled) {
-        return;
-      }
-      this.selectOption(target.value);
+      const option = target.closest('q2-option');
+      this.selectOption(option);
     };
     this.role = 'listbox';
-    this.direction = 'down';
     this.customSearch = undefined;
     this.noSelect = undefined;
     this.align = undefined;
     this.selectedOptions = [];
     this.multiple = undefined;
     this.disabled = undefined;
+    this.showSelected = undefined;
     this.type = undefined;
     this.hasOptions = undefined;
   }
@@ -140,26 +214,47 @@ const Q2OptionList = class {
     index$1.overrideFocus(this.hostElement);
     this.checkOptions();
     this.selectedOptionsUpdated();
+    this.ready.emit();
   }
   componentDidRender() {
     this.scheduledAfterRender.forEach(fn => fn());
     this.scheduledAfterRender = [];
   }
   /// Getters ///
+  get allContents() {
+    const rootSlot = this.getRootSlot(this.hostElement);
+    const acceptedTags = ['Q2-OPTGROUP', 'Q2-OPTION'];
+    return rootSlot.filter(element => acceptedTags.includes(element.tagName));
+  }
   get allOptions() {
-    return this.getRootSlot(this.hostElement);
+    const contents = this.allContents;
+    const extractOptions = (elements) => {
+      return elements.reduce((acc, element) => {
+        if (element.tagName === 'Q2-OPTGROUP') {
+          return [...acc, ...extractOptions(Array.from(element.children))];
+        }
+        else if (element.tagName === 'Q2-OPTION') {
+          return [...acc, element];
+        }
+        else {
+          return acc;
+        }
+      }, []);
+    };
+    return extractOptions(contents);
+  }
+  get allVisibleOptions() {
+    return this.allOptions.filter(option => !option.hidden && !option._multiSelectHidden && !option.disabled && !option.disabledGroup);
   }
   /// Helpers ///
-  checkOptions() {
-    const { noSelect, type, allOptions } = this;
-    if (!noSelect && !type)
+  async checkOptions() {
+    const { type } = this;
+    const options = await this.getOptions();
+    if (!type)
       return;
     const optionRole = type === 'menu' ? 'menuitem' : 'option';
-    allOptions.forEach(option => {
-      if (noSelect)
-        option.noSelect = true;
-      if (type)
-        option.role = optionRole;
+    options.forEach(option => {
+      option.role = optionRole;
     });
   }
   getRootSlot(element) {
@@ -178,20 +273,15 @@ const Q2OptionList = class {
     const activeOption = this.allOptions[this.activeIndex];
     activeOption === null || activeOption === void 0 ? void 0 : activeOption.scrollIntoView({ block: 'nearest' });
   }
-  resizeIframe() {
-    var _a, _b;
-    return (_b = (_a = window.TectonElements) === null || _a === void 0 ? void 0 : _a.resizeIframe) === null || _b === void 0 ? void 0 : _b.call(_a);
-  }
   openDropdownWithActiveElement(activeIndex) {
     if (this.disabled)
       return;
     this.activeIndex = activeIndex;
-    this.popoverState.emit({ open: true });
+    this.popoverState.emit({ open: true, action: 'open' });
     this.setActiveOption();
     this.setFocusedOption();
-    this.scheduledAfterRender.push(() => {
+    index$1.nextPaint(() => {
       this.scrollToActiveOption();
-      this.resizeIframe();
     });
   }
   getDefaultActiveIndex() {
@@ -205,16 +295,16 @@ const Q2OptionList = class {
     return 0;
   }
   updateSingleOptionAttrs() {
-    var _a, _b;
+    var _a;
     const { allOptions, selectedOptions } = this;
-    const singleValue = (_b = (_a = selectedOptions[0]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : undefined;
+    const selectedValue = ((_a = selectedOptions[0]) === null || _a === void 0 ? void 0 : _a.value) || undefined;
     allOptions.forEach(element => {
-      element.selected = element.value === singleValue;
+      element.selected = element.value === selectedValue;
     });
   }
   updateMultipleOptionAttrs() {
     const { allOptions, selectedOptions } = this;
-    const selectedValues = selectedOptions.map(option => option.value);
+    const selectedValues = selectedOptions.map(({ value }) => value);
     allOptions.forEach(element => {
       element.selected = selectedValues.includes(element.value);
     });
@@ -229,38 +319,66 @@ const Q2OptionList = class {
     const option = this.allOptions[this.activeIndex];
     if (!option)
       return;
-    setTimeout(() => {
+    const isHostElementVisible = !!this.hostElement.offsetParent;
+    if (isHostElementVisible)
       option.focus();
-    }, 25);
+    else
+      index$1.nextPaint(() => option.focus());
   }
   getNextVisibleIndex(direction) {
-    let index = this.activeIndex + direction;
-    while (index >= 0 && index <= this.allOptions.length - 1) {
-      const { display, visibility } = window.getComputedStyle(this.allOptions[index]);
-      if (display !== 'none' && visibility !== 'hidden') {
-        return index;
-      }
-      index = index + direction;
+    const { allVisibleOptions, allOptions, activeIndex } = this;
+    const activeOption = allOptions[activeIndex];
+    const visibleActiveOptionIndex = allVisibleOptions.indexOf(activeOption);
+    let nextVisibleOptionIndex = visibleActiveOptionIndex + direction;
+    if (nextVisibleOptionIndex < 0) {
+      nextVisibleOptionIndex = allVisibleOptions.length - 1;
     }
-    return -1;
+    else if (nextVisibleOptionIndex > allVisibleOptions.length - 1) {
+      nextVisibleOptionIndex = 0;
+    }
+    const nextVisibleOption = allVisibleOptions[nextVisibleOptionIndex];
+    return allOptions.indexOf(nextVisibleOption);
+  }
+  focusSelectedSibling(option) {
+    const { allVisibleOptions, allOptions } = this;
+    const hasNoSiblings = allVisibleOptions.length < 2;
+    if (hasNoSiblings) {
+      this.showSelected = false;
+      return;
+    }
+    const selectedOptionVisibleIndex = allVisibleOptions.indexOf(option);
+    const nextVisibleSiblingIndex = selectedOptionVisibleIndex
+      ? selectedOptionVisibleIndex - 1
+      : selectedOptionVisibleIndex + 1;
+    const nextVisibleSibling = allVisibleOptions[nextVisibleSiblingIndex];
+    const nextSiblingIndex = allOptions.indexOf(nextVisibleSibling);
+    this.activeIndex = nextSiblingIndex;
+    this.setFocusedOption();
+    this.scheduledAfterRender.push(() => {
+      option._multiSelectHidden = !option.selected;
+    });
   }
-  selectOption(selectedValue) {
-    const option = this.allOptions.find(({ value }) => value === selectedValue);
+  selectOption(selectedOption) {
+    const { multiple, noSelect, showSelected } = this;
+    if (!selectedOption || selectedOption.disabled || selectedOption.disabledGroup)
+      return;
+    const selectedValue = selectedOption.value;
     const valueObject = {
       value: selectedValue,
-      display: option.display || option.innerText.trim(),
+      display: selectedOption.display || selectedOption.innerText.trim(),
     };
-    const { multiple, noSelect } = this;
-    let values;
+    let values = [];
     if (multiple) {
-      const { selectedOptions = [] } = this;
-      const isAlreadySelected = !!selectedOptions.find(({ value }) => value === selectedValue);
+      const { selectedOptions } = this;
+      const isAlreadySelected = selectedOptions.find(option => option.value === selectedValue);
       if (isAlreadySelected) {
         values = selectedOptions.filter(({ value }) => value !== selectedValue);
       }
       else {
         values = [...selectedOptions, valueObject];
       }
+      if (showSelected)
+        this.focusSelectedSibling(selectedOption);
     }
     else {
       values = [valueObject];
@@ -272,7 +390,7 @@ const Q2OptionList = class {
     this.change.emit({ value: selectedValue, values });
     if (multiple)
       return;
-    this.popoverState.emit({ open: false });
+    this.popoverState.emit({ open: false, action: 'select' });
   }
   adjustActiveOptionAndScroll(numToAdd) {
     this.activeIndex += numToAdd;
@@ -288,18 +406,29 @@ const Q2OptionList = class {
       this.searchString = null;
     }, 2000);
   }
-  searchAndFocus(key) {
+  searchOptions(key, shouldSelect) {
     this.resetTimer();
     let searchString = this.searchString ? `${this.searchString}${key}` : key;
-    searchString = searchString.replace(/[^0-9a-z]/gi, '');
+    searchString = searchString.replace(/[^\w\s]/gi, '');
     this.searchString = searchString;
-    const searchRegEx = new RegExp(searchString, 'i');
-    const foundIndex = this.allOptions.findIndex(option => option.value === searchString || option.textContent.match(searchRegEx));
+    const searchRegEx = new RegExp(`^${searchString}`, 'i');
+    const { allOptions } = this;
+    const foundIndex = allOptions.findIndex(option => option.value === searchString || option.textContent.trim().match(searchRegEx));
     if (foundIndex === -1)
       return;
-    this.setActiveElement(foundIndex);
+    if (shouldSelect)
+      this.selectOption(this.allOptions[foundIndex]);
+    else
+      this.setActiveElement(foundIndex);
   }
   /// Watchers ///
+  showSelectedUpdated(showSelected) {
+    if (showSelected && this.selectedOptions.length === 0) {
+      this.showSelected = false;
+      return;
+    }
+    this.allOptions.forEach(option => (option._multiSelectHidden = showSelected ? !option.selected : false));
+  }
   selectedOptionsUpdated() {
     if (this.multiple) {
       this.updateMultipleOptionAttrs();
@@ -312,8 +441,15 @@ const Q2OptionList = class {
   delegateFocus(event) {
     if (!index$1.isEventFromElement(event, this.hostElement))
       return;
-    this.popoverState.emit({ open: true });
-    this.setDefaultActiveElement();
+    this.popoverState.emit({ open: true, action: 'open' });
+    const { activeIndex } = this;
+    if (typeof activeIndex === 'number' && activeIndex > -1) {
+      this.setActiveOption();
+      this.setFocusedOption();
+    }
+    else {
+      this.setDefaultActiveElement();
+    }
   }
   handleClick(event) {
     event.stopPropagation();
@@ -330,43 +466,40 @@ const Q2OptionList = class {
     this.setFocusedOption();
   }
   async handleExternalKeydown(event) {
-    const keysThatTriggerOpen = ['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp', 'Home', 'End'];
-    if (keysThatTriggerOpen.includes(event.key)) {
-      this.popoverState.emit({ open: true });
-    }
-    const keysThatTriggerDefault = ['ArrowDown', 'ArrowUp'];
-    if (keysThatTriggerDefault.includes(event.key)) {
-      event.preventDefault();
-      this.setDefaultActiveElement();
-    }
-    else {
-      this.keydownHandler(event, true);
-    }
+    this.externalKeydownHandler(event);
+  }
+  async getContents() {
+    return this.allContents;
+  }
+  async getOptions() {
+    return this.allOptions;
   }
   /// DOM ///
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, index.h("div", { class: "options", role: this.type || 'listbox', onKeyDown: this.keydownHandler, onClick: this.clickHandler }, index.h("slot", null)))));
+    return (index.h(index.Host, null, index.h("div", { class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, index.h("div", { class: "options", role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, index.h("slot", null)))));
   }
   get hostElement() { return index.getElement(this); }
   static get watchers() { return {
+    "showSelected": ["showSelectedUpdated"],
     "selectedOptions": ["selectedOptionsUpdated"]
   }; }
 };
 Q2OptionList.style = stylesCss$1;
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-flex;width:100%}.container{display:block;overflow:hidden;opacity:0;height:0;position:absolute;visibility:hidden;background-color:var(--tct-popover-background-color, var(--t-popover-background-color, var(--app-white, #ffffff)));color:var(--tct-popover-text-color, var(--t-popover-text-color, var(--t-text, #4d4d4d)));z-index:var(--tct-popover-z-index, var(--t-popover-z-index, 100));width:max-content;min-width:var(--tct-popover-min-width, var(--t-popover-min-width, 135px));box-shadow:var(--tct-popover-box-shadow, var(--t-popover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))));text-align:start;left:0;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-popover-border-radius, var(--t-popover-border-radius, 0));max-height:var(--comp-pop-max-height);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.container::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.container::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.container::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}:host([block]) .container{left:unset;right:unset;width:100%}:host([align=right]) .container{right:0;text-align:end;left:unset}:host([open]) .container{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}.container.up{bottom:var(--comp-pop-offset)}click-elsewhere{position:relative;display:block}.content{height:auto}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;width:100%}:host([align=right]){display:block;position:absolute;right:0;text-align:end;left:unset}.container{display:none;overflow:hidden;opacity:0;height:0;position:absolute;top:var(--tct-popover-top, var(--t-popover-top, initial));visibility:hidden;background-color:var(--tct-popover-background-color, var(--t-popover-background-color, var(--app-white, #ffffff)));color:var(--tct-popover-text-color, var(--t-popover-text-color, var(--t-text, #4d4d4d)));z-index:var(--tct-popover-z-index, var(--t-popover-z-index, 100));width:max-content;min-width:var(--tct-popover-min-width, var(--t-popover-min-width, 135px));box-shadow:var(--tct-popover-box-shadow, var(--t-popover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))));text-align:start;left:0;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-popover-border-radius, var(--t-popover-border-radius, 0));max-height:var(--comp-pop-max-height);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.container::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.container::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.container::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}:host([block]) .container{left:unset;right:unset;width:100%;min-width:unset}:host([align=right]) .container{right:0;text-align:end;left:unset}:host([open]) .container{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}.container.up{bottom:var(--comp-pop-offset)}click-elsewhere{position:relative;display:block}.content{height:auto}";
 
 const Q2Popover = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.popoverStateChanged = index.createEvent(this, "popoverStateChanged", 7);
-    this.privateDirection = 'down';
+    this.scheduledAfterRender = [];
     this.direction = undefined;
     this.align = undefined;
     this.open = undefined;
     this.block = undefined;
     this.minHeight = undefined;
     this.controlElement = undefined;
+    this.privateDirection = 'down';
   }
   /// Lifecycle hooks ///
   componentDidLoad() {
@@ -374,8 +507,14 @@ const Q2Popover = class {
       this.determinePopDirection();
   }
   componentWillRender() {
-    if (this.containerElement && this.containerElement && this.open)
-      this.determinePopDirection();
+    if (this.containerElement && this.open)
+      index$1.nextPaint(() => this.determinePopDirection());
+  }
+  componentDidRender() {
+    setTimeout(() => {
+      this.scheduledAfterRender.forEach(fn => fn());
+      this.scheduledAfterRender = [];
+    }, 25);
   }
   /// Methods ///
   async toggle() {
@@ -384,6 +523,7 @@ const Q2Popover = class {
   /// Watchers ///
   openChanged(open) {
     this.popoverStateChanged.emit({ open });
+    this.scheduledAfterRender.push(index$1.resizeIframe);
   }
   /// Listeners ///
   popoverStateHandler(event) {
@@ -395,7 +535,7 @@ const Q2Popover = class {
   }
   /// Helpers ///
   determinePopDirection() {
-    var _a;
+    var _a, _b, _c, _d, _e;
     const { containerElement, contentElement, direction, controlElement } = this;
     if (containerElement)
       containerElement.style.maxHeight = null;
@@ -407,7 +547,9 @@ const Q2Popover = class {
       top: 0,
       height: 0,
     };
-    const bottomOffset = window.innerHeight - topOffset - height;
+    const scrollY = ((_c = (_b = window.Tecton) === null || _b === void 0 ? void 0 : _b.platformDimensions) === null || _c === void 0 ? void 0 : _c.scrollY) || 0;
+    const innerHeight = ((_e = (_d = window.Tecton) === null || _d === void 0 ? void 0 : _d.platformDimensions) === null || _e === void 0 ? void 0 : _e.innerHeight) || window.innerHeight;
+    const bottomOffset = scrollY + innerHeight - topOffset - height;
     const canShowFullSizeBelow = bottomOffset > contentHeight;
     const canShowFullSizeAbove = contentHeight <= topOffset;
     // Prefer full size above or below

package/dist/cjs/q2-pagination.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-734296a7.js');
-const index$1 = require('./index-3518c78c.js');
+const index$1 = require('./index-e00b4210.js');
 
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{text-align:right;display:block}:host([hidden]){display:none}.container{display:inline-flex;column-gap:var(--tct-pagination-column-gap, var(--t-pagination-column-gap, var(--app-scale-2x, 10px)));align-items:center;height:var(--tct-pagination-height, var(--t-pagination-height, 44px))}.btn-group{display:flex;gap:var(--tct-pagination-btn-gap, var(--t-pagination-btn-gap, 0))}.description,.controls{white-space:nowrap}.controls{display:grid;grid-template-columns:auto 50px auto;align-items:center;gap:var(--tct-pagination-controls-gap, var(--t-pagination-controls-gap, var(--app-scale-1x, 5px)))}.controls[hidden]{display:none}.input-wrapper{height:var(--tct-pagination-height, var(--t-pagination-height, 44px));display:flex;align-items:center}q2-icon{--tct-icon-size:var(--tct-pagination-icon-size, var(--t-pagination-icon-size, 12px));color:var(--tct-pagination-icon-color, var(--t-pagination-icon-color, var(--t-text, #4d4d4d)))}q2-input{--tct-input-margin-top:0;--tct-input-margin-bottom:0;--tct-input-height:var(--tct-pagination-input-height, var(--t-pagination-input-height, 30px));--tct-input-min-height:var(--tct-input-height);--tct-input-align:center}";