@aquera/nile-elements 0.0.24 → 0.0.25

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-select/nile-select.css.ts

@@ -445,6 +445,10 @@ export const styles = css`
       transform: rotate(360deg);
     }
   }
+
+  .select__invisible{
+    opacity: 0;
+  }
 `;
 
 export default [styles];

package/src/nile-select/nile-select.ts

@@ -218,6 +218,8 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   @property({ type: Boolean }) showSelected = false;
 
+  @state() oldMaxOptionsVisible: number = 1;
+
   @property({ type: Boolean }) showNoResults: boolean = false;
 
   @property({ type: String }) noResultsMessage: string = 'No results found';
@@ -935,8 +937,12 @@ export class NileSelect extends NileElement implements NileFormControl {
   }
 
   calculateTotalWidthOfTags() {
-    this.maxOptionsVisible = Infinity;
 
+    if(this.maxOptionsVisible !== Infinity){
+      this.oldMaxOptionsVisible = this.maxOptionsVisible;
+    }
+
+    this.maxOptionsVisible = Infinity;
     setTimeout(() => {
       let widths: number[] = [];
       if (this.shadowRoot) {
@@ -1088,8 +1094,11 @@ export class NileSelect extends NileElement implements NileFormControl {
                           index < this.maxOptionsVisible ||
                           this.maxOptionsVisible <= 0
                         ) {
+                          const classes = {
+                            'select__invisible': index + 1 > this.oldMaxOptionsVisible && this.maxOptionsVisible === Infinity                          };
                           return html`
                             <nile-tag
+                              class=${classMap(classes)}
                               part="tag"
                               exportparts="
                                   base:tag__base,

package/src/nile-tooltip/nile-tooltip.css.ts

@@ -58,6 +58,7 @@ export const styles = css`
     color: hsl(0, 0%, 100%);
     padding: 0.25rem 0.5rem;
     pointer-events: none;
+    word-break: break-all;
   }
 `;