@fluid-topics/ft-select 2.1.23 → 2.2.0

package/build/ft-select.d.ts

@@ -34,6 +34,7 @@ export declare class FtSelect extends FtLitElement implements FtSelectProperties
     private renderOption;
     protected willUpdate(props: PropertyValues): void;
     protected contentAvailableCallback(props: PropertyValues): void;
+    private hideOptions;
     private get hasOptionsMenuOpen();
     private get hasOptions();
     private updateOptionsFromSlot;
@@ -45,7 +46,4 @@ export declare class FtSelect extends FtLitElement implements FtSelectProperties
     private onSelectOption;
     setValue(value: any, fireEvent?: boolean): void;
     private selectOption;
-    private hideOptions;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
 }

package/build/ft-select.js

@@ -149,6 +149,14 @@ export class FtSelect extends FtLitElement {
             (_b = ((_a = this.selectedOptionElement) !== null && _a !== void 0 ? _a : this.firstOption)) === null || _b === void 0 ? void 0 : _b.focus();
             this.focusOptions = false;
         }
+        if (props.has("optionsDisplayed")) {
+            if (this.optionsDisplayed) {
+                document.addEventListener("click", this.hideOptions);
+            }
+            else {
+                document.removeEventListener("click", this.hideOptions);
+            }
+        }
         if (props.has("optionsDisplayed") && this.hasOptionsMenuOpen) {
             this.optionsMenu.style.minWidth = this.mainPanel.getBoundingClientRect().width + "px";
             const fallbackPlacements = ["bottom", "top"];
@@ -286,14 +294,6 @@ export class FtSelect extends FtLitElement {
         }
         this.optionsDisplayed = false;
     }
