@aquera/nile-elements 1.3.1-beta-1.0 → 1.3.1-beta-1

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

@@ -0,0 +1 @@
+{"version":3,"file":"event-handlers.js","sourceRoot":"","sources":["../../../src/nile-grid/event-handlers.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\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 type { GridColumnDef, GridRowData, GridOptions } from './types.js';\nimport type { GridDataProcessor } from './data-processor.js';\n\nexport class GridEventHandlers {\n  private options: GridOptions;\n  private dataProcessor: GridDataProcessor;\n  private selectedRows: GridRowData[] = [];\n  private isResizing: boolean = false;\n  private resizingColumn: GridColumnDef | null = null;\n  private dragStartX: number = 0;\n  private dragStartWidth: number = 0;\n\n  constructor(options: GridOptions, dataProcessor: GridDataProcessor) {\n    this.options = options;\n    this.dataProcessor = dataProcessor;\n  }\n\n  setOptions(options: GridOptions): void {\n    this.options = options;\n    this.dataProcessor.setOptions(options);\n  }\n\n  handleKeyDown(event: KeyboardEvent): void {\n    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n      event.preventDefault();\n      this.handleArrowKeyNavigation(event.key);\n    }\n  }\n\n  handleWheel(event: WheelEvent, updateVirtualScrolling: () => void): void {\n    if (this.options.enableVirtualScrolling) {\n      updateVirtualScrolling();\n    }\n  }\n\n  handleColumnSort(column: GridColumnDef, onSort: (field: string, direction: 'asc' | 'desc') => void): void {\n    if (!this.options.enableSorting) return;\n\n    const currentField = this.dataProcessor.getSortField();\n    const currentDirection = this.dataProcessor.getSortDirection();\n\n    let newDirection: 'asc' | 'desc';\n    if (currentField === column.field) {\n      newDirection = currentDirection === 'asc' ? 'desc' : 'asc';\n    } else {\n      newDirection = 'asc';\n    }\n\n    this.dataProcessor.setSortField(column.field);\n    this.dataProcessor.setSortDirection(newDirection);\n    \n    onSort(column.field, newDirection);\n  }\n\n  handleColumnFilter(column: GridColumnDef, value: string, onFilter: () => void): void {\n    if (!this.options.enableFiltering) return;\n\n    column.filterValue = value;\n    this.dataProcessor.setFilterText(value);\n    this.dataProcessor.setCurrentPage(1);\n    \n    onFilter();\n  }\n\n  handleRowSelection(row: GridRowData, event: Event, currentData: GridRowData[], onSelectionChange: () => void): void {\n    if (!this.options.enableRowSelection) return;\n\n    const checkbox = event.target as HTMLInputElement;\n    \n    if (this.options.enableMultiRowSelection) {\n      if (checkbox.checked) {\n        if (!this.selectedRows.find(r => r.id === row.id)) {\n          this.selectedRows.push(row);\n          row.selected = true;\n        }\n      } else {\n        const index = this.selectedRows.findIndex(r => r.id === row.id);\n        if (index > -1) {\n          this.selectedRows.splice(index, 1);\n          row.selected = false;\n        }\n      }\n    } else {\n      this.selectedRows = checkbox.checked ? [row] : [];\n      // Update all rows selection state\n      currentData.forEach(r => {\n        r.selected = r.id === row.id ? checkbox.checked : false;\n      });\n    }\n\n    onSelectionChange();\n  }\n\n  handleHeaderSelectionChange(event: Event, currentData: GridRowData[], onSelectionChange: () => void): void {\n    if (!this.options.enableRowSelection) return;\n\n    const checkbox = event.target as HTMLInputElement;\n    const isChecked = checkbox.checked;\n    \n    currentData.forEach(row => {\n      row.selected = isChecked;\n    });\n\n    if (isChecked) {\n      this.selectedRows = [...currentData];\n    } else {\n      this.selectedRows = [];\n    }\n\n    onSelectionChange();\n  }\n\n  handleRowClick(row: GridRowData, event: Event): void {\n    if (this.options.suppressRowClickSelection) return;\n\n    const target = event.target as HTMLElement;\n    if (target.tagName === 'INPUT' || target.closest('.checkbox-cell')) return;\n\n    // Emit row click event\n    this.emit('nile-grid-row-click', { row, event });\n  }\n\n  handleCellEdit(row: GridRowData, column: GridColumnDef, value: any, onCellEdit: (row: GridRowData, column: GridColumnDef, oldValue: any, newValue: any) => void): void {\n    if (!column.editable) return;\n\n    const oldValue = row[column.field];\n    row[column.field] = value;\n\n    onCellEdit(row, column, oldValue, value);\n  }\n\n  handleColumnResizeStart(column: GridColumnDef, event: MouseEvent): void {\n    if (!this.options.enableColumnResize) return;\n\n    this.isResizing = true;\n    this.resizingColumn = column;\n    this.dragStartX = event.clientX;\n    this.dragStartWidth = column.width || 150;\n\n    document.addEventListener('mousemove', this.handleColumnResizeMove.bind(this));\n    document.addEventListener('mouseup', this.handleColumnResizeEnd.bind(this));\n  }\n\n  private handleColumnResizeMove(event: MouseEvent): void {\n    if (!this.isResizing || !this.resizingColumn) return;\n\n    const deltaX = event.clientX - this.dragStartX;\n    const newWidth = Math.max(\n      this.resizingColumn.minWidth || 50,\n      Math.min(this.resizingColumn.maxWidth || 500, this.dragStartWidth + deltaX)\n    );\n\n    this.resizingColumn.width = newWidth;\n  }\n\n  private handleColumnResizeEnd(): void {\n    this.isResizing = false;\n    this.resizingColumn = null;\n    \n    document.removeEventListener('mousemove', this.handleColumnResizeMove.bind(this));\n    document.removeEventListener('mouseup', this.handleColumnResizeEnd.bind(this));\n  }\n\n  private handleArrowKeyNavigation(key: string): void {\n    // Emit keyboard navigation event\n    this.emit('nile-grid-key-navigation', { key });\n  }\n\n  private emit(eventName: string, detail: any): void {\n    // This will be implemented by the main component\n    // The main component will listen to these events and emit them\n  }\n\n  // Getters\n  getSelectedRows(): GridRowData[] {\n    return this.selectedRows;\n  }\n\n  isResizingColumn(): boolean {\n    return this.isResizing;\n  }\n\n  getResizingColumn(): GridColumnDef | null {\n    return this.resizingColumn;\n  }\n}\n"]}

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

@@ -0,0 +1,8 @@
+import { TemplateResult } from 'lit';
+import type { ColumnDef } from './types.js';
+export declare class GridRenderer {
+    static renderHeader(columnDefs: ColumnDef[], enableColResize: boolean, onResizeStart: (e: MouseEvent, col: ColumnDef, index: number) => void): TemplateResult;
+    static renderBody(rowData: any[], columnDefs: ColumnDef[], enableVirtualScroll: boolean, onVirtualizeRender: (row: any, rowIndex: number) => TemplateResult): TemplateResult;
+    static renderRowWithSpanning(row: any, rowIndex: number, columnDefs: ColumnDef[]): TemplateResult;
+    private static shouldShowResizeHandle;
+}

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

@@ -0,0 +1,78 @@
+import { html } from 'lit';
+import { getGridTemplateColumns, calculateColSpan } from './utils.js';
+export class GridRenderer {
+    static renderHeader(columnDefs, enableColResize, onResizeStart) {
+        return html `
+      <div class="grid-header" style="grid-template-columns: ${getGridTemplateColumns(columnDefs)};">
+        ${columnDefs.map((col, index) => html `
+          <div class="grid-header-cell">
+            <span>${col.headerName || col.field}</span>
+            ${this.shouldShowResizeHandle(col, enableColResize) ? html `
+              <div 
+                class="grid-resize-handle"
+                @mousedown=${(e) => onResizeStart(e, col, index)}
+                title="Drag to resize column"
+              ></div>
+            ` : ''}
+          </div>
+        `)}
+      </div>
+    `;
+    }
+    static renderBody(rowData, columnDefs, enableVirtualScroll, onVirtualizeRender) {
+        if (rowData.length === 0) {
+            return html `
+        <div class="grid-empty">
+          <div class="empty-text">No data available</div>
+        </div>
+      `;
+        }
+        if (enableVirtualScroll) {
+            return html `
+        <div class="grid-body">
+          ${onVirtualizeRender}
+        </div>
+      `;
+        }
+        return html `
+      <div class="grid-body">
+        ${rowData.map((row, rowIndex) => this.renderRowWithSpanning(row, rowIndex, columnDefs))}
+      </div>
+    `;
+    }
+    static renderRowWithSpanning(row, rowIndex, columnDefs) {
+        const cells = [];
+        let currentColIndex = 0;
+        for (let colIndex = 0; colIndex < columnDefs.length; colIndex++) {
+            const col = columnDefs[colIndex];
+            // Check if this column should be skipped due to previous spanning
+            if (currentColIndex > colIndex) {
+                continue;
+            }
+            // Calculate column span
+            const colSpan = calculateColSpan(col, row, rowIndex, colIndex);
+            if (colSpan > 0) {
+                const cellStyle = `grid-column: ${currentColIndex + 1} / span ${colSpan};`;
+                cells.push(html `
+          <div class="grid-cell" style="${cellStyle}">
+            <span>${row[col.field]}</span>
+          </div>
+        `);
+                currentColIndex += colSpan;
+            }
+        }
+        return html `
+      <div class="grid-row" style="grid-template-columns: ${getGridTemplateColumns(columnDefs)};">
+        ${cells}
+      </div>
+    `;
+    }
+    static shouldShowResizeHandle(col, enableColResize) {
+        if (!enableColResize)
+            return false;
+        if (col.resizable === false)
+            return false;
+        return true;
+    }
+}
+//# sourceMappingURL=renderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.js","sourceRoot":"","sources":["../../../src/nile-grid/renderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAE3C,OAAO,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEtE,MAAM,OAAO,YAAY;IACvB,MAAM,CAAC,YAAY,CAAC,UAAuB,EAAE,eAAwB,EAAE,aAAqE;QAC1I,OAAO,IAAI,CAAA;+DACgD,sBAAsB,CAAC,UAAU,CAAC;UACvF,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;oBAEzB,GAAG,CAAC,UAAU,IAAI,GAAG,CAAC,KAAK;cACjC,IAAI,CAAC,sBAAsB,CAAC,GAAG,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;;;6BAGzC,CAAC,CAAa,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC;;;aAG/D,CAAC,CAAC,CAAC,EAAE;;SAET,CAAC;;KAEL,CAAC;IACJ,CAAC;IAED,MAAM,CAAC,UAAU,CACf,OAAc,EACd,UAAuB,EACvB,mBAA4B,EAC5B,kBAAkE;QAElE,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACzB,OAAO,IAAI,CAAA;;;;OAIV,CAAC;QACJ,CAAC;QAED,IAAI,mBAAmB,EAAE,CAAC;YACxB,OAAO,IAAI,CAAA;;YAEL,kBAAkB;;OAEvB,CAAC;QACJ,CAAC;QAED,OAAO,IAAI,CAAA;;UAEL,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,GAAG,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC;;KAE1F,CAAC;IACJ,CAAC;IAED,MAAM,CAAC,qBAAqB,CAAC,GAAQ,EAAE,QAAgB,EAAE,UAAuB;QAC9E,MAAM,KAAK,GAAqB,EAAE,CAAC;QACnC,IAAI,eAAe,GAAG,CAAC,CAAC;QAExB,KAAK,IAAI,QAAQ,GAAG,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;YAChE,MAAM,GAAG,GAAG,UAAU,CAAC,QAAQ,CAAC,CAAC;YAEjC,kEAAkE;YAClE,IAAI,eAAe,GAAG,QAAQ,EAAE,CAAC;gBAC/B,SAAS;YACX,CAAC;YAED,wBAAwB;YACxB,MAAM,OAAO,GAAG,gBAAgB,CAAC,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;YAE/D,IAAI,OAAO,GAAG,CAAC,EAAE,CAAC;gBAChB,MAAM,SAAS,GAAG,gBAAgB,eAAe,GAAG,CAAC,WAAW,OAAO,GAAG,CAAC;gBAE3E,KAAK,CAAC,IAAI,CAAC,IAAI,CAAA;0CACmB,SAAS;oBAC/B,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC;;SAEzB,CAAC,CAAC;gBAEH,eAAe,IAAI,OAAO,CAAC;YAC7B,CAAC;QACH,CAAC;QAED,OAAO,IAAI,CAAA;4DAC6C,sBAAsB,CAAC,UAAU,CAAC;UACpF,KAAK;;KAEV,CAAC;IACJ,CAAC;IAEO,MAAM,CAAC,sBAAsB,CAAC,GAAc,EAAE,eAAwB;QAC5E,IAAI,CAAC,eAAe;YAAE,OAAO,KAAK,CAAC;QACnC,IAAI,GAAG,CAAC,SAAS,KAAK,KAAK;YAAE,OAAO,KAAK,CAAC;QAC1C,OAAO,IAAI,CAAC;IACd,CAAC;CACF","sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { ColumnDef } from './types.js';\nimport { getGridTemplateColumns, calculateColSpan } from './utils.js';\n\nexport class GridRenderer {\n  static renderHeader(columnDefs: ColumnDef[], enableColResize: boolean, onResizeStart: (e: MouseEvent, col: ColumnDef, index: number) => void): TemplateResult {\n    return html`\n      <div class=\"grid-header\" style=\"grid-template-columns: ${getGridTemplateColumns(columnDefs)};\">\n        ${columnDefs.map((col, index) => html`\n          <div class=\"grid-header-cell\">\n            <span>${col.headerName || col.field}</span>\n            ${this.shouldShowResizeHandle(col, enableColResize) ? html`\n              <div \n                class=\"grid-resize-handle\"\n                @mousedown=${(e: MouseEvent) => onResizeStart(e, col, index)}\n                title=\"Drag to resize column\"\n              ></div>\n            ` : ''}\n          </div>\n        `)}\n      </div>\n    `;\n  }\n\n  static renderBody(\n    rowData: any[], \n    columnDefs: ColumnDef[], \n    enableVirtualScroll: boolean,\n    onVirtualizeRender: (row: any, rowIndex: number) => TemplateResult\n  ): TemplateResult {\n    if (rowData.length === 0) {\n      return html`\n        <div class=\"grid-empty\">\n          <div class=\"empty-text\">No data available</div>\n        </div>\n      `;\n    }\n\n    if (enableVirtualScroll) {\n      return html`\n        <div class=\"grid-body\">\n          ${onVirtualizeRender}\n        </div>\n      `;\n    }\n\n    return html`\n      <div class=\"grid-body\">\n        ${rowData.map((row, rowIndex) => this.renderRowWithSpanning(row, rowIndex, columnDefs))}\n      </div>\n    `;\n  }\n\n  static renderRowWithSpanning(row: any, rowIndex: number, columnDefs: ColumnDef[]): TemplateResult {\n    const cells: TemplateResult[] = [];\n    let currentColIndex = 0;\n\n    for (let colIndex = 0; colIndex < columnDefs.length; colIndex++) {\n      const col = columnDefs[colIndex];\n      \n      // Check if this column should be skipped due to previous spanning\n      if (currentColIndex > colIndex) {\n        continue;\n      }\n\n      // Calculate column span\n      const colSpan = calculateColSpan(col, row, rowIndex, colIndex);\n      \n      if (colSpan > 0) {\n        const cellStyle = `grid-column: ${currentColIndex + 1} / span ${colSpan};`;\n        \n        cells.push(html`\n          <div class=\"grid-cell\" style=\"${cellStyle}\">\n            <span>${row[col.field]}</span>\n          </div>\n        `);\n        \n        currentColIndex += colSpan;\n      }\n    }\n\n    return html`\n      <div class=\"grid-row\" style=\"grid-template-columns: ${getGridTemplateColumns(columnDefs)};\">\n        ${cells}\n      </div>\n    `;\n  }\n\n  private static shouldShowResizeHandle(col: ColumnDef, enableColResize: boolean): boolean {\n    if (!enableColResize) return false;\n    if (col.resizable === false) return false;\n    return true;\n  }\n}\n"]}

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

@@ -0,0 +1,4 @@
+import type { ColumnDef, GridOptions } from './types.js';
+export declare class ResizeHandler {
+    static handleResizeStart(event: MouseEvent, col: ColumnDef, columnIndex: number, columnDefs: ColumnDef[], gridOptions: GridOptions, onUpdate: () => void): void;
+}

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

@@ -0,0 +1,36 @@
+export class ResizeHandler {
+    static handleResizeStart(event, col, columnIndex, columnDefs, gridOptions, onUpdate) {
+        event.preventDefault();
+        event.stopPropagation();
+        const startX = event.clientX;
+        const startWidth = col.width || 100;
+        const isShiftKey = event.shiftKey || gridOptions.colResizeDefault === 'shift';
+        const handleMouseMove = (e) => {
+            const deltaX = e.clientX - startX;
+            let newWidth = startWidth + deltaX;
+            // Ensure minimum width for usability
+            newWidth = Math.max(newWidth, 50);
+            // Update column width
+            col.width = newWidth;
+            // If shift resize, adjust adjacent column
+            if (isShiftKey && columnIndex < columnDefs.length - 1) {
+                const nextCol = columnDefs[columnIndex + 1];
+                const totalWidth = (col.width || 0) + (nextCol.width || 0);
+                const newNextWidth = totalWidth - newWidth;
+                // Ensure adjacent column doesn't get too narrow
+                if (newNextWidth >= 50) {
+                    nextCol.width = newNextWidth;
+                }
+            }
+            // Force complete re-render for virtual scrolling
+            onUpdate();
+        };
+        const handleMouseUp = () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+    }
+}
+//# sourceMappingURL=resize-handler.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"resize-handler.js","sourceRoot":"","sources":["../../../src/nile-grid/resize-handler.ts"],"names":[],"mappings":"AAEA,MAAM,OAAO,aAAa;IACxB,MAAM,CAAC,iBAAiB,CACtB,KAAiB,EACjB,GAAc,EACd,WAAmB,EACnB,UAAuB,EACvB,WAAwB,EACxB,QAAoB;QAEpB,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC;QAC7B,MAAM,UAAU,GAAG,GAAG,CAAC,KAAK,IAAI,GAAG,CAAC;QACpC,MAAM,UAAU,GAAG,KAAK,CAAC,QAAQ,IAAI,WAAW,CAAC,gBAAgB,KAAK,OAAO,CAAC;QAE9E,MAAM,eAAe,GAAG,CAAC,CAAa,EAAE,EAAE;YACxC,MAAM,MAAM,GAAG,CAAC,CAAC,OAAO,GAAG,MAAM,CAAC;YAClC,IAAI,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;YAEnC,qCAAqC;YACrC,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;YAElC,sBAAsB;YACtB,GAAG,CAAC,KAAK,GAAG,QAAQ,CAAC;YAErB,0CAA0C;YAC1C,IAAI,UAAU,IAAI,WAAW,GAAG,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACtD,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;gBAC5C,MAAM,UAAU,GAAG,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;gBAC3D,MAAM,YAAY,GAAG,UAAU,GAAG,QAAQ,CAAC;gBAE3C,gDAAgD;gBAChD,IAAI,YAAY,IAAI,EAAE,EAAE,CAAC;oBACvB,OAAO,CAAC,KAAK,GAAG,YAAY,CAAC;gBAC/B,CAAC;YACH,CAAC;YAED,iDAAiD;YACjD,QAAQ,EAAE,CAAC;QACb,CAAC,CAAC;QAEF,MAAM,aAAa,GAAG,GAAG,EAAE;YACzB,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;YAC3D,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACzD,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;QACxD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;IACtD,CAAC;CACF","sourcesContent":["import type { ColumnDef, GridOptions } from './types.js';\n\nexport class ResizeHandler {\n  static handleResizeStart(\n    event: MouseEvent, \n    col: ColumnDef, \n    columnIndex: number, \n    columnDefs: ColumnDef[],\n    gridOptions: GridOptions,\n    onUpdate: () => void\n  ): void {\n    event.preventDefault();\n    event.stopPropagation();\n    \n    const startX = event.clientX;\n    const startWidth = col.width || 100;\n    const isShiftKey = event.shiftKey || gridOptions.colResizeDefault === 'shift';\n    \n    const handleMouseMove = (e: MouseEvent) => {\n      const deltaX = e.clientX - startX;\n      let newWidth = startWidth + deltaX;\n      \n      // Ensure minimum width for usability\n      newWidth = Math.max(newWidth, 50);\n      \n      // Update column width\n      col.width = newWidth;\n      \n      // If shift resize, adjust adjacent column\n      if (isShiftKey && columnIndex < columnDefs.length - 1) {\n        const nextCol = columnDefs[columnIndex + 1];\n        const totalWidth = (col.width || 0) + (nextCol.width || 0);\n        const newNextWidth = totalWidth - newWidth;\n        \n        // Ensure adjacent column doesn't get too narrow\n        if (newNextWidth >= 50) {\n          nextCol.width = newNextWidth;\n        }\n      }\n      \n      // Force complete re-render for virtual scrolling\n      onUpdate();\n    };\n    \n    const handleMouseUp = () => {\n      document.removeEventListener('mousemove', handleMouseMove);\n      document.removeEventListener('mouseup', handleMouseUp);\n    };\n    \n    document.addEventListener('mousemove', handleMouseMove);\n    document.addEventListener('mouseup', handleMouseUp);\n  }\n}\n"]}

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

@@ -0,0 +1,32 @@
+export interface ColumnDef {
+    field: string;
+    headerName?: string;
+    sortable?: boolean;
+    width?: number;
+    resizable?: boolean;
+    minWidth?: number;
+    maxWidth?: number;
+    colSpan?: (params: ColSpanParams) => number;
+}
+export interface GridOptions {
+    rowSelection?: 'single' | 'multiple';
+    enableSorting?: boolean;
+    enableVirtualScroll?: boolean;
+    enableColResize?: boolean;
+    colResizeDefault?: 'normal' | 'shift';
+}
+export interface ColSpanParams {
+    data: any;
+    field: string;
+    rowIndex: number;
+    columnIndex: number;
+}
+export interface GridApi {
+    getSelectedRows: () => any[];
+    setRowData: (data: any[]) => void;
+    setColumnDefs: (defs: ColumnDef[]) => void;
+}
+export interface GridReadyEvent {
+    api: GridApi;
+    type: 'gridReady';
+}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/nile-grid/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface ColumnDef {\n  field: string;\n  headerName?: string;\n  sortable?: boolean;\n  width?: number;\n  resizable?: boolean;\n  minWidth?: number;\n  maxWidth?: number;\n  colSpan?: (params: ColSpanParams) => number;\n}\n\nexport interface GridOptions {\n  rowSelection?: 'single' | 'multiple';\n  enableSorting?: boolean;\n  enableVirtualScroll?: boolean;\n  enableColResize?: boolean;\n  colResizeDefault?: 'normal' | 'shift';\n}\n\nexport interface ColSpanParams {\n  data: any;\n  field: string;\n  rowIndex: number;\n  columnIndex: number;\n}\n\nexport interface GridApi {\n  getSelectedRows: () => any[];\n  setRowData: (data: any[]) => void;\n  setColumnDefs: (defs: ColumnDef[]) => void;\n}\n\nexport interface GridReadyEvent {\n  api: GridApi;\n  type: 'gridReady';\n}\n"]}

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

@@ -0,0 +1,4 @@
+import type { ColumnDef } from './types.js';
+export declare function getGridTemplateColumns(columnDefs: ColumnDef[]): string;
+export declare function calculateColSpan(col: ColumnDef, row: any, rowIndex: number, colIndex: number): number;
+export declare function shouldShowResizeHandle(col: ColumnDef, enableColResize: boolean): boolean;

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

@@ -0,0 +1,32 @@
+export function getGridTemplateColumns(columnDefs) {
+    return columnDefs.map((col, index) => {
+        if (col.width) {
+            return `${col.width}px`;
+        }
+        // Last column takes remaining space
+        if (index === columnDefs.length - 1) {
+            return '1fr';
+        }
+        return 'auto';
+    }).join(' ');
+}
+export function calculateColSpan(col, row, rowIndex, colIndex) {
+    if (col.colSpan) {
+        const params = {
+            data: row,
+            field: col.field,
+            rowIndex,
+            columnIndex: colIndex
+        };
+        return col.colSpan(params);
+    }
+    return 1;
+}
+export function shouldShowResizeHandle(col, enableColResize) {
+    if (!enableColResize)
+        return false;
+    if (col.resizable === false)
+        return false;
+    return true;
+}
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/nile-grid/utils.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,sBAAsB,CAAC,UAAuB;IAC5D,OAAO,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;QACnC,IAAI,GAAG,CAAC,KAAK,EAAE,CAAC;YACd,OAAO,GAAG,GAAG,CAAC,KAAK,IAAI,CAAC;QAC1B,CAAC;QACD,oCAAoC;QACpC,IAAI,KAAK,KAAK,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACpC,OAAO,KAAK,CAAC;QACf,CAAC;QACD,OAAO,MAAM,CAAC;IAChB,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACf,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,GAAc,EAAE,GAAQ,EAAE,QAAgB,EAAE,QAAgB;IAC3F,IAAI,GAAG,CAAC,OAAO,EAAE,CAAC;QAChB,MAAM,MAAM,GAAkB;YAC5B,IAAI,EAAE,GAAG;YACT,KAAK,EAAE,GAAG,CAAC,KAAK;YAChB,QAAQ;YACR,WAAW,EAAE,QAAQ;SACtB,CAAC;QACF,OAAO,GAAG,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC;IACD,OAAO,CAAC,CAAC;AACX,CAAC;AAED,MAAM,UAAU,sBAAsB,CAAC,GAAc,EAAE,eAAwB;IAC7E,IAAI,CAAC,eAAe;QAAE,OAAO,KAAK,CAAC;IACnC,IAAI,GAAG,CAAC,SAAS,KAAK,KAAK;QAAE,OAAO,KAAK,CAAC;IAC1C,OAAO,IAAI,CAAC;AACd,CAAC","sourcesContent":["import type { ColumnDef, ColSpanParams } from './types.js';\n\nexport function getGridTemplateColumns(columnDefs: ColumnDef[]): string {\n  return columnDefs.map((col, index) => {\n    if (col.width) {\n      return `${col.width}px`;\n    }\n    // Last column takes remaining space\n    if (index === columnDefs.length - 1) {\n      return '1fr';\n    }\n    return 'auto';\n  }).join(' ');\n}\n\nexport function calculateColSpan(col: ColumnDef, row: any, rowIndex: number, colIndex: number): number {\n  if (col.colSpan) {\n    const params: ColSpanParams = {\n      data: row,\n      field: col.field,\n      rowIndex,\n      columnIndex: colIndex\n    };\n    return col.colSpan(params);\n  }\n  return 1;\n}\n\nexport function shouldShowResizeHandle(col: ColumnDef, enableColResize: boolean): boolean {\n  if (!enableColResize) return false;\n  if (col.resizable === false) return false;\n  return true;\n}\n"]}

package/dist/src/nile-hero/__snapshots__/nile-hero.test.snap.js

@@ -0,0 +1,47 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["NileHero renders correctly with default properties"] = 
+`<div
+  class="hero__container hero__container--expanded"
+  part="nile__hero__container"
+>
+  <nile-hero-header
+    class="hero__header--collapsed"
+    hero-text="Test Hero"
+    icon="error"
+    part="nile__hero__header"
+    style="opacity:0"
+  >
+  </nile-hero-header>
+  <div
+    class="hero__slot__container"
+    style="opacity:1"
+  >
+    <div class="hero__slot">
+      <span class="icon__container">
+        <nile-icon
+          method="stroke"
+          name="error"
+          size="16"
+        >
+        </nile-icon>
+      </span>
+      <slot>
+      </slot>
+    </div>
+  </div>
+  <div
+    class="hero__img__container"
+    id="hero__img__container"
+    style="opacity:1"
+  >
+    <img
+      class="hero__img"
+      src=""
+    >
+  </div>
+</div>
+`;
+/* end snapshot NileHero renders correctly with default properties */
+

package/dist/src/nile-icon/__snapshots__/nile-icon.test.snap.js

@@ -0,0 +1,16 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["NileIcon should render the icon with the correct name"] = 
+`<nile-icon
+  description=""
+  method="fill"
+  name="info"
+  set="local"
+  size="16"
+  style="--nile-svg-fill: var(--nile-colors-dark-500); --nile-svg-height: 16px; --nile-svg-width: 16px;"
+>
+</nile-icon>
+`;
+/* end snapshot NileIcon should render the icon with the correct name */
+

package/dist/src/nile-inline-edit/nile-inline-edit.d.ts

@@ -26,10 +26,20 @@ export declare class NileInlineEdit extends NileElement {
     open: boolean;
     /** Gives the Value to the Inline Edit */
     value: string;
+    /** Maximum length for the placeholder value. Values longer than this will be truncated */
+    maxPlaceholderLength: number;
+    /** Enables automatic closing when focus moves outside the component or when clicking outside */
+    autoClose: boolean;
     /**
      * Render method
      * @slot This is a slot test
      */
+    private handleCloseResult;
+    private handleDocumentFocusInWrapper;
+    private handleDocumentMouseDownWrapper;
+    connectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    disconnectedCallback(): void;
     private handleClick;
     render(): TemplateResult;
 }

package/dist/src/nile-inline-edit/nile-inline-edit.js

@@ -9,6 +9,7 @@ import { html, } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { styles } from './nile-inline-edit.css';
 import NileElement from '../internal/nile-element';
+import { getDisplayValue, updateSlottedElementValue, handleDocumentFocusIn, handleDocumentMouseDown, } from './nile-inline-edit-utils';
 /**
  * Nile inline-edit component.
  *
@@ -26,6 +27,18 @@ let NileInlineEdit = class NileInlineEdit extends NileElement {
         this.open = false;
         /** Gives the Value to the Inline Edit */
         this.value = '';
+        /** Maximum length for the placeholder value. Values longer than this will be truncated */
+        this.maxPlaceholderLength = 25;
+        /** Enables automatic closing when focus moves outside the component or when clicking outside */
+        this.autoClose = false;
+        this.handleDocumentFocusInWrapper = (event) => {
+            const result = handleDocumentFocusIn(event, this, this.open);
+            this.handleCloseResult(result);
+        };
+        this.handleDocumentMouseDownWrapper = (event) => {
+            const result = handleDocumentMouseDown(event, this, this.open);
+            this.handleCloseResult(result);
+        };
         /* #endregion */
     }
     /**
@@ -41,11 +54,43 @@ let NileInlineEdit = class NileInlineEdit extends NileElement {
      * Render method
      * @slot This is a slot test
      */
+    handleCloseResult(result) {
+        if (result.shouldClose) {
+            if (result.newValue !== null) {
+                this.value = result.newValue;
+            }
+            this.open = false;
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('open') && this.autoClose) {
+            if (this.open) {
+                updateSlottedElementValue(this.updateComplete, this.shadowRoot, this.value);
+                document.addEventListener('focusin', this.handleDocumentFocusInWrapper, true);
+                document.addEventListener('mousedown', this.handleDocumentMouseDownWrapper, true);
+            }
+            else {
+                document.removeEventListener('focusin', this.handleDocumentFocusInWrapper, true);
+                document.removeEventListener('mousedown', this.handleDocumentMouseDownWrapper, true);
+            }
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('focusin', this.handleDocumentFocusInWrapper, true);
+        document.removeEventListener('mousedown', this.handleDocumentMouseDownWrapper, true);
+    }
     handleClick() {
         this.open = true;
     }
     render() {
-        const textInsideContainer = this.value || this.placeholder;
+        // Use truncated value for display, or placeholder if empty
+        const displayValue = this.autoClose ? getDisplayValue(this.value, this.maxPlaceholderLength) : this.value;
+        const textInsideContainer = displayValue || this.placeholder;
         return html `
       <div class="inline__edit--label" part="label">${this.label}</div>
       ${this.open
@@ -68,6 +113,12 @@ __decorate([
 __decorate([
     property({ type: String, reflect: true })
 ], NileInlineEdit.prototype, "value", void 0);
+__decorate([
+    property({ type: Number, attribute: 'max-placeholder-length' })
+], NileInlineEdit.prototype, "maxPlaceholderLength", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'auto-close' })
+], NileInlineEdit.prototype, "autoClose", void 0);
 NileInlineEdit = __decorate([
     customElement('nile-inline-edit')
 ], NileInlineEdit);

package/dist/src/nile-inline-edit/nile-inline-edit.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-inline-edit.js","sourceRoot":"","sources":["../../../src/nile-inline-edit/nile-inline-edit.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;GAKG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,WAAW;IAAxC;;QASL,yCAAyC;QACE,UAAK,GAAG,EAAE,CAAC;QAEtD,+CAA+C;QACJ,gBAAW,GAAG,EAAE,CAAC;QAE5D,2DAA2D;QACf,SAAI,GAAG,KAAK,CAAC;QAEzD,yCAAyC;QACE,UAAK,GAAG,EAAE,CAAC;QA0BtD,gBAAgB;IAClB,CAAC;IA7CC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAcD,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IAEK,WAAW;QACjB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;IACM,MAAM;QACX,MAAM,mBAAmB,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC;QAC3D,OAAO,IAAI,CAAA;sDACuC,IAAI,CAAC,KAAK;QACxD,IAAI,CAAC,IAAI;YACT,CAAC,CAAC,IAAI,CAAA,mEAAmE;YACzE,CAAC,CAAC,IAAI,CAAA,iEAAiE,IAAI,CAAC,WAAW;cACjF,mBAAmB;iBAChB;KACZ,CAAC;IACJ,CAAC;CAGF,CAAA;AApC4C;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAY;AAGX;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAAkB;AAGhB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAc;AAGd;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAY;AAnB3C,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CA8C1B;;AAED,eAAe,cAAc,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\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 {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-inline-edit.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile inline-edit component.\n *\n * @tag nile-inline-edit\n *\n */\n@customElement('nile-inline-edit')\nexport class NileInlineEdit extends NileElement {\n  /**\n   * The styles for nile-inline-edit\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  /** Gives the label to the Inline Edit */\n  @property({ type: String, reflect: true }) label = '';\n\n  /** Gives the Placeholder to the Inline Edit */\n  @property({ type: String, reflect: true }) placeholder = '';\n\n  /** Open prop for displaying default slot in Inline Edit */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Gives the Value to the Inline Edit */\n  @property({ type: String, reflect: true }) value = '';\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n\n  private handleClick() {\n    this.open = true;\n  }\n  public render(): TemplateResult {\n    const textInsideContainer = this.value || this.placeholder;\n    return html`\n      <div class=\"inline__edit--label\" part=\"label\">${this.label}</div>\n      ${this.open\n        ? html` <slot class=\"inline__edit--open--container\" part=\"base\"> </slot>`\n        : html` <div class=\"inline__edit--container\" part=\"container\" @click=${this.handleClick}>\n            ${textInsideContainer}\n          </div>`}\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileInlineEdit;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-inline-edit': NileInlineEdit;\n  }\n}\n"]}
+{"version":3,"file":"nile-inline-edit.js","sourceRoot":"","sources":["../../../src/nile-inline-edit/nile-inline-edit.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\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 {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-inline-edit.css';\nimport NileElement from '../internal/nile-element';\nimport {\n  getDisplayValue,\n  updateSlottedElementValue,\n  handleDocumentFocusIn,\n  handleDocumentMouseDown,\n} from './nile-inline-edit-utils';\n\n/**\n * Nile inline-edit component.\n *\n * @tag nile-inline-edit\n *\n */\n@customElement('nile-inline-edit')\nexport class NileInlineEdit extends NileElement {\n  /**\n   * The styles for nile-inline-edit\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  /** Gives the label to the Inline Edit */\n  @property({ type: String, reflect: true }) label = '';\n\n  /** Gives the Placeholder to the Inline Edit */\n  @property({ type: String, reflect: true }) placeholder = '';\n\n  /** Open prop for displaying default slot in Inline Edit */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Gives the Value to the Inline Edit */\n  @property({ type: String, reflect: true }) value = '';\n\n  /** Maximum length for the placeholder value. Values longer than this will be truncated */\n  @property({ type: Number, attribute: 'max-placeholder-length' }) maxPlaceholderLength: number = 25;\n\n  /** Enables automatic closing when focus moves outside the component or when clicking outside */\n  @property({ type: Boolean, attribute: 'auto-close' }) autoClose: boolean = false;\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n\n  private handleCloseResult(result: { shouldClose: boolean; newValue: string | null }) {\n    if (result.shouldClose) {\n      if (result.newValue !== null) {\n        this.value = result.newValue;\n      }\n      this.open = false;\n    }\n  }\n\n  private handleDocumentFocusInWrapper = (event: FocusEvent) => {\n    const result = handleDocumentFocusIn(event, this, this.open);\n    this.handleCloseResult(result);\n  };\n\n  private handleDocumentMouseDownWrapper = (event: MouseEvent) => {\n    const result = handleDocumentMouseDown(event, this, this.open);\n    this.handleCloseResult(result);\n  };\n\n  connectedCallback() {\n    super.connectedCallback();\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    \n    if (changedProperties.has('open') && this.autoClose) {\n      if (this.open) {\n        updateSlottedElementValue(this.updateComplete, this.shadowRoot, this.value);\n        document.addEventListener('focusin', this.handleDocumentFocusInWrapper, true);\n        document.addEventListener('mousedown', this.handleDocumentMouseDownWrapper, true);\n      } else {\n        document.removeEventListener('focusin', this.handleDocumentFocusInWrapper, true);\n        document.removeEventListener('mousedown', this.handleDocumentMouseDownWrapper, true);\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener('focusin', this.handleDocumentFocusInWrapper, true);\n    document.removeEventListener('mousedown', this.handleDocumentMouseDownWrapper, true);\n  }\n\n  private handleClick() {\n    this.open = true;\n  }\n  public render(): TemplateResult {\n    // Use truncated value for display, or placeholder if empty\n    const displayValue = this.autoClose ? getDisplayValue(this.value, this.maxPlaceholderLength) : this.value;\n    const textInsideContainer = displayValue || this.placeholder;\n    return html`\n      <div class=\"inline__edit--label\" part=\"label\">${this.label}</div>\n      ${this.open\n        ? html` <slot class=\"inline__edit--open--container\" part=\"base\"> </slot>`\n        : html` <div class=\"inline__edit--container\" part=\"container\" @click=${this.handleClick}>\n            ${textInsideContainer}\n          </div>`}\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileInlineEdit;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-inline-edit': NileInlineEdit;\n  }\n}\n"]}

package/dist/src/nile-inline-sidebar/nile-inline-sidebar.css.js

@@ -48,8 +48,8 @@ export const styles = css `
     flex-direction: column;
     gap: var(--nile-spacing-xs);
     padding-right: var(--nile-spacing-xl);
-    padding-top: var(--nile-spacing-3xl);
-    padding-bottom: var(--nile-spacing-3xl);
+    padding-top: var(--nile-spacing-2xl);
+    padding-bottom: var(--nile-spacing-2xl);
   }
 
   nile-side-bar-action-menu {
@@ -70,13 +70,6 @@ export const styles = css `
     margin-left: 0;
     margin-right: 0;
     border-radius: 0;
-    color: black;
-  }
-
-
-  nile-side-bar-action-menu-item[active]::part(base):hover {
-    background: var(--nile-colors-primary-100);
-    color: black;
   }
 
   nile-side-bar-action-menu-item::part(label) {
@@ -85,7 +78,6 @@ export const styles = css `
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-
   }
 
   /* Transition for sidebar button when it is closed and opened */

package/dist/src/nile-inline-sidebar/nile-inline-sidebar.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-inline-sidebar.css.js","sourceRoot":"","sources":["../../../src/nile-inline-sidebar/nile-inline-sidebar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkGxB,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    display: block;\n    height: 100%;\n  }\n  .sidebar {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: white;\n    border-right: 1px solid var(--nile-colors-neutral-400);\n    transition: width 0.3s ease;\n    position: relative;\n  }\n  .toggle-btn {\n    position: absolute;\n    top: var(--nile-spacing-2xl);\n    right: -14px;\n    z-index: 10;\n  }\n\n  nile-button.toggle-btn::part(base) {\n    width: 30px;\n    height: 30px;\n  }\n  :host(:not([collapsed])) .sidebar {\n    width: 216px;\n  }\n  :host([collapsed]) .sidebar {\n    width: 0px;\n  }\n  :host([collapsed]) .sidebar-nav {\n    display: none;\n  }\n  .sidebar-header {\n    display: flex;\n    justify-content: flex-end;\n  }\n  .sidebar-nav {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-xs);\n    padding-right: var(--nile-spacing-xl);\n    padding-top: var(--nile-spacing-3xl);\n    padding-bottom: var(--nile-spacing-3xl);\n  }\n\n  nile-side-bar-action-menu {\n    width: fit-content;\n    max-width: 400px;\n    min-width: 200px;\n  }\n\n  nile-side-bar-action-menu::part(menu__items-wrapper) {\n    width: 100%;\n    max-width: 400px;\n    padding-top: var(--nile-spacing-lg);\n    padding-bottom: var(--nile-spacing-lg);\n  }\n\n  nile-side-bar-action-menu-item::part(base) {\n    width: 100%;\n    margin-left: 0;\n    margin-right: 0;\n    border-radius: 0;\n    color: black;\n  }\n\n\n  nile-side-bar-action-menu-item[active]::part(base):hover {\n    background: var(--nile-colors-primary-100);\n    color: black;\n  }\n\n  nile-side-bar-action-menu-item::part(label) {\n    display: block;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n  }\n\n  /* Transition for sidebar button when it is closed and opened */\n  nile-side-bar-action::part(panel),\n  nile-side-bar-action-menu {\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.2s ease-in;\n    transition-delay: 50ms;\n  }\n\n  nile-side-bar-action:hover::part(panel),\n  nile-side-bar-action:hover nile-side-bar-action-menu {\n    opacity: 1;\n    pointer-events: auto;\n    transition-delay: 0ms;\n  }\n`;\n"]}
+{"version":3,"file":"nile-inline-sidebar.css.js","sourceRoot":"","sources":["../../../src/nile-inline-sidebar/nile-inline-sidebar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0FxB,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    display: block;\n    height: 100%;\n  }\n  .sidebar {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: white;\n    border-right: 1px solid var(--nile-colors-neutral-400);\n    transition: width 0.3s ease;\n    position: relative;\n  }\n  .toggle-btn {\n    position: absolute;\n    top: var(--nile-spacing-2xl);\n    right: -14px;\n    z-index: 10;\n  }\n\n  nile-button.toggle-btn::part(base) {\n    width: 30px;\n    height: 30px;\n  }\n  :host(:not([collapsed])) .sidebar {\n    width: 216px;\n  }\n  :host([collapsed]) .sidebar {\n    width: 0px;\n  }\n  :host([collapsed]) .sidebar-nav {\n    display: none;\n  }\n  .sidebar-header {\n    display: flex;\n    justify-content: flex-end;\n  }\n  .sidebar-nav {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-xs);\n    padding-right: var(--nile-spacing-xl);\n    padding-top: var(--nile-spacing-2xl);\n    padding-bottom: var(--nile-spacing-2xl);\n  }\n\n  nile-side-bar-action-menu {\n    width: fit-content;\n    max-width: 400px;\n    min-width: 200px;\n  }\n\n  nile-side-bar-action-menu::part(menu__items-wrapper) {\n    width: 100%;\n    max-width: 400px;\n    padding-top: var(--nile-spacing-lg);\n    padding-bottom: var(--nile-spacing-lg);\n  }\n\n  nile-side-bar-action-menu-item::part(base) {\n    width: 100%;\n    margin-left: 0;\n    margin-right: 0;\n    border-radius: 0;\n  }\n\n  nile-side-bar-action-menu-item::part(label) {\n    display: block;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  /* Transition for sidebar button when it is closed and opened */\n  nile-side-bar-action::part(panel),\n  nile-side-bar-action-menu {\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.2s ease-in;\n    transition-delay: 50ms;\n  }\n\n  nile-side-bar-action:hover::part(panel),\n  nile-side-bar-action:hover nile-side-bar-action-menu {\n    opacity: 1;\n    pointer-events: auto;\n    transition-delay: 0ms;\n  }\n`;\n"]}

package/dist/src/nile-inline-sidebar/nile-inline-sidebar.js

@@ -84,7 +84,6 @@ let NileInlineSidebar = class NileInlineSidebar extends NileElement {
         if (this.fixed)
             return;
         this.collapsed = !this.collapsed;
-        console.log('[Sidebar] Toggled collapse →', this.collapsed);
         this.dispatchEvent(new CustomEvent('nile-toggle', {
             detail: { collapsed: this.collapsed },
             bubbles: true,
@@ -112,9 +111,6 @@ let NileInlineSidebar = class NileInlineSidebar extends NileElement {
         if (!this.sidebarItems?.length)
             return null;
         return this.sidebarItems.map((item, index) => {
-            const shouldShowTooltip = item.tooltip;
-            const isTruncated = item.scrollWidth > item.clientWidth ||
-                item.scrollHeight > item.clientHeight;
             const content = html `
         <nile-side-bar-action-menu-item
           ?disabled=${item.hasAttribute('disabled')}
@@ -124,15 +120,11 @@ let NileInlineSidebar = class NileInlineSidebar extends NileElement {
           ${item.textContent}
         </nile-side-bar-action-menu-item>
       `;
-            return shouldShowTooltip || isTruncated
+            return this.showTooltip
                 ? html `
-            <nile-inline-tooltip
-              content=${item.textContent?.trim() || ''}
-              hoist
-              placement="right"
-            >
+            <nile-tooltip content=${item.textContent} hoist placement="right">
               ${content}
-            </nile-inline-tooltip>
+            </nile-tooltip>
           `
                 : content;
         });

package/dist/src/nile-inline-sidebar/nile-inline-sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-inline-sidebar.js","sourceRoot":"","sources":["../../../src/nile-inline-sidebar/nile-inline-sidebar.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-inline-sidebar.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile inline sidebar component.\n *\n * @tag nile-inline-sidebar\n */\n@customElement('nile-inline-sidebar')\nexport class NileInlineSidebar extends NileElement {\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n\n  @property({ type: Boolean, reflect: true, attribute: true }) fixed = false;\n\n  @property({ type: Boolean, reflect: true }) showTooltip = false;\n\n  @state() private activeIndex: number = -1;\n\n  @query('slot') private defaultSlot!: HTMLSlotElement;\n\n  private mutationObserver?: MutationObserver;\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  private get sidebarItems(): HTMLElement[] {\n    if (!this.defaultSlot) return [];\n    const assigned = this.defaultSlot.assignedElements({ flatten: true });\n    const items = assigned.flatMap(el =>\n      el.tagName.toLowerCase() === 'nile-inline-sidebar-item'\n        ? [el]\n        : Array.from(el.querySelectorAll('nile-inline-sidebar-item'))\n    );\n    return items as HTMLElement[];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('nile-click', this.handleItemSelect);\n    this.mutationObserver = new MutationObserver(() =>\n      this.syncActiveFromItems()\n    );\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.mutationObserver?.disconnect();\n    this.removeEventListener('nile-click', this.handleItemSelect);\n  }\n\n  firstUpdated() {\n    this.observeSidebarItems();\n    this.syncActiveFromItems();\n\n    if (this.fixed) {\n      this.collapsed = false;\n    }\n  }\n\n  private observeSidebarItems() {\n    if (!this.sidebarItems?.length || !this.mutationObserver) return;\n    this.sidebarItems.forEach(item =>\n      this.mutationObserver!.observe(item, {\n        attributes: true,\n        attributeFilter: ['active'],\n      })\n    );\n  }\n\n  private syncActiveFromItems() {\n    if (!this.sidebarItems?.length) return;\n    const activeIndex = this.sidebarItems.findIndex(item =>\n      item.hasAttribute('active')\n    );\n    if (activeIndex !== -1 && activeIndex !== this.activeIndex) {\n      this.activeIndex = activeIndex;\n      this.requestUpdate();\n    }\n  }\n\n  private handleItemSelect = (event: CustomEvent) => {\n    const selectedItem = event.detail.item as HTMLElement;\n    const index = this.sidebarItems.indexOf(selectedItem);\n\n    this.sidebarItems.forEach(\n      (item, i) => ((item as any).active = i === index)\n    );\n    this.activeIndex = index;\n\n    this.dispatchEvent(\n      new CustomEvent('nile-change', {\n        detail: { selectedItem, index },\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    this.requestUpdate();\n  };\n\n  private toggleCollapse() {\n    if (this.fixed) return;\n    this.collapsed = !this.collapsed;\n    console.log('[Sidebar] Toggled collapse →', this.collapsed);\n\n    this.dispatchEvent(\n      new CustomEvent('nile-toggle', {\n        detail: { collapsed: this.collapsed },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private handleMenuItemClick(index: number) {\n    const selectedItem = this.sidebarItems[index];\n    if (!selectedItem || selectedItem.hasAttribute('disabled')) return;\n\n    this.sidebarItems.forEach(\n      (item, i) => ((item as any).active = i === index)\n    );\n    this.activeIndex = index;\n    const text = selectedItem.textContent?.trim() || '';\n    const href = (selectedItem as any).href;\n    this.dispatchEvent(\n      new CustomEvent('nile-click', {\n        detail: { item: selectedItem, href, text },\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    if (href) window.location.href = href;\n\n    this.requestUpdate();\n  }\n\n  private get menuItemsTemplate() {\n    if (!this.sidebarItems?.length) return null;\n  \n    return this.sidebarItems.map((item, index) => {\n      const shouldShowTooltip = (item as any).tooltip;\n      const isTruncated =\n        item.scrollWidth > item.clientWidth ||\n        item.scrollHeight > item.clientHeight;\n  \n      const content = html`\n        <nile-side-bar-action-menu-item\n          ?disabled=${item.hasAttribute('disabled')}\n          ?active=${this.activeIndex === index}\n          @click=${() => this.handleMenuItemClick(index)}\n        >\n          ${item.textContent}\n        </nile-side-bar-action-menu-item>\n      `;\n      return shouldShowTooltip || isTruncated\n        ? html`\n            <nile-inline-tooltip\n              content=${item.textContent?.trim() || ''}\n              hoist\n              placement=\"right\"\n            >\n              ${content}\n            </nile-inline-tooltip>\n          `\n        : content;\n    });\n  }\n  \n  \n  \n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"sidebar\" part=\"base\">\n        <div class=\"sidebar-header\" part=\"header\">\n          ${!this.fixed\n            ? this.collapsed\n              ? html`\n                  <nile-side-bar-action\n                    class=\"toggle-action\"\n                    placement=\"bottom-start\"\n                    hoist\n                    open\n                    triggerDropdown=\"hover\"\n                  >\n                    <nile-button\n                      slot=\"trigger\"\n                      class=\"toggle-btn\"\n                      variant=\"tertiary\"\n                      @click=${this.toggleCollapse}\n                    >\n                      <nile-icon name=\"menu_close\"></nile-icon>\n                    </nile-button>\n                    <nile-side-bar-action-menu>\n                      ${this.menuItemsTemplate}\n                    </nile-side-bar-action-menu>\n                  </nile-side-bar-action>\n                `\n              : html`\n                  <nile-button\n                    class=\"toggle-btn\"\n                    variant=\"tertiary\"\n                    @click=${this.toggleCollapse}\n                  >\n                    <nile-icon name=\"menu_open\"></nile-icon>\n                  </nile-button>\n                `\n            : null}\n        </div>\n\n        <nav\n          class=\"sidebar-nav\"\n          style=${this.collapsed ? 'display:none;' : ''}\n          part=\"nav-items\"\n        >\n          <slot\n            @slotchange=${() => {\n              this.requestUpdate();\n              this.observeSidebarItems();\n              this.syncActiveFromItems();\n            }}\n          ></slot>\n        </nav>\n      </div>\n    `;\n  }\n}\n\nexport default NileInlineSidebar;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-inline-sidebar': NileInlineSidebar;\n  }\n}\n"]}
+{"version":3,"file":"nile-inline-sidebar.js","sourceRoot":"","sources":["../../../src/nile-inline-sidebar/nile-inline-sidebar.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-inline-sidebar.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile inline sidebar component.\n *\n * @tag nile-inline-sidebar\n */\n@customElement('nile-inline-sidebar')\nexport class NileInlineSidebar extends NileElement {\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n\n  @property({ type: Boolean, reflect: true, attribute: true }) fixed = false;\n\n  @property({ type: Boolean, reflect: true }) showTooltip = false;\n\n  @state() private activeIndex: number = -1;\n\n  @query('slot') private defaultSlot!: HTMLSlotElement;\n\n  private mutationObserver?: MutationObserver;\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  private get sidebarItems(): HTMLElement[] {\n    if (!this.defaultSlot) return [];\n    const assigned = this.defaultSlot.assignedElements({ flatten: true });\n    const items = assigned.flatMap(el =>\n      el.tagName.toLowerCase() === 'nile-inline-sidebar-item'\n        ? [el]\n        : Array.from(el.querySelectorAll('nile-inline-sidebar-item'))\n    );\n    return items as HTMLElement[];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('nile-click', this.handleItemSelect);\n    this.mutationObserver = new MutationObserver(() =>\n      this.syncActiveFromItems()\n    );\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.mutationObserver?.disconnect();\n    this.removeEventListener('nile-click', this.handleItemSelect);\n  }\n\n  firstUpdated() {\n    this.observeSidebarItems();\n    this.syncActiveFromItems();\n\n    if (this.fixed) {\n      this.collapsed = false;\n    }\n  }\n\n  private observeSidebarItems() {\n    if (!this.sidebarItems?.length || !this.mutationObserver) return;\n    this.sidebarItems.forEach(item =>\n      this.mutationObserver!.observe(item, {\n        attributes: true,\n        attributeFilter: ['active'],\n      })\n    );\n  }\n\n  private syncActiveFromItems() {\n    if (!this.sidebarItems?.length) return;\n    const activeIndex = this.sidebarItems.findIndex(item =>\n      item.hasAttribute('active')\n    );\n    if (activeIndex !== -1 && activeIndex !== this.activeIndex) {\n      this.activeIndex = activeIndex;\n      this.requestUpdate();\n    }\n  }\n\n  private handleItemSelect = (event: CustomEvent) => {\n    const selectedItem = event.detail.item as HTMLElement;\n    const index = this.sidebarItems.indexOf(selectedItem);\n\n    this.sidebarItems.forEach(\n      (item, i) => ((item as any).active = i === index)\n    );\n    this.activeIndex = index;\n\n    this.dispatchEvent(\n      new CustomEvent('nile-change', {\n        detail: { selectedItem, index },\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    this.requestUpdate();\n  };\n\n  private toggleCollapse() {\n    if (this.fixed) return;\n    this.collapsed = !this.collapsed;\n\n    this.dispatchEvent(\n      new CustomEvent('nile-toggle', {\n        detail: { collapsed: this.collapsed },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private handleMenuItemClick(index: number) {\n    const selectedItem = this.sidebarItems[index];\n    if (!selectedItem || selectedItem.hasAttribute('disabled')) return;\n\n    this.sidebarItems.forEach(\n      (item, i) => ((item as any).active = i === index)\n    );\n    this.activeIndex = index;\n    const text = selectedItem.textContent?.trim() || '';\n    const href = (selectedItem as any).href;\n    this.dispatchEvent(\n      new CustomEvent('nile-click', {\n        detail: { item: selectedItem, href, text },\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    if (href) window.location.href = href;\n\n    this.requestUpdate();\n  }\n\n  private get menuItemsTemplate() {\n    if (!this.sidebarItems?.length) return null;\n\n    return this.sidebarItems.map((item, index) => {\n      const content = html`\n        <nile-side-bar-action-menu-item\n          ?disabled=${item.hasAttribute('disabled')}\n          ?active=${this.activeIndex === index}\n          @click=${() => this.handleMenuItemClick(index)}\n        >\n          ${item.textContent}\n        </nile-side-bar-action-menu-item>\n      `;\n\n      return this.showTooltip\n        ? html`\n            <nile-tooltip content=${item.textContent} hoist placement=\"right\">\n              ${content}\n            </nile-tooltip>\n          `\n        : content;\n    });\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"sidebar\" part=\"base\">\n        <div class=\"sidebar-header\" part=\"header\">\n          ${!this.fixed\n            ? this.collapsed\n              ? html`\n                  <nile-side-bar-action\n                    class=\"toggle-action\"\n                    placement=\"bottom-start\"\n                    hoist\n                    open\n                    triggerDropdown=\"hover\"\n                  >\n                    <nile-button\n                      slot=\"trigger\"\n                      class=\"toggle-btn\"\n                      variant=\"tertiary\"\n                      @click=${this.toggleCollapse}\n                    >\n                      <nile-icon name=\"menu_close\"></nile-icon>\n                    </nile-button>\n                    <nile-side-bar-action-menu>\n                      ${this.menuItemsTemplate}\n                    </nile-side-bar-action-menu>\n                  </nile-side-bar-action>\n                `\n              : html`\n                  <nile-button\n                    class=\"toggle-btn\"\n                    variant=\"tertiary\"\n                    @click=${this.toggleCollapse}\n                  >\n                    <nile-icon name=\"menu_open\"></nile-icon>\n                  </nile-button>\n                `\n            : null}\n        </div>\n\n        <nav\n          class=\"sidebar-nav\"\n          style=${this.collapsed ? 'display:none;' : ''}\n          part=\"nav-items\"\n        >\n          <slot\n            @slotchange=${() => {\n              this.requestUpdate();\n              this.observeSidebarItems();\n              this.syncActiveFromItems();\n            }}\n          ></slot>\n        </nav>\n      </div>\n    `;\n  }\n}\n\nexport default NileInlineSidebar;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-inline-sidebar': NileInlineSidebar;\n  }\n}\n"]}