@aquera/nile-elements 0.1.69 → 0.1.70-beta-1.0

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.69",
+  "version": "0.1.70-beta-1.0",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -87,8 +87,7 @@
     "./nile-tour": "./dist/src/nile-tour/index.js",
     "./nile-table": "./dist/src/nile-table/index.js",
     "./nile-pagination": "./dist/src/nile-pagination/index.js",
-    "./nile-slider": "./dist/src/nile-slider/index.js",
-    "./nile-option-group": "./dist/src/nile-option-group/index.js"
+    "./nile-slider": "./dist/src/nile-slider/index.js"
   },
   "scripts": {
     "analyze": "cem analyze --litelement",

package/src/index.ts

@@ -81,5 +81,4 @@ export { NileFilterChip } from './nile-filter-chip';
 export {NilePagination } from './nile-pagination';
 export { NileSlider } from './nile-slider';
 export { NileFileUpload } from './nile-file-upload';
-export { NileFilePreview } from './nile-file-preview';
-export { NileOptionGroup } from './nile-option-group';
+export { NileFilePreview } from './nile-file-preview'

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

@@ -103,23 +103,6 @@ export function synchronizeColumnWidth(sourceElement: HTMLElement, newWidth: num
   });
 }
 
-/**
- * Resets all column widths in a table to their default values
- * @param tableBody The table body element to reset
- */
-export function resetAllColumnWidths(tableBody: HTMLElement): void {
-  const headerItems = tableBody.querySelectorAll('nile-table-header-item');
-  const cellItems = tableBody.querySelectorAll('nile-table-cell-item');
-  
-  headerItems.forEach(header => {
-    header.style.removeProperty('width');
-  });
-  
-  cellItems.forEach(cell => {
-    cell.style.removeProperty('width');
-  });
-}
-
 /**
  * Checks if an element has the resizable attribute
  * @param element The element to check
@@ -154,21 +137,15 @@ export function createResizeHandler(element: HTMLElement, minWidth: number = 50)
  * @returns True if any columns have resizable attribute
  */
 export function hasResizableColumns(tableBody: HTMLElement): boolean {
-  const directChildren = Array.from(tableBody.children);
-  
-  const hasResizableHeaders = directChildren.some(child => {
-    if (child.tagName.toLowerCase() === 'nile-table-header-item') {
-      return child.hasAttribute('resizable');
-    }
-    return false;
-  });
+  const headerItems = tableBody.querySelectorAll('nile-table-header-item');
+  const cellItems = tableBody.querySelectorAll('nile-table-cell-item');
   
-  const hasResizableCells = directChildren.some(child => {
-    if (child.tagName.toLowerCase() === 'nile-table-cell-item') {
-      return child.hasAttribute('resizable');
-    }
-    return false;
-  });
+  const hasResizableHeaders = Array.from(headerItems).some(item => 
+    isResizable(item)
+  );
+  const hasResizableCells = Array.from(cellItems).some(item => 
+    isResizable(item)
+  );
   
   return hasResizableHeaders || hasResizableCells;
 } 

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

