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

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

@@ -9,7 +9,7 @@ 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 { listenToEventListeners, removeEventListeners, getHead, getBody, rebuildTemplate, layout, computeNewWidth, resizeNoScroll, resizeWithScroll, applyAfterResize, syncStickyShadows, } from './nile-grid.utils';
+import { resizeLinesHandler, listenToEventListeners, removeEventListeners, getHead, getBody, rebuildTemplate, applyTemplate, layout, } from './nile-grid.utils';
 /**
  * Nile grid component.
  *
@@ -19,51 +19,29 @@ import { listenToEventListeners, removeEventListeners, getHead, getBody, rebuild
 let NileGrid = class NileGrid extends NileElement {
     constructor() {
         super(...arguments);
+        /** User can pass custom widths for the columns */
+        this.customWidths = [];
         /** To set the grid template columns in rebuildTemplate method */
         this.colTemplate = '';
         /** To store the column widths in the beginning and after resizing */
-        this.columnWidths = [];
-        /** To enable horizontal scrolling when user is resizing */
-        this.enableResizeScroll = false;
-        /** To enable hoverable rows */
-        this.hoverable = false;
+        this.columnWidths = [...this.customWidths];
         /** To store the request animation frame */
         this.raf = 0;
-        /** Minimum column width */
-        this.minColumnWidth = 40;
-        /** To store the sticky index's */
-        this.stickyLeftIndexes = [];
-        /** To store the sticky index's */
-        this.stickyRightIndexes = [];
-        /** To calculate the rowspan height */
-        this.cellHeight = null;
-        /** To check if the widths are initialized */
-        this.widthsInitialized = false;
         this.onResize = (e) => {
-            e.stopPropagation();
-            this.emit('nile-resize', {
-                columnNumber: e.detail.col,
-                columnWidth: e.detail.widthPx,
-            });
             const { col, widthPx } = e.detail;
-            const { prevW, newW, delta0 } = computeNewWidth({
-                target: e.target,
-                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;
+            const floor = 60;
+            if (e.target.getAttribute('colspan') &&
+                parseInt(e.target.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);
         };
         /* #endregion */
     }
@@ -79,8 +57,7 @@ let NileGrid = class NileGrid extends NileElement {
             cancelAnimationFrame(this.raf);
         this.raf = requestAnimationFrame(() => {
             this.raf = 0;
-            layout(this, this.slotEl, this.ensureWidths.bind(this), rebuildTemplate, this.stickyLeftIndexes, this.stickyRightIndexes);
-            syncStickyShadows(this);
+            layout(this, this.slotEl, this.ensureWidths.bind(this), rebuildTemplate, applyTemplate, this.columnWidths);
         });
     }
     ensureWidths(colCount) {
@@ -91,20 +68,12 @@ let NileGrid = class NileGrid extends NileElement {
     firstUpdated() {
         this.setAttribute('role', 'table');
         listenToEventListeners(this, this.onResize, this.slotEl, this._attachObserverAndLayout.bind(this));
-        this.addEventListener('scroll', () => syncStickyShadows(this));
-        this.resizeObserverStickyShadows = new ResizeObserver(() => syncStickyShadows(this));
-        this.resizeObserverStickyShadows.observe(this);
-        syncStickyShadows(this);
     }
     _attachObserverAndLayout() {
         this.mo?.disconnect();
         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);
         if (!head && !body)
@@ -116,27 +85,28 @@ let NileGrid = 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);
     }
     render() {
         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>
     `;
     }
     disconnectedCallback() {
         super.disconnectedCallback?.();
         this.mo?.disconnect();
-        this.resizeObserver?.disconnect();
-        this.resizeObserverStickyShadows?.disconnect();
         if (this.raf)
             cancelAnimationFrame(this.raf);
         removeEventListeners(this, this.onResize, this.slotEl, this._attachObserverAndLayout.bind(this));
     }
 };
+__decorate([
+    property({ type: Array, attribute: true })
+], NileGrid.prototype, "customWidths", void 0);
 __decorate([
     state()
 ], NileGrid.prototype, "colTemplate", void 0);
@@ -152,27 +122,6 @@ __decorate([
 __decorate([
     query('.nile-resize-end')
 ], NileGrid.prototype, "resizeEnd", void 0);
-__decorate([
-    property({ type: Boolean, attribute: true, reflect: true })
-], NileGrid.prototype, "enableResizeScroll", void 0);
-__decorate([
-    property({ type: Boolean, attribute: true, reflect: true })
-], NileGrid.prototype, "hoverable", void 0);
-__decorate([
-    property({ type: Number, reflect: true, attribute: true })
-], NileGrid.prototype, "minColumnWidth", void 0);
-__decorate([
-    state()
-], NileGrid.prototype, "stickyLeftIndexes", void 0);
-__decorate([
-    state()
-], NileGrid.prototype, "stickyRightIndexes", void 0);
-__decorate([
-    state()
-], NileGrid.prototype, "cellHeight", void 0);
-__decorate([
-    state()
-], NileGrid.prototype, "widthsInitialized", 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 {\n  listenToEventListeners,\n  removeEventListeners,\n  getHead,\n  getBody,\n  rebuildTemplate,\n  layout,\n  computeNewWidth,\n  resizeNoScroll,\n  resizeWithScroll,\n  applyAfterResize,\n  syncStickyShadows,\n} from './nile-grid.utils';\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  /** To check if the widths are initialized */\n  @state() public widthsInitialized = false;\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    }\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":"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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 { LitElement, 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 {\n  resizeLinesHandler,\n  listenToEventListeners,\n  removeEventListeners,\n  getHead,\n  getBody,\n  rebuildTemplate,\n  applyTemplate,\n  layout,\n} from './nile-grid.utils';\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  /** User can pass custom widths for the columns */\n  @property({ type: Array, attribute: true }) customWidths: number[] = [];\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() private columnWidths: number[] = [...this.customWidths];\n\n  /** To get the slot element */\n  @query('slot') private 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 store the mutation observer */\n  private mo?: MutationObserver;\n\n  /** To store the request animation frame */\n  private raf = 0;\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        applyTemplate,\n        this.columnWidths\n      );\n    });\n  }\n\n  private ensureWidths(colCount: number) {\n    if (this.columnWidths.length !== colCount) {\n      this.columnWidths = Array(colCount).fill('');\n    }\n  }\n\n  private onResize = (e: Event) => {\n    const { col, widthPx } = (e as CustomEvent).detail as {\n      col: number;\n      widthPx: number;\n    };\n    let w: any;\n    const floor = 60;\n\n    if (\n      (e.target as HTMLElement).getAttribute('colspan') &&\n      parseInt((e.target as HTMLElement).getAttribute('colspan')!) > 1\n    ) {\n      w = Math.max(floor, Math.round(widthPx - this.columnWidths[col - 1]));\n    } else {\n      w = Math.max(floor, Math.round(widthPx));\n    }\n    this.columnWidths[col] = w;\n    resizeLinesHandler(\n      this.resizeStart,\n      this.resizeEnd,\n      col,\n      widthPx,\n      this.scrollHeight,\n      this.columnWidths,\n      e\n    );\n    this.colTemplate = rebuildTemplate(\n      this.columnWidths.length,\n      this.columnWidths\n    );\n    applyTemplate(getHead(this.slotEl), getBody(this.slotEl), this.colTemplate);\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  }\n\n  private _attachObserverAndLayout() {\n    this.mo?.disconnect();\n    this.mo = new MutationObserver(() => {\n      this.scheduleLayout();\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    layout(\n      this,\n      this.slotEl,\n      this.ensureWidths.bind(this),\n      rebuildTemplate,\n      applyTemplate,\n      this.columnWidths\n    );\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div>\n        <slot></slot>\n        <div class=\"nile-resize-start\"></div>\n        <div class=\"nile-resize-end\"></div>\n      </div>\n    `;\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback?.();\n    this.mo?.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.utils.d.ts

@@ -1,122 +1,9 @@
 import { NileGrid } from './nile-grid';
-/** layout
- * @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;
-/** resizeLinesHandler
- * @param minColumnWidth Minimum allowed column width
- * @param resizeStart Guide line element (start)
- * @param resizeEnd Guide line element (end)
- * @param col Active column index
- * @param scrollHeight Height to apply to guides
- * @param columnWidths Current column widths
- * @returns void
- */
-export declare const resizeLinesHandler: (minColumnWidth: number, resizeStart: HTMLElement, resizeEnd: HTMLElement, col: number, scrollHeight: number, columnWidths: number[]) => void;
-/** listenToEventListeners
- * @param nileGrid Grid element to attach listeners on
- * @param onResize Handler for 'nile-column-resize'
- * @param slotEl Slot element to watch for 'slotchange'
- * @param _attachObserverAndLayout Callback to reattach observer + layout
- * @returns void
- */
+export declare const resizeLinesHandler: (resizeStart: any, resizeEnd: any, col: number, widthPx: number, scrollHeight: any, columnWidths: any, e: any) => void;
 export declare const listenToEventListeners: (nileGrid: NileGrid, onResize: any, slotEl: any, _attachObserverAndLayout: any) => void;
-/** removeEventListeners
- * @param nileGrid Grid element to detach listeners from
- * @param onResize Handler previously attached to 'nile-column-resize'
- * @param slotEl Slot element to remove 'slotchange' from
- * @param _attachObserverAndLayout Callback reference used during attach
- * @returns void
- */
 export declare const removeEventListeners: (nileGrid: NileGrid, onResize: any, slotEl: any, _attachObserverAndLayout: any) => void;
-/** getHead
- * @param slotEl Slot element containing assigned nodes
- * @returns <nile-grid-head> element or null
- */
 export declare const getHead: (slotEl: any) => HTMLElement;
-/** getBody
- * @param slotEl Slot element containing assigned nodes
- * @returns <nile-grid-body> element or null
- */
 export declare const getBody: (slotEl: any) => HTMLElement;
-/** 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;
-/**
- * @param targetWidth New computed width in pixels
- * @param min Minimum allowed width
- * @param max Maximum allowed width
- * @returns Adjusted column width
- */
-export declare function computeNewWidth(opts: {
-    target: HTMLElement;
-    col: number;
-    widthPx: number;
-    floor: number;
-    columnWidths: number[];
-}): {
-    prevW: number;
-    newW: number;
-    delta0: number;
-};
-/**
- * @param columnWidths Current widths array
- * @param containerWidth Container total width
- */
-export declare function resizeNoScroll(opts: {
-    grid: NileGrid;
-    col: number;
-    prevW: number;
-    newW: number;
-    floor: number;
-}): void;
-/**
- * @param columnWidths Current widths
- * @param containerWidth Container width
- */
-export declare function resizeWithScroll(opts: {
-    grid: NileGrid;
-    col: number;
-    newW: number;
-}): void;
-/**
- * @param columnWidths Current widths array
- * @param minCol Minimum column width
- * @returns Total reducible pixels
- */
-export declare function totalReducible(widths: number[], start: number, floor: number): number;
-/**
- * @param columnWidths Current widths
- * @param amount Pixels to remove from rightmost columns
- */
-export declare function takeFromRight(widths: number[], start: number, needInit: number, floor: number): number;
-/**
- * @param columnWidths Current widths
- * @param amount Pixels to add to rightmost columns
- */
-export declare function giveToRight(widths: number[], start: number, giveInit: number): number;
-/**
- * @param nileGrid The parent grid
- * @param columnWidths New column width array
- */
-export declare function applyAfterResize(grid: any, col: number): void;
-/**
- * @param nileGrid Grid instance to sync shadows for
- */
-export declare function syncStickyShadows(nileGrid: NileGrid): void;
+export declare const applyTemplate: (head: HTMLElement | null, body: HTMLElement | null, colTemplate: string) => void;
+export declare const layout: (nileGrid: NileGrid, slotEl: any, ensureWidths: any, rebuildTemplate: any, applyTemplate: any, columnWidths: any) => void;