q2-tecton-elements 1.17.1 → 1.19.0

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

@@ -1,10 +1,7 @@
-import { Component, Prop, h, Event, State, Element, Host, Method, Watch, Listen, } from '@stencil/core';
+import { h, Host, } from '@stencil/core';
 import { isEventFromElement, overrideFocus } from 'src/utils';
 export class Q2OptionList {
   constructor() {
-    this.role = 'listbox';
-    this.direction = 'down';
-    this.selectedOptions = [];
     this.scheduledAfterRender = [];
     /// Event Handlers ///
     /* tslint:disable:cyclomatic-complexity */
@@ -86,7 +83,7 @@ export class Q2OptionList {
         case 'Escape':
           if (this.noSelect)
             this.setActiveElement(null);
-          this.open = false;
+          this.popoverState.emit({ open: false });
           break;
         default:
           if (customSearch)
@@ -114,6 +111,16 @@ export class Q2OptionList {
       }
       this.selectOption(target.value);
     };
+    this.role = 'listbox';
+    this.direction = 'down';
+    this.customSearch = undefined;
+    this.noSelect = undefined;
+    this.align = undefined;
+    this.selectedOptions = [];
+    this.multiple = undefined;
+    this.disabled = undefined;
+    this.type = undefined;
+    this.hasOptions = undefined;
   }
   /// LifeCycle Hooks ///
   componentWillLoad() {
@@ -122,6 +129,7 @@ export class Q2OptionList {
   componentDidLoad() {
     overrideFocus(this.hostElement);
     this.checkOptions();
+    this.selectedOptionsUpdated();
   }
   componentDidRender() {
     this.scheduledAfterRender.forEach(fn => fn());
@@ -168,7 +176,7 @@ export class Q2OptionList {
     if (this.disabled)
       return;
     this.activeIndex = activeIndex;
-    this.open = true;
+    this.popoverState.emit({ open: true });
     this.setActiveOption();
     this.setFocusedOption();
     this.scheduledAfterRender.push(() => {
@@ -202,8 +210,6 @@ export class Q2OptionList {
     });
   }
   setActiveOption() {
-    if (!this.open)
-      return;
     const activeIndex = this.activeIndex;
     this.allOptions.forEach((element, elementIndex) => {
       element.active = activeIndex === elementIndex;
@@ -256,7 +262,7 @@ export class Q2OptionList {
     this.change.emit({ value: selectedValue, values });
     if (multiple)
       return;
-    this.open = false;
+    this.popoverState.emit({ open: false });
   }
   adjustActiveOptionAndScroll(numToAdd) {
     this.activeIndex += numToAdd;
@@ -292,24 +298,17 @@ export class Q2OptionList {
       this.updateSingleOptionAttrs();
     }
   }
-  openChanged(newValue) {
-    this.optionListState.emit({ open: newValue });
-  }
   /// Listeners ///
   delegateFocus(event) {
     if (!isEventFromElement(event, this.hostElement))
       return;
-    this.open = true;
+    this.popoverState.emit({ open: true });
     this.setDefaultActiveElement();
   }
   handleClick(event) {
     event.stopPropagation();
   }
   /// Public Methods ///
-  async toggle() {
-    const isOpen = !this.open;
-    this.open = isOpen;
-  }
   async setDefaultActiveElement() {
     this.activeIndex = this.getDefaultActiveIndex();
     this.setActiveOption();
@@ -323,7 +322,7 @@ export class Q2OptionList {
   async handleExternalKeydown(event) {
     const keysThatTriggerOpen = ['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp', 'Home', 'End'];
     if (keysThatTriggerOpen.includes(event.key)) {
-      this.open = true;
+      this.popoverState.emit({ open: true });
     }
     const keysThatTriggerDefault = ['ArrowDown', 'ArrowUp'];
     if (keysThatTriggerDefault.includes(event.key)) {
@@ -336,328 +335,305 @@ export class Q2OptionList {
   }
   /// DOM ///
   render() {
-    return (h(Host, null,
-      h("div", { class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler },
-        h("div", { class: "options", role: this.type || 'listbox', onKeyDown: this.keydownHandler, onClick: this.clickHandler },
-          h("slot", null)))));
+    return (h(Host, null, h("div", { class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, h("div", { class: "options", role: this.type || 'listbox', onKeyDown: this.keydownHandler, onClick: this.clickHandler }, h("slot", null)))));
   }
   static get is() { return "q2-option-list"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "role": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'listbox' | 'menu'",
-        "resolved": "\"listbox\" | \"menu\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "role",
-      "reflect": true,
-      "defaultValue": "'listbox'"
-    },
-    "direction": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'up' | 'down'",
-        "resolved": "\"down\" | \"up\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "direction",
-      "reflect": true,
-      "defaultValue": "'down'"
-    },
-    "open": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "open",
-      "reflect": true
-    },
-    "customSearch": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "custom-search",
-      "reflect": true
-    },
-    "noSelect": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "no-select",
-      "reflect": true
-    },
-    "align": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'left' | 'right'",
-        "resolved": "\"left\" | \"right\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "align",
-      "reflect": true
-    },
-    "selectedOptions": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "IOptionValue[]",
-        "resolved": "IOptionValue[]",
-        "references": {
-          "IOptionValue": {
-            "location": "local"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "defaultValue": "[]"
-    },
-    "multiple": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "multiple",
-      "reflect": true
-    },
-    "disabled": {
-      "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 {
+      "role": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'listbox' | 'menu'",
+          "resolved": "\"listbox\" | \"menu\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "role",
+        "reflect": true,
+        "defaultValue": "'listbox'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "direction": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'up' | 'down'",
+          "resolved": "\"down\" | \"up\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "direction",
+        "reflect": true,
+        "defaultValue": "'down'"
       },
-      "attribute": "disabled",
-      "reflect": true
-    },
-    "type": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'menu' | 'listbox'",
-        "resolved": "\"listbox\" | \"menu\"",
-        "references": {}
+      "customSearch": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "custom-search",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "noSelect": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "no-select",
+        "reflect": true
       },
-      "attribute": "type",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "hasOptions": {}
-  }; }
-  static get events() { return [{
-      "method": "change",
-      "name": "change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "align": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'left' | 'right'",
+          "resolved": "\"left\" | \"right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "align",
+        "reflect": true
       },
-      "complexType": {
-        "original": "{ value: string; values: IOptionValue[] }",
-        "resolved": "{ value: string; values: IOptionValue[]; }",
-        "references": {
-          "IOptionValue": {
-            "location": "local"
+      "selectedOptions": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "IOptionValue[]",
+          "resolved": "IOptionValue[]",
+          "references": {
+            "IOptionValue": {
+              "location": "local"
+            }
           }
-        }
-      }
-    }, {
-      "method": "optionListState",
-      "name": "optionListState",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
       },
-      "complexType": {
-        "original": "{ open: boolean }",
-        "resolved": "{ open: boolean; }",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "toggle": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "multiple": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
         },
-        "return": "Promise<void>"
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "multiple",
+        "reflect": true
       },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "setDefaultActiveElement": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
         },
-        "return": "Promise<void>"
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": true
       },
-      "docs": {
-        "text": "",
-        "tags": []
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'menu' | 'listbox'",
+          "resolved": "\"listbox\" | \"menu\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": false
       }
-    },
-    "setActiveElement": {
-      "complexType": {
-        "signature": "(index: number) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
+    };
+  }
+  static get states() {
+    return {
+      "hasOptions": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "change",
+        "name": "change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ value: string; values: IOptionValue[] }",
+          "resolved": "{ value: string; values: IOptionValue[]; }",
+          "references": {
+            "IOptionValue": {
+              "location": "local"
+            }
           }
+        }
+      }, {
+        "method": "popoverState",
+        "name": "popoverState",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ open: boolean }",
+          "resolved": "{ open: boolean; }",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setDefaultActiveElement": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "handleExternalKeydown": {
-      "complexType": {
-        "signature": "(event: KeyboardEvent) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
+      "setActiveElement": {
+        "complexType": {
+          "signature": "(index: number) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
           },
-          "KeyboardEvent": {
-            "location": "global"
-          }
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
+      "handleExternalKeydown": {
+        "complexType": {
+          "signature": "(event: KeyboardEvent) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "KeyboardEvent": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "hostElement"; }
-  static get watchers() { return [{
-      "propName": "selectedOptions",
-      "methodName": "selectedOptionsUpdated"
-    }, {
-      "propName": "open",
-      "methodName": "openChanged"
-    }]; }
-  static get listeners() { return [{
-      "name": "focus",
-      "method": "delegateFocus",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "click",
-      "method": "handleClick",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "selectedOptions",
+        "methodName": "selectedOptionsUpdated"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "focus",
+        "method": "delegateFocus",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "click",
+        "method": "handleClick",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }