@aquera/nile-elements 0.1.70-beta-1.0 → 0.1.70-beta-1.2

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-input/__snapshots__/nile-input.test.snap.js

@@ -0,0 +1,75 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["nile-input renders correctly"] = 
+`<div
+  class="form-control form-control--has-label form-control--medium"
+  part="form-control"
+>
+  <label
+    aria-hidden="false"
+    class="form-control__label"
+    for="input"
+    part="form-control-label"
+  >
+    <slot name="label">
+      Test Label
+    </slot>
+  </label>
+  <div
+    class="form-control-input"
+    part="form-control-input"
+  >
+    <nile-popup
+      distance="5"
+      exportparts="input"
+      placement="bottom-start"
+      strategy="fixed"
+    >
+      <div
+        class="input input--empty input--medium input--standard"
+        part="base"
+        slot="anchor"
+      >
+        <slot
+          class="input__prefix"
+          name="prefix"
+          part="prefix"
+        >
+        </slot>
+        <input
+          aria-describedby="help-text"
+          autocomplete="off"
+          class="input__control"
+          id="input"
+          name=""
+          part="input"
+          placeholder=""
+          spellcheck="true"
+          title=""
+          type="text"
+        >
+        <slot
+          class="input__suffix"
+          name="suffix"
+          part="suffix"
+        >
+        </slot>
+      </div>
+      <div class="input__non-printable">
+        Non-printable character detected.
+        <nile-badge
+          class="input__remove-non-printable"
+          variant="error"
+        >
+          Remove All
+        </nile-badge>
+        <div class="input__srtiked-text-container">
+        </div>
+      </div>
+    </nile-popup>
+  </div>
+</div>
+`;
+/* end snapshot nile-input renders correctly */
+

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

