q2-tecton-elements 1.28.3 → 1.29.1

package/dist/components/index15.js

@@ -1,589 +1,189 @@
-import { h } from '@stencil/core/internal/client';
-
-function createCommonjsModule(fn, basedir, module) {
-	return module = {
-		path: basedir,
-		exports: {},
-		require: function (path, base) {
-			return commonjsRequire();
-		}
-	}, fn(module, module.exports), module.exports;
-}
-
-function commonjsRequire () {
-	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
-}
-
-var smoothscroll = createCommonjsModule(function (module, exports) {
-/* smoothscroll v0.4.4 - 2019 - Dustan Kasten, Jeremias Menichelli - MIT License */
-(function () {
-
-  // polyfill
-  function polyfill() {
-    // aliases
-    var w = window;
-    var d = document;
-
-    // return if scroll behavior is supported and polyfill is not forced
-    if (
-      'scrollBehavior' in d.documentElement.style &&
-      w.__forceSmoothScrollPolyfill__ !== true
-    ) {
-      return;
-    }
-
-    // globals
-    var Element = w.HTMLElement || w.Element;
-    var SCROLL_TIME = 468;
-
-    // object gathering original scroll methods
-    var original = {
-      scroll: w.scroll || w.scrollTo,
-      scrollBy: w.scrollBy,
-      elementScroll: Element.prototype.scroll || scrollElement,
-      scrollIntoView: Element.prototype.scrollIntoView
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { r as resizeIframe, w as waitForNextPaint } from './index16.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;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;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:var(--tct-popover-min-width, var(--t-popover-min-width, unset))}:host([align=right]) .container{right:0;text-align:end;left:unset}.container :host([open]){display:block}:host([open]) .container.show{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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.popoverStateChanged = createEvent(this, "popoverStateChanged", 7);
+    this.scheduledAfterRender = [];
+    /// Helpers ///
+    this.viewPortChanged = () => {
+      if (!this.open)
+        return;
+      this.determinePopDirection();
     };
-
-    // define timing method
-    var now =
-      w.performance && w.performance.now
-        ? w.performance.now.bind(w.performance)
-        : Date.now;
-
-    /**
-     * indicates if a the current browser is made by Microsoft
-     * @method isMicrosoftBrowser
-     * @param {String} userAgent
-     * @returns {Boolean}
-     */
-    function isMicrosoftBrowser(userAgent) {
-      var userAgentPatterns = ['MSIE ', 'Trident/', 'Edge/'];
-
-      return new RegExp(userAgentPatterns.join('|')).test(userAgent);
-    }
-
-    /*
-     * IE has rounding bug rounding down clientHeight and clientWidth and
-     * rounding up scrollHeight and scrollWidth causing false positives
-     * on hasScrollableSpace
-     */
-    var ROUNDING_TOLERANCE = isMicrosoftBrowser(w.navigator.userAgent) ? 1 : 0;
-
-    /**
-     * changes scroll position inside an element
-     * @method scrollElement
-     * @param {Number} x
-     * @param {Number} y
-     * @returns {undefined}
-     */
-    function scrollElement(x, y) {
-      this.scrollLeft = x;
-      this.scrollTop = y;
-    }
-
-    /**
-     * returns result of applying ease math function to a number
-     * @method ease
-     * @param {Number} k
-     * @returns {Number}
-     */
-    function ease(k) {
-      return 0.5 * (1 - Math.cos(Math.PI * k));
-    }
-
-    /**
-     * indicates if a smooth behavior should be applied
-     * @method shouldBailOut
-     * @param {Number|Object} firstArg
-     * @returns {Boolean}
-     */
-    function shouldBailOut(firstArg) {
-      if (
-        firstArg === null ||
-        typeof firstArg !== 'object' ||
-        firstArg.behavior === undefined ||
-        firstArg.behavior === 'auto' ||
-        firstArg.behavior === 'instant'
-      ) {
-        // first argument is not an object/null
-        // or behavior is auto, instant or undefined
-        return true;
-      }
-
-      if (typeof firstArg === 'object' && firstArg.behavior === 'smooth') {
-        // first argument is an object and behavior is smooth
-        return false;
-      }
-
-      // throw error when behavior is not supported
-      throw new TypeError(
-        'behavior member of ScrollOptions ' +
-          firstArg.behavior +
-          ' is not a valid value for enumeration ScrollBehavior.'
-      );
-    }
-
-    /**
-     * indicates if an element has scrollable space in the provided axis
-     * @method hasScrollableSpace
-     * @param {Node} el
-     * @param {String} axis
-     * @returns {Boolean}
-     */
-    function hasScrollableSpace(el, axis) {
-      if (axis === 'Y') {
-        return el.clientHeight + ROUNDING_TOLERANCE < el.scrollHeight;
-      }
-
-      if (axis === 'X') {
-        return el.clientWidth + ROUNDING_TOLERANCE < el.scrollWidth;
-      }
+    this.direction = undefined;
+    this.align = undefined;
+    this.open = undefined;
+    this.block = undefined;
+    this.minHeight = undefined;
+    this.controlElement = undefined;
+    this.currentDirection = undefined;
+    this.show = false;
+  }
+  /// Lifecycle hooks ///
+  componentDidLoad() {
+    if (this.open)
+      this.determinePopDirection();
+  }
+  componentDidRender() {
+    setTimeout(() => {
+      this.scheduledAfterRender.forEach(fn => fn());
+      this.scheduledAfterRender = [];
+    }, 25);
+  }
+  disconnectedCallback() {
+    this.removeViewportListeners();
+  }
+  /// Methods ///
+  async toggle() {
+    this.open = !this.open;
+  }
+  /// Watchers ///
+  openChanged(open) {
+    this.popoverStateChanged.emit({ open });
+    this.scheduledAfterRender.push(resizeIframe);
+    if (open) {
+      this.addViewportListeners();
+      this.determinePopDirection();
     }
-
-    /**
-     * indicates if an element has a scrollable overflow property in the axis
-     * @method canOverflow
-     * @param {Node} el
-     * @param {String} axis
-     * @returns {Boolean}
-     */
-    function canOverflow(el, axis) {
-      var overflowValue = w.getComputedStyle(el, null)['overflow' + axis];
-
-      return overflowValue === 'auto' || overflowValue === 'scroll';
+    else {
+      this.removeViewportListeners();
+      this.currentDirection = undefined;
+      this.containerElement.style.removeProperty('display');
+      this.containerElement.style.removeProperty('--comp-pop-max-height');
+      this.show = false;
     }
-
-    /**
-     * indicates if an element can be scrolled in either axis
-     * @method isScrollable
-     * @param {Node} el
-     * @param {String} axis
-     * @returns {Boolean}
-     */
-    function isScrollable(el) {
-      var isScrollableY = hasScrollableSpace(el, 'Y') && canOverflow(el, 'Y');
-      var isScrollableX = hasScrollableSpace(el, 'X') && canOverflow(el, 'X');
-
-      return isScrollableY || isScrollableX;
+  }
+  /// Listeners ///
+  popoverStateHandler(event) {
+    const { detail: { open }, } = event;
+    if (open === this.open)
+      return;
+    this.open = open;
+    event.stopPropagation();
+  }
+  addViewportListeners() {
+    // window.visualViewport.addEventListener('scroll', this.viewPortChanged);
+    window.visualViewport.addEventListener('resize', this.viewPortChanged);
+  }
+  removeViewportListeners() {
+    // window.visualViewport.removeEventListener('scroll', this.viewPortChanged);
+    window.visualViewport.removeEventListener('resize', this.viewPortChanged);
+  }
+  async setDirectionAndShow(direction) {
+    if (direction === 'up') {
+      this.determinePopOffset();
     }
-
-    /**
-     * finds scrollable parent of an element
-     * @method findScrollableParent
-     * @param {Node} el
-     * @returns {Node} el
-     */
-    function findScrollableParent(el) {
-      while (el !== d.body && isScrollable(el) === false) {
-        el = el.parentNode || el.host;
-      }
-
-      return el;
+    this.currentDirection = direction;
+    this.show = true;
+  }
+  async determinePopDirection() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const { containerElement, contentElement, direction, controlElement, currentDirection } = this;
+    if (containerElement)
+      containerElement.style.maxHeight = null;
+    // If the direction is already set then use it, otherwise use the current direction
+    const currentOrStatedDirection = direction !== null && direction !== void 0 ? direction : currentDirection;
+    // Set the container to block so we can get the height
+    containerElement.style.setProperty('display', 'block');
+    await waitForNextPaint();
+    // Determine the dimensions of the control element
+    const { top: topOffset, height } = (_a = controlElement === null || controlElement === void 0 ? void 0 : controlElement.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {
+      top: 0,
+      height: 0,
+    };
+    const contentHeight = contentElement.clientHeight;
+    const scrollY = ((_c = (_b = window.Tecton) === null || _b === void 0 ? void 0 : _b.platformDimensions) === null || _c === void 0 ? void 0 : _c.scrollY) ||
+      ((_d = window.visualViewport) === null || _d === void 0 ? void 0 : _d.offsetTop) || // Only Android Chrome provides this which we need when scrolled
+      0;
+    const outletOffset = scrollY + (((_f = (_e = window.Tecton) === null || _e === void 0 ? void 0 : _e.platformDimensions) === null || _f === void 0 ? void 0 : _f.outletOffset) || 0);
+    const innerHeight = ((_h = (_g = window.Tecton) === null || _g === void 0 ? void 0 : _g.platformDimensions) === null || _h === void 0 ? void 0 : _h.innerHeight) || ((_j = window.visualViewport) === null || _j === void 0 ? void 0 : _j.height) || window.innerHeight;
+    const bottomOffset = scrollY + innerHeight - topOffset - height - outletOffset;
+    const canShowFullSizeBelow = bottomOffset > contentHeight;
+    const canShowFullSizeAbove = contentHeight <= topOffset;
+    let determinedDirection;
+    // Show the full-size popover below or above if it will fit
+    if (currentOrStatedDirection === 'down' && canShowFullSizeBelow)
+      return this.setDirectionAndShow('down');
+    else if (currentOrStatedDirection === 'up' && canShowFullSizeAbove)
+      return this.setDirectionAndShow('up');
+    else if (currentOrStatedDirection === undefined && canShowFullSizeBelow)
+      determinedDirection = 'down';
+    else if (currentOrStatedDirection === undefined && canShowFullSizeAbove)
+      determinedDirection = 'up';
+    if (determinedDirection)
+      return this.setDirectionAndShow(determinedDirection);
+    // If full size will not fit then make it as tall as possible
+    const { minHeight = 150 } = this;
+    const displayBuffer = 5;
+    const canShowMinHeightBelow = bottomOffset >= minHeight + displayBuffer;
+    let maxHeight;
+    if (currentOrStatedDirection === 'down') {
+      maxHeight = Math.max(bottomOffset - displayBuffer, minHeight);
+      determinedDirection = 'down';
     }
-
-    /**
-     * self invoked function that, given a context, steps through scrolling
-     * @method step
-     * @param {Object} context
-     * @returns {undefined}
-     */
-    function step(context) {
-      var time = now();
-      var value;
-      var currentX;
-      var currentY;
-      var elapsed = (time - context.startTime) / SCROLL_TIME;
-
-      // avoid elapsed times higher than one
-      elapsed = elapsed > 1 ? 1 : elapsed;
-
-      // apply easing to elapsed time
-      value = ease(elapsed);
-
-      currentX = context.startX + (context.x - context.startX) * value;
-      currentY = context.startY + (context.y - context.startY) * value;
-
-      context.method.call(context.scrollable, currentX, currentY);
-
-      // scroll more if we have not reached our destination
-      if (currentX !== context.x || currentY !== context.y) {
-        w.requestAnimationFrame(step.bind(w, context));
-      }
+    else if (currentOrStatedDirection === 'up') {
+      maxHeight = Math.max(topOffset - displayBuffer, minHeight);
+      determinedDirection = 'up';
     }
-
-    /**
-     * scrolls window or element with a smooth behavior
-     * @method smoothScroll
-     * @param {Object|Node} el
-     * @param {Number} x
-     * @param {Number} y
-     * @returns {undefined}
-     */
-    function smoothScroll(el, x, y) {
-      var scrollable;
-      var startX;
-      var startY;
-      var method;
-      var startTime = now();
-
-      // define scroll context
-      if (el === d.body) {
-        scrollable = w;
-        startX = w.scrollX || w.pageXOffset;
-        startY = w.scrollY || w.pageYOffset;
-        method = original.scroll;
-      } else {
-        scrollable = el;
-        startX = el.scrollLeft;
-        startY = el.scrollTop;
-        method = scrollElement;
-      }
-
-      // scroll looping over a frame
-      step({
-        scrollable: scrollable,
-        method: method,
-        startTime: startTime,
-        startX: startX,
-        startY: startY,
-        x: x,
-        y: y
-      });
+    else if (canShowMinHeightBelow) {
+      maxHeight = Math.max(bottomOffset - displayBuffer, minHeight);
+      determinedDirection = 'down';
     }
-
-    // ORIGINAL METHODS OVERRIDES
-    // w.scroll and w.scrollTo
-    w.scroll = w.scrollTo = function() {
-      // avoid action when no arguments are passed
-      if (arguments[0] === undefined) {
-        return;
-      }
-
-      // avoid smooth behavior if not required
-      if (shouldBailOut(arguments[0]) === true) {
-        original.scroll.call(
-          w,
-          arguments[0].left !== undefined
-            ? arguments[0].left
-            : typeof arguments[0] !== 'object'
-              ? arguments[0]
-              : w.scrollX || w.pageXOffset,
-          // use top prop, second argument if present or fallback to scrollY
-          arguments[0].top !== undefined
-            ? arguments[0].top
-            : arguments[1] !== undefined
-              ? arguments[1]
-              : w.scrollY || w.pageYOffset
-        );
-
-        return;
-      }
-
-      // LET THE SMOOTHNESS BEGIN!
-      smoothScroll.call(
-        w,
-        d.body,
-        arguments[0].left !== undefined
-          ? ~~arguments[0].left
-          : w.scrollX || w.pageXOffset,
-        arguments[0].top !== undefined
-          ? ~~arguments[0].top
-          : w.scrollY || w.pageYOffset
-      );
-    };
-
-    // w.scrollBy
-    w.scrollBy = function() {
-      // avoid action when no arguments are passed
-      if (arguments[0] === undefined) {
-        return;
-      }
-
-      // avoid smooth behavior if not required
-      if (shouldBailOut(arguments[0])) {
-        original.scrollBy.call(
-          w,
-          arguments[0].left !== undefined
-            ? arguments[0].left
-            : typeof arguments[0] !== 'object' ? arguments[0] : 0,
-          arguments[0].top !== undefined
-            ? arguments[0].top
-            : arguments[1] !== undefined ? arguments[1] : 0
-        );
-
-        return;
-      }
-
-      // LET THE SMOOTHNESS BEGIN!
-      smoothScroll.call(
-        w,
-        d.body,
-        ~~arguments[0].left + (w.scrollX || w.pageXOffset),
-        ~~arguments[0].top + (w.scrollY || w.pageYOffset)
-      );
-    };
-
-    // Element.prototype.scroll and Element.prototype.scrollTo
-    Element.prototype.scroll = Element.prototype.scrollTo = function() {
-      // avoid action when no arguments are passed
-      if (arguments[0] === undefined) {
-        return;
-      }
-
-      // avoid smooth behavior if not required
-      if (shouldBailOut(arguments[0]) === true) {
-        // if one number is passed, throw error to match Firefox implementation
-        if (typeof arguments[0] === 'number' && arguments[1] === undefined) {
-          throw new SyntaxError('Value could not be converted');
-        }
-
-        original.elementScroll.call(
-          this,
-          // use left prop, first number argument or fallback to scrollLeft
-          arguments[0].left !== undefined
-            ? ~~arguments[0].left
-            : typeof arguments[0] !== 'object' ? ~~arguments[0] : this.scrollLeft,
-          // use top prop, second argument or fallback to scrollTop
-          arguments[0].top !== undefined
-            ? ~~arguments[0].top
-            : arguments[1] !== undefined ? ~~arguments[1] : this.scrollTop
-        );
-
-        return;
-      }
-
-      var left = arguments[0].left;
-      var top = arguments[0].top;
-
-      // LET THE SMOOTHNESS BEGIN!
-      smoothScroll.call(
-        this,
-        this,
-        typeof left === 'undefined' ? this.scrollLeft : ~~left,
-        typeof top === 'undefined' ? this.scrollTop : ~~top
-      );
-    };
-
-    // Element.prototype.scrollBy
-    Element.prototype.scrollBy = function() {
-      // avoid action when no arguments are passed
-      if (arguments[0] === undefined) {
-        return;
-      }
-
-      // avoid smooth behavior if not required
-      if (shouldBailOut(arguments[0]) === true) {
-        original.elementScroll.call(
-          this,
-          arguments[0].left !== undefined
-            ? ~~arguments[0].left + this.scrollLeft
-            : ~~arguments[0] + this.scrollLeft,
-          arguments[0].top !== undefined
-            ? ~~arguments[0].top + this.scrollTop
-            : ~~arguments[1] + this.scrollTop
-        );
-
-        return;
-      }
-
-      this.scroll({
-        left: ~~arguments[0].left + this.scrollLeft,
-        top: ~~arguments[0].top + this.scrollTop,
-        behavior: arguments[0].behavior
-      });
-    };
-
-    // Element.prototype.scrollIntoView
-    Element.prototype.scrollIntoView = function() {
-      // avoid smooth behavior if not required
-      if (shouldBailOut(arguments[0]) === true) {
-        original.scrollIntoView.call(
-          this,
-          arguments[0] === undefined ? true : arguments[0]
-        );
-
-        return;
-      }
-
-      // LET THE SMOOTHNESS BEGIN!
-      var scrollableParent = findScrollableParent(this);
-      var parentRects = scrollableParent.getBoundingClientRect();
-      var clientRects = this.getBoundingClientRect();
-
-      if (scrollableParent !== d.body) {
-        // reveal element inside parent
-        smoothScroll.call(
-          this,
-          scrollableParent,
-          scrollableParent.scrollLeft + clientRects.left - parentRects.left,
-          scrollableParent.scrollTop + clientRects.top - parentRects.top
-        );
-
-        // reveal parent in viewport unless is fixed
-        if (w.getComputedStyle(scrollableParent).position !== 'fixed') {
-          w.scrollBy({
-            left: parentRects.left,
-            top: parentRects.top,
-            behavior: 'smooth'
-          });
-        }
-      } else {
-        // reveal element in viewport
-        w.scrollBy({
-          left: clientRects.left,
-          top: clientRects.top,
-          behavior: 'smooth'
-        });
-      }
-    };
-  }
-
-  {
-    // commonjs
-    module.exports = { polyfill: polyfill };
-  }
-
-}());
-});
-
-function isMobile() {
-  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|Mobile|IEMobile|Windows Phone|Opera Mini/i.test(navigator.userAgent);
-}
-function isHostLosingFocus(event, hostElement) {
-  const type = event.type;
-  const focusInTypes = ['focusin', 'focus'];
-  const isFocusIn = focusInTypes.includes(type);
-  // on focusin: `target` is element losing focus, `relatedTarget` is element gaining focus
-  // on focusout: `target` is element gaining focus, `relatedTarget` is element losing focus
-  const elementGainingFocus = isFocusIn ? event.target : event.relatedTarget;
-  const isElementNestedInHostElement = (element) => {
-    if (element === hostElement)
-      return true;
-    if (element.parentElement) {
-      return isElementNestedInHostElement(element.parentElement);
+    else {
+      maxHeight = Math.max(topOffset - scrollY - displayBuffer, minHeight);
+      determinedDirection = 'up';
     }
-    return false;
-  };
-  if (!(elementGainingFocus instanceof HTMLElement))
-    return true;
-  return !isElementNestedInHostElement(elementGainingFocus);
-}
-function isRelatedTargetWithinHost(event, element) {
-  return event.relatedTarget !== element && !element.contains(event.relatedTarget);
-}
-function isEventFromElement(event, element) {
-  var _a;
-  return ((_a = event.composedPath) === null || _a === void 0 ? void 0 : _a.call(event)[0]) === element;
-}
-function overrideFocus(hostElement) {
-  hostElement.focus = () => hostElement === null || hostElement === void 0 ? void 0 : hostElement.dispatchEvent(new FocusEvent('focus', { bubbles: false }));
-}
-function addSmoothScrollPolyfill() {
-  if (!isSafari())
-    return false;
-  smoothscroll.polyfill();
-  return (window.__forceSmoothScrollPolyfill__ = true);
-}
-function isFirefox() {
-  const userAgent = navigator.userAgent.toLowerCase();
-  return userAgent.includes('firefox');
-}
-function isTouchDevice() {
-  return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
-}
-function isSafari() {
-  const userAgent = navigator.userAgent.toLowerCase();
-  return userAgent.includes('safari') && !userAgent.includes('chrome');
-}
-let guid = 1000;
-function createGuid() {
-  return guid++;
-}
-function nextPaint(fn) {
-  requestAnimationFrame(() => {
-    requestAnimationFrame(fn);
-  });
-}
-function waitForNextPaint() {
-  return new Promise(resolve => nextPaint(resolve));
-}
-function loc(key, subs) {
-  var _a, _b, _c;
-  if (!key)
-    return '';
-  if (((_a = window.Tecton) === null || _a === void 0 ? void 0 : _a.noStrings) === true) {
-    return key;
+    containerElement.style.setProperty('--comp-pop-max-height', `${maxHeight}px`);
+    return this.setDirectionAndShow(determinedDirection);
   }
-  return (_c = (_b = window === null || window === void 0 ? void 0 : window.TectonElements) === null || _b === void 0 ? void 0 : _b.loc(key, subs)) !== null && _c !== void 0 ? _c : key;
-}
-function labelDOM(target) {
-  const { label, hideLabel } = target;
-  if (!label || hideLabel)
-    return;
-  let helpText = '';
-  if (target.optional) {
-    helpText = h("span", { class: "optional-tag" }, loc('tecton.element.input.optional'));
+  determinePopOffset() {
+    var _a;
+    const { controlElement, containerElement } = this;
+    const dropdownHeight = (_a = controlElement === null || controlElement === void 0 ? void 0 : controlElement.getBoundingClientRect().height) !== null && _a !== void 0 ? _a : 0;
+    containerElement.style.setProperty('--comp-pop-offset', `${dropdownHeight}px`);
   }
-  if (target.readonly) {
-    helpText = h("span", { class: "optional-tag" }, loc('tecton.element.input.readonly'));
+  /// DOM ///
+  render() {
+    const containerClasses = ['container', this.currentDirection];
+    if (this.show)
+      containerClasses.push('show');
+    return (h("div", { ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer" }, h("div", { ref: el => (this.contentElement = el), class: "content" }, h("slot", null))));
   }
-  return (h("label", { htmlFor: target.inputId, class: target.readonly ? 'readonly-field' : '' },
-    loc(target.label),
-    helpText));
-}
-function handleAriaLabel(target) {
-  const { ariaLabel } = target;
-  if (!ariaLabel)
-    return;
-  if ('hideLabel' in target)
-    target.hideLabel = true;
-  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')
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "open": ["openChanged"]
+  }; }
+  static get style() { return stylesCss; }
+}, [1, "q2-popover", {
+    "direction": [513],
+    "align": [513],
+    "open": [1540],
+    "block": [516],
+    "minHeight": [2, "min-height"],
+    "controlElement": [16],
+    "currentDirection": [32],
+    "show": [32],
+    "toggle": [64]
+  }, [[0, "popoverState", "popoverStateHandler"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
     return;
-  target[newProp] = target[oldProp];
-  if (removeOldProp) {
-    delete target[oldProp];
   }
+  const components = ["q2-popover"];
+  components.forEach(tagName => { switch (tagName) {
+    case "q2-popover":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2Popover);
+      }
+      break;
+  } });
 }
-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))))))));
-}
-function setMessageHeight(target) {
-  const messageContainer = target.hostElement.shadowRoot.querySelector('.messages-container');
-  const q2Message = messageContainer.querySelector('q2-message');
-  nextPaint(() => {
-    const height = target.showMessages && target.hasFocus ? q2Message.getBoundingClientRect().height : 0;
-    if (messageContainer.style.getPropertyValue('height') === `${height}px`)
-      return;
-    if (height === 0) {
-      q2Message.classList.add('invisible');
-      messageContainer.style.removeProperty('height');
-    }
-    else {
-      q2Message.classList.remove('invisible');
-      messageContainer.style.setProperty('height', `${height}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);
-};
-// Handling color attribute (deprecated)
-const handleColor = (target) => {
-  if (!target.intent && ['primary', 'secondary'].includes(target.color)) {
-    target.intent = `workflow-${target.color}`;
-    target.color = undefined;
-  }
-};
+defineCustomElement();
 
-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 };
+export { Q2Popover as Q, defineCustomElement as d };