@fluid-topics/ft-filterable-table 0.1.0 → 0.1.1

package/README.md

@@ -1,3 +1,5 @@
+A table that display data according to a display template.
+
 ## Install
 
 ```shell

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

@@ -337,7 +337,7 @@ const ge=n`:host{font-family:var(--mdc-icon-font, "Material Icons");font-weight:
      * @license
      * Copyright 2018 Google LLC
      * SPDX-License-Identifier: Apache-2.0
-     */;let xe=class extends tt{render(){return R`<span><slot></slot></span>`}};xe.styles=[ge],xe=Yt([it("mwc-icon")],xe);var we=function(t,e,i,r){for(var o,n=arguments.length,a=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,s=t.length-1;s>=0;s--)(o=t[s])&&(a=(n<3?o(a):n>3?o(e,i,a):o(e,i))||a);return n>3&&a&&Object.defineProperty(e,i,a),a};let ke=class extends Ot{constructor(){super(...arguments),this.label="",this.value=null,this.selected=!1}getTemplate(){return R``}updated(t){super.updated(t),this.dispatchEvent(new CustomEvent("option-change",{detail:this,bubbles:!0}))}};ke.elementDefinitions={},we([ot({type:String})],ke.prototype,"label",void 0),we([ot({type:Object,converter:t=>t})],ke.prototype,"value",void 0),we([ot({type:Boolean,reflect:!0})],ke.prototype,"selected",void 0),ke=we([zt("ft-select-option")],ke);let $e=class extends Ot{constructor(){super(...arguments),this.label="",this.helper="",this.outlined=!1,this.disabled=!1,this.options=[],this.optionsDisplayed=!1,this.focusOptions=!1,this.hideOptions=()=>this.optionsDisplayed=!1}getStyles(){return[Lt,Pt,n`:focus{outline:0}.ft-select{display:flex;flex-direction:column;align-items:stretch}.ft-select--main-panel{position:relative;display:flex;height:calc(4 * var(--ft-select-vertical-spacing,4px) + var(--ft-select-label-size,11px) + var(--ft-select-selected-option-size,14px))}.ft-select--input-panel{flex-grow:1;position:relative;display:flex;align-items:center;overflow:hidden;padding-left:16px;padding-right:8px;gap:8px}.ft-select--input-panel,.ft-select--option{color:var(--ft-color-on-surface,rgba(0,0,0,.87));--ft-opacity-color-content-on-surface-hover:0.08;--ft-opacity-color-content-on-surface-dragged:0.04}.ft-select--disabled .ft-select--input-panel,.ft-select--disabled .ft-select--option{color:var(--ft-color-on-surface-disabled,rgba(0,0,0,.38))}.ft-select:not(.ft-select--disabled) .ft-select--input-panel{cursor:pointer}ft-input-label{--ft-input-label-font-size:var(--ft-select-selected-option-size, 14px);--ft-input-label-raised-font-size:var(--ft-select-label-size, 11px);--ft-input-label-vertical-spacing:var(--ft-select-vertical-spacing, 4px)}.ft-select:not(.ft-select--disabled):focus-within ft-input-label{--ft-input-label-border-color:var(--ft-color-primary, #2196F3);--ft-input-label-text-color:var(--ft-color-primary, #2196F3)}.ft-select--selected-option{display:block;flex-grow:1;flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;--ft-typography-font-size:var(--ft-select-selected-option-size, 14px);--ft-typography-line-height:var(--ft-select-selected-option-size, 14px)}mwc-icon{flex-shrink:0}slot{display:none}.ft-select--filled .ft-select--input-panel{border-radius:var(--ft-border-radius-S,4px) var(--ft-border-radius-S,4px) 0 0}.ft-select--filled:not(.ft-select--no-label) .ft-select--selected-option{align-self:stretch;padding-top:calc(var(--ft-select-label-size,11px) + 2 * var(--ft-select-vertical-spacing,4px))}.ft-select--outlined .ft-select--input-panel{border-radius:var(--ft-border-radius-S,4px)}.ft-select--options{display:none;position:absolute;top:100%;left:0;right:0;background:var(--ft-color-surface,#fff);z-index:var(--ft-select-options-z-index,1);box-shadow:var(--ft-elevation-02,0 4px 10px 0 rgba(0,0,0,.06),0 2px 5px 0 rgba(0,0,0,.14),0 0 1px 0 rgba(0,0,0,.06))}.ft-select--options-displayed .ft-select--options{display:block}.ft-select--option{position:relative;padding:4px 16px;min-height:32px;display:flex;align-items:center}.ft-select--helper-text{padding:0 12px 0 16px;color:var(--ft-select-helper-color,var(--ft-color-on-surface-medium,rgba(0,0,0,.6)))}`]}getTemplate(){var t,e,i,r,o;let n=!this.disabled&&this.optionsDisplayed&&this.hasOptions,a=this.disabled||!this.hasOptions;const s={"ft-select":!0,"ft-select--filled":!this.outlined,"ft-select--outlined":this.outlined,"ft-select--disabled":a,"ft-select--options-displayed":n,"ft-select--has-value":null!=(null===(t=this.selectedOption)||void 0===t?void 0:t.value),"ft-select--no-label":!this.label};return R`<div class="${Et(s)}" @click="${t=>t.stopPropagation()}" part="container"><div class="ft-select--main-panel" part="main-panel"><ft-input-label text="${this.label}" part="label" ?disabled="${a}" ?outlined="${this.outlined}" ?raised="${null!=(null===(e=this.selectedOption)||void 0===e?void 0:e.value)||n}"></ft-input-label><div class="ft-select--input-panel" part="selected-value" tabindex="${a?"-1":"0"}" @click="${()=>this.optionsDisplayed=!this.optionsDisplayed}" @keydown="${this.onMainPanelKeyDown}" aria-label="${this.label}" aria-haspopup="listbox" aria-expanded="${n}">${this.outlined?null:R`<ft-ripple ?disabled="${a}" activated></ft-ripple>`}<ft-typography variant="body1" class="ft-select--selected-option">${null!=(null===(i=this.selectedOption)||void 0===i?void 0:i.value)&&null!==(o=null===(r=this.selectedOption)||void 0===r?void 0:r.label)&&void 0!==o?o:""}</ft-typography><mwc-icon>${n?"expand_less":"expand_more"}</mwc-icon></div><div class="ft-select--options" part="options" @keydown="${this.onOptionsKeyDown}" innerrole="listbox">${wt(this.options,(t=>t.value),(t=>this.renderOption(t)))}</div></div>${this.helper?R`<ft-typography class="ft-select--helper-text" variant="caption">${this.helper}</ft-typography>`:void 0}</div><slot @slotchange="${this.updateOptionsFromSlot}" @option-change="${this.updateOptionsFromSlot}"></slot>`}renderOption(t){let e=this.selectedOption===t;return R`<div class="${Et({"ft-select--option":!0,"ft-select--option-selected":e,"ft-typography--body2":!0})}" part="option" tabindex="0" @keydown="${e=>this.onOptionKeyDown(e,t)}" @click="${()=>this.selectOption(t)}"><ft-ripple ?primary="${e}" ?activated="${e}"></ft-ripple>${t.label}</div>`}updated(t){var e;super.updated(t),t.has("options")&&(this.selectedOption=this.options.filter((t=>t.selected))[0]),t.has("selectedOption")&&(this.optionsDisplayed=!1,this.dispatchEvent(new CustomEvent("change",{detail:null===(e=this.selectedOption)||void 0===e?void 0:e.value})))}contentAvailableCallback(t){var e,i;t.has("focusOptions")&&this.focusOptions&&(null===(i=null!==(e=this.selectedOptionElement)&&void 0!==e?e:this.firstOption)||void 0===i||i.focus(),this.focusOptions=!1)}get hasOptions(){return this.options.length>0}updateOptionsFromSlot(t){var e;t.stopPropagation();let i=null===(e=this.optionsSlot)||void 0===e?void 0:e.assignedElements().map((t=>t));i&&i.length>0&&(this.options=i)}onMainPanelKeyDown(t){switch(t.key){case" ":t.preventDefault(),t.stopPropagation();case"Enter":this.optionsDisplayed=!this.optionsDisplayed,this.focusOptions=!0;break;case"ArrowUp":case"ArrowDown":t.preventDefault(),t.stopPropagation(),this.optionsDisplayed=!0,this.focusOptions=!0}}onOptionsKeyDown(t){var e,i,r,o,n;let a;switch(t.key){case"Escape":this.optionsDisplayed=!1,null===(e=this.mainPanel)||void 0===e||e.focus();break;case"Tab":this.optionsDisplayed=!1;break;case"ArrowUp":t.preventDefault(),t.stopPropagation(),a=null!==(r=null===(i=this.focusedOption)||void 0===i?void 0:i.previousElementSibling)&&void 0!==r?r:this.lastOption;break;case"ArrowDown":t.preventDefault(),t.stopPropagation(),a=null!==(n=null===(o=this.focusedOption)||void 0===o?void 0:o.nextElementSibling)&&void 0!==n?n:this.firstOption}null==a||a.focus()}onOptionKeyDown(t,e){var i;"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),t.stopPropagation(),this.selectOption(e),this.optionsDisplayed=!1,null===(i=this.mainPanel)||void 0===i||i.focus())}selectOption(t){this.selectedOption=t;for(let e of this.options)e.selected=e===t}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.hideOptions)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.hideOptions)}};$e.elementDefinitions={"ft-input-label":Zt,"ft-typography":Wt,"ft-ripple":be,"mwc-icon":xe},we([ot({type:String})],$e.prototype,"label",void 0),we([ot({type:String})],$e.prototype,"helper",void 0),we([ot({type:Boolean})],$e.prototype,"outlined",void 0),we([ot({type:Boolean})],$e.prototype,"disabled",void 0),we([ot({type:Array})],$e.prototype,"options",void 0),we([nt()],$e.prototype,"selectedOption",void 0),we([nt()],$e.prototype,"optionsDisplayed",void 0),we([nt()],$e.prototype,"focusOptions",void 0),we([st(".ft-select--input-panel")],$e.prototype,"mainPanel",void 0),we([st(".ft-select--option:first-child")],$e.prototype,"firstOption",void 0),we([st(".ft-select--option:focus")],$e.prototype,"focusedOption",void 0),we([st(".ft-select--option.ft-select--option-selected")],$e.prototype,"selectedOptionElement",void 0),we([st(".ft-select--option:last-child")],$e.prototype,"lastOption",void 0),we([st("slot")],$e.prototype,"optionsSlot",void 0),$e=we([zt("ft-select")],$e);var Se=function(t,e,i,r){for(var o,n=arguments.length,a=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,s=t.length-1;s>=0;s--)(o=t[s])&&(a=(n<3?o(a):n>3?o(e,i,a):o(e,i))||a);return n>3&&a&&Object.defineProperty(e,i,a),a};let ze=class extends Ot{constructor(){super(...arguments),this.label="",this.value="",this.helper="",this.outlined=!1,this.disabled=!1,this.dataList=[],this.focused=!1}getStyles(){return[Pt,n`:focus{outline:0}.ft-text-field{display:flex;flex-direction:column;align-items:stretch}ft-input-label{--ft-input-label-font-size:var(--ft-text-field-font-size, 14px);--ft-input-label-raised-font-size:var(--ft-text-field-label-size, 11px);--ft-input-label-vertical-spacing:var(--ft-text-field-vertical-spacing, 4px);--ft-input-label-horizontal-spacing:calc(var(--ft-text-field-horizontal-spacing, 16px) - 4px)}.ft-text-field--main-panel{position:relative;display:flex;height:calc(4 * var(--ft-text-field-vertical-spacing,4px) + var(--ft-text-field-label-size,11px) + var(--ft-text-field-font-size,14px))}.ft-text-field--input-panel{flex-grow:1;position:relative;display:flex;align-items:center;overflow:hidden;gap:8px}.ft-text-field--input{display:block;flex-grow:1;flex-shrink:1;min-width:0;--ft-typography-font-size:var(--ft-text-field-font-size, 14px);--ft-typography-line-height:var(--ft-text-field-font-size, 14px);color:var(--ft-color-on-surface,rgba(0,0,0,.87));--ft-opacity-color-content-on-surface-hover:0.08;--ft-opacity-color-content-on-surface-dragged:0.04;padding:0 var(--ft-text-field-horizontal-spacing,16px);border:none;background:0 0}.ft-text-field--disabled .ft-text-field--input{color:var(--ft-color-on-surface-disabled,rgba(0,0,0,.38))}.ft-text-field:not(.ft-text-field--disabled) .ft-text-field--input-panel{cursor:pointer}.ft-text-field:not(.ft-text-field--disabled):focus-within ft-text-field-label{--ft-text-field-label-border-color:var(--ft-color-primary, #2196F3);--ft-text-field-label-text-color:var(--ft-color-primary, #2196F3)}.ft-text-field--filled .ft-text-field--input-panel{border-radius:var(--ft-border-radius-S,4px) var(--ft-border-radius-S,4px) 0 0}.ft-text-field--filled:not(.ft-text-field--no-label) .ft-text-field--input{align-self:stretch;padding-bottom:var(--ft-text-field-vertical-spacing,4px);padding-top:calc(var(--ft-text-field-label-size,11px) + 2 * var(--ft-text-field-vertical-spacing,4px))}.ft-text-field--outlined .ft-text-field--input-panel{border-radius:var(--ft-border-radius-S,4px)}.ft-text-field--helper-text{padding:0 12px 0 var(--ft-text-field-horizontal-spacing,16px);color:var(--ft-text-field-helper-color,var(--ft-color-on-surface-medium,rgba(0,0,0,.6)))}`]}getTemplate(){const t={"ft-text-field":!0,"ft-text-field--filled":!this.outlined,"ft-text-field--outlined":this.outlined,"ft-text-field--disabled":this.disabled,"ft-text-field--has-value":!!this.value,"ft-text-field--no-label":!this.label};return R`<div class="${Et(t)}"><div class="ft-text-field--main-panel"><ft-input-label text="${this.label}" ?disabled="${this.disabled}" ?outlined="${this.outlined}" ?raised="${this.focused||""!=this.value}"></ft-input-label><div class="ft-text-field--input-panel" aria-label="${this.label}">${this.outlined?null:R`<ft-ripple ?disabled="${this.disabled}" activated></ft-ripple>`} <input type="text" class="ft-typography--caption ft-text-field--input" ?disabled="${this.disabled}" .value="${this.value}" @change="${this.updateValueFromInputField}" @keyup="${this.liveUpdateValueFromInputField}" @focus="${()=>this.focused=!0}" @focusout="${()=>this.focused=!1}" list="datalist"><datalist id="datalist">${this.dataList.map((t=>R`<option value="${t}"></option>`))}</datalist></div></div>${this.helper?R`<ft-typography class="ft-text-field--helper-text" variant="caption">${this.helper}</ft-typography>`:void 0}</div>`}updated(t){super.updated(t),t.has("value")&&this.dispatchEvent(new CustomEvent("live-change",{detail:this.value}))}updateValueFromInputField(){var t;this.value=(null===(t=this.input)||void 0===t?void 0:t.value)||"",this.dispatchEvent(new CustomEvent("change",{detail:this.value}))}liveUpdateValueFromInputField(){var t;this.value=(null===(t=this.input)||void 0===t?void 0:t.value)||""}};ze.elementDefinitions={"ft-input-label":Zt,"ft-ripple":be,"ft-typography":Wt},Se([ot({type:String})],ze.prototype,"label",void 0),Se([ot({reflect:!0})],ze.prototype,"value",void 0),Se([ot({type:String})],ze.prototype,"helper",void 0),Se([ot({type:Boolean})],ze.prototype,"outlined",void 0),Se([ot({type:Boolean})],ze.prototype,"disabled",void 0),Se([st("input")],ze.prototype,"input",void 0),Se([ot({attribute:!1})],ze.prototype,"dataList",void 0),Se([nt()],ze.prototype,"focused",void 0),ze=Se([zt("ft-text-field")],ze);var Oe=function(t,e,i,r){for(var o,n=arguments.length,a=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,s=t.length-1;s>=0;s--)(o=t[s])&&(a=(n<3?o(a):n>3?o(e,i,a):o(e,i))||a);return n>3&&a&&Object.defineProperty(e,i,a),a};let Ae=class extends Ot{constructor(){super(...arguments),this.text="",this.manual=!1,this.inline=!1,this.delay=500,this.position="bottom",this.visible=!1,this.hideDebounce=new St,this.revealDebouncer=new St}getStyles(){return n`.ft-tooltip--container{display:block;position:relative}.ft-tooltip--inline{display:inline-block;max-width:100%}.ft-tooltip{position:absolute;box-sizing:border-box;overflow:hidden;width:max-content;max-width:150px;text-align:center;padding:var(--ft-tooltip-distance,4px);z-index:var(--ft-tooltip-z-index,1)}.ft-tooltip--content{padding:4px 8px;border-radius:var(--ft-border-radius-S,4px);background-color:var(--ft-tooltip-background-color,#666);color:var(--ft-tooltip-color,#fff);top:-500px;left:-500px;position:relative;word-break:break-word}`}getTemplate(){return R`<div part="container" class="ft-tooltip--container ${this.inline?"ft-tooltip--inline":""}" @mouseenter="${this.onHover}" @mouseleave="${this.onOut}" @focusin="${this.onHover}" @focusout="${this.onOut}" @touchstart="${this.onTouch}"><div part="tooltip" class="ft-tooltip ft-tooltip--${this.position}" ?hidden="${!this.visible}"><div part="tooltip-content" class="ft-tooltip--content"><ft-typography variant="caption">${this.text}</ft-typography></div></div><slot></slot></div>`}update(t){t.has("visible")&&!this.visible&&this.resetTooltipContent(),super.update(t)}contentAvailableCallback(t){t.has("visible")&&this.visible&&this.positionTooltip()}show(t){this.visible=!0,null!=t&&this.hideDebounce.run((()=>this.hide()),t)}hide(){this.visible=!1}toggle(){this.visible=!this.visible}get slottedElement(){var t;return(null!==(t=this.slotNodes)&&void 0!==t?t:[]).filter((t=>t.nodeType==Node.ELEMENT_NODE))[0]}resetTooltipContent(){if(this.tooltip&&this.tooltipContent){const t=this.tooltipContent.style;switch(t.transition="none",this.position){case"top":t.top=this.tooltip.clientHeight+"px",t.left="0";break;case"bottom":t.top=-this.tooltip.clientHeight+"px",t.left="0";break;case"left":t.top="0",t.left=this.tooltip.clientWidth+"px";break;case"right":t.top="0",t.left=-this.tooltip.clientWidth+"px"}}}positionTooltip(){this.resetTooltipContent();const t=this.slottedElement;if(this.tooltip&&t){const e=t.getBoundingClientRect(),i=(e.height-this.tooltip.clientHeight)/2,r=(e.width-this.tooltip.clientWidth)/2,o=this.tooltip.style;switch(this.position){case"top":o.top=-this.tooltip.clientHeight+"px",o.left=r+"px";break;case"bottom":o.top=e.height+"px",o.left=r+"px";break;case"left":o.top=i+"px",o.left=-this.tooltip.clientWidth+"px";break;case"right":o.top=i+"px",o.left=e.width+"px"}o.maxWidth=Math.max(e.width,150)+"px"}this.revealDebouncer.run((()=>{this.tooltipContent&&(this.tooltipContent.style.transition="top var(--ft-transition-duration, 250ms), left var(--ft-transition-duration, 250ms)",this.tooltipContent.style.top="0",this.tooltipContent.style.left="0")}),this.manual?0:this.delay)}onTouch(){this.manual||(this.show(),setTimeout((()=>window.addEventListener("touchstart",(t=>{t.composedPath().includes(this.container)||this.onOut()}),{once:!0})),100))}onHover(){this.manual||this.show()}onOut(){this.manual||(this.revealDebouncer.cancel(),this.hide())}};Ae.elementDefinitions={"ft-typography":Wt},Oe([ot()],Ae.prototype,"text",void 0),Oe([ot({type:Boolean})],Ae.prototype,"manual",void 0),Oe([ot({type:Boolean})],Ae.prototype,"inline",void 0),Oe([ot({type:Number})],Ae.prototype,"delay",void 0),Oe([ot()],Ae.prototype,"position",void 0),Oe([
+     */;let xe=class extends tt{render(){return R`<span><slot></slot></span>`}};xe.styles=[ge],xe=Yt([it("mwc-icon")],xe);var we=function(t,e,i,r){for(var o,n=arguments.length,a=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,s=t.length-1;s>=0;s--)(o=t[s])&&(a=(n<3?o(a):n>3?o(e,i,a):o(e,i))||a);return n>3&&a&&Object.defineProperty(e,i,a),a};let ke=class extends Ot{constructor(){super(...arguments),this.label="",this.value=null,this.selected=!1}getTemplate(){return R``}updated(t){super.updated(t),this.dispatchEvent(new CustomEvent("option-change",{detail:this,bubbles:!0}))}};ke.elementDefinitions={},we([ot({type:String})],ke.prototype,"label",void 0),we([ot({type:Object,converter:t=>t})],ke.prototype,"value",void 0),we([ot({type:Boolean,reflect:!0})],ke.prototype,"selected",void 0),ke=we([zt("ft-select-option")],ke);let $e=class extends Ot{constructor(){super(...arguments),this.label="",this.helper="",this.outlined=!1,this.disabled=!1,this.options=[],this.optionsDisplayed=!1,this.focusOptions=!1,this.hideOptions=()=>this.optionsDisplayed=!1}getStyles(){return[Lt,Pt,n`:focus{outline:0}.ft-select{display:flex;flex-direction:column;align-items:stretch}.ft-select--main-panel{position:relative;display:flex;height:calc(4 * var(--ft-select-vertical-spacing,4px) + var(--ft-select-label-size,11px) + var(--ft-select-selected-option-size,14px))}.ft-select--input-panel{flex-grow:1;position:relative;display:flex;align-items:center;overflow:hidden;padding-left:16px;padding-right:8px;gap:8px}.ft-select--input-panel,.ft-select--option{color:var(--ft-color-on-surface,rgba(0,0,0,.87));--ft-opacity-color-content-on-surface-hover:0.08;--ft-opacity-color-content-on-surface-dragged:0.04}.ft-select--disabled .ft-select--input-panel,.ft-select--disabled .ft-select--option{color:var(--ft-color-on-surface-disabled,rgba(0,0,0,.38))}.ft-select:not(.ft-select--disabled) .ft-select--input-panel{cursor:pointer}ft-input-label{--ft-input-label-font-size:var(--ft-select-selected-option-size, 14px);--ft-input-label-raised-font-size:var(--ft-select-label-size, 11px);--ft-input-label-vertical-spacing:var(--ft-select-vertical-spacing, 4px)}.ft-select:not(.ft-select--disabled):focus-within ft-input-label{--ft-input-label-border-color:var(--ft-color-primary, #2196F3);--ft-input-label-text-color:var(--ft-color-primary, #2196F3)}.ft-select--selected-option{display:block;flex-grow:1;flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;--ft-typography-font-size:var(--ft-select-selected-option-size, 14px);--ft-typography-line-height:var(--ft-select-selected-option-size, 14px)}mwc-icon{flex-shrink:0}slot{display:none}.ft-select--filled .ft-select--input-panel{border-radius:var(--ft-border-radius-S,4px) var(--ft-border-radius-S,4px) 0 0}.ft-select--filled:not(.ft-select--no-label) .ft-select--selected-option{align-self:stretch;padding-top:calc(var(--ft-select-label-size,11px) + 2 * var(--ft-select-vertical-spacing,4px))}.ft-select--outlined .ft-select--input-panel{border-radius:var(--ft-border-radius-S,4px)}.ft-select--options{display:none;position:absolute;top:100%;left:0;right:0;background:var(--ft-color-surface,#fff);z-index:var(--ft-select-options-z-index,1);box-shadow:var(--ft-elevation-02,0 4px 10px 0 rgba(0,0,0,.06),0 2px 5px 0 rgba(0,0,0,.14),0 0 1px 0 rgba(0,0,0,.06))}.ft-select--options-displayed .ft-select--options{display:block}.ft-select--option{position:relative;padding:4px 16px;min-height:32px;display:flex;align-items:center}.ft-select--helper-text{padding:0 12px 0 16px;color:var(--ft-select-helper-color,var(--ft-color-on-surface-medium,rgba(0,0,0,.6)))}`]}getTemplate(){var t,e,i,r,o;let n=!this.disabled&&this.optionsDisplayed&&this.hasOptions,a=this.disabled||!this.hasOptions;const s={"ft-select":!0,"ft-select--filled":!this.outlined,"ft-select--outlined":this.outlined,"ft-select--disabled":a,"ft-select--options-displayed":n,"ft-select--has-value":null!=(null===(t=this.selectedOption)||void 0===t?void 0:t.value),"ft-select--no-label":!this.label};return R`<div class="${Et(s)}" @click="${t=>t.stopPropagation()}" part="container"><div class="ft-select--main-panel" part="main-panel"><ft-input-label text="${this.label}" part="label" ?disabled="${a}" ?outlined="${this.outlined}" ?raised="${null!=(null===(e=this.selectedOption)||void 0===e?void 0:e.value)||n}"></ft-input-label><div class="ft-select--input-panel" part="selected-value" tabindex="${a?"-1":"0"}" @click="${()=>this.optionsDisplayed=!this.optionsDisplayed}" @keydown="${this.onMainPanelKeyDown}" aria-label="${this.label}" aria-haspopup="listbox" aria-expanded="${n}">${this.outlined?null:R`<ft-ripple ?disabled="${a}" activated></ft-ripple>`}<ft-typography variant="body1" class="ft-select--selected-option">${null!=(null===(i=this.selectedOption)||void 0===i?void 0:i.value)&&null!==(o=null===(r=this.selectedOption)||void 0===r?void 0:r.label)&&void 0!==o?o:""}</ft-typography><mwc-icon>${n?"expand_less":"expand_more"}</mwc-icon></div><div class="ft-select--options" part="options" @keydown="${this.onOptionsKeyDown}" innerrole="listbox">${wt(this.options,(t=>t.value),(t=>this.renderOption(t)))}</div></div>${this.helper?R`<ft-typography class="ft-select--helper-text" variant="caption">${this.helper}</ft-typography>`:void 0}</div><slot @slotchange="${this.updateOptionsFromSlot}" @option-change="${this.updateOptionsFromSlot}"></slot>`}renderOption(t){let e=this.selectedOption===t;return R`<div class="${Et({"ft-select--option":!0,"ft-select--option-selected":e,"ft-typography--body2":!0})}" part="option" tabindex="0" @keydown="${e=>this.onOptionKeyDown(e,t)}" @click="${()=>this.selectOption(t)}"><ft-ripple ?primary="${e}" ?activated="${e}"></ft-ripple>${t.label}</div>`}updated(t){var e;super.updated(t),t.has("options")&&(this.selectedOption=this.options.filter((t=>t.selected))[0]),t.has("selectedOption")&&(this.optionsDisplayed=!1,this.dispatchEvent(new CustomEvent("change",{detail:null===(e=this.selectedOption)||void 0===e?void 0:e.value})))}contentAvailableCallback(t){var e,i;t.has("focusOptions")&&this.focusOptions&&(null===(i=null!==(e=this.selectedOptionElement)&&void 0!==e?e:this.firstOption)||void 0===i||i.focus(),this.focusOptions=!1)}get hasOptions(){return this.options.length>0}updateOptionsFromSlot(t){var e;t.stopPropagation();let i=null===(e=this.optionsSlot)||void 0===e?void 0:e.assignedElements().map((t=>t));i&&i.length>0&&(this.options=i)}onMainPanelKeyDown(t){switch(t.key){case" ":t.preventDefault(),t.stopPropagation();case"Enter":this.optionsDisplayed=!this.optionsDisplayed,this.focusOptions=!0;break;case"ArrowUp":case"ArrowDown":t.preventDefault(),t.stopPropagation(),this.optionsDisplayed=!0,this.focusOptions=!0}}onOptionsKeyDown(t){var e,i,r,o,n;let a;switch(t.key){case"Escape":this.optionsDisplayed=!1,null===(e=this.mainPanel)||void 0===e||e.focus();break;case"Tab":this.optionsDisplayed=!1;break;case"ArrowUp":t.preventDefault(),t.stopPropagation(),a=null!==(r=null===(i=this.focusedOption)||void 0===i?void 0:i.previousElementSibling)&&void 0!==r?r:this.lastOption;break;case"ArrowDown":t.preventDefault(),t.stopPropagation(),a=null!==(n=null===(o=this.focusedOption)||void 0===o?void 0:o.nextElementSibling)&&void 0!==n?n:this.firstOption}null==a||a.focus()}onOptionKeyDown(t,e){var i;"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),t.stopPropagation(),this.selectOption(e),this.optionsDisplayed=!1,null===(i=this.mainPanel)||void 0===i||i.focus())}selectOption(t){this.selectedOption=t;for(let e of this.options)e.selected=e===t}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.hideOptions)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.hideOptions)}};$e.elementDefinitions={"ft-input-label":Zt,"ft-typography":Wt,"ft-ripple":be,"mwc-icon":xe},we([ot({type:String})],$e.prototype,"label",void 0),we([ot({type:String})],$e.prototype,"helper",void 0),we([ot({type:Boolean})],$e.prototype,"outlined",void 0),we([ot({type:Boolean})],$e.prototype,"disabled",void 0),we([ot({type:Array})],$e.prototype,"options",void 0),we([nt()],$e.prototype,"selectedOption",void 0),we([nt()],$e.prototype,"optionsDisplayed",void 0),we([nt()],$e.prototype,"focusOptions",void 0),we([st(".ft-select--input-panel")],$e.prototype,"mainPanel",void 0),we([st(".ft-select--option:first-child")],$e.prototype,"firstOption",void 0),we([st(".ft-select--option:focus")],$e.prototype,"focusedOption",void 0),we([st(".ft-select--option.ft-select--option-selected")],$e.prototype,"selectedOptionElement",void 0),we([st(".ft-select--option:last-child")],$e.prototype,"lastOption",void 0),we([st("slot")],$e.prototype,"optionsSlot",void 0),$e=we([zt("ft-select")],$e);var Se=function(t,e,i,r){for(var o,n=arguments.length,a=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,s=t.length-1;s>=0;s--)(o=t[s])&&(a=(n<3?o(a):n>3?o(e,i,a):o(e,i))||a);return n>3&&a&&Object.defineProperty(e,i,a),a};let ze=class extends Ot{constructor(){super(...arguments),this.label="",this.value="",this.helper="",this.outlined=!1,this.disabled=!1,this.dataList=[],this.focused=!1}getStyles(){return[Pt,n`:focus{outline:0}.ft-text-field{display:flex;flex-direction:column;align-items:stretch}ft-input-label{--ft-input-label-font-size:var(--ft-text-field-font-size, 14px);--ft-input-label-raised-font-size:var(--ft-text-field-label-size, 11px);--ft-input-label-vertical-spacing:var(--ft-text-field-vertical-spacing, 4px);--ft-input-label-horizontal-spacing:calc(var(--ft-text-field-horizontal-spacing, 16px) - 4px)}.ft-text-field--main-panel{position:relative;display:flex;height:calc(4 * var(--ft-text-field-vertical-spacing,4px) + var(--ft-text-field-label-size,11px) + var(--ft-text-field-font-size,14px))}.ft-text-field--input-panel{flex-grow:1;position:relative;display:flex;align-items:center;overflow:hidden;gap:8px}.ft-text-field--input-panel ft-ripple{--ft-opacity-color-content-on-surface-hover:0.08;--ft-opacity-color-content-on-surface-dragged:0.04}.ft-text-field--input{display:block;flex-grow:1;flex-shrink:1;min-width:0;--ft-typography-font-size:var(--ft-text-field-font-size, 14px);--ft-typography-line-height:var(--ft-text-field-font-size, 14px);color:var(--ft-color-on-surface,rgba(0,0,0,.87));padding:0 var(--ft-text-field-horizontal-spacing,16px);border:none;background:0 0}.ft-text-field--input::-webkit-calendar-picker-indicator,.ft-text-field--input::-webkit-list-button{display:none!important}.ft-text-field--disabled .ft-text-field--input{color:var(--ft-color-on-surface-disabled,rgba(0,0,0,.38))}.ft-text-field:not(.ft-text-field--disabled) .ft-text-field--input-panel{cursor:pointer}.ft-text-field:not(.ft-text-field--disabled):focus-within ft-text-field-label{--ft-text-field-label-border-color:var(--ft-color-primary, #2196F3);--ft-text-field-label-text-color:var(--ft-color-primary, #2196F3)}.ft-text-field--filled .ft-text-field--input-panel{border-radius:var(--ft-border-radius-S,4px) var(--ft-border-radius-S,4px) 0 0}.ft-text-field--filled:not(.ft-text-field--no-label) .ft-text-field--input{align-self:stretch;padding-bottom:var(--ft-text-field-vertical-spacing,4px);padding-top:calc(var(--ft-text-field-label-size,11px) + 2 * var(--ft-text-field-vertical-spacing,4px))}.ft-text-field--outlined .ft-text-field--input-panel{border-radius:var(--ft-border-radius-S,4px)}.ft-text-field--helper-text{padding:0 12px 0 var(--ft-text-field-horizontal-spacing,16px);color:var(--ft-text-field-helper-color,var(--ft-color-on-surface-medium,rgba(0,0,0,.6)))}`]}getTemplate(){const t={"ft-text-field":!0,"ft-text-field--filled":!this.outlined,"ft-text-field--outlined":this.outlined,"ft-text-field--disabled":this.disabled,"ft-text-field--has-value":!!this.value,"ft-text-field--no-label":!this.label};return R`<div class="${Et(t)}"><div class="ft-text-field--main-panel"><ft-input-label text="${this.label}" ?disabled="${this.disabled}" ?outlined="${this.outlined}" ?raised="${this.focused||""!=this.value}"></ft-input-label><div class="ft-text-field--input-panel" aria-label="${this.label}">${this.outlined?null:R`<ft-ripple ?disabled="${this.disabled}" activated></ft-ripple>`} <input type="text" class="ft-typography--caption ft-text-field--input" ?disabled="${this.disabled}" .value="${this.value}" @change="${this.updateValueFromInputField}" @keyup="${this.liveUpdateValueFromInputField}" @focus="${()=>this.focused=!0}" @focusout="${()=>this.focused=!1}" list="datalist"><datalist id="datalist">${this.dataList.map((t=>R`<option value="${t}"></option>`))}</datalist></div></div>${this.helper?R`<ft-typography class="ft-text-field--helper-text" variant="caption">${this.helper}</ft-typography>`:void 0}</div>`}updated(t){super.updated(t),t.has("value")&&this.dispatchEvent(new CustomEvent("live-change",{detail:this.value}))}updateValueFromInputField(){var t;this.value=(null===(t=this.input)||void 0===t?void 0:t.value)||"",this.dispatchEvent(new CustomEvent("change",{detail:this.value}))}liveUpdateValueFromInputField(){var t;this.value=(null===(t=this.input)||void 0===t?void 0:t.value)||""}};ze.elementDefinitions={"ft-input-label":Zt,"ft-ripple":be,"ft-typography":Wt},Se([ot({type:String})],ze.prototype,"label",void 0),Se([ot({reflect:!0})],ze.prototype,"value",void 0),Se([ot({type:String})],ze.prototype,"helper",void 0),Se([ot({type:Boolean})],ze.prototype,"outlined",void 0),Se([ot({type:Boolean})],ze.prototype,"disabled",void 0),Se([st("input")],ze.prototype,"input",void 0),Se([ot({attribute:!1})],ze.prototype,"dataList",void 0),Se([nt()],ze.prototype,"focused",void 0),ze=Se([zt("ft-text-field")],ze);var Oe=function(t,e,i,r){for(var o,n=arguments.length,a=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,s=t.length-1;s>=0;s--)(o=t[s])&&(a=(n<3?o(a):n>3?o(e,i,a):o(e,i))||a);return n>3&&a&&Object.defineProperty(e,i,a),a};let Ae=class extends Ot{constructor(){super(...arguments),this.text="",this.manual=!1,this.inline=!1,this.delay=500,this.position="bottom",this.visible=!1,this.hideDebounce=new St,this.revealDebouncer=new St}getStyles(){return n`.ft-tooltip--container{display:block;position:relative}.ft-tooltip--inline{display:inline-block;max-width:100%}.ft-tooltip{position:absolute;box-sizing:border-box;overflow:hidden;width:max-content;max-width:150px;text-align:center;padding:var(--ft-tooltip-distance,4px);z-index:var(--ft-tooltip-z-index,1)}.ft-tooltip--content{padding:4px 8px;border-radius:var(--ft-border-radius-S,4px);background-color:var(--ft-tooltip-background-color,#666);color:var(--ft-tooltip-color,#fff);top:-500px;left:-500px;position:relative;word-break:break-word}`}getTemplate(){return R`<div part="container" class="ft-tooltip--container ${this.inline?"ft-tooltip--inline":""}" @mouseenter="${this.onHover}" @mouseleave="${this.onOut}" @focusin="${this.onHover}" @focusout="${this.onOut}" @touchstart="${this.onTouch}"><div part="tooltip" class="ft-tooltip ft-tooltip--${this.position}" ?hidden="${!this.visible}"><div part="tooltip-content" class="ft-tooltip--content"><ft-typography variant="caption">${this.text}</ft-typography></div></div><slot></slot></div>`}update(t){t.has("visible")&&!this.visible&&this.resetTooltipContent(),super.update(t)}contentAvailableCallback(t){t.has("visible")&&this.visible&&this.positionTooltip()}show(t){this.visible=!0,null!=t&&this.hideDebounce.run((()=>this.hide()),t)}hide(){this.visible=!1}toggle(){this.visible=!this.visible}get slottedElement(){var t;return(null!==(t=this.slotNodes)&&void 0!==t?t:[]).filter((t=>t.nodeType==Node.ELEMENT_NODE))[0]}resetTooltipContent(){if(this.tooltip&&this.tooltipContent){const t=this.tooltipContent.style;switch(t.transition="none",this.position){case"top":t.top=this.tooltip.clientHeight+"px",t.left="0";break;case"bottom":t.top=-this.tooltip.clientHeight+"px",t.left="0";break;case"left":t.top="0",t.left=this.tooltip.clientWidth+"px";break;case"right":t.top="0",t.left=-this.tooltip.clientWidth+"px"}}}positionTooltip(){this.resetTooltipContent();const t=this.slottedElement;if(this.tooltip&&t){const e=t.getBoundingClientRect(),i=(e.height-this.tooltip.clientHeight)/2,r=(e.width-this.tooltip.clientWidth)/2,o=this.tooltip.style;switch(this.position){case"top":o.top=-this.tooltip.clientHeight+"px",o.left=r+"px";break;case"bottom":o.top=e.height+"px",o.left=r+"px";break;case"left":o.top=i+"px",o.left=-this.tooltip.clientWidth+"px";break;case"right":o.top=i+"px",o.left=e.width+"px"}o.maxWidth=Math.max(e.width,150)+"px"}this.revealDebouncer.run((()=>{this.tooltipContent&&(this.tooltipContent.style.transition="top var(--ft-transition-duration, 250ms), left var(--ft-transition-duration, 250ms)",this.tooltipContent.style.top="0",this.tooltipContent.style.left="0")}),this.manual?0:this.delay)}onTouch(){this.manual||(this.show(),setTimeout((()=>window.addEventListener("touchstart",(t=>{t.composedPath().includes(this.container)||this.onOut()}),{once:!0})),100))}onHover(){this.manual||this.show()}onOut(){this.manual||(this.revealDebouncer.cancel(),this.hide())}};Ae.elementDefinitions={"ft-typography":Wt},Oe([ot()],Ae.prototype,"text",void 0),Oe([ot({type:Boolean})],Ae.prototype,"manual",void 0),Oe([ot({type:Boolean})],Ae.prototype,"inline",void 0),Oe([ot({type:Number})],Ae.prototype,"delay",void 0),Oe([ot()],Ae.prototype,"position",void 0),Oe([
 /**
      * @license
      * Copyright 2017 Google LLC

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-filterable-table",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A dynamic table with filters",
   "keywords": [
     "Lit"
@@ -22,11 +22,11 @@
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "dependencies": {
-    "@fluid-topics/ft-button": "^0.1.0",
-    "@fluid-topics/ft-select": "^0.1.0",
-    "@fluid-topics/ft-text-field": "^0.1.0",
+    "@fluid-topics/ft-button": "^0.1.1",
+    "@fluid-topics/ft-select": "^0.1.1",
+    "@fluid-topics/ft-text-field": "^0.1.1",
     "@fluid-topics/ft-wc-utils": "^0.1.0",
     "lit": "^2.0.2"
   },
-  "gitHead": "8a87041408cbaccded5dc7c2a8f6a8aa6c92b9ee"
+  "gitHead": "4ca50a74e93ab7d8935fc06db38e924d58f55a88"
 }