q2-tecton-elements 1.23.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)}`;

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

package/dist/components/index.d.ts

@@ -1,5 +1,6 @@
 /* Q2TectonElements custom elements */
 export { ClickElsewhere as ClickElsewhere } from '../types/components/click-elsewhere/index';
+export { Q2ActionSheet as Q2ActionSheet } from '../types/components/q2-action-sheet/index';
 export { Q2Avatar as Q2Avatar } from '../types/components/q2-avatar/index';
 export { Q2Badge as Q2Badge } from '../types/components/q2-badge/index';
 export { Q2Btn as Q2Btn } from '../types/components/q2-btn/index';

package/dist/components/index.js

@@ -1,5 +1,6 @@
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
 export { ClickElsewhere, defineCustomElement as defineCustomElementClickElsewhere } from './click-elsewhere.js';
+export { Q2ActionSheet, defineCustomElement as defineCustomElementQ2ActionSheet } from './q2-action-sheet.js';
 export { Q2Avatar, defineCustomElement as defineCustomElementQ2Avatar } from './q2-avatar.js';
 export { Q2Badge, defineCustomElement as defineCustomElementQ2Badge } from './q2-badge.js';
 export { Q2Btn, defineCustomElement as defineCustomElementQ2Btn } from './q2-btn.js';

package/dist/components/index10.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { j as isFirefox, o as overrideFocus, n as nextPaint, i as isEventFromElement } from './index13.js';
+import { k as isFirefox, o as overrideFocus, n as nextPaint, i as isEventFromElement } from './index15.js';
 import { 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}:host{display:block}:host([hidden]){display:none}.message{border-left-width:var(--tct-message-bar-width, var(--t-message-bar-width, var(--app-scale-1x, 5px)));border-left-style:solid;--comp-line-height:var(--tct-message-line-height, var(--t-message-line-height, var(--app-line-height, 1.428571429em)));display:grid;gap:var(--tct-scale-1, var(--app-scale-1x, 5px));align-items:flex-start;background:var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));color:var(--tct-message-font-color, var(--t-message-font-color, inherit));box-shadow:var(--tct-message-box-shadow, var(--t-message-box-shadow, inherit));border-radius:var(--tct-message-border-radius, var(--t-message-border-radius, inherit))}.message:focus{box-shadow:var(--const-global-focus)}.message-icon{--comp-top-offset:calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);--tct-icon-size:var(--comp-icon-size);top:var(--comp-top-offset);margin-bottom:calc(var(--comp-top-offset) * -1)}.message-content{flex:1;line-height:var(--comp-line-height)}::slotted(ul){padding-left:var(--tct-scale-l3, var(--app-scale-3x, 15px))}:host(:not([appearance])),:host([appearance=standard]){margin:var(--tct-scale-l3, var(--app-scale-3x, 15px)) 0}:host(:not([appearance])) .message,:host([appearance=standard]) .message{--comp-icon-size:var(--tct-message-icon-size, var(--t-message-icon-size, 24px));--comp-padding:var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3x, 15px)));grid-template-columns:var(--comp-icon-size) 1fr;padding:var(--comp-padding);padding-left:calc(var(--comp-padding) - var(--tct-scale-2, var(--app-scale-2x, 10px)));padding-bottom:calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1x, 5px)))}:host(:not([appearance])) ::slotted(ul),:host([appearance=standard]) ::slotted(ul){margin:var(--tct-scale-l3, var(--app-scale-3x, 15px)) 0}:host([appearance=minimal]){margin:0}:host([appearance=minimal]) .message{padding:var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2x, 10px)));grid-template-columns:1fr}:host([appearance=minimal]) ::slotted(ul){margin:var(--tct-scale-1, var(--app-scale-1x, 5px)) 0}:host(:not([type])) .message,:host([type=info]) .message{border-left-color:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host(:not([type])) .message-icon,:host([type=info]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));--tct-icon-stroke-secondary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]) .message{border-left-color:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=success]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));--tct-icon-stroke-secondary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]) .message{border-left-color:var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400))}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400))}:host([type=error]) .message,:host([type=danger]) .message{border-left-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}";