@aquera/nile-elements 0.0.44 → 0.0.45

package/package.json

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

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

@@ -1,9 +1,9 @@
 /**
-* Copyright Aquera Inc 2023
-*
-* This source code is licensed under the BSD-3-Clause license found in the
-* LICENSE file in the root directory of this source tree.
-*/
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 
 import {css} from 'lit-element';
 
@@ -451,6 +451,10 @@ export const styles = css`
   .select__prefix--from-options {
     margin-inline-end: 12px;
   }
+  
+  .select__hide-default{
+    display: none;
+  }
 `;
 
 export default [styles];

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

@@ -531,7 +531,7 @@ export class NileSelect extends NileElement implements NileFormControl {
     const target = event.target as HTMLElement;
     const option = target.closest('nile-option');
 
-    if(this.blockValueChange && option){
+    if (this.blockValueChange && option) {
       this.emit('nile-block-change', { value: option?.value, name: this.name });
       this.hide();
       return;
@@ -951,8 +951,7 @@ export class NileSelect extends NileElement implements NileFormControl {
   }
 
   calculateTotalWidthOfTags() {
-
-    if(this.maxOptionsVisible !== Infinity){
+    if (this.maxOptionsVisible !== Infinity) {
       this.oldMaxOptionsVisible = this.maxOptionsVisible;
     }
 
@@ -999,6 +998,7 @@ export class NileSelect extends NileElement implements NileFormControl {
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasHelpTextSlot = this.hasSlotController.test('help-text');
     const hasLabelSuffixSlot = this.hasSlotController.test('label-suffix');
+    const hasCustomSelect = this.hasSlotController.test('custom-select');
     const hasLabel = this.label ? true : !!hasLabelSlot;
     const hasClearIcon =
       this.clearable && !this.disabled && this.value.length > 0;
@@ -1006,7 +1006,9 @@ 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]) : '';
+    const prefixContent = this.selectedOptions[0]
+      ? this.getOptionPrefix(this.selectedOptions[0])
+      : '';
 
     return html`
       <div
@@ -1062,14 +1064,25 @@ export class NileSelect extends NileElement implements NileFormControl {
             auto-size="vertical"
             auto-size-padding="10"
           >
+            ${hasCustomSelect
+              ? html`<slot
+                  slot="anchor"
+                  name="custom-select"
+                  class="custom-select"
+                  @keydown=${this.handleComboboxKeyDown}
+                  @mousedown=${this.handleComboboxMouseDown}
+                ></slot>`
+              : html``}
             <div
               part="combobox"
-              class="select__combobox"
+              class=${classMap({
+                select__combobox: true,
+                'select__hide-default': hasCustomSelect,
+              })}
               slot="anchor"
               @keydown=${this.handleComboboxKeyDown}
               @mousedown=${this.handleComboboxMouseDown}
             >
-
               ${prefixContent && !this.multiple
                 ? html`<div class="select__prefix--from-options">
                     ${unsafeHTML(prefixContent)}