@aquera/nile-elements 1.5.1 → 1.5.3

package/dist/src/nile-grid/nile-grid-head-item/nile-grid-head-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-grid-head-item.js","sourceRoot":"","sources":["../../../../src/nile-grid/nile-grid-head-item/nile-grid-head-item.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, CSSResultArray, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-grid-head-item.css';\nimport NileElement from '../../internal/nile-element';\nimport {\n  initHeadResize,\n  headResizeMove,\n  headResizeDone,\n} from './nile-grid-head-item.utils';\nimport { NileGrid } from '../nile-grid';\n\n/**\n * Nile grid-head-item component.\n *\n * @tag nile-grid-head-item\n *\n */\n@customElement('nile-grid-head-item')\nexport class NileGridHeadItem extends NileElement {\n  /**\n   * The styles for nile-grid-head-item\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  @property({ type: Number, reflect: true, attribute: true }) colspan = 1;\n  @property({ type: Number, reflect: true, attribute: true }) rowspan = 1;\n  @property({ type: Boolean, reflect: true, attribute: true }) resizable = false;\n  @property({ type: String, reflect: true, attribute: true }) width: string | null = null;\n  @property({ type: String, reflect: true, attribute: true }) sticky: string | null = null;\n  @property({ type: Boolean, reflect: true, attribute: true }) lockWidth: boolean = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role','row');\n  }\n\n  private onHandlePointerDown = (ev: PointerEvent) => {\n    const el = this as HTMLElement;\n    const nileGrid = this.closest('nile-grid') as NileGrid;\n    const downXRef = { value: 0 };\n    const startWRef = { value: 0 };\n\n    const result = initHeadResize(el, ev, downXRef, startWRef);\n    if (!result) return;\n\n    const { target, col } = result;\n    const move = (e: PointerEvent) => headResizeMove(el, col, startWRef.value, downXRef.value, e, nileGrid);\n    const done = () => headResizeDone(el, ev, target, move);\n\n    target.addEventListener('pointermove', move);\n    target.addEventListener('pointerup', done, { once: true });\n    target.addEventListener('pointercancel', done, { once: true });\n  };\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeAttribute('role');\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div part=\"grid-head-item-base\" class=\"head-item-base\">\n        <slot></slot>\n        ${this.resizable\n          ? html`\n              <div\n                aria-hidden=\"false\"\n                class=\"resize-handle\"\n                part=\"resize-handle\"\n                @pointerdown=${this.onHandlePointerDown}\n              ></div>\n            `\n          : null}\n      </div>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileGridHeadItem;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-grid-head-item': NileGridHeadItem;\n  }\n}\n"]}
+{"version":3,"file":"nile-grid-head-item.js","sourceRoot":"","sources":["../../../../src/nile-grid/nile-grid-head-item/nile-grid-head-item.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, CSSResultArray, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-grid-head-item.css';\nimport NileElement from '../../internal/nile-element';\nimport {\n  initHeadResize,\n  headResizeMove,\n  headResizeDone,\n  addListeners,\n  removeListeners,\n} from './nile-grid-head-item.utils';\nimport { NileGrid } from '../nile-grid';\n\n/**\n * Nile grid-head-item component.\n *\n * @tag nile-grid-head-item\n *\n */\n@customElement('nile-grid-head-item')\nexport class NileGridHeadItem extends NileElement {\n  /**\n   * The styles for nile-grid-head-item\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  @property({ type: Number, reflect: true, attribute: true }) colspan = 1;\n  @property({ type: Number, reflect: true, attribute: true }) rowspan = 1;\n  @property({ type: Boolean, reflect: true, attribute: true }) resizable = false;\n  @property({ type: String, reflect: true, attribute: true }) width: string | null = null;\n  @property({ type: String, reflect: true, attribute: true }) sticky: string | null = null;\n  @property({ type: Boolean, reflect: true, attribute: true }) lockWidth: boolean = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role','row');\n  }\n\n  private onHandlePointerDown = (ev: PointerEvent) => {\n    const el = this as HTMLElement;\n    const nileGrid = this.closest('nile-grid') as NileGrid;\n    const downXRef = { value: 0 };\n    const startWRef = { value: 0 };\n\n    const result = initHeadResize(el, ev, downXRef, startWRef);\n    if (!result) return;\n\n    const { target, col } = result;\n    const move = (e: PointerEvent) => headResizeMove(el, col, startWRef.value, downXRef.value, e, nileGrid);\n    const done = (e: PointerEvent) => {\n      headResizeDone(el, col, e, target, move);\n      removeListeners(target, move, done);\n    }\n    addListeners(target, move, done);\n  };\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeAttribute('role');\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div part=\"grid-head-item-base\" class=\"head-item-base\">\n        <slot></slot>\n        ${this.resizable\n          ? html`\n              <div\n                aria-hidden=\"false\"\n                class=\"resize-handle\"\n                part=\"resize-handle\"\n                @pointerdown=${this.onHandlePointerDown}\n              ></div>\n            `\n          : null}\n      </div>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileGridHeadItem;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-grid-head-item': NileGridHeadItem;\n  }\n}\n"]}

package/dist/src/nile-grid/nile-grid-head-item/nile-grid-head-item.utils.d.ts

