@aquera/nile-elements 1.0.1-beta-1.9 → 1.0.1

package/package.json

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

package/src/internal/resizable-table-styles.ts

@@ -12,16 +12,25 @@ import { css } from 'lit';
  * Centralized styles for resizable table functionality
  */
 
-export const resizableHostStyles = css`
-  :host([resizable]) {
-    position: relative;
-    overflow: hidden;
+export const resizableTableStyles = css`
+  :host([resizable]) .base {
+    overflow: unset;
+  }
+  :host([resizable]) .nile__table__body {
+    display: table;
     table-layout: fixed;
+    border-collapse: collapse;
+    width: 100%;
+    position: relative;
   }
 `;
 
 export const resizableHeaderStyles = css`
-  :host([resizable]) {
+  :host([resizable]) .headers {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    padding: var(--nile-spacing-xs, var(--ng-spacing-xs)) var(--nile-spacing-md, var(--ng-spacing-md));
     position: relative;
   }
 
@@ -29,14 +38,21 @@ export const resizableHeaderStyles = css`
     border-right: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
     position: relative;
   }
+
+  :host([resizable]) .headers {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+  }
 `;
 
 export const resizerStyles = css`
   .resizer {
     position: absolute;
     right: 0;
-    top: -1000px;
-    bottom: -1000px;
+    top: 0px;
+    bottom: 0px;
     width: 8px;
     cursor: col-resize;
     user-select: none;
@@ -45,7 +61,6 @@ export const resizerStyles = css`
     z-index: 10;
     opacity: 0;
     transition: opacity 0.2s ease;
-    pointer-events: none;
   }
 
   :host([resizable]):hover .resizer {
@@ -56,7 +71,7 @@ export const resizerStyles = css`
   .resizer::before {
     content: '';
     position: absolute;
-    right: 3px;
+    right: 0px;
     top: 0;
     width: 2px;
     height: 100%;
@@ -84,7 +99,9 @@ export const resizerStyles = css`
     opacity: 1;
     width: 3px;
   }
+`;
 
+export const resizableCellStyles = css`
   :host([resizable]) .column {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -120,7 +137,7 @@ export const headerResizerStyles = css`
   }
 
   .resizer.resizing {
-    border-right: 4px double var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border-right: 4px double var(--nile-colors-neutral-400);
     background-color: transparent;
     opacity: 1;
   }
@@ -153,4 +170,4 @@ export const tableLayoutStyles = css`
   .nile__table__body[resizable] {
     table-layout: fixed;
   }
-`; 
+`;

package/src/nile-code-editor/nile-code-editor.ts

@@ -288,6 +288,12 @@ export class NileCodeEditor extends NileElement {
     }
   }
 
