@fluid-topics/ft-filterable-table 0.3.31 → 0.3.32
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -580,7 +580,7 @@ const H=Symbol.for(""),W=t=>{if((null==t?void 0:t.r)===H)return null==t?void 0:t
|
|
|
580
580
|
<ft-ripple ?primary=${e} ?activated=${e}></ft-ripple>
|
|
581
581
|
<span>${t.label}</span>
|
|
582
582
|
</div>
|
|
583
|
-
`}updated(t){
|
|
583
|
+
`}updated(t){super.updated(t),t.has("options")&&(this.selectedOption=this.options.filter((t=>t.selected))[0]),t.has("selectedOption")&&(this.optionsDisplayed=!1),t.has("optionsDisplayed")&&this.fixedMenuPosition&&this.hasOptionsMenuOpen&&this.positionOptionsMenu()}positionOptionsMenu(){this.optionsMenu.style.top=this.mainPanel.getBoundingClientRect().top+this.mainPanel.getBoundingClientRect().height+"px",this.optionsMenu.style.left=this.mainPanel.getBoundingClientRect().left+"px",this.optionsMenu.style.width=this.mainPanel.getBoundingClientRect().width+"px"}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 hasOptionsMenuOpen(){return!this.disabled&&this.optionsDisplayed&&this.hasOptions}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,o,n,l;let s;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(),s=null!==(o=null===(i=this.focusedOption)||void 0===i?void 0:i.previousElementSibling)&&void 0!==o?o:this.lastOption;break;case"ArrowDown":t.preventDefault(),t.stopPropagation(),s=null!==(l=null===(n=this.focusedOption)||void 0===n?void 0:n.nextElementSibling)&&void 0!==l?l:this.firstOption}null==s||s.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){var i,o;if(!e.deepEqual(null===(i=this.selectedOption)||void 0===i?void 0:i.value,t.value)){this.selectedOption=t;for(let e of this.options)e.selected=e===t;this.dispatchEvent(new CustomEvent("change",{detail:null===(o=this.selectedOption)||void 0===o?void 0:o.value}))}this.optionsDisplayed=!1}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.hideOptions)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.hideOptions)}}Ce.elementDefinitions={"ft-input-label":ne,"ft-typography":te,"ft-ripple":ve,"ft-icon":we},Ce.styles=[Gt,Vt,Se],ze([o.property({type:String})],Ce.prototype,"label",void 0),ze([o.property({type:String})],Ce.prototype,"helper",void 0),ze([o.property({type:Boolean})],Ce.prototype,"outlined",void 0),ze([o.property({type:Boolean})],Ce.prototype,"disabled",void 0),ze([o.property({type:Boolean})],Ce.prototype,"error",void 0),ze([o.property({type:Boolean})],Ce.prototype,"fixedMenuPosition",void 0),ze([o.property({type:Array})],Ce.prototype,"options",void 0),ze([o.state()],Ce.prototype,"selectedOption",void 0),ze([o.state()],Ce.prototype,"optionsDisplayed",void 0),ze([o.state()],Ce.prototype,"focusOptions",void 0),ze([o.query(".ft-select")],Ce.prototype,"container",void 0),ze([o.query(".ft-select--options")],Ce.prototype,"optionsMenu",void 0),ze([o.query(".ft-select--input-panel")],Ce.prototype,"mainPanel",void 0),ze([o.query(".ft-select--option:first-child")],Ce.prototype,"firstOption",void 0),ze([o.query(".ft-select--option:focus")],Ce.prototype,"focusedOption",void 0),ze([o.query(".ft-select--option.ft-select--option-selected")],Ce.prototype,"selectedOptionElement",void 0),ze([o.query(".ft-select--option:last-child")],Ce.prototype,"lastOption",void 0),ze([o.query("slot")],Ce.prototype,"optionsSlot",void 0),e.customElement("ft-select")(Ce),e.customElement("ft-select-option")(Oe);const Ee={fontSize:e.FtCssVariableFactory.create("--ft-text-field-font-size","SIZE","14px"),labelSize:e.FtCssVariableFactory.create("--ft-text-field-label-size","SIZE","11px"),verticalSpacing:e.FtCssVariableFactory.create("--ft-text-field-vertical-spacing","SIZE","4px"),horizontalSpacing:e.FtCssVariableFactory.create("--ft-text-field-horizontal-spacing","SIZE","16px"),helperColor:e.FtCssVariableFactory.extend("--ft-text-field-helper-color",e.designSystemVariables.colorOnSurfaceMedium),colorPrimary:e.FtCssVariableFactory.external(e.designSystemVariables.colorPrimary,"Design system"),colorOnSurface:e.FtCssVariableFactory.external(e.designSystemVariables.colorOnSurface,"Design system"),colorOnSurfaceDisabled:e.FtCssVariableFactory.external(e.designSystemVariables.colorOnSurfaceDisabled,"Design system"),borderRadiusS:e.FtCssVariableFactory.external(e.designSystemVariables.borderRadiusS,"Design system"),colorError:e.FtCssVariableFactory.external(e.designSystemVariables.colorError,"Design system"),prefixColor:e.FtCssVariableFactory.extend("--ft-text-field-prefix-color",e.designSystemVariables.colorOnSurfaceMedium),iconColor:e.FtCssVariableFactory.extend("--ft-text-field-icon-color",e.designSystemVariables.colorOnSurfaceMedium)},Be=i.css`
|
|
584
584
|
*:focus {
|
|
585
585
|
outline: none;
|
|
586
586
|
}
|