q2-tecton-elements 1.9.7 → 1.10.2

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

@@ -1,28 +1,95 @@
-import { Component, Prop, h, Element } from '@stencil/core';
+import { Component, Prop, h, Event, Element, Watch, Fragment } from '@stencil/core';
 export class Q2Option {
   constructor() {
+    this.role = 'option';
+    this.tabindex = '-1';
     this._multiSelectHidden = false;
-    this.onOptionClick = (event) => {
+    this.onClick = (event) => {
       event.stopImmediatePropagation();
-      const disabled = this.disabled || this.disabledGroup;
-      !disabled && this.hostElement.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+      const { disabled, disabledGroup } = this;
+      if (disabled || disabledGroup)
+        return;
+      this.click.emit();
     };
   }
+  connectedCallback() {
+    this.checkDisabledStatus();
+    this.checkSelectedStatus();
+    this.checkMultiSelectHiddenStatus();
+  }
+  checkDisabledStatus() {
+    const { disabled, disabledGroup, hostElement } = this;
+    const isDisabled = disabled || disabledGroup;
+    if (isDisabled)
+      hostElement.setAttribute('aria-disabled', 'true');
+    else
+      hostElement.removeAttribute('aria-disabled');
+  }
+  checkSelectedStatus() {
+    const { selected, hostElement } = this;
+    if (selected)
+      hostElement.setAttribute('aria-selected', 'true');
+    else
+      hostElement.removeAttribute('aria-selected');
+  }
+  checkMultiSelectHiddenStatus() {
+    const { _multiSelectHidden, hostElement } = this;
+    if (_multiSelectHidden)
+      hostElement.setAttribute('aria-hidden', 'true');
+    else
+      hostElement.removeAttribute('aria-hidden');
+  }
   render() {
-    return (h("div", { role: "option", "aria-selected": `${this.selected}`, "aria-disabled": `${this.disabledGroup || this.disabled || false}`, id: this.optionId, hidden: this._multiSelectHidden || this.hidden || false, class: "q2-option-container", tabindex: "0", onClick: this.onOptionClick },
-      h("div", { class: "q2-option-selection" }, this.selected ? (h("q2-icon", { type: "checkmark", class: "q2-option-selection-icon" })) : ('')),
-      h("div", { class: "q2-option-content" },
+    return (h(Fragment, null,
+      this.selected && h("q2-icon", { type: "checkmark" }),
+      h("div", { class: "content", onClick: this.onClick },
         h("slot", null))));
   }
   static get is() { return "q2-option"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["styles.css"]
+    "$": ["styles.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["styles.css"]
   }; }
   static get properties() { return {
+    "role": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "role",
+      "reflect": true,
+      "defaultValue": "'option'"
+    },
+    "tabindex": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "tabindex",
+      "reflect": true,
+      "defaultValue": "'-1'"
+    },
     "display": {
       "type": "string",
       "mutable": false,
@@ -195,5 +262,34 @@ export class Q2Option {
       "defaultValue": "false"
     }
   }; }
+  static get events() { return [{
+      "method": "click",
+      "name": "click",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
   static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "disabled",
+      "methodName": "checkDisabledStatus"
+    }, {
+      "propName": "disabledGroup",
+      "methodName": "checkDisabledStatus"
+    }, {
+      "propName": "selected",
+      "methodName": "checkSelectedStatus"
+    }, {
+      "propName": "_multiSelectHidden",
+      "methodName": "checkMultiSelectHiddenStatus"
+    }]; }
 }

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

@@ -64,54 +64,48 @@ button {
     visibility: hidden;
 }
 
-
 :host {
-    display: block;
-}
-
-.q2-option-container {
-    --comp-option-selected-icon-size: var(
-        --tct-option-selected-icon-size,
-        var(--tct-scale-3, var(--app-scale-3, 15px))
-    );
+  padding: 0 var(--tct-scale-2, var(--app-scale-2, 10px));
+  min-height: 44px;
+  align-items: center;
+  cursor: pointer;
+  grid-template-columns: var(--tct-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3, 15px))) 1fr;
+  align-items: center;
+  grid-template-areas: "icon content";
+  gap: var(--tct-scale-1, var(--app-scale-1, 5px));
 }
 
-.q2-option-container:not([hidden]) {
-    padding: var(--tct-scale-2, var(--app-scale-2, 10px));
-    min-height: 44px;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
+:host([aria-disabled]) {
+  cursor: not-allowed;
+  opacity: var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4));
+  pointer-events: none;
 }
 
