@fluid-topics/ft-filterable-table 1.3.46 → 1.3.47

package/build/ft-filterable-table.light.js

@@ -715,16 +715,16 @@ Also for action icons.`,r.colorGray200),contentGlobalSubtle:t.extend("--ftds-con
             <slot @slotchange=${this.updateOptionsFromSlot}
                   @option-change=${this.updateOptionsFromSlot}
             ></slot>
-        `}renderOption(e,a){var i;let n=this.selectedOption===e;return de.html`
-            <div class="${(0,cr.classMap)({"ft-select--option":!0,"ft-select--option-selected":n,"ft-typography--body2":!0})}"
-                 part="option option-${(i=e.value)===null||i===void 0?void 0:i.replace(/[^\w-]/g,"")}"
+        `}renderOption(e,a){var i,n;let s=this.selectedOption===e;return de.html`
+            <div class="${(0,cr.classMap)({"ft-select--option":!0,"ft-select--option-selected":s,"ft-typography--body2":!0})}"
+                 part="option option-${(n=(i=e.value)===null||i===void 0?void 0:i.toString())===null||n===void 0?void 0:n.replace(/[^\w-]/g,"")}"
                  tabindex="0"
                  aria-label="${e.label}"
                  data-value="${e.value}"
                  id="${"option-"+a}"
-                 @keydown=${d=>this.onOptionKeyDown(d,e)}
+                 @keydown=${c=>this.onOptionKeyDown(c,e)}
                  @click=${()=>this.selectOption(e)}>
-                <ft-ripple ?primary=${n} ?activated=${n}></ft-ripple>
+                <ft-ripple ?primary=${s} ?activated=${s}></ft-ripple>
                 <span>${e.label}</span>
             </div>
         `}willUpdate(e){super.willUpdate(e),e.has("options")&&(this.selectedOption=this.options.filter(a=>a.selected)[0]),e.has("selectedOption")&&(this.optionsDisplayed=!1)}contentAvailableCallback(e){var a,i;if(super.contentAvailableCallback(e),e.has("focusOptions")&&this.focusOptions&&((i=(a=this.selectedOptionElement)!==null&&a!==void 0?a: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,Qt.computeOffsetAutoPosition)(this.mainPanel,this.optionsMenu,"bottom",n,"fixed",R.optionsHeight,0).then(({x:s,y:d})=>{this.optionsMenu.style.left=`${s}px`,this.optionsMenu.style.top=`${d}px`})}}get hasOptionsMenuOpen(){return!this.disabled&&this.optionsDisplayed&&this.hasOptions}get hasOptions(){return this.options.length>0}updateOptionsFromSlot(e){var a;e.stopPropagation();let i=(a=this.optionsSlot)===null||a===void 0?void 0:a.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 a,i,n,s,d;let c;switch(e.key){case"Escape":this.optionsDisplayed=!1,(a=this.mainPanel)===null||a===void 0||a.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=(d=(s=this.focusedOption)===null||s===void 0?void 0:s.nextElementSibling)!==null&&d!==void 0?d: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 a=e.charCodeAt(0);return a>47&&a<58||a>64&&a<91||a>96&&a<123}handleAlphanumericPress(e){var a,i;let n=new Date;n.getTime()-this.lastSearchInputDate.getTime()>o.searchTimeoutMilliseconds&&(this.currentSearch=""),this.currentSearch+=e.toLowerCase();let s=this.options.find(c=>{var f;return((f=c.label)===null||f===void 0?void 0:f.toLowerCase().substring(0,this.currentSearch.length))===this.currentSearch});if(s===void 0){this.lastSearchInputDate=n;return}let d=(i=(a=this.optionsMenu)===null||a===void 0?void 0:a.querySelector(`[data-value="${s.value}"]`))!==null&&i!==void 0?i:void 0;return this.lastSearchInputDate=n,d}onOptionKeyDown(e,a){var i;(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),e.stopPropagation(),this.selectOption(a),this.optionsDisplayed=!1,(i=this.mainPanel)===null||i===void 0||i.focus())}getOptionId(e){if(!e)return;let a=this.options.findIndex(i=>(0,Qt.deepEqual)(i.value,e.value));if(a!==-1)return`option-${a}`}selectOption(e){var a,i;if(!(0,Qt.deepEqual)((a=this.selectedOption)===null||a===void 0?void 0:a.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)}};T.elementDefinitions={"ft-input-label":ht,"ft-typography":nt,"ft-ripple":z,"ft-icon":tt};T.searchTimeoutMilliseconds=2e3;T.styles=[so,Yt,Ha];G([(0,_.property)({type:String})],T.prototype,"label",void 0);G([(0,_.property)({type:String})],T.prototype,"ariaLabel",void 0);G([(0,_.property)({type:String})],T.prototype,"helper",void 0);G([(0,_.property)({type:Boolean})],T.prototype,"outlined",void 0);G([(0,_.property)({type:Boolean})],T.prototype,"disabled",void 0);G([(0,_.property)({type:Boolean})],T.prototype,"error",void 0);G([(0,_.property)({type:Boolean})],T.prototype,"fixedMenuPosition",void 0);G([(0,_.property)({type:Array})],T.prototype,"options",void 0);G([(0,_.state)()],T.prototype,"selectedOption",void 0);G([(0,_.state)()],T.prototype,"optionsDisplayed",void 0);G([(0,_.state)()],T.prototype,"focusOptions",void 0);G([(0,_.state)()],T.prototype,"currentSearch",void 0);G([(0,_.state)()],T.prototype,"lastSearchInputDate",void 0);G([(0,_.query)(".ft-select")],T.prototype,"container",void 0);G([(0,_.query)(".ft-select--options")],T.prototype,"optionsMenu",void 0);G([(0,_.query)(".ft-select--input-panel")],T.prototype,"mainPanel",void 0);G([(0,_.query)(".ft-select--option:first-child")],T.prototype,"firstOption",void 0);G([(0,_.query)(".ft-select--option:focus")],T.prototype,"focusedOption",void 0);G([(0,_.query)(".ft-select--option.ft-select--option-selected")],T.prototype,"selectedOptionElement",void 0);G([(0,_.query)(".ft-select--option:last-child")],T.prototype,"lastOption",void 0);G([(0,_.query)("slot:not([name])")],T.prototype,"optionsSlot",void 0);(0,pr.customElement)("ft-select")(T);(0,pr.customElement)("ft-select-option")(Jt);var ur=u(L());var et=u(W()),P=u(pt()),ja=u(eo()),Ya=u(Zt());var te=u(L());var Ua=u(W()),O=u(L());var $={fontSize:O.FtCssVariableFactory.create("--ft-text-field-font-size","","SIZE","14px"),labelSize:O.FtCssVariableFactory.create("--ft-text-field-label-size","","SIZE","11px"),verticalSpacing:O.FtCssVariableFactory.create("--ft-text-field-vertical-spacing","","SIZE","4px"),horizontalSpacing:O.FtCssVariableFactory.create("--ft-text-field-horizontal-spacing","","SIZE","16px"),helperColor:O.FtCssVariableFactory.extend("--ft-text-field-helper-color","",O.designSystemVariables.colorOnSurfaceMedium),colorPrimary:O.FtCssVariableFactory.external(O.designSystemVariables.colorPrimary,"Design system"),colorOnSurface:O.FtCssVariableFactory.external(O.designSystemVariables.colorOnSurface,"Design system"),colorOnSurfaceDisabled:O.FtCssVariableFactory.external(O.designSystemVariables.colorOnSurfaceDisabled,"Design system"),borderRadiusS:O.FtCssVariableFactory.external(O.designSystemVariables.borderRadiusS,"Design system"),colorError:O.FtCssVariableFactory.external(O.designSystemVariables.colorError,"Design system"),prefixColor:O.FtCssVariableFactory.extend("--ft-text-field-prefix-color","",O.designSystemVariables.colorOnSurfaceMedium),iconColor:O.FtCssVariableFactory.extend("--ft-text-field-icon-color","",O.designSystemVariables.colorOnSurfaceMedium),floatingZIndex:O.FtCssVariableFactory.create("--ft-text-field-floating-components-z-index","","NUMBER","3"),backgroundColor:O.FtCssVariableFactory.extend("--ft-text-field-background-color","",O.designSystemVariables.colorSurface),colorOutline:O.FtCssVariableFactory.external(O.designSystemVariables.colorOutline,"Design system"),elevation02:O.FtCssVariableFactory.external(O.designSystemVariables.elevation02,"Design system"),suggestSize:O.FtCssVariableFactory.create("--ft-text-field-suggest-size","","SIZE","300px")},Fa=Ua.css`

package/build/ft-filterable-table.min.js

@@ -796,16 +796,16 @@ Also for action icons.`,l.colorGray200),contentGlobalSubtle:r.extend("--ftds-con
             <slot @slotchange=${this.updateOptionsFromSlot}
                   @option-change=${this.updateOptionsFromSlot}
             ></slot>
-        `}renderOption(e,o){var n;let i=this.selectedOption===e;return k`
-            <div class="${ge({"ft-select--option":!0,"ft-select--option-selected":i,"ft-typography--body2":!0})}"
-                 part="option option-${(n=e.value)===null||n===void 0?void 0:n.replace(/[^\w-]/g,"")}"
+        `}renderOption(e,o){var n,i;let a=this.selectedOption===e;return k`
+            <div class="${ge({"ft-select--option":!0,"ft-select--option-selected":a,"ft-typography--body2":!0})}"
+                 part="option option-${(i=(n=e.value)===null||n===void 0?void 0:n.toString())===null||i===void 0?void 0:i.replace(/[^\w-]/g,"")}"
                  tabindex="0"
                  aria-label="${e.label}"
                  data-value="${e.value}"
                  id="${"option-"+o}"
-                 @keydown=${s=>this.onOptionKeyDown(s,e)}
+                 @keydown=${c=>this.onOptionKeyDown(c,e)}
                  @click=${()=>this.selectOption(e)}>
-                <ft-ripple ?primary=${i} ?activated=${i}></ft-ripple>
+                <ft-ripple ?primary=${a} ?activated=${a}></ft-ripple>
                 <span>${e.label}</span>
             </div>
         `}willUpdate(e){super.willUpdate(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"];qr(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 d;return((d=c.label)===null||d===void 0?void 0:d.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())}getOptionId(e){if(!e)return;let o=this.options.findIndex(n=>yt(n.value,e.value));if(o!==-1)return`option-${o}`}selectOption(e){var o,n;if(!yt((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)}};re.elementDefinitions={"ft-input-label":Ne,"ft-typography":ve,"ft-ripple":te,"ft-icon":pe};re.searchTimeoutMilliseconds=2e3;re.styles=[fn,Rt,Cc];se([O({type:String})],re.prototype,"label",void 0);se([O({type:String})],re.prototype,"ariaLabel",void 0);se([O({type:String})],re.prototype,"helper",void 0);se([O({type:Boolean})],re.prototype,"outlined",void 0);se([O({type:Boolean})],re.prototype,"disabled",void 0);se([O({type:Boolean})],re.prototype,"error",void 0);se([O({type:Boolean})],re.prototype,"fixedMenuPosition",void 0);se([O({type:Array})],re.prototype,"options",void 0);se([j()],re.prototype,"selectedOption",void 0);se([j()],re.prototype,"optionsDisplayed",void 0);se([j()],re.prototype,"focusOptions",void 0);se([j()],re.prototype,"currentSearch",void 0);se([j()],re.prototype,"lastSearchInputDate",void 0);se([Q(".ft-select")],re.prototype,"container",void 0);se([Q(".ft-select--options")],re.prototype,"optionsMenu",void 0);se([Q(".ft-select--input-panel")],re.prototype,"mainPanel",void 0);se([Q(".ft-select--option:first-child")],re.prototype,"firstOption",void 0);se([Q(".ft-select--option:focus")],re.prototype,"focusedOption",void 0);se([Q(".ft-select--option.ft-select--option-selected")],re.prototype,"selectedOptionElement",void 0);se([Q(".ft-select--option:last-child")],re.prototype,"lastOption",void 0);se([Q("slot:not([name])")],re.prototype,"optionsSlot",void 0);ie("ft-select")(re);ie("ft-select-option")(_t);var H={fontSize:r.create("--ft-text-field-font-size","","SIZE","14px"),labelSize:r.create("--ft-text-field-label-size","","SIZE","11px"),verticalSpacing:r.create("--ft-text-field-vertical-spacing","","SIZE","4px"),horizontalSpacing:r.create("--ft-text-field-horizontal-spacing","","SIZE","16px"),helperColor:r.extend("--ft-text-field-helper-color","",I.colorOnSurfaceMedium),colorPrimary:r.external(I.colorPrimary,"Design system"),colorOnSurface:r.external(I.colorOnSurface,"Design system"),colorOnSurfaceDisabled:r.external(I.colorOnSurfaceDisabled,"Design system"),borderRadiusS:r.external(I.borderRadiusS,"Design system"),colorError:r.external(I.colorError,"Design system"),prefixColor:r.extend("--ft-text-field-prefix-color","",I.colorOnSurfaceMedium),iconColor:r.extend("--ft-text-field-icon-color","",I.colorOnSurfaceMedium),floatingZIndex:r.create("--ft-text-field-floating-components-z-index","","NUMBER","3"),backgroundColor:r.extend("--ft-text-field-background-color","",I.colorSurface),colorOutline:r.external(I.colorOutline,"Design system"),elevation02:r.external(I.elevation02,"Design system"),suggestSize:r.create("--ft-text-field-suggest-size","","SIZE","300px")},wc=P`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-filterable-table",
-  "version": "1.3.46",
+  "version": "1.3.47",
   "description": "A dynamic table with filters",
   "keywords": [
     "Lit"
@@ -23,11 +23,11 @@
   },
   "dependencies": {
     "@fluid-topics/design-system-variables": "2.53.1",
-    "@fluid-topics/ft-button": "1.3.46",
-    "@fluid-topics/ft-select": "1.3.46",
-    "@fluid-topics/ft-text-field": "1.3.46",
-    "@fluid-topics/ft-wc-utils": "1.3.46",
+    "@fluid-topics/ft-button": "1.3.47",
+    "@fluid-topics/ft-select": "1.3.47",
+    "@fluid-topics/ft-text-field": "1.3.47",
+    "@fluid-topics/ft-wc-utils": "1.3.47",
     "lit": "3.1.0"
   },
-  "gitHead": "d6cf25d6ed0dead8c7aff4f94a493c35d12f1392"
+  "gitHead": "16ac56d62f3a88a3b03cbc92bcd04dd91951a015"
 }