@@ -50,6 +50,7 @@ export declare class NileOption extends NileElement {
     disabled: boolean;
     /** Indicates whether the option is selected. */
     selected: boolean;
+    groupName: string;
     connectedCallback(): void;
     checkIfMultipleSelect(): void;
     protected updated(_changedProperties: PropertyValues): void;

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

@@ -53,6 +53,8 @@ let NileOption = class NileOption extends NileElement {
         this.disabled = false;
         /** Indicates whether the option is selected. */
         this.selected = false;
+        /* used to pass group name to the option, so that grouped options can be shown */
+        this.groupName = '';
     }
     connectedCallback() {
         super.connectedCallback();
@@ -191,6 +193,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileOption.prototype, "selected", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NileOption.prototype, "groupName", void 0);
 __decorate([
     watch('disabled')
 ], NileOption.prototype, "handleDisabledChange", null);

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

@@ -1 +1 @@
-{"version":3,"file":"nile-option.js","sourceRoot":"","sources":["../../../src/nile-option/nile-option.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 { LitElement, CSSResultArray, TemplateResult } from 'lit';\nimport { styles } from './nile-option.css';\nimport '../nile-icon';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { html } from 'lit';\nimport { watch } from '../internal/watch';\nimport type { CSSResultGroup, PropertyValues } from 'lit';\nimport NileElement from '../internal/nile-element';\nimport '../nile-checkbox';\n\n/**\n * Nile icon component.\n *\n * @tag nile-option\n *\n */\n\n/**\n * @summary Options define the selectable items within various form controls such as [select](/components/select).\n * @status stable\n *\n * @dependency nile-icon\n *\n * @slot - The option's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n *\n * @csspart checked-icon - The checked icon, an `<nile-icon>` element.\n * @csspart base - The component's base wrapper.\n * @csspart label - The option's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n */\n\n@customElement('nile-option')\nexport class NileOption extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  private cachedTextLabel: string;\n\n  @query('.option__label') defaultSlot: HTMLSlotElement;\n\n  @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)\n  @state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging\n  @state() hidden = false; // the option is hidden\n  @state() isMultipleSelect = false;\n\n  /**\n   * The option's value. When selected, the containing form control will receive this value. The value must be unique\n   * from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\n   * multiple values.\n   */\n  @property({ reflect: true }) value = '';\n\n  @property({ type: Boolean }) showCheckbox: boolean = false;\n\n  /** Draws the option in a disabled state, preventing selection. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Indicates whether the option is selected. */\n  @property({ type: Boolean, reflect: true }) selected = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'option');\n    this.setAttribute('aria-selected', 'false');\n\n    // Find the closest parent 'nile-select' or 'nile-virtual-select' element\n    const parentSelect = this.closest('nile-select') || this.closest('nile-virtual-select');\n    this.checkIfMultipleSelect();\n  }\n\n  checkIfMultipleSelect() {\n    // Find the closest parent 'nile-select' element\n    const parentSelect = this.closest('nile-select') || this.closest('nile-virtual-select');\n\n    // Check if the parent has the 'multiple' attribute\n    if (parentSelect && parentSelect.hasAttribute('multiple')) {\n      // let multipleValue = parentSelect.getAttribute('multiple');\n      if(parentSelect.hasAttribute('multiple') && parentSelect.getAttribute('multiple') === '') {\n        this.isMultipleSelect = true;\n      } else if (parentSelect.getAttribute('multiple') === 'true') {\n        this.isMultipleSelect = true;\n      } else {\n        this.isMultipleSelect = false;\n      }\n    }\n  }\n\n  protected updated(_changedProperties: PropertyValues): void {\n    this.checkIfMultipleSelect();\n  }\n\n  private handleDefaultSlotChange() {\n    const textLabel = this.getTextLabel();\n\n    // Ignore the first time the label is set\n    if (typeof this.cachedTextLabel === 'undefined') {\n      this.cachedTextLabel = textLabel;\n      return;\n    }\n\n    // When the label changes, emit a slotchange event so parent controls see it\n    if (textLabel !== this.cachedTextLabel) {\n      this.cachedTextLabel = textLabel;\n      this.emit('slotchange');\n    }\n  }\n\n  private handleMouseEnter() {\n    this.hasHover = true;\n  }\n\n  private handleMouseLeave() {\n    this.hasHover = false;\n  }\n\n  @watch('disabled')\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  @watch('selected')\n  handleSelectedChange() {\n    this.setAttribute('aria-selected', this.selected ? 'true' : 'false');\n  }\n\n  @watch('value')\n  handleValueChange() {\n    // Ensure the value is a string. This ensures the next line doesn't error and allows framework users to pass numbers\n    // instead of requiring them to cast the value to a string.\n    if (typeof this.value !== 'string') {\n      this.value = String(this.value);\n    }\n\n    // if (this.value.includes(' ')) {\n    //   console.error(\n    //     `Option values cannot include a space. All spaces have been replaced with underscores.`,\n    //     this\n    //   );\n    //   this.value = this.value.replace(/ /g, '_');\n    // }\n  }\n\n  /** Returns a plain text label based on the option's content. */\n  getTextLabel() {\n    // Search for a label element inside the component\n    const labelElement = this.querySelector('label');\n\n    // If a label element is found, return its text content\n    if (labelElement) {\n      return labelElement.textContent?.trim() ?? '';\n    }\n\n    // If no label element is found, return the existing behavior\n    return (this.textContent ?? '').trim();\n  }\n\n  render() {\n    return html`\n      ${!this.hidden\n        ? html` <div\n            part=\"base\"\n            class=${classMap({\n              option: true,\n              'option--single-select': !this.isMultipleSelect,\n              'option--current': this.selected && !this.isMultipleSelect,\n              'option--disabled': this.disabled,\n              'option--selected': this.selected && !this.isMultipleSelect,\n              'option--hover': this.hasHover,\n            })}\n            @mouseenter=${this.handleMouseEnter}\n            @mouseleave=${this.handleMouseLeave}\n          >\n\n          ${this.isMultipleSelect ? html`<nile-checkbox part=\"checkbox\" class=\"option--checkbox\" .checked=${this.selected}></nile-checkbox>` : ''}\n\n            <slot part=\"prefix\" name=\"prefix\" class=\"option__prefix\"></slot>\n            <slot\n              part=\"label\"\n              class=\"option__label\"\n              @slotchange=${this.handleDefaultSlotChange}\n            ></slot>\n            <slot part=\"suffix\" name=\"suffix\" class=\"option__suffix\"></slot>\n          </div>`\n        : ''}\n    `;\n  }\n}\n\nexport default NileOption;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-option': NileOption;\n  }\n}\n"]}
+{"version":3,"file":"nile-option.js","sourceRoot":"","sources":["../../../src/nile-option/nile-option.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 { LitElement, CSSResultArray, TemplateResult } from 'lit';\nimport { styles } from './nile-option.css';\nimport '../nile-icon';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { html } from 'lit';\nimport { watch } from '../internal/watch';\nimport type { CSSResultGroup, PropertyValues } from 'lit';\nimport NileElement from '../internal/nile-element';\nimport '../nile-checkbox';\n\n/**\n * Nile icon component.\n *\n * @tag nile-option\n *\n */\n\n/**\n * @summary Options define the selectable items within various form controls such as [select](/components/select).\n * @status stable\n *\n * @dependency nile-icon\n *\n * @slot - The option's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n *\n * @csspart checked-icon - The checked icon, an `<nile-icon>` element.\n * @csspart base - The component's base wrapper.\n * @csspart label - The option's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n */\n\n@customElement('nile-option')\nexport class NileOption extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  private cachedTextLabel: string;\n\n  @query('.option__label') defaultSlot: HTMLSlotElement;\n\n  @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)\n  @state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging\n  @state() hidden = false; // the option is hidden\n  @state() isMultipleSelect = false;\n\n  /**\n   * The option's value. When selected, the containing form control will receive this value. The value must be unique\n   * from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\n   * multiple values.\n   */\n  @property({ reflect: true }) value = '';\n\n  @property({ type: Boolean }) showCheckbox: boolean = false;\n\n  /** Draws the option in a disabled state, preventing selection. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Indicates whether the option is selected. */\n  @property({ type: Boolean, reflect: true }) selected = false;\n\n  /* used to pass group name to the option, so that grouped options can be shown */\n  @property({ type: String, reflect: true }) groupName: string = '';\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'option');\n    this.setAttribute('aria-selected', 'false');\n\n    // Find the closest parent 'nile-select' or 'nile-virtual-select' element\n    const parentSelect = this.closest('nile-select') || this.closest('nile-virtual-select');\n    this.checkIfMultipleSelect();\n  }\n\n  checkIfMultipleSelect() {\n    // Find the closest parent 'nile-select' element\n    const parentSelect = this.closest('nile-select') || this.closest('nile-virtual-select');\n\n    // Check if the parent has the 'multiple' attribute\n    if (parentSelect && parentSelect.hasAttribute('multiple')) {\n      // let multipleValue = parentSelect.getAttribute('multiple');\n      if(parentSelect.hasAttribute('multiple') && parentSelect.getAttribute('multiple') === '') {\n        this.isMultipleSelect = true;\n      } else if (parentSelect.getAttribute('multiple') === 'true') {\n        this.isMultipleSelect = true;\n      } else {\n        this.isMultipleSelect = false;\n      }\n    }\n  }\n\n  protected updated(_changedProperties: PropertyValues): void {\n    this.checkIfMultipleSelect();\n  }\n\n  private handleDefaultSlotChange() {\n    const textLabel = this.getTextLabel();\n\n    // Ignore the first time the label is set\n    if (typeof this.cachedTextLabel === 'undefined') {\n      this.cachedTextLabel = textLabel;\n      return;\n    }\n\n    // When the label changes, emit a slotchange event so parent controls see it\n    if (textLabel !== this.cachedTextLabel) {\n      this.cachedTextLabel = textLabel;\n      this.emit('slotchange');\n    }\n  }\n\n  private handleMouseEnter() {\n    this.hasHover = true;\n  }\n\n  private handleMouseLeave() {\n    this.hasHover = false;\n  }\n\n  @watch('disabled')\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  @watch('selected')\n  handleSelectedChange() {\n    this.setAttribute('aria-selected', this.selected ? 'true' : 'false');\n  }\n\n  @watch('value')\n  handleValueChange() {\n    // Ensure the value is a string. This ensures the next line doesn't error and allows framework users to pass numbers\n    // instead of requiring them to cast the value to a string.\n    if (typeof this.value !== 'string') {\n      this.value = String(this.value);\n    }\n\n    // if (this.value.includes(' ')) {\n    //   console.error(\n    //     `Option values cannot include a space. All spaces have been replaced with underscores.`,\n    //     this\n    //   );\n    //   this.value = this.value.replace(/ /g, '_');\n    // }\n  }\n\n  /** Returns a plain text label based on the option's content. */\n  getTextLabel() {\n    // Search for a label element inside the component\n    const labelElement = this.querySelector('label');\n\n    // If a label element is found, return its text content\n    if (labelElement) {\n      return labelElement.textContent?.trim() ?? '';\n    }\n\n    // If no label element is found, return the existing behavior\n    return (this.textContent ?? '').trim();\n  }\n\n  render() {\n    return html`\n      ${!this.hidden\n        ? html` <div\n            part=\"base\"\n            class=${classMap({\n              option: true,\n              'option--single-select': !this.isMultipleSelect,\n              'option--current': this.selected && !this.isMultipleSelect,\n              'option--disabled': this.disabled,\n              'option--selected': this.selected && !this.isMultipleSelect,\n              'option--hover': this.hasHover,\n            })}\n            @mouseenter=${this.handleMouseEnter}\n            @mouseleave=${this.handleMouseLeave}\n          >\n\n          ${this.isMultipleSelect ? html`<nile-checkbox part=\"checkbox\" class=\"option--checkbox\" .checked=${this.selected}></nile-checkbox>` : ''}\n\n            <slot part=\"prefix\" name=\"prefix\" class=\"option__prefix\"></slot>\n            <slot\n              part=\"label\"\n              class=\"option__label\"\n              @slotchange=${this.handleDefaultSlotChange}\n            ></slot>\n            <slot part=\"suffix\" name=\"suffix\" class=\"option__suffix\"></slot>\n          </div>`\n        : ''}\n    `;\n  }\n}\n\nexport default NileOption;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-option': NileOption;\n  }\n}\n"]}

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

@@ -0,0 +1,22 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["NilePopover renders correctly"] = 
+`<nile-popup
+  active=""
+  arrowplacement="anchor"
+  distance="18"
+  placement="top"
+  shift=""
+  strategy="absolute"
+>
+  <slot
+    aria-describedby="tooltip"
+    name="anchor"
+    slot="anchor"
+  >
+  </slot>
+</nile-popup>
+`;
+/* end snapshot NilePopover renders correctly */
+

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

@@ -159,6 +159,8 @@ export declare class NileSelect extends NileElement implements NileFormControl {
     renderItemConfig?: RenderItemConfig;
     data: any;
     enableVirtualScroll: boolean;
+    /** To enable the group header in the select */
+    enableGroupHeader: boolean;
     /** Gets the validity state object */
     get validity(): ValidityState;
     /** Gets the validation message */
@@ -214,6 +216,10 @@ export declare class NileSelect extends NileElement implements NileFormControl {
     handleDisabledChange(): void;
     handleValueChange(): void;
     handleOpenChange(): Promise<void>;
+    private getAllGroupAttributes;
+    getUniqueGroupNames(arr: NileOption[]): string[];
+    handleGroupSearchChange(): void;
+    handleGroupShowSelected(): void;
     /** Shows the listbox. */
     show(): Promise<void>;
     /** Hides the listbox. */

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

@@ -169,6 +169,8 @@ let NileSelect = class NileSelect extends NileElement {
         this.noResultsMessage = 'No results found';
         this.data = [];
         this.enableVirtualScroll = false;
+        /** To enable the group header in the select */
+        this.enableGroupHeader = false;
         this.options = [];
     }
     connectedCallback() {
@@ -196,6 +198,9 @@ let NileSelect = class NileSelect extends NileElement {
         }
     }
     firstUpdated(_changedProperties) {
+        if (this.enableGroupHeader) {
+            this.handleGroupSearchChange();
+        }
         if (_changedProperties.has('multiple')) {
             this.setCheckBoxInOption(this.multiple);
         }
@@ -262,6 +267,9 @@ let NileSelect = class NileSelect extends NileElement {
                 el.hidden = this.showSelected;
             }
         });
+        if (this.enableGroupHeader) {
+            this.handleGroupShowSelected();
+        }
         // this.requestUpdate();
     }
     /**
@@ -274,6 +282,9 @@ let NileSelect = class NileSelect extends NileElement {
             el.selected = false;
             el.hidden = false;
         });
+        if (this.enableGroupHeader) {
+            this.handleGroupShowSelected();
+        }
         this.value = '';
         this.selectionChanged();
         this.emit('nile-change', { value: this.value, name: this.name });
@@ -391,6 +402,9 @@ let NileSelect = class NileSelect extends NileElement {
             this.showSelected = false;
             this.value = '';
             this.displayInput.focus({ preventScroll: true });
+            if (this.enableGroupHeader) {
+                this.handleGroupShowSelected();
+            }
             // Emit after update
             this.updateComplete.then(() => {
                 const val = { value: this.multiple ? this.value : '', name: this.name };
@@ -443,6 +457,9 @@ let NileSelect = class NileSelect extends NileElement {
                     el.hidden = this.showSelected;
                 }
             });
+            if (this.enableGroupHeader) {
+                this.handleGroupShowSelected();
+            }
             this.requestUpdate();
         }
     }
@@ -473,6 +490,9 @@ let NileSelect = class NileSelect extends NileElement {
                     el.hidden = this.showSelected;
                 }
             });
+            if (this.enableGroupHeader) {
+                this.handleGroupShowSelected();
+            }
             // Emit after updating
             this.updateComplete.then(() => {
                 this.nileInput({ value: this.value, name: this.name });
@@ -616,6 +636,9 @@ let NileSelect = class NileSelect extends NileElement {
     }
     handleSearchChange(e) {
         this.searchValue = e.detail.value;
+        if (this.enableGroupHeader) {
+            this.handleGroupSearchChange();
+        }
         if (!this.disableLocalSearch) {
             let filteredOptions = this.filterOptions(this.searchValue);
             if (filteredOptions.length === 0) {
@@ -666,8 +689,12 @@ let NileSelect = class NileSelect extends NileElement {
         if (this.open && !this.disabled) {
             // Reset the current option
             this.setCurrentOption(this.selectedOptions[0] || this.getFirstOption());
-            // Show
             this.emit('nile-show', { value: this.value, name: this.name });
+            if (this.enableGroupHeader) {
+                this.getAllGroupAttributes().forEach((el) => {
+                    el.element.classList.remove('nile-group-hidden');
+                });
+            }
             this.addOpenListeners();
             this.showNoResults = !this.getAllOptions()?.length;
             await stopAnimations(this);
@@ -705,6 +732,34 @@ let NileSelect = class NileSelect extends NileElement {
             this.emit('nile-after-hide', { value: this.value, name: this.name });
         }
     }
+    getAllGroupAttributes() {
+        return Array.from(this.querySelectorAll('nile-option-group[name]')).map((el) => ({
+            name: el?.getAttribute('name') || '',
+            data: el?.getAttribute('data'),
+            element: el
+        }));
+    }
+    getUniqueGroupNames(arr) {
+        return Array.from(new Set(arr.map(obj => obj?.groupName)));
+    }
+    handleGroupSearchChange() {
+        const filtered = new Set(this.getUniqueGroupNames(this.filterOptions(this.searchValue)));
+        this.getAllGroupAttributes().forEach(({ name, element }) => {
+            element?.classList.toggle('nile-group-hidden', !filtered.has(name));
+        });
+    }
+    handleGroupShowSelected() {
+        const visibleGroups = new Set();
+        if (this.showSelected) {
+            this.getAllOptions().forEach((option) => {
+                if (!option.hidden)
+                    visibleGroups.add(option.groupName);
+            });
+        }
+        this.getAllGroupAttributes().forEach(({ name, element }) => {
+            element?.classList.toggle('nile-group-hidden', this.showSelected && !visibleGroups.has(name));
+        });
+    }
     /** Shows the listbox. */
     async show() {
         if (this.open || this.disabled) {
@@ -1282,6 +1337,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], NileSelect.prototype, "enableVirtualScroll", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: true })
+], NileSelect.prototype, "enableGroupHeader", void 0);
 __decorate([
     watch('disabled', { waitUntilFirstUpdate: true })
 ], NileSelect.prototype, "handleDisabledChange", null);