q2-tecton-elements 1.18.0 → 1.19.0

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

@@ -1,21 +1,7 @@
-import { Component, Prop, Element, h, Listen, State, Event, Watch, } from '@stencil/core';
+import { h, } from '@stencil/core';
 import { createGuid, handleAriaLabel, isEventFromElement, isRelatedTargetWithinHost, loc, overrideFocus, resizeIframe, setPopProperties, } from 'src/utils';
 export class Q2Select {
   constructor() {
-    this.selectedOptions = [];
-    this.disabled = false;
-    this.readonly = false;
-    this.multiple = false;
-    this.minRows = 3;
-    this.searchable = false;
-    this.multilineOptions = false;
-    this.optional = false;
-    this.dropdownOpen = false;
-    this.onlyShowingSelected = false;
-    this.searchText = '';
-    this.hasCustomDisplay = false;
-    this.inputFocused = false;
-    this.prioritizeSearch = false;
     this.scheduledAfterRender = [];
     this.keyStore = {
       queue: [],
@@ -281,6 +267,29 @@ export class Q2Select {
         optionElement._multiSelectHidden = false;
       });
     };
+    this.label = undefined;
+    this.hideLabel = undefined;
+    this.value = undefined;
+    this.ariaLabel = undefined;
+    this.selectedOptions = [];
+    this.disabled = false;
+    this.readonly = false;
+    this.invalid = undefined;
+    this.errors = undefined;
+    this.multiple = false;
+    this.minRows = 3;
+    this.popDirection = undefined;
+    this.searchable = false;
+    this.multilineOptions = false;
+    this.optional = false;
+    this.dropdownOpen = false;
+    this.onlyShowingSelected = false;
+    this.activeOptionId = undefined;
+    this.searchText = '';
+    this.hasCustomDisplay = false;
+    this.inputFocused = false;
+    this.statusMessage = undefined;
+    this.prioritizeSearch = false;
   }
   /// Lifecycle Hooks ///
   componentWillLoad() {
@@ -695,395 +704,398 @@ export class Q2Select {
   }
   render() {
     const showAsPseudo = !this.searchable;
-    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, readonly: this.readonly, hideLabel: this.hideLabel, ariaExpanded: `${!!this.dropdownOpen}`, ariaOwns: "dropdown", ariaHaspopup: "listbox", role: this.searchable ? 'combobox' : null, pseudo: showAsPseudo, "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, badgeValue: this.badgeValue, badgeTheme: this.isComponentFocused ? 'primary' : undefined }, this.renderCustomDisplay()),
-      h("div", { class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick },
-        h("slot", { name: "q2-select-display" })),
-      this.optionsDropdown()));
+    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, readonly: this.readonly, hideLabel: this.hideLabel, ariaExpanded: `${!!this.dropdownOpen}`, ariaOwns: "dropdown", ariaHaspopup: "listbox", role: this.searchable ? 'combobox' : null, pseudo: showAsPseudo, "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, badgeValue: this.badgeValue, badgeTheme: this.isComponentFocused ? 'primary' : undefined }, this.renderCustomDisplay()), 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), onKeyDown: this.dropdownKeydownHandler, onFocusout: this.dropdownFocusoutHandler },
-      this.multiple ? this.visibilityToggle() : '',
-      h("div", { class: "q2-select-options", id: "dropdown", role: "listbox" },
-        h("slot", null))));
+    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() {
     const selectedOptionsCount = this.selectedOptions.length;
-    return (h("div", { class: "multi-select-header", ref: el => (this.multiSelectHeader = el) },
-      loc('tecton.element.select.multiHeader.showing'),
-      h("q2-btn", { class: `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: `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', [selectedOptionsCount]), "hide-label": true }, loc('tecton.element.select.multiHeader.selected', [selectedOptionsCount]))));
+    return (h("div", { class: "multi-select-header", ref: el => (this.multiSelectHeader = el) }, loc('tecton.element.select.multiHeader.showing'), h("q2-btn", { class: `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: `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', [selectedOptionsCount]), "hide-label": true }, loc('tecton.element.select.multiHeader.selected', [selectedOptionsCount]))));
   }
   static get is() { return "q2-select"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "label": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "label",
-      "reflect": true
-    },
-    "hideLabel": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "hide-label",
-      "reflect": true
-    },
-    "value": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "value",
-      "reflect": false
-    },
-    "ariaLabel": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "aria-label",
-      "reflect": true
-    },
-    "selectedOptions": {
-      "type": "any",
-      "mutable": true,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "selected-options",
-      "reflect": false,
-      "defaultValue": "[]"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "readonly": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "readonly",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "invalid": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "invalid",
-      "reflect": true
-    },
-    "errors": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "multiple": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "hideLabel": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide-label",
+        "reflect": true
       },
-      "attribute": "multiple",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "minRows": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "ariaLabel": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "aria-label",
+        "reflect": true
       },
-      "attribute": "min-rows",
-      "reflect": false,
-      "defaultValue": "3"
-    },
-    "popDirection": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'up' | 'down'",
-        "resolved": "\"down\" | \"up\"",
-        "references": {}
+      "selectedOptions": {
+        "type": "any",
+        "mutable": true,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "selected-options",
+        "reflect": false,
+        "defaultValue": "[]"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "pop-direction",
-      "reflect": true
-    },
-    "searchable": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "readonly",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "invalid": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "invalid",
+        "reflect": true
       },
-      "attribute": "searchable",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "multilineOptions": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "errors": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "multiple": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "multiple",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "multiline-options",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "optional": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "minRows": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "min-rows",
+        "reflect": false,
+        "defaultValue": "3"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "popDirection": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'up' | 'down'",
+          "resolved": "\"down\" | \"up\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "pop-direction",
+        "reflect": true
       },
