@fluid-topics/ft-select 1.0.0 → 1.0.3

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.
@@ -153,6 +153,7 @@ class FtSelect extends FtLitElement {
153
153
  }
154
154
  contentAvailableCallback(props) {
155
155
  var _a, _b;
156
+ super.contentAvailableCallback(props);
156
157
  if (props.has("focusOptions") && this.focusOptions) {
157
158
  (_b = ((_a = this.selectedOptionElement) !== null && _a !== void 0 ? _a : this.firstOption)) === null || _b === void 0 ? void 0 : _b.focus();
158
159
  this.focusOptions = false;
@@ -600,4 +600,4 @@ const G=Symbol.for(""),H=t=>{if((null==t?void 0:t.r)===G)return null==t?void 0:t
600
600
  <ft-ripple ?primary=${e} ?activated=${e}></ft-ripple>
601
601
  <span>${t.label}</span>
602
602
  </div>
603
- `}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,s,l;let n;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(),n=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(),n=null!==(l=null===(s=this.focusedOption)||void 0===s?void 0:s.nextElementSibling)&&void 0!==l?l:this.firstOption}null==n||n.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)}}Ue.elementDefinitions={"ft-input-label":he,"ft-typography":re,"ft-ripple":ze,"ft-icon":De},Ue.styles=[te,ee,Me],Be([o.property({type:String})],Ue.prototype,"label",void 0),Be([o.property({type:String})],Ue.prototype,"helper",void 0),Be([o.property({type:Boolean})],Ue.prototype,"outlined",void 0),Be([o.property({type:Boolean})],Ue.prototype,"disabled",void 0),Be([o.property({type:Boolean})],Ue.prototype,"error",void 0),Be([o.property({type:Boolean})],Ue.prototype,"fixedMenuPosition",void 0),Be([o.property({type:Array})],Ue.prototype,"options",void 0),Be([o.state()],Ue.prototype,"selectedOption",void 0),Be([o.state()],Ue.prototype,"optionsDisplayed",void 0),Be([o.state()],Ue.prototype,"focusOptions",void 0),Be([o.query(".ft-select")],Ue.prototype,"container",void 0),Be([o.query(".ft-select--options")],Ue.prototype,"optionsMenu",void 0),Be([o.query(".ft-select--input-panel")],Ue.prototype,"mainPanel",void 0),Be([o.query(".ft-select--option:first-child")],Ue.prototype,"firstOption",void 0),Be([o.query(".ft-select--option:focus")],Ue.prototype,"focusedOption",void 0),Be([o.query(".ft-select--option.ft-select--option-selected")],Ue.prototype,"selectedOptionElement",void 0),Be([o.query(".ft-select--option:last-child")],Ue.prototype,"lastOption",void 0),Be([o.query("slot")],Ue.prototype,"optionsSlot",void 0),e.customElement("ft-select")(Ue),e.customElement("ft-select-option")(Ze),t.FtSelect=Ue,t.FtSelectCssVariables=_e,t.FtSelectOption=Ze,t.styles=Me}({},ftGlobals.wcUtils,ftGlobals.lit,ftGlobals.litDecorators,ftGlobals.litClassMap,ftGlobals.litRepeat,ftGlobals.litUnsafeHTML);
603
+ `}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;super.contentAvailableCallback(t),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,s,l;let n;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(),n=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(),n=null!==(l=null===(s=this.focusedOption)||void 0===s?void 0:s.nextElementSibling)&&void 0!==l?l:this.firstOption}null==n||n.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)}}Ue.elementDefinitions={"ft-input-label":he,"ft-typography":re,"ft-ripple":ze,"ft-icon":De},Ue.styles=[te,ee,Me],Be([o.property({type:String})],Ue.prototype,"label",void 0),Be([o.property({type:String})],Ue.prototype,"helper",void 0),Be([o.property({type:Boolean})],Ue.prototype,"outlined",void 0),Be([o.property({type:Boolean})],Ue.prototype,"disabled",void 0),Be([o.property({type:Boolean})],Ue.prototype,"error",void 0),Be([o.property({type:Boolean})],Ue.prototype,"fixedMenuPosition",void 0),Be([o.property({type:Array})],Ue.prototype,"options",void 0),Be([o.state()],Ue.prototype,"selectedOption",void 0),Be([o.state()],Ue.prototype,"optionsDisplayed",void 0),Be([o.state()],Ue.prototype,"focusOptions",void 0),Be([o.query(".ft-select")],Ue.prototype,"container",void 0),Be([o.query(".ft-select--options")],Ue.prototype,"optionsMenu",void 0),Be([o.query(".ft-select--input-panel")],Ue.prototype,"mainPanel",void 0),Be([o.query(".ft-select--option:first-child")],Ue.prototype,"firstOption",void 0),Be([o.query(".ft-select--option:focus")],Ue.prototype,"focusedOption",void 0),Be([o.query(".ft-select--option.ft-select--option-selected")],Ue.prototype,"selectedOptionElement",void 0),Be([o.query(".ft-select--option:last-child")],Ue.prototype,"lastOption",void 0),Be([o.query("slot")],Ue.prototype,"optionsSlot",void 0),e.customElement("ft-select")(Ue),e.customElement("ft-select-option")(Ze),t.FtSelect=Ue,t.FtSelectCssVariables=_e,t.FtSelectOption=Ze,t.styles=Me}({},ftGlobals.wcUtils,ftGlobals.lit,ftGlobals.litDecorators,ftGlobals.litClassMap,ftGlobals.litRepeat,ftGlobals.litUnsafeHTML);
@@ -707,4 +707,4 @@ class mi extends Ut{constructor(t){if(super(t),this.et=X,t.type!==Mt)throw Error
707
707
  <ft-ripple ?primary=${e} ?activated=${e}></ft-ripple>
708
708
  <span>${t.label}</span>
709
709
  </div>
710
- `}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,s,n;let r;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(),r=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(),r=null!==(n=null===(s=this.focusedOption)||void 0===s?void 0:s.nextElementSibling)&&void 0!==n?n:this.firstOption}null==r||r.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 e,i;if(!l(null===(e=this.selectedOption)||void 0===e?void 0:e.value,t.value)){this.selectedOption=t;for(let e of this.options)e.selected=e===t;this.dispatchEvent(new CustomEvent("change",{detail:null===(i=this.selectedOption)||void 0===i?void 0:i.value}))}this.optionsDisplayed=!1}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.hideOptions)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.hideOptions)}}Bi.elementDefinitions={"ft-input-label":ai,"ft-typography":si,"ft-ripple":gi,"ft-icon":zi},Bi.styles=[Ye,Ge,Fi],Ai([o({type:String})],Bi.prototype,"label",void 0),Ai([o({type:String})],Bi.prototype,"helper",void 0),Ai([o({type:Boolean})],Bi.prototype,"outlined",void 0),Ai([o({type:Boolean})],Bi.prototype,"disabled",void 0),Ai([o({type:Boolean})],Bi.prototype,"error",void 0),Ai([o({type:Boolean})],Bi.prototype,"fixedMenuPosition",void 0),Ai([o({type:Array})],Bi.prototype,"options",void 0),Ai([s()],Bi.prototype,"selectedOption",void 0),Ai([s()],Bi.prototype,"optionsDisplayed",void 0),Ai([s()],Bi.prototype,"focusOptions",void 0),Ai([n(".ft-select")],Bi.prototype,"container",void 0),Ai([n(".ft-select--options")],Bi.prototype,"optionsMenu",void 0),Ai([n(".ft-select--input-panel")],Bi.prototype,"mainPanel",void 0),Ai([n(".ft-select--option:first-child")],Bi.prototype,"firstOption",void 0),Ai([n(".ft-select--option:focus")],Bi.prototype,"focusedOption",void 0),Ai([n(".ft-select--option.ft-select--option-selected")],Bi.prototype,"selectedOptionElement",void 0),Ai([n(".ft-select--option:last-child")],Bi.prototype,"lastOption",void 0),Ai([n("slot")],Bi.prototype,"optionsSlot",void 0),a("ft-select")(Bi),a("ft-select-option")(Di),t.FtSelect=Bi,t.FtSelectCssVariables=ji,t.FtSelectOption=Di,t.styles=Fi}({});
710
+ `}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;super.contentAvailableCallback(t),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,s,n;let r;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(),r=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(),r=null!==(n=null===(s=this.focusedOption)||void 0===s?void 0:s.nextElementSibling)&&void 0!==n?n:this.firstOption}null==r||r.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 e,i;if(!l(null===(e=this.selectedOption)||void 0===e?void 0:e.value,t.value)){this.selectedOption=t;for(let e of this.options)e.selected=e===t;this.dispatchEvent(new CustomEvent("change",{detail:null===(i=this.selectedOption)||void 0===i?void 0:i.value}))}this.optionsDisplayed=!1}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.hideOptions)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.hideOptions)}}Bi.elementDefinitions={"ft-input-label":ai,"ft-typography":si,"ft-ripple":gi,"ft-icon":zi},Bi.styles=[Ye,Ge,Fi],Ai([o({type:String})],Bi.prototype,"label",void 0),Ai([o({type:String})],Bi.prototype,"helper",void 0),Ai([o({type:Boolean})],Bi.prototype,"outlined",void 0),Ai([o({type:Boolean})],Bi.prototype,"disabled",void 0),Ai([o({type:Boolean})],Bi.prototype,"error",void 0),Ai([o({type:Boolean})],Bi.prototype,"fixedMenuPosition",void 0),Ai([o({type:Array})],Bi.prototype,"options",void 0),Ai([s()],Bi.prototype,"selectedOption",void 0),Ai([s()],Bi.prototype,"optionsDisplayed",void 0),Ai([s()],Bi.prototype,"focusOptions",void 0),Ai([n(".ft-select")],Bi.prototype,"container",void 0),Ai([n(".ft-select--options")],Bi.prototype,"optionsMenu",void 0),Ai([n(".ft-select--input-panel")],Bi.prototype,"mainPanel",void 0),Ai([n(".ft-select--option:first-child")],Bi.prototype,"firstOption",void 0),Ai([n(".ft-select--option:focus")],Bi.prototype,"focusedOption",void 0),Ai([n(".ft-select--option.ft-select--option-selected")],Bi.prototype,"selectedOptionElement",void 0),Ai([n(".ft-select--option:last-child")],Bi.prototype,"lastOption",void 0),Ai([n("slot")],Bi.prototype,"optionsSlot",void 0),a("ft-select")(Bi),a("ft-select-option")(Di),t.FtSelect=Bi,t.FtSelectCssVariables=ji,t.FtSelectOption=Di,t.styles=Fi}({});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluid-topics/ft-select",
3
- "version": "1.0.0",
3
+ "version": "1.0.3",
4
4
  "description": "Value selector for a predefined list of choices",
5
5
  "keywords": [
6
6
  "Lit"
@@ -19,12 +19,12 @@
19
19
  "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
20
20
  },
21
21
  "dependencies": {
22
- "@fluid-topics/ft-icon": "1.0.0",
23
- "@fluid-topics/ft-input-label": "1.0.0",
24
- "@fluid-topics/ft-ripple": "1.0.0",
25
- "@fluid-topics/ft-typography": "1.0.0",
26
- "@fluid-topics/ft-wc-utils": "1.0.0",
22
+ "@fluid-topics/ft-icon": "1.0.3",
23
+ "@fluid-topics/ft-input-label": "1.0.3",
24
+ "@fluid-topics/ft-ripple": "1.0.3",
25
+ "@fluid-topics/ft-typography": "1.0.3",
26
+ "@fluid-topics/ft-wc-utils": "1.0.3",
27
27
  "lit": "2.7.2"
28
28
  },
29
- "gitHead": "90895771e0ea740f1a0d972b9fd3796051757255"
29
+ "gitHead": "8c7b95fa60f5ac8dd10301abb40dd62ff4f9b335"
30
30
  }