q2-tecton-elements 1.27.1 → 1.28.0

package/dist/collection/components/q2-dropdown/index.js

@@ -1,44 +1,39 @@
 import { h, Fragment } from '@stencil/core';
-import { handleAriaLabel, isEventFromElement, loc, overrideFocus, setPopProperties } from 'src/utils';
+import { handleAriaLabel, handleRenamedProp, isEventFromElement, loc, overrideFocus } from 'src/utils';
 export class Q2Dropdown {
   constructor() {
-    this.scheduledAfterRender = [];
     this.dropdownItemSelector = 'q2-dropdown-item:not([disabled]):not([separator])';
     ///// Actions ////////
     this.focusToggle = () => {
-      const toggleBtn = this.hostElement.shadowRoot.querySelector('.dropdown-button');
-      toggleBtn && toggleBtn.dispatchEvent(new FocusEvent('focus'));
+      this.controlElement.shadowRoot.querySelector('button').focus();
     };
     this.openDropdown = () => {
-      setPopProperties(this);
-      if (!this.dropdownOpen) {
-        this.dropdownOpen = true;
-        this.scheduledAfterRender.push(this.resizeIframe);
-      }
+      if (this.open)
+        return;
+      this.open = true;
     };
     this.closeDropdown = () => {
-      if (this.dropdownOpen) {
-        this.dropdownOpen = false;
-        this.scheduledAfterRender.push(() => {
-          this.resizeIframe();
-        });
-      }
+      if (!this.open)
+        return;
+      this.open = false;
     };
     this.onClickElsewhere = (event) => {
       const target = event.target;
       if (target.localName === 'click-elsewhere') {
         event.stopPropagation();
-        this.closeDropdown();
+        const { popoverElement } = this;
+        if (!popoverElement)
+          return;
+        popoverElement.open = false;
       }
     };
     this.onToggleClick = () => {
-      if (this.dropdownOpen) {
-        this.focusToggle();
+      if (this.open) {
         this.closeDropdown();
-        return;
       }
-      this.focusToggle();
-      this.openDropdown();
+      else {
+        this.openDropdown();
+      }
     };
     this.onToggleKeydown = (event) => {
       if (['ArrowUp', 'Up'].includes(event.key)) {
@@ -96,18 +91,17 @@ export class Q2Dropdown {
     this.label = undefined;
     this.hideLabel = undefined;
     this.disabled = undefined;
-    this.popDirection = undefined;
     this.alignment = 'left';
     this.name = undefined;
     this.context = undefined;
     this.contextValue = undefined;
     this.resolvedType = undefined;
     this.block = undefined;
+    this.open = undefined;
+    this.popoverMinHeight = 150;
+    this.popoverDirection = undefined;
+    this.popDirection = undefined;
     this.ariaLabel = undefined;
-    this.dropdownOpen = false;
-  }
-  resizeIframe() {
-    return window.TectonElements && window.TectonElements.resizeIframe && window.TectonElements.resizeIframe();
   }
   resolveMenu() {
     return (this.name &&
@@ -163,10 +157,12 @@ export class Q2Dropdown {
     });
   }
   navigateTo(featureName, moduleName, queryParams) {
-    return window.TectonElements && window.TectonElements.navigateTo(featureName, moduleName, queryParams);
+    var _a, _b;
+    return (_b = (_a = window.TectonElements) === null || _a === void 0 ? void 0 : _a.navigateTo) === null || _b === void 0 ? void 0 : _b.call(_a, featureName, moduleName, queryParams);
   }
   showOverpanel(overpanelPath, params) {
-    return window.TectonElements && window.TectonElements.showOverpanel(overpanelPath, params, undefined, true);
+    var _a, _b;
+    return (_b = (_a = window.TectonElements) === null || _a === void 0 ? void 0 : _a.showOverpanel) === null || _b === void 0 ? void 0 : _b.call(_a, overpanelPath, params, undefined, true);
   }
   get hasCustomButton() {
     return !!this.hostElement.querySelector('[slot=custom-dropdown-button]');
@@ -182,10 +178,10 @@ export class Q2Dropdown {
     if (allowedIntents.includes(type)) {
       intent = type === 'neutral' ? type : `workflow-${type}`;
     }
-    const active = this.dropdownOpen;
+    const active = this.open;
     const disabled = !!this.disabled;
-    const ariaExpanded = this.dropdownOpen;
-    const className = `dropdown-button${!icon && !fab && !intent ? ' unstyled' : ''}`;
+    const ariaExpanded = this.open;
+    const className = !icon && !fab && !intent ? 'unstyled' : '';
     return {
       icon,
       fab,
@@ -198,7 +194,10 @@ export class Q2Dropdown {
     };
   }
   //////// Observers //////////
-  ariaLabelObserver() {
+  popDirectionHandler() {
+    handleRenamedProp(this, 'popDirection', 'popoverDirection');
+  }
+  ariaLabelHandler() {
     handleAriaLabel(this);
   }
   nameHandler() {
@@ -216,29 +215,28 @@ export class Q2Dropdown {
   delegateFocus(event) {
     if (!isEventFromElement(event, this.hostElement))
       return;
-    this.controlElement.shadowRoot.querySelector('button').focus();
+    this.focusToggle();
+  }
+  popoverStateHandler({ detail: { open } }) {
+    if (this.open !== open)
+      this.open = open;
   }
   ///// Lifecycle Hooks ////////
   componentWillLoad() {
-    handleAriaLabel(this);
+    this.popDirectionHandler();
+    this.ariaLabelHandler();
   }
   componentDidLoad() {
     this.orchestrateResolvedMenuItems();
     overrideFocus(this.hostElement);
   }
-  componentDidRender() {
-    setTimeout(() => {
-      this.scheduledAfterRender.forEach(fn => fn());
-      this.scheduledAfterRender = [];
-    }, 25);
-  }
   focusFirstItem() {
     const firstItem = this.hostElement.querySelector(`${this.dropdownItemSelector}:first-child`);
-    firstItem && firstItem.dispatchEvent(new FocusEvent('focus'));
+    firstItem === null || firstItem === void 0 ? void 0 : firstItem.dispatchEvent(new FocusEvent('focus'));
   }
   focusLastItem() {
     const lastItem = this.hostElement.querySelector(`${this.dropdownItemSelector}:last-child`);
-    lastItem && lastItem.dispatchEvent(new FocusEvent('focus'));
+    lastItem === null || lastItem === void 0 ? void 0 : lastItem.dispatchEvent(new FocusEvent('focus'));
   }
   focusAdjacentItem(activeItem, direction) {
     const dropdownItems = Array.from(this.hostElement.querySelectorAll(this.dropdownItemSelector));
@@ -263,7 +261,7 @@ export class Q2Dropdown {
   }
   render() {
     const btnProps = this.toggleButtonProps;
-    return (h("click-elsewhere", { class: `dropdown-container${this.dropdownOpen ? ' dropdown-open' : ''}`, onChange: this.onClickElsewhere, "test-id": "dropdownContainer" }, h("q2-btn", { ref: el => (this.controlElement = el), class: btnProps.className, onClick: this.onToggleClick, onKeyDown: this.onToggleKeydown, fab: btnProps.fab, intent: btnProps.intent, active: btnProps.active, disabled: btnProps.disabled, ariaExpanded: `${!!btnProps.ariaExpanded}`, label: this.hideLabel && this.label ? loc(this.label) : undefined, hideLabel: this.hideLabel, ariaHasPopup: "menu", "test-id": "dropdownButton", block: this.block }, this.hasCustomButton ? (h("div", { "test-id": "dropdownCustom", class: btnProps.custom ? '' : 'hidden' }, h("slot", { name: "custom-dropdown-button" }))) : (h(Fragment, null, this.icon ? h("q2-icon", { type: this.icon }) : ' ', this.label && !this.hideLabel && (h("span", { class: "dropdown-button-text" }, loc(this.label)))))), h("div", { ref: el => (this.dropdownContainer = el), class: `q2-element-dropdown ${this.privatePopDirection === 'up' ? 'dropup' : ''}`, role: "menu", onClick: this.onDropdownMenuClick, onKeyDown: this.onDropdownMenuKeydown }, h("div", null, h("slot", null), this.dropdownOpen && (h("q2-btn", { class: "sr close-dropdown", onFocus: this.closeDropdown }))))));
+    return (h("click-elsewhere", { class: this.open ? 'dropdown-open' : '', onChange: this.onClickElsewhere, "test-id": "dropdownContainer" }, h("q2-btn", { ref: el => (this.controlElement = el), class: btnProps.className, onClick: this.onToggleClick, onKeyDown: this.onToggleKeydown, fab: btnProps.fab, intent: btnProps.intent, active: btnProps.active, disabled: btnProps.disabled, ariaExpanded: `${!!btnProps.ariaExpanded}`, label: this.hideLabel && this.label ? loc(this.label) : undefined, hideLabel: this.hideLabel, ariaHasPopup: "menu", "test-id": "dropdownButton", block: this.block }, this.hasCustomButton ? (h("div", { "test-id": "dropdownCustom", class: btnProps.custom ? '' : 'hidden' }, h("slot", { name: "custom-dropdown-button" }))) : (h(Fragment, null, this.icon ? h("q2-icon", { type: this.icon }) : ' ', this.label && !this.hideLabel && (h("span", { class: "dropdown-button-text" }, loc(this.label)))))), h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.controlElement, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.alignment }, h("div", { onClick: this.onDropdownMenuClick, onKeyDown: this.onDropdownMenuKeydown }, h("slot", null), this.open && (h("q2-btn", { class: "sr close-dropdown", onFocus: this.closeDropdown }))))));
   }
   static get is() { return "q2-dropdown"; }
   static get encapsulation() { return "shadow"; }
@@ -365,23 +363,6 @@ export class Q2Dropdown {
         "attribute": "disabled",
         "reflect": true
       },
-      "popDirection": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'up' | 'down'",
-          "resolved": "\"down\" | \"up\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "pop-direction",
-        "reflect": true
-      },
       "alignment": {
         "type": "string",
         "mutable": false,
@@ -485,6 +466,78 @@ export class Q2Dropdown {
         "attribute": "block",
         "reflect": true
       },
+      "open": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "open",
+        "reflect": true
+      },
+      "popoverMinHeight": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "popover-min-height",
+        "reflect": false,
+        "defaultValue": "150"
+      },
+      "popoverDirection": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "'up' | 'down'",
+          "resolved": "\"down\" | \"up\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "popover-direction",
+        "reflect": false
+      },
+      "popDirection": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'up' | 'down'",
+          "resolved": "\"down\" | \"up\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "attribute": "pop-direction",
+        "reflect": true
+      },
       "ariaLabel": {
         "type": "string",
         "mutable": true,
@@ -507,16 +560,14 @@ export class Q2Dropdown {
       }
     };
   }
-  static get states() {
-    return {
-      "dropdownOpen": {}
-    };
-  }
   static get elementRef() { return "hostElement"; }
   static get watchers() {
     return [{
+        "propName": "popDirection",
+        "methodName": "popDirectionHandler"
+      }, {
         "propName": "ariaLabel",
-        "methodName": "ariaLabelObserver"
+        "methodName": "ariaLabelHandler"
       }, {
         "propName": "name",
         "methodName": "nameHandler"
@@ -538,6 +589,12 @@ export class Q2Dropdown {
         "target": undefined,
         "capture": false,
         "passive": false
+      }, {
+        "name": "popoverStateChanged",
+        "method": "popoverStateHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
       }];
   }
 }

package/dist/collection/components/q2-dropdown/styles.css

@@ -65,101 +65,15 @@ button {
   visibility: hidden;
 }
 
-.q2-element-dropdown {
-  display: none;
-  position: absolute;
-  background-color: var(--app-white, #ffffff);
-  color: var(--t-text, #4d4d4d);
-  left: 0;
-  width: 100%;
-  z-index: 100;
-  margin-top: 1px;
-  box-shadow: var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3));
-  height: 0;
-  overflow: hidden;
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity var(--app-tween-1, 0.2s ease);
-  border-radius: var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);
-  --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;
-}
-.q2-element-dropdown::-webkit-scrollbar {
-  width: var(--comp-scrollbar-size);
-  height: var(--comp-scrollbar-size);
-  margin: 5px;
-}
-.q2-element-dropdown::-webkit-scrollbar-thumb {
-  background: var(--comp-scrollbar-color);
-  border-radius: var(--comp-scrollbar-border-radius);
-}
-.q2-element-dropdown::-webkit-scrollbar-track {
-  background: transparent;
-  border-radius: var(--comp-scrollbar-border-radius);
-}
-
-.q2-element-dropdown.sizable {
-  display: block;
-  height: auto;
-}
-
-.dropdown-open .q2-element-dropdown {
-  display: block;
-  height: auto;
-  overflow: auto;
-  opacity: 1;
-  visibility: visible;
-}
-
-:host([alignment=right]) .q2-element-dropdown {
-  left: auto;
-  right: 0;
-}
-
-:host([block]) q2-btn,
-:host([block]) {
-  display: block;
-}
-
 :host {
   display: inline-flex;
 }
 
-.dropdown-container {
+click-elsewhere {
   position: relative;
   display: block;
 }
 
-.dropdown-button-content {
-  display: flex;
-  align-items: center;
-}
-
-.dropdown-button.unstyled .dropdown-button-content {
-  padding: var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px));
-}
-
-.q2-element-dropdown {
-  width: var(--tct-dropdown-width, var(--t-dropdown-width, 175px));
-}
-
-.q2-element-dropdown.dropup {
-  bottom: var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px));
-}
-
-q2-btn[color=primary] ~ .q2-element-dropdown.dropup,
-q2-btn[intent=workflow-primary] ~ .q2-element-dropdown.dropup {
-  bottom: calc(var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px)) + var(--tct-btn-primary-border-width, var(--t-btn-primary-border-width, 0)));
-}
-
-q2-btn[color=secondary] ~ .q2-element-dropdown.dropup,
-q2-btn[intent=workflow-secondary] ~ .q2-element-dropdown.dropup {
-  bottom: calc(var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px)) + var(--tct-btn-secondary-border-width, var(--t-btn-secondary-border-width, 0)));
-}
-
-q2-btn[intent=neutral] ~ .q2-element-dropdown.dropup {
-  bottom: calc(var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px)) + var(--tct-btn-neutral-border-width, var(--t-btn-neutral-border-width, 0)));
+q2-popover {
+  --tct-popover-min-width: var(--tct-dropdown-width, var(--t-dropdown-width));
 }