@@ -31,4 +31,18 @@ export declare function headResizeMove(el: HTMLElement, col: number, startW: num
  * @param move Pointer move handler
  * @returns void
  */
-export declare function headResizeDone(el: HTMLElement, ev: PointerEvent, target: HTMLElement, move: (e: PointerEvent) => void): void;
+export declare function headResizeDone(el: HTMLElement, col: number, ev: PointerEvent, target: HTMLElement, move: (e: PointerEvent) => void): void;
+/** addListeners
+ * @param target Target element
+ * @param move Pointer move handler
+ * @param done Pointer up handler
+ * @returns void
+ */
+export declare function addListeners(target: HTMLElement, move: (e: PointerEvent) => void, done: (e: PointerEvent) => void): void;
+/** removeListeners
+ * @param target Target element
+ * @param move Pointer move handler
+ * @param done Pointer up handler
+ * @returns void
+ */
+export declare function removeListeners(target: HTMLElement, move: (e: PointerEvent) => void, done: (e: PointerEvent) => void): void;

package/dist/src/nile-grid/nile-grid-head-item/nile-grid-head-item.utils.js

@@ -49,9 +49,33 @@ export function headResizeMove(el, col, startW, downX, e, nileGrid) {
  * @param move Pointer move handler
  * @returns void
  */
-export function headResizeDone(el, ev, target, move) {
+export function headResizeDone(el, col, ev, target, move) {
     target.releasePointerCapture(ev.pointerId);
     target.removeEventListener('pointermove', move);
-    el.dispatchEvent(new CustomEvent('nile-resize-end', { bubbles: true, composed: true }));
+    el.dispatchEvent(new CustomEvent('nile-resize-end', { bubbles: true, composed: true, detail: { col: col } }));
+}
+/** addListeners
+ * @param target Target element
+ * @param move Pointer move handler
+ * @param done Pointer up handler
+ * @returns void
+ */
+export function addListeners(target, move, done) {
+    target.addEventListener('pointermove', move);
+    target.addEventListener('pointerup', done);
+    target.addEventListener('pointercancel', done);
+    window.addEventListener('pointerup', done, { once: true });
+}
+/** removeListeners
+ * @param target Target element
+ * @param move Pointer move handler
+ * @param done Pointer up handler
+ * @returns void
+ */
+export function removeListeners(target, move, done) {
+    target.removeEventListener('pointermove', move);
+    target.removeEventListener('pointerup', done);
+    target.removeEventListener('pointercancel', done);
+    window.removeEventListener('pointerup', done);
 }
 //# sourceMappingURL=nile-grid-head-item.utils.js.map

package/dist/src/nile-grid/nile-grid-head-item/nile-grid-head-item.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-grid-head-item.utils.js","sourceRoot":"","sources":["../../../../src/nile-grid/nile-grid-head-item/nile-grid-head-item.utils.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,MAAM,UAAU,cAAc,CAC5B,EAAe,EACf,EAAgB,EAChB,QAA2B,EAC3B,SAA4B;IAE5B,EAAE,CAAC,cAAc,EAAE,CAAC;IACpB,EAAE,CAAC,eAAe,EAAE,CAAC;IAErB,MAAM,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IACzC,IAAI,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IAEzB,MAAM,IAAI,GAAG,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC;IACrD,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;IAE/C,QAAQ,CAAC,KAAK,GAAG,EAAE,CAAC,OAAO,CAAC;IAC5B,SAAS,CAAC,KAAK,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;IAEnD,MAAM,MAAM,GAAG,EAAE,CAAC,aAA4B,CAAC;IAC/C,MAAM,CAAC,iBAAiB,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAEvC,EAAE,CAAC,aAAa,CACd,IAAI,WAAW,CAAC,oBAAoB,EAAE;QACpC,MAAM,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,SAAS,CAAC,KAAK,EAAE;QACzC,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,IAAI;KACf,CAAC,CACH,CAAC;IAEF,EAAE,CAAC,aAAa,CACd,IAAI,WAAW,CAAC,mBAAmB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CACxE,CAAC;IAEF,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;AACzB,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,cAAc,CAC5B,EAAe,EACf,GAAW,EACX,MAAc,EACd,KAAa,EACb,CAAe,EACf,QAAkB;IAElB,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;IAC5F,EAAE,CAAC,aAAa,CACd,IAAI,WAAW,CAAC,oBAAoB,EAAE;QACpC,MAAM,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE;QACxB,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,IAAI;KACf,CAAC,CACH,CAAC;AACJ,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,cAAc,CAC5B,EAAe,EACf,EAAgB,EAChB,MAAmB,EACnB,IAA+B;IAE/B,MAAM,CAAC,qBAAqB,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAC3C,MAAM,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;IAEhD,EAAE,CAAC,aAAa,CACd,IAAI,WAAW,CAAC,iBAAiB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CACtE,CAAC;AACJ,CAAC","sourcesContent":["import { NileGrid } from \"../nile-grid\";\n\n/** initHeadResize\n * @param el Target element\n * @param ev Pointer event\n * @param downXRef Reference to store downX value\n * @param startWRef Reference to store startW value\n * @returns Object containing target element and column index\n */\nexport function initHeadResize(\n  el: HTMLElement,\n  ev: PointerEvent,\n  downXRef: { value: number },\n  startWRef: { value: number }\n) {\n  ev.preventDefault();\n  ev.stopPropagation();\n\n  const cStart = Number(el.dataset.cStart);\n  if (!cStart) return null;\n\n  const span = Number(el.getAttribute('colspan')) || 1;\n  const col = Math.max(0, cStart + span - 1 - 1);\n\n  downXRef.value = ev.clientX;\n  startWRef.value = el.getBoundingClientRect().width;\n\n  const target = ev.currentTarget as HTMLElement;\n  target.setPointerCapture(ev.pointerId);\n\n  el.dispatchEvent(\n    new CustomEvent('nile-column-resize', {\n      detail: { col, widthPx: startWRef.value },\n      bubbles: true,\n      composed: true,\n    })\n  );\n\n  el.dispatchEvent(\n    new CustomEvent('nile-resize-start', { bubbles: true, composed: true })\n  );\n\n  return { target, col };\n}\n\n/** headResizeMove\n * @param el Target element\n * @param col Column index\n * @param startW Starting width\n * @param downX Down X coordinate\n * @param e Pointer event\n * @param nileGrid NileGrid instance\n * @returns void\n */\nexport function headResizeMove(\n  el: HTMLElement,\n  col: number,\n  startW: number,\n  downX: number,\n  e: PointerEvent,\n  nileGrid: NileGrid\n) {\n  const widthPx = Math.max(nileGrid.minColumnWidth, Math.round(startW + (e.clientX - downX)));\n  el.dispatchEvent(\n    new CustomEvent('nile-column-resize', {\n      detail: { col, widthPx },\n      bubbles: true,\n      composed: true,\n    })\n  );\n}\n\n/** headResizeDone\n * @param el Target element\n * @param ev Pointer event\n * @param target Target element\n * @param move Pointer move handler\n * @returns void\n */\nexport function headResizeDone(\n  el: HTMLElement,\n  ev: PointerEvent,\n  target: HTMLElement,\n  move: (e: PointerEvent) => void\n) {\n  target.releasePointerCapture(ev.pointerId);\n  target.removeEventListener('pointermove', move);\n\n  el.dispatchEvent(\n    new CustomEvent('nile-resize-end', { bubbles: true, composed: true })\n  );\n}\n"]}
+{"version":3,"file":"nile-grid-head-item.utils.js","sourceRoot":"","sources":["../../../../src/nile-grid/nile-grid-head-item/nile-grid-head-item.utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { NileGrid } from \"../nile-grid\";\n\n/** initHeadResize\n * @param el Target element\n * @param ev Pointer event\n * @param downXRef Reference to store downX value\n * @param startWRef Reference to store startW value\n * @returns Object containing target element and column index\n */\nexport function initHeadResize(\n  el: HTMLElement,\n  ev: PointerEvent,\n  downXRef: { value: number },\n  startWRef: { value: number }\n) {\n  ev.preventDefault();\n  ev.stopPropagation();\n\n  const cStart = Number(el.dataset.cStart);\n  if (!cStart) return null;\n\n  const span = Number(el.getAttribute('colspan')) || 1;\n  const col = Math.max(0, cStart + span - 1 - 1);\n\n  downXRef.value = ev.clientX;\n  startWRef.value = el.getBoundingClientRect().width;\n\n  const target = ev.currentTarget as HTMLElement;\n  target.setPointerCapture(ev.pointerId);\n\n  el.dispatchEvent(\n    new CustomEvent('nile-column-resize', {\n      detail: { col, widthPx: startWRef.value },\n      bubbles: true,\n      composed: true,\n    })\n  );\n\n  el.dispatchEvent(\n    new CustomEvent('nile-resize-start', { bubbles: true, composed: true })\n  );\n\n  return { target, col };\n}\n\n/** headResizeMove\n * @param el Target element\n * @param col Column index\n * @param startW Starting width\n * @param downX Down X coordinate\n * @param e Pointer event\n * @param nileGrid NileGrid instance\n * @returns void\n */\nexport function headResizeMove(\n  el: HTMLElement,\n  col: number,\n  startW: number,\n  downX: number,\n  e: PointerEvent,\n  nileGrid: NileGrid\n) {\n  const widthPx = Math.max(nileGrid.minColumnWidth, Math.round(startW + (e.clientX - downX)));\n  el.dispatchEvent(\n    new CustomEvent('nile-column-resize', {\n      detail: { col, widthPx },\n      bubbles: true,\n      composed: true,\n    })\n  );\n}\n\n/** headResizeDone\n * @param el Target element\n * @param ev Pointer event\n * @param target Target element\n * @param move Pointer move handler\n * @returns void\n */\nexport function headResizeDone(\n  el: HTMLElement,\n  col: number,\n  ev: PointerEvent,\n  target: HTMLElement,\n  move: (e: PointerEvent) => void\n) {\n  target.releasePointerCapture(ev.pointerId);\n  target.removeEventListener('pointermove', move);\n\n  el.dispatchEvent(\n    new CustomEvent('nile-resize-end', { bubbles: true, composed: true, detail: { col: col } })\n  );\n}\n\n/** addListeners\n * @param target Target element\n * @param move Pointer move handler\n * @param done Pointer up handler\n * @returns void\n */\nexport function addListeners(target: HTMLElement, move: (e: PointerEvent) => void, done: (e: PointerEvent) => void) {\n  target.addEventListener('pointermove', move);\n  target.addEventListener('pointerup', done);\n  target.addEventListener('pointercancel', done);\n\n  window.addEventListener('pointerup', done, { once: true });\n}\n\n/** removeListeners\n * @param target Target element\n * @param move Pointer move handler\n * @param done Pointer up handler\n * @returns void\n */\nexport function removeListeners(target: HTMLElement, move: (e: PointerEvent) => void, done: (e: PointerEvent) => void) {\n  target.removeEventListener('pointermove', move);\n  target.removeEventListener('pointerup', done);\n  target.removeEventListener('pointercancel', done);\n\n  window.removeEventListener('pointerup', done);\n}"]}

package/dist/src/nile-grid/nile-grid.css.js

@@ -21,6 +21,7 @@ export const styles = css `
     width: 100%;
     min-width: var(--min-width);
     box-shadow: var(--nile-box-shadow-3, var(--ng-shadow-xs));
+    overscroll-behavior: none;
   }
 
   ::slotted(nile-grid-head),

package/dist/src/nile-grid/nile-grid.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-grid.css.js","sourceRoot":"","sources":["../../../src/nile-grid/nile-grid.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    --min-width: 180px;\n    display: grid;\n    grid-template-rows: auto;\n    overflow: auto;\n    inline-size: 100%;\n    position: relative;\n    box-sizing: border-box;\n    border: 1px solid var(--nile-colors-neutral-400, , var(--ng-colors-border-secondary));\n    border-radius: var(--nile-radius-md, var(--ng-radius-xl));\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    max-height: 100%;\n    width: 100%;\n    min-width: var(--min-width);\n    box-shadow: var(--nile-box-shadow-3, var(--ng-shadow-xs));\n  }\n\n  ::slotted(nile-grid-head),\n  ::slotted(nile-grid-body) {\n    inline-size: 100%;\n  }\n\n  .nile-resize-start,\n  .nile-resize-end {\n    position: absolute;\n    z-index: 4;\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    width: 2px;\n    height: 100%;\n    top: 0;\n    display: none;\n    bottom: 0;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-grid.css.js","sourceRoot":"","sources":["../../../src/nile-grid/nile-grid.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    --min-width: 180px;\n    display: grid;\n    grid-template-rows: auto;\n    overflow: auto;\n    inline-size: 100%;\n    position: relative;\n    box-sizing: border-box;\n    border: 1px solid var(--nile-colors-neutral-400, , var(--ng-colors-border-secondary));\n    border-radius: var(--nile-radius-md, var(--ng-radius-xl));\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    max-height: 100%;\n    width: 100%;\n    min-width: var(--min-width);\n    box-shadow: var(--nile-box-shadow-3, var(--ng-shadow-xs));\n    overscroll-behavior: none;\n  }\n\n  ::slotted(nile-grid-head),\n  ::slotted(nile-grid-body) {\n    inline-size: 100%;\n  }\n\n  .nile-resize-start,\n  .nile-resize-end {\n    position: absolute;\n    z-index: 4;\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    width: 2px;\n    height: 100%;\n    top: 0;\n    display: none;\n    bottom: 0;\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -6,6 +6,7 @@
  */
 import { CSSResultArray, TemplateResult } from 'lit';
 import NileElement from '../internal/nile-element';
+import { PrefixColumn } from './types/nile-grid.types';
 /**
  * Nile grid component.
  *
@@ -18,8 +19,6 @@ export declare class NileGrid extends NileElement {
      * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
      */
     static get styles(): CSSResultArray;
-    /** To set the grid template columns in rebuildTemplate method */
-    colTemplate: string;
     /** To store the column widths in the beginning and after resizing */
     columnWidths: number[];
     /** To get the slot element */
@@ -28,8 +27,12 @@ export declare class NileGrid extends NileElement {
     resizeStart: HTMLElement;
     /** To get the last resize line to show the resize handle */
     resizeEnd: HTMLElement;
+    /** To get the last resize line to show the resize handle */
+    shadowLeft: HTMLElement;
+    /** To get the last resize line to show the resize handle */
+    shadowRight: HTMLElement;
     /** To enable horizontal scrolling when user is resizing */
-    enableResizeScroll: boolean;
+    enableScroll: boolean;
     /** To enable hoverable rows */
     hoverable: boolean;
     /** To store the mutation observer */
@@ -52,6 +55,31 @@ export declare class NileGrid extends NileElement {
     widthsInitialized: boolean;
     /** To check if the widths are initialized */
     lockedWidthColumns: boolean[];
+    /** prefix columns width */
+    prefixSumColumnsWidth: PrefixColumn[];
+    /** prefix columns width */
+    stickyColumns: number[];
+    /** body rows */
+    bodyRows: HTMLElement[];
+    /** head rows */
+    headRows: HTMLElement[];
+    needsStructureLayout: boolean;
+    needsWidthLayout: boolean;
+    needsSpanLayout: boolean;
+    colCount: number;
+    shadowLeftVisibleSticky?: boolean;
+    shadowRightVisibleSticky?: boolean;
+    stickyLeftHeadEls: HTMLElement[];
+    stickyRightHeadEls: HTMLElement[];
+    stickyLeftBodyEls: HTMLElement[];
+    stickyRightBodyEls: HTMLElement[];
+    private resizeTimer;
+    /** To throttle sticky shadow updates */
+    private shadowRaf;
+    resizeBaseColumnWidths: number[];
+    constructor();
+    connectedCallback(): void;
+    private syncStickyShadowsRaf;
     private scheduleLayout;
     private ensureWidths;
     private onResize;

package/dist/src/nile-grid/nile-grid.js

@@ -9,9 +9,9 @@ import { html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { styles } from './nile-grid.css';
 import NileElement from '../internal/nile-element';
-import { rebuildTemplate, syncStickyShadows, layout } from './nile-grid.layout';
-import { listenToEventListeners, removeEventListeners, getHead, getBody } from './nile-grid.utils';
-import { computeNewWidth, resizeWithScroll, applyAfterResize, resizeNoScroll } from './nile-grid.resize';
+import { syncStickyShadows, layout } from './nile-grid.layout';
+import { listenToEventListeners, removeEventListeners, getHead, getBody, copyArrayValuesInPlace } from './nile-grid.utils';
+import { computeNewWidth, resizeWithScroll, resizeNoScroll, updateResizeGuides } from './nile-grid.resize';
 /**
  * Nile grid component.
  *
@@ -19,14 +19,19 @@ import { computeNewWidth, resizeWithScroll, applyAfterResize, resizeNoScroll } f
  *
  */
 let NileGrid = class NileGrid extends NileElement {
+    /**
+     * The styles for nile-grid
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles() {
+        return [styles];
+    }
     constructor() {
-        super(...arguments);
-        /** To set the grid template columns in rebuildTemplate method */
-        this.colTemplate = '';
+        super();
         /** To store the column widths in the beginning and after resizing */
         this.columnWidths = [];
         /** To enable horizontal scrolling when user is resizing */
-        this.enableResizeScroll = false;
+        this.enableScroll = false;
         /** To enable hoverable rows */
         this.hoverable = false;
         /** To store the request animation frame */
@@ -44,6 +49,34 @@ let NileGrid = class NileGrid extends NileElement {
         this.widthsInitialized = false;
         /** To check if the widths are initialized */
         this.lockedWidthColumns = [];
+        /** prefix columns width */
+        this.prefixSumColumnsWidth = [];
+        /** prefix columns width */
+        this.stickyColumns = [];
+        /** body rows */
+        this.bodyRows = [];
+        /** head rows */
+        this.headRows = [];
+        this.needsStructureLayout = false;
+        this.needsWidthLayout = false;
+        this.needsSpanLayout = false;
+        this.colCount = 0;
+        this.stickyLeftHeadEls = [];
+        this.stickyRightHeadEls = [];
+        this.stickyLeftBodyEls = [];
+        this.stickyRightBodyEls = [];
+        this.resizeTimer = 0;
+        /** To throttle sticky shadow updates */
+        this.shadowRaf = 0;
+        this.resizeBaseColumnWidths = [];
+        this.syncStickyShadowsRaf = () => {
+            if (this.shadowRaf)
+                return;
+            this.shadowRaf = requestAnimationFrame(() => {
+                this.shadowRaf = 0;
+                syncStickyShadows(this);
+            });
+        };
         this.onResize = (e) => {
             e.stopPropagation();
             this.emit('nile-resize', {
@@ -51,6 +84,9 @@ let NileGrid = class NileGrid extends NileElement {
                 columnWidth: e.detail.widthPx,
             });
             const { col, widthPx } = e.detail;
+            if (!this.resizeBaseColumnWidths)
+                return;
+            copyArrayValuesInPlace(this.columnWidths, this.resizeBaseColumnWidths);
             const { prevW, newW, delta0 } = computeNewWidth({
                 target: e.target,
                 col,
@@ -59,81 +95,95 @@ let NileGrid = class NileGrid extends NileElement {
                 columnWidths: this.columnWidths,
             });
             if (delta0 === 0) {
-                applyAfterResize(this, col);
+                updateResizeGuides(this, col);
                 return;
             }
-            if (!this.enableResizeScroll) {
+            if (!this.enableScroll) {
                 resizeNoScroll({ grid: this, col, prevW, newW, floor: this.minColumnWidth });
             }
             else {
                 resizeWithScroll({ grid: this, col, newW });
             }
-            applyAfterResize(this, col);
+            updateResizeGuides(this, col);
         };
-        /* #endregion */
     }
-    /**
-     * The styles for nile-grid
-     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
-     */
-    static get styles() {
-        return [styles];
+    connectedCallback() {
+        super.connectedCallback();
+        this.emit('nile-init');
     }
     scheduleLayout() {
         if (this.raf)
             cancelAnimationFrame(this.raf);
         this.raf = requestAnimationFrame(() => {
             this.raf = 0;
-            layout(this, this.slotEl, this.ensureWidths.bind(this), rebuildTemplate, this.stickyLeftIndexes, this.stickyRightIndexes);
+            layout(this, this.slotEl, this.ensureWidths.bind(this), this.stickyLeftIndexes, this.stickyRightIndexes);
             syncStickyShadows(this);
         });
     }
     ensureWidths(colCount) {
         if (this.columnWidths.length !== colCount) {
-            this.columnWidths = Array(colCount).fill('');
+            this.columnWidths = Array(colCount).fill(0);
             this.lockedWidthColumns = Array(colCount).fill(false);
         }
     }
     firstUpdated() {
         this.setAttribute('role', 'table');
         listenToEventListeners(this, this.onResize, this.slotEl, this._attachObserverAndLayout.bind(this));
-        this.addEventListener('scroll', () => syncStickyShadows(this));
+        this.addEventListener('scroll', this.syncStickyShadowsRaf);
         this.resizeObserverStickyShadows = new ResizeObserver(() => syncStickyShadows(this));
         this.resizeObserverStickyShadows.observe(this);
-        syncStickyShadows(this);
+        this.syncStickyShadowsRaf();
     }
     _attachObserverAndLayout() {
         this.mo?.disconnect();
         this.mo = new MutationObserver(() => {
+            this.needsStructureLayout = true;
+            this.needsWidthLayout = true;
+            this.needsSpanLayout = true;
             this.scheduleLayout();
         });
         this.resizeObserver?.disconnect();
         this.resizeObserver = new ResizeObserver(() => {
-            layout(this, this.slotEl, this.ensureWidths.bind(this), rebuildTemplate, this.stickyLeftIndexes, this.stickyRightIndexes);
+            if (this.resizeTimer)
+                clearTimeout(this.resizeTimer);
+            this.resizeTimer = setTimeout(() => {
+                this.resizeTimer = 0;
+                this.needsWidthLayout = true;
+                this.scheduleLayout();
+            }, 16);
         });
         const head = getHead(this.slotEl);
         const body = getBody(this.slotEl);
         if (!head && !body)
             return;
-        const target = body ?? this;
+        const target = head ?? this;
         this.mo.observe(target, {
-            subtree: true,
             childList: true,
+            subtree: true,
             attributes: true,
-            attributeFilter: ['colspan', 'rowspan'],
+            attributeFilter: ['colspan', 'rowspan', 'width', 'lockwidth', 'sticky']
         });
         this.resizeObserver?.observe(this);
+        if (!this.colCount || !this.columnWidths?.length) {
+            this.needsStructureLayout = true;
+            this.needsSpanLayout = true;
+            this.needsWidthLayout = true;
+            this.scheduleLayout();
+        }
     }
     render() {
         return html `
       <div part="grid-base" class="nile-grid-base">
-        <slot part="grid-slot"></slot>
+        <div part="grid-slot-wrapper">
+          <slot part="grid-slot"></slot>
+        </div>
         <div part="resize-start" class="nile-resize-start"></div>
         <div part="resize-end" class="nile-resize-end"></div>
       </div>
     `;
     }
     disconnectedCallback() {
+        this.emit('nile-destroy');
         super.disconnectedCallback?.();
         this.mo?.disconnect();
         this.resizeObserver?.disconnect();
@@ -143,9 +193,6 @@ let NileGrid = class NileGrid extends NileElement {
         removeEventListeners(this, this.onResize, this.slotEl, this._attachObserverAndLayout.bind(this));
     }
 };
-__decorate([
-    state()
-], NileGrid.prototype, "colTemplate", void 0);
 __decorate([
     state()
 ], NileGrid.prototype, "columnWidths", void 0);
@@ -158,9 +205,15 @@ __decorate([
 __decorate([
     query('.nile-resize-end')
 ], NileGrid.prototype, "resizeEnd", void 0);
+__decorate([
+    query('.shadow-left')
+], NileGrid.prototype, "shadowLeft", void 0);
+__decorate([
+    query('.shadow-right')
+], NileGrid.prototype, "shadowRight", void 0);
 __decorate([
     property({ type: Boolean, attribute: true, reflect: true })
-], NileGrid.prototype, "enableResizeScroll", void 0);
+], NileGrid.prototype, "enableScroll", void 0);
 __decorate([
     property({ type: Boolean, attribute: true, reflect: true })
 ], NileGrid.prototype, "hoverable", void 0);
@@ -185,6 +238,30 @@ __decorate([
 __decorate([
     state()
 ], NileGrid.prototype, "lockedWidthColumns", void 0);
+__decorate([
+    state()
+], NileGrid.prototype, "prefixSumColumnsWidth", void 0);
+__decorate([
+    state()
+], NileGrid.prototype, "stickyColumns", void 0);
+__decorate([
+    state()
+], NileGrid.prototype, "bodyRows", void 0);
+__decorate([
+    state()
+], NileGrid.prototype, "headRows", void 0);
+__decorate([
+    state()
+], NileGrid.prototype, "needsStructureLayout", void 0);
+__decorate([
+    state()
+], NileGrid.prototype, "needsWidthLayout", void 0);
+__decorate([
+    state()
+], NileGrid.prototype, "needsSpanLayout", void 0);
+__decorate([
+    state()
+], NileGrid.prototype, "colCount", void 0);
 NileGrid = __decorate([
     customElement('nile-grid')
 ], NileGrid);

package/dist/src/nile-grid/nile-grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-grid.js","sourceRoot":"","sources":["../../../src/nile-grid/nile-grid.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { styles } from './nile-grid.css';\nimport NileElement from '../internal/nile-element';\nimport { rebuildTemplate, syncStickyShadows, layout } from './nile-grid.layout';\nimport { listenToEventListeners, removeEventListeners, getHead, getBody } from './nile-grid.utils';\nimport { computeNewWidth, resizeWithScroll, applyAfterResize, resizeNoScroll } from './nile-grid.resize';\n\n/**\n * Nile grid component.\n *\n * @tag nile-grid\n *\n */\n@customElement('nile-grid')\nexport class NileGrid extends NileElement {\n  /**\n   * The styles for nile-grid\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  /** To set the grid template columns in rebuildTemplate method */\n  @state() public colTemplate = '';\n\n  /** To store the column widths in the beginning and after resizing */\n  @state() public columnWidths: number[] = [];\n\n  /** To get the slot element */\n  @query('slot') public slotEl!: HTMLSlotElement;\n\n  /** To get the first resize line to show the resize handle */\n  @query('.nile-resize-start') resizeStart: HTMLElement;\n\n  /** To get the last resize line to show the resize handle */\n  @query('.nile-resize-end') resizeEnd: HTMLElement;\n\n  /** To enable horizontal scrolling when user is resizing */\n  @property({ type: Boolean, attribute: true, reflect: true }) enableResizeScroll: boolean = false;\n\n  /** To enable hoverable rows */\n  @property({ type: Boolean, attribute: true, reflect: true }) hoverable: boolean = false;\n\n  /** To store the mutation observer */\n  private mo?: MutationObserver;\n\n  /** To store the resize observer */\n  private resizeObserver?: ResizeObserver;\n\n  private resizeObserverStickyShadows?: ResizeObserver;\n\n  /** To store the request animation frame */\n  private raf = 0;\n\n  /** Minimum column width */\n  @property({ type: Number, reflect: true, attribute: true }) minColumnWidth = 40;\n\n  /** To store the sticky index's */\n  @state() public stickyLeftIndexes: number[] = [];\n\n  /** To store the sticky index's */\n  @state() public stickyRightIndexes: number[] = [];\n\n  /** To calculate the rowspan height */\n  @state() public cellHeight: number | null = null;\n\n  @state() public headHeight: number | null = null;\n\n  /** To check if the widths are initialized */\n  @state() public widthsInitialized = false;\n\n  /** To check if the widths are initialized */\n  @state() public lockedWidthColumns: boolean[] = [];\n\n  private scheduleLayout() {\n    if (this.raf) cancelAnimationFrame(this.raf);\n    this.raf = requestAnimationFrame(() => {\n      this.raf = 0;\n      layout(\n        this,\n        this.slotEl,\n        this.ensureWidths.bind(this),\n        rebuildTemplate,\n        this.stickyLeftIndexes,\n        this.stickyRightIndexes\n      );\n      syncStickyShadows(this);\n    });\n  }\n\n  private ensureWidths(colCount: number) {\n    if (this.columnWidths.length !== colCount) {\n      this.columnWidths = Array(colCount).fill('');\n      this.lockedWidthColumns = Array(colCount).fill(false);\n    }\n  }\n\n  private onResize = (e: Event) => {\n    e.stopPropagation();\n    this.emit('nile-resize', {\n      columnNumber: (e as CustomEvent).detail.col,\n      columnWidth: (e as CustomEvent).detail.widthPx,\n    });\n    const { col, widthPx } = (e as CustomEvent).detail as {\n      col: number;\n      widthPx: number;\n    };\n    const { prevW, newW, delta0 } = computeNewWidth({\n      target: e.target as HTMLElement,\n      col,\n      widthPx,\n      floor: this.minColumnWidth,\n      columnWidths: this.columnWidths,\n    });\n\n    if (delta0 === 0) {\n      applyAfterResize(this, col);\n      return;\n    }\n\n    if (!this.enableResizeScroll) {\n      resizeNoScroll({ grid: this, col, prevW, newW, floor: this.minColumnWidth });\n    } else {\n      resizeWithScroll({ grid: this, col, newW });\n    }\n    applyAfterResize(this, col);\n  };\n\n  protected firstUpdated() {\n    this.setAttribute('role', 'table');\n    listenToEventListeners(\n      this,\n      this.onResize,\n      this.slotEl,\n      this._attachObserverAndLayout.bind(this)\n    );\n    this.addEventListener('scroll', () => syncStickyShadows(this));\n    this.resizeObserverStickyShadows = new ResizeObserver(() => syncStickyShadows(this));\n    this.resizeObserverStickyShadows.observe(this);\n    syncStickyShadows(this);\n  }\n\n  private _attachObserverAndLayout() {\n    this.mo?.disconnect();\n    this.mo = new MutationObserver(() => {\n      this.scheduleLayout();\n    });\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = new ResizeObserver(() => {\n      layout(\n        this,\n        this.slotEl,\n        this.ensureWidths.bind(this),\n        rebuildTemplate,\n        this.stickyLeftIndexes,\n        this.stickyRightIndexes\n      );\n    });\n\n    const head = getHead(this.slotEl);\n    const body = getBody(this.slotEl);\n    if (!head && !body) return;\n\n    const target = body ?? this;\n    this.mo.observe(target, {\n      subtree: true,\n      childList: true,\n      attributes: true,\n      attributeFilter: ['colspan', 'rowspan'],\n    });\n    this.resizeObserver?.observe(this);\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div part=\"grid-base\" class=\"nile-grid-base\">\n        <slot part=\"grid-slot\"></slot>\n        <div part=\"resize-start\" class=\"nile-resize-start\"></div>\n        <div part=\"resize-end\" class=\"nile-resize-end\"></div>\n      </div>\n    `;\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback?.();\n    this.mo?.disconnect();\n    this.resizeObserver?.disconnect();\n    this.resizeObserverStickyShadows?.disconnect();\n\n    if (this.raf) cancelAnimationFrame(this.raf);\n    removeEventListeners(\n      this,\n      this.onResize,\n      this.slotEl,\n      this._attachObserverAndLayout.bind(this)\n    );\n  }\n\n  /* #endregion */\n}\n\nexport default NileGrid;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-grid': NileGrid;\n  }\n}\n"]}
+{"version":3,"file":"nile-grid.js","sourceRoot":"","sources":["../../../src/nile-grid/nile-grid.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,OAAO,EAAE,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAC3H,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAG3G;;;;;GAKG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,WAAW;IACvC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAgGD;QACE,KAAK,EAAE,CAAC;QA/FV,qEAAqE;QACrD,iBAAY,GAAa,EAAE,CAAC;QAiB5C,2DAA2D;QACE,iBAAY,GAAY,KAAK,CAAC;QAE3F,+BAA+B;QAC8B,cAAS,GAAY,KAAK,CAAC;QAUxF,2CAA2C;QACnC,QAAG,GAAG,CAAC,CAAC;QAEhB,2BAA2B;QACiC,mBAAc,GAAG,EAAE,CAAC;QAEhF,kCAAkC;QAClB,sBAAiB,GAAa,EAAE,CAAC;QAEjD,kCAAkC;QAClB,uBAAkB,GAAa,EAAE,CAAC;QAElD,sCAAsC;QACtB,eAAU,GAAkB,IAAI,CAAC;QAEjC,eAAU,GAAkB,IAAI,CAAC;QAEjD,6CAA6C;QAC7B,sBAAiB,GAAG,KAAK,CAAC;QAE1C,6CAA6C;QAC7B,uBAAkB,GAAc,EAAE,CAAC;QAEnD,2BAA2B;QACX,0BAAqB,GAAmB,EAAE,CAAC;QAE3D,2BAA2B;QACX,kBAAa,GAAa,EAAE,CAAC;QAE7C,gBAAgB;QACA,aAAQ,GAAkB,EAAE,CAAC;QAE7C,gBAAgB;QACA,aAAQ,GAAkB,EAAE,CAAC;QAE7B,yBAAoB,GAAG,KAAK,CAAC;QAE7B,qBAAgB,GAAG,KAAK,CAAC;QAEzB,oBAAe,GAAG,KAAK,CAAC;QAExB,aAAQ,GAAG,CAAC,CAAC;QAMtB,sBAAiB,GAAkB,EAAE,CAAC;QAEtC,uBAAkB,GAAkB,EAAE,CAAC;QAEvC,sBAAiB,GAAkB,EAAE,CAAC;QAEtC,uBAAkB,GAAkB,EAAE,CAAC;QAEtC,gBAAW,GAAQ,CAAC,CAAC;QAE7B,wCAAwC;QAChC,cAAS,GAAG,CAAC,CAAC;QAEf,2BAAsB,GAAa,EAAE,CAAC;QAWrC,yBAAoB,GAAG,GAAG,EAAE;YAClC,IAAI,IAAI,CAAC,SAAS;gBAAE,OAAO;YAC3B,IAAI,CAAC,SAAS,GAAG,qBAAqB,CAAC,GAAG,EAAE;gBAC1C,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;gBACnB,iBAAiB,CAAC,IAAI,CAAC,CAAC;YAC1B,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAyBM,aAAQ,GAAG,CAAC,CAAQ,EAAE,EAAE;YAC9B,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;gBACvB,YAAY,EAAG,CAAiB,CAAC,MAAM,CAAC,GAAG;gBAC3C,WAAW,EAAG,CAAiB,CAAC,MAAM,CAAC,OAAO;aAC/C,CAAC,CAAC;YACH,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,GAAI,CAAiB,CAAC,MAG3C,CAAC;YACF,IAAI,CAAC,IAAI,CAAC,sBAAsB;gBAAE,OAAO;YAEzC,sBAAsB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAC;YACvE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,eAAe,CAAC;gBAC9C,MAAM,EAAE,CAAC,CAAC,MAAqB;gBAC/B,GAAG;gBACH,OAAO;gBACP,KAAK,EAAE,IAAI,CAAC,cAAc;gBAC1B,YAAY,EAAE,IAAI,CAAC,YAAY;aAChC,CAAC,CAAC;YAEH,IAAI,MAAM,KAAK,CAAC,EAAE,CAAC;gBACjB,kBAAkB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;gBAC9B,OAAO;YACT,CAAC;YAED,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;gBACvB,cAAc,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;YAC/E,CAAC;iBAAM,CAAC;gBACN,gBAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC;YAC9C,CAAC;YACD,kBAAkB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;QAChC,CAAC,CAAC;IAtEF,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACzB,CAAC;IAWO,cAAc;QACpB,IAAI,IAAI,CAAC,GAAG;YAAE,oBAAoB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC7C,IAAI,CAAC,GAAG,GAAG,qBAAqB,CAAC,GAAG,EAAE;YACpC,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC;YACb,MAAM,CACJ,IAAI,EACJ,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,EAC5B,IAAI,CAAC,iBAAiB,EACtB,IAAI,CAAC,kBAAkB,CACxB,CAAC;YACF,iBAAiB,CAAC,IAAI,CAAC,CAAC;QAC1B,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,YAAY,CAAC,QAAgB;QACnC,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,KAAK,QAAQ,EAAE,CAAC;YAC1C,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YAC5C,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACxD,CAAC;IACH,CAAC;IAoCS,YAAY;QACpB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QACnC,sBAAsB,CACpB,IAAI,EACJ,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,IAAI,CAAC,CACzC,CAAC;QACF,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;QAC3D,IAAI,CAAC,2BAA2B,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC;QACrF,IAAI,CAAC,2BAA2B,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAC/C,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAEO,wBAAwB;QAC9B,IAAI,CAAC,EAAE,EAAE,UAAU,EAAE,CAAC;QACtB,IAAI,CAAC,EAAE,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YAClC,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC;YACjC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;YAC7B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;YAC5B,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,cAAc,EAAE,UAAU,EAAE,CAAC;QAClC,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YAC5C,IAAI,IAAI,CAAC,WAAW;gBAAE,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACrD,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC,GAAG,EAAE;gBACjC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;gBACrB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;gBAC7B,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,CAAC,EAAE,EAAE,CAAC,CAAC;QACT,CAAC,CAAC,CAAC;QAEH,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAClC,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAElC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI;YAAE,OAAO;QAC3B,MAAM,MAAM,GAAG,IAAI,IAAI,IAAI,CAAC;QAC5B,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE;YACtB,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,CAAC;SACxE,CAAC,CAAC;QACH,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;QAEnC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,MAAM,EAAE,CAAC;YACjD,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC;YACjC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;YAC5B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;YAC7B,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;IACH,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;;;;;;;KAQV,CAAC;IACJ,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAC1B,KAAK,CAAC,oBAAoB,EAAE,EAAE,CAAC;QAC/B,IAAI,CAAC,EAAE,EAAE,UAAU,EAAE,CAAC;QACtB,IAAI,CAAC,cAAc,EAAE,UAAU,EAAE,CAAC;QAClC,IAAI,CAAC,2BAA2B,EAAE,UAAU,EAAE,CAAC;QAE/C,IAAI,IAAI,CAAC,GAAG;YAAE,oBAAoB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC7C,oBAAoB,CAClB,IAAI,EACJ,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,IAAI,CAAC,CACzC,CAAC;IACJ,CAAC;CAGF,CAAA;AAzPiB;IAAf,KAAK,EAAE;8CAAoC;AAGtB;IAArB,KAAK,CAAC,MAAM,CAAC;wCAAiC;AAGlB;IAA5B,KAAK,CAAC,oBAAoB,CAAC;6CAA0B;AAG3B;IAA1B,KAAK,CAAC,kBAAkB,CAAC;2CAAwB;AAG3B;IAAtB,KAAK,CAAC,cAAc,CAAC;4CAAyB;AAGvB;IAAvB,KAAK,CAAC,eAAe,CAAC;6CAA0B;AAGY;IAA5D,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAA+B;AAG9B;IAA5D,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAA4B;AAc5B;IAA3D,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;gDAAqB;AAGhE;IAAf,KAAK,EAAE;mDAAyC;AAGjC;IAAf,KAAK,EAAE;oDAA0C;AAGlC;IAAf,KAAK,EAAE;4CAAyC;AAEjC;IAAf,KAAK,EAAE;4CAAyC;AAGjC;IAAf,KAAK,EAAE;mDAAkC;AAG1B;IAAf,KAAK,EAAE;oDAA2C;AAGnC;IAAf,KAAK,EAAE;uDAAmD;AAG3C;IAAf,KAAK,EAAE;+CAAqC;AAG7B;IAAf,KAAK,EAAE;0CAAqC;AAG7B;IAAf,KAAK,EAAE;0CAAqC;AAE7B;IAAf,KAAK,EAAE;sDAAqC;AAE7B;IAAf,KAAK,EAAE;kDAAiC;AAEzB;IAAf,KAAK,EAAE;iDAAgC;AAExB;IAAf,KAAK,EAAE;0CAAqB;AAlFlB,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAmQpB;;AAED,eAAe,QAAQ,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { styles } from './nile-grid.css';\nimport NileElement from '../internal/nile-element';\nimport { syncStickyShadows, layout } from './nile-grid.layout';\nimport { listenToEventListeners, removeEventListeners, getHead, getBody, copyArrayValuesInPlace } from './nile-grid.utils';\nimport { computeNewWidth, resizeWithScroll, resizeNoScroll, updateResizeGuides } from './nile-grid.resize';\nimport { PrefixColumn } from './types/nile-grid.types';\n\n/**\n * Nile grid component.\n *\n * @tag nile-grid\n *\n */\n@customElement('nile-grid')\nexport class NileGrid extends NileElement {\n  /**\n   * The styles for nile-grid\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  /** To store the column widths in the beginning and after resizing */\n  @state() public columnWidths: number[] = [];\n\n  /** To get the slot element */\n  @query('slot') public slotEl!: HTMLSlotElement;\n\n  /** To get the first resize line to show the resize handle */\n  @query('.nile-resize-start') resizeStart: HTMLElement;\n\n  /** To get the last resize line to show the resize handle */\n  @query('.nile-resize-end') resizeEnd: HTMLElement;\n\n  /** To get the last resize line to show the resize handle */\n  @query('.shadow-left') shadowLeft: HTMLElement;\n\n  /** To get the last resize line to show the resize handle */\n  @query('.shadow-right') shadowRight: HTMLElement;\n\n  /** To enable horizontal scrolling when user is resizing */\n  @property({ type: Boolean, attribute: true, reflect: true }) enableScroll: boolean = false;\n\n  /** To enable hoverable rows */\n  @property({ type: Boolean, attribute: true, reflect: true }) hoverable: boolean = false;\n\n  /** To store the mutation observer */\n  private mo?: MutationObserver;\n\n  /** To store the resize observer */\n  private resizeObserver?: ResizeObserver;\n\n  private resizeObserverStickyShadows?: ResizeObserver;\n\n  /** To store the request animation frame */\n  private raf = 0;\n\n  /** Minimum column width */\n  @property({ type: Number, reflect: true, attribute: true }) minColumnWidth = 40;\n\n  /** To store the sticky index's */\n  @state() public stickyLeftIndexes: number[] = [];\n\n  /** To store the sticky index's */\n  @state() public stickyRightIndexes: number[] = [];\n\n  /** To calculate the rowspan height */\n  @state() public cellHeight: number | null = null;\n\n  @state() public headHeight: number | null = null;\n\n  /** To check if the widths are initialized */\n  @state() public widthsInitialized = false;\n\n  /** To check if the widths are initialized */\n  @state() public lockedWidthColumns: boolean[] = [];\n\n  /** prefix columns width */\n  @state() public prefixSumColumnsWidth: PrefixColumn[] = [];\n\n  /** prefix columns width */\n  @state() public stickyColumns: number[] = [];\n\n  /** body rows */\n  @state() public bodyRows: HTMLElement[] = [];\n\n  /** head rows */\n  @state() public headRows: HTMLElement[] = [];\n\n  @state() public needsStructureLayout = false;\n\n  @state() public needsWidthLayout = false;\n\n  @state() public needsSpanLayout = false;\n\n  @state() public colCount = 0;\n  \n  public shadowLeftVisibleSticky?: boolean;\n\n  public shadowRightVisibleSticky?: boolean;\n\n  public stickyLeftHeadEls: HTMLElement[] = [];\n\n  public stickyRightHeadEls: HTMLElement[] = [];\n\n  public stickyLeftBodyEls: HTMLElement[] = [];\n\n  public stickyRightBodyEls: HTMLElement[] = [];\n\n  private resizeTimer: any = 0;\n\n  /** To throttle sticky shadow updates */\n  private shadowRaf = 0;\n\n  public resizeBaseColumnWidths: number[] = [];\n\n  constructor() {\n    super();\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.emit('nile-init');\n  }\n\n  private syncStickyShadowsRaf = () => {\n    if (this.shadowRaf) return;\n    this.shadowRaf = requestAnimationFrame(() => {\n      this.shadowRaf = 0;\n      syncStickyShadows(this);\n    });\n  };\n\n\n  private scheduleLayout() {\n    if (this.raf) cancelAnimationFrame(this.raf);\n    this.raf = requestAnimationFrame(() => {\n      this.raf = 0;\n      layout(\n        this,\n        this.slotEl,\n        this.ensureWidths.bind(this),\n        this.stickyLeftIndexes,\n        this.stickyRightIndexes\n      );\n      syncStickyShadows(this);\n    });\n  }\n\n  private ensureWidths(colCount: number) {\n    if (this.columnWidths.length !== colCount) {\n      this.columnWidths = Array(colCount).fill(0);\n      this.lockedWidthColumns = Array(colCount).fill(false); \n    }\n  }\n\n  private onResize = (e: Event) => {\n    e.stopPropagation();\n    this.emit('nile-resize', {\n      columnNumber: (e as CustomEvent).detail.col,\n      columnWidth: (e as CustomEvent).detail.widthPx,\n    });\n    const { col, widthPx } = (e as CustomEvent).detail as {\n      col: number;\n      widthPx: number;\n    };\n    if (!this.resizeBaseColumnWidths) return;\n  \n    copyArrayValuesInPlace(this.columnWidths, this.resizeBaseColumnWidths);\n    const { prevW, newW, delta0 } = computeNewWidth({\n      target: e.target as HTMLElement,\n      col,\n      widthPx,\n      floor: this.minColumnWidth,\n      columnWidths: this.columnWidths,\n    });\n\n    if (delta0 === 0) {\n      updateResizeGuides(this, col);\n      return;\n    }\n\n    if (!this.enableScroll) {\n      resizeNoScroll({ grid: this, col, prevW, newW, floor: this.minColumnWidth });\n    } else {\n      resizeWithScroll({ grid: this, col, newW });\n    }\n    updateResizeGuides(this, col);\n  };\n\n  protected firstUpdated() {\n    this.setAttribute('role', 'table');\n    listenToEventListeners(\n      this,\n      this.onResize,\n      this.slotEl,\n      this._attachObserverAndLayout.bind(this)\n    );\n    this.addEventListener('scroll', this.syncStickyShadowsRaf);\n    this.resizeObserverStickyShadows = new ResizeObserver(() => syncStickyShadows(this));\n    this.resizeObserverStickyShadows.observe(this);\n    this.syncStickyShadowsRaf();\n  }\n\n  private _attachObserverAndLayout() {\n    this.mo?.disconnect();\n    this.mo = new MutationObserver(() => {\n      this.needsStructureLayout = true;\n      this.needsWidthLayout = true;\n      this.needsSpanLayout = true;\n      this.scheduleLayout();\n    });\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = new ResizeObserver(() => {\n      if (this.resizeTimer) clearTimeout(this.resizeTimer);\n      this.resizeTimer = setTimeout(() => {\n        this.resizeTimer = 0;\n        this.needsWidthLayout = true;\n        this.scheduleLayout();\n      }, 16);\n    });\n\n    const head = getHead(this.slotEl);\n    const body = getBody(this.slotEl);\n    \n    if (!head && !body) return;\n    const target = head ?? this;\n    this.mo.observe(target, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['colspan', 'rowspan', 'width', 'lockwidth', 'sticky']\n    });\n    this.resizeObserver?.observe(this);\n\n    if (!this.colCount || !this.columnWidths?.length) {\n      this.needsStructureLayout = true;\n      this.needsSpanLayout = true;\n      this.needsWidthLayout = true;\n      this.scheduleLayout();\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div part=\"grid-base\" class=\"nile-grid-base\">\n        <div part=\"grid-slot-wrapper\">\n          <slot part=\"grid-slot\"></slot>\n        </div>\n        <div part=\"resize-start\" class=\"nile-resize-start\"></div>\n        <div part=\"resize-end\" class=\"nile-resize-end\"></div>\n      </div>\n    `;\n  }\n\n  disconnectedCallback(): void {\n    this.emit('nile-destroy');\n    super.disconnectedCallback?.();\n    this.mo?.disconnect();\n    this.resizeObserver?.disconnect();\n    this.resizeObserverStickyShadows?.disconnect();\n\n    if (this.raf) cancelAnimationFrame(this.raf);\n    removeEventListeners(\n      this,\n      this.onResize,\n      this.slotEl,\n      this._attachObserverAndLayout.bind(this)\n    );\n  }\n\n  /* #endregion */\n}\n\nexport default NileGrid;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-grid': NileGrid;\n  }\n}\n"]}

