q2-tecton-elements 1.27.0 → 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,17 +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 &&
@@ -162,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]');
@@ -181,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,
@@ -197,7 +194,10 @@ export class Q2Dropdown {
     };
   }
   //////// Observers //////////
-  ariaLabelObserver() {
+  popDirectionHandler() {
+    handleRenamedProp(this, 'popDirection', 'popoverDirection');
+  }
+  ariaLabelHandler() {
     handleAriaLabel(this);
   }
   nameHandler() {
@@ -215,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));
@@ -262,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"; }
@@ -364,12 +363,12 @@ export class Q2Dropdown {
         "attribute": "disabled",
         "reflect": true
       },
-      "popDirection": {
+      "alignment": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'up' | 'down'",
-          "resolved": "\"down\" | \"up\"",
+          "original": "'left' | 'right'",
+          "resolved": "\"left\" | \"right\"",
           "references": {}
         },
         "required": false,
@@ -378,8 +377,9 @@ export class Q2Dropdown {
           "tags": [],
           "text": ""
         },
-        "attribute": "pop-direction",
-        "reflect": true
+        "attribute": "alignment",
+        "reflect": true,
+        "defaultValue": "'left'"
       },
       "name": {
         "type": "string",
@@ -466,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,
@@ -488,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"
@@ -519,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/index3.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { i as icons, d as defineCustomElement$1 } from './index7.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}.avatar-img{object-fit:cover;height:var(--tct-avatar-img-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-img-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-img-border-radius, --tct-avatar-img-br, --tct-avatar-border-radius, 50%);background-color:unset}.avatar-img-default{object-fit:cover;height:var(--tct-avatar-img-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-img-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-img-border-radius, var(--tct-avatar-img-br, var(--tct-avatar-border-radius, 50%)));background:var(--tct-avatar-background, var(--tct-avatar-bg, #9e9e9e))}.avatar-initials{height:var(--tct-avatar-height, 44px);width:var(--tct-avatar-width, 44px);background:var(--tct-avatar-background, var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e)));border-radius:var(--tct-avatar-br, 50%)}.size-1{--tct-avatar-font-size:var(--tct-avatar-size-1, 60px)}.size-2{--tct-avatar-font-size:var(--tct-avatar-size-2, 50px)}.size-3{--tct-avatar-font-size:var(--tct-avatar-size-3, 40px)}.size-4{--tct-avatar-font-size:var(--tct-avatar-size-4, 30px)}text{fill:var(--tct-avatar-text-color, var(--tct-avatar-color, #ffffff));font-weight:var(--tct-avatar-font-weight, 200);font-size:var(--tct-avatar-font-size, 40px)}.fallback{height:var(--tct-avatar-fallback-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-fallback-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-fallback-border-radius, var(--tct-avatar-fallback-br, var(--tct-avatar-img-border-radius, var(--tct-avatar-img-br, 50%))));background:var(--tct-avatar-fallback-background, var(--tct-avatar-fallback-bg, var(--tct-avatar-background, var(--tct-avatar-bg, #9e9e9e))));display:flex;align-items:center;justify-content:center}q2-icon{--t-icon-size:var-list(--tct-avatar-icon-size, --tct-avatar-fallback-icon-size, 65%);--t-icon-fill:var-list(--tct-avatar-icon-fill, --tct-avatar-fallback-fill, transparent);--t-icon-stroke-primary:var-list(\n      --tct-avatar-icon-stroke-primary,\n      --tct-avatar-fallback-stroke-primary,\n      currentcolor\n  );--t-icon-stroke-secondary:var-list(\n      --tct-avatar-icon-stroke-secondary,\n      --tct-avatar-fallback-stroke-secondary,\n      currentcolor\n  );color:var(--tct-avatar-icon-color, var(--tct-avatar-fallback-color, var(--tct-avatar-color, var(--t-base, #ffffff))));width:var(--tct-avatar-icon-size, var(--t-icon-size));height:var(--tct-avatar-icon-size, var(--t-icon-size))}";
+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}.avatar-img{object-fit:cover;height:var(--tct-avatar-img-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-img-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-img-border-radius, --tct-avatar-img-br, --tct-avatar-border-radius, 50%);background-color:unset}.avatar-img-default{object-fit:cover;height:var(--tct-avatar-img-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-img-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-img-border-radius, var(--tct-avatar-img-br, var(--tct-avatar-border-radius, 50%)));background:var(--tct-avatar-background, var(--tct-avatar-bg, #9e9e9e))}.avatar-initials{height:var(--tct-avatar-height, 44px);width:var(--tct-avatar-width, 44px);background:var(--tct-avatar-background, var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e)));border-radius:var(--tct-avatar-br, 50%)}.size-1{--tct-avatar-font-size:var(--tct-avatar-size-1, 60px)}.size-2{--tct-avatar-font-size:var(--tct-avatar-size-2, 50px)}.size-3{--tct-avatar-font-size:var(--tct-avatar-size-3, 40px)}.size-4{--tct-avatar-font-size:var(--tct-avatar-size-4, 30px)}text{fill:var(--tct-avatar-text-color, var(--tct-avatar-color, #ffffff));font-weight:var(--tct-avatar-font-weight, 200);font-size:var(--tct-avatar-font-size, 40px)}.fallback{height:var(--tct-avatar-fallback-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-fallback-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-fallback-border-radius, var(--tct-avatar-fallback-br, var(--tct-avatar-img-border-radius, var(--tct-avatar-img-br, 50%))));background:var(--tct-avatar-fallback-background, var(--tct-avatar-fallback-bg, var(--tct-avatar-background, var(--tct-avatar-bg, #9e9e9e))));display:flex;align-items:center;justify-content:center}q2-icon{--t-icon-size:var(--tct-avatar-icon-size, var(--tct-avatar-fallback-icon-size, 65%));--t-icon-fill:var(--tct-avatar-icon-fill, var(--tct-avatar-fallback-fill, transparent));--t-icon-stroke-primary:var(--tct-avatar-icon-stroke-primary, var(--tct-avatar-fallback-stroke-primary, currentcolor));--t-icon-stroke-secondary:var(--tct-avatar-icon-stroke-secondary, var(--tct-avatar-fallback-stroke-secondary, currentcolor));color:var(--tct-avatar-icon-color, var(--tct-avatar-fallback-color, var(--tct-avatar-color, var(--t-base, #ffffff))));width:var(--tct-avatar-icon-size, var(--t-icon-size));height:var(--tct-avatar-icon-size, var(--t-icon-size))}";
 
 const Q2Avatar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

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';