@fluid-topics/ft-select - npm Package Compare versions

Comparing version 0.3.2 to 0.3.3

build/ft-select.js

@@ -145,3 +145,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
                 <ft-ripple ?primary=${selected} ?activated=${selected}></ft-ripple>
-                ${option.label}
+                <span>${option.label}</span>
             </div>
@@ -169,3 +169,3 @@ `;
         this.optionsMenu.style.left = this.mainPanel.getBoundingClientRect().left + "px";
-        this.optionsMenu.style.minWidth = this.mainPanel.getBoundingClientRect().width + "px";
+        this.optionsMenu.style.width = this.mainPanel.getBoundingClientRect().width + "px";
     }
@@ -406,2 +406,7 @@ contentAvailableCallback(props) {
 
+            .ft-select--option span {
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
+
             .ft-select--helper-text {
@@ -408,0 +413,0 @@ padding: 0 12px 0 16px;

build/ft-select.light.js

@@ -433,5 +433,5 @@ !function(t,e,i,o,s,l,n){
                 <ft-ripple ?primary=${e} ?activated=${e}></ft-ripple>
-                ${t.label}
+                <span>${t.label}</span>
             </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}))),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.minWidth=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){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)}}je.elementDefinitions={"ft-input-label":ne,"ft-typography":oe,"ft-ripple":xe,"ft-icon":Se},je.styles=[Qt,Vt,i.css`
+        `}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}))),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){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)}}je.elementDefinitions={"ft-input-label":ne,"ft-typography":oe,"ft-ripple":xe,"ft-icon":Se},je.styles=[Qt,Vt,i.css`
             *:focus {
@@ -570,2 +570,7 @@ outline: none;
 
+            .ft-select--option span {
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
+
             .ft-select--helper-text {
@@ -572,0 +577,0 @@ padding: 0 12px 0 16px;

package.json

 {
   "name": "@fluid-topics/ft-select",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "Value selector for a predefined list of choices",
@@ -22,10 +22,10 @@ "keywords": [
   "dependencies": {
-    "@fluid-topics/ft-icon": "0.3.2",
-    "@fluid-topics/ft-input-label": "0.3.2",
-    "@fluid-topics/ft-ripple": "0.3.2",
-    "@fluid-topics/ft-typography": "0.3.2",
-    "@fluid-topics/ft-wc-utils": "0.3.2",
+    "@fluid-topics/ft-icon": "0.3.3",
+    "@fluid-topics/ft-input-label": "0.3.3",
+    "@fluid-topics/ft-ripple": "0.3.3",
+    "@fluid-topics/ft-typography": "0.3.3",
+    "@fluid-topics/ft-wc-utils": "0.3.3",
     "lit": "2.2.8"
   },
-  "gitHead": "c1ecfa5c8c0216ac178b5d8363142c3db3d75ef9"
+  "gitHead": "b8846f1a72db01834c7217897043ef8cbf7d06fb"
 }

No alert changes

Improved metrics

Total package byte prevSize

168857

increased by0.25%

Lines of code

2034

increased by0.59%

Dependency changes

• + Added@fluid-topics/ft-icon@0.3.3(transitive)

• + Added@fluid-topics/ft-input-label@0.3.3(transitive)

• + Added@fluid-topics/ft-ripple@0.3.3(transitive)

• + Added@fluid-topics/ft-typography@0.3.3(transitive)

• + Added@fluid-topics/ft-wc-utils@0.3.3(transitive)

• - Removed@fluid-topics/ft-icon@0.3.2(transitive)

• - Removed@fluid-topics/ft-input-label@0.3.2(transitive)

• - Removed@fluid-topics/ft-ripple@0.3.2(transitive)

• - Removed@fluid-topics/ft-typography@0.3.2(transitive)

• - Removed@fluid-topics/ft-wc-utils@0.3.2(transitive)

• Updated@fluid-topics/ft-icon@0.3.3

• Updated@fluid-topics/ft-input-label@0.3.3

• Updated@fluid-topics/ft-ripple@0.3.3

• Updated@fluid-topics/ft-typography@0.3.3

• Updated@fluid-topics/ft-wc-utils@0.3.3