@@ -35,12 +35,13 @@ import {
 import { sql } from '@codemirror/lang-sql';
 import { json } from '@codemirror/lang-json';
 import { html as htmlLang } from '@codemirror/lang-html';
-import { autocompletion,acceptCompletion, closeCompletion,CompletionContext,CompletionResult, completionStatus } from '@codemirror/autocomplete';
+import { autocompletion,closeCompletion,CompletionContext,CompletionResult, completionStatus } from '@codemirror/autocomplete';
 import NileElement from '../internal/nile-element';
 import { basicSetup } from './extensionSetup';
 import { classMap } from 'lit/directives/class-map.js';
-import { Theme as DefaultTheme, customisedThemeCss, fontFamily } from './theme';
+import { Theme as DefaultTheme, customisedThemeCss } from './theme';
 import { keymap } from '@codemirror/view';
+import { acceptCompletion } from '@codemirror/autocomplete';
 
 // Choose the appropriate mode for your use case
 
@@ -103,8 +104,6 @@ export class NileCodeEditor extends NileElement {
 
   @property({ type: Boolean, reflect: true, attribute: true }) tabCompletion: boolean = true;
 
-  @property({ type: Boolean, reflect: true, attribute: true }) defaultFont: boolean = false;
-
   public view: EditorView;
   public viewState:EditorState;
   private timeOut: any = null;
@@ -117,7 +116,6 @@ export class NileCodeEditor extends NileElement {
   private placeholderComp = new Compartment();
   private defaultSyntaxHighlightingComp = new Compartment();
   private themeComp = new Compartment();
-  private autoCompletionComp = new Compartment();
 
   private isSpacePressed:boolean = false;
   /**
@@ -181,15 +179,6 @@ export class NileCodeEditor extends NileElement {
         ]
       })
     }
-    if (changedProperties.has('aboveCursor')) {
-      this.view.dispatch({
-        effects: [
-          this.autoCompletionComp.reconfigure(
-            autocompletion({ aboveCursor: this.aboveCursor })
-          )
-        ]
-      });
-    }    
     if (changedProperties.has('placeholder')) {
       this.view.dispatch({ 
         effects: [
@@ -321,9 +310,7 @@ export class NileCodeEditor extends NileElement {
         customAutoCompletions,
         placeholderExtension,
         defaultSyntaxHighlightingExtension,
-        this.autoCompletionComp.of(
-          autocompletion({ aboveCursor: this.aboveCursor })
-        ),
+        autocompletion({aboveCursor: this.aboveCursor}),
         language,
         customThemeExtension,
         this.getTabCompletionKeymap(),
@@ -546,16 +533,10 @@ export class NileCodeEditor extends NileElement {
   }
 
   getCustomThemeExtension(): Extension {
-    if(this.customThemeCSS) {
-      if(this.defaultFont){
-        return [EditorView.theme(this.customThemeCSS as { [selector: string]: StyleSpec }), EditorView.theme(customisedThemeCss),EditorView.theme(fontFamily)];
-      }
+    if (this.customThemeCSS) {
       return [EditorView.theme(this.customThemeCSS as { [selector: string]: StyleSpec }), EditorView.theme(customisedThemeCss)];
     }
-    if(this.defaultFont){
-      return [EditorView.theme(customisedThemeCss), EditorView.theme(fontFamily)];
-    }
-    return [EditorView.theme(customisedThemeCss)];
+    return [EditorView.theme(customisedThemeCss), EditorView.theme(DefaultTheme)];
   }
 
   restrictSingleLine() {

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

@@ -38,16 +38,6 @@ export const CustomTheme = {
   },
 };
 
-export const fontFamily = {
-  '.cm-tooltip.cm-tooltip-autocomplete > ul' : {
-    fontFamily: 'monospace !important',
-    fontWeight: '400',
-  },
-  '.cm-content' : {
-    fontFamily: 'monospace !important',
-  }
-}
-
 export const customisedThemeCss = {
   '.cm-content' : {
     fontFamily: 'inherit',
@@ -163,4 +153,4 @@ export const customisedThemeCss = {
   '.cm-completionLabel': {
     marginLeft: '18px',
   }
-};
+};

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

@@ -68,9 +68,6 @@ export class NileOption extends NileElement {
   /** Indicates whether the option is selected. */
   @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 = '';
-
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute('role', 'option');

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

@@ -38,8 +38,6 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import '../nile-virtual-select/nile-virtual-select';
 import { VirtualScrollHelper } from './virtual-scroll-helper';
-import NileOptionGroup from '../nile-option-group/nile-option-group';
-import { GroupAttributes } from './nile-select.interface';
 
 type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
 
@@ -260,9 +258,6 @@ export class NileSelect extends NileElement implements NileFormControl{
 
   @property({ type: Boolean }) enableVirtualScroll = false;
 
-  /** To enable the group header in the select */
-  @property({ type: Boolean, reflect: true, attribute: true }) enableGroupHeader = false;
-
   /** Gets the validity state object */
   get validity() {
     return this.valueInput?.validity;
@@ -308,10 +303,6 @@ export class NileSelect extends NileElement implements NileFormControl{
   }
 
   protected firstUpdated(_changedProperties: PropertyValues): void {
-    if(this.enableGroupHeader) {
-      this.handleGroupSearchChange();
-    }
-
     if(_changedProperties.has('multiple')) {
       this.setCheckBoxInOption(this.multiple as boolean);
     }
@@ -388,9 +379,6 @@ export class NileSelect extends NileElement implements NileFormControl{
       }
     });
 
-    if(this.enableGroupHeader) {
-      this.handleGroupShowSelected();
-    }
     // this.requestUpdate();
   }
 
@@ -404,9 +392,6 @@ export class NileSelect extends NileElement implements NileFormControl{
       el.selected = false;
       el.hidden = false;
     });
-    if(this.enableGroupHeader) {
-      this.handleGroupShowSelected();
-    }
     this.value = '';
     this.selectionChanged();
     this.emit('nile-change', { value: this.value, name: this.name });
@@ -556,9 +541,6 @@ export class NileSelect extends NileElement implements NileFormControl{
       this.showSelected = false;
       this.value = '';
       this.displayInput.focus({ preventScroll: true });
-      if(this.enableGroupHeader) {
-        this.handleGroupShowSelected();
-      }
 
       // Emit after update
       this.updateComplete.then(() => {
@@ -622,9 +604,7 @@ export class NileSelect extends NileElement implements NileFormControl{
           el.hidden = this.showSelected;
         }
       });
-      if(this.enableGroupHeader) {
-        this.handleGroupShowSelected();
-      }
+
       this.requestUpdate();
     }
   }
@@ -662,9 +642,6 @@ export class NileSelect extends NileElement implements NileFormControl{
           el.hidden = this.showSelected;
         }
       });