package/dist/collection/components/q2-select/index.js

@@ -361,11 +361,16 @@ export class Q2Select {
   }
   calculateSingleSelectSelectedDisplay() {
     var _a;
-    const { firstSelectedOptionElement } = this;
-    return (((firstSelectedOptionElement === null || firstSelectedOptionElement === void 0 ? void 0 : firstSelectedOptionElement.display) && loc(firstSelectedOptionElement.display)) ||
-      ((_a = firstSelectedOptionElement === null || firstSelectedOptionElement === void 0 ? void 0 : firstSelectedOptionElement.textContent) === null || _a === void 0 ? void 0 : _a.trim()) ||
-      this.value ||
-      '');
+    const { firstSelectedOptionElement, multilineOptions } = this;
+    if (multilineOptions) {
+      return ((firstSelectedOptionElement === null || firstSelectedOptionElement === void 0 ? void 0 : firstSelectedOptionElement.display) && loc(firstSelectedOptionElement.display)) || this.value || '';
+    }
+    else {
+      return (((firstSelectedOptionElement === null || firstSelectedOptionElement === void 0 ? void 0 : firstSelectedOptionElement.display) && loc(firstSelectedOptionElement.display)) ||
+        ((_a = firstSelectedOptionElement === null || firstSelectedOptionElement === void 0 ? void 0 : firstSelectedOptionElement.textContent) === null || _a === void 0 ? void 0 : _a.trim()) ||
+        this.value ||
+        '');
+    }
   }
   openDropdownWithoutActiveElement() {
     if (this.readonly || this.disabled)

package/dist/collection/utils/index.js

@@ -102,6 +102,17 @@ export function handleAriaLabel(target) {
   target.label = loc(ariaLabel);
   target.ariaLabel = undefined;
 }
+/**
+ * Handles when a prop has been renamed on a component without introducing a breaking change.
+ */
+export function handleRenamedProp(target, oldProp, newProp, removeOldProp) {
+  if (typeof target[oldProp] === 'undefined')
+    return;
+  target[newProp] = target[oldProp];
+  if (removeOldProp) {
+    delete target[oldProp];
+  }
+}
 export function messagesDOM(target) {
   const type = target.hasError ? 'danger' : 'info';
   return (h("div", { class: "messages-container" }, h("q2-message", { appearance: "minimal", description: true, type: type, "test-id": "message" }, h("ul", { id: target.inputDescribedBy }, target.messages.map(message => (h("li", { "test-id": "messageListItem" }, loc(message))))))));
@@ -123,57 +134,6 @@ export function setMessageHeight(target) {
     }
   });
 }
