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

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

@@ -2670,7 +2670,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,n;if(super.contentAvailableCallback(e),e.has("focusOptions")&&this.focusOptions&&((n=(o=this.selectedOptionElement)!==null&&o!==void 0?o:this.firstOption)===null||n===void 0||n.focus(),this.focusOptions=!1),e.has("optionsDisplayed")&&this.hasOptionsMenuOpen){this.optionsMenu.style.width=this.mainPanel.getBoundingClientRect().width+"px";let i=["bottom","top"];(0,Gr.computeOffsetAutoPosition)(this.mainPanel,this.optionsMenu,"bottom",i,"fixed",V.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 n=(o=this.optionsSlot)===null||o===void 0?void 0:o.assignedElements().map(i=>i);n&&n.length>0&&(this.options=n)}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,n,i,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=(i=(n=this.focusedOption)===null||n===void 0?void 0:n.previousElementSibling)!==null&&i!==void 0?i: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,n;let i=new Date;i.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=i;return}let s=(n=(o=this.optionsMenu)===null||o===void 0?void 0:o.querySelector(`[data-value="${a.value}"]`))!==null&&n!==void 0?n:void 0;return this.lastSearchInputDate=i,s}onOptionKeyDown(e,o){var n;(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),e.stopPropagation(),this.selectOption(o),this.optionsDisplayed=!1,(n=this.mainPanel)===null||n===void 0||n.focus())}selectOption(e){var o,n;if(!(0,Gr.deepEqual)((o=this.selectedOption)===null||o===void 0?void 0:o.value,e.value)){this.selectedOption=e;for(let i of this.options)i.selected=i===e;this.dispatchEvent(new CustomEvent("change",{detail:(n=this.selectedOption)===null||n===void 0?void 0:n.value}))}this.optionsDisplayed=!1}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.hideOptions)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.hideOptions)}};ee.elementDefinitions={"ft-input-label":kt,"ft-typography":re,"ft-ripple":q,"ft-icon":le};ee.searchTimeoutMilliseconds=2e3;ee.styles=[lo,Ft,jc];me([(0,ae.property)({type:String})],ee.prototype,"label",void 0);me([(0,ae.property)({type:String})],ee.prototype,"ariaLabel",void 0);me([(0,ae.property)({type:String})],ee.prototype,"helper",void 0);me([(0,ae.property)({type:Boolean})],ee.prototype,"outlined",void 0);me([(0,ae.property)({type:Boolean})],ee.prototype,"disabled",void 0);me([(0,ae.property)({type:Boolean})],ee.prototype,"error",void 0);me([(0,ae.property)({type:Boolean})],ee.prototype,"fixedMenuPosition",void 0);me([(0,ae.property)({type:Array})],ee.prototype,"options",void 0);me([(0,ae.state)()],ee.prototype,"selectedOption",void 0);me([(0,ae.state)()],ee.prototype,"optionsDisplayed",void 0);me([(0,ae.state)()],ee.prototype,"focusOptions",void 0);me([(0,ae.state)()],ee.prototype,"currentSearch",void 0);me([(0,ae.state)()],ee.prototype,"lastSearchInputDate",void 0);me([(0,ae.query)(".ft-select")],ee.prototype,"container",void 0);me([(0,ae.query)(".ft-select--options")],ee.prototype,"optionsMenu",void 0);me([(0,ae.query)(".ft-select--input-panel")],ee.prototype,"mainPanel",void 0);me([(0,ae.query)(".ft-select--option:first-child")],ee.prototype,"firstOption",void 0);me([(0,ae.query)(".ft-select--option:focus")],ee.prototype,"focusedOption",void 0);me([(0,ae.query)(".ft-select--option.ft-select--option-selected")],ee.prototype,"selectedOptionElement",void 0);me([(0,ae.query)(".ft-select--option:last-child")],ee.prototype,"lastOption",void 0);me([(0,ae.query)("slot:not([name])")],ee.prototype,"optionsSlot",void 0);(0,ji.customElement)("ft-select")(ee);(0,ji.customElement)("ft-select-option")(Gt);var F=f(E()),Ki=f(T());var Zc=f(T()),It=f(E()),Me={display:It.FtCssVariableFactory.create("--ft-skeleton--display","","DISPLAY","block"),width:It.FtCssVariableFactory.create("--ft-skeleton--width","","SIZE","100%"),height:It.FtCssVariableFactory.create("--ft-skeleton--height","","SIZE","20px"),backgroundColor:It.FtCssVariableFactory.create("--ft-skeleton--background-color","","COLOR","#f1f1f1"),glareWidth:It.FtCssVariableFactory.create("--ft-skeleton--glare-width","","SIZE","200px"),glareColor:It.FtCssVariableFactory.create("--ft-skeleton--glare-color","","COLOR","rgba(255, 255, 255, .6)"),animationDuration:It.FtCssVariableFactory.create("--ft-skeleton--animation-duration","","UNKNOWN","2s"),borderRadiusM:It.FtCssVariableFactory.external(It.designSystemVariables.borderRadiusM,"Design system")},qc=Zc.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,n;if(super.contentAvailableCallback(e),e.has("focusOptions")&&this.focusOptions&&((n=(o=this.selectedOptionElement)!==null&&o!==void 0?o:this.firstOption)===null||n===void 0||n.focus(),this.focusOptions=!1),e.has("optionsDisplayed")&&this.hasOptionsMenuOpen){this.optionsMenu.style.width=this.mainPanel.getBoundingClientRect().width+"px";let i=["bottom","top"];(0,Gr.computeOffsetAutoPosition)(this.mainPanel,this.optionsMenu,"bottom",i,"fixed",V.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 n=(o=this.optionsSlot)===null||o===void 0?void 0:o.assignedElements().map(i=>i);n&&n.length>0&&(this.options=n)}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,n,i,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=(i=(n=this.focusedOption)===null||n===void 0?void 0:n.previousElementSibling)!==null&&i!==void 0?i: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,n;let i=new Date;i.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=i;return}let s=(n=(o=this.optionsMenu)===null||o===void 0?void 0:o.querySelector(`[data-value="${a.value}"]`))!==null&&n!==void 0?n:void 0;return this.lastSearchInputDate=i,s}onOptionKeyDown(e,o){var n;(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),e.stopPropagation(),this.selectOption(o),this.optionsDisplayed=!1,(n=this.mainPanel)===null||n===void 0||n.focus())}selectOption(e){var o,n;if(!(0,Gr.deepEqual)((o=this.selectedOption)===null||o===void 0?void 0:o.value,e.value)){this.selectedOption=e;for(let i of this.options)i.selected=i===e;this.dispatchEvent(new CustomEvent("change",{detail:(n=this.selectedOption)===null||n===void 0?void 0:n.value}))}this.optionsDisplayed=!1}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.hideOptions)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.hideOptions)}};ee.elementDefinitions={"ft-input-label":kt,"ft-typography":re,"ft-ripple":q,"ft-icon":le};ee.searchTimeoutMilliseconds=2e3;ee.styles=[lo,Ft,jc];me([(0,ae.property)({type:String})],ee.prototype,"label",void 0);me([(0,ae.property)({type:String})],ee.prototype,"ariaLabel",void 0);me([(0,ae.property)({type:String})],ee.prototype,"helper",void 0);me([(0,ae.property)({type:Boolean})],ee.prototype,"outlined",void 0);me([(0,ae.property)({type:Boolean})],ee.prototype,"disabled",void 0);me([(0,ae.property)({type:Boolean})],ee.prototype,"error",void 0);me([(0,ae.property)({type:Boolean})],ee.prototype,"fixedMenuPosition",void 0);me([(0,ae.property)({type:Array})],ee.prototype,"options",void 0);me([(0,ae.state)()],ee.prototype,"selectedOption",void 0);me([(0,ae.state)()],ee.prototype,"optionsDisplayed",void 0);me([(0,ae.state)()],ee.prototype,"focusOptions",void 0);me([(0,ae.state)()],ee.prototype,"currentSearch",void 0);me([(0,ae.state)()],ee.prototype,"lastSearchInputDate",void 0);me([(0,ae.query)(".ft-select")],ee.prototype,"container",void 0);me([(0,ae.query)(".ft-select--options")],ee.prototype,"optionsMenu",void 0);me([(0,ae.query)(".ft-select--input-panel")],ee.prototype,"mainPanel",void 0);me([(0,ae.query)(".ft-select--option:first-child")],ee.prototype,"firstOption",void 0);me([(0,ae.query)(".ft-select--option:focus")],ee.prototype,"focusedOption",void 0);me([(0,ae.query)(".ft-select--option.ft-select--option-selected")],ee.prototype,"selectedOptionElement",void 0);me([(0,ae.query)(".ft-select--option:last-child")],ee.prototype,"lastOption",void 0);me([(0,ae.query)("slot:not([name])")],ee.prototype,"optionsSlot",void 0);(0,ji.customElement)("ft-select")(ee);(0,ji.customElement)("ft-select-option")(Gt);var F=f(E()),Ki=f(T());var Zc=f(T()),It=f(E()),Me={display:It.FtCssVariableFactory.create("--ft-skeleton--display","","DISPLAY","block"),width:It.FtCssVariableFactory.create("--ft-skeleton--width","","SIZE","100%"),height:It.FtCssVariableFactory.create("--ft-skeleton--height","","SIZE","20px"),backgroundColor:It.FtCssVariableFactory.create("--ft-skeleton--background-color","","COLOR","#f1f1f1"),glareWidth:It.FtCssVariableFactory.create("--ft-skeleton--glare-width","","SIZE","200px"),glareColor:It.FtCssVariableFactory.create("--ft-skeleton--glare-color","","COLOR","rgba(255, 255, 255, .6)"),animationDuration:It.FtCssVariableFactory.create("--ft-skeleton--animation-duration","","UNKNOWN","2s"),borderRadiusM:It.FtCssVariableFactory.external(It.designSystemVariables.borderRadiusM,"Design system")},qc=Zc.css`
     :host {
         width: ${Me.width};
         height: ${Me.height};