@aquera/nile-elements 0.1.67-beta-1.9 → 0.1.67-beta-2.1

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.67-beta-1.9",
+  "version": "0.1.67-beta-2.1",
   "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",
@@ -192,4 +191,4 @@
       "prettier --write"
     ]
   }
-}
+}

package/src/index.ts

@@ -16,7 +16,6 @@ export { NileLoader } from './nile-loader';
 export { NileProgressBar } from './nile-progress-bar';
 export { NileSpinner } from './nile-spinner';
 export { NileSelect } from './nile-select';
-export { NileVirtualSelect } from './nile-virtual-select';
 export { NileOption } from './nile-option';
 export { NileTag } from './nile-tag';
 export { NileIconButton } from './nile-icon-button';
@@ -79,7 +78,4 @@ export { NileInlineEdit } from './nile-inline-edit';
 export { NileTable } from './nile-table';
 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 { NileSlider } from './nile-slider';

package/src/internal/form.ts

@@ -89,7 +89,7 @@ export class FormControlController implements ReactiveController {
   }
 
   hostConnected() {
-    const form = this.options?.form(this.host);
+    const form = this.options.form(this.host);
 
     if (form) {
       this.attachForm(form);
@@ -97,7 +97,7 @@ export class FormControlController implements ReactiveController {
 
     // Listen for interactions
     interactions.set(this.host, []);
-    this.options?.assumeInteractionOn.forEach(event => {
+    this.options.assumeInteractionOn.forEach(event => {
       this.host.addEventListener(event, this.handleInteraction);
     });
   }
@@ -107,7 +107,7 @@ export class FormControlController implements ReactiveController {
 
     // Clean up interactions
     interactions.delete(this.host);
-    this.options?.assumeInteractionOn.forEach(event => {
+    this.options.assumeInteractionOn.forEach(event => {
       this.host.removeEventListener(event, this.handleInteraction);
     });
   }

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

@@ -84,13 +84,6 @@ 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`
@@ -124,11 +117,6 @@ export const headerResizerStyles = css`
     background-color: transparent;
     opacity: 1;
   }
-
-  :host([resizable]) .headers {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
 `;
 
 export const resizableSlotStyles = css`

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

@@ -100,15 +100,7 @@ export class NileChip extends NileElement {
   protected updated(changedProperties: PropertyValues): void {
     super.updated(changedProperties);
     if (changedProperties.has('autoCompleteOptions')) {
-      let options = this.autoCompleteOptions;
-      if (typeof options === 'string') {
-        try {
-          options = JSON.parse(options);
-        } catch (e) {
-          options = [];
-        }
-      }
-      this.filteredAutoCompleteOptions = Array.isArray(options) ? [...options] : [];
+      this.filteredAutoCompleteOptions = [...this.autoCompleteOptions];
       if (this.noDuplicates) {
         this.filteredAutoCompleteOptions =
           this.filteredAutoCompleteOptions.filter(

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

@@ -35,7 +35,7 @@ import {
 import { sql } from '@codemirror/lang-sql';
 import { json } from '@codemirror/lang-json';
 import { html as htmlLang } from '@codemirror/lang-html';
-import { autocompletion,closeCompletion,CompletionContext,CompletionResult, completionStatus } from '@codemirror/autocomplete';
+import { autocompletion,CompletionContext,CompletionResult } from '@codemirror/autocomplete';
 import NileElement from '../internal/nile-element';
 import { basicSetup } from './extensionSetup';
 import { classMap } from 'lit/directives/class-map.js';
@@ -102,7 +102,7 @@ export class NileCodeEditor extends NileElement {
 
   @property({ type: Boolean, reflect: true , attribute: true}) aboveCursor: boolean = false;
 
-  @property({ type: Boolean, reflect: true, attribute: true }) tabCompletion: boolean = true;
+  @property({ type: Boolean, reflect: true, attribute: true }) tabCompletion: boolean = false;
 
   public view: EditorView;
   public viewState:EditorState;
@@ -117,7 +117,6 @@ export class NileCodeEditor extends NileElement {
   private defaultSyntaxHighlightingComp = new Compartment();
   private themeComp = new Compartment();
 
-  private isSpacePressed:boolean = false;
   /**
    * The styles for CodeEditor
    * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
@@ -261,27 +260,7 @@ export class NileCodeEditor extends NileElement {
       parent: this.codeEditor
     });
 
-    this.view.dom.addEventListener('keydown', (e: KeyboardEvent) => {
-      this.checkForSpaceKey(e);
-      this.handleEscapeKey(e);
-   }, true);
-    if (emitEvent) this.emit('nile-after-update', { createNewView: this.createNewView, codeMirrorInstance: this.view,  }, false );
-  }
-
-  checkForSpaceKey(e: KeyboardEvent) {
-    if (e.code === 'Space' && !e.ctrlKey) {
-        this.isSpacePressed = true;
-      } else {
-        this.isSpacePressed = false;
-    }
-  }
-
-  handleEscapeKey(e: KeyboardEvent) {
-    if (e.key === 'Escape' && this.view && completionStatus(this.view.state) !== null) {
-      e.stopPropagation();      
-      e.preventDefault();         
-      closeCompletion(this.view);
-    }
+    if(emitEvent) this.emit('nile-after-update',{ createNewView: this.createNewView, codeMirrorInstance: this.view,  }, false );
   }
 
   createState(){
@@ -402,7 +381,7 @@ export class NileCodeEditor extends NileElement {
     
     if (!baseMatch) {
       const trimmedText = textBeforeCursor.trim();
-      if (trimmedText === '' && !this.isSpacePressed) {
+      if (trimmedText === '') {
         const optionsList = Object.keys(this.customAutoCompletions).filter(key => 
           Object.keys(this.customAutoCompletions[key]).length
         );

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

@@ -39,12 +39,6 @@ export const CustomTheme = {
 };
 
 export const customisedThemeCss = {
-  '.cm-content' : {
-    fontFamily: 'inherit',
-  },
-  '.cm-scroller' : {
-    fontFamily: 'inherit',
-  },
   '.cm-tooltip-autocomplete': {
     padding: '9px 12px',
     backgroundColor: '#FFFFFF',
@@ -59,7 +53,7 @@ export const customisedThemeCss = {
     color: 'hsl(240 5.3% 26.1%)',
   },
   '.cm-tooltip.cm-completionInfo.cm-completionInfo-right': {
-    fontFamily: 'inherit',
+    fontFamily: 'colfax-regular',
     backgroundColor: '#FFFFFF',
     color: 'hsl(240 5.3% 26.1%)',
     padding: "6px 12px",
@@ -69,7 +63,7 @@ export const customisedThemeCss = {
     fontSize: '14px',
   },
   '.cm-tooltip.cm-tooltip-autocomplete > ul': {
-    fontFamily: 'inherit',
+    fontFamily: 'colfax-regular',
     fontWeight: '400',
   },
   '.cm-tooltip.cm-tooltip-autocomplete > ul > li': {

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

@@ -49,6 +49,7 @@ export class NileOption extends NileElement {
   @query('.option__label') defaultSlot: HTMLSlotElement;
 
   @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)
+  @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;
@@ -65,41 +66,30 @@ export class NileOption extends NileElement {
   /** Draws the option in a disabled state, preventing selection. */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
-  /** 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');
     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') {
-        this.isMultipleSelect = true;
-      } else {
-        this.isMultipleSelect = false;
+      let multipleValue = parentSelect.getAttribute('multiple');
+      if (multipleValue !== 'false') {
+        if(multipleValue === ''){
+          multipleValue = 'true';
+        }
+        this.isMultipleSelect = Boolean(multipleValue);
       }
     }
   }
 
   protected updated(_changedProperties: PropertyValues): void {
-    this.checkIfMultipleSelect();
+    if(_changedProperties.has('showCheckbox')) {
+      this.isMultipleSelect = this.showCheckbox;
+    }
   }
 
   private handleDefaultSlotChange() {
@@ -184,7 +174,7 @@ export class NileOption extends NileElement {
             @mouseleave=${this.handleMouseLeave}
           >
 
-          ${this.isMultipleSelect ? html`<nile-checkbox part="checkbox" class="option--checkbox" .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.ts

@@ -33,13 +33,8 @@ import type { CSSResultGroup, PropertyValues } 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 type { RenderItemConfig } from '../nile-virtual-select/types.js';
 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>>;
 
@@ -58,7 +53,6 @@ type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
  * @dependency nile-icon
  * @dependency nile-popup
  * @dependency nile-tag
- * @dependency nile-virtual-select
  *
  * @slot - The listbox options. Must be `<nile-option>` elements. You can use `<nile-divider>` to group items visually.
  * @slot label - The input's label. Alternatively, you can use the `label` attribute.
@@ -97,15 +91,14 @@ type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
  */
 
 @customElement('nile-select')
-export class NileSelect extends NileElement implements NileFormControl{
+export class NileSelect extends NileElement implements NileFormControl {
   static styles: CSSResultGroup = styles;
 
   // protected override BUBBLES=false;
 
-  private formControlController: FormControlController | null;
-  private virtualScrollHelper!: VirtualScrollHelper;
-
-
+  private readonly formControlController = new FormControlController(this, {
+    assumeInteractionOn: ['nile-blur', 'nile-input'],
+  });
   private readonly hasSlotController = new HasSlotController(
     this,
     'help-text',
@@ -166,21 +159,7 @@ export class NileSelect extends NileElement implements NileFormControl{
   @property({ type: Boolean, reflect: true }) noWidthSync = false;
 
   /** Allows more than one option to be selected. */
-  @property({
-    reflect: true,
-    converter: {
-      fromAttribute(value) {
-        if (value === '' || value === 'true') return true;
-        if (value === 'false') return false;
-        return value;
-      },
-      toAttribute(value) {
-        return typeof value === 'boolean' ? String(value) : value;
-      }
-    }
-  })
-  multiple = false as boolean | string;
-  
+  @property({ type: Boolean, reflect: true }) multiple = false;
 
   @property({ attribute: 'help-text', reflect: true }) helpText = '';
 
@@ -253,16 +232,6 @@ export class NileSelect extends NileElement implements NileFormControl{
 
   @property({ type: String }) noResultsMessage: string = 'No results found';
 
-  /** Enhanced configuration for rendering items with support for display text, value, and search text */
-  @property({ attribute: false }) renderItemConfig?: RenderItemConfig;
-
-  @property({ type: Array }) data: any = [];
-
-  @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;
@@ -273,18 +242,8 @@ export class NileSelect extends NileElement implements NileFormControl{
     return this.valueInput?.validationMessage;
   }
 
-  constructor() {
-    super();
-  }
-
   connectedCallback() {
     super.connectedCallback();
-    if(!this.enableVirtualScroll) {
-      this.formControlController = new FormControlController(this, {
-          assumeInteractionOn: ['nile-blur', 'nile-input'],
-      });
-    }
-    this.virtualScrollHelper = new VirtualScrollHelper(this);
     this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
     this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
     this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
@@ -299,29 +258,15 @@ export class NileSelect extends NileElement implements NileFormControl{
     this.emit('nile-destroy');
   }
 
-  private options: NileOption[] = [];
-
   protected updated(_changedProperties: PropertyValues): void {
     if(_changedProperties.has('multiple')) {
-      this.setCheckBoxInOption(this.multiple as boolean);
-    }
-  }
-
-  protected firstUpdated(_changedProperties: PropertyValues): void {
-    if(this.enableGroupHeader) {
-      this.handleGroupSearchChange();
-    }
-
-    if(_changedProperties.has('multiple')) {
-      this.setCheckBoxInOption(this.multiple as boolean);
+      this.setCheckBoxInOption(this.multiple);
     }
   }
 
   setCheckBoxInOption(checked: boolean): void {
-    if(!this.options.length) { 
-      this.options = this.getAllOptions();
-    }    
-    this.options.forEach((option: NileOption) => {
+    const options = this.getAllOptions();
+    options.forEach((option: NileOption) => {
       option.showCheckbox = checked;
     })
   }
@@ -388,9 +333,6 @@ export class NileSelect extends NileElement implements NileFormControl{
       }
     });
 
-    if(this.enableGroupHeader) {
-      this.handleGroupShowSelected();
-    }
     // this.requestUpdate();
   }
 
@@ -404,9 +346,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 });
@@ -553,12 +492,7 @@ export class NileSelect extends NileElement implements NileFormControl{
 
     if (this.value !== '') {
       this.setSelectedOptions([]);
-      this.showSelected = false;
-      this.value = '';
       this.displayInput.focus({ preventScroll: true });
-      if(this.enableGroupHeader) {
-        this.handleGroupShowSelected();
-      }
 
       // Emit after update
       this.updateComplete.then(() => {
@@ -622,9 +556,7 @@ export class NileSelect extends NileElement implements NileFormControl{
           el.hidden = this.showSelected;
         }
       });
-      if(this.enableGroupHeader) {
-        this.handleGroupShowSelected();
-      }
+
       this.requestUpdate();
     }
   }
@@ -662,9 +594,6 @@ export class NileSelect extends NileElement implements NileFormControl{
           el.hidden = this.showSelected;
         }
       });
-      if(this.enableGroupHeader) {
-        this.handleGroupShowSelected();
-      }
 
       // Emit after updating
       this.updateComplete.then(() => {
@@ -818,7 +747,7 @@ export class NileSelect extends NileElement implements NileFormControl{
 
     // Update validity
     this.updateComplete.then(() => {
-      this.formControlController?.updateValidity();
+      this.formControlController.updateValidity();
     });
 
     this.calculateTotalWidthOfTags();
@@ -834,9 +763,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) {
@@ -872,8 +798,8 @@ export class NileSelect extends NileElement implements NileFormControl{
   }
 
   private handleInvalid(event: Event) {
-    this.formControlController?.setValidity(false);
-    this.formControlController?.emitInvalidEvent(event);
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
   }
 
   @watch('disabled', { waitUntilFirstUpdate: true })
@@ -900,14 +826,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 +873,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) {
@@ -1022,7 +902,7 @@ export class NileSelect extends NileElement implements NileFormControl{
 
   /** Gets the associated form, if one exists. */
   getForm(): HTMLFormElement | null {
-    return this.formControlController?.getForm() || null;
+    return this.formControlController.getForm();
   }
 
   /** Checks for validity and shows the browser's validation message if the control is invalid. */
@@ -1033,7 +913,7 @@ export class NileSelect extends NileElement implements NileFormControl{
   /** Sets a custom validation message. Pass an empty string to restore validity. */
   setCustomValidity(message: string) {
     this.valueInput.setCustomValidity(message);
-    this.formControlController?.updateValidity();
+    this.formControlController.updateValidity();
   }
 
   /** Sets focus on the control. */
@@ -1106,10 +986,6 @@ export class NileSelect extends NileElement implements NileFormControl{
   }
 
   render() {
-    if(this.enableVirtualScroll) {
-      return this.virtualScrollHelper.renderVirtualizedContent();
-    }
-
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasHelpTextSlot = this.hasSlotController.test('help-text');
     const hasLabelSuffixSlot = this.hasSlotController.test('label-suffix');

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

@@ -46,6 +46,10 @@ export const styles = css`
     /* line-height: var(--nile-type-scale-6); */
     line-height: normal;
     letter-spacing: 0.2px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
   }
 
   ${resizableHostStyles}

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

@@ -45,6 +45,8 @@ export const styles = css`
     font-style: normal;
     /* line-height: var(--nile-type-scale-5); */
     line-height: normal;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   nile-icon {

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

@@ -27,6 +27,57 @@ export const styles = css`
   nile-table-row > slot::slotted(nile-table-cell-item:first-child) {
     color: red;
   }
+
+.row-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.row {
+  cursor: default;
+  position: relative;       
+  display: flex;
+  align-items: center;
+}
+
+.row.expandable {
+  border-bottom: 1px solid var(--nile-table-row-border-color);
+}
+ 
+
+.expanded-content {
+  overflow: hidden;
+  transition: max-height 0.3s ease;
+}
+
+.row.expandable .expand-icon {
+  margin-right: 4px;
+}
+ 
+.row ::slotted(nile-table-cell-item),
+.row ::slotted(nile-table-header-item) {
+  flex: 1 1 0;           
+  box-sizing: border-box; 
+}
+
+
+.row-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.expand-icon {
+  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];