@aquera/nile-elements 0.0.27 → 0.0.28

package/package.json

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

package/src/nile-error-message/nile-error-message.css.ts

@@ -24,7 +24,7 @@ export const styles = css`
   }
 
   .nile-error-message__error {
-    color: var(--nile-colors-red-500);
+    color: var(--nile-colors-red-700);
     word-break: break-word;
   }
 

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

@@ -365,7 +365,7 @@ export const styles = css`
     max-height: var(--auto-size-available-height);
   }
 
-  .select__options {
+  .select__options__search-enabled {
     padding-top: 10px;
   }
 
@@ -449,6 +449,10 @@ export const styles = css`
   .select__invisible{
     opacity: 0;
   }
+
+  .select__prefix--from-options {
+    margin-inline-end: 12px;
+  }
 `;
 
 export default [styles];

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

@@ -994,6 +994,7 @@ export class NileSelect extends NileElement implements NileFormControl {
     const searchValue = this.searchValue || '';
     const hasHelpText = this.helpText ? true : false;
     const hasErrorMessage = this.errorMessage ? true : false;
+    const prefixContent = this.selectedOptions[0] ? this.getOptionPrefix(this.selectedOptions[0]) : '';
 
     return html`
       <div
@@ -1056,14 +1057,19 @@ export class NileSelect extends NileElement implements NileFormControl {
               @keydown=${this.handleComboboxKeyDown}
               @mousedown=${this.handleComboboxMouseDown}
             >
-              <slot
-                part="prefix"
-                name="prefix"
-                class=${classMap({
-                  select__prefix: true,
-                  multiple: this.multiple,
-                })}
-              ></slot>
+
+              ${prefixContent && !this.multiple
+                ? html`<div class="select__prefix--from-options">
+                    ${unsafeHTML(prefixContent)}
+                  </div>`
+                : html`<slot
+                    part="prefix"
+                    name="prefix"
+                    class=${classMap({
+                      select__prefix: true,
+                      multiple: this.multiple,
+                    })}
+                  ></slot>`}
 
               <input
                 part="display-input"
@@ -1097,7 +1103,10 @@ export class NileSelect extends NileElement implements NileFormControl {
                           this.maxOptionsVisible <= 0
                         ) {
                           const classes = {
-                            'select__invisible': index + 1 > this.oldMaxOptionsVisible && this.maxOptionsVisible === Infinity                          };
+                            select__invisible:
+                              index + 1 > this.oldMaxOptionsVisible &&
+                              this.maxOptionsVisible === Infinity,
+                          };
                           return html`
                             <nile-tag
                               class=${classMap(classes)}
@@ -1226,7 +1235,11 @@ export class NileSelect extends NileElement implements NileFormControl {
                     </nile-input>
                   </div>`
                 : ``}
-              <div class="select__options">
+              <div
+                class="select__options ${this.searchEnabled
+                  ? 'select__options__search-enabled'
+                  : ``}"
+              >
                 ${this.showNoResults
                   ? html`
                       <div class="select__no-results">