-      "attribute": "optional",
-      "reflect": true,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "dropdownOpen": {},
-    "onlyShowingSelected": {},
-    "activeOptionId": {},
-    "searchText": {},
-    "hasCustomDisplay": {},
-    "inputFocused": {},
-    "statusMessage": {},
-    "prioritizeSearch": {}
-  }; }
-  static get events() { return [{
-      "method": "change",
-      "name": "change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "searchable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "searchable",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "input",
-      "name": "input",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "multilineOptions": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "multiline-options",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+      "optional": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "optional",
+        "reflect": true,
+        "defaultValue": "false"
       }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "dropdownOpen": {},
+      "onlyShowingSelected": {},
+      "activeOptionId": {},
+      "searchText": {},
+      "hasCustomDisplay": {},
+      "inputFocused": {},
+      "statusMessage": {},
+      "prioritizeSearch": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "change",
+        "name": "change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "input",
+        "name": "input",
+        "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": "ariaLabel",
-      "methodName": "ariaLabelObserver"
-    }, {
-      "propName": "value",
-      "methodName": "valueUpdated"
-    }, {
-      "propName": "selectedOptions",
-      "methodName": "selectedOptionsUpdated"
-    }, {
-      "propName": "multilineOptions",
-      "methodName": "multilineOptionsChanged"
-    }, {
-      "propName": "dropdownOpen",
-      "methodName": "dropdownOpenChanged"
-    }]; }
-  static get listeners() { return [{
-      "name": "keydown",
-      "method": "keydownHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "change",
-      "method": "onHostElementChange",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "input",
-      "method": "onHostElementInput",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "focus",
-      "method": "delegateFocus",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "focusout",
-      "method": "handleFocusout",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "click",
-      "method": "clickHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "ariaLabel",
+        "methodName": "ariaLabelObserver"
+      }, {
+        "propName": "value",
+        "methodName": "valueUpdated"
+      }, {
+        "propName": "selectedOptions",
+        "methodName": "selectedOptionsUpdated"
+      }, {
+        "propName": "multilineOptions",
+        "methodName": "multilineOptionsChanged"
+      }, {
+        "propName": "dropdownOpen",
+        "methodName": "dropdownOpenChanged"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "keydown",
+        "method": "keydownHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "change",
+        "method": "onHostElementChange",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "input",
+        "method": "onHostElementInput",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "focus",
+        "method": "delegateFocus",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "focusout",
+        "method": "handleFocusout",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "click",
+        "method": "clickHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }