@aquera/nile-elements 1.1.3-beta-1.2 → 1.1.3-beta-1.4

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.1.3-beta-1.2",
+  "version": "1.1.3-beta-1.4",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -94,24 +94,7 @@
     "./nile-grid-cell-item": "./dist/src/nile-grid-cell-item/index.js",
     "./nile-grid-head": "./dist/src/nile-grid-head/index.js",
     "./nile-grid-head-item": "./dist/src/nile-grid-head-item/index.js",
-    "./nile-grid-row": "./dist/src/nile-grid-row/index.js",
-    "./nile-side-bar": "./dist/src/nile-side-bar/index.js",
-    "./nile-side-bar-header": "./dist/src/nile-side-bar-header/index.js",
-    "./nile-side-bar-logo": "./dist/src/nile-side-bar-logo/index.js",
-    "./nile-side-bar-expand": "./dist/src/nile-side-bar-expand/index.js",
-    "./nile-side-bar-group": "./dist/src/nile-side-bar-group/index.js",
-    "./nile-side-bar-group-item": "./dist/src/nile-side-bar-group-item/index.js",
-    "./nile-side-bar-group-item-icon": "./dist/src/nile-side-bar-group-item-icon/index.js",
-    "./nile-side-bar-group-item-text": "./dist/src/nile-side-bar-group-item-text/index.js",
-    "./nile-side-bar-group-item-content": "./dist/src/nile-side-bar-group-item-content/index.js",
-    "./nile-side-bar-content": "./dist/src/nile-side-bar-content/index.js",
-    "./nile-side-bar-footer": "./dist/src/nile-side-bar-footer/index.js",
-    "./nile-side-bar-footer-item": "./dist/src/nile-side-bar-footer-item/index.js",
-    "./nile-side-bar-footer-icon": "./dist/src/nile-side-bar-footer-icon/index.js",
-    "./nile-side-bar-action": "./dist/src/nile-side-bar-action/index.js",
-    "./nile-side-bar-footer-text": "./dist/src/nile-side-bar-footer-text/index.js",
-    "./nile-side-bar-action-menu-item": "./dist/src/nile-side-bar-action-menu-item/index.js",
-    "./nile-side-bar-action-menu": "./dist/src/nile-side-bar-action-menu/index.js"
+    "./nile-grid-row": "./dist/src/nile-grid-row/index.js"
   },
   "scripts": {
     "analyze": "cem analyze --litelement",
@@ -215,4 +198,4 @@
       "prettier --write"
     ]
   }
-}
+}

package/src/index.ts

@@ -2,6 +2,7 @@ export { NileButton } from './nile-button';
 export { NileHeading } from './nile-heading';
 export { NileIcon } from './nile-icon';
 export { NileInput } from './nile-input';
+export { NileSidebar } from './nile-sidebar';
 export { NileMenu } from './nile-menu';
 export { NileBadge } from './nile-badge';
 export { NileDrawer } from './nile-drawer';
@@ -48,6 +49,9 @@ export { NileCard } from './nile-card';
 export { NilePopover } from './nile-popover';
 export { NileButtonFilter } from './nile-button-filter';
 export { NileCircularProgressbar } from './nile-circular-progressbar';
+export { NileSidebarMenu } from './nile-sidebar-menu';
+export { NileSidebarMenuItems } from './nile-sidebar-menu-items';
+export { NileSidebarWrapper } from './nile-sidebar-wrapper';
 export { NileTableCellItem } from './nile-table-cell-item';
 export { NileTableRow } from './nile-table-row';
 export { NileTableBody } from './nile-table-body';
@@ -89,21 +93,3 @@ export { NileRichTextEditor } from './nile-rich-text-editor';
 
 // Import version utility to set nile version in window object
 import './version';
-
-export { NileSideBar } from './nile-side-bar';
-export { NileSideBarHeader } from './nile-side-bar-header';
-export { NileSideBarLogo } from './nile-side-bar-logo';
-export { NileSideBarExpand } from './nile-side-bar-expand';
-export { NileSideBarGroup } from './nile-side-bar-group';
-export { NileSideBarGroupItem } from './nile-side-bar-group-item';
-export { NileSideBarGroupItemIcon } from './nile-side-bar-group-item-icon';
-export { NileSideBarGroupItemText } from './nile-side-bar-group-item-text';
-export { NileSideBarGroupItemContent } from './nile-side-bar-group-item-content';
-export { NileSideBarContent } from './nile-side-bar-content';
-export { NileSideBarFooter } from './nile-side-bar-footer';
-export { NileSideBarFooterItem } from './nile-side-bar-footer-item';
-export { NileSideBarFooterIcon } from './nile-side-bar-footer-icon';
-export { NileSideBarAction } from './nile-side-bar-action';
-export { NileSideBarFooterText } from './nile-side-bar-footer-text';
-export { NileSideBarActionMenuItem } from './nile-side-bar-action-menu-item';
-export { NileSideBarActionMenu } from './nile-side-bar-action-menu';

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