-      if(this.enableGroupHeader) {
-        this.handleGroupShowSelected();
-      }
 
       // Emit after updating
       this.updateComplete.then(() => {
@@ -834,9 +811,6 @@ export class NileSelect extends NileElement implements NileFormControl{
 
   handleSearchChange(e: any) {
     this.searchValue = e.detail.value;
-    if(this.enableGroupHeader) {
-      this.handleGroupSearchChange();
-    }
     if (!this.disableLocalSearch) {
       let filteredOptions = this.filterOptions(this.searchValue);
       if (filteredOptions.length === 0) {
@@ -900,14 +874,8 @@ export class NileSelect extends NileElement implements NileFormControl{
       // Reset the current option
       this.setCurrentOption(this.selectedOptions[0] || this.getFirstOption());
 
+      // Show
       this.emit('nile-show', { value: this.value, name: this.name });
-
-      if(this.enableGroupHeader) {
-        this.getAllGroupAttributes().forEach((el: GroupAttributes) => {
-          el.element.classList.remove('nile-group-hidden');
-        });
-      }
-
       this.addOpenListeners();
 
       this.showNoResults = !this.getAllOptions()?.length;
@@ -953,46 +921,6 @@ export class NileSelect extends NileElement implements NileFormControl{
     }
   }
 
-  private getAllGroupAttributes() {
-    return Array.from(
-      this.querySelectorAll<NileOptionGroup>('nile-option-group[name]')
-    ).map((el: HTMLElement) => ({
-      name: el?.getAttribute('name') || '',
-      data: el?.getAttribute('data'),
-      element: el
-    }));
-  }
-
-  getUniqueGroupNames(arr: NileOption[]) {
-    return Array.from(new Set(arr.map(obj => obj?.groupName)));
-  }
-  
-  handleGroupSearchChange() {
-    const filtered = new Set(
-      this.getUniqueGroupNames(this.filterOptions(this.searchValue))
-    );
-    this.getAllGroupAttributes().forEach(({ name, element }) => {
-      element?.classList.toggle('nile-group-hidden', !filtered.has(name));
-    });
-  }
-  
-  handleGroupShowSelected() {
-    const visibleGroups = new Set<string>();
-  
-    if (this.showSelected) {
-      this.getAllOptions().forEach((option: NileOption) => {
-        if (!option.hidden) visibleGroups.add(option.groupName);
-      });
-    }
-  
-    this.getAllGroupAttributes().forEach(({ name, element }) => {
-      element?.classList.toggle(
-        'nile-group-hidden',
-        this.showSelected && !visibleGroups.has(name)
-      );
-    });
-  }
-
   /** Shows the listbox. */
   async show() {
     if (this.open || this.disabled) {

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

@@ -42,19 +42,37 @@ export class NileTableBody extends NileElement {
   @query('slot') defaultSlot: HTMLSlotElement;
   @queryAssignedNodes({ flatten: true }) _childNodes!: Array<HTMLElement>;
   @property() type: 'primary' | 'secondary' = 'primary';
+  @property({ type: Boolean, reflect: true, attribute: true }) expandableRows = false;
+  @property({ type: Boolean, reflect: true, attribute: true }) singleRowExpand = 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)
+    this.emit('nile-body-load', { value: this.type, comp: this }, true, false)
+    
+    if (this.singleRowExpand) {
+      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;
+        }
+      });
+    }
   }
 
   /* #endregion */
@@ -77,6 +95,14 @@ 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.ts

@@ -10,13 +10,12 @@ import {
   html,
   CSSResultArray,
   TemplateResult,
-  PropertyValues,
 } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { styles } from './nile-table-cell-item.css';
 import NileElement from '../internal/nile-element';
 import { HasSlotController } from '../internal/slot';
-import { createResizeHandler, resetAllColumnWidths } from '../internal/resizable-table-helper';
+import { createResizeHandler } from '../internal/resizable-table-helper';
 
 /**
  * Nile table Cell Item component.
@@ -44,19 +43,6 @@ export class NileTableCellItem extends NileElement {
 
   private handleResizeStart = createResizeHandler(this, 50);
 
-  protected updated(changedProperties: PropertyValues) {
-    super.updated(changedProperties);
-    
-    if (changedProperties.has('resizable')) {
-      if (!this.resizable) {
-        const tableBody = this.closest('nile-table-body');
-        if (tableBody) {
-          resetAllColumnWidths(tableBody);
-        }
-      }
-    }
-  }
-
   /**
    * Render method
    * @slot This is a slot test

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

@@ -10,13 +10,12 @@ import {
   html,
   CSSResultArray,
   TemplateResult,
-  PropertyValues,
 } from 'lit';
 import { customElement, state, property } from 'lit/decorators.js';
 import { styles } from './nile-table-header-item.css';
 import NileElement from '../internal/nile-element';
 import { HasSlotController } from '../internal/slot';
-import { createResizeHandler, resetAllColumnWidths } from '../internal/resizable-table-helper';
+import { createResizeHandler } from '../internal/resizable-table-helper';
 
 /**
  * Nile icon component.
@@ -54,19 +53,6 @@ export class NileTableHeaderItem extends NileElement {
 
   /* #region Methods */
 
-  protected updated(changedProperties: PropertyValues) {
-    super.updated(changedProperties);
-    
-    if (changedProperties.has('resizable')) {
-      if (!this.resizable) {
-        const tableBody = this.closest('nile-table-body');
-        if (tableBody) {
-          resetAllColumnWidths(tableBody);
-        }
-      }
-    }
-  }
-
   /**
    * Render method
    * @slot This is a slot test

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

@@ -27,6 +27,53 @@ 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;
+}
 `;
 
 export default [styles];

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

@@ -10,6 +10,7 @@ import {
   html,
   CSSResultArray,
   TemplateResult,
+  PropertyValues,
 } from 'lit';
 import { customElement, query, property } from 'lit/decorators.js';
 import { styles } from './nile-table-row.css';
@@ -31,6 +32,29 @@ 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;
+
+  @query('slot[name="expanded"]')
+	private _expandedSlot!: HTMLSlotElement;
+	
+	@query('slot[name="expandableIcon"]')
+	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 */
 
@@ -41,6 +65,10 @@ export class NileTableRow extends NileElement {
    * @slot This is a slot test
    */
 
+	protected firstUpdated(): void {
+		this.tableBodyHasExpandable = this.closest('nile-table-body');
+	}
+
   private handleSortingAlter(event: CustomEvent) {
     const header_items: any = [
       ...this.querySelectorAll('nile-table-header-item'),
@@ -54,15 +82,69 @@ 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;
+		}
+	}
+
   public render(): TemplateResult {
+ 
+		if (!this.expandable && !this.tableBodyHasExpandable?.expandableRows) {
+      return html`
+        <slot
+          part="nile-row"
+          @nile-click-sort="${this.handleSortingAlter}"
+        ></slot>
+      `;
+    }
+  
+ 
     return html`
-      <slot
-        part="nile-row"
-        @nile-click-sort="${this.handleSortingAlter}"
-      ></slot>
+      <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 ? 'chevron-up' : 'chevron-down'}"
+              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>
     `;
   }
-
   /* #endregion */
 }