@aquera/nile-elements 0.0.3-3 → 0.0.3-4

package/package.json

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

package/src/nile-option/nile-option.ts

@@ -14,6 +14,7 @@ import { html } from 'lit';
 import { watch } from '../internal/watch';
 import type { CSSResultGroup } from 'lit';
 import NileElement from '../internal/nile-element';
+import '../nile-checkbox';
 
 /**
  * Nile icon component.
@@ -51,6 +52,7 @@ export class NileOption extends NileElement {
   @state() selected = false; // the option is selected and has aria-selected="true"
   @state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging
   @state() hidden = false; // the option is hidden
+  @state() isMultipleSelect = false;
 
   /**
    * The option's value. When selected, the containing form control will receive this value. The value must be unique
@@ -66,6 +68,20 @@ export class NileOption extends NileElement {
     super.connectedCallback();
     this.setAttribute('role', 'option');
     this.setAttribute('aria-selected', 'false');
+
+    // Find the closest parent 'nile-select' element
+    const parentSelect = this.closest('nile-select');
+
+    // Check if the parent has the 'multiple' attribute
+    if (parentSelect && parentSelect.hasAttribute('multiple')) {
+      let multipleValue = parentSelect.getAttribute('multiple');
+      if (multipleValue !== 'false') {
+        if(multipleValue === ''){
+          multipleValue = 'true';
+        }
+        this.isMultipleSelect = Boolean(multipleValue);
+      }
+    }
   }
 
   private handleDefaultSlotChange() {
@@ -135,21 +151,18 @@ export class NileOption extends NileElement {
             part="base"
             class=${classMap({
               option: true,
-              'option--current': this.current,
+              // 'option--current': this.current,
+              'option--current': this.selected && !this.isMultipleSelect,
               'option--disabled': this.disabled,
-              'option--selected': this.selected,
+              'option--selected': this.selected && !this.isMultipleSelect,
               'option--hover': this.hasHover,
             })}
             @mouseenter=${this.handleMouseEnter}
             @mouseleave=${this.handleMouseLeave}
           >
-            <nile-icon
-              part="checked-icon"
-              class="option__check"
-              name="tick"
-              color=${this.current ? '#005EA6' : ''}
-              aria-hidden="true"
-            ></nile-icon>
+
+          ${this.isMultipleSelect ? html`<nile-checkbox style="pointer-events: none;" .checked=${this.selected}></nile-checkbox>` : ''}
+
             <slot part="prefix" name="prefix" class="option__prefix"></slot>
             <slot
               part="label"

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

@@ -205,6 +205,11 @@ export const styles = css`
     border: solid 1px #cccccc;
   }
 
+  .select--standard .select__combobox:hover {
+    border: 1px solid #000;
+    background: #fff;
+  }
+
   .select--standard.select--disabled .select__combobox {
     background-color: #f4f4f4;
     border-color: #cccccc;
@@ -218,7 +223,18 @@ export const styles = css`
   .select--standard:not(.select--disabled).select--focused .select__combobox {
     background-color: #f4f4f4;
     border-color: #0059ff;
-    box-shadow: 0 0 0 3px rgba(0, 89, 255, 0.4);
+  }
+
+  .select--warning .select__combobox {
+    border-color: var(--nile-colors-yellow-500);
+  }
+
+  .select--error .select__combobox {
+    border-color: #e5434d;
+  }
+
+  .select--success {
+    border-color: #43e5c0;
   }
 
   /* Filled selects */
@@ -328,7 +344,6 @@ export const styles = css`
     position: relative;
     font-size: 1rem;
     font-weight: 400;
-    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
     background: #ffffff;
     border: solid 1px #cccccc;
     border-radius: 0.25rem;

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

@@ -154,6 +154,15 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   @property({ attribute: 'error-message' }) errorMessage = '';
 
+  /** Sets the input to a warning state, changing its visual appearance. */
+  @property({ type: Boolean }) warning = false;
+
+  /** Sets the input to an error state, changing its visual appearance. */
+  @property({ type: Boolean }) error = false;
+
+  /** Sets the input to a success state, changing its visual appearance. */
+  @property({ type: Boolean }) success = false;
+
   /**
    * The maximum number of selected options to show when `multiple` is true. After the maximum, "+n" will be shown to
    * indicate the number of additional items that are selected. Set to 0 to remove the limit.
@@ -854,6 +863,9 @@ export class NileSelect extends NileElement implements NileFormControl {
           <nile-popup
             class=${classMap({
               select: true,
+              'select--warning': this.warning,
+              'select--error': this.error,
+              'select--success': this.success,
               'select--standard': true,
               'select--filled': this.filled,
               'select--pill': this.pill,
@@ -883,11 +895,14 @@ 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>
+              <slot
+                part="prefix"
+                name="prefix"
+                class=${classMap({
+                  select__prefix: true,
+                  multiple: this.multiple,
+                })}
+              ></slot>
 
               <input
                 part="display-input"
@@ -1012,7 +1027,7 @@ export class NileSelect extends NileElement implements NileFormControl {
               @mouseup=${this.handleOptionClick}
               @slotchange=${this.handleDefaultSlotChange}
             >
-            ${this.searchEnabled
+              ${this.searchEnabled
                 ? html` <div class="select__search">
                     <nile-input
                       size="small"
@@ -1027,13 +1042,16 @@ export class NileSelect extends NileElement implements NileFormControl {
                     </nile-input>
                   </div>`
                 : ``}
-                <div class="select__options">
+              <div class="select__options">
                 ${this.showNoResults
-                ? html` <div class="select__no-results">${this.noResultsMessage} </div>
-                `: ''}
+                  ? html`
+                      <div class="select__no-results">
+                        ${this.noResultsMessage}
+                      </div>
+                    `
+                  : ''}
                 <slot></slot>
-                  </div>
-
+              </div>
 
               ${this.multiple
                 ? html` <div
@@ -1060,24 +1078,16 @@ export class NileSelect extends NileElement implements NileFormControl {
           </nile-popup>
         </div>
 
-        ${
-          hasHelpText
-            ? html`
-                <nile-form-help-text>${this.helpText}</nile-form-help-text>
-              `
-            : ``
-        }
-
-        ${
-          hasErrorMessage
-            ? html`
-                <nile-form-error-message
-                  >${this.errorMessage}</nile-form-error-message
-                >
-              `
-            : ``
-        }
-
+        ${hasHelpText
+          ? html` <nile-form-help-text>${this.helpText}</nile-form-help-text> `
+          : ``}
+        ${hasErrorMessage
+          ? html`
+              <nile-form-error-message
+                >${this.errorMessage}</nile-form-error-message
+              >
+            `
+          : ``}
       </div>
     `;
   }