@fluid-topics/ft-select 1.2.34 → 1.2.35
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.
- package/build/ft-select.js +2 -2
- package/build/ft-select.light.js +1 -1
- package/build/ft-select.min.js +164 -164
- package/package.json +7 -7
package/build/ft-select.js
CHANGED
|
@@ -8,7 +8,7 @@ import { html } from "lit";
|
|
|
8
8
|
import { property, query, state } from "lit/decorators.js";
|
|
9
9
|
import { classMap } from "lit/directives/class-map.js";
|
|
10
10
|
import { repeat } from "lit/directives/repeat.js";
|
|
11
|
-
import {
|
|
11
|
+
import { computeOffsetAutoPosition, deepEqual, FtLitElement } from "@fluid-topics/ft-wc-utils";
|
|
12
12
|
import { FtTypography, FtTypographyBody2, FtTypographyCaption } from "@fluid-topics/ft-typography";
|
|
13
13
|
import { FtInputLabel } from "@fluid-topics/ft-input-label";
|
|
14
14
|
import { FtRipple } from "@fluid-topics/ft-ripple";
|
|
@@ -153,7 +153,7 @@ class FtSelect extends FtLitElement {
|
|
|
153
153
|
if (props.has("optionsDisplayed") && this.hasOptionsMenuOpen) {
|
|
154
154
|
this.optionsMenu.style.width = this.mainPanel.getBoundingClientRect().width + "px";
|
|
155
155
|
const fallbackPlacements = ["bottom", "top"];
|
|
156
|
-
|
|
156
|
+
computeOffsetAutoPosition(this.mainPanel, this.optionsMenu, "bottom", fallbackPlacements, "fixed", FtSelectCssVariables.optionsHeight.name, 0)
|
|
157
157
|
.then(({ x, y }) => {
|
|
158
158
|
this.optionsMenu.style.left = `${x}px`;
|
|
159
159
|
this.optionsMenu.style.top = `${y}px`;
|
package/build/ft-select.light.js
CHANGED
|
@@ -615,7 +615,7 @@ Also for action icons.`,t.colorGray200),contentGlobalSubtle:e.extend("--ft-conte
|
|
|
615
615
|
<ft-ripple ?primary=${n} ?activated=${n}></ft-ripple>
|
|
616
616
|
<span>${r.label}</span>
|
|
617
617
|
</div>
|
|
618
|
-
`}update(r){super.update(r),r.has("options")&&(this.selectedOption=this.options.filter(n=>n.selected)[0]),r.has("selectedOption")&&(this.optionsDisplayed=!1)}contentAvailableCallback(r){var n,i;if(super.contentAvailableCallback(r),r.has("focusOptions")&&this.focusOptions&&((i=(n=this.selectedOptionElement)!==null&&n!==void 0?n:this.firstOption)===null||i===void 0||i.focus(),this.focusOptions=!1),r.has("optionsDisplayed")&&this.hasOptionsMenuOpen){this.optionsMenu.style.width=this.mainPanel.getBoundingClientRect().width+"px";let l=["bottom","top"];(0,ee.
|
|
618
|
+
`}update(r){super.update(r),r.has("options")&&(this.selectedOption=this.options.filter(n=>n.selected)[0]),r.has("selectedOption")&&(this.optionsDisplayed=!1)}contentAvailableCallback(r){var n,i;if(super.contentAvailableCallback(r),r.has("focusOptions")&&this.focusOptions&&((i=(n=this.selectedOptionElement)!==null&&n!==void 0?n:this.firstOption)===null||i===void 0||i.focus(),this.focusOptions=!1),r.has("optionsDisplayed")&&this.hasOptionsMenuOpen){this.optionsMenu.style.width=this.mainPanel.getBoundingClientRect().width+"px";let l=["bottom","top"];(0,ee.computeOffsetAutoPosition)(this.mainPanel,this.optionsMenu,"bottom",l,"fixed",m.optionsHeight.name,0).then(({x:p,y:c})=>{this.optionsMenu.style.left=`${p}px`,this.optionsMenu.style.top=`${c}px`})}}get hasOptionsMenuOpen(){return!this.disabled&&this.optionsDisplayed&&this.hasOptions}get hasOptions(){return this.options.length>0}updateOptionsFromSlot(r){var n;r.stopPropagation();let i=(n=this.optionsSlot)===null||n===void 0?void 0:n.assignedElements().map(l=>l);i&&i.length>0&&(this.options=i)}onMainPanelKeyDown(r){switch(r.key){case" ":r.preventDefault(),r.stopPropagation();case"Enter":this.optionsDisplayed=!this.optionsDisplayed,this.focusOptions=!0;break;case"ArrowUp":case"ArrowDown":r.preventDefault(),r.stopPropagation(),this.optionsDisplayed=!0,this.focusOptions=!0;break}}onOptionsKeyDown(r){var n,i,l,p,c;let f;switch(r.key){case"Escape":this.optionsDisplayed=!1,(n=this.mainPanel)===null||n===void 0||n.focus();break;case"Tab":this.optionsDisplayed=!1;break;case"ArrowUp":r.preventDefault(),r.stopPropagation(),f=(l=(i=this.focusedOption)===null||i===void 0?void 0:i.previousElementSibling)!==null&&l!==void 0?l:this.lastOption;break;case"ArrowDown":r.preventDefault(),r.stopPropagation(),f=(c=(p=this.focusedOption)===null||p===void 0?void 0:p.nextElementSibling)!==null&&c!==void 0?c:this.firstOption;break}f?.focus()}onOptionKeyDown(r,n){var i;(r.key==="Enter"||r.key===" ")&&(r.preventDefault(),r.stopPropagation(),this.selectOption(n),this.optionsDisplayed=!1,(i=this.mainPanel)===null||i===void 0||i.focus())}selectOption(r){var n,i;if(!(0,ee.deepEqual)((n=this.selectedOption)===null||n===void 0?void 0:n.value,r.value)){this.selectedOption=r;for(let l of this.options)l.selected=l===r;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)}};C.elementDefinitions={"ft-input-label":B,"ft-typography":Z,"ft-ripple":E,"ft-icon":z};C.styles=[We,ye,Io];R([(0,v.property)({type:String})],C.prototype,"label",void 0);R([(0,v.property)({type:String})],C.prototype,"ariaLabel",void 0);R([(0,v.property)({type:String})],C.prototype,"helper",void 0);R([(0,v.property)({type:Boolean})],C.prototype,"outlined",void 0);R([(0,v.property)({type:Boolean})],C.prototype,"disabled",void 0);R([(0,v.property)({type:Boolean})],C.prototype,"error",void 0);R([(0,v.property)({type:Boolean})],C.prototype,"fixedMenuPosition",void 0);R([(0,v.property)({type:Array})],C.prototype,"options",void 0);R([(0,v.state)()],C.prototype,"selectedOption",void 0);R([(0,v.state)()],C.prototype,"optionsDisplayed",void 0);R([(0,v.state)()],C.prototype,"focusOptions",void 0);R([(0,v.query)(".ft-select")],C.prototype,"container",void 0);R([(0,v.query)(".ft-select--options")],C.prototype,"optionsMenu",void 0);R([(0,v.query)(".ft-select--input-panel")],C.prototype,"mainPanel",void 0);R([(0,v.query)(".ft-select--option:first-child")],C.prototype,"firstOption",void 0);R([(0,v.query)(".ft-select--option:focus")],C.prototype,"focusedOption",void 0);R([(0,v.query)(".ft-select--option.ft-select--option-selected")],C.prototype,"selectedOptionElement",void 0);R([(0,v.query)(".ft-select--option:last-child")],C.prototype,"lastOption",void 0);R([(0,v.query)("slot")],C.prototype,"optionsSlot",void 0);(0,je.customElement)("ft-select")(C);(0,je.customElement)("ft-select-option")(j);})();
|
|
619
619
|
/*! Bundled license information:
|
|
620
620
|
|
|
621
621
|
lit-html/lit-html.js:
|