-.q2-option-container[aria-disabled='true'] {
-    cursor: not-allowed;
-    opacity: var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4));
+:host([aria-hidden]) {
+  display: none;
 }
 
-.q2-option-container:not([aria-disabled='true']):hover,
-:host([active]) .q2-option-container,
-:host(:focus) .q2-option-container {
-    background-color: var(--tct-option-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))));
-    color: var(--tct-option-active-font-color, inherit);
+:host(:not([hidden]):not([aria-hidden])) {
+  display: grid;
 }
 
-.q2-option-selection {
-    flex: 0 0 var(--comp-option-selected-icon-size);
-    margin-right: var(--tct-scale-1, var(--app-scale-1, 5px));
+:host(:not([aria-disabled]):hover),
+:host([active]),
+:host(:focus) {
+  background-color: var(--tct-option-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))));
 }
 
-.q2-option-selection-icon {
-    width: var(--comp-option-selected-icon-size);
-    height: var(--comp-option-selected-icon-size);
+q2-icon {
+  grid-area: icon;
+  --tct-icon-size: var(--tct-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3, 15px)));
 }
 
-.q2-option-content {
-    flex: 1 1 auto;
-}
-
-:host(:not([multiline])) .q2-option-content {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+.content {
+  display: block;
+  grid-area: content;
 }
+:host(:not([multiline])) .content {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

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

@@ -19,7 +19,6 @@ export class Q2Select {
       lastPressedAt: new Date()
     };
     this.guid = createGuid();
-    this.dropdownId = `q2-select-dropdown-${this.guid}`;
     this.onMutationObserved = () => {
       const slotContainer = this.hostElement.querySelector('.custom-display-content');
       const displaySlot = this.hostElement.shadowRoot.querySelector('slot[name="q2-select-display"]');
@@ -170,7 +169,13 @@ export class Q2Select {
   }
   getDefaultActiveIndex() {
     const firstSelected = this.optionElements.findIndex(element => element.selected);
-    return firstSelected > -1 ? firstSelected : 0;
+    if (firstSelected > -1)
+      return firstSelected;
+    const firstEnabled = this.optionElements.findIndex(element => !element.hidden);
+    if (firstEnabled > -1)
+      return firstEnabled;
+    else
+      return 0;
   }
   setActiveOption() {
     if (!this.dropdownOpen) {
@@ -187,9 +192,9 @@ export class Q2Select {
     });
   }
   setFocusedOption() {
-    const ele = this.optionElements[this.activeIndex].shadowRoot.querySelector('div');
-    ele.dispatchEvent(new FocusEvent('focus'));
-    ele.focus();
+    const option = this.optionElements[this.activeIndex];
+    option.dispatchEvent(new FocusEvent('focus'));
+    option.focus();
   }
   calculateMultiSelectSelectedDisplay() {
     if (this.selectedOptions.length === 1) {
@@ -218,7 +223,7 @@ export class Q2Select {
   get minPopHeight() {
     const { minRows } = this;
     const firstOption = this.hostElement.querySelector('q2-option:not([hidden])');
-    const minHeight = window.getComputedStyle(firstOption.shadowRoot.querySelector('.q2-option-container')).minHeight;
+    const minHeight = window.getComputedStyle(firstOption).minHeight;
     return minRows * parseInt(minHeight);
   }
   get selectedDisplay() {
@@ -285,7 +290,7 @@ export class Q2Select {
   }
   scrollToActiveOption() {
     const activeOption = this.optionElements[this.activeIndex];
-    activeOption && activeOption.scrollIntoView({ block: 'nearest' });
+    activeOption === null || activeOption === void 0 ? void 0 : activeOption.scrollIntoView({ block: 'nearest' });
   }
   openDropdownWithoutActiveElement() {
     this.activeIndex = undefined;
@@ -334,17 +339,13 @@ export class Q2Select {
   adjustActiveOptionAndScroll(numToAdd) {
     this.activeIndex += numToAdd;
     this.setActiveOption();
-    if (!this.searchable) {
-      this.setFocusedOption();
-    }
+    this.setFocusedOption();
     this.scrollToActiveOption();
   }
   setDefaultActiveElement() {
     this.activeIndex = this.getDefaultActiveIndex();
     this.setActiveOption();
-    if (!this.searchable) {
-      this.setFocusedOption();
-    }
+    this.setFocusedOption();
   }
   focusInput() {
     const input = this.hostElement.shadowRoot.querySelector('q2-input');
@@ -421,19 +422,34 @@ export class Q2Select {
     if (this.searchable && event.target === this.hostElement && !this.hostElement.oninput) {
       const options = this.optionElements;
       const query = event.detail.query.trim().toLowerCase();
+      let matchedCount = 0;
       options.forEach(option => {
         if (query === '') {
           option.style.display = '';
         }
         else {
-          let { display = '', innerText = '' } = option;
-          let matched = display.toLowerCase().includes(query) ||
+          const { display = '', innerText = '' } = option;
+          const matched = display.toLowerCase().includes(query) ||
             innerText.toLowerCase().includes(query);
-          option.style.display = matched ? '' : 'none';
+          option.hidden = !matched;
+          if (matched)
+            matchedCount++;
         }
       });
+      let statusMessageLocString = query
+        ? 'tecton.element.select.searchable.results'
+        : 'tecton.element.select.allOptions';
+      const count = query ? matchedCount : options.length;
+      this.setStatusMessage(loc(statusMessageLocString, [count]));
     }
   }
+  setStatusMessage(message) {
+    clearTimeout(this.statusMessageTimer);
+    this.statusMessage = '';
+    this.statusMessageTimer = setTimeout(() => {
+      this.statusMessage = message;
+    }, 1000);
+  }
   clickHandler(event) {
     const target = event.target;
     if (target.localName !== 'q2-option' || target.disabled) {
@@ -442,86 +458,113 @@ export class Q2Select {
     this.selectOption(target.value);
   }
   keydownHandler(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);
-    }
-    else if (['ArrowUp', 'Up'].includes(event.key)) {
-      event.preventDefault();
-      if (this.dropdownOpen) {
-        if (this.activeIndex > 0) {
+    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 - this.activeIndex);
+            this.adjustActiveOptionAndScroll(nextIndex - activeIndex);
           }
         }
-        else if (this.activeIndex !== 0) {
+        else if (activeIndex !== 0) {
           this.setDefaultActiveElement();
         }
-      }
-      else {
-        this.openDropdownWithActiveElement(this.getDefaultActiveIndex());
-      }
-    }
-    else if (['ArrowDown', 'Down'].includes(event.key)) {
-      event.preventDefault();
-      if (this.dropdownOpen) {
-        if (this.activeIndex < this.optionElements.length - 1) {
+        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 (!this.activeIndex) {
+        else if (!activeIndex) {
           this.setDefaultActiveElement();
         }
-      }
-      else {
-        this.openDropdownWithActiveElement(this.getDefaultActiveIndex());
-      }
-    }
-    else if (['Escape', 'Esc'].includes(event.key)) {
-      this.closeDropdown();
-      this.focusInput();
-    }
-    else if (event.key === 'Tab') {
-      if (this.dropdownOpen && this.searchable && event.shiftKey) {
+        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();
-      }
-      else {
-        this.dropdownOpen && !this.multiple && event.preventDefault();
-      }
-    }
-    else if (!this.searchable && event.key.match(/^[a-zA-Z0-9]$/)) {
-      // search in non-searchable select: alpha-numeric only
-      this.searchAndFocus(event.key);
+        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;
     }
   }
   render() {
     return (h("click-elsewhere", { class: this.wrapperClasses, onChange: this.clickedElsewhere },
+      h("div", { "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage),
       h("q2-input", { ref: el => (this.inputField = el), class: "q2-select-input", label: (this.label && loc(this.label)) || '', value: this.selectedDisplay, errors: (Array.isArray(this.errors) &&
           this.errors.length > 0 &&
           this.errors.map(error => loc(error))) ||
           (this.invalid && ['tecton.element.select.invalid']) ||
-          [], disabled: this.disabled, optional: this.optional, hideLabel: this.hideLabel, ariaExpanded: this.dropdownOpen, ariaOwns: this.dropdownId, ariaHaspopup: "listbox", role: this.searchable ? 'combobox' : null, pseudo: !this.searchable, "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler }),
+          [], disabled: this.disabled, optional: this.optional, hideLabel: this.hideLabel, ariaExpanded: this.dropdownOpen, ariaOwns: "dropdown", ariaHaspopup: "listbox", role: this.searchable ? 'combobox' : null, pseudo: !this.searchable, "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler }),
       h("div", { class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick },
         h("slot", { name: "q2-select-display" })),
       this.optionsDropdown()));
   }
   optionsDropdown() {
     const dropDirection = this.privatePopDirection === 'up' ? 'dropup' : '';
-    return (h("div", { class: `q2-select-dropdown q2-element-dropdown ${dropDirection}`, ref: el => (this.dropdownContainer = el), role: "menu" },
+    return (h("div", { class: `q2-select-dropdown q2-element-dropdown ${dropDirection}`, ref: el => (this.dropdownContainer = el) },
       this.multiple ? this.visibilityToggle() : '',
-      h("div", { class: "q2-select-options", id: this.dropdownId },
+      h("div", { class: "q2-select-options", id: "dropdown", role: "listbox" },
         h("slot", null))));
   }
   visibilityToggle() {
     return (h("div", { class: "multi-select-header" },
       loc('tecton.element.select.multiHeader.showing'),
-      h("q2-btn", { class: `option-toggle show-all-options${this.onlyShowingSelected ? '' : ' selected'}`, badge: true, "test-id": "allOptionsButton", onClick: this.showAllOptions, onKeyDown: this.showAllOptionTabKeyDown }, loc('tecton.element.select.multiHeader.all')),
-      h("q2-btn", { class: `option-toggle show-selected-options${this.onlyShowingSelected ? ' selected' : ''}`, disabled: this.selectedOptions.length === 0, badge: true, "test-id": "selectedOptionsButton", onClick: this.showSelectedOptions, onKeyDown: this.showSelectedOptionTabKeyDown }, loc('tecton.element.select.multiHeader.selected', [this.selectedOptionsCount]))));
+      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', [
+          this.selectedOptionsCount
+        ]), "hide-label": true }, loc('tecton.element.select.multiHeader.selected', [this.selectedOptionsCount]))));
   }
   static get is() { return "q2-select"; }
   static get encapsulation() { return "shadow"; }
@@ -782,7 +825,8 @@ export class Q2Select {
     "activeOptionId": {},
     "searchText": {},
     "hasCustomDisplay": {},
-    "inputFocused": {}
+    "inputFocused": {},
+    "statusMessage": {}
   }; }
   static get events() { return [{
       "method": "change",

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

@@ -80,6 +80,24 @@ button {
   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));
+  scrollbar-width: thin;
+  scrollbar-color: var(--comp-scrollbar-color) transparent;
+}
+.q2-element-dropdown::-webkit-scrollbar {
+  width: var(--comp-scrollbar-size);
+  height: var(--comp-scrollbar-size);
+  margin: 5px;
+}
+.q2-element-dropdown::-webkit-scrollbar-thumb {
+  background: var(--comp-scrollbar-color);
+  border-radius: var(--comp-scrollbar-border-radius);
+}
+.q2-element-dropdown::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: var(--comp-scrollbar-border-radius);
 }
 
 .q2-element-dropdown.sizable {