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

package/package.json

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

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

@@ -29,11 +29,15 @@ export const styles = css`
     line-height: 1.8;
     letter-spacing: normal;
     color: hsl(240 5.3% 26.1%);
-    padding: 0.5rem 1rem 0.5rem 0.5rem;
+    padding: 6px 0;
     transition: 150ms fill;
     cursor: pointer;
   }
 
+  .option--single-select {
+    padding: 9px 12px;
+  }
+
   .option--hover:not(.option--current):not(.option--disabled) {
     background-color: rgba(0, 94, 166, 0.1);
     color: hsl(0, 0%, 0%);
@@ -86,6 +90,12 @@ export const styles = css`
     margin-inline-start: 0.5rem;
   }
 
+  .option--checkbox{
+    pointer-events: none;
+    margin-left: 12px;
+    margin-right: 12px;
+  }
+
   @media (forced-colors: active) {
     :host(:hover:not([aria-disabled='true'])) .option {
       outline: dashed 1px SelectedItem;

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

@@ -151,7 +151,7 @@ export class NileOption extends NileElement {
             part="base"
             class=${classMap({
               option: true,
-              // 'option--current': this.current,
+              'option--single-select': !this.isMultipleSelect,
               'option--current': this.selected && !this.isMultipleSelect,
               'option--disabled': this.disabled,
               'option--selected': this.selected && !this.isMultipleSelect,
@@ -161,7 +161,7 @@ export class NileOption extends NileElement {
             @mouseleave=${this.handleMouseLeave}
           >
 
-          ${this.isMultipleSelect ? html`<nile-checkbox style="pointer-events: none;" .checked=${this.selected}></nile-checkbox>` : ''}
+          ${this.isMultipleSelect ? html`<nile-checkbox class="option--checkbox" .checked=${this.selected}></nile-checkbox>` : ''}
 
             <slot part="prefix" name="prefix" class="option__prefix"></slot>
             <slot

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

@@ -179,11 +179,14 @@ export const styles = css`
   }
 
   .select__tags-count {
-    position: absolute;
-    right: 0;
-    border: 1px solid rgb(169, 218, 218);
-    border-radius: 0.25rem;
-    margin-right: 30px;
+    color: #005ea6;
+    font-family: Colfax-regular;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 14px;
+    letter-spacing: 0.2px;
+    margin: 6px;
   }
 
   .select__tags-count-clearable {
@@ -398,10 +401,20 @@ export const styles = css`
     display: flex;
     flex-direction: row;
     align-items: flex-start;
-    padding: 8px 8px 16px;
+    padding: 8px 12px 16px;
     gap: 12px;
     justify-content: space-between;
   }
+
+  .tag__prefix[slot='prefix'] {
+    height: 14px;
+    display: inline-block;
+    overflow: hidden;
+  }
+
+  .tag__prefix[slot='prefix'] img {
+    max-height: 100%;
+  }
 `;
 
 export default [styles];

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

@@ -36,6 +36,7 @@ import type { CSSResultGroup } from 'lit';
 import type { NileFormControl } from '../internal/nile-element';
 import type NileOption from '../nile-option/nile-option';
 import type NilePopup from '../nile-popup/nile-popup';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
 
@@ -139,7 +140,7 @@ export class NileSelect extends NileElement implements NileFormControl {
   @property() size: 'small' | 'medium' | 'large' = 'medium';
 
   /** Placeholder text to show as a hint when the select is empty. */
-  @property() placeholder = '';
+  @property() placeholder = 'Select...';
 
   /** Placeholder text to show as a hint when the select is empty. */
   @state() searchValue = '';
@@ -583,6 +584,25 @@ export class NileSelect extends NileElement implements NileFormControl {
     return [...this.querySelectorAll<NileOption>('nile-option')];
   }
 
+  private getOptionPrefix(option: NileOption): string {
+    const prefixSlot = option.shadowRoot?.querySelector('slot[name="prefix"]') as HTMLSlotElement;
+    if (!prefixSlot) return '';
+
+    const assignedNodes = prefixSlot.assignedNodes();
+    const htmlStrings: string[] = [];
+
+    assignedNodes.forEach(node => {
+      if (node instanceof HTMLElement) {
+        htmlStrings.push(node.outerHTML);
+      } else if (node.nodeType === Node.TEXT_NODE) {
+        // Text node
+        htmlStrings.push(node.textContent || '');
+      }
+    });
+
+    return htmlStrings.join('');
+  }
+
   // Gets the first <nile-option> element
   private getFirstOption() {
     return this.querySelector<NileOption>('nile-option');
@@ -939,30 +959,33 @@ export class NileSelect extends NileElement implements NileFormControl {
                             <nile-tag
                               part="tag"
                               exportparts="
-                                base:tag__base,
-                                content:tag__content,
-                                remove-button:tag__remove-button,
-                                remove-button__base:tag__remove-button__base
-                              "
+                                  base:tag__base,
+                                  content:tag__content,
+                                  remove-button:tag__remove-button,
+                                  remove-button__base:tag__remove-button__base
+                                "
                               ?pill=${this.pill}
                               size=${this.size}
                               removable
                               @nile-remove=${(event: NileRemoveEvent) =>
                                 this.handleTagRemove(event, option)}
                             >
+                              ${this.getOptionPrefix(option)
+                                ? html`<span class="tag__prefix" slot="prefix"
+                                    >${unsafeHTML(
+                                      this.getOptionPrefix(option)
+                                    )}</span
+                                  >`
+                                : ''}
                               ${option.getTextLabel()}
                             </nile-tag>
                           `;
                         } else if (index === this.maxOptionsVisible) {
                           return html`
-                            <nile-tag
-                              class="select__tags-count ${hasClearIcon
-                                ? `select__tags-count-clearable`
-                                : ``} "
-                              size=${this.size}
-                            >
-                              +${this.selectedOptions.length - index}
-                            </nile-tag>
+
+
+                            <span class="select__tags-count">+${this.selectedOptions.length - index} More </span>
+
                           `;
                         } else {
                           return null;
@@ -1066,7 +1089,7 @@ export class NileSelect extends NileElement implements NileFormControl {
                         ?disabled="${this.selectedOptions.length === 0}"
                         ?checked="${this.showSelected}"
                       >
-                        Show Selected</nile-checkbox
+                      &nbsp; Show Selected</nile-checkbox
                       >
                     </span>
                     <span class="select__clear" @click="${this.unSlectAll}"