@fluid-topics/ft-select 2.2.18 → 2.2.20
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.
|
@@ -4,13 +4,13 @@ import { PropertyValues } from "lit";
|
|
|
4
4
|
export declare class FtSelectOption extends FtLitElement implements FtSelectOptionProperties {
|
|
5
5
|
static elementDefinitions: ElementDefinitionsMap;
|
|
6
6
|
static shadowRootOptions: {
|
|
7
|
-
delegatesFocus: boolean;
|
|
8
7
|
clonable?: boolean;
|
|
9
8
|
customElementRegistry?: CustomElementRegistry | null;
|
|
10
9
|
mode: ShadowRootMode;
|
|
11
10
|
serializable?: boolean;
|
|
12
11
|
slotAssignment?: SlotAssignmentMode;
|
|
13
12
|
customElements?: CustomElementRegistry;
|
|
13
|
+
delegatesFocus: boolean;
|
|
14
14
|
};
|
|
15
15
|
label: string;
|
|
16
16
|
value: any;
|
package/build/ft-select.js
CHANGED
|
@@ -53,10 +53,11 @@ export class FtSelect extends FtLitElement {
|
|
|
53
53
|
return last(this.optionsList);
|
|
54
54
|
}
|
|
55
55
|
render() {
|
|
56
|
-
var _a, _b, _c
|
|
56
|
+
var _a, _b, _c;
|
|
57
|
+
var _d, _e;
|
|
57
58
|
const optionsDisplayed = this.hasOptionsMenuOpen;
|
|
58
59
|
const disabled = this.disabled || !this.hasOptions;
|
|
59
|
-
const hasOptionSelected = ((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value) != null || ((
|
|
60
|
+
const hasOptionSelected = ((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value) != null || ((_d = (_b = this.selectedOption) === null || _b === void 0 ? void 0 : _b.label) !== null && _d !== void 0 ? _d : "").length > 0;
|
|
60
61
|
const classes = {
|
|
61
62
|
"ft-select": true,
|
|
62
63
|
"ft-select--filled": !this.outlined,
|
|
@@ -98,7 +99,7 @@ export class FtSelect extends FtLitElement {
|
|
|
98
99
|
<ft-typography variant="${FtTypographyVariants.body1}"
|
|
99
100
|
aria-hidden="${hasOptionSelected ? "false" : "true"}"
|
|
100
101
|
class="ft-select--selected-option">
|
|
101
|
-
${(_e = (
|
|
102
|
+
${(_e = (_c = this.selectedOption) === null || _c === void 0 ? void 0 : _c.label) !== null && _e !== void 0 ? _e : this.label}
|
|
102
103
|
</ft-typography>
|
|
103
104
|
</slot>
|
|
104
105
|
<ft-icon aria-hidden="true" .value=${optionsDisplayed ? FtIcons.THIN_ARROW_UP : FtIcons.THIN_ARROW}></ft-icon>
|
|
@@ -143,10 +144,11 @@ export class FtSelect extends FtLitElement {
|
|
|
143
144
|
}
|
|
144
145
|
}
|
|
145
146
|
contentAvailableCallback(props) {
|
|
146
|
-
var _a
|
|
147
|
+
var _a;
|
|
148
|
+
var _b;
|
|
147
149
|
super.contentAvailableCallback(props);
|
|
148
150
|
if (props.has("focusOptions") && this.focusOptions) {
|
|
149
|
-
(
|
|
151
|
+
(_a = ((_b = this.selectedOptionElement) !== null && _b !== void 0 ? _b : this.firstOption)) === null || _a === void 0 ? void 0 : _a.focus();
|
|
150
152
|
this.focusOptions = false;
|
|
151
153
|
}
|
|
152
154
|
if (props.has("optionsDisplayed")) {
|
package/build/ft-select.light.js
CHANGED
|
@@ -567,7 +567,7 @@
|
|
|
567
567
|
</slot>
|
|
568
568
|
${this.isSlotEmpty?ct.html`<span>${this.label}</span>`:ct.html``}
|
|
569
569
|
</div>
|
|
570
|
-
`}onSlotChange(){this.isSlotEmpty=(0,Dt.isSlotEmptyOrWithoutContent)(this.slotElement)}onClick(){this.dispatchEvent(new Event("select-option",{bubbles:!0,composed:!0}))}update(e){super.update(e),this.dispatchEvent(new CustomEvent("option-change",{detail:this,bubbles:!0}))}};D.elementDefinitions={"ft-ripple":b};D.shadowRootOptions={...ct.LitElement.shadowRootOptions,delegatesFocus:!0};D.styles=[li,Rt];Et([(0,X.property)({type:String})],D.prototype,"label",void 0);Et([(0,X.property)({type:Object,converter:t=>t})],D.prototype,"value",void 0);Et([(0,X.property)({type:Boolean,reflect:!0})],D.prototype,"selected",void 0);Et([(0,X.query)("slot")],D.prototype,"slotElement",void 0);Et([(0,X.state)()],D.prototype,"isSlotEmpty",void 0);var T=function(t,e,i,o){var r=arguments.length,n=r<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,i):o,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(t,e,i,o);else for(var f=t.length-1;f>=0;f--)(a=t[f])&&(n=(r<3?a(n):r>3?a(e,i,n):a(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};var v=class t extends w.FtLitElement{constructor(){super(...arguments),this.label="",this.ariaLabel=null,this.helper="",this.outlined=!1,this.disabled=!1,this.error=!1,this.fixedMenuPosition=!1,this.options=[],this.optionsDisplayed=!1,this.focusOptions=!1,this.currentSearch="",this.lastSearchInputDate=new Date("01/01/1970"),this.isSlotEmpty=!0,this.hideOptions=e=>this.optionsDisplayed=this.optionsDisplayed&&e.composedPath().includes(this.container)}get firstOption(){return this.optionsList[0]}get optionsList(){let e=[...this.querySelectorAll("ft-select-option")];return e.length>0?e:[...this.shadowRoot.querySelectorAll("ft-select-option")]}get focusedOption(){return this.optionsList.find(e=>e.matches(":focus-within"))}get selectedOptionElement(){return this.optionsList.find(e=>e.selected)}get lastOption(){return(0,w.last)(this.optionsList)}render(){var e,i,o,r,n;let a=this.hasOptionsMenuOpen,f=this.disabled||!this.hasOptions,d=((e=this.selectedOption)===null||e===void 0?void 0:e.value)!=null||((
|
|
570
|
+
`}onSlotChange(){this.isSlotEmpty=(0,Dt.isSlotEmptyOrWithoutContent)(this.slotElement)}onClick(){this.dispatchEvent(new Event("select-option",{bubbles:!0,composed:!0}))}update(e){super.update(e),this.dispatchEvent(new CustomEvent("option-change",{detail:this,bubbles:!0}))}};D.elementDefinitions={"ft-ripple":b};D.shadowRootOptions={...ct.LitElement.shadowRootOptions,delegatesFocus:!0};D.styles=[li,Rt];Et([(0,X.property)({type:String})],D.prototype,"label",void 0);Et([(0,X.property)({type:Object,converter:t=>t})],D.prototype,"value",void 0);Et([(0,X.property)({type:Boolean,reflect:!0})],D.prototype,"selected",void 0);Et([(0,X.query)("slot")],D.prototype,"slotElement",void 0);Et([(0,X.state)()],D.prototype,"isSlotEmpty",void 0);var T=function(t,e,i,o){var r=arguments.length,n=r<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,i):o,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(t,e,i,o);else for(var f=t.length-1;f>=0;f--)(a=t[f])&&(n=(r<3?a(n):r>3?a(e,i,n):a(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};var v=class t extends w.FtLitElement{constructor(){super(...arguments),this.label="",this.ariaLabel=null,this.helper="",this.outlined=!1,this.disabled=!1,this.error=!1,this.fixedMenuPosition=!1,this.options=[],this.optionsDisplayed=!1,this.focusOptions=!1,this.currentSearch="",this.lastSearchInputDate=new Date("01/01/1970"),this.isSlotEmpty=!0,this.hideOptions=e=>this.optionsDisplayed=this.optionsDisplayed&&e.composedPath().includes(this.container)}get firstOption(){return this.optionsList[0]}get optionsList(){let e=[...this.querySelectorAll("ft-select-option")];return e.length>0?e:[...this.shadowRoot.querySelectorAll("ft-select-option")]}get focusedOption(){return this.optionsList.find(e=>e.matches(":focus-within"))}get selectedOptionElement(){return this.optionsList.find(e=>e.selected)}get lastOption(){return(0,w.last)(this.optionsList)}render(){var e,i,o,r,n;let a=this.hasOptionsMenuOpen,f=this.disabled||!this.hasOptions,d=((e=this.selectedOption)===null||e===void 0?void 0:e.value)!=null||((r=(i=this.selectedOption)===null||i===void 0?void 0:i.label)!==null&&r!==void 0?r:"").length>0,u={"ft-select":!0,"ft-select--filled":!this.outlined,"ft-select--outlined":this.outlined,"ft-select--disabled":f,"ft-select--options-displayed":a,"ft-select--has-option-selected":d,"ft-select--no-label":!this.label,"ft-select--fixed":this.fixedMenuPosition,"ft-select--in-error":this.error};return xt.html`
|
|
571
571
|
<div class="${(0,fi.classMap)(u)}" part="container">
|
|
572
572
|
<div class="ft-select--main-panel" part="main-panel">
|
|
573
573
|
<ft-input-label text="${this.label}"
|
|
@@ -594,7 +594,7 @@
|
|
|
594
594
|
<ft-typography variant="${I.body1}"
|
|
595
595
|
aria-hidden="${d?"false":"true"}"
|
|
596
596
|
class="ft-select--selected-option">
|
|
597
|
-
${(n=(
|
|
597
|
+
${(n=(o=this.selectedOption)===null||o===void 0?void 0:o.label)!==null&&n!==void 0?n:this.label}
|
|
598
598
|
</ft-typography>
|
|
599
599
|
</slot>
|
|
600
600
|
<ft-icon aria-hidden="true" .value=${a?lt.THIN_ARROW_UP:lt.THIN_ARROW}></ft-icon>
|
|
@@ -623,7 +623,7 @@
|
|
|
623
623
|
label="${e.label}"
|
|
624
624
|
.value=${e.value}
|
|
625
625
|
></ft-select-option>
|
|
626
|
-
`}willUpdate(e){super.willUpdate(e),e.has("options")&&(this.selectedOption=this.options.filter(i=>i.selected)[0]),e.has("selectedOption")&&(this.optionsDisplayed=!1)}contentAvailableCallback(e){var i,o;if(super.contentAvailableCallback(e),e.has("focusOptions")&&this.focusOptions&&((
|
|
626
|
+
`}willUpdate(e){super.willUpdate(e),e.has("options")&&(this.selectedOption=this.options.filter(i=>i.selected)[0]),e.has("selectedOption")&&(this.optionsDisplayed=!1)}contentAvailableCallback(e){var i,o;if(super.contentAvailableCallback(e),e.has("focusOptions")&&this.focusOptions&&((i=(o=this.selectedOptionElement)!==null&&o!==void 0?o:this.firstOption)===null||i===void 0||i.focus(),this.focusOptions=!1),e.has("optionsDisplayed")&&(this.optionsDisplayed?document.addEventListener("click",this.hideOptions):document.removeEventListener("click",this.hideOptions)),e.has("optionsDisplayed")&&this.hasOptionsMenuOpen){this.optionsMenu.style.minWidth=this.mainPanel.getBoundingClientRect().width+"px";let r=["bottom","top"];(0,w.computeOffsetAutoPosition)(this.mainPanel,this.optionsMenu,"bottom",r,"fixed",x.optionsHeight,0).then(({x:n,y:a})=>{this.optionsMenu.style.left=`${n}px`,this.optionsMenu.style.top=`${a}px`})}}get hasOptionsMenuOpen(){return!this.disabled&&this.optionsDisplayed&&this.hasOptions}get hasOptions(){return this.options.length>0}updateOptionsFromSlot(e){var i;e.stopPropagation(),this.isSlotEmpty=(0,w.isSlotEmptyOrWithoutContent)(this.optionsSlot);let o=(i=this.optionsSlot)===null||i===void 0?void 0:i.assignedElements().map(r=>r);o&&o.length>0&&(this.options=o)}onMainPanelKeyDown(e){switch(e.key===" "&&(e.preventDefault(),e.stopPropagation()),e.key){case" ":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 i,o;let r,n=this.focusedOption?this.optionsList.indexOf(this.focusedOption):0;switch(e.key){case" ":case"Enter":e.preventDefault(),e.stopPropagation(),this.onSelectOption(e),this.optionsDisplayed=!1,(i=this.mainPanel)===null||i===void 0||i.focus();break;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(),r=this.optionsList[(n-1+this.optionsList.length)%this.optionsList.length];break;case"ArrowDown":e.preventDefault(),e.stopPropagation(),r=this.optionsList[(n+1)%this.optionsList.length];break;default:if(e.key.length!=1)break;this.isKeyAlphanumeric(e.key)&&(r=this.handleAlphanumericPress(e.key));break}r?.focus()}isKeyAlphanumeric(e){let i=e.charCodeAt(0);return i>47&&i<58||i>64&&i<91||i>96&&i<123}handleAlphanumericPress(e){let i=new Date;i.getTime()-this.lastSearchInputDate.getTime()>t.searchTimeoutMilliseconds&&(this.currentSearch=""),this.currentSearch+=e.toLowerCase();let o=this.options.find(r=>{var n;return((n=r.label)===null||n===void 0?void 0:n.toLowerCase().substring(0,this.currentSearch.length))===this.currentSearch});return this.lastSearchInputDate=i,o&&this.optionsList.find(r=>r.value===o.value)}getOptionId(e){if(!e)return;let i=this.options.findIndex(o=>(0,w.deepEqual)(o.value,e.value));if(i!==-1)return`option-${i}`}onSelectOption(e){e.stopPropagation(),this.setValue(e.target.value)}setValue(e,i=!0){let o=this.options.find(r=>(0,w.deepEqual)(r.value,e));o&&this.selectOption(o,i)}selectOption(e,i=!0){var o,r;if(!(0,w.deepEqual)((o=this.selectedOption)===null||o===void 0?void 0:o.value,e?.value)){this.selectedOption=e;for(let n of this.options)n.selected=n===e;i&&this.dispatchEvent(new CustomEvent("change",{detail:(r=this.selectedOption)===null||r===void 0?void 0:r.value}))}this.optionsDisplayed=!1}};v.elementDefinitions={"ft-input-label":M,"ft-typography":k,"ft-ripple":b,"ft-icon":N,"ft-select-option":D};v.searchTimeoutMilliseconds=2e3;v.styles=[ht,ai];T([(0,E.property)({type:String})],v.prototype,"label",void 0);T([(0,E.property)({type:String})],v.prototype,"ariaLabel",void 0);T([(0,E.property)({type:String})],v.prototype,"helper",void 0);T([(0,E.property)({type:Boolean})],v.prototype,"outlined",void 0);T([(0,E.property)({type:Boolean})],v.prototype,"disabled",void 0);T([(0,E.property)({type:Boolean})],v.prototype,"error",void 0);T([(0,E.property)({type:Boolean})],v.prototype,"fixedMenuPosition",void 0);T([(0,E.property)({type:Array})],v.prototype,"options",void 0);T([(0,E.state)()],v.prototype,"selectedOption",void 0);T([(0,E.state)()],v.prototype,"optionsDisplayed",void 0);T([(0,E.state)()],v.prototype,"focusOptions",void 0);T([(0,E.state)()],v.prototype,"currentSearch",void 0);T([(0,E.state)()],v.prototype,"lastSearchInputDate",void 0);T([(0,E.query)(".ft-select")],v.prototype,"container",void 0);T([(0,E.query)(".ft-select--options")],v.prototype,"optionsMenu",void 0);T([(0,E.query)(".ft-select--input-panel")],v.prototype,"mainPanel",void 0);T([(0,E.query)("slot:not([name])")],v.prototype,"optionsSlot",void 0);var hi={"ft-select":v,"ft-select-option":D};(0,ci.customElements)(hi);})();
|
|
627
627
|
/*! Bundled license information:
|
|
628
628
|
|
|
629
629
|
lit-html/directives/when.js:
|