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

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

@@ -1,10 +1,19 @@
-import { h } from '@stencil/core';
+import { h, } from '@stencil/core';
 import { isEventFromElement, loc, overrideFocus, resizeIframe } from 'src/utils';
+import { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';
 export class Q2Pill {
   constructor() {
+    var _a;
     this.scheduledAfterRender = [];
     this.activateFirstOption = false;
     /// Helpers ///
+    this.updateSelectedOptionElements = async () => {
+      var _a;
+      const { selectedOptions } = this;
+      const selectedValues = selectedOptions.map(option => option.value);
+      const options = await ((_a = this.optionList) === null || _a === void 0 ? void 0 : _a.getOptions());
+      this.selectedOptionElements = options === null || options === void 0 ? void 0 : options.filter(option => selectedValues.includes(option.value));
+    };
     this.determineHasOptions = () => {
       const hasOptions = !!this.hostElement.querySelectorAll('q2-option').length;
       this.hasOptions = hasOptions;
@@ -24,7 +33,12 @@ export class Q2Pill {
         return;
       if (this.hasOptions) {
         this.activateFirstOption = false;
-        await this.popoverElement.toggle();
+        if (shouldShowActionSheet(this)) {
+          this.executeActionSheet(event);
+        }
+        else {
+          await this.popoverElement.toggle();
+        }
       }
       else {
         const { value, label } = this;
@@ -38,23 +52,22 @@ export class Q2Pill {
         });
       }
     };
-    this.handleKeydown = (event) => {
+    this.handleKeydown = async (event) => {
       if (!this.hasOptions || this.disabled)
         return;
-      this.activateFirstOption = true;
-      this.optionList.handleExternalKeydown(event);
+      if (shouldShowActionSheet(this, event)) {
+        this.executeActionSheet(event);
+      }
+      else {
+        this.activateFirstOption = true;
+        this.optionList.handleExternalKeydown(event);
+      }
     };
     this.handleChange = event => {
       event.stopPropagation();
       if (!this.hasOptions)
         return;
-      const { value, values } = event.detail;
-      const isActive = !!values.length;
-      if (!this.hostElement.onchange) {
-        this.selectedOptions = values;
-        this.active = isActive;
-      }
-      this.change.emit({ value, values, active: isActive });
+      this.handleSelectionChanges(event.detail);
     };
     this.handleWrapperClick = () => {
       this.primaryBtn.focus();
@@ -67,6 +80,7 @@ export class Q2Pill {
         this.popoverElement.open = false;
       }
     };
+    this.hoist = !!((_a = window.Tecton) === null || _a === void 0 ? void 0 : _a.useActionSheets);
     this.disabled = undefined;
     this.active = undefined;
     this.open = undefined;
@@ -79,6 +93,7 @@ export class Q2Pill {
     this.popoverMinHeight = 150;
     this.popoverDirection = undefined;
     this.hasOptions = undefined;
+    this.selectedOptionElements = [];
   }
   /// LifeCycle Hooks ///
   componentWillLoad() {
@@ -99,11 +114,11 @@ export class Q2Pill {
   }
   /// Getters ///
   get buttonContent() {
-    const { label, selectedOptions, hasOptions } = this;
-    if (!hasOptions || selectedOptions.length === 0)
+    const { label, selectedOptions, selectedOptionElements, hasOptions } = this;
+    if (!hasOptions || selectedOptionElements.length === 0)
       return label;
-    else if (selectedOptions.length === 1)
-      return selectedOptions[0].display;
+    else if (selectedOptionElements.length === 1)
+      return selectedOptionElements[0].display;
     return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });
   }
   get truncatedButtonContent() {
@@ -113,6 +128,27 @@ export class Q2Pill {
     else
       return buttonContent;
   }
+  async executeActionSheet(event) {
+    const result = await showActionSheetList(this, event);
+    this.handleSelectionChanges(result);
+  }
+  handleSelectionChanges(changeDetails) {
+    const { value = '', values = [] } = changeDetails;
+    const isActive = !!values.length;
+    if (!this.hostElement.onchange) {
+      this.selectedOptions = values;
+      this.active = isActive;
+    }
+    this.change.emit({
+      value,
+      values,
+      active: isActive,
+    });
+  }
+  /// Watchers ///
+  selectedOptionsWatcher() {
+    this.updateSelectedOptionElements();
+  }
   /// Listeners ///
   delegateFocus(event) {
     if (!isEventFromElement(event, this.hostElement))
@@ -146,7 +182,7 @@ export class Q2Pill {
       wrapperClassNames.push('has-icon');
     if (hasOptions)
       wrapperClassNames.push('has-options');
-    return (h("click-elsewhere", { onChange: this.onClickElsewhere }, h("div", { class: wrapperClassNames.join(' ') }, h("div", { class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { class: "btn-primary", "test-id": "btn-control", type: "button", ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, disabled: this.disabled, "aria-selected": !hasOptions && active ? 'true' : 'false', "aria-roledescription": !hasOptions && 'filter', "aria-controls": hasOptions && 'option-list', "aria-haspopup": hasOptions && 'true', "aria-expanded": (hasOptions && `${!!open}`) || undefined, "aria-label": this.maxLength && this.buttonContent }, this.truncatedButtonContent, !hasOptions && active && h("span", { class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.generateIcon()), this.hasOptions && (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.primaryBtnWrapper, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection }, h("q2-option-list", { ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions }, h("slot", null))))));
+    return (h("click-elsewhere", { onChange: this.onClickElsewhere }, h("div", { class: wrapperClassNames.join(' ') }, h("div", { class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { class: "btn-primary", "test-id": "btn-control", type: "button", ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, disabled: this.disabled, "aria-selected": !hasOptions && active ? 'true' : 'false', "aria-roledescription": !hasOptions && 'filter', "aria-controls": hasOptions && 'option-list', "aria-haspopup": hasOptions && 'true', "aria-expanded": (hasOptions && `${!!open}`) || undefined, "aria-label": this.maxLength && this.buttonContent }, this.truncatedButtonContent, !hasOptions && active && h("span", { class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.generateIcon()), this.hasOptions && (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.primaryBtnWrapper, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: "right" }, h("q2-option-list", { ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements() }, h("slot", null))))));
   }
   static get is() { return "q2-pill"; }
   static get encapsulation() { return "shadow"; }
@@ -162,6 +198,24 @@ export class Q2Pill {
   }
   static get properties() {
     return {
+      "hoist": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hoist",
+        "reflect": false,
+        "defaultValue": "!!window.Tecton?.useActionSheets"
+      },
       "disabled": {
         "type": "boolean",
         "mutable": false,
@@ -358,7 +412,8 @@ export class Q2Pill {
   }
   static get states() {
     return {
-      "hasOptions": {}
+      "hasOptions": {},
+      "selectedOptionElements": {}
     };
   }
   static get events() {
@@ -385,6 +440,12 @@ export class Q2Pill {
       }];
   }
   static get elementRef() { return "hostElement"; }
+  static get watchers() {
+    return [{
+        "propName": "selectedOptions",
+        "methodName": "selectedOptionsWatcher"
+      }];
+  }
   static get listeners() {
     return [{
         "name": "focus",

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

@@ -232,6 +232,5 @@ div.btn-close {
 }
 
 q2-popover {
-  position: relative;
-  top: calc((var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2 * -1);
+  top: calc(var(--comp-pill-min-height) - (var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2);
 }

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

@@ -1,13 +1,15 @@
 import { h, } from '@stencil/core';
+import { nextPaint, resizeIframe } from 'src/utils';
 export class Q2Popover {
   constructor() {
-    this.privateDirection = 'down';
+    this.scheduledAfterRender = [];
     this.direction = undefined;
     this.align = undefined;
     this.open = undefined;
     this.block = undefined;
     this.minHeight = undefined;
     this.controlElement = undefined;
+    this.privateDirection = 'down';
   }
   /// Lifecycle hooks ///
   componentDidLoad() {
@@ -15,8 +17,14 @@ export class Q2Popover {
       this.determinePopDirection();
   }
   componentWillRender() {
-    if (this.containerElement && this.containerElement && this.open)
-      this.determinePopDirection();
+    if (this.containerElement && this.open)
+      nextPaint(() => this.determinePopDirection());
+  }
+  componentDidRender() {
+    setTimeout(() => {
+      this.scheduledAfterRender.forEach(fn => fn());
+      this.scheduledAfterRender = [];
+    }, 25);
   }
   /// Methods ///
   async toggle() {
@@ -25,6 +33,7 @@ export class Q2Popover {
   /// Watchers ///
   openChanged(open) {
     this.popoverStateChanged.emit({ open });
+    this.scheduledAfterRender.push(resizeIframe);
   }
   /// Listeners ///
   popoverStateHandler(event) {
@@ -36,7 +45,7 @@ export class Q2Popover {
   }
   /// Helpers ///
   determinePopDirection() {
-    var _a;
+    var _a, _b, _c, _d, _e;
     const { containerElement, contentElement, direction, controlElement } = this;
     if (containerElement)
       containerElement.style.maxHeight = null;
@@ -48,7 +57,9 @@ export class Q2Popover {
       top: 0,
       height: 0,
     };
-    const bottomOffset = window.innerHeight - topOffset - height;
+    const scrollY = ((_c = (_b = window.Tecton) === null || _b === void 0 ? void 0 : _b.platformDimensions) === null || _c === void 0 ? void 0 : _c.scrollY) || 0;
+    const innerHeight = ((_e = (_d = window.Tecton) === null || _d === void 0 ? void 0 : _d.platformDimensions) === null || _e === void 0 ? void 0 : _e.innerHeight) || window.innerHeight;
+    const bottomOffset = scrollY + innerHeight - topOffset - height;
     const canShowFullSizeBelow = bottomOffset > contentHeight;
     const canShowFullSizeAbove = contentHeight <= topOffset;
     // Prefer full size above or below
@@ -206,6 +217,11 @@ export class Q2Popover {
       }
     };
   }
+  static get states() {
+    return {
+      "privateDirection": {}
+    };
+  }
   static get events() {
     return [{
         "method": "popoverStateChanged",

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

@@ -65,84 +65,26 @@ button {
   visibility: hidden;
 }
 
-* {
-  box-sizing: border-box;
-}
-
-*:active {
-  outline: none;
-}
-
-*:focus {
-  outline: none;
-  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C);
-}
-
 :host {
-  box-shadow: none !important;
-}
-
-::-moz-focus-inner {
-  border: none;
-}
-
-input,
-textarea,
-button {
-  font-family: inherit;
-  font-size: inherit;
-  font-stretch: inherit;
-}
-
-:host(.sr),
-:host(.sr) button {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-  white-space: nowrap;
+  display: block;
+  width: 100%;
 }
 
-.sr,
-.sr button {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
+:host([align=right]) {
+  display: block;
   position: absolute;
-  width: 1px;
-  white-space: nowrap;
-}
-
-.hidden {
-  display: none;
-}
-
-:host([hidden]) {
-  display: none;
-}
-
-.invisible {
-  visibility: hidden;
-}
-
-:host {
-  display: inline-flex;
-  width: 100%;
+  right: 0;
+  text-align: end;
+  left: unset;
 }
 
 .container {
-  display: block;
+  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)));
@@ -178,6 +120,7 @@ button {
   left: unset;
   right: unset;
   width: 100%;
+  min-width: unset;
 }
 :host([align=right]) .container {
   right: 0;

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

@@ -75,7 +75,7 @@ export class Q2Radio {
     return {
       "label": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -179,7 +179,7 @@ export class Q2Radio {
       },
       "ariaLabel": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",