@aquera/nile-elements 0.0.24 → 0.0.26

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.26",
   "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';
@@ -611,27 +613,29 @@ export class NileSelect extends NileElement implements NileFormControl {
     // Get all options as an array
     const options = [...this.querySelectorAll<NileOption>('nile-option')];
 
-    // Sort the options based on the order of values in this.oldValue
-    options.sort((a, b) => {
-      let indexA = this.oldValue.indexOf(a.value);
-      let indexB = this.oldValue.indexOf(b.value);
+    // Sort the options based on the order of values selected
+    if (this.multiple && this.oldValue?.length > 0) {
+      options.sort((a, b) => {
+        let indexA = this.oldValue.indexOf(a.value);
+        let indexB = this.oldValue.indexOf(b.value);
 
-      // Handle cases where a __value is not found in this.oldValue
-      if (indexA === -1) {
-        indexA = Infinity; // Place at the end if not found
-      }
-      if (indexB === -1) {
-        indexB = Infinity; // Place at the end if not found
-      }
+        // Handle cases where a __value is not found
+        if (indexA === -1) {
+          indexA = Infinity; // Place at the end if not found
+        }
+        if (indexB === -1) {
+          indexB = Infinity; // Place at the end if not found
+        }
 
-      if (indexA < indexB) {
-        return -1;
-      }
-      if (indexA > indexB) {
-        return 1;
-      }
-      return 0;
-    });
+        if (indexA < indexB) {
+          return -1;
+        }
+        if (indexA > indexB) {
+          return 1;
+        }
+        return 0;
+      });
+    }
 
     return options;
   }
@@ -935,8 +939,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 +1096,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;
   }
 `;