@aquera/nile-elements 0.1.60 → 0.1.61-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.60",
+  "version": "0.1.61-beta-1.0",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -86,8 +86,7 @@
     "./nile-inline-edit": "./dist/src/nile-inline-edit/index.js",
     "./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-pagination": "./dist/src/nile-pagination/index.js"
   },
   "scripts": {
     "analyze": "cem analyze --litelement",
@@ -192,3 +191,4 @@
     ]
   }
 }
+

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';
@@ -77,7 +76,5 @@ export { NileSectionMessage } from './nile-section-message';
 export { NileToolbar } from './nile-toolbar';
 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 {NilePagination } from './nile-pagination';

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/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-empty-state/nile-empty-state.ts

@@ -52,20 +52,20 @@ export class NileEmptyState extends NileElement {
    */
   public render(): TemplateResult {
     return html`
-		<div part="container" class="${classMap({
+		<div class="${classMap({
       'empty-state': true,
       'empty-state--sm': this.size == 'sm',
       'empty-state--md': this.size == 'md',
       'empty-state--lg': this.size == 'lg'
     })}">
-      <div  part="body" class="${classMap({ 'empty-state__body': true })}">
+      <div class="${classMap({ 'empty-state__body': true })}">
 
         ${this.variant == 'content' ? html`
-        <div part="content-image" class="empty-state__body--content">
+        <div class="empty-state__body--content">
           
-          <div part="image" src="" class="${classMap({ 'empty-state__image': true, 'empty-state__image--grayscale':this.grayscale  })}"></div>
+          <div src="" class="${classMap({ 'empty-state__image': true, 'empty-state__image--grayscale':this.grayscale  })}"></div>
           ${!this.icon ? nothing : html`
-          <div part="icon-wrapper" class="empty-state__img__icon">
+          <div class="empty-state__img__icon">
             <nile-icon name="${this.icon}" color="white" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}"></nile-icon>
           </div>`
           }
@@ -73,26 +73,26 @@ export class NileEmptyState extends NileElement {
         }
 				
 			  ${this.variant == 'tonal' ? html`
-				<div part="tonal-body" class="empty-state__body--tonal">
+				<div class="empty-state__body--tonal">
 					<nile-icon name="${this.icon}" size="40"></nile-icon>
 				</div>`: nothing
         }
 
 			  ${this.variant == 'flat' ? html`
-				<div part="flat-body" class="empty-state__body--flat">
+				<div class="empty-state__body--flat">
 					<span class="nile-flat-type-icon">
 						<nile-icon name="${this.icon}" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}" variant="secondary"></nile-icon>
 					</span>
 				</div>`: nothing
         }
       
-        <div part="text-section" class="empty__state__text-section">
-          <div part="text" class="empty-state__text">${this.text}</div>
-          <div part="subtitle" class="empty-state__subtext">${this.subText}</div>
+        <div class="empty__state__text-section">
+          <div class="empty-state__text">${this.text}</div>
+          <div class="empty-state__subtext">${this.subText}</div>
         </div>
 			</div>
 
-			<div part="actions" class="empty-state-actions">
+			<div class="empty-state-actions">
 				<slot></slot>
 			</div>
 		</div>

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,33 +66,33 @@ 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;
-
   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');
 
     // Check if the parent has the 'multiple' attribute
     if (parentSelect && parentSelect.hasAttribute('multiple')) {
-      let multipleValue = parentSelect.getAttribute('multiple');
-      if (multipleValue !== 'false') {
-        if(multipleValue === ''){
-          multipleValue = 'true';
-        }
-        this.isMultipleSelect = Boolean(multipleValue);
+      // 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;
       }
     }
   }
 
   protected updated(_changedProperties: PropertyValues): void {
-    if(_changedProperties.has('showCheckbox')) {
-      this.isMultipleSelect = this.showCheckbox;
-    }
+    this.checkIfMultipleSelect();
   }
 
   private handleDefaultSlotChange() {

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

@@ -33,11 +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';
 
 type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
 
@@ -56,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.
@@ -95,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',
@@ -164,7 +159,21 @@ export class NileSelect extends NileElement implements NileFormControl{
   @property({ type: Boolean, reflect: true }) noWidthSync = false;
 
   /** Allows more than one option to be selected. */
-  @property({ type: Boolean, reflect: true }) multiple = false;
+  @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({ attribute: 'help-text', reflect: true }) helpText = '';
 
@@ -237,13 +246,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;
-
   /** Gets the validity state object */
   get validity() {
     return this.valueInput?.validity;
@@ -254,18 +256,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);
@@ -280,15 +272,25 @@ 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);
+      this.setCheckBoxInOption(this.multiple as boolean);
+    }
+  }
+
+  protected firstUpdated(_changedProperties: PropertyValues): void {
+    if(_changedProperties.has('multiple')) {
+      this.setCheckBoxInOption(this.multiple as boolean);
     }
   }
 
   setCheckBoxInOption(checked: boolean): void {
-    const options = this.getAllOptions();
-    options.forEach((option: NileOption) => {
+    if(!this.options.length) { 
+      this.options = this.getAllOptions();
+    }    
+    this.options.forEach((option: NileOption) => {
       option.showCheckbox = checked;
     })
   }
@@ -769,7 +771,7 @@ export class NileSelect extends NileElement implements NileFormControl{
 
     // Update validity
     this.updateComplete.then(() => {
-      this.formControlController?.updateValidity();
+      this.formControlController.updateValidity();
     });
 
     this.calculateTotalWidthOfTags();
@@ -820,8 +822,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 })
@@ -924,7 +926,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. */
@@ -935,7 +937,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. */
@@ -1008,10 +1010,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-body/nile-table-body.css.ts

@@ -6,7 +6,6 @@
  */
 
 import { css } from 'lit';
-import { tableLayoutStyles } from '../internal/resizable-table-styles';
 
 /**
  * TableBody CSS
@@ -49,8 +48,6 @@ export const styles = css`
   slot::slotted(nile-table-row:last-child) {
     border-bottom: 0px;
   }
-
-  ${tableLayoutStyles}
 `;
 
 export default [styles];

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

@@ -24,7 +24,6 @@ import {
 import { styles } from './nile-table-body.css';
 import NileElement from '../internal/nile-element';
 import { getInnerHTML } from '../slot';
-import { hasResizableColumns } from '../internal/resizable-table-helper';
 
 /**
  * nile-table-body component.
@@ -47,7 +46,6 @@ export class NileTableBody extends NileElement {
   @state() private header_rows_data: any[] = [];
   @state() private sort__index: number;
   @state() private search__index: number;
-  @state() private hasResizableColumns = false;
 
   public static get styles(): CSSResultArray {
     return [styles];
@@ -69,10 +67,6 @@ export class NileTableBody extends NileElement {
     return this.header_rows_data.indexOf(index__value);
   }
 
-  private checkForResizableColumns() {
-    this.hasResizableColumns = hasResizableColumns(this);
-  }
-
   handleSlotchange(e: any) {
     let row_data: any = [];
     this._childNodes.forEach((child: any) => {
@@ -94,8 +88,6 @@ export class NileTableBody extends NileElement {
         row_data = [];
       }
     });
-    
-    this.checkForResizableColumns();
   }
 
   private handleSort(e: any) {
@@ -123,7 +115,6 @@ export class NileTableBody extends NileElement {
           @slotchange=${this.handleSlotchange}
           @nile-click-sort=${this.handleSort}
           class="nile__table__body"
-          ?resizable=${this.hasResizableColumns}
           @nile-search=${this.handleSearch}
         ></slot>
       </div>

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

@@ -6,7 +6,6 @@
  */
 
 import { css } from 'lit';
-import { resizableHostStyles, resizerStyles, resizableSlotStyles } from '../internal/resizable-table-styles';
 
 /**
  * TableCellItem CSS
@@ -20,20 +19,11 @@ export const styles = css`
     box-sizing: border-box;
     display: table-cell;
     vertical-align: middle;
+    max-width: var(--max--cell-width);
     padding: 16px 24px;
-    max-width: var(--max--cell-width);  
     min-height: var(--min--height);
   }
 
-  .cell__wrapper {
-    height: 100%;
-    position: relative;
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-    width: 100%;
-  }
-
   .column {
     min-width:var(--min-cell-width);
     width:var(--cell-width);
@@ -46,15 +36,7 @@ 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}
-  ${resizerStyles}
-  ${resizableSlotStyles}
 `;
 
 export default [styles];

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

@@ -15,7 +15,6 @@ 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 } from '../internal/resizable-table-helper';
 
 /**
  * Nile table Cell Item component.
@@ -34,36 +33,20 @@ export class NileTableCellItem extends NileElement {
     return [styles];
   }
 
-  /** Enables the resize functionality. */
-  @property({ type: Boolean, reflect: true }) resizable = false;
-
   /* #endregion */
 
   /* #region Methods */
 
-  private handleResizeStart = createResizeHandler(this, 50);
-
   /**
    * Render method
    * @slot This is a slot test
    */
   public render(): TemplateResult {
-    if (this.resizable) {
-      return html`
-        <div class="cell__wrapper" part="nile__table-cell">
-          ${this.hasSlotController.test('[default]')
-            ? html` <div class="column" part="nile__table-cell"><slot></slot></div>`
-            : ''}
-          <div class="resizer" @mousedown=${this.handleResizeStart}></div>
-        </div>
-      `;
-    } else {
-      return html`
-        ${this.hasSlotController.test('[default]')
-          ? html` <slot class="column" part="nile__table-cell"> </slot>`
-          : ''}
-      `;
-    }
+    return html`
+      ${this.hasSlotController.test('[default]')
+        ? html` <slot class="column" part="nile__table-cell"> </slot>`
+        : ''}
+    `;
   }
 
   /* #endregion */

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

@@ -6,7 +6,6 @@
  */
 
 import { css } from 'lit';
-import { resizableHeaderStyles, headerResizerStyles } from '../internal/resizable-table-styles';
 
 /**
  * TableHeaderItem CSS
@@ -45,8 +44,6 @@ 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 {
@@ -70,9 +67,6 @@ export const styles = css`
   .headers:hover .hover__arrow {
     opacity: 0.3;
   }
-
-  ${resizableHeaderStyles}
-  ${headerResizerStyles}
 `;
 
 export default [styles];

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

@@ -15,7 +15,6 @@ 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 } from '../internal/resizable-table-helper';
 
 /**
  * Nile icon component.
@@ -44,9 +43,6 @@ export class NileTableHeaderItem extends NileElement {
   @property({ type: String, reflect: true, attribute: 'icon-name' }) iconName =
     '';
 
-  /** Enables the resize functionality. */
-  @property({ type: Boolean, reflect: true }) resizable = false;
-
   @state() sorting_ct = 0;
 
   /* #endregion */
@@ -70,10 +66,9 @@ export class NileTableHeaderItem extends NileElement {
     this.emit('nile-search', { value: e.detail.value });
   }
 
-  private handleResizeStart = createResizeHandler(this, 50);
-
   public render(): TemplateResult {
-    return html`
+    return html` ${this.hasSlotController.test('[default]')
+      ? html`
       <div class="header__item__wrapper" part="nile__table-header-cell">
         <div class="headers">
           <slot> </slot>
@@ -114,11 +109,10 @@ export class NileTableHeaderItem extends NileElement {
               </nile-popover>`
             : html``}
         </div>
-        ${this.resizable 
-          ? html`<div class="resizer" @mousedown=${this.handleResizeStart}></div>`
-          : null}
-      </div>`;
+      </div>`
+      : null}`;
   }
+  /* #endregion */
 }
 
 export default NileTableHeaderItem;