-export function setPopProperties(target) {
-  var _a, _b, _c, _d;
-  const { dropdownContainer, popDirection } = target;
-  if (dropdownContainer) {
-    dropdownContainer.style.maxHeight = null;
-  }
-  if (popDirection) {
-    return (target.privatePopDirection = popDirection);
-  }
-  const controlElement = target.inputField || target.controlElement;
-  const minPopHeight = target.minPopHeight || null;
-  // Add sizable so that we can capture the height
-  dropdownContainer.classList.add('sizable');
-  const dropdownHeight = dropdownContainer.getBoundingClientRect().height;
-  dropdownContainer.classList.remove('sizable');
-  const { top: topOffset, height } = controlElement.getBoundingClientRect();
-  const scrollY = ((_b = (_a = window.Tecton) === null || _a === void 0 ? void 0 : _a.platformDimensions) === null || _b === void 0 ? void 0 : _b.scrollY) || 0;
-  const innerHeight = ((_d = (_c = window.Tecton) === null || _c === void 0 ? void 0 : _c.platformDimensions) === null || _d === void 0 ? void 0 : _d.innerHeight) || window.innerHeight;
-  const bottomOffset = scrollY + innerHeight - topOffset - height;
-  const canShowFullSizeBelow = bottomOffset > dropdownHeight;
-  const canShowFullSizeAbove = dropdownHeight <= topOffset;
-  // Prefer full size above or below
-  if (canShowFullSizeBelow) {
-    return (target.privatePopDirection = 'down');
-  }
-  else if (canShowFullSizeAbove || !minPopHeight) {
-    determinePopOffset(target);
-    return (target.privatePopDirection = 'up');
-  }
-  // If full size will not fit and minHeight is set, then make as tall as possible
-  const displayBuffer = 5;
-  const canShowSmallBelow = bottomOffset >= minPopHeight + displayBuffer;
-  if (canShowSmallBelow) {
-    const maxBelowHeight = Math.max(bottomOffset - displayBuffer, minPopHeight);
-    dropdownContainer.style.maxHeight = `${maxBelowHeight}px`;
-    return (target.privatePopDirection = 'down');
-  }
-  else {
-    const maxAboveHeight = Math.max(topOffset, minPopHeight);
-    dropdownContainer.style.maxHeight = `${maxAboveHeight}px`;
-    determinePopOffset(target);
-    return (target.privatePopDirection = 'up');
-  }
-}
-const determinePopOffset = ({ dropdownContainer, inputField }) => {
-  var _a, _b;
-  if (!inputField)
-    return;
-  const inputFieldHeight = (_b = (_a = inputField.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.input-field')) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().height;
-  dropdownContainer.style.setProperty('--comp-dropup-offset', `${inputFieldHeight}px`);
-};
 export const 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);

package/dist/components/index11.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { c as createGuid, l as loc } from './index15.js';
+import { d as createGuid, l as loc } from './index15.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{display:block}.q2-optgroup-header{--comp-header-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--tct-optgroup-header-bg, var(--t-optgroup-header-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l2, var(--app-gray-l2, #e6e6e6))))));padding:var(--tct-optgroup-header-padding, var(--t-optgroup-header-padding, var(--comp-header-padding)));font-weight:var(--tct-optgroup-header-font-weight, var(--t-optgroup-header-font-weight, 600));text-transform:var(--tct-optgroup-header-text-transform, var(--t-optgroup-header-text-transform, uppercase));position:sticky;top:calc(var(--comp-multi-select-header-height, 0px) + var(--tct-optgroup-top, var(--t-optgroup-top, 0px)));z-index:5}";
 

package/dist/components/index15.js

@@ -540,6 +540,17 @@ function handleAriaLabel(target) {
   target.label = loc(ariaLabel);
   target.ariaLabel = undefined;
 }
+/**
+ * Handles when a prop has been renamed on a component without introducing a breaking change.
+ */
+function handleRenamedProp(target, oldProp, newProp, removeOldProp) {
+  if (typeof target[oldProp] === 'undefined')
+    return;
+  target[newProp] = target[oldProp];
+  if (removeOldProp) {
+    delete target[oldProp];
+  }
+}
 function messagesDOM(target) {
   const type = target.hasError ? 'danger' : 'info';
   return (h("div", { class: "messages-container" },
@@ -563,57 +574,6 @@ function setMessageHeight(target) {
     }
   });
 }
-function setPopProperties(target) {
-  var _a, _b, _c, _d;
-  const { dropdownContainer, popDirection } = target;
-  if (dropdownContainer) {
-    dropdownContainer.style.maxHeight = null;
-  }
-  if (popDirection) {
-    return (target.privatePopDirection = popDirection);
-  }
-  const controlElement = target.inputField || target.controlElement;
-  const minPopHeight = target.minPopHeight || null;
-  // Add sizable so that we can capture the height
-  dropdownContainer.classList.add('sizable');
-  const dropdownHeight = dropdownContainer.getBoundingClientRect().height;
-  dropdownContainer.classList.remove('sizable');
-  const { top: topOffset, height } = controlElement.getBoundingClientRect();
-  const scrollY = ((_b = (_a = window.Tecton) === null || _a === void 0 ? void 0 : _a.platformDimensions) === null || _b === void 0 ? void 0 : _b.scrollY) || 0;
-  const innerHeight = ((_d = (_c = window.Tecton) === null || _c === void 0 ? void 0 : _c.platformDimensions) === null || _d === void 0 ? void 0 : _d.innerHeight) || window.innerHeight;
-  const bottomOffset = scrollY + innerHeight - topOffset - height;
-  const canShowFullSizeBelow = bottomOffset > dropdownHeight;
-  const canShowFullSizeAbove = dropdownHeight <= topOffset;
-  // Prefer full size above or below
-  if (canShowFullSizeBelow) {
-    return (target.privatePopDirection = 'down');
-  }
-  else if (canShowFullSizeAbove || !minPopHeight) {
-    determinePopOffset(target);
-    return (target.privatePopDirection = 'up');
-  }
-  // If full size will not fit and minHeight is set, then make as tall as possible
-  const displayBuffer = 5;
-  const canShowSmallBelow = bottomOffset >= minPopHeight + displayBuffer;
-  if (canShowSmallBelow) {
-    const maxBelowHeight = Math.max(bottomOffset - displayBuffer, minPopHeight);
-    dropdownContainer.style.maxHeight = `${maxBelowHeight}px`;
-    return (target.privatePopDirection = 'down');
-  }
-  else {
-    const maxAboveHeight = Math.max(topOffset, minPopHeight);
-    dropdownContainer.style.maxHeight = `${maxAboveHeight}px`;
-    determinePopOffset(target);
-    return (target.privatePopDirection = 'up');
-  }
-}
-const determinePopOffset = ({ dropdownContainer, inputField }) => {
-  var _a, _b;
-  if (!inputField)
-    return;
-  const inputFieldHeight = (_b = (_a = inputField.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.input-field')) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().height;
-  dropdownContainer.style.setProperty('--comp-dropup-offset', `${inputFieldHeight}px`);
-};
 const 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);
@@ -626,4 +586,4 @@ const handleColor = (target) => {
   }
 };
 
-export { isEventFromElement as a, isTouchDevice as b, createGuid as c, isRelatedTargetWithinHost as d, isHostLosingFocus as e, addSmoothScrollPolyfill as f, setMessageHeight as g, handleAriaLabel as h, isMobile as i, labelDOM as j, handleColor as k, loc as l, messagesDOM as m, nextPaint as n, overrideFocus as o, isFirefox as p, resizeIframe as r, setPopProperties as s, waitForNextPaint as w };
+export { isEventFromElement as a, handleRenamedProp as b, isTouchDevice as c, createGuid as d, isRelatedTargetWithinHost as e, isHostLosingFocus as f, addSmoothScrollPolyfill as g, handleAriaLabel as h, isMobile as i, labelDOM as j, handleColor as k, loc as l, messagesDOM as m, nextPaint as n, overrideFocus as o, isFirefox as p, resizeIframe as r, setMessageHeight as s, waitForNextPaint as w };

package/dist/components/index7.js

@@ -1,5 +1,5 @@
 import { h, proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
-import { c as createGuid } from './index15.js';
+import { d as createGuid } from './index15.js';
 
 const icons = {
   a11y: {

package/dist/components/index8.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
-import { i as isMobile, c as createGuid, g as setMessageHeight, h as handleAriaLabel, o as overrideFocus, l as loc, a as isEventFromElement, j as labelDOM, m as messagesDOM } from './index15.js';
+import { i as isMobile, d as createGuid, s as setMessageHeight, h as handleAriaLabel, o as overrideFocus, l as loc, a as isEventFromElement, j as labelDOM, m as messagesDOM } from './index15.js';
 import { d as defineCustomElement$4 } from './index4.js';
 import { d as defineCustomElement$3 } from './index5.js';
 import { d as defineCustomElement$2 } from './index7.js';