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

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

@@ -138,7 +138,7 @@ button {
 .q2-select-input {
   margin: 0;
   --tct-input-min-height: var(--tct-select-input-min-height, var(--t-select-input-min-height));
-  --tct-input-max-height: var(--tct-select-input-max-height, var(--t-select-input-max-height, 100px));
+  --tct-input-max-height: var(--tct-select-input-max-height, var(--t-select-input-max-height, none));
 }
 
 ::slotted([slot=_selected-display]) {
@@ -171,22 +171,16 @@ button {
   width: calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3x, 15px)));
 }
 
-.dropdown-open .q2-select-dropdown {
-  overflow-y: auto;
-  max-height: 300px;
-}
-
 .multi-select-header {
   padding: var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));
   position: sticky;
   top: 0;
   z-index: 5;
   background: var(--app-white);
-}
-
-.show-all-options {
-  margin-right: var(--tct-scale-1, var(--app-scale-1x, 5px));
-  margin-left: var(--tct-scale-2, var(--app-scale-2x, 10px));
+  display: inline-grid;
+  grid-template-columns: repeat(3, auto);
+  gap: var(--app-scale-2x, 10px);
+  align-items: center;
 }
 
 .q2-element-dropdown.dropup {

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

@@ -1,7 +1,9 @@
 import { h } from '@stencil/core';
 import { isEventFromElement, loc, overrideFocus } from 'src/utils';
+import { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';
 export class Q2Tag {
   constructor() {
+    var _a;
     this.activateFirstOption = false;
     /// Getters ///
     /// Helpers
@@ -24,14 +26,26 @@ export class Q2Tag {
       const { value } = event.detail;
       this.click.emit({ value });
     };
-    this.handleClick = (event) => {
+    this.handleClick = async (event) => {
       event.stopPropagation();
       this.activateFirstOption = false;
-      this.popoverElement.toggle();
+      if (shouldShowActionSheet(this)) {
+        const { value } = await showActionSheetList(this, event);
+        this.click.emit({ value });
+      }
+      else {
+        this.popoverElement.toggle();
+      }
     };
-    this.handleKeydown = (event) => {
+    this.handleKeydown = async (event) => {
       this.activateFirstOption = true;
-      this.optionList.handleExternalKeydown(event);
+      if (shouldShowActionSheet(this, event)) {
+        const { value } = await showActionSheetList(this, event);
+        this.click.emit({ value });
+      }
+      else {
+        this.optionList.handleExternalKeydown(event);
+      }
     };
     this.handleButtonFocusout = (event) => {
       var _a;
@@ -44,6 +58,7 @@ export class Q2Tag {
       this.dropdownBtn.focus();
       this.dropdownBtn.click();
     };
+    this.hoist = !!((_a = window.Tecton) === null || _a === void 0 ? void 0 : _a.useActionSheets);
     this.open = undefined;
     this.role = 'listitem';
     this.label = undefined;
@@ -91,7 +106,7 @@ export class Q2Tag {
     const wrapperClassNames = ['tag-wrapper'];
     if (hasOptions)
       wrapperClassNames.push('has-options');
-    return (h("click-elsewhere", { onChange: this.onClickElsewhere }, h("div", { class: wrapperClassNames.join(' '), onClick: e => e.stopPropagation() }, h("div", { class: "tag" }, this.label), this.hasOptions && (h("div", { class: "btn-wrapper", onClick: this.handleWrapperClick }, h("button", { ref: el => (this.dropdownBtn = el), "test-id": "btn-control", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-haspopup": "true", "aria-expanded": open ? 'true' : 'false', "aria-label": loc('tecton.element.tag.viewOptions') }, h("q2-icon", { type: "options" }))))), this.hasOptions && (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection }, h("q2-option-list", { id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, align: "right", type: "menu", "no-select": true }, h("slot", null))))));
+    return (h("click-elsewhere", { onChange: this.onClickElsewhere }, h("div", { class: wrapperClassNames.join(' '), onClick: e => e.stopPropagation() }, h("div", { class: "tag" }, this.label), this.hasOptions && (h("div", { class: "btn-wrapper", onClick: this.handleWrapperClick }, h("button", { ref: el => (this.dropdownBtn = el), "test-id": "btn-control", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-haspopup": "true", "aria-expanded": open ? 'true' : 'false', "aria-label": loc('tecton.element.tag.viewOptions') }, h("q2-icon", { type: "options" }))))), this.hasOptions && (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: "right" }, h("q2-option-list", { id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, align: "right", type: "menu", "no-select": true }, h("slot", null))))));
   }
   static get is() { return "q2-tag"; }
   static get encapsulation() { return "shadow"; }
@@ -107,6 +122,24 @@ export class Q2Tag {
   }
   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"
+      },
       "open": {
         "type": "boolean",
         "mutable": true,

package/dist/collection/utils/action-sheet.js

@@ -0,0 +1,79 @@
+export const shouldShowActionSheet = (component, event) => {
+  var _a;
+  const isDialogSupported = 'open' in document.createElement('dialog');
+  if (!isDialogSupported)
+    return false;
+  const canShowActionSheet = !!((_a = window.TectonElements) === null || _a === void 0 ? void 0 : _a.showActionSheet);
+  if (!canShowActionSheet)
+    return false;
+  const keysThatTriggerOpen = ['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp', 'Home', 'End'];
+  if (event) {
+    const eventIsKeyboardEvent = event instanceof KeyboardEvent;
+    const eventIsMouseEvent = event instanceof MouseEvent;
+    const keyboardEventShouldTriggerOpen = eventIsKeyboardEvent && keysThatTriggerOpen.includes(event.key);
+    const mouseEventShouldTriggerOpen = eventIsMouseEvent && event.type === 'click';
+    const eventShouldTriggerOpen = mouseEventShouldTriggerOpen || keyboardEventShouldTriggerOpen;
+    if (!eventShouldTriggerOpen)
+      return false;
+  }
+  if (component.hoist)
+    return true;
+  return false;
+};
+const parseOptions = (options) => {
+  const defaultOption = {
+    disabled: false,
+    display: '',
+    hidden: false,
+    multiline: false,
+    value: '',
+    innerHTML: '',
+  };
+  const optionPropsToGet = Object.keys(defaultOption);
+  const defaultOptgroup = {
+    disabled: false,
+    label: '',
+    options: [],
+  };
+  const optgroupPropsToGet = Object.keys(defaultOptgroup);
+  return options.map(option => {
+    if (option.tagName === 'Q2-OPTGROUP') {
+      const optgroup = option;
+      return optgroupPropsToGet.reduce((acc, prop) => {
+        if (prop === 'options') {
+          const options = Array.from(option.children).filter(child => child.tagName === 'Q2-OPTION' || child.tagName === 'Q2-OPTGROUP');
+          acc[prop] = parseOptions(options);
+        }
+        else {
+          acc[prop] = optgroup[prop];
+        }
+        return acc;
+      }, Object.assign({}, defaultOptgroup));
+    }
+    else if (option.tagName === 'Q2-OPTION') {
+      return optionPropsToGet.reduce((acc, prop) => {
+        acc[prop] = option[prop];
+        return acc;
+      }, Object.assign({}, defaultOption));
+    }
+  });
+};
+export const buildListData = async (component, event) => {
+  return {
+    appearance: 'list',
+    title: component.label || '',
+    description: '',
+    event,
+    listProps: {
+      multiple: !!component.optionList.multiple,
+      selectedOptions: component.optionList.selectedOptions || [],
+      noSelect: !!component.optionList.noSelect,
+    },
+    options: parseOptions(await component.optionList.getContents()),
+  };
+};
+export const showActionSheetList = async (component, event) => {
+  var _a;
+  const listData = await buildListData(component, event);
+  return (_a = window.TectonElements) === null || _a === void 0 ? void 0 : _a.showActionSheet(listData);
+};

package/dist/collection/utils/index.js

@@ -1,5 +1,24 @@
 import { h } from '@stencil/core';
 import smoothScroll from 'smoothscroll-polyfill';
+export 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);
+    }
+    return false;
+  };
+  if (!(elementGainingFocus instanceof HTMLElement))
+    return false;
+  return !isElementNestedInHostElement(elementGainingFocus);
+}
 export function isRelatedTargetWithinHost(event, element) {
   return event.relatedTarget !== element && !element.contains(event.relatedTarget);
 }
@@ -31,11 +50,13 @@ let guid = 1000;
 export function createGuid() {
   return guid++;
 }
-export function nextPaint(fn, execute) {
-  if (execute)
-    fn();
-  else
-    requestAnimationFrame(() => nextPaint(fn, true));
+export function nextPaint(fn) {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(fn);
+  });
+}
+export function waitForNextPaint() {
+  return new Promise(resolve => nextPaint(resolve));
 }
 export function capitalize(value) {
   return `${value.charAt(0).toUpperCase()}${value.slice(1)}`;
@@ -51,7 +72,7 @@ export function loc(key, subs) {
   var _a, _b, _c;
   if (!key)
     return '';
-  if (((_a = window.Tecton) === null || _a === void 0 ? void 0 : _a.noString) === true) {
+  if (((_a = window.Tecton) === null || _a === void 0 ? void 0 : _a.noStrings) === true) {
     return key;
   }
   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;
@@ -100,6 +121,7 @@ export function setMessageHeight(target) {
   });
 }
 export function setPopProperties(target) {
+  var _a, _b, _c, _d;
   const { dropdownContainer, popDirection } = target;
   if (dropdownContainer) {
     dropdownContainer.style.maxHeight = null;
@@ -114,7 +136,9 @@ export function setPopProperties(target) {
   const dropdownHeight = dropdownContainer.getBoundingClientRect().height;
   dropdownContainer.classList.remove('sizable');
   const { top: topOffset, height } = controlElement.getBoundingClientRect();
-  const bottomOffset = window.innerHeight - topOffset - height;
+  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

package/dist/components/action-sheet.js

@@ -0,0 +1,81 @@
+const shouldShowActionSheet = (component, event) => {
+  var _a;
+  const isDialogSupported = 'open' in document.createElement('dialog');
+  if (!isDialogSupported)
+    return false;
+  const canShowActionSheet = !!((_a = window.TectonElements) === null || _a === void 0 ? void 0 : _a.showActionSheet);
+  if (!canShowActionSheet)
+    return false;
+  const keysThatTriggerOpen = ['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp', 'Home', 'End'];
+  if (event) {
+    const eventIsKeyboardEvent = event instanceof KeyboardEvent;
+    const eventIsMouseEvent = event instanceof MouseEvent;
+    const keyboardEventShouldTriggerOpen = eventIsKeyboardEvent && keysThatTriggerOpen.includes(event.key);
+    const mouseEventShouldTriggerOpen = eventIsMouseEvent && event.type === 'click';
+    const eventShouldTriggerOpen = mouseEventShouldTriggerOpen || keyboardEventShouldTriggerOpen;
+    if (!eventShouldTriggerOpen)
+      return false;
+  }
+  if (component.hoist)
+    return true;
+  return false;
+};
+const parseOptions = (options) => {
+  const defaultOption = {
+    disabled: false,
+    display: '',
+    hidden: false,
+    multiline: false,
+    value: '',
+    innerHTML: '',
+  };
+  const optionPropsToGet = Object.keys(defaultOption);
+  const defaultOptgroup = {
+    disabled: false,
+    label: '',
+    options: [],
+  };
+  const optgroupPropsToGet = Object.keys(defaultOptgroup);
+  return options.map(option => {
+    if (option.tagName === 'Q2-OPTGROUP') {
+      const optgroup = option;
+      return optgroupPropsToGet.reduce((acc, prop) => {
+        if (prop === 'options') {
+          const options = Array.from(option.children).filter(child => child.tagName === 'Q2-OPTION' || child.tagName === 'Q2-OPTGROUP');
+          acc[prop] = parseOptions(options);
+        }
+        else {
+          acc[prop] = optgroup[prop];
+        }
+        return acc;
+      }, Object.assign({}, defaultOptgroup));
+    }
+    else if (option.tagName === 'Q2-OPTION') {
+      return optionPropsToGet.reduce((acc, prop) => {
+        acc[prop] = option[prop];
+        return acc;
+      }, Object.assign({}, defaultOption));
+    }
+  });
+};
+const buildListData = async (component, event) => {
+  return {
+    appearance: 'list',
+    title: component.label || '',
+    description: '',
+    event,
+    listProps: {
+      multiple: !!component.optionList.multiple,
+      selectedOptions: component.optionList.selectedOptions || [],
+      noSelect: !!component.optionList.noSelect,
+    },
+    options: parseOptions(await component.optionList.getContents()),
+  };
+};
+const showActionSheetList = async (component, event) => {
+  var _a;
+  const listData = await buildListData(component, event);
+  return (_a = window.TectonElements) === null || _a === void 0 ? void 0 : _a.showActionSheet(listData);
+};
+
+export { showActionSheetList as a, shouldShowActionSheet as s };