@@ -74,14 +74,38 @@ export const styles = css`
 
   /* Primary */
   .button--standard.button--primary {
-    background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));
-    border-color: var(--nile-colors-primary-600, var(--ng-primary-standard));  
-    color: var(--nile-colors-white-base, var(--ng-colors-text-white));
-    box-shadow: var(
-      --nile-textarea-standard-disabled-box-shadow,
-      var(--ng-shadow-xs-skeuomorphic)
-    ); //TODO: fix
-  }
+  position: relative;
+  overflow: hidden; 
+  background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));
+  color: var(--nile-colors-white-base, var(--ng-colors-text-white));
+  border-color: var(--nile-colors-primary-600);
+  border-width: var(--nile-border-width-1, var(--ng-border-width-0));
+  border-style: var(--nile-border-style-solid, var(--ng-border-style-none));
+  box-shadow: var(--nile-textarea-standard-disabled-box-shadow, var(--ng-shadow-none));
+}
+
+.button--standard.button--primary::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  background:  var(--ng-skeuemorphic-gradient-border);
+  mask: var(--ng-mask-rim);
+  mask-composite: var(--ng-mask-composite-exclude);  
+  padding: var(--ng-spacing-xxs); 
+}
+
+ 
+.button--standard.button--primary::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  box-shadow: var(--ng-shadow-xs-skeuomorphic)
+}
+
 
   .button--standard.button--primary:hover:not(.button--disabled) {
     background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));
@@ -121,8 +145,11 @@ export const styles = css`
   /*  Secondary */
   .button--standard.button--secondary {
     background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));
