q2-tecton-elements 1.10.4 → 1.10.7

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

@@ -1,5 +1,5 @@
 import { Component, Prop, Element, h, Listen, State, Event, Watch } from '@stencil/core';
-import { createGuid, handleAriaLabel, loc, setPopProperties } from 'src/utils';
+import { createGuid, handleAriaLabel, isEventFromElement, loc, overrideFocus, setPopProperties } from 'src/utils';
 export class Q2Select {
   constructor() {
     this.selectedOptions = [];
@@ -82,6 +82,144 @@ export class Q2Select {
       }
     };
     ////// ACTIONS ////////
+    this.dropdownFocusoutHandler = (event) => {
+      const { relatedTarget } = event;
+      const isInDropdown = this.dropdownContainer.contains(relatedTarget);
+      const isInLightDom = !isInDropdown && this.hostElement.contains(relatedTarget);
+      if (isInDropdown || isInLightDom)
+        return;
+      if (!this.dropdownOpen)
+        return;
+      this.closeDropdown();
+    };
+    this.dropdownKeydownHandler = (event) => {
+      event.stopPropagation();
+      const { activeIndex, searchable, optionElements, multiSelectHeader } = this;
+      const { key, shiftKey } = event;
+      if (multiSelectHeader &&
+        multiSelectHeader.contains(event.target) &&
+        [' ', 'Enter'].includes(key))
+        return;
+      switch (key) {
+        case ' ':
+        case 'Enter':
+          event.preventDefault();
+          event.stopPropagation();
+          const newOption = this.hostElement.querySelector(`[option-id="${this.activeOptionId}"]`);
+          if (!newOption || newOption.disabled)
+            break;
+          this.selectOption(newOption.value, true);
+          break;
+        case 'ArrowUp':
+          event.preventDefault();
+          const isFirstOption = activeIndex === 0;
+          if (isFirstOption)
+            break;
+          if (activeIndex !== undefined) {
+            const nextIndex = this.getNextVisibleIndex(-1);
+            if (nextIndex === -1)
+              break;
+            this.adjustActiveOptionAndScroll(nextIndex - activeIndex);
+          }
+          else {
+            this.setDefaultActiveElement();
+          }
+          break;
+        case 'ArrowDown':
+          event.preventDefault();
+          const isLastOption = activeIndex === optionElements.length - 1;
+          if (isLastOption)
+            break;
+          if (activeIndex !== undefined) {
+            const nextIndex = this.getNextVisibleIndex(1);
+            if (nextIndex === -1)
+              break;
+            this.adjustActiveOptionAndScroll(nextIndex - activeIndex);
+          }
+          else {
+            this.setDefaultActiveElement();
+          }
+          break;
+        case 'Home':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(0);
+          break;
+        case 'End':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(optionElements.length - 1);
+          break;
+        case 'PageUp':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(Math.max(activeIndex - 10, 0));
+          break;
+        case 'PageDown':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(Math.min(activeIndex + 10, optionElements.length - 1));
+          break;
+        case 'Tab':
+          if (shiftKey)
+            break;
+          const myOption = this.hostElement.querySelector(`[option-id="${this.activeOptionId}"]`);
+          if (!myOption || myOption.disabled)
+            return;
+          this.selectOption(myOption.value);
+          break;
+        case 'Esc':
+        case 'Escape':
+          this.closeDropdown();
+          this.focusInput();
+          break;
+        default:
+          if (searchable)
+            break;
+          if (!key.match(/^[A-Za-z0-9]$/))
+            break;
+          // search in non-searchable select: alpha-numeric only
+          this.searchAndFocus(key);
+          break;
+      }
+    };
+    this.inputKeydownHandler = (event) => {
+      const { key } = event;
+      const { optionElements, dropdownOpen, searchable } = this;
+      switch (key) {
+        case 'ArrowDown':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(this.getDefaultActiveIndex());
+          break;
+        case 'ArrowUp':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(this.getLastEnabledIndex());
+          this.setFocusedOption();
+          break;
+        case 'Home':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(0);
+          break;
+        case 'End':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(optionElements.length - 1);
+          break;
+        case 'Escape':
+        case 'Esc':
+          if (dropdownOpen) {
+            this.closeDropdown();
+          }
+          else {
+            this.searchText = '';
+          }
+          break;
+        default:
+          if (searchable) {
+            this.openDropdownWithoutActiveElement();
+            break;
+          }
+          if (!key.match(/^[A-Za-z0-9]$/))
+            break;
+          // search in non-searchable select: alpha-numeric only
+          this.searchAndFocus(key);
+      }
+    };
     this.inputClickHandler = (event) => {
       event.stopPropagation();
       setPopProperties(this);
@@ -90,32 +228,11 @@ export class Q2Select {
     };
     this.inputInputHandler = (event) => {
       event.stopPropagation();
-      if (!this.dropdownOpen) {
+      if (!this.dropdownOpen)
         this.openDropdownWithoutActiveElement();
-      }
       this.searchText = event.detail.value;
       this.input.emit({ query: event.detail.value });
     };
-    this.inputKeydownHandler = (event) => {
-      if (event.key === 'Enter' && this.dropdownOpen) {
-        event.preventDefault();
-        const newOption = this.hostElement.querySelector(`[option-id="${this.activeOptionId}"]`);
-        newOption && !newOption.disabled && this.selectOption(newOption.value);
-      }
-      if (['Escape', 'Esc'].includes(event.key)) {
-        this.closeDropdown();
-        this.focusInput();
-      }
-      if (event.key === 'Tab') {
-        if (this.dropdownOpen && this.searchable && event.shiftKey) {
-          event.preventDefault();
-          this.focusInput();
-        }
-        else {
-          this.dropdownOpen && !this.multiple && event.preventDefault();
-        }
-      }
-    };
     this.inputFocusHandler = () => {
       this.inputFocused = true;
     };
@@ -125,16 +242,6 @@ export class Q2Select {
     this.inputChangeHandler = (event) => {
       event.stopPropagation();
     };
-    this.showAllOptionTabKeyDown = (event) => {
-      if (event.key === 'Tab' && !event.shiftKey && this.selectedOptionsCount === 0) {
-        event.preventDefault();
-      }
-    };
-    this.showSelectedOptionTabKeyDown = (event) => {
-      if (event.key === 'Tab' && !event.shiftKey) {
-        event.preventDefault();
-      }
-    };
     this.clickedElsewhere = (event) => {
       const target = event.target;
       if (target.localName === 'click-elsewhere') {
@@ -144,13 +251,15 @@ export class Q2Select {
         }
       }
     };
-    this.showSelectedOptions = () => {
+    this.showSelectedOptions = (event) => {
+      event.stopImmediatePropagation();
       this.onlyShowingSelected = true;
       this.optionElements.forEach(optionElement => {
         optionElement._multiSelectHidden = !optionElement.selected;
       });
     };
-    this.showAllOptions = () => {
+    this.showAllOptions = (event) => {
+      event.stopPropagation();
       this.onlyShowingSelected = false;
       this.optionElements.forEach(optionElement => {
         optionElement._multiSelectHidden = false;
@@ -177,12 +286,20 @@ export class Q2Select {
     else
       return 0;
   }
+  getLastEnabledIndex() {
+    const enabledIndexes = this.optionElements.reduce((acc, element, index) => {
+      if (!element.hidden && !element.disabled)
+        acc.push(index);
+      return acc;
+    }, []);
+    return enabledIndexes[enabledIndexes.length - 1];
+  }
   setActiveOption() {
-    if (!this.dropdownOpen) {
+    if (!this.dropdownOpen)
       return;
-    }
+    const activeIndex = this.activeIndex;
     this.optionElements.forEach((element, elementIndex) => {
-      if (this.activeIndex === elementIndex) {
+      if (activeIndex === elementIndex) {
         element.active = true;
         this.activeOptionId = element.optionId;
       }
@@ -193,6 +310,8 @@ export class Q2Select {
   }
   setFocusedOption() {
     const option = this.optionElements[this.activeIndex];
+    if (!option)
+      return;
     option.dispatchEvent(new FocusEvent('focus'));
     option.focus();
   }
@@ -230,7 +349,7 @@ export class Q2Select {
     if (this.hasCustomDisplay && !this.searchText) {
       return '';
     }
-    if (this.searchable && this.dropdownOpen) {
+    if (this.searchable && this.dropdownOpen && !this.value) {
       // when dropdown is open search selects show typing
       // when closed they display the same as non searchable select (what is selected)
       return this.searchText || '';
@@ -270,7 +389,7 @@ export class Q2Select {
       element.multiline = this.multilineOptions;
     });
   }
-  selectOption(value) {
+  selectOption(value, focusInputOnClose = false) {
     if (this.multiple) {
       const isSelected = this.selectedOptions.includes(value);
       if (isSelected) {
@@ -285,7 +404,8 @@ export class Q2Select {
     else {
       this.change.emit({ value });
       this.closeDropdown();
-      this.focusInput();
+      if (focusInputOnClose)
+        this.focusInput();
     }
   }
   scrollToActiveOption() {
@@ -303,9 +423,7 @@ export class Q2Select {
     this.dropdownOpen = true;
     this.setActiveOption();
     this.scheduledAfterRender.push(() => {
-      if (!this.searchable) {
-        this.setFocusedOption();
-      }
+      this.setFocusedOption();
       this.scrollToActiveOption();
       this.resizeIframe();
     });
@@ -348,8 +466,8 @@ export class Q2Select {
     this.setFocusedOption();
   }
   focusInput() {
-    const input = this.hostElement.shadowRoot.querySelector('q2-input');
-    input && input.dispatchEvent(new FocusEvent('focus'));
+    var _a;
+    (_a = this.inputField) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new FocusEvent('focus'));
   }
   getNextVisibleIndex(direction) {
     let index = this.activeIndex + direction;
@@ -371,6 +489,7 @@ export class Q2Select {
     observer.observe(this.hostElement, { childList: true, subtree: true });
     this.mutationObserver = observer;
     this.onMutationObserved();
+    overrideFocus(this.hostElement);
   }
   componentDidRender() {
     setTimeout(() => {
@@ -443,6 +562,11 @@ export class Q2Select {
       this.setStatusMessage(loc(statusMessageLocString, [count]));
     }
   }
+  delegateFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    this.inputField.shadowRoot.querySelector('.input-field').focus();
+  }
   setStatusMessage(message) {
     clearTimeout(this.statusMessageTimer);
     this.statusMessage = '';
@@ -455,89 +579,10 @@ export class Q2Select {
     if (target.localName !== 'q2-option' || target.disabled) {
       return;
     }
-    this.selectOption(target.value);
+    this.selectOption(target.value, true);
   }
   keydownHandler(event) {
-    event.stopPropagation();
-    const { dropdownOpen, activeIndex, searchable, multiple, optionElements } = this;
-    const { key, shiftKey } = event;
-    switch (key) {
-      case 'Enter':
-        if (!dropdownOpen)
-          break;
-        event.preventDefault();
-        const newOption = this.hostElement.querySelector(`[option-id="${this.activeOptionId}"]`);
-        if (newOption === null || newOption === void 0 ? void 0 : newOption.disabled)
-          break;
-        this.selectOption(newOption.value);
-        break;
-      case 'ArrowUp':
-        event.preventDefault();
-        if (!dropdownOpen) {
-          this.openDropdownWithActiveElement(this.getDefaultActiveIndex());
-          break;
-        }
-        if (activeIndex > 0) {
-          const nextIndex = this.getNextVisibleIndex(-1);
-          if (nextIndex > -1) {
-            this.adjustActiveOptionAndScroll(nextIndex - activeIndex);
-          }
-        }
-        else if (activeIndex !== 0) {
-          this.setDefaultActiveElement();
-        }
-        break;
-      case 'ArrowDown':
-        event.preventDefault();
-        if (!dropdownOpen) {
-          this.openDropdownWithActiveElement(this.getDefaultActiveIndex());
-          break;
-        }
-        if (activeIndex < optionElements.length - 1) {
-          const nextIndex = this.getNextVisibleIndex(1);
-          if (nextIndex > -1) {
-            this.adjustActiveOptionAndScroll(nextIndex - this.activeIndex);
-          }
-        }
-        else if (!activeIndex) {
-          this.setDefaultActiveElement();
-        }
-        break;
-      case 'Home':
-        if (!dropdownOpen)
-          break;
-        event.preventDefault();
-        this.adjustActiveOptionAndScroll(0);
-        break;
-      case 'End':
-        if (!dropdownOpen)
-          break;
-        event.preventDefault();
-        this.adjustActiveOptionAndScroll(optionElements.length - 1);
-        break;
-      case 'Escape':
-        this.closeDropdown();
-        this.focusInput();
-        break;
-      case 'Tab':
-        if (!dropdownOpen)
-          break;
-        if ((searchable && shiftKey) || !multiple) {
-          event.preventDefault();
-        }
-        if (searchable && shiftKey) {
-          this.focusInput();
-        }
-        break;
-      default:
-        if (searchable)
-          break;
-        if (!key.match(/^[A-Za-z0-9]$/))
-          break;
-        // search in non-searchable select: alpha-numeric only
-        this.searchAndFocus(key);
-        break;
-    }
+    this.inputKeydownHandler(event);
   }
   render() {
     return (h("click-elsewhere", { class: this.wrapperClasses, onChange: this.clickedElsewhere },
@@ -553,16 +598,16 @@ export class Q2Select {
   }
   optionsDropdown() {
     const dropDirection = this.privatePopDirection === 'up' ? 'dropup' : '';
-    return (h("div", { class: `q2-select-dropdown q2-element-dropdown ${dropDirection}`, ref: el => (this.dropdownContainer = el) },
+    return (h("div", { class: `q2-select-dropdown q2-element-dropdown ${dropDirection}`, ref: el => (this.dropdownContainer = el), onKeyDown: this.dropdownKeydownHandler, onFocusout: this.dropdownFocusoutHandler },
       this.multiple ? this.visibilityToggle() : '',
       h("div", { class: "q2-select-options", id: "dropdown", role: "listbox" },
         h("slot", null))));
   }
   visibilityToggle() {
-    return (h("div", { class: "multi-select-header" },
+    return (h("div", { class: "multi-select-header", ref: el => (this.multiSelectHeader = el) },
       loc('tecton.element.select.multiHeader.showing'),
-      h("q2-btn", { class: `option-toggle show-all-options${this.onlyShowingSelected ? '' : ' selected'}`, badge: true, "aria-selected": !this.onlyShowingSelected || undefined, "test-id": "allOptionsButton", onClick: this.showAllOptions, onKeyDown: this.showAllOptionTabKeyDown, label: loc('tecton.element.select.multiHeader.allAriaLabel'), "hide-label": true }, loc('tecton.element.select.multiHeader.all')),
-      h("q2-btn", { class: `option-toggle show-selected-options${this.onlyShowingSelected ? ' selected' : ''}`, "aria-selected": this.onlyShowingSelected || undefined, disabled: this.selectedOptions.length === 0, badge: true, "test-id": "selectedOptionsButton", onClick: this.showSelectedOptions, onKeyDown: this.showSelectedOptionTabKeyDown, label: loc('tecton.element.select.multiHeader.selectedAriaLabel', [
+      h("q2-btn", { class: `option-toggle show-all-options${this.onlyShowingSelected ? '' : ' selected'}`, badge: true, "aria-selected": !this.onlyShowingSelected || undefined, "test-id": "allOptionsButton", onClick: this.showAllOptions, label: loc('tecton.element.select.multiHeader.allAriaLabel'), "hide-label": true }, loc('tecton.element.select.multiHeader.all')),
+      h("q2-btn", { class: `option-toggle show-selected-options${this.onlyShowingSelected ? ' selected' : ''}`, "aria-selected": this.onlyShowingSelected || undefined, disabled: this.selectedOptions.length === 0, badge: true, "test-id": "selectedOptionsButton", onClick: this.showSelectedOptions, label: loc('tecton.element.select.multiHeader.selectedAriaLabel', [
           this.selectedOptionsCount
         ]), "hide-label": true }, loc('tecton.element.select.multiHeader.selected', [this.selectedOptionsCount]))));
   }
@@ -885,6 +930,12 @@ export class Q2Select {
       "target": undefined,
       "capture": false,
       "passive": false
+    }, {
+      "name": "focus",
+      "method": "delegateFocus",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }, {
       "name": "click",
       "method": "clickHandler",

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

@@ -1,67 +1,67 @@
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 *:active {
-    outline: none;
+  outline: none;
 }
 
 *:focus {
-    outline: none;
-    box-shadow: var(--const-global-focus);
+  outline: none;
+  box-shadow: var(--const-global-focus);
 }
 
 :host {
-    box-shadow: none !important;
+  box-shadow: none !important;
 }
 
 ::-moz-focus-inner {
-    border: none;
+  border: none;
 }
 
 input,
 textarea,
 button {
-    font-family: inherit;
-    font-size: inherit;
+  font-family: inherit;
+  font-size: 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;
+  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;
+  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;
+  display: none;
 }
 
 :host([hidden]) {
-    display: none;
+  display: none;
 }
 
 .invisible {
-    visibility: hidden;
+  visibility: hidden;
 }
 
 .q2-element-dropdown {
@@ -79,10 +79,10 @@ button {
   opacity: 0;
   visibility: hidden;
   transition: opacity var(--app-tween-1);
-  border-radius: var(--tct-dropdown-element-br, 0);
-  --comp-scrollbar-size: var(--tct-scrollbar-size, var(--app-scale-1x, 5px));
-  --comp-scrollbar-border-radius: var(--tct-scrollbar-border-radius, var(--app-border-radius-1, 3px));
-  --comp-scrollbar-color: var(--tct-scrollbar-color, var(--t-a11y-gray-color, #747474));
+  border-radius: var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);
+  --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;
 }
@@ -111,7 +111,6 @@ button {
   overflow: auto;
   opacity: 1;
   visibility: visible;
-  margin-bottom: var(--app-scale-2);
 }
 
 :host([alignment=right]) .q2-element-dropdown {

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

@@ -1,5 +1,5 @@
 import { Component, Prop, h, Element, State, Watch, Listen, Event, Fragment } from '@stencil/core';
-import { loc, addSmoothScrollPolyfill } from 'src/utils';
+import { loc, addSmoothScrollPolyfill, overrideFocus, isEventFromElement } from 'src/utils';
 addSmoothScrollPolyfill();
 export class Q2Stepper {
   constructor() {
@@ -81,6 +81,7 @@ export class Q2Stepper {
   componentDidLoad() {
     this.resizeObserver.observe(this.listElement);
     this.checkScrollState();
+    overrideFocus(this.hostElement);
     setTimeout(() => this.showStep(this.currentStep || 1), 0);
   }
   componentDidRender() {
@@ -103,6 +104,11 @@ export class Q2Stepper {
       this.currentStep = event.detail.selectedStep;
     }
   }
+  delegateFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    this.focusStep(this.currentStep, true, true);
+  }
   ////////// GETTER METHODS ////////
   get allPanes() {
     return this.hostElement.querySelectorAll('q2-stepper-pane');
@@ -132,13 +138,13 @@ export class Q2Stepper {
       pane.isActive = stepNumber === index + 1;
     });
   }
-  focusStep(stepNumber, scrollIntoView) {
+  focusStep(stepNumber, scrollIntoView, forceFocus) {
     var _a;
     const stepListItem = this.listElement.children[stepNumber - 1];
     const isActive = document.activeElement === this.hostElement;
     if (!stepListItem)
       return;
-    if (isActive) {
+    if (isActive || forceFocus) {
       (_a = stepListItem.firstElementChild) === null || _a === void 0 ? void 0 : _a.focus();
     }
     if (scrollIntoView) {
@@ -279,5 +285,11 @@ export class Q2Stepper {
       "target": undefined,
       "capture": false,
       "passive": false
+    }, {
+      "name": "focus",
+      "method": "delegateFocus",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }]; }
 }