@aquera/nile-elements 1.2.1-beta-1.0 → 1.2.1-beta-1.1

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

@@ -45,6 +45,9 @@ export class NileChip extends NileElement {
   /** Sets the input to a warning state, changing its visual appearance. */
   @property({ type: Boolean }) warning = false;
 
+@property({ type: Boolean }) noAutoComplete = false;
+
+
   /** Sets the input to an error state, changing its visual appearance. */
   @property({ type: Boolean }) error = false;
 
@@ -201,45 +204,55 @@ export class NileChip extends NileElement {
             `
           )}
           <div class="nile-chip__auto-complete">
-            <nile-auto-complete
-              .enableVirtualScroll=${this.enableVirtualScroll}
-              .allMenuItems=${this.filteredAutoCompleteOptions}
-              .filterFunction=${this.filterFunction}
-              .renderItemFunction=${this.renderItemFunction}
-              .loading="${this.loading}"
-              .value=${this.inputValue} 
-              ?isDropdownOpen=${this.isDropdownOpen}
-              .noBorder=${true}
-              .noOutline=${true}
-              .noPadding=${true}
-              .disabled=${this.disabled}
-              openOnFocus
-              exportparts="options__wrapper, input"
-              .placeholder=${this.placeholder}
-              @nile-input=${this.handleInputChange}
-              @keydown=${this.handleInputKeydown}
-              @nile-focus=${this.handleFocus}
-              @nile-complete=${this.handleSelect}
-            ></nile-auto-complete>
+            ${this.noAutoComplete
+              ? html`
+                  <nile-input
+                    .value=${this.inputValue}
+                    .placeholder=${this.placeholder}
+                    .disabled=${this.disabled}
+                    ?no-border=${true}
+                    ?no-outline=${true}
+                    ?no-padding=${true}
+                    @nile-input=${this.handleInputChange}
+                    @keydown=${this.handleInputKeydown}
+                    @focus=${this.handleFocus}
+                    exportparts="input"
+                  ></nile-input>
+                `
+              : html`
+                  <nile-auto-complete
+                    .enableVirtualScroll=${this.enableVirtualScroll}
+                    .allMenuItems=${this.filteredAutoCompleteOptions}
+                    .filterFunction=${this.filterFunction}
+                    .renderItemFunction=${this.renderItemFunction}
+                    .loading="${this.loading}"
+                    .value=${this.inputValue}
+                    ?isDropdownOpen=${this.isDropdownOpen}
+                    .noBorder=${true}
+                    .noOutline=${true}
+                    .noPadding=${true}
+                    .disabled=${this.disabled}
+                    openOnFocus
+                    exportparts="options__wrapper, input"
+                    .placeholder=${this.placeholder}
+                    @nile-input=${this.handleInputChange}
+                    @keydown=${this.handleInputKeydown}
+                    @nile-focus=${this.handleFocus}
+                    @nile-complete=${this.handleSelect}
+                  ></nile-auto-complete>
+                `}
           </div>
         </div>
-        ${
-          hasHelpText
-            ? html`
-                <nile-form-help-text>${this.helpText}</nile-form-help-text>
-              `
-            : ``
-        }
-
-        ${
-          hasErrorMessage
-            ? html`
-                <nile-form-error-message
-                  >${this.errorMessage}</nile-form-error-message
-                >
-              `
-            : ``
-        }
+        ${hasHelpText
+          ? html` <nile-form-help-text>${this.helpText}</nile-form-help-text> `
+          : ``}
+        ${hasErrorMessage
+          ? html`
+              <nile-form-error-message
+                >${this.errorMessage}</nile-form-error-message
+              >
+            `
+          : ``}
       </div>
     `;
   }
@@ -301,6 +314,9 @@ export class NileChip extends NileElement {
   }
 
   private handleFocus() {
+    if (this.noAutoComplete) {
+      return;
+    }
     this.isDropdownOpen = true;
   }
 

package/src/nile-grid/nile-grid.css.ts

@@ -9,32 +9,28 @@ import { css } from 'lit';
 
 export const styles = css`
   :host {
-    --min-width: 180px;
     display: grid;
     grid-template-rows: auto;
     overflow: auto;
     inline-size: 100%;
     position: relative;
+    contain: content;
     box-sizing: border-box;
     border: 1px solid var(--nile-colors-neutral-400);
     border-radius: var(--nile-radius-radius-xl);
-    background-color: var(--nile-colors-white-base);
     max-height: 100%;
-    width: 100%;
-    min-width: var(--min-width);
-    box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1),
-      0px 1px 2px 0px rgba(16, 24, 40, 0.06);
   }
 
   ::slotted(nile-grid-head),
   ::slotted(nile-grid-body) {
     inline-size: 100%;
+    display: grid;
   }
 
   .nile-resize-start,
   .nile-resize-end {
-    position: absolute;
-    z-index: 4;
+    position: fixed;
+    z-index: 2;
     background-color: var(--nile-colors-neutral-400);
     width: 2px;
     height: 100%;

package/src/nile-grid/nile-grid.ts

@@ -5,22 +5,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, CSSResultArray, TemplateResult } from 'lit';
+import { LitElement, html, CSSResultArray, TemplateResult } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { styles } from './nile-grid.css';
 import NileElement from '../internal/nile-element';
 import {
+  resizeLinesHandler,
   listenToEventListeners,
   removeEventListeners,
   getHead,
   getBody,
   rebuildTemplate,
+  applyTemplate,
   layout,
-  computeNewWidth,
-  resizeNoScroll,
-  resizeWithScroll,
-  applyAfterResize,
-  syncStickyShadows,
 } from './nile-grid.utils';
 
 /**
@@ -38,15 +35,17 @@ export class NileGrid extends NileElement {
   public static get styles(): CSSResultArray {
     return [styles];
   }
+  /** User can pass custom widths for the columns */
+  @property({ type: Array, attribute: true }) customWidths: number[] = [];
 
   /** To set the grid template columns in rebuildTemplate method */
   @state() public colTemplate = '';
 
   /** To store the column widths in the beginning and after resizing */
-  @state() public columnWidths: number[] = [];
+  @state() private columnWidths: number[] = [...this.customWidths];
 
   /** To get the slot element */
-  @query('slot') public slotEl!: HTMLSlotElement;
+  @query('slot') private slotEl!: HTMLSlotElement;
 
   /** To get the first resize line to show the resize handle */
   @query('.nile-resize-start') resizeStart: HTMLElement;
@@ -54,38 +53,12 @@ export class NileGrid extends NileElement {
   /** To get the last resize line to show the resize handle */
   @query('.nile-resize-end') resizeEnd: HTMLElement;
 
-  /** To enable horizontal scrolling when user is resizing */
-  @property({ type: Boolean, attribute: true, reflect: true }) enableResizeScroll: boolean = false;
-
-  /** To enable hoverable rows */
-  @property({ type: Boolean, attribute: true, reflect: true }) hoverable: boolean = false;
-
   /** To store the mutation observer */
   private mo?: MutationObserver;
 
-  /** To store the resize observer */
-  private resizeObserver?: ResizeObserver;
-
-  private resizeObserverStickyShadows?: ResizeObserver;
-
   /** To store the request animation frame */
   private raf = 0;
 
-  /** Minimum column width */
-  @property({ type: Number, reflect: true, attribute: true }) minColumnWidth = 40;
-
-  /** To store the sticky index's */
-  @state() public stickyLeftIndexes: number[] = [];
-
-  /** To store the sticky index's */
-  @state() public stickyRightIndexes: number[] = [];
-
-  /** To calculate the rowspan height */
-  @state() public cellHeight: number | null = null;
-
-  /** To check if the widths are initialized */
-  @state() public widthsInitialized = false;
-
   private scheduleLayout() {
     if (this.raf) cancelAnimationFrame(this.raf);
     this.raf = requestAnimationFrame(() => {
@@ -95,10 +68,9 @@ export class NileGrid extends NileElement {
         this.slotEl,
         this.ensureWidths.bind(this),
         rebuildTemplate,
-        this.stickyLeftIndexes,
-        this.stickyRightIndexes
+        applyTemplate,
+        this.columnWidths
       );
-      syncStickyShadows(this);
     });
   }
 
@@ -109,34 +81,36 @@ export class NileGrid extends NileElement {
   }
 
   private onResize = (e: Event) => {
-    e.stopPropagation();
-    this.emit('nile-resize', {
-      columnNumber: (e as CustomEvent).detail.col,
-      columnWidth: (e as CustomEvent).detail.widthPx,
-    });
     const { col, widthPx } = (e as CustomEvent).detail as {
       col: number;
       widthPx: number;
     };
-    const { prevW, newW, delta0 } = computeNewWidth({
-      target: e.target as HTMLElement,
-      col,
-      widthPx,
-      floor: this.minColumnWidth,
-      columnWidths: this.columnWidths,
-    });
-
-    if (delta0 === 0) {
-      applyAfterResize(this, col);
-      return;
-    }
-
-    if (!this.enableResizeScroll) {
-      resizeNoScroll({ grid: this, col, prevW, newW, floor: this.minColumnWidth });
+    let w: any;
+    const floor = 60;
+
+    if (
+      (e.target as HTMLElement).getAttribute('colspan') &&
+      parseInt((e.target as HTMLElement).getAttribute('colspan')!) > 1
+    ) {
+      w = Math.max(floor, Math.round(widthPx - this.columnWidths[col - 1]));
     } else {
-      resizeWithScroll({ grid: this, col, newW });
+      w = Math.max(floor, Math.round(widthPx));
     }
-    applyAfterResize(this, col);
+    this.columnWidths[col] = w;
+    resizeLinesHandler(
+      this.resizeStart,
+      this.resizeEnd,
+      col,
+      widthPx,
+      this.scrollHeight,
+      this.columnWidths,
+      e
+    );
+    this.colTemplate = rebuildTemplate(
+      this.columnWidths.length,
+      this.columnWidths
+    );
+    applyTemplate(getHead(this.slotEl), getBody(this.slotEl), this.colTemplate);
   };
 
   protected firstUpdated() {
@@ -147,10 +121,6 @@ export class NileGrid extends NileElement {
       this.slotEl,
       this._attachObserverAndLayout.bind(this)
     );
-    this.addEventListener('scroll', () => syncStickyShadows(this));
-    this.resizeObserverStickyShadows = new ResizeObserver(() => syncStickyShadows(this));
-    this.resizeObserverStickyShadows.observe(this);
-    syncStickyShadows(this);
   }
 
   private _attachObserverAndLayout() {
@@ -158,17 +128,6 @@ export class NileGrid extends NileElement {
     this.mo = new MutationObserver(() => {
       this.scheduleLayout();
     });
-    this.resizeObserver?.disconnect();
-    this.resizeObserver = new ResizeObserver(() => {
-      layout(
-        this,
-        this.slotEl,
-        this.ensureWidths.bind(this),
-        rebuildTemplate,
-        this.stickyLeftIndexes,
-        this.stickyRightIndexes
-      );
-    });
 
     const head = getHead(this.slotEl);
     const body = getBody(this.slotEl);
@@ -181,15 +140,22 @@ export class NileGrid extends NileElement {
       attributes: true,
       attributeFilter: ['colspan', 'rowspan'],
     });
-    this.resizeObserver?.observe(this);
+    layout(
+      this,
+      this.slotEl,
+      this.ensureWidths.bind(this),
+      rebuildTemplate,
+      applyTemplate,
+      this.columnWidths
+    );
   }
 
   public render(): TemplateResult {
     return html`
-      <div part="grid-base" class="nile-grid-base">
-        <slot part="grid-slot"></slot>
-        <div part="resize-start" class="nile-resize-start"></div>
-        <div part="resize-end" class="nile-resize-end"></div>
+      <div>
+        <slot></slot>
+        <div class="nile-resize-start"></div>
+        <div class="nile-resize-end"></div>
       </div>
     `;
   }
@@ -197,8 +163,6 @@ export class NileGrid extends NileElement {
   disconnectedCallback(): void {
     super.disconnectedCallback?.();
     this.mo?.disconnect();
-    this.resizeObserver?.disconnect();
-    this.resizeObserverStickyShadows?.disconnect();
 
     if (this.raf) cancelAnimationFrame(this.raf);
     removeEventListeners(