@aquera/nile-elements 0.1.72-beta-1.0 → 0.1.72

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.72-beta-1.0",
+  "version": "0.1.72",
   "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: 4px 8px;
     position: relative;
   }
 
@@ -29,14 +38,21 @@ export const resizableHeaderStyles = css`
     border-right: 1px solid var(--nile-colors-neutral-400);
     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,73 +99,13 @@ export const resizerStyles = css`
     opacity: 1;
     width: 3px;
   }
-
-  :host([resizable]) .column {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    display: block;
-  }
 `;
 
-export const headerResizerStyles = css`
-  .resizer {
-    position: absolute;
-    right: -2px;
-    top: -1000px;
-    bottom: -1000px;
-    width: 8px;
-    cursor: ew-resize;
-    user-select: none;
-    transition: background-color 0.2s;
-    z-index: 10;
-    opacity: 0;
-    transition: opacity 0.2s ease;
-  }
-
-  :host([resizable]):hover .resizer {
-    opacity: 1;
-  }
-
-  .resizer::before {
-    content: '';
-    position: absolute;
-    height: 100%;
-    opacity: 0.8;
-  }
-
-  .resizer.resizing {
-    border-right: 4px double var(--nile-colors-neutral-400);
-    background-color: transparent;
-    opacity: 1;
-  }
-
-  :host([resizable]) .headers {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-`;
-
-export const resizableSlotStyles = css`
-  :host([resizable]) ::slotted(*) {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    display: block;
-  }
-
-  :host([resizable]) ::slotted(span),
-  :host([resizable]) ::slotted(div),
-  :host([resizable]) ::slotted(p) {
+export const resizableCellStyles = css`
+  :host([resizable]) .column {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     display: block;
   }
 `;
-
-export const tableLayoutStyles = css`
-  .nile__table__body[resizable] {
-    table-layout: fixed;
-  }
-`; 

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

@@ -287,6 +287,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-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-select/virtual-scroll-helper.ts

@@ -47,6 +47,26 @@ export class VirtualScrollHelper {
           .noWidthSync=${component.noWidthSync}
           .maxOptionsVisible=${component.maxOptionsVisible}
           .data=${component.data}
+          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
@@ -50,7 +50,7 @@ export const styles = css`
     border-bottom: 0px;
   }
 
-  ${tableLayoutStyles}
+  ${resizableTableStyles}
 `;
 
 export default [styles];

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

@@ -43,37 +43,19 @@ export class NileTableBody extends NileElement {
   @queryAssignedNodes({ flatten: true }) _childNodes!: Array<HTMLElement>;
   @property() type: 'primary' | 'secondary' = 'primary';
   @property() bodyStyle: string;
-  @property({ type: Boolean, reflect: true, attribute: true }) expandableRows = false;
-  @property({ type: Boolean, reflect: true, attribute: true }) collapsible = false;
 
   @state() private rows_data: any[] = [];
   @state() private header_rows_data: any[] = [];
   @state() private sort__index: number;
   @state() private search__index: number;
   @state() private hasResizableColumns = false;
-  private expandedRow: HTMLElement | null = null;
 
   public static get styles(): CSSResultArray {
     return [styles];
   }
 
   protected firstUpdated(_changedProperties: PropertyValues): void {
-    this.emit('nile-body-load', { value: this.type, comp: this }, true, false)
-    
-    if (this.collapsible) {
-      this.addEventListener('nile-change', (e: any) => {
-        const targetRow = e.target as HTMLElement;
-
-        if (e.detail.expanded) {
-          if (this.expandedRow && this.expandedRow !== targetRow) {
-            (this.expandedRow as any).expanded = false;
-          }
-          this.expandedRow = targetRow;
-        } else if (this.expandedRow === targetRow) {
-          this.expandedRow = null;
-        }
-      });
-    }
+    this.emit('nile-body-load', { value: this.type, comp:this },true,false)
   }
 
   /* #endregion */
@@ -96,14 +78,6 @@ export class NileTableBody extends NileElement {
     let row_data: any = [];
     this._childNodes.forEach((child: any) => {
       if (child.tagName && child?.tagName?.toLowerCase() === 'nile-table-row') {
-        if (this.expandableRows) {
-          const expandable = child.getAttribute('expandable');
-          if (expandable) {
-            (child as any).expandable = expandable === 'false' || expandable === false ? false : true;
-          } else {
-            (child as any).expandable = true;
-          }
-        }
         let nilerows = this.getChildren(child, 'nile-table-cell-item');
         if (nilerows.length > 0) {
           nilerows.forEach((element: { innerHTML: any }) => {

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: 16px 24px;
     box-sizing: border-box;
     display: table-cell;
     vertical-align: middle;
-    padding: 16px 24px;
+    padding: var(--padding);
     max-width: var(--max--cell-width);  
     min-height: var(--min--height);
   }
@@ -48,14 +49,8 @@ export const styles = css`
     letter-spacing: 0.2px;
   }
 
-  ${resizableHostStyles}
+  ${resizableCellStyles}
   ${resizerStyles}
-  ${resizableSlotStyles}
-
-  ::slotted([slot="expansionTrigger"]),
-  ::slotted([slot="expansionTrigger"]) {
-    cursor: pointer;
-  }
 `;
 
 export default [styles];

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

@@ -57,13 +57,6 @@ export class NileTableCellItem extends NileElement {
     }
   }
 
-  private handleClick(e: MouseEvent): void {
-    this.dispatchEvent(new CustomEvent('nile-expand-click', {
-      bubbles: true,
-      composed: true,
-    }));
-  }
-
   /**
    * Render method
    * @slot This is a slot test
@@ -73,11 +66,7 @@ export class NileTableCellItem extends NileElement {
       return html`
         <div class="cell__wrapper" part="nile__table-cell">
           ${this.hasSlotController.test('[default]')
-        ? html`
-          <div class="column" part="nile__table-cell">
-            <slot name="expansionTrigger" @click=${this.handleClick} part="expansionTrigger"></slot>
-            <slot></slot>
-          </div>`
+            ? html` <div class="column" part="nile__table-cell"><slot></slot></div>`
             : ''}
           <div class="resizer" @mousedown=${this.handleResizeStart}></div>
         </div>
@@ -85,9 +74,7 @@ export class NileTableCellItem extends NileElement {
     } else {
       return html`
         ${this.hasSlotController.test('[default]')
-        ? html`
-          <slot name="expansionTrigger" @click=${this.handleClick} part="expansionTrigger"></slot>
-          <slot class="column" part="nile__table-cell"> </slot>`
+          ? html` <slot class="column" part="nile__table-cell"> </slot>`
           : ''}
       `;
     }

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
@@ -70,7 +70,7 @@ export const styles = css`
   }
 
   ${resizableHeaderStyles}
-  ${headerResizerStyles}
+  ${resizerStyles}
 `;
 
 export default [styles];

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

@@ -27,58 +27,6 @@ export const styles = css`
   nile-table-row > slot::slotted(nile-table-cell-item:first-child) {
     color: red;
   }
-
-.row-container {
-  /* display: flex; */
-  /* flex-direction: column; */
-  /* overflow: hidden; */
-  /* contain: layout style; */
-}
-
-.row {
-  cursor: default;
-  position: relative;       
-  display: flex;
-  align-items: center;
-}
-
-.row.expandable {
-  border-bottom: 1px solid var(--nile-table-row-border-color);
-  /* overflow: hidden; */
-  /* contain: layout style; */
-}
-
-.expanded-content {
-  transition: max-height 0.3s ease;
-}
-
-.row.expandable {
-  margin-right: 4px;
-}
- 
-.row ::slotted(nile-table-cell-item),
-.row ::slotted(nile-table-header-item) {
-  width: 100%;
-  box-sizing: border-box; 
-}
-
-.row ::slotted([slot="expandable-icon"]), slot[name="expandable-icon"] > nile-icon {
-  cursor: pointer;
-  position: absolute;
-  left: 0.40em;            
-  top: 50%;
-  transform: translateY(-50%);
-  cursor: pointer;
-  font-size: 1em;
-  line-height: 1;
-  user-select: none;
-  z-index: 2;
-}
-
-:host([expandIconRight]) .row ::slotted([slot="expandable-icon"]), :host([expandIconRight]) slot[name="expandable-icon"] > nile-icon {
-  right: 0.40em;
-  left: auto;
-}
 `;
 
 export default [styles];

package/src/nile-table-row/nile-table-row.ts

@@ -10,7 +10,6 @@ import {
   html,
   CSSResultArray,
   TemplateResult,
-  PropertyValues,
 } from 'lit';
 import { customElement, query, property } from 'lit/decorators.js';
 import { styles } from './nile-table-row.css';
@@ -32,33 +31,6 @@ export class NileTableRow extends NileElement {
   public static get styles(): CSSResultArray {
     return [styles];
   }
-  @property({ type: Boolean, reflect: true, attribute: true }) expandable = false;
-
-  @property({ type: Boolean, reflect: true, attribute: true }) expanded = false;
-
-  @property({ type: Boolean, reflect: true, attribute: true }) expansionTriggerMode = false;
-
-  @property({ type: Boolean, reflect: true, attribute: true }) expandIconRight = false;
-
-  @query('slot[name="expanded"]')
-	private _expandedSlot!: HTMLSlotElement;
-	
-	@query('slot[name="expandable-icon"]')
-	private _iconSlot!: HTMLSlotElement;
-
-	private tableBodyHasExpandable: any;
-
-	private _fallbackIcon?: HTMLElement | null;
-
-  private toggleExpand(e: MouseEvent): void {
-    this.expanded = !this.expanded;
-    this.dispatchEvent(new CustomEvent('nile-change', {
-      detail: { expanded: this.expanded },
-      bubbles: true,
-      composed: true,
-    }));
-  }
-
 
   /* #endregion */
 
@@ -69,18 +41,6 @@ export class NileTableRow extends NileElement {
    * @slot This is a slot test
    */
 
-	protected firstUpdated(_changedProperties: PropertyValues): void {
-    super.firstUpdated(_changedProperties);
-    this.tableBodyHasExpandable = this.closest('nile-table-body');
-
-    if (this.expansionTriggerMode) {
-      this.addEventListener('nile-expand-click', (e: MouseEvent) => {
-        e.stopPropagation();
-        this.toggleExpand(e);
-      });
-    }
-	}
-
   private handleSortingAlter(event: CustomEvent) {
     const header_items: any = [
       ...this.querySelectorAll('nile-table-header-item'),
@@ -94,78 +54,15 @@ export class NileTableRow extends NileElement {
     }
   }
 
-	protected updated(changedProperties: PropertyValues): void {
-		if (!changedProperties.has('expandable') || !this._iconSlot) return;
-
-		if (!this._fallbackIcon) {
-			this._fallbackIcon = this.shadowRoot?.querySelector('nile-icon') ?? null;
-		}
-
-		const assigned = this._iconSlot.assignedElements();
-		const hasAssigned = assigned.length > 0;
-    const displayValue = this.expandable ? '' : 'none';
-
-		if (hasAssigned) {
-			for (const el of assigned) {
-				(el as HTMLElement).style.display = displayValue;
-			}
-		} else if (this._fallbackIcon) {
-			this._fallbackIcon.style.display = displayValue;
-    }
-    
-    if (this.expansionTriggerMode) {
-      if (hasAssigned) {
-        for (const el of assigned) {
-          (el as HTMLElement).style.display = 'none';
-        }
-      } else if (this._fallbackIcon) {
-        this._fallbackIcon.style.display = 'none';
-      }
-    }
-	}
-
   public render(): TemplateResult {
-		if (!this.expandable && !this.tableBodyHasExpandable?.expandableRows) {
-      return html`
-        <slot
-          part="nile-row"
-          @nile-click-sort="${this.handleSortingAlter}"
-        ></slot>
-      `;
-    }
-  
- 
     return html`
-      <div part="row-container" class="row-container">
-        <div
-          part="nile-row"
-          class="row expandable ${this.expanded ? 'expanded' : ''}"
-          @nile-click-sort="${this.handleSortingAlter}"
-        >
-          <slot
-            name="expandable-icon"
-            @click=${this.toggleExpand} 
-            part="expandable-icon"
-          >
-            <nile-icon
-              name="${this.expanded ? 'arrowup' : 'arrowdown'}"
-              role="button"
-              size="10"
-              aria-label="${this.expanded ? 'Collapse row' : 'Expand row'}">
-            </nile-icon>
-          </slot>
-          <slot></slot>
-        </div>
-  
-        ${this.expanded && this.expandable
-          ? html`
-              <div class="expanded-content" part="expanded-content">
-                <slot name="expanded"></slot>
-              </div>`
-          : null}
-      </div>
+      <slot
+        part="nile-row"
+        @nile-click-sort="${this.handleSortingAlter}"
+      ></slot>
     `;
   }
+
   /* #endregion */
 }
 

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="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`