-    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+    border-color: var(--nile-colors-neutral-400, var(--ng-border-none));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
+    box-shadow: var(--nile-box-shadow-none,var(--ng-shadow-xs-skeuomorphic));
+    border-width:var(--nile-border-width-1, var(--ng-border-width-0));
+    border-style: var(--nile-border-style-solid, var(--ng-border-style-none));
   }
 
   .button--standard.button--secondary:hover:not(.button--disabled) {
@@ -255,11 +282,38 @@ export const styles = css`
 
   /* destructive */
   .button--standard.button--destructive {
+    position: relative;
+    overflow: hidden; 
     background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));
-    border-color:  var(--nile-colors-red-500, var(--ng-primary-standard));
+    border-color: var(--nile-colors-red-500);
+    border-width: var(--nile-border-width-1, var(--ng-border-width-0));
+    border-style: var(--nile-border-style-solid, var(--ng-border-style-none));
     color: var(--nile-colors-white-base, var(--ng-colors-text-white));
-    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));
-  }
+    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-none));
+  }
+
+
+  .button--standard.button--destructive::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  background:  var(--ng-skeuemorphic-gradient-border);
+  mask: var(--ng-mask-rim);
+  mask-composite: var(--ng-mask-composite-exclude);  
+  padding: var(--ng-spacing-xxs); 
+}
+
+ 
+.button--standard.button--destructive::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  box-shadow: var(--ng-shadow-xs-skeuomorphic)
+}
 
   .button--standard.button--destructive:hover:not(.button--disabled) {
     background-color: var(--nile-colors-red-700, var(--ng-colors-bg-error-solid-hover));

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

@@ -9,6 +9,7 @@ import { css } from 'lit';
 
 export const styles = css`
   :host {
+    --min-width: 180px;
     display: grid;
     grid-template-rows: auto;
     overflow: auto;
@@ -19,18 +20,21 @@ export const styles = css`
     border: 1px solid var(--nile-colors-neutral-400);
     border-radius: var(--nile-radius-radius-xl);
     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: fixed;
-    z-index: 2;
+    z-index: 4;
     background-color: var(--nile-colors-neutral-400);
     width: 2px;
     height: 100%;

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { LitElement, html, CSSResultArray, TemplateResult } from 'lit';
+import { 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';
@@ -18,6 +18,7 @@ import {
   rebuildTemplate,
   applyTemplate,
   layout,
+  applyColumnsTemplate,
 } from './nile-grid.utils';
 
 /**
@@ -35,14 +36,12 @@ 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() private columnWidths: number[] = [...this.customWidths];
+  @state() public columnWidths: number[] = [];
 
   /** To get the slot element */
   @query('slot') private slotEl!: HTMLSlotElement;
@@ -53,12 +52,25 @@ 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 store the mutation observer */
   private mo?: MutationObserver;
 
+  /** To store the resize observer */
+  private resizeObserver?: ResizeObserver;
+
   /** To store the request animation frame */
   private raf = 0;
 
+  /** To store the sticky index's */
+  @state() public stickyLeftIndexes: number[] = [];
+
+  /** To store the sticky index's */
+  @state() public stickyRightIndexes: number[] = [];
+
   private scheduleLayout() {
     if (this.raf) cancelAnimationFrame(this.raf);
     this.raf = requestAnimationFrame(() => {
@@ -69,7 +81,8 @@ export class NileGrid extends NileElement {
         this.ensureWidths.bind(this),
         rebuildTemplate,
         applyTemplate,
-        this.columnWidths
+        this.stickyLeftIndexes,
+        this.stickyRightIndexes
       );
     });
   }
@@ -85,32 +98,107 @@ export class NileGrid extends NileElement {
       col: number;
       widthPx: number;
     };
-    let w: any;
+
     const floor = 60;
+    const tgt = e.target as HTMLElement;
+    const hasSpan =
+      !!tgt.getAttribute('colspan') &&
+      parseInt(tgt.getAttribute('colspan')!, 10) > 1;
+
+    const prevW = this.columnWidths[col] ?? floor;
+    const newWraw = hasSpan
+      ? widthPx - (this.columnWidths[col - 1] ?? 0)
+      : widthPx;
+
+    const newW = Math.max(
+      floor,
+      Math.round(Number.isFinite(newWraw) ? newWraw : prevW)
+    );
+
+    let delta = newW - prevW;
+
+    if (delta === 0) {
+      resizeLinesHandler(
+        this.resizeStart,
+        this.resizeEnd,
+        col,
+        this.scrollHeight,
+        this.columnWidths,
+      );
+      return;
+    }
+
+    const takeFromRight = (start: number, needInit: number) => {
+      let need = needInit;
+      for (let i = start; i < this.columnWidths.length && need > 0; i++) {
+        const reducible = Math.max(0, this.columnWidths[i] - floor);
+        const cut = Math.min(reducible, need);
+        if (cut > 0) {
+          this.columnWidths[i] -= cut;
+          need -= cut;
+        }
+      }
+      return need;
+    };
+
+    const giveToRight = (start: number, giveInit: number) => {
+      let give = giveInit;
+      if (start < this.columnWidths.length && give > 0) {
+        this.columnWidths[start] += give;
+        give = 0;
+      }
+      return give;
+    };
 
-    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]));
+    if (!this.enableResizeScroll) {
+      if (delta > 0) {
+        let rightReducible = 0;
+        for (let i = col + 1; i < this.columnWidths.length; i++) {
+          rightReducible += Math.max(0, this.columnWidths[i] - floor);
+        }
+        if (rightReducible <= 0) {
+          delta = 0;
+        } else if (delta > rightReducible) {
+          delta = rightReducible;
+        }
+
+        this.columnWidths[col] = prevW + delta;
+
+        if (delta > 0) {
+          takeFromRight(col + 1, delta);
+        }
+      } else {
+        if (col === this.columnWidths.length - 1) {
+          delta = 0;
+        } else {
+          const shrink = -delta;
+          this.columnWidths[col] = Math.max(floor, prevW - shrink);
+
+          const remaining = giveToRight(col + 1, shrink);
+          if (remaining > 0) {
+            this.columnWidths[col] = prevW;
+            delta = 0;
+          }
+        }
+      }
     } else {
-      w = Math.max(floor, Math.round(widthPx));
+      this.columnWidths[col] = newW;
     }
-    this.columnWidths[col] = w;
+
     resizeLinesHandler(
       this.resizeStart,
       this.resizeEnd,
       col,
-      widthPx,
       this.scrollHeight,
-      this.columnWidths,
-      e
+      this.columnWidths
     );
+
     this.colTemplate = rebuildTemplate(
       this.columnWidths.length,
       this.columnWidths
     );
     applyTemplate(getHead(this.slotEl), getBody(this.slotEl), this.colTemplate);
+    applyColumnsTemplate(this, this.columnWidths, this.slotEl);
   };
 
   protected firstUpdated() {
@@ -128,6 +216,18 @@ 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,
+        applyTemplate,
+        this.stickyLeftIndexes,
+        this.stickyRightIndexes
+      );
+    });
 
     const head = getHead(this.slotEl);
     const body = getBody(this.slotEl);
@@ -140,22 +240,24 @@ 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
+      this.stickyLeftIndexes,
+      this.stickyRightIndexes
     );
   }
 
   public render(): TemplateResult {
     return html`
-      <div>
-        <slot></slot>
-        <div class="nile-resize-start"></div>
-        <div class="nile-resize-end"></div>
+      <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>
     `;
   }
@@ -163,6 +265,7 @@ export class NileGrid extends NileElement {
   disconnectedCallback(): void {
     super.disconnectedCallback?.();
     this.mo?.disconnect();
+    this.resizeObserver?.disconnect();
 
     if (this.raf) cancelAnimationFrame(this.raf);
     removeEventListeners(

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

@@ -0,0 +1 @@
+export type HeadItemEl = HTMLElement & { customWidth?: number | null };