q2-tecton-elements 1.27.1 → 1.28.1

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-06-15T20:43:40",
+  "timestamp": "2023-07-13T16:58:53",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.19.2",
@@ -855,7 +855,7 @@
         {
           "name": "ariaLabel",
           "type": "string",
-          "mutable": false,
+          "mutable": true,
           "attr": "aria-label",
           "reflectToAttr": true,
           "docs": "",
@@ -1162,6 +1162,22 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "open",
+          "type": "boolean",
+          "mutable": true,
+          "attr": "open",
+          "reflectToAttr": true,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "optional",
           "type": "boolean",
@@ -1201,6 +1217,32 @@
           "attr": "pop-direction",
           "reflectToAttr": true,
           "docs": "",
+          "docsTags": [
+            {
+              "name": "deprecated"
+            }
+          ],
+          "deprecation": "",
+          "values": [
+            {
+              "value": "down",
+              "type": "string"
+            },
+            {
+              "value": "up",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "popoverDirection",
+          "type": "\"down\" | \"up\"",
+          "mutable": true,
+          "attr": "popover-direction",
+          "reflectToAttr": false,
+          "docs": "",
           "docsTags": [],
           "values": [
             {
@@ -1215,6 +1257,23 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "popoverMinHeight",
+          "type": "number",
+          "mutable": false,
+          "attr": "popover-min-height",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "default": "355",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "readonly",
           "type": "boolean",
@@ -1353,6 +1412,11 @@
           "event": "clear",
           "capture": false,
           "passive": false
+        },
+        {
+          "event": "popoverStateChanged",
+          "capture": false,
+          "passive": false
         }
       ],
       "styles": [],
@@ -1361,6 +1425,7 @@
       "dependents": [],
       "dependencies": [
         "click-elsewhere",
+        "q2-popover",
         "q2-message",
         "q2-input",
         "q2-btn",
@@ -1369,6 +1434,7 @@
       "dependencyGraph": {
         "q2-calendar": [
           "click-elsewhere",
+          "q2-popover",
           "q2-message",
           "q2-input",
           "q2-btn",
@@ -3462,6 +3528,22 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "open",
+          "type": "boolean",
+          "mutable": true,
+          "attr": "open",
+          "reflectToAttr": true,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "popDirection",
           "type": "\"down\" | \"up\"",
@@ -3469,6 +3551,32 @@
           "attr": "pop-direction",
           "reflectToAttr": true,
           "docs": "",
+          "docsTags": [
+            {
+              "name": "deprecated"
+            }
+          ],
+          "deprecation": "",
+          "values": [
+            {
+              "value": "down",
+              "type": "string"
+            },
+            {
+              "value": "up",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "popoverDirection",
+          "type": "\"down\" | \"up\"",
+          "mutable": true,
+          "attr": "popover-direction",
+          "reflectToAttr": false,
+          "docs": "",
           "docsTags": [],
           "values": [
             {
@@ -3483,6 +3591,23 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "popoverMinHeight",
+          "type": "number",
+          "mutable": false,
+          "attr": "popover-min-height",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "default": "150",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "resolvedType",
           "type": "string",
@@ -3545,6 +3670,11 @@
           "event": "focus",
           "capture": false,
           "passive": false
+        },
+        {
+          "event": "popoverStateChanged",
+          "capture": false,
+          "passive": false
         }
       ],
       "styles": [],
@@ -3555,14 +3685,16 @@
         "q2-dropdown-item",
         "click-elsewhere",
         "q2-btn",
-        "q2-icon"
+        "q2-icon",
+        "q2-popover"
       ],
       "dependencyGraph": {
         "q2-dropdown": [
           "q2-dropdown-item",
           "click-elsewhere",
           "q2-btn",
-          "q2-icon"
+          "q2-icon",
+          "q2-popover"
         ],
         "q2-dropdown-item": [
           "q2-btn",
@@ -6623,12 +6755,20 @@
       "slots": [],
       "parts": [],
       "dependents": [
+        "q2-calendar",
+        "q2-dropdown",
         "q2-pill",
         "q2-select",
         "q2-tag"
       ],
       "dependencies": [],
       "dependencyGraph": {
+        "q2-calendar": [
+          "q2-popover"
+        ],
+        "q2-dropdown": [
+          "q2-popover"
+        ],
         "q2-pill": [
           "q2-popover"
         ],

package/dist/esm/click-elsewhere_2.entry.js

@@ -0,0 +1,253 @@
+import { r as registerInstance, c as createEvent, g as getElement, h } from './index-bb1c8c7f.js';
+import { r as resizeIframe, w as waitForNextPaint } from './index-576f618c.js';
+
+const ClickElsewhere = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.change = createEvent(this, "change", 7);
+    /**
+     * Listens for mouse and window events that happen outside this click-elsewhere element so we can close popovers when users click outside them
+     */
+    this.mouseEventList = ['mousedown', 'dragstart', 'touchstart'];
+    this.isCurrentlyFocused = false;
+    this.mouseHandler = (event) => {
+      const isCurrentlyFocused = this.shadowContains(this.findActiveElement());
+      const aboutToBeFocused = this.shadowContains(this.shadowEventTarget(event)) || this.originatesInSlots(event.target);
+      if (!aboutToBeFocused && (this.isCurrentlyFocused || isCurrentlyFocused)) {
+        this.isCurrentlyFocused = false;
+        this.change.emit();
+        return;
+      }
+      this.isCurrentlyFocused = aboutToBeFocused || isCurrentlyFocused;
+    };
+    this.windowBlurHandler = () => {
+      const activeElement = this.findActiveElement();
+      if (activeElement === document.body && this.isCurrentlyFocused) {
+        this.isCurrentlyFocused = false;
+        this.change.emit();
+        return;
+      }
+    };
+  }
+  /* TODO: Stencil/Rollup is having issues compiling without this here. Will try to remove in future Stencil upgrade. */
+  /* tslint:disable:no-empty */
+  componentWillLoad() { }
+  /* tslint:enable:no-empty */
+  connectedCallback() {
+    this.mouseEventList.forEach((eventName) => {
+      document.addEventListener(eventName, this.mouseHandler);
+    });
+    window.addEventListener('blur', this.windowBlurHandler);
+  }
+  disconnectedCallback() {
+    this.mouseEventList.forEach((eventName) => {
+      document.removeEventListener(eventName, this.mouseHandler);
+    });
+    window.removeEventListener('blur', this.windowBlurHandler);
+  }
+  findActiveElement() {
+    let workingElement = document.activeElement;
+    while (true) {
+      if (!workingElement || !workingElement.shadowRoot) {
+        return workingElement;
+      }
+      workingElement = workingElement.shadowRoot.activeElement;
+    }
+  }
+  shadowEventTarget(event) {
+    return event.composedPath()[0] || event.target;
+  }
+  shadowContains(child) {
+    /**
+     * shadow-dom enabled version of Node.contains()
+     */
+    while (true) {
+      if (child === this.hostElement) {
+        return true;
+      }
+      if (!child) {
+        return false;
+      }
+      child = child.parentNode || child.host;
+    }
+  }
+  originatesInSlots(target) {
+    const slots = this.hostElement.querySelectorAll('slot');
+    for (const currentSlot of Array.from(slots)) {
+      const lightNodes = (currentSlot && currentSlot.assignedNodes && currentSlot.assignedNodes()) ||
+        this.hostElement.childNodes;
+      for (const currentNode of Array.from(lightNodes)) {
+        if (currentNode.contains(target)) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+  get hostElement() { return getElement(this); }
+};
+
+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), max-height 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}.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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.popoverStateChanged = createEvent(this, "popoverStateChanged", 7);
+    this.scheduledAfterRender = [];
+    /// Helpers ///
+    this.viewPortChanged = () => {
+      if (!this.open)
+        return;
+      this.determinePopDirection();
+    };
+    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();
+    }
+    else {
+      this.removeViewportListeners();
+      // Reset currentDirection after close transition completes
+      this.containerElement.addEventListener('transitionend', () => {
+        if (this.open)
+          return;
+        this.currentDirection = undefined;
+        this.containerElement.style.removeProperty('display');
+        this.containerElement.style.removeProperty('--comp-pop-max-height');
+      }, { once: true });
+      this.show = false;
+    }
+  }
+  /// 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();
+    }
+    this.currentDirection = direction;
+    this.show = true;
+  }
+  async determinePopDirection() {
+    var _a, _b, _c, _d, _e, _f, _g;
+    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 innerHeight = ((_f = (_e = window.Tecton) === null || _e === void 0 ? void 0 : _e.platformDimensions) === null || _f === void 0 ? void 0 : _f.innerHeight) || ((_g = window.visualViewport) === null || _g === void 0 ? void 0 : _g.height) || window.innerHeight;
+    const bottomOffset = scrollY + innerHeight - topOffset - height;
+    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';
+    }
+    else if (currentOrStatedDirection === 'up') {
+      maxHeight = Math.max(topOffset - displayBuffer, minHeight);
+      determinedDirection = 'up';
+    }
+    else if (canShowMinHeightBelow) {
+      maxHeight = Math.max(bottomOffset - displayBuffer, minHeight);
+      determinedDirection = 'down';
+    }
+    else {
+      maxHeight = Math.max(topOffset - scrollY - displayBuffer, minHeight);
+      determinedDirection = 'up';
+    }
+    containerElement.style.setProperty('--comp-pop-max-height', `${maxHeight}px`);
+    return this.setDirectionAndShow(determinedDirection);
+  }
+  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`);
+  }
+  /// 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))));
+  }
+  get hostElement() { return getElement(this); }
+  static get watchers() { return {
+    "open": ["openChanged"]
+  }; }
+};
+Q2Popover.style = stylesCss;
+
+export { ClickElsewhere as click_elsewhere, Q2Popover as q2_popover };

package/dist/esm/{index-a0cc60e3.js → index-576f618c.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, isFirefox as k, loc as l, messagesDOM as m, nextPaint as n, overrideFocus as o, handleColor 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, isFirefox as k, loc as l, messagesDOM as m, nextPaint as n, overrideFocus as o, handleColor as p, resizeIframe as r, setMessageHeight as s, waitForNextPaint as w };