-    connectedCallback() {
-        super.connectedCallback();
-        document.addEventListener("click", this.hideOptions);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        document.removeEventListener("click", this.hideOptions);
-    }
 }
 FtSelect.elementDefinitions = {
     "ft-input-label": FtInputLabel,

package/build/ft-select.light.js

@@ -641,7 +641,7 @@
                 label="${t.label}"
                 .value=${t.value}
             ></ft-select-option>
-        `}willUpdate(t){super.willUpdate(t),t.has("options")&&(this.selectedOption=this.options.filter(i=>i.selected)[0]),t.has("selectedOption")&&(this.optionsDisplayed=!1)}contentAvailableCallback(t){var i,o;if(super.contentAvailableCallback(t),t.has("focusOptions")&&this.focusOptions&&((o=(i=this.selectedOptionElement)!==null&&i!==void 0?i:this.firstOption)===null||o===void 0||o.focus(),this.focusOptions=!1),t.has("optionsDisplayed")&&this.hasOptionsMenuOpen){this.optionsMenu.style.minWidth=this.mainPanel.getBoundingClientRect().width+"px";let r=["bottom","top"];(0,w.computeOffsetAutoPosition)(this.mainPanel,this.optionsMenu,"bottom",r,"fixed",u.optionsHeight,0).then(({x:n,y:l})=>{this.optionsMenu.style.left=`${n}px`,this.optionsMenu.style.top=`${l}px`})}}get hasOptionsMenuOpen(){return!this.disabled&&this.optionsDisplayed&&this.hasOptions}get hasOptions(){return this.options.length>0}updateOptionsFromSlot(t){var i;t.stopPropagation(),this.isSlotEmpty=(0,w.isSlotEmptyOrWithoutContent)(this.optionsSlot);let o=(i=this.optionsSlot)===null||i===void 0?void 0:i.assignedElements().map(r=>r);o&&o.length>0&&(this.options=o)}onMainPanelKeyDown(t){switch(t.key===" "&&(t.preventDefault(),t.stopPropagation()),t.key){case" ":case"Enter":this.optionsDisplayed=!this.optionsDisplayed,this.focusOptions=!0;break;case"ArrowUp":case"ArrowDown":t.preventDefault(),t.stopPropagation(),this.optionsDisplayed=!0,this.focusOptions=!0;break}}onOptionsKeyDown(t){var i,o;let r,n=this.focusedOption?this.optionsList.indexOf(this.focusedOption):0;switch(t.key){case" ":case"Enter":t.preventDefault(),t.stopPropagation(),this.onSelectOption(t),this.optionsDisplayed=!1,(i=this.mainPanel)===null||i===void 0||i.focus();break;case"Escape":this.optionsDisplayed=!1,(o=this.mainPanel)===null||o===void 0||o.focus();break;case"Tab":this.optionsDisplayed=!1;break;case"ArrowUp":t.preventDefault(),t.stopPropagation(),r=this.optionsList[(n-1+this.optionsList.length)%this.optionsList.length];break;case"ArrowDown":t.preventDefault(),t.stopPropagation(),r=this.optionsList[(n+1)%this.optionsList.length];break;default:if(t.key.length!=1)break;this.isKeyAlphanumeric(t.key)&&(r=this.handleAlphanumericPress(t.key));break}r?.focus()}isKeyAlphanumeric(t){let i=t.charCodeAt(0);return i>47&&i<58||i>64&&i<91||i>96&&i<123}handleAlphanumericPress(t){let i=new Date;i.getTime()-this.lastSearchInputDate.getTime()>e.searchTimeoutMilliseconds&&(this.currentSearch=""),this.currentSearch+=t.toLowerCase();let o=this.options.find(r=>{var n;return((n=r.label)===null||n===void 0?void 0:n.toLowerCase().substring(0,this.currentSearch.length))===this.currentSearch});return this.lastSearchInputDate=i,o&&this.optionsList.find(r=>r.value===o.value)}getOptionId(t){if(!t)return;let i=this.options.findIndex(o=>(0,w.deepEqual)(o.value,t.value));if(i!==-1)return`option-${i}`}onSelectOption(t){t.stopPropagation(),this.setValue(t.target.value)}setValue(t,i=!0){let o=this.options.find(r=>(0,w.deepEqual)(r.value,t));o&&this.selectOption(o,i)}selectOption(t,i=!0){var o,r;if(!(0,w.deepEqual)((o=this.selectedOption)===null||o===void 0?void 0:o.value,t?.value)){this.selectedOption=t;for(let n of this.options)n.selected=n===t;i&&this.dispatchEvent(new CustomEvent("change",{detail:(r=this.selectedOption)===null||r===void 0?void 0:r.value}))}this.optionsDisplayed=!1}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.hideOptions)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.hideOptions)}};v.elementDefinitions={"ft-input-label":M,"ft-typography":k,"ft-ripple":b,"ft-icon":D,"ft-select-option":L};v.searchTimeoutMilliseconds=2e3;v.styles=[he,li];T([(0,E.property)({type:String})],v.prototype,"label",void 0);T([(0,E.property)({type:String})],v.prototype,"ariaLabel",void 0);T([(0,E.property)({type:String})],v.prototype,"helper",void 0);T([(0,E.property)({type:Boolean})],v.prototype,"outlined",void 0);T([(0,E.property)({type:Boolean})],v.prototype,"disabled",void 0);T([(0,E.property)({type:Boolean})],v.prototype,"error",void 0);T([(0,E.property)({type:Boolean})],v.prototype,"fixedMenuPosition",void 0);T([(0,E.property)({type:Array})],v.prototype,"options",void 0);T([(0,E.state)()],v.prototype,"selectedOption",void 0);T([(0,E.state)()],v.prototype,"optionsDisplayed",void 0);T([(0,E.state)()],v.prototype,"focusOptions",void 0);T([(0,E.state)()],v.prototype,"currentSearch",void 0);T([(0,E.state)()],v.prototype,"lastSearchInputDate",void 0);T([(0,E.query)(".ft-select")],v.prototype,"container",void 0);T([(0,E.query)(".ft-select--options")],v.prototype,"optionsMenu",void 0);T([(0,E.query)(".ft-select--input-panel")],v.prototype,"mainPanel",void 0);T([(0,E.query)("slot:not([name])")],v.prototype,"optionsSlot",void 0);var hi={"ft-select":v,"ft-select-option":L};(0,ci.customElements)(hi);})();
+        `}willUpdate(t){super.willUpdate(t),t.has("options")&&(this.selectedOption=this.options.filter(i=>i.selected)[0]),t.has("selectedOption")&&(this.optionsDisplayed=!1)}contentAvailableCallback(t){var i,o;if(super.contentAvailableCallback(t),t.has("focusOptions")&&this.focusOptions&&((o=(i=this.selectedOptionElement)!==null&&i!==void 0?i:this.firstOption)===null||o===void 0||o.focus(),this.focusOptions=!1),t.has("optionsDisplayed")&&(this.optionsDisplayed?document.addEventListener("click",this.hideOptions):document.removeEventListener("click",this.hideOptions)),t.has("optionsDisplayed")&&this.hasOptionsMenuOpen){this.optionsMenu.style.minWidth=this.mainPanel.getBoundingClientRect().width+"px";let r=["bottom","top"];(0,w.computeOffsetAutoPosition)(this.mainPanel,this.optionsMenu,"bottom",r,"fixed",u.optionsHeight,0).then(({x:n,y:l})=>{this.optionsMenu.style.left=`${n}px`,this.optionsMenu.style.top=`${l}px`})}}get hasOptionsMenuOpen(){return!this.disabled&&this.optionsDisplayed&&this.hasOptions}get hasOptions(){return this.options.length>0}updateOptionsFromSlot(t){var i;t.stopPropagation(),this.isSlotEmpty=(0,w.isSlotEmptyOrWithoutContent)(this.optionsSlot);let o=(i=this.optionsSlot)===null||i===void 0?void 0:i.assignedElements().map(r=>r);o&&o.length>0&&(this.options=o)}onMainPanelKeyDown(t){switch(t.key===" "&&(t.preventDefault(),t.stopPropagation()),t.key){case" ":case"Enter":this.optionsDisplayed=!this.optionsDisplayed,this.focusOptions=!0;break;case"ArrowUp":case"ArrowDown":t.preventDefault(),t.stopPropagation(),this.optionsDisplayed=!0,this.focusOptions=!0;break}}onOptionsKeyDown(t){var i,o;let r,n=this.focusedOption?this.optionsList.indexOf(this.focusedOption):0;switch(t.key){case" ":case"Enter":t.preventDefault(),t.stopPropagation(),this.onSelectOption(t),this.optionsDisplayed=!1,(i=this.mainPanel)===null||i===void 0||i.focus();break;case"Escape":this.optionsDisplayed=!1,(o=this.mainPanel)===null||o===void 0||o.focus();break;case"Tab":this.optionsDisplayed=!1;break;case"ArrowUp":t.preventDefault(),t.stopPropagation(),r=this.optionsList[(n-1+this.optionsList.length)%this.optionsList.length];break;case"ArrowDown":t.preventDefault(),t.stopPropagation(),r=this.optionsList[(n+1)%this.optionsList.length];break;default:if(t.key.length!=1)break;this.isKeyAlphanumeric(t.key)&&(r=this.handleAlphanumericPress(t.key));break}r?.focus()}isKeyAlphanumeric(t){let i=t.charCodeAt(0);return i>47&&i<58||i>64&&i<91||i>96&&i<123}handleAlphanumericPress(t){let i=new Date;i.getTime()-this.lastSearchInputDate.getTime()>e.searchTimeoutMilliseconds&&(this.currentSearch=""),this.currentSearch+=t.toLowerCase();let o=this.options.find(r=>{var n;return((n=r.label)===null||n===void 0?void 0:n.toLowerCase().substring(0,this.currentSearch.length))===this.currentSearch});return this.lastSearchInputDate=i,o&&this.optionsList.find(r=>r.value===o.value)}getOptionId(t){if(!t)return;let i=this.options.findIndex(o=>(0,w.deepEqual)(o.value,t.value));if(i!==-1)return`option-${i}`}onSelectOption(t){t.stopPropagation(),this.setValue(t.target.value)}setValue(t,i=!0){let o=this.options.find(r=>(0,w.deepEqual)(r.value,t));o&&this.selectOption(o,i)}selectOption(t,i=!0){var o,r;if(!(0,w.deepEqual)((o=this.selectedOption)===null||o===void 0?void 0:o.value,t?.value)){this.selectedOption=t;for(let n of this.options)n.selected=n===t;i&&this.dispatchEvent(new CustomEvent("change",{detail:(r=this.selectedOption)===null||r===void 0?void 0:r.value}))}this.optionsDisplayed=!1}};v.elementDefinitions={"ft-input-label":M,"ft-typography":k,"ft-ripple":b,"ft-icon":D,"ft-select-option":L};v.searchTimeoutMilliseconds=2e3;v.styles=[he,li];T([(0,E.property)({type:String})],v.prototype,"label",void 0);T([(0,E.property)({type:String})],v.prototype,"ariaLabel",void 0);T([(0,E.property)({type:String})],v.prototype,"helper",void 0);T([(0,E.property)({type:Boolean})],v.prototype,"outlined",void 0);T([(0,E.property)({type:Boolean})],v.prototype,"disabled",void 0);T([(0,E.property)({type:Boolean})],v.prototype,"error",void 0);T([(0,E.property)({type:Boolean})],v.prototype,"fixedMenuPosition",void 0);T([(0,E.property)({type:Array})],v.prototype,"options",void 0);T([(0,E.state)()],v.prototype,"selectedOption",void 0);T([(0,E.state)()],v.prototype,"optionsDisplayed",void 0);T([(0,E.state)()],v.prototype,"focusOptions",void 0);T([(0,E.state)()],v.prototype,"currentSearch",void 0);T([(0,E.state)()],v.prototype,"lastSearchInputDate",void 0);T([(0,E.query)(".ft-select")],v.prototype,"container",void 0);T([(0,E.query)(".ft-select--options")],v.prototype,"optionsMenu",void 0);T([(0,E.query)(".ft-select--input-panel")],v.prototype,"mainPanel",void 0);T([(0,E.query)("slot:not([name])")],v.prototype,"optionsSlot",void 0);var hi={"ft-select":v,"ft-select-option":L};(0,ci.customElements)(hi);})();
 /*! Bundled license information:
 
 lit-html/directives/when.js: