@fluid-topics/ft-search-input 1.3.13 → 1.3.15

package/build/ft-search-input.light.js

@@ -2754,7 +2754,7 @@ Also for action icons.`,l.colorGray200),contentGlobalSubtle:r.extend("--ft-conte
                 <ft-ripple ?primary=${o} ?activated=${o}></ft-ripple>
                 <span>${e.label}</span>
             </div>
-        `}update(e){super.update(e),e.has("options")&&(this.selectedOption=this.options.filter(o=>o.selected)[0]),e.has("selectedOption")&&(this.optionsDisplayed=!1)}contentAvailableCallback(e){var o,i;if(super.contentAvailableCallback(e),e.has("focusOptions")&&this.focusOptions&&((i=(o=this.selectedOptionElement)!==null&&o!==void 0?o:this.firstOption)===null||i===void 0||i.focus(),this.focusOptions=!1),e.has("optionsDisplayed")&&this.hasOptionsMenuOpen){this.optionsMenu.style.width=this.mainPanel.getBoundingClientRect().width+"px";let n=["bottom","top"];(0,co.computeOffsetAutoPosition)(this.mainPanel,this.optionsMenu,"bottom",n,"fixed",j.optionsHeight.name,0).then(({x:a,y:s})=>{this.optionsMenu.style.left=`${a}px`,this.optionsMenu.style.top=`${s}px`})}}get hasOptionsMenuOpen(){return!this.disabled&&this.optionsDisplayed&&this.hasOptions}get hasOptions(){return this.options.length>0}updateOptionsFromSlot(e){var o;e.stopPropagation();let i=(o=this.optionsSlot)===null||o===void 0?void 0:o.assignedElements().map(n=>n);i&&i.length>0&&(this.options=i)}onMainPanelKeyDown(e){switch(e.key){case" ":e.preventDefault(),e.stopPropagation();case"Enter":this.optionsDisplayed=!this.optionsDisplayed,this.focusOptions=!0;break;case"ArrowUp":case"ArrowDown":e.preventDefault(),e.stopPropagation(),this.optionsDisplayed=!0,this.focusOptions=!0;break}}onOptionsKeyDown(e){var o,i,n,a,s;let c;switch(e.key){case"Escape":this.optionsDisplayed=!1,(o=this.mainPanel)===null||o===void 0||o.focus();break;case"Tab":this.optionsDisplayed=!1;break;case"ArrowUp":e.preventDefault(),e.stopPropagation(),c=(n=(i=this.focusedOption)===null||i===void 0?void 0:i.previousElementSibling)!==null&&n!==void 0?n:this.lastOption;break;case"ArrowDown":e.preventDefault(),e.stopPropagation(),c=(s=(a=this.focusedOption)===null||a===void 0?void 0:a.nextElementSibling)!==null&&s!==void 0?s:this.firstOption;break;default:if(e.key.length!=1)break;this.isKeyAlphanumeric(e.key)&&(c=this.handleAlphanumericPress(e.key));break}c?.focus()}isKeyAlphanumeric(e){let o=e.charCodeAt(0);return o>47&&o<58||o>64&&o<91||o>96&&o<123}handleAlphanumericPress(e){var o,i;let n=new Date;n.getTime()-this.lastSearchInputDate.getTime()>t.searchTimeoutMilliseconds&&(this.currentSearch=""),this.currentSearch+=e.toLowerCase();let a=this.options.find(c=>{var p;return((p=c.label)===null||p===void 0?void 0:p.toLowerCase().substring(0,this.currentSearch.length))===this.currentSearch});if(a===void 0){this.lastSearchInputDate=n;return}let s=(i=(o=this.optionsMenu)===null||o===void 0?void 0:o.querySelector(`[data-value="${a.value}"]`))!==null&&i!==void 0?i:void 0;return this.lastSearchInputDate=n,s}onOptionKeyDown(e,o){var i;(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),e.stopPropagation(),this.selectOption(o),this.optionsDisplayed=!1,(i=this.mainPanel)===null||i===void 0||i.focus())}selectOption(e){var o,i;if(!(0,co.deepEqual)((o=this.selectedOption)===null||o===void 0?void 0:o.value,e.value)){this.selectedOption=e;for(let n of this.options)n.selected=n===e;this.dispatchEvent(new CustomEvent("change",{detail:(i=this.selectedOption)===null||i===void 0?void 0:i.value}))}this.optionsDisplayed=!1}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.hideOptions)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.hideOptions)}};re.elementDefinitions={"ft-input-label":Dt,"ft-typography":ee,"ft-ripple":V,"ft-icon":ne};re.searchTimeoutMilliseconds=2e3;re.styles=[br,Gt,uu];be([(0,le.property)({type:String})],re.prototype,"label",void 0);be([(0,le.property)({type:String})],re.prototype,"ariaLabel",void 0);be([(0,le.property)({type:String})],re.prototype,"helper",void 0);be([(0,le.property)({type:Boolean})],re.prototype,"outlined",void 0);be([(0,le.property)({type:Boolean})],re.prototype,"disabled",void 0);be([(0,le.property)({type:Boolean})],re.prototype,"error",void 0);be([(0,le.property)({type:Boolean})],re.prototype,"fixedMenuPosition",void 0);be([(0,le.property)({type:Array})],re.prototype,"options",void 0);be([(0,le.state)()],re.prototype,"selectedOption",void 0);be([(0,le.state)()],re.prototype,"optionsDisplayed",void 0);be([(0,le.state)()],re.prototype,"focusOptions",void 0);be([(0,le.state)()],re.prototype,"currentSearch",void 0);be([(0,le.state)()],re.prototype,"lastSearchInputDate",void 0);be([(0,le.query)(".ft-select")],re.prototype,"container",void 0);be([(0,le.query)(".ft-select--options")],re.prototype,"optionsMenu",void 0);be([(0,le.query)(".ft-select--input-panel")],re.prototype,"mainPanel",void 0);be([(0,le.query)(".ft-select--option:first-child")],re.prototype,"firstOption",void 0);be([(0,le.query)(".ft-select--option:focus")],re.prototype,"focusedOption",void 0);be([(0,le.query)(".ft-select--option.ft-select--option-selected")],re.prototype,"selectedOptionElement",void 0);be([(0,le.query)(".ft-select--option:last-child")],re.prototype,"lastOption",void 0);be([(0,le.query)("slot:not([name])")],re.prototype,"optionsSlot",void 0);(0,Ja.customElement)("ft-select")(re);(0,Ja.customElement)("ft-select-option")(er);var F=f(w()),es=f(I());var hu=f(I()),Ft=f(w()),We={display:Ft.FtCssVariableFactory.create("--ft-skeleton--display","","DISPLAY","block"),width:Ft.FtCssVariableFactory.create("--ft-skeleton--width","","SIZE","100%"),height:Ft.FtCssVariableFactory.create("--ft-skeleton--height","","SIZE","20px"),backgroundColor:Ft.FtCssVariableFactory.create("--ft-skeleton--background-color","","COLOR","#f1f1f1"),glareWidth:Ft.FtCssVariableFactory.create("--ft-skeleton--glare-width","","SIZE","200px"),glareColor:Ft.FtCssVariableFactory.create("--ft-skeleton--glare-color","","COLOR","rgba(255, 255, 255, .6)"),animationDuration:Ft.FtCssVariableFactory.create("--ft-skeleton--animation-duration","","UNKNOWN","2s"),borderRadiusM:Ft.FtCssVariableFactory.external(Ft.designSystemVariables.borderRadiusM,"Design system")},gu=hu.css`
+        `}update(e){super.update(e),e.has("options")&&(this.selectedOption=this.options.filter(o=>o.selected)[0]),e.has("selectedOption")&&(this.optionsDisplayed=!1)}contentAvailableCallback(e){var o,i;if(super.contentAvailableCallback(e),e.has("focusOptions")&&this.focusOptions&&((i=(o=this.selectedOptionElement)!==null&&o!==void 0?o:this.firstOption)===null||i===void 0||i.focus(),this.focusOptions=!1),e.has("optionsDisplayed")&&this.hasOptionsMenuOpen){this.optionsMenu.style.width=this.mainPanel.getBoundingClientRect().width+"px";let n=["bottom","top"];(0,co.computeOffsetAutoPosition)(this.mainPanel,this.optionsMenu,"bottom",n,"fixed",j.optionsHeight,0).then(({x:a,y:s})=>{this.optionsMenu.style.left=`${a}px`,this.optionsMenu.style.top=`${s}px`})}}get hasOptionsMenuOpen(){return!this.disabled&&this.optionsDisplayed&&this.hasOptions}get hasOptions(){return this.options.length>0}updateOptionsFromSlot(e){var o;e.stopPropagation();let i=(o=this.optionsSlot)===null||o===void 0?void 0:o.assignedElements().map(n=>n);i&&i.length>0&&(this.options=i)}onMainPanelKeyDown(e){switch(e.key){case" ":e.preventDefault(),e.stopPropagation();case"Enter":this.optionsDisplayed=!this.optionsDisplayed,this.focusOptions=!0;break;case"ArrowUp":case"ArrowDown":e.preventDefault(),e.stopPropagation(),this.optionsDisplayed=!0,this.focusOptions=!0;break}}onOptionsKeyDown(e){var o,i,n,a,s;let c;switch(e.key){case"Escape":this.optionsDisplayed=!1,(o=this.mainPanel)===null||o===void 0||o.focus();break;case"Tab":this.optionsDisplayed=!1;break;case"ArrowUp":e.preventDefault(),e.stopPropagation(),c=(n=(i=this.focusedOption)===null||i===void 0?void 0:i.previousElementSibling)!==null&&n!==void 0?n:this.lastOption;break;case"ArrowDown":e.preventDefault(),e.stopPropagation(),c=(s=(a=this.focusedOption)===null||a===void 0?void 0:a.nextElementSibling)!==null&&s!==void 0?s:this.firstOption;break;default:if(e.key.length!=1)break;this.isKeyAlphanumeric(e.key)&&(c=this.handleAlphanumericPress(e.key));break}c?.focus()}isKeyAlphanumeric(e){let o=e.charCodeAt(0);return o>47&&o<58||o>64&&o<91||o>96&&o<123}handleAlphanumericPress(e){var o,i;let n=new Date;n.getTime()-this.lastSearchInputDate.getTime()>t.searchTimeoutMilliseconds&&(this.currentSearch=""),this.currentSearch+=e.toLowerCase();let a=this.options.find(c=>{var p;return((p=c.label)===null||p===void 0?void 0:p.toLowerCase().substring(0,this.currentSearch.length))===this.currentSearch});if(a===void 0){this.lastSearchInputDate=n;return}let s=(i=(o=this.optionsMenu)===null||o===void 0?void 0:o.querySelector(`[data-value="${a.value}"]`))!==null&&i!==void 0?i:void 0;return this.lastSearchInputDate=n,s}onOptionKeyDown(e,o){var i;(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),e.stopPropagation(),this.selectOption(o),this.optionsDisplayed=!1,(i=this.mainPanel)===null||i===void 0||i.focus())}selectOption(e){var o,i;if(!(0,co.deepEqual)((o=this.selectedOption)===null||o===void 0?void 0:o.value,e.value)){this.selectedOption=e;for(let n of this.options)n.selected=n===e;this.dispatchEvent(new CustomEvent("change",{detail:(i=this.selectedOption)===null||i===void 0?void 0:i.value}))}this.optionsDisplayed=!1}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.hideOptions)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.hideOptions)}};re.elementDefinitions={"ft-input-label":Dt,"ft-typography":ee,"ft-ripple":V,"ft-icon":ne};re.searchTimeoutMilliseconds=2e3;re.styles=[br,Gt,uu];be([(0,le.property)({type:String})],re.prototype,"label",void 0);be([(0,le.property)({type:String})],re.prototype,"ariaLabel",void 0);be([(0,le.property)({type:String})],re.prototype,"helper",void 0);be([(0,le.property)({type:Boolean})],re.prototype,"outlined",void 0);be([(0,le.property)({type:Boolean})],re.prototype,"disabled",void 0);be([(0,le.property)({type:Boolean})],re.prototype,"error",void 0);be([(0,le.property)({type:Boolean})],re.prototype,"fixedMenuPosition",void 0);be([(0,le.property)({type:Array})],re.prototype,"options",void 0);be([(0,le.state)()],re.prototype,"selectedOption",void 0);be([(0,le.state)()],re.prototype,"optionsDisplayed",void 0);be([(0,le.state)()],re.prototype,"focusOptions",void 0);be([(0,le.state)()],re.prototype,"currentSearch",void 0);be([(0,le.state)()],re.prototype,"lastSearchInputDate",void 0);be([(0,le.query)(".ft-select")],re.prototype,"container",void 0);be([(0,le.query)(".ft-select--options")],re.prototype,"optionsMenu",void 0);be([(0,le.query)(".ft-select--input-panel")],re.prototype,"mainPanel",void 0);be([(0,le.query)(".ft-select--option:first-child")],re.prototype,"firstOption",void 0);be([(0,le.query)(".ft-select--option:focus")],re.prototype,"focusedOption",void 0);be([(0,le.query)(".ft-select--option.ft-select--option-selected")],re.prototype,"selectedOptionElement",void 0);be([(0,le.query)(".ft-select--option:last-child")],re.prototype,"lastOption",void 0);be([(0,le.query)("slot:not([name])")],re.prototype,"optionsSlot",void 0);(0,Ja.customElement)("ft-select")(re);(0,Ja.customElement)("ft-select-option")(er);var F=f(w()),es=f(I());var hu=f(I()),Ft=f(w()),We={display:Ft.FtCssVariableFactory.create("--ft-skeleton--display","","DISPLAY","block"),width:Ft.FtCssVariableFactory.create("--ft-skeleton--width","","SIZE","100%"),height:Ft.FtCssVariableFactory.create("--ft-skeleton--height","","SIZE","20px"),backgroundColor:Ft.FtCssVariableFactory.create("--ft-skeleton--background-color","","COLOR","#f1f1f1"),glareWidth:Ft.FtCssVariableFactory.create("--ft-skeleton--glare-width","","SIZE","200px"),glareColor:Ft.FtCssVariableFactory.create("--ft-skeleton--glare-color","","COLOR","rgba(255, 255, 255, .6)"),animationDuration:Ft.FtCssVariableFactory.create("--ft-skeleton--animation-duration","","UNKNOWN","2s"),borderRadiusM:Ft.FtCssVariableFactory.external(Ft.designSystemVariables.borderRadiusM,"Design system")},gu=hu.css`
     :host {
         width: ${We.width};
         height: ${We.height};