+   public closeCompletion() {
+    if (this.view) {
+      closeCompletion(this.view);
+    }
+  }
+
   handleEscapeKey(e: KeyboardEvent) {
     if (e.key === 'Escape' && this.view && completionStatus(this.view.state) !== null) {
       e.stopPropagation();      

package/src/nile-filter-chip/nile-filter-chip.css.ts

@@ -136,6 +136,16 @@ export const styles = css`
   margin-right: 12px;  
 }
 
+.badge{
+  display: inline-flex;
+    align-items: center;
+    height: 20px; 
+}
+
+nile-badge::part(content) {
+ line-height: 20px;
+}
+
 `;
 
 export default [styles];

package/src/nile-filter-chip/nile-filter-chip.ts

@@ -88,7 +88,7 @@ export class NileFilterChip extends NileElement {
         ${this.viewMoreCount
           ? html`
           <span class="badge-wrapper">
-              <nile-badge variant="primary" pilltype="pill-color">
+              <nile-badge class="badge" part="badge" variant="primary" pilltype="pill-color" exportparts="content, base">
                 +${this.viewMoreCount}
               </nile-badge>
           </span>

package/src/nile-input/nile-input.ts

@@ -179,7 +179,7 @@ export class NileInput extends NileElement implements NileFormControl {
   @property() autocomplete: string = 'off';
 
   /** Indicates that the input should receive focus on page load. */
-  @property({ type: Boolean }) autofocus: boolean;
+  @property({ type: Boolean, attribute: true, reflect: true }) autofocus: boolean;
 
   /** Used to customize the label or icon of the Enter key on virtual keyboards. */
   @property() enterkeyhint:
@@ -505,6 +505,10 @@ export class NileInput extends NileElement implements NileFormControl {
     this.formControlController.updateValidity();
   }
 
+  public inputFocus() {
+    this.input.focus();
+  }
+
   render() {
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasHelpTextSlot = this.hasSlotController.test('help-text');

package/src/nile-loader/nile-loader.ts

@@ -61,16 +61,16 @@ export class NileLoader extends LitElement {
 
   override render(){
     return html`
-    <div class="loader__container" class=${classMap({
+    <div class="loader__container" part="loader-container" class=${classMap({
       "loader__container":true,
       "loader__container--sm":this.size=='sm',
       "loader__container--md":this.size=='md',
       "loader__container--lg":this.size=='lg',
       "loader__container--xl":this.size=='xl'
       })}>
-      <div class=${classMap({"svg__container":this.variant!=='v1'})}>${this.getVariant()}</div>
+      <div part="svg-container" class=${classMap({"svg__container":this.variant!=='v1'})}>${this.getVariant()}</div>
       ${!this.label?nothing:
-        html`<div class="loader__label">${this.label}</div>`
+        html`<div part="loader-label" class="loader__label">${this.label}</div>`
       }
     </div>
     `

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

@@ -60,7 +60,7 @@ export class NileOption extends NileElement {
    */
   @property({ reflect: true }) value = '';
 
-  @property({ type: Boolean }) showCheckbox: boolean = false;
+  @property({ type: Boolean, reflect: true, attribute: true }) showCheckbox: boolean = false;
 
   /** Draws the option in a disabled state, preventing selection. */
   @property({ type: Boolean, reflect: true }) disabled = false;
@@ -69,25 +69,22 @@ export class NileOption extends NileElement {
   @property({ type: Boolean, reflect: true }) selected = false;
 
   /* used to pass group name to the option, so that grouped options can be shown */
-  @property({ type: String, reflect: true }) groupName: string = '';
+  @property({ type: String, reflect: true, attribute: true }) groupName: string = '';
 
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute('role', 'option');
     this.setAttribute('aria-selected', 'false');
 
-    // Find the closest parent 'nile-select' or 'nile-virtual-select' element
-    const parentSelect = this.closest('nile-select') || this.closest('nile-virtual-select');
     this.checkIfMultipleSelect();
   }
 
   checkIfMultipleSelect() {
     // Find the closest parent 'nile-select' element
-    const parentSelect = this.closest('nile-select') || this.closest('nile-virtual-select');
-
+    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(parentSelect.hasAttribute('multiple') && parentSelect.getAttribute('multiple') === '') {
         this.isMultipleSelect = true;
       } else if (parentSelect.getAttribute('multiple') === 'true') {
@@ -95,6 +92,8 @@ export class NileOption extends NileElement {
       } else {
         this.isMultipleSelect = false;
       }
+    } else {
+      this.isMultipleSelect = this.showCheckbox;
     }
   }
 

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

@@ -19,7 +19,7 @@ export class NileOptionGroup extends NileElement {
 	}
 
 	@property({type: String, reflect: true, attribute: true}) name: string = "";
-	@property({type: Object, attribute: true}) data: OptionGroupData | null = null;
+	@property({ type: Object, reflect: true, attribute: true}) data: OptionGroupData | null = null;
 
 	private checkForImageOrIcon() {
 		return this.data?.prefix?.icon?.name || this.data?.prefix?.image?.src || this.data?.prefix?.prefixText;

package/src/nile-radio/nile-radio.ts

@@ -51,6 +51,9 @@ export class NileRadio extends NileElement {
   /** The radio's labelborder. */
   @property({ type: Boolean, reflect: true }) islabelborder = false;
 
+  
+  @property({ type: Boolean, reflect: true }) allowUncheck = false;
+
   connectedCallback() {
     super.connectedCallback();
     this.handleBlur = this.handleBlur.bind(this);
@@ -85,7 +88,10 @@ export class NileRadio extends NileElement {
   }
 
   private handleClick() {
-    if (!this.disabled) {
+
+    if(this.allowUncheck && !this.disabled) {
+      this.checked = !this.checked;
+    } else if (!this.disabled) {
       this.checked = true;
     }
   }

package/src/nile-radio-group/nile-radio-group.ts

@@ -6,7 +6,7 @@ import { html } from 'lit';
 import { watch } from '../internal/watch';
 import NileElement from '../internal/nile-element';
 import styles from './nile-radio-group.css';
-import type { CSSResultGroup } from 'lit';
+import type { CSSResultGroup, PropertyValues } from 'lit';
 import type NileRadio from '../nile-radio/nile-radio';
 
 /**
@@ -73,6 +73,9 @@ export class NileRadioGroup extends NileElement {
   /** The radio's labelborder for whole gp. */
   @property({ type: Boolean, reflect: true }) islabelborder = false;
 
+  /** Allow the radio to be unchecked. */
+  @property({ type: Boolean, reflect: true, attribute: true }) allowUncheckGroup = false;
+
   connectedCallback() {
     super.connectedCallback();
     this.defaultValue = this.value;
@@ -99,11 +102,30 @@ export class NileRadioGroup extends NileElement {
     }
 
     this.value = target.value;
-    radios.forEach(radio => (radio.checked = radio === target));
+    if (!this.allowUncheckGroup) {
+      radios.forEach(radio => {
+        radio.checked = radio === target;
+      });
+    }
 
-    if (this.value !== oldValue) {
-      this.emit('change',{value: this.value });
+    if (!this.allowUncheckGroup && this.value !== oldValue) {
+      this.emit('change', { value: this.value});
       this.emit('input');
+    } else if (this.allowUncheckGroup) { 
+      this.emit('change', { value: this.value , checked: target.checked});
+      this.emit('input');
+    }
+  }
+
+  protected updated(changedProperties: PropertyValues): void {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('allowUncheckGroup')) {
+      if (this.allowUncheckGroup) {
+        this.getAllRadios().forEach(radio => {
+          radio.allowUncheck = true;
+        });
+      }
     }
   }
 

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

@@ -77,6 +77,10 @@ type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
  * @event nile-hide - Emitted when the select's menu closes.
  * @event nile-after-hide - Emitted after the select's menu closes and all animations are complete.
  * @event nile-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ * @event nile-search - Emitted when the user types in the search input. The event payload includes the search query for backend search functionality.
+ * @event nile-scroll - Emitted when the user scrolls within the listbox. The event payload includes scroll position information.
+ * @event nile-scroll-start - Emitted when the user starts scrolling within the listbox.
+ * @event nile-scroll-end - Emitted when the user stops scrolling and reaches the bottom of the listbox (debounced).
  *
  * @csspart form-control - The form control that wraps the label, input, and help text.
  * @csspart form-control-label - The label's wrapper.
@@ -113,6 +117,9 @@ export class NileSelect extends NileElement implements NileFormControl{
   );
   private typeToSelectString = '';
   private typeToSelectTimeout: number;
+  private scrollTimeout: number | undefined;
+  private scrolling = false;
+  private options: NileOption[] = [];
 
   @query('.select') popup: NilePopup;
   @query('.select__combobox') combobox: HTMLSlotElement;
@@ -264,6 +271,9 @@ export class NileSelect extends NileElement implements NileFormControl{
   /** To enable the group header in the select */
   @property({ type: Boolean, reflect: true, attribute: true }) enableGroupHeader = false;
 
+  /** To auto focus the search input when the select is opened */
+  @property({ type: Boolean, reflect: true, attribute: true }) autoFocusSearch = false;
+
   /** Gets the validity state object */
   get validity() {
     return this.valueInput?.validity;
@@ -297,11 +307,14 @@ export class NileSelect extends NileElement implements NileFormControl{
 
   disconnectedCallback() {
     super.disconnectedCallback();
+    // Clear any pending scroll timeout to prevent memory leaks
+    if (this.scrollTimeout) {
+      clearTimeout(this.scrollTimeout);
+      this.scrollTimeout = undefined;
+    }
     this.emit('nile-destroy');
   }
 
-  private options: NileOption[] = [];
-
   protected updated(_changedProperties: PropertyValues): void {
     if(_changedProperties.has('multiple')) {
       this.setCheckBoxInOption(this.multiple as boolean);
@@ -835,6 +848,11 @@ export class NileSelect extends NileElement implements NileFormControl{
 
   handleSearchChange(e: any) {
     this.searchValue = e.detail.value;
+    this.emit('nile-search', {
+      query: this.searchValue,
+      name: this.name
+    });
+
     if(this.enableGroupHeader) {
       this.handleGroupSearchChange();
     }
@@ -849,6 +867,42 @@ export class NileSelect extends NileElement implements NileFormControl{
     }
   }
 
+  handleScroll(e: Event): void {
+    const target = e.target as HTMLElement;
+
+    this.emit('nile-scroll', {
+      scrollTop: target.scrollTop,
+      scrollLeft: target.scrollLeft,
+      name: this.name
+    });
+
+    if (!this.scrolling) {
+      this.scrolling = true;
+      this.emit('nile-scroll-start', {
+        scrollTop: target.scrollTop,
+        scrollLeft: target.scrollLeft,
+        name: this.name
+      });
+    }
+
+    clearTimeout(this.scrollTimeout);
+    this.scrollTimeout = window.setTimeout(() => {
+      if (this.scrolling) {
+        this.scrolling = false;
+      }
+    }, 300);
+
+    const isAtBottom = Math.ceil(target.scrollTop) >= Math.floor(target.scrollHeight - target.offsetHeight);
+    if (isAtBottom) {
+      this.emit('nile-scroll-end', {
+        scrollTop: target.scrollTop,
+        scrollLeft: target.scrollLeft,
+        name: this.name,
+        isAtBottom: true
+      });
+    }
+  }
+
   filterOptions(searchValue: string) {
     const allOptions = this.getAllOptions();
     const lowerCaseSearchValue = searchValue.toLowerCase();
@@ -935,6 +989,9 @@ export class NileSelect extends NileElement implements NileFormControl{
       this.filterOptions(this.searchValue);
 
       this.emit('nile-after-show', { value: this.value, name: this.name });
+      if (this.autoFocusSearch) {
+        this.handleInputAfterInit();
+      }
     } else {
       // Hide
       this.emit('nile-hide', { value: this.value, name: this.name });
@@ -1106,6 +1163,10 @@ export class NileSelect extends NileElement implements NileFormControl{
     }, 1);
   }
 
+  handleInputAfterInit() {
+    this.shadowRoot?.querySelector('nile-input')?.inputFocus();
+  }
+
   render() {
     if(this.enableVirtualScroll) {
       return this.virtualScrollHelper.renderVirtualizedContent();
@@ -1349,6 +1410,7 @@ export class NileSelect extends NileElement implements NileFormControl{
               tabindex="-1"
               @mouseup=${this.handleOptionClick}
               @slotchange=${this.handleDefaultSlotChange}
+              @scroll=${this.handleScroll}
             >
               ${this.searchEnabled
                 ? html` <div class="select__search">
@@ -1360,6 +1422,7 @@ export class NileSelect extends NileElement implements NileFormControl{
                       @nile-input=${this.handleSearchChange}
                       @nile-focus=${this.handleSearchFocus}
                       @nile-change="${this.onInputChange}"
+                      @nile-after-init=${this.handleInputAfterInit}
                     >
                       <nile-icon name="var(--nile-icon-search, var(--ng-icon-search-lg))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" slot="suffix"> </nile-icon>
                     </nile-input>

package/src/nile-select/virtual-scroll-helper.ts

@@ -47,6 +47,27 @@ export class VirtualScrollHelper {
           .noWidthSync=${component.noWidthSync}
           .maxOptionsVisible=${component.maxOptionsVisible}
           .data=${component.data}
+          .open=${component.open}
+          exportparts="
+            select-options,
+            select-no-results,
+            virtualized,
+            form-control,
+            form-control-label,
+            form-control-input,
+            combobox,
+            prefix,
+            display-input,
+            tags,
+            tag,
+            clear-button,
+            suffix,
+            expand-icon,
+            listbox,
+            search,
+            loader,
+            footer
+          "
         >
           <slot name="prefix" slot="prefix"></slot>
         </nile-virtual-select>

package/src/nile-table-body/nile-table-body.css.ts

@@ -6,7 +6,7 @@
  */
 
 import { css } from 'lit';
-import { tableLayoutStyles } from '../internal/resizable-table-styles';
+import { resizableTableStyles } from '../internal/resizable-table-styles';
 
 /**
  * TableBody CSS
@@ -53,7 +53,7 @@ export const styles = css`
     border-bottom: 0px;
   }
 
-  ${tableLayoutStyles}
+  ${resizableTableStyles}
 `;
 
 export default [styles];

package/src/nile-table-cell-item/nile-table-cell-item.css.ts

@@ -6,7 +6,7 @@
  */
 
 import { css } from 'lit';
-import { resizableHostStyles, resizerStyles, resizableSlotStyles } from '../internal/resizable-table-styles';
+import { resizableCellStyles, resizerStyles } from '../internal/resizable-table-styles';
 
 /**
  * TableCellItem CSS
@@ -17,10 +17,11 @@ export const styles = css`
     --cell-width:auto;
     --min--height: 52px;
     --max--cell-width: auto;
+    --padding: var(--nile-spacing-xl , var(--ng-spacing-lg)) var(--nile-spacing-3xl , var(--ng-spacing-3xl));
     box-sizing: border-box;
     display: table-cell;
     vertical-align: middle;
-    padding: var(--nile-spacing-xl , var(--ng-spacing-lg)) var(--nile-spacing-3xl , var(--ng-spacing-3xl));
+    padding: var(--padding);
     max-width: var(--max--cell-width);
     min-height: var(--min--height);
     -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
@@ -42,9 +43,8 @@ export const styles = css`
     letter-spacing: 0.2px;
   }
 
-  ${resizableHostStyles}
+  ${resizableCellStyles}
   ${resizerStyles}
-  ${resizableSlotStyles}
 `;
 
 export default [styles];

package/src/nile-table-header-item/nile-table-header-item.css.ts

@@ -6,7 +6,7 @@
  */
 
 import { css } from 'lit';
-import { resizableHeaderStyles, headerResizerStyles } from '../internal/resizable-table-styles';
+import { resizableHeaderStyles, resizerStyles } from '../internal/resizable-table-styles';
 
 /**
  * TableHeaderItem CSS
@@ -79,7 +79,7 @@ export const styles = css`
   }
 
   ${resizableHeaderStyles}
-  ${headerResizerStyles}
+  ${resizerStyles}
 `;
 
 export default [styles];

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

@@ -1107,7 +1107,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   private renderSearch(): TemplateResult {
     return this.searchEnabled
       ? html`
-          <div class="select__search">
+          <div part="search" class="select__search">
             <nile-input
               size="small"
               clearable
@@ -1127,7 +1127,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   private renderLoader(): TemplateResult {
     return this.optionsLoading
       ? html`
-          <span class="select__loader">
+          <span part="loader" class="select__loader">
             <nile-icon
               class="select__loader--icon"
               name="var(--nile-icon-button-loading-blue, var(--ng-icon-button-loading-blue))"

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

@@ -24,18 +24,19 @@ export class VirtualSelectRenderer {
     optionsLoading?: boolean
   ): TemplateResult {
     return html`
-      <div class="select__options ${
+      <div part="select-options" class="select__options ${
         searchEnabled ? 'select__options__search-enabled' : ``
       }">
         ${showNoResults && !optionsLoading
           ? html`
-              <div class="select__no-results">
+              <div part="select-no-results" class="select__no-results">
                 ${noResultsMessage || 'No results found'}
               </div>
             `
           : html`
               <div
                 class="virtualized"
+                part="virtualized"
               >
                 ${VirtualSelectRenderer.shouldUseVirtualizer(data)
                   ? html`