package/dist/src/nile-grid/nile-grid.layout.d.ts

@@ -3,26 +3,19 @@ import { NileGrid } from './nile-grid';
  * @param nileGrid Parent NileGrid instance
  * @param slotEl <slot> element hosting head/body
  * @param ensureWidths Function to ensure columnWidths length matches colCount
- * @param rebuildTemplate Function(colCount, widths) -> grid-template string
  * @param stickyLeftIndexes Mutable list of left-sticky column indexes
  * @param stickyRightIndexes Mutable list of right-sticky column indexes
  * @returns void
  */
-export declare const layout: (nileGrid: NileGrid, slotEl: any, ensureWidths: any, rebuildTemplate: any, stickyLeftIndexes: number[], stickyRightIndexes: number[]) => void;
+export declare const layout: (nileGrid: NileGrid, slotEl: any, ensureWidths: any, stickyLeftIndexes: number[], stickyRightIndexes: number[]) => void;
+export declare function cacheStickyEls(nileGrid: NileGrid): void;
 /**
  * @param nileGrid Grid instance to sync shadows for
  */
 export declare function syncStickyShadows(nileGrid: NileGrid): void;
-/** rebuildTemplate
- * @param colCount Number of columns
- * @param columnWidths Array of explicit column widths (px)
- * @returns CSS grid-template-columns string
- */
-export declare const rebuildTemplate: (colCount: number, columnWidths: number[]) => string;
 /**
  * @param nileGrid Grid container element
  * @param colCount Total number of columns
  * @param columnWidths Column width array
- * @param headElement Header element for template update
  */
 export declare function applyColumnsTemplate(nileGrid: NileGrid, columnWidths: number[]): void;