@aquera/nile-elements 1.0.1 → 1.1.0-beta-1.0

package/dist/src/internal/resizable-table-helper.js.map

@@ -1 +1 @@
-{"version":3,"file":"resizable-table-helper.js","sourceRoot":"","sources":["../../../src/internal/resizable-table-helper.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\n/**\n * Resizable Helper Utility\n * Provides common functionality for resizable table columns\n */\n\nexport interface ResizeOptions {\n  minWidth?: number;\n  startX: number;\n  startWidth: number;\n  element: HTMLElement;\n}\n\nexport interface ColumnResizeData {\n  columnIndex: number;\n  newWidth: number;\n}\n\n/**\n * Handles the start of a resize operation\n * @param e Mouse event\n * @param options Resize configuration options\n * @returns Cleanup function to remove event listeners\n */\nexport function handleResizeStart(e: MouseEvent, options: ResizeOptions): () => void {\n  e.preventDefault();\n  e.stopPropagation();\n  \n  const { minWidth = 50, startX, startWidth, element } = options;\n  const resizer = e.target as HTMLElement;\n  \n  resizer.classList.add('resizing');\n\n  const onMouseMove = (e: MouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    \n    const delta = e.pageX - startX;\n    const newWidth = Math.max(minWidth, startWidth + delta);\n\n    element.style.width = newWidth + 'px';\n\n    synchronizeColumnWidth(element, newWidth);\n  };\n\n  const onMouseUp = () => {\n    resizer.classList.remove('resizing');\n    document.removeEventListener('mousemove', onMouseMove);\n    document.removeEventListener('mouseup', onMouseUp);\n  };\n\n  document.addEventListener('mousemove', onMouseMove);\n  document.addEventListener('mouseup', onMouseUp);\n\n  return () => {\n    document.removeEventListener('mousemove', onMouseMove);\n    document.removeEventListener('mouseup', onMouseUp);\n  };\n}\n\n/**\n * Gets the column index of an element within its table row\n * @param element The table cell or header element\n * @param selector The CSS selector for the column elements\n * @returns Column index (0-based)\n */\nexport function getColumnIndex(element: HTMLElement, selector: string): number {\n  const tableRow = element.closest('nile-table-row');\n  if (tableRow) {\n    const columns = tableRow.querySelectorAll(selector);\n    return Array.from(columns).indexOf(element);\n  }\n  return 0;\n}\n\n/**\n * Synchronizes the width of all cells in the same column\n * @param sourceElement The element that was resized\n * @param newWidth The new width to apply\n */\nexport function synchronizeColumnWidth(sourceElement: HTMLElement, newWidth: number): void {\n  const tableBody = sourceElement.closest('nile-table-body');\n  if (!tableBody) return;\n\n  const isHeader = sourceElement.tagName.toLowerCase() === 'nile-table-header-item';\n  const selector = isHeader ? 'nile-table-header-item' : 'nile-table-cell-item';\n  const targetSelector = isHeader ? 'nile-table-cell-item' : 'nile-table-cell-item';\n  \n  const columnIndex = getColumnIndex(sourceElement, selector);\n  const rows = tableBody.querySelectorAll('nile-table-row');\n  \n  rows.forEach(row => {\n    const cells = row.querySelectorAll(targetSelector);\n    if (cells[columnIndex]) {\n      cells[columnIndex].style.width = newWidth + 'px';\n    }\n  });\n}\n\n/**\n * Resets all column widths in a table to their default values\n * @param tableBody The table body element to reset\n */\nexport function resetAllColumnWidths(tableBody: HTMLElement): void {\n  const headerItems = tableBody.querySelectorAll('nile-table-header-item');\n  const cellItems = tableBody.querySelectorAll('nile-table-cell-item');\n  \n  headerItems.forEach(header => {\n    header.style.removeProperty('width');\n  });\n  \n  cellItems.forEach(cell => {\n    cell.style.removeProperty('width');\n  });\n}\n\n/**\n * Checks if an element has the resizable attribute\n * @param element The element to check\n * @returns True if the element is resizable\n */\nexport function isResizable(element: HTMLElement): boolean {\n  return element.hasAttribute('resizable');\n}\n\n/**\n * Creates a resize handler function for use in component event listeners\n * @param element The element to make resizable\n * @param minWidth Minimum width constraint\n * @returns Event handler function\n */\nexport function createResizeHandler(element: HTMLElement, minWidth: number = 50): (e: MouseEvent) => void {\n  return (e: MouseEvent) => {\n    const options: ResizeOptions = {\n      minWidth,\n      startX: e.pageX,\n      startWidth: element.offsetWidth,\n      element\n    };\n    \n    handleResizeStart(e, options);\n  };\n}\n\n/**\n * Detects if any columns in a table are resizable\n * @param tableBody The table body element\n * @returns True if any columns have resizable attribute\n */\nexport function hasResizableColumns(tableBody: HTMLElement): boolean {\n  const directChildren = Array.from(tableBody.children);\n  \n  const hasResizableHeaders = directChildren.some(child => {\n    if (child.tagName.toLowerCase() === 'nile-table-header-item') {\n      return child.hasAttribute('resizable');\n    }\n    return false;\n  });\n  \n  const hasResizableCells = directChildren.some(child => {\n    if (child.tagName.toLowerCase() === 'nile-table-cell-item') {\n      return child.hasAttribute('resizable');\n    }\n    return false;\n  });\n  \n  return hasResizableHeaders || hasResizableCells;\n} \n"]}
+{"version":3,"file":"resizable-table-helper.js","sourceRoot":"","sources":["../../../src/internal/resizable-table-helper.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAmBH;;;;;GAKG;AACH,MAAM,UAAU,iBAAiB,CAAC,CAAa,EAAE,OAAsB;IACrE,CAAC,CAAC,cAAc,EAAE,CAAC;IACnB,CAAC,CAAC,eAAe,EAAE,CAAC;IAEpB,MAAM,EAAE,QAAQ,GAAG,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC;IAC/D,MAAM,OAAO,GAAG,CAAC,CAAC,MAAqB,CAAC;IAExC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;IAElC,MAAM,WAAW,GAAG,CAAC,CAAa,EAAE,EAAE;QACpC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QAEpB,MAAM,KAAK,GAAG,CAAC,CAAC,KAAK,GAAG,MAAM,CAAC;QAC/B,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAU,GAAG,KAAK,CAAC,CAAC;QAExD,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,QAAQ,GAAG,IAAI,CAAC;QAEtC,sBAAsB,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;IAC5C,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QACrC,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;QACvD,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IACrD,CAAC,CAAC;IAEF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;IACpD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAEhD,OAAO,GAAG,EAAE;QACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;QACvD,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IACrD,CAAC,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,cAAc,CAAC,OAAoB,EAAE,QAAgB;IACnE,MAAM,QAAQ,GAAG,OAAO,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACnD,IAAI,QAAQ,EAAE,CAAC;QACb,MAAM,OAAO,GAAG,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QACpD,OAAO,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAC9C,CAAC;IACD,OAAO,CAAC,CAAC;AACX,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,sBAAsB,CAAC,aAA0B,EAAE,QAAgB;IACjF,MAAM,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAC3D,IAAI,CAAC,SAAS;QAAE,OAAO;IAEvB,MAAM,QAAQ,GAAG,aAAa,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,wBAAwB,CAAC;IAClF,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,sBAAsB,CAAC;IAC9E,MAAM,cAAc,GAAG,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,sBAAsB,CAAC;IAElF,MAAM,WAAW,GAAG,cAAc,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;IAC5D,MAAM,IAAI,GAAG,SAAS,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IAE1D,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;QACjB,MAAM,KAAK,GAAG,GAAG,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;QACnD,IAAI,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC;YACvB,KAAK,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC,KAAK,GAAG,QAAQ,GAAG,IAAI,CAAC;QACnD,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,WAAW,CAAC,OAAoB;IAC9C,OAAO,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;AAC3C,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,mBAAmB,CAAC,OAAoB,EAAE,WAAmB,EAAE;IAC7E,OAAO,CAAC,CAAa,EAAE,EAAE;QACvB,MAAM,OAAO,GAAkB;YAC7B,QAAQ;YACR,MAAM,EAAE,CAAC,CAAC,KAAK;YACf,UAAU,EAAE,OAAO,CAAC,WAAW;YAC/B,OAAO;SACR,CAAC;QAEF,iBAAiB,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IAChC,CAAC,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,mBAAmB,CAAC,SAAsB;IACxD,MAAM,WAAW,GAAG,SAAS,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC;IACzE,MAAM,SAAS,GAAG,SAAS,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,CAAC;IAErE,MAAM,mBAAmB,GAAG,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAC9D,WAAW,CAAC,IAAI,CAAC,CAClB,CAAC;IACF,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAC1D,WAAW,CAAC,IAAI,CAAC,CAClB,CAAC;IAEF,OAAO,mBAAmB,IAAI,iBAAiB,CAAC;AAClD,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\n/**\n * Resizable Helper Utility\n * Provides common functionality for resizable table columns\n */\n\nexport interface ResizeOptions {\n  minWidth?: number;\n  startX: number;\n  startWidth: number;\n  element: HTMLElement;\n}\n\nexport interface ColumnResizeData {\n  columnIndex: number;\n  newWidth: number;\n}\n\n/**\n * Handles the start of a resize operation\n * @param e Mouse event\n * @param options Resize configuration options\n * @returns Cleanup function to remove event listeners\n */\nexport function handleResizeStart(e: MouseEvent, options: ResizeOptions): () => void {\n  e.preventDefault();\n  e.stopPropagation();\n  \n  const { minWidth = 50, startX, startWidth, element } = options;\n  const resizer = e.target as HTMLElement;\n  \n  resizer.classList.add('resizing');\n\n  const onMouseMove = (e: MouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    \n    const delta = e.pageX - startX;\n    const newWidth = Math.max(minWidth, startWidth + delta);\n\n    element.style.width = newWidth + 'px';\n\n    synchronizeColumnWidth(element, newWidth);\n  };\n\n  const onMouseUp = () => {\n    resizer.classList.remove('resizing');\n    document.removeEventListener('mousemove', onMouseMove);\n    document.removeEventListener('mouseup', onMouseUp);\n  };\n\n  document.addEventListener('mousemove', onMouseMove);\n  document.addEventListener('mouseup', onMouseUp);\n\n  return () => {\n    document.removeEventListener('mousemove', onMouseMove);\n    document.removeEventListener('mouseup', onMouseUp);\n  };\n}\n\n/**\n * Gets the column index of an element within its table row\n * @param element The table cell or header element\n * @param selector The CSS selector for the column elements\n * @returns Column index (0-based)\n */\nexport function getColumnIndex(element: HTMLElement, selector: string): number {\n  const tableRow = element.closest('nile-table-row');\n  if (tableRow) {\n    const columns = tableRow.querySelectorAll(selector);\n    return Array.from(columns).indexOf(element);\n  }\n  return 0;\n}\n\n/**\n * Synchronizes the width of all cells in the same column\n * @param sourceElement The element that was resized\n * @param newWidth The new width to apply\n */\nexport function synchronizeColumnWidth(sourceElement: HTMLElement, newWidth: number): void {\n  const tableBody = sourceElement.closest('nile-table-body');\n  if (!tableBody) return;\n\n  const isHeader = sourceElement.tagName.toLowerCase() === 'nile-table-header-item';\n  const selector = isHeader ? 'nile-table-header-item' : 'nile-table-cell-item';\n  const targetSelector = isHeader ? 'nile-table-cell-item' : 'nile-table-cell-item';\n  \n  const columnIndex = getColumnIndex(sourceElement, selector);\n  const rows = tableBody.querySelectorAll('nile-table-row');\n  \n  rows.forEach(row => {\n    const cells = row.querySelectorAll(targetSelector);\n    if (cells[columnIndex]) {\n      cells[columnIndex].style.width = newWidth + 'px';\n    }\n  });\n}\n\n/**\n * Checks if an element has the resizable attribute\n * @param element The element to check\n * @returns True if the element is resizable\n */\nexport function isResizable(element: HTMLElement): boolean {\n  return element.hasAttribute('resizable');\n}\n\n/**\n * Creates a resize handler function for use in component event listeners\n * @param element The element to make resizable\n * @param minWidth Minimum width constraint\n * @returns Event handler function\n */\nexport function createResizeHandler(element: HTMLElement, minWidth: number = 50): (e: MouseEvent) => void {\n  return (e: MouseEvent) => {\n    const options: ResizeOptions = {\n      minWidth,\n      startX: e.pageX,\n      startWidth: element.offsetWidth,\n      element\n    };\n    \n    handleResizeStart(e, options);\n  };\n}\n\n/**\n * Detects if any columns in a table are resizable\n * @param tableBody The table body element\n * @returns True if any columns have resizable attribute\n */\nexport function hasResizableColumns(tableBody: HTMLElement): boolean {\n  const headerItems = tableBody.querySelectorAll('nile-table-header-item');\n  const cellItems = tableBody.querySelectorAll('nile-table-cell-item');\n  \n  const hasResizableHeaders = Array.from(headerItems).some(item => \n    isResizable(item)\n  );\n  const hasResizableCells = Array.from(cellItems).some(item => \n    isResizable(item)\n  );\n  \n  return hasResizableHeaders || hasResizableCells;\n} \n"]}

package/dist/src/internal/resizable-table-styles.d.ts

@@ -8,10 +8,9 @@
  * Resizable Styles Utility
  * Centralized styles for resizable table functionality
  */
-export declare const resizableTableStyles: import("lit").CSSResult;
+export declare const resizableHostStyles: import("lit").CSSResult;
 export declare const resizableHeaderStyles: import("lit").CSSResult;
 export declare const resizerStyles: import("lit").CSSResult;
-export declare const resizableCellStyles: import("lit").CSSResult;
 export declare const headerResizerStyles: import("lit").CSSResult;
 export declare const resizableSlotStyles: import("lit").CSSResult;
 export declare const tableLayoutStyles: import("lit").CSSResult;

package/dist/src/internal/resizable-table-styles.js

@@ -9,53 +9,38 @@ import { css } from 'lit';
  * Resizable Styles Utility
  * Centralized styles for resizable table functionality
  */
-export const resizableTableStyles = css `
-  :host([resizable]) .base {
-    overflow: unset;
-  }
-  :host([resizable]) .nile__table__body {
-    display: table;
-    table-layout: fixed;
-    border-collapse: collapse;
-    width: 100%;
+export const resizableHostStyles = css `
+  :host([resizable]) {
     position: relative;
+    overflow: hidden;
+    table-layout: fixed;
   }
 `;
 export const resizableHeaderStyles = css `
-  :host([resizable]) .headers {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    padding: var(--nile-spacing-xs, var(--ng-spacing-xs)) var(--nile-spacing-md, var(--ng-spacing-md));
+  :host([resizable]) {
     position: relative;
   }
 
   :host([resizable]) .header__item__wrapper {
-    border-right: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border-right: 1px solid var(--nile-colors-neutral-400);
     position: relative;
   }
-
-  :host([resizable]) .headers {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    display: block;
-  }
 `;
 export const resizerStyles = css `
   .resizer {
     position: absolute;
     right: 0;
-    top: 0px;
-    bottom: 0px;
+    top: -1000px;
+    bottom: -1000px;
     width: 8px;
     cursor: col-resize;
     user-select: none;
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background-color: var(--nile-colors-neutral-100);
     transition: background-color 0.2s;
     z-index: 10;
     opacity: 0;
     transition: opacity 0.2s ease;
+    pointer-events: none;
   }
 
   :host([resizable]):hover .resizer {
@@ -66,36 +51,35 @@ export const resizerStyles = css `
   .resizer::before {
     content: '';
     position: absolute;
-    right: 0px;
+    right: 3px;
     top: 0;
     width: 2px;
     height: 100%;
-    background-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
+    background-color: var(--nile-colors-neutral-500);
     opacity: 0.8;
   }
 
   .resizer:hover {
-    background-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    background-color: var(--nile-colors-neutral-400);
   }
 
   .resizer:hover::before {
-    background-color: var(--nile-colors-neutral-700, var(--ng-colors-border-primary));
+    background-color: var(--nile-colors-neutral-700);
     opacity: 1;
   }
 
   .resizer.resizing {
-    background-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    background-color: var(--nile-colors-neutral-400);
     opacity: 1;
     pointer-events: auto;
   }
 
   .resizer.resizing::before {
-    background-color: var(--nile-colors-neutral-700, var(--ng-colors-border-primary));
+    background-color: var(--nile-colors-neutral-700);
     opacity: 1;
     width: 3px;
   }
-`;
-export const resizableCellStyles = css `
+
   :host([resizable]) .column {
     overflow: hidden;
     text-overflow: ellipsis;

package/dist/src/internal/resizable-table-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"resizable-table-styles.js","sourceRoot":"","sources":["../../../src/internal/resizable-table-styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;GAGG;AAEH,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;CAWtC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;CAoBvC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoD/B,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;CAOrC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCrC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;CAgBrC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;CAInC,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 { css } from 'lit';\n\n/**\n * Resizable Styles Utility\n * Centralized styles for resizable table functionality\n */\n\nexport const resizableTableStyles = css`\n  :host([resizable]) .base {\n    overflow: unset;\n  }\n  :host([resizable]) .nile__table__body {\n    display: table;\n    table-layout: fixed;\n    border-collapse: collapse;\n    width: 100%;\n    position: relative;\n  }\n`;\n\nexport const resizableHeaderStyles = css`\n  :host([resizable]) .headers {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    padding: var(--nile-spacing-xs, var(--ng-spacing-xs)) var(--nile-spacing-md, var(--ng-spacing-md));\n    position: relative;\n  }\n\n  :host([resizable]) .header__item__wrapper {\n    border-right: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    position: relative;\n  }\n\n  :host([resizable]) .headers {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: block;\n  }\n`;\n\nexport const resizerStyles = css`\n  .resizer {\n    position: absolute;\n    right: 0;\n    top: 0px;\n    bottom: 0px;\n    width: 8px;\n    cursor: col-resize;\n    user-select: none;\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n    transition: background-color 0.2s;\n    z-index: 10;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n  }\n\n  :host([resizable]):hover .resizer {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  .resizer::before {\n    content: '';\n    position: absolute;\n    right: 0px;\n    top: 0;\n    width: 2px;\n    height: 100%;\n    background-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    opacity: 0.8;\n  }\n\n  .resizer:hover {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n  }\n\n  .resizer:hover::before {\n    background-color: var(--nile-colors-neutral-700, var(--ng-colors-border-primary));\n    opacity: 1;\n  }\n\n  .resizer.resizing {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  .resizer.resizing::before {\n    background-color: var(--nile-colors-neutral-700, var(--ng-colors-border-primary));\n    opacity: 1;\n    width: 3px;\n  }\n`;\n\nexport const resizableCellStyles = css`\n  :host([resizable]) .column {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: block;\n  }\n`;\n\nexport const headerResizerStyles = css`\n  .resizer {\n    position: absolute;\n    right: -2px;\n    top: -1000px;\n    bottom: -1000px;\n    width: 8px;\n    cursor: ew-resize;\n    user-select: none;\n    transition: background-color 0.2s;\n    z-index: 10;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n  }\n\n  :host([resizable]):hover .resizer {\n    opacity: 1;\n  }\n\n  .resizer::before {\n    content: '';\n    position: absolute;\n    height: 100%;\n    opacity: 0.8;\n  }\n\n  .resizer.resizing {\n    border-right: 4px double var(--nile-colors-neutral-400);\n    background-color: transparent;\n    opacity: 1;\n  }\n\n  :host([resizable]) .headers {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n`;\n\nexport const resizableSlotStyles = css`\n  :host([resizable]) ::slotted(*) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: block;\n  }\n\n  :host([resizable]) ::slotted(span),\n  :host([resizable]) ::slotted(div),\n  :host([resizable]) ::slotted(p) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: block;\n  }\n`;\n\nexport const tableLayoutStyles = css`\n  .nile__table__body[resizable] {\n    table-layout: fixed;\n  }\n`;\n"]}
+{"version":3,"file":"resizable-table-styles.js","sourceRoot":"","sources":["../../../src/internal/resizable-table-styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;GAGG;AAEH,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;CAMrC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;CASvC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4D/B,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCrC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;CAgBrC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;CAInC,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 { css } from 'lit';\n\n/**\n * Resizable Styles Utility\n * Centralized styles for resizable table functionality\n */\n\nexport const resizableHostStyles = css`\n  :host([resizable]) {\n    position: relative;\n    overflow: hidden;\n    table-layout: fixed;\n  }\n`;\n\nexport const resizableHeaderStyles = css`\n  :host([resizable]) {\n    position: relative;\n  }\n\n  :host([resizable]) .header__item__wrapper {\n    border-right: 1px solid var(--nile-colors-neutral-400);\n    position: relative;\n  }\n`;\n\nexport const resizerStyles = css`\n  .resizer {\n    position: absolute;\n    right: 0;\n    top: -1000px;\n    bottom: -1000px;\n    width: 8px;\n    cursor: col-resize;\n    user-select: none;\n    background-color: var(--nile-colors-neutral-100);\n    transition: background-color 0.2s;\n    z-index: 10;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n    pointer-events: none;\n  }\n\n  :host([resizable]):hover .resizer {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  .resizer::before {\n    content: '';\n    position: absolute;\n    right: 3px;\n    top: 0;\n    width: 2px;\n    height: 100%;\n    background-color: var(--nile-colors-neutral-500);\n    opacity: 0.8;\n  }\n\n  .resizer:hover {\n    background-color: var(--nile-colors-neutral-400);\n  }\n\n  .resizer:hover::before {\n    background-color: var(--nile-colors-neutral-700);\n    opacity: 1;\n  }\n\n  .resizer.resizing {\n    background-color: var(--nile-colors-neutral-400);\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  .resizer.resizing::before {\n    background-color: var(--nile-colors-neutral-700);\n    opacity: 1;\n    width: 3px;\n  }\n\n  :host([resizable]) .column {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: block;\n  }\n`;\n\nexport const headerResizerStyles = css`\n  .resizer {\n    position: absolute;\n    right: -2px;\n    top: -1000px;\n    bottom: -1000px;\n    width: 8px;\n    cursor: ew-resize;\n    user-select: none;\n    transition: background-color 0.2s;\n    z-index: 10;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n  }\n\n  :host([resizable]):hover .resizer {\n    opacity: 1;\n  }\n\n  .resizer::before {\n    content: '';\n    position: absolute;\n    height: 100%;\n    opacity: 0.8;\n  }\n\n  .resizer.resizing {\n    border-right: 4px double var(--nile-colors-neutral-400);\n    background-color: transparent;\n    opacity: 1;\n  }\n\n  :host([resizable]) .headers {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n`;\n\nexport const resizableSlotStyles = css`\n  :host([resizable]) ::slotted(*) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: block;\n  }\n\n  :host([resizable]) ::slotted(span),\n  :host([resizable]) ::slotted(div),\n  :host([resizable]) ::slotted(p) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: block;\n  }\n`;\n\nexport const tableLayoutStyles = css`\n  .nile__table__body[resizable] {\n    table-layout: fixed;\n  }\n`; \n"]}

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

@@ -12,9 +12,6 @@ export const styles = css `
 
   :host {
     box-sizing: border-box;
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   :host *,
@@ -32,36 +29,31 @@ export const styles = css `
   }
 
   .accordian {
-    border-top:solid 1px var(--nile-colors-neutral-500 , var(--ng-colors-border-primary));
-    background-color: var(--nile-colors-white-base , var(--ng-colors-bg-primary));
+    border-top:solid 1px var(--nile-colors-neutral-500);
+    background-color: var(--nile-colors-white-base);
     overflow-anchor: none;
-    line-height: var(--nile-line-height-inherit , var(--ng-line-height-text-sm));
   }
 
   .accordian--lg{
-    --accordian-text-size:var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
-    --accordian-heading-padding: var(--nile-spacing-xl , var(--ng-spacing-xl)) var(--nile-spacing-lg , var(--ng-spacing-lg));
-    --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-spacing-xl , var(--ng-spacing-3xl));
-    --accordion-font-family : var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+    --accordian-text-size:var(--sm-tesx, 14px);
+    --accordian-heading-padding: 16px 12px;
+    --accordian-content-padding: 6px 12px 18px;
   }
 
   .accordian--md{
-    --accordian-text-size:var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
-    --accordian-heading-padding: var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-spacing-lg , var(--ng-spacing-lg));
-    --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-type-scale-5 , var(--ng-spacing-3xl));
-    --accordion-font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+    --accordian-text-size:var(--sm-tesx, 14px);
+    --accordian-heading-padding: 12px 12px;
+    --accordian-content-padding: 6px 12px 18px;
   }
 
   .accordian--sm{
-    --accordian-text-size:var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
-    --accordian-heading-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-lg));
-    --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-xl)) var(--nile-spacing-lg , var(--ng-spacing-lg));
-    --accordion-font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+    --accordian-text-size:var(--sm-tesx, 12px);
+    --accordian-heading-padding: 6px 12px;
+    --accordian-content-padding: 6px 12px 12px;
   }
   
   .accordian {
     font-size: var(--accordian-text-size);
-    font-family: var(--accordion-font-family)
   }
 
   .accordian--disabled {
@@ -70,17 +62,17 @@ export const styles = css `
 
   .accordian__header {
     display: flex;
-    gap:var(--nile-spacing-lg , var(--ng-spacing-lg));
+    gap:12px;
     align-items: center;
     border-radius: inherit;
-    font-weight: var(--nile-font-weight-medium , var(--ng-font-weight-semibold));
+    font-weight:500;
     padding: var(--accordian-heading-padding);
     user-select: none;
     cursor: pointer;
   }
 
   .accordian__header--dark{
-    background-color:var(--nile-colors-dark-200 , var(--ng-colors-bg-tertiary));
+    background-color:var(--nile-colors-dark-200);
   }
 
   .accordian__header--arrow-left{
@@ -92,8 +84,7 @@ export const styles = css `
   }
 
   .accordian__header:focus-visible {
-    outline: solid 3px var(--nile-colors-blue-500);
-    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring-shadow-xs));
+    outline: solid 3px hsl(200.4, 98%, 39.4%);
     outline-offset: calc(1px + 1px);
   }
 
@@ -138,7 +129,7 @@ export const styles = css `
   }
 
   .accordian__content--arrow-left{
-   margin-left: var(--nile-spacing-4-x , var(--ng-spacing-3xl-alt));  
+   margin-left:28px;
   }
 `;
 export default [styles];

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

@@ -1 +1 @@
-{"version":3,"file":"nile-accordion.css.js","sourceRoot":"","sources":["../../../src/nile-accordion/nile-accordion.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoIxB,CAAC;AAEF,eAAe,CAAC,MAAM,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 {css} from 'lit';\n\n/**\n * Detail CSS\n */\nexport const styles = css`\n\n  :host {\n    box-sizing: border-box;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    display: block;\n  }\n\n  .accordian {\n    border-top:solid 1px var(--nile-colors-neutral-500 , var(--ng-colors-border-primary));\n    background-color: var(--nile-colors-white-base , var(--ng-colors-bg-primary));\n    overflow-anchor: none;\n    line-height: var(--nile-line-height-inherit , var(--ng-line-height-text-sm));\n  }\n\n  .accordian--lg{\n    --accordian-text-size:var(--nile-type-scale-3 , var(--ng-font-size-text-sm));\n    --accordian-heading-padding: var(--nile-spacing-xl , var(--ng-spacing-xl)) var(--nile-spacing-lg , var(--ng-spacing-lg));\n    --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-spacing-xl , var(--ng-spacing-3xl));\n    --accordion-font-family : var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n  }\n\n  .accordian--md{\n    --accordian-text-size:var(--nile-type-scale-3 , var(--ng-font-size-text-sm));\n    --accordian-heading-padding: var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-spacing-lg , var(--ng-spacing-lg));\n    --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-type-scale-5 , var(--ng-spacing-3xl));\n    --accordion-font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n  }\n\n  .accordian--sm{\n    --accordian-text-size:var(--nile-type-scale-3 , var(--ng-font-size-text-sm));\n    --accordian-heading-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-lg));\n    --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-xl)) var(--nile-spacing-lg , var(--ng-spacing-lg));\n    --accordion-font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n  }\n  \n  .accordian {\n    font-size: var(--accordian-text-size);\n    font-family: var(--accordion-font-family)\n  }\n\n  .accordian--disabled {\n    opacity: 0.5;\n  }\n\n  .accordian__header {\n    display: flex;\n    gap:var(--nile-spacing-lg , var(--ng-spacing-lg));\n    align-items: center;\n    border-radius: inherit;\n    font-weight: var(--nile-font-weight-medium , var(--ng-font-weight-semibold));\n    padding: var(--accordian-heading-padding);\n    user-select: none;\n    cursor: pointer;\n  }\n\n  .accordian__header--dark{\n    background-color:var(--nile-colors-dark-200 , var(--ng-colors-bg-tertiary));\n  }\n\n  .accordian__header--arrow-left{\n    flex-direction: row-reverse;\n  }\n\n  .accordian__header:focus {\n    outline: none;\n  }\n\n  .accordian__header:focus-visible {\n    outline: solid 3px var(--nile-colors-blue-500);\n    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring-shadow-xs));\n    outline-offset: calc(1px + 1px);\n  }\n\n  .accordian--disabled .accordian__header {\n    cursor: not-allowed;\n  }\n\n  .accordian--disabled .accordian__header:focus-visible {\n    outline: none;\n    box-shadow: none;\n  }\n\n  .accordian__summary {\n    flex: 1 1 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .accordian__summary-icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    transition: 250ms rotate ease;\n  }\n\n  .accordian--open .accordian__summary-icon {\n    rotate: 90deg;\n  }\n\n  .accordian--open slot[name='expand-icon'],\n  .accordian:not(.accordian--open) slot[name='collapse-icon'] {\n    display: none;\n  }\n\n  .accordian__body {\n    overflow: hidden;\n  }\n\n  .accordian__content {\n    display: block;\n    padding: var(--accordian-content-padding);\n  }\n\n  .accordian__content--arrow-left{\n   margin-left: var(--nile-spacing-4-x , var(--ng-spacing-3xl-alt));  \n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-accordion.css.js","sourceRoot":"","sources":["../../../src/nile-accordion/nile-accordion.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2HxB,CAAC;AAEF,eAAe,CAAC,MAAM,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 {css} from 'lit';\n\n/**\n * Detail CSS\n */\nexport const styles = css`\n\n  :host {\n    box-sizing: border-box;\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    display: block;\n  }\n\n  .accordian {\n    border-top:solid 1px var(--nile-colors-neutral-500);\n    background-color: var(--nile-colors-white-base);\n    overflow-anchor: none;\n  }\n\n  .accordian--lg{\n    --accordian-text-size:var(--sm-tesx, 14px);\n    --accordian-heading-padding: 16px 12px;\n    --accordian-content-padding: 6px 12px 18px;\n  }\n\n  .accordian--md{\n    --accordian-text-size:var(--sm-tesx, 14px);\n    --accordian-heading-padding: 12px 12px;\n    --accordian-content-padding: 6px 12px 18px;\n  }\n\n  .accordian--sm{\n    --accordian-text-size:var(--sm-tesx, 12px);\n    --accordian-heading-padding: 6px 12px;\n    --accordian-content-padding: 6px 12px 12px;\n  }\n  \n  .accordian {\n    font-size: var(--accordian-text-size);\n  }\n\n  .accordian--disabled {\n    opacity: 0.5;\n  }\n\n  .accordian__header {\n    display: flex;\n    gap:12px;\n    align-items: center;\n    border-radius: inherit;\n    font-weight:500;\n    padding: var(--accordian-heading-padding);\n    user-select: none;\n    cursor: pointer;\n  }\n\n  .accordian__header--dark{\n    background-color:var(--nile-colors-dark-200);\n  }\n\n  .accordian__header--arrow-left{\n    flex-direction: row-reverse;\n  }\n\n  .accordian__header:focus {\n    outline: none;\n  }\n\n  .accordian__header:focus-visible {\n    outline: solid 3px hsl(200.4, 98%, 39.4%);\n    outline-offset: calc(1px + 1px);\n  }\n\n  .accordian--disabled .accordian__header {\n    cursor: not-allowed;\n  }\n\n  .accordian--disabled .accordian__header:focus-visible {\n    outline: none;\n    box-shadow: none;\n  }\n\n  .accordian__summary {\n    flex: 1 1 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .accordian__summary-icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    transition: 250ms rotate ease;\n  }\n\n  .accordian--open .accordian__summary-icon {\n    rotate: 90deg;\n  }\n\n  .accordian--open slot[name='expand-icon'],\n  .accordian:not(.accordian--open) slot[name='collapse-icon'] {\n    display: none;\n  }\n\n  .accordian__body {\n    overflow: hidden;\n  }\n\n  .accordian__content {\n    display: block;\n    padding: var(--accordian-content-padding);\n  }\n\n  .accordian__content--arrow-left{\n   margin-left:28px;\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -184,10 +184,10 @@ let NileAccordion = class NileAccordion extends NileElement {
 
         <span part="summary-icon" class="accordian__summary-icon">
           <slot name="expand-icon">
-            <nile-icon name="var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" library="system"></nile-icon>
+            <nile-icon name="arrowright"></nile-icon>
           </slot>
           <slot name="collapse-icon">
-            <nile-icon name="var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" library="system"></nile-icon>
+            <nile-icon name="arrowright"></nile-icon>
           </slot>
         </span>
       </div>

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

@@ -1 +1 @@
-{"version":3,"file":"nile-accordion.js","sourceRoot":"","sources":["../../../src/nile-accordion/nile-accordion.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, html, CSSResultArray, TemplateResult} from 'lit';\nimport {styles} from './nile-accordion.css';\nimport NileElement from '../internal/nile-element';\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from '../internal/animate';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { getAnimation, setDefaultAnimation } from '../utilities/animation-registry';\nimport { waitForEvent } from '../internal/event';\nimport { watch } from '../internal/watch';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * Nile detail component.\n *\n * @tag nile-accordion\n *\n */\n@customElement('nile-accordion')\nexport class NileAccordion extends NileElement {\n\n/**\n * @summary Accordian show a brief summary and expand to show additional content.\n *\n * @dependency nile-icon\n *\n * @slot - The accordian' main content.\n * @slot summary - The accordian' summary. Alternatively, you can use the `summary` attribute.\n * @slot expand-icon - Optional expand icon to use instead of the default. Works best with `<nile-icon>`.\n * @slot collapse-icon - Optional collapse icon to use instead of the default. Works best with `<nile-icon>`.\n *\n * @event nile-show - Emitted when the accordian opens.\n * @event nile-after-show - Emitted after the accordian opens and all animations are complete.\n * @event nile-hide - Emitted when the accordian closes.\n * @event nile-after-hide - Emitted after the accordian closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper.\n * @csspart header - The header that wraps both the summary and the expand/collapse icon.\n * @csspart summary - The container that wraps the summary.\n * @csspart summary-icon - The container that wraps the expand/collapse icons.\n * @csspart content - The accordian content.\n *\n * @animation accordian.show - The animation to use when showing accordian. You can use `height: auto` with this animation.\n * @animation accordian.hide - The animation to use when hiding accordian. You can use `height: auto` with this animation.\n */\n\nstatic styles: CSSResultGroup = styles;\n\n\n@query('.accordian') accordian: HTMLElement;\n@query('.accordian__header') header: HTMLElement;\n@query('.accordian__body') body: HTMLElement;\n@query('.accordian__expand-icon-slot') expandIconSlot: HTMLSlotElement;\n\n/**\n * Indicates whether or not the accordian is open. You can toggle this attribute to show and hide the accordian, or you\n * can use the `show()` and `hide()` methods and this attribute will reflect the accordian' open state.\n */\n@property({ type: Boolean, reflect: true }) open = false;\n\n/**\n * Indicates the visual style of the accordian component. Accepted values are `'dark'` or `'light'`.\n * Defaults to `'light'`.\n */\n@property({ reflect: true }) variant: 'dark' | 'light' = 'light';\n\n/**\n * Specifies the direction of the arrow indicator. Accepted values are `'left'` or `'right'`.\n * Defaults to `'right'`.\n */\n@property({ reflect: true }) expandIconPlacement: 'left' | 'right' = 'right';\n\n/**\n * Specifies the size of the accordian component. Accepted values are `'sm'`, `'md'`, or `'lg'`.\n * Defaults to `'md'`.\n */\n@property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n/** The summary to show in the header. If you need to display HTML, use the `summary` slot instead. */\n@property() summary: string;\n\n/** Disables the accordian so it can't be toggled. */\n@property({ type: Boolean, reflect: true }) disabled = false;\n\nfirstUpdated() {\n  this.body.hidden = !this.open;\n  this.body.style.height = this.open ? 'auto' : '0';\n}\n\nprivate handleSummaryClick() {\n  if (!this.disabled) {\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n    }\n\n    this.header.focus();\n  }\n}\n\nprivate handleSummaryKeyDown(event: KeyboardEvent) {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  }\n\n  if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n    event.preventDefault();\n    this.hide();\n  }\n\n  if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n    event.preventDefault();\n    this.show();\n  }\n}\n\n@watch('open', { waitUntilFirstUpdate: true })\nasync handleOpenChange() {\n  if (this.open) {\n    // Show\n    const nileShow = this.emit('nile-show', { cancelable: true });\n    if (nileShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    await stopAnimations(this.body);\n    this.body.hidden = false;\n\n    const { keyframes, options } = getAnimation(this, 'accordian.show', { dir: 'ltr' });\n    await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n    this.body.style.height = 'auto';\n\n    this.emit('nile-after-show');\n  } else {\n    // Hide\n    const nileHide = this.emit('nile-hide', { cancelable: true });\n    if (nileHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    await stopAnimations(this.body);\n\n    const { keyframes, options } = getAnimation(this, 'accordian.hide', { dir: 'ltr' });\n    await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n    this.body.hidden = true;\n    this.body.style.height = 'auto';\n\n    this.emit('nile-after-hide');\n  }\n}\n\n/** Shows the accordian. */\nasync show() {\n  if (this.open || this.disabled) {\n    return undefined;\n  }\n\n  this.open = true;\n  return waitForEvent(this, 'nile-after-show');\n}\n\n/** Hides the accordian */\nasync hide() {\n  if (!this.open || this.disabled) {\n    return undefined;\n  }\n\n  this.open = false;\n  return waitForEvent(this, 'nile-after-hide');\n}\n\nrender() {\n  const isRtl = true;\n\n  return html`\n    <div\n      part=\"base\"\n      class=${classMap({\n        accordian: true,\n        'accordian--open': this.open,\n        'accordian--disabled': this.disabled,\n        'accordian--sm':this.size=='sm',\n        'accordian--md':this.size=='md',\n        'accordian--lg':this.size=='lg',\n      })}\n    >\n      <div\n        part=\"header\"\n        id=\"header\"\n        class=\"${classMap({\n          'accordian__header':true,\n          'accordian__header--dark':this.variant=='dark',\n          'accordian__header--arrow-left':'left'==this.expandIconPlacement\n          })}\"\n        role=\"button\"\n        aria-expanded=${this.open ? 'true' : 'false'}\n        aria-controls=\"content\"\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        tabindex=${this.disabled ? '-1' : '0'}\n        @click=${this.handleSummaryClick}\n        @keydown=${this.handleSummaryKeyDown}\n      >\n        <slot name=\"summary\" part=\"summary\" class=\"accordian__summary\">${this.summary}</slot>\n\n        <span part=\"summary-icon\" class=\"accordian__summary-icon\">\n          <slot name=\"expand-icon\">\n            <nile-icon name=\"var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" library=\"system\"></nile-icon>\n          </slot>\n          <slot name=\"collapse-icon\">\n            <nile-icon name=\"var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" library=\"system\"></nile-icon>\n          </slot>\n        </span>\n      </div>\n\n      <div class=\"accordian__body\" role=\"region\" aria-labelledby=\"header\">\n        <slot part=\"content\" id=\"content\" \n          class=\"${classMap({\n            'accordian__content':true,\n            'accordian__content--arrow-left':this.expandIconPlacement=='left'\n            })}\"></slot>\n      </div>\n    </div>\n  `;\n}\n}\n\nsetDefaultAnimation('accordian.show', {\nkeyframes: [\n  { height: '0', opacity: '0' },\n  { height: 'auto', opacity: '1' }\n],\noptions: { duration: 250, easing: 'linear' }\n});\n\nsetDefaultAnimation('accordian.hide', {\nkeyframes: [\n  { height: 'auto', opacity: '1' },\n  { height: '0', opacity: '0' }\n],\noptions: { duration: 250, easing: 'linear' }\n});\n\nexport default NileAccordion;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-accordion': NileAccordion;\n  }\n}\n"]}
+{"version":3,"file":"nile-accordion.js","sourceRoot":"","sources":["../../../src/nile-accordion/nile-accordion.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAa,IAAI,EAAiC,MAAM,KAAK,CAAC;AACrE,OAAO,EAAC,MAAM,EAAC,MAAM,sBAAsB,CAAC;AAC5C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,uBAAuB,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACzF,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AACpF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAG1C;;;;;GAKG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,WAAW;IAAvC;QAEP;;;;;;;;;;;;;;;;;;;;;;;WAuBG;;QAUH;;;WAGG;QACyC,SAAI,GAAG,KAAK,CAAC;QAEzD;;;WAGG;QAC0B,YAAO,GAAqB,OAAO,CAAC;QAEjE;;;WAGG;QAC0B,wBAAmB,GAAqB,OAAO,CAAC;QAE7E;;;WAGG;QAC0B,SAAI,GAAuB,IAAI,CAAC;QAK7D,qDAAqD;QACT,aAAQ,GAAG,KAAK,CAAC;IAuJ7D,CAAC;IArJD,YAAY;QACV,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QAC9B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC;IACpD,CAAC;IAEO,kBAAkB;QACxB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACd,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,CAAC;YAED,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;IAEO,oBAAoB,CAAC,KAAoB;QAC/C,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;YAEvB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACd,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,CAAC;QACH,CAAC;QAED,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;YACzD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC;QAED,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,EAAE,CAAC;YAC5D,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC;IACH,CAAC;IAGK,AAAN,KAAK,CAAC,gBAAgB;QACpB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO;YACP,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;YAC9D,IAAI,QAAQ,CAAC,gBAAgB,EAAE,CAAC;gBAC9B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;gBAClB,OAAO;YACT,CAAC;YAED,MAAM,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAChC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YAEzB,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC,IAAI,EAAE,gBAAgB,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC;YACpF,MAAM,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,uBAAuB,CAAC,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC;YAChG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YAEhC,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC/B,CAAC;aAAM,CAAC;YACN,OAAO;YACP,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;YAC9D,IAAI,QAAQ,CAAC,gBAAgB,EAAE,CAAC;gBAC9B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;gBACjB,OAAO;YACT,CAAC;YAED,MAAM,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAEhC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC,IAAI,EAAE,gBAAgB,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC;YACpF,MAAM,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,uBAAuB,CAAC,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC;YAChG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YACxB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YAEhC,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC/B,CAAC;IACH,CAAC;IAED,2BAA2B;IAC3B,KAAK,CAAC,IAAI;QACR,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC/B,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,OAAO,YAAY,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC;IAC/C,CAAC;IAED,0BAA0B;IAC1B,KAAK,CAAC,IAAI;QACR,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChC,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,OAAO,YAAY,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC;IAC/C,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC;QAEnB,OAAO,IAAI,CAAA;;;cAGC,QAAQ,CAAC;YACf,SAAS,EAAE,IAAI;YACf,iBAAiB,EAAE,IAAI,CAAC,IAAI;YAC5B,qBAAqB,EAAE,IAAI,CAAC,QAAQ;YACpC,eAAe,EAAC,IAAI,CAAC,IAAI,IAAE,IAAI;YAC/B,eAAe,EAAC,IAAI,CAAC,IAAI,IAAE,IAAI;YAC/B,eAAe,EAAC,IAAI,CAAC,IAAI,IAAE,IAAI;SAChC,CAAC;;;;;iBAKS,QAAQ,CAAC;YAChB,mBAAmB,EAAC,IAAI;YACxB,yBAAyB,EAAC,IAAI,CAAC,OAAO,IAAE,MAAM;YAC9C,+BAA+B,EAAC,MAAM,IAAE,IAAI,CAAC,mBAAmB;SAC/D,CAAC;;wBAEY,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;;wBAE5B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;mBACrC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG;iBAC5B,IAAI,CAAC,kBAAkB;mBACrB,IAAI,CAAC,oBAAoB;;yEAE6B,IAAI,CAAC,OAAO;;;;;;;;;;;;;;mBAclE,QAAQ,CAAC;YAChB,oBAAoB,EAAC,IAAI;YACzB,gCAAgC,EAAC,IAAI,CAAC,mBAAmB,IAAE,MAAM;SAChE,CAAC;;;GAGX,CAAC;IACJ,CAAC;;AA1LM,oBAAM,GAAmB,MAAM,AAAzB,CAA0B;AAGlB;IAApB,KAAK,CAAC,YAAY,CAAC;gDAAwB;AACf;IAA5B,KAAK,CAAC,oBAAoB,CAAC;6CAAqB;AACtB;IAA1B,KAAK,CAAC,kBAAkB,CAAC;2CAAmB;AACN;IAAtC,KAAK,CAAC,8BAA8B,CAAC;qDAAiC;AAM3B;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAc;AAM5B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAqC;AAMpC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0DAAiD;AAMhD;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAiC;AAGjD;IAAX,QAAQ,EAAE;8CAAiB;AAGgB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAkB;AA0CvD;IADL,KAAK,CAAC,MAAM,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;qDAmC7C;AA3IY,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAsNzB;;AAED,mBAAmB,CAAC,gBAAgB,EAAE;IACtC,SAAS,EAAE;QACT,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE;QAC7B,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE;KACjC;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE;CAC3C,CAAC,CAAC;AAEH,mBAAmB,CAAC,gBAAgB,EAAE;IACtC,SAAS,EAAE;QACT,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE;QAChC,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE;KAC9B;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE;CAC3C,CAAC,CAAC;AAEH,eAAe,aAAa,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 {LitElement, html, CSSResultArray, TemplateResult} from 'lit';\nimport {styles} from './nile-accordion.css';\nimport NileElement from '../internal/nile-element';\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from '../internal/animate';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { getAnimation, setDefaultAnimation } from '../utilities/animation-registry';\nimport { waitForEvent } from '../internal/event';\nimport { watch } from '../internal/watch';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * Nile detail component.\n *\n * @tag nile-accordion\n *\n */\n@customElement('nile-accordion')\nexport class NileAccordion extends NileElement {\n\n/**\n * @summary Accordian show a brief summary and expand to show additional content.\n *\n * @dependency nile-icon\n *\n * @slot - The accordian' main content.\n * @slot summary - The accordian' summary. Alternatively, you can use the `summary` attribute.\n * @slot expand-icon - Optional expand icon to use instead of the default. Works best with `<nile-icon>`.\n * @slot collapse-icon - Optional collapse icon to use instead of the default. Works best with `<nile-icon>`.\n *\n * @event nile-show - Emitted when the accordian opens.\n * @event nile-after-show - Emitted after the accordian opens and all animations are complete.\n * @event nile-hide - Emitted when the accordian closes.\n * @event nile-after-hide - Emitted after the accordian closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper.\n * @csspart header - The header that wraps both the summary and the expand/collapse icon.\n * @csspart summary - The container that wraps the summary.\n * @csspart summary-icon - The container that wraps the expand/collapse icons.\n * @csspart content - The accordian content.\n *\n * @animation accordian.show - The animation to use when showing accordian. You can use `height: auto` with this animation.\n * @animation accordian.hide - The animation to use when hiding accordian. You can use `height: auto` with this animation.\n */\n\nstatic styles: CSSResultGroup = styles;\n\n\n@query('.accordian') accordian: HTMLElement;\n@query('.accordian__header') header: HTMLElement;\n@query('.accordian__body') body: HTMLElement;\n@query('.accordian__expand-icon-slot') expandIconSlot: HTMLSlotElement;\n\n/**\n * Indicates whether or not the accordian is open. You can toggle this attribute to show and hide the accordian, or you\n * can use the `show()` and `hide()` methods and this attribute will reflect the accordian' open state.\n */\n@property({ type: Boolean, reflect: true }) open = false;\n\n/**\n * Indicates the visual style of the accordian component. Accepted values are `'dark'` or `'light'`.\n * Defaults to `'light'`.\n */\n@property({ reflect: true }) variant: 'dark' | 'light' = 'light';\n\n/**\n * Specifies the direction of the arrow indicator. Accepted values are `'left'` or `'right'`.\n * Defaults to `'right'`.\n */\n@property({ reflect: true }) expandIconPlacement: 'left' | 'right' = 'right';\n\n/**\n * Specifies the size of the accordian component. Accepted values are `'sm'`, `'md'`, or `'lg'`.\n * Defaults to `'md'`.\n */\n@property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n/** The summary to show in the header. If you need to display HTML, use the `summary` slot instead. */\n@property() summary: string;\n\n/** Disables the accordian so it can't be toggled. */\n@property({ type: Boolean, reflect: true }) disabled = false;\n\nfirstUpdated() {\n  this.body.hidden = !this.open;\n  this.body.style.height = this.open ? 'auto' : '0';\n}\n\nprivate handleSummaryClick() {\n  if (!this.disabled) {\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n    }\n\n    this.header.focus();\n  }\n}\n\nprivate handleSummaryKeyDown(event: KeyboardEvent) {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  }\n\n  if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n    event.preventDefault();\n    this.hide();\n  }\n\n  if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n    event.preventDefault();\n    this.show();\n  }\n}\n\n@watch('open', { waitUntilFirstUpdate: true })\nasync handleOpenChange() {\n  if (this.open) {\n    // Show\n    const nileShow = this.emit('nile-show', { cancelable: true });\n    if (nileShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    await stopAnimations(this.body);\n    this.body.hidden = false;\n\n    const { keyframes, options } = getAnimation(this, 'accordian.show', { dir: 'ltr' });\n    await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n    this.body.style.height = 'auto';\n\n    this.emit('nile-after-show');\n  } else {\n    // Hide\n    const nileHide = this.emit('nile-hide', { cancelable: true });\n    if (nileHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    await stopAnimations(this.body);\n\n    const { keyframes, options } = getAnimation(this, 'accordian.hide', { dir: 'ltr' });\n    await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n    this.body.hidden = true;\n    this.body.style.height = 'auto';\n\n    this.emit('nile-after-hide');\n  }\n}\n\n/** Shows the accordian. */\nasync show() {\n  if (this.open || this.disabled) {\n    return undefined;\n  }\n\n  this.open = true;\n  return waitForEvent(this, 'nile-after-show');\n}\n\n/** Hides the accordian */\nasync hide() {\n  if (!this.open || this.disabled) {\n    return undefined;\n  }\n\n  this.open = false;\n  return waitForEvent(this, 'nile-after-hide');\n}\n\nrender() {\n  const isRtl = true;\n\n  return html`\n    <div\n      part=\"base\"\n      class=${classMap({\n        accordian: true,\n        'accordian--open': this.open,\n        'accordian--disabled': this.disabled,\n        'accordian--sm':this.size=='sm',\n        'accordian--md':this.size=='md',\n        'accordian--lg':this.size=='lg',\n      })}\n    >\n      <div\n        part=\"header\"\n        id=\"header\"\n        class=\"${classMap({\n          'accordian__header':true,\n          'accordian__header--dark':this.variant=='dark',\n          'accordian__header--arrow-left':'left'==this.expandIconPlacement\n          })}\"\n        role=\"button\"\n        aria-expanded=${this.open ? 'true' : 'false'}\n        aria-controls=\"content\"\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        tabindex=${this.disabled ? '-1' : '0'}\n        @click=${this.handleSummaryClick}\n        @keydown=${this.handleSummaryKeyDown}\n      >\n        <slot name=\"summary\" part=\"summary\" class=\"accordian__summary\">${this.summary}</slot>\n\n        <span part=\"summary-icon\" class=\"accordian__summary-icon\">\n          <slot name=\"expand-icon\">\n            <nile-icon name=\"arrowright\"></nile-icon>\n          </slot>\n          <slot name=\"collapse-icon\">\n            <nile-icon name=\"arrowright\"></nile-icon>\n          </slot>\n        </span>\n      </div>\n\n      <div class=\"accordian__body\" role=\"region\" aria-labelledby=\"header\">\n        <slot part=\"content\" id=\"content\" \n          class=\"${classMap({\n            'accordian__content':true,\n            'accordian__content--arrow-left':this.expandIconPlacement=='left'\n            })}\"></slot>\n      </div>\n    </div>\n  `;\n}\n}\n\nsetDefaultAnimation('accordian.show', {\nkeyframes: [\n  { height: '0', opacity: '0' },\n  { height: 'auto', opacity: '1' }\n],\noptions: { duration: 250, easing: 'linear' }\n});\n\nsetDefaultAnimation('accordian.hide', {\nkeyframes: [\n  { height: 'auto', opacity: '1' },\n  { height: '0', opacity: '0' }\n],\noptions: { duration: 250, easing: 'linear' }\n});\n\nexport default NileAccordion;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-accordion': NileAccordion;\n  }\n}\n"]}

package/dist/src/nile-auto-complete/nile-auto-complete.css.js

@@ -12,9 +12,6 @@ export const styles = css `
   :host {
     --virtual-scroll-container-width:110px;
     --virtual-scroll-container-height:200px;
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   .nile-dropdown--input {

package/dist/src/nile-auto-complete/nile-auto-complete.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-auto-complete.css.js","sourceRoot":"","sources":["../../../src/nile-auto-complete/nile-auto-complete.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;CAyBxB,CAAC;AAEF,eAAe,CAAC,MAAM,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 { css } from 'lit';\n\n/**\n * AutoComplete CSS\n */\nexport const styles = css`\n  :host {\n    --virtual-scroll-container-width:110px;\n    --virtual-scroll-container-height:200px;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .nile-dropdown--input {\n    width: 100%;\n  }\n\n  .virtualized__menu{\n    min-width: var(--virtual-scroll-container-width);\n    min-height: var(--virtual-scroll-container-height) !important;\n  }\n\n  .virtualized__menu nile-menu-item{\n    width:100%;\n  }\n\n  .nile-auto-complete--input {\n    width: 100%;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-auto-complete.css.js","sourceRoot":"","sources":["../../../src/nile-auto-complete/nile-auto-complete.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;CAsBxB,CAAC;AAEF,eAAe,CAAC,MAAM,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 { css } from 'lit';\n\n/**\n * AutoComplete CSS\n */\nexport const styles = css`\n  :host {\n    --virtual-scroll-container-width:110px;\n    --virtual-scroll-container-height:200px;\n  }\n\n  .nile-dropdown--input {\n    width: 100%;\n  }\n\n  .virtualized__menu{\n    min-width: var(--virtual-scroll-container-width);\n    min-height: var(--virtual-scroll-container-height) !important;\n  }\n\n  .virtualized__menu nile-menu-item{\n    width:100%;\n  }\n\n  .nile-auto-complete--input {\n    width: 100%;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-auto-complete/nile-auto-complete.d.ts

@@ -12,8 +12,6 @@ export declare class NileAutoComplete extends NileElement {
     value: string;
     placeholder: string;
     noBorder: boolean;
-    noOutline: boolean;
-    noPadding: boolean;
     loading: boolean;
     filterFunction: (item: string, searchedValue: string) => boolean;
     renderItemFunction: (item: any) => string;

package/dist/src/nile-auto-complete/nile-auto-complete.js

@@ -16,8 +16,6 @@ let NileAutoComplete = class NileAutoComplete extends NileElement {
         this.value = '';
         this.placeholder = 'Type here ..';
         this.noBorder = false;
-        this.noOutline = false;
-        this.noPadding = false;
         this.loading = false;
         this.filterFunction = (item, searchedValue) => item.toLowerCase().includes(searchedValue.toLowerCase());
         this.renderItemFunction = (item) => item;
@@ -43,11 +41,9 @@ let NileAutoComplete = class NileAutoComplete extends NileElement {
     render() {
         const content = this.enableVirtualScroll ? this.getVirtualizedContent() : this.getContent();
         return html `
-      <nile-dropdown class="nile-dropdown--input" ?open=${this.isDropdownOpen} noOpenOnCLick exportparts="input">
+      <nile-dropdown class="nile-dropdown--input" ?open=${this.isDropdownOpen} noOpenOnCLick>
         <nile-input class="nile-auto-complete--input"
           ?no-border=${this.noBorder}
-          ?no-outline=${this.noOutline}
-          ?no-padding=${this.noPadding}
           .disabled=${this.disabled}
           .value=${this.value}
           @nile-input=${this.handleSearch}
@@ -55,9 +51,8 @@ let NileAutoComplete = class NileAutoComplete extends NileElement {
           @click=${this.handleClick}
           slot="trigger"
           placeholder=${this.placeholder}
-          exportparts="input"
         >
-          ${this.loading ? html `<nile-icon slot="suffix" color="var(--nile-colors-primary-600)" name="var(--nile-icon-button-loading-blue-animated, var(--ng-icon-button-loading-blue-animated))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" library="system"></nile-icon>` : nothing}
+          ${this.loading ? html `<nile-icon slot="suffix" color="var(--nile-colors-primary-600)" name="button-loading-blue-animated"></nile-icon>` : nothing}
         </nile-input>
         ${this.menuItems.length > 0 && !this.loading
             ? content
@@ -162,12 +157,6 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], NileAutoComplete.prototype, "noBorder", void 0);
-__decorate([
-    property({ type: Boolean })
-], NileAutoComplete.prototype, "noOutline", void 0);
-__decorate([
-    property({ type: Boolean })
-], NileAutoComplete.prototype, "noPadding", void 0);
 __decorate([
     property({ type: Boolean })
 ], NileAutoComplete.prototype, "loading", void 0);

package/dist/src/nile-auto-complete/nile-auto-complete.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-auto-complete.js","sourceRoot":"","sources":["../../../src/nile-auto-complete/nile-auto-complete.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n  nothing,\n} from 'lit';\nimport { customElement, query, state, property } from 'lit/decorators.js';\nimport { styles } from './nile-auto-complete.css';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup, PropertyValues } from 'lit';\nimport { NileDropdown } from '../nile-dropdown';\n\nimport { virtualize } from '@lit-labs/virtualizer/virtualize.js';\n\n// Define the custom element 'nile-auto-complete'\n@customElement('nile-auto-complete')\nexport class NileAutoComplete extends NileElement {\n\n  static styles: CSSResultGroup = styles;\n\n  @query('nile-dropdown') dropdownElement: NileDropdown;\n\n  // Define component properties\n\n  @property({ type: Boolean }) disabled: boolean = false;\n\n  @property({ type: Boolean }) isDropdownOpen: boolean = false;\n\n  @property({ type: Boolean }) enableVirtualScroll: boolean = false;\n\n  @property({ type: Boolean }) openOnFocus: boolean = false;\n\n  @property({ type: String }) value: string = '';\n\n  @property({ type: String }) placeholder: string = 'Type here ..';\n\n  @property({ type: Boolean }) noBorder: boolean = false;\n  \n  @property({ type: Boolean }) noOutline: boolean = false;\n\n  @property({ type: Boolean }) noPadding: boolean = false;\n\n  @property({ type: Boolean }) loading: boolean = false;\n\n  @property({ attribute:false}) filterFunction: (item:string,searchedValue:string)=>boolean=(item:string,searchedValue:string)=>item.toLowerCase().includes(searchedValue.toLowerCase());\n\n  @property({ attribute:false}) renderItemFunction: (item:any)=>string = (item:any)=>item;\n\n  @property({ type: Array }) allMenuItems: any = [];\n\n  @state() menuItems: any = [];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.renderItemFunction=(item:any)=>item;\n  }\n\n  protected updated(changedProperties: PropertyValues): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('allMenuItems')){\n      this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n      this.setVirtualMenuWidth();\n    }\n    if (changedProperties.has('isDropdownOpen')) this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n    if (changedProperties.has('value')){\n      this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n    }\n  }\n\n  public render(): TemplateResult {\n    const content=this.enableVirtualScroll?this.getVirtualizedContent():this.getContent();\n    return html`\n      <nile-dropdown class=\"nile-dropdown--input\" ?open=${this.isDropdownOpen} noOpenOnCLick exportparts=\"input\">\n        <nile-input class=\"nile-auto-complete--input\"\n          ?no-border=${this.noBorder}\n          ?no-outline=${this.noOutline}\n          ?no-padding=${this.noPadding}\n          .disabled=${this.disabled}\n          .value=${this.value}\n          @nile-input=${this.handleSearch}\n          @focus=${this.handleFocus}\n          @click=${this.handleClick}\n          slot=\"trigger\"\n          placeholder=${this.placeholder}\n          exportparts=\"input\"\n        >\n          ${this.loading?html`<nile-icon slot=\"suffix\" color=\"var(--nile-colors-primary-600)\" name=\"var(--nile-icon-button-loading-blue-animated, var(--ng-icon-button-loading-blue-animated))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" library=\"system\"></nile-icon>`:nothing}\n        </nile-input>\n        ${this.menuItems.length > 0 && !this.loading\n          ? content\n          : nothing}\n      </nile-dropdown>\n    `;\n  }  \n  \n  getVirtualizedContent():TemplateResult{\n    return html`\n      <nile-menu class=\"virtualized__menu\" @nile-select=${this.handleSelect} id=\"content-menu\" exportparts=\"menu__items-wrapper:options__wrapper\">\n        ${virtualize({\n          items: this.menuItems,\n          renderItem: (item:any):TemplateResult=>this.getItemRenderFunction(item),\n\t\t\t\t\tscroller:true\n        })}\n      </nile-menu>\n    `\n  }\n\n  getContent():TemplateResult{\n    return html`\n      <nile-menu id=\"content-menu\" @nile-select=${this.handleSelect} exportparts=\"menu__items-wrapper:options__wrapper\">\n        ${this.menuItems.map((item: any)  => this.getItemRenderFunction(item))}\n      </nile-menu>`\n  }\n\n  getItemRenderFunction(item:any):TemplateResult{\n    const value=this.renderItemFunction(item)\n    return html`\n      <nile-menu-item value=${value}>\n        ${value}\n      </nile-menu-item>\n    `;\n  }\n\n  private handleSelect(event: CustomEvent) {\n    this.value = event.detail.value;\n    this.emit('nile-complete', { value: event.detail.value });\n    this.isDropdownOpen = false;\n    this.dropdownElement?.hide();\n  }\n\n  private setVirtualMenuWidth() {\n    const maxLengthOption = this.menuItems\n      .reduce((acc: number, curr: any) => {\n        const currLength = this.renderItemFunction(curr).length\n        return acc > currLength ? acc : currLength\n      }, 0)\n    const defaultWith = 110;\n    const pixelMultiplier = 9.5;\n    const menuWidth = maxLengthOption * pixelMultiplier < defaultWith ? defaultWith : maxLengthOption * pixelMultiplier;\n    this.style.setProperty(\"--virtual-scroll-container-width\", menuWidth + \"px\");\n  }\n\n  private handleSearch(event: CustomEvent) {\n    this.value = event.detail.value.toLowerCase();\n\n    // Filter menu items based on the search value\n    this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n\n    this.isDropdownOpen = this.menuItems.length > 0;\n    if (this.isDropdownOpen) this.dropdownElement?.show();\n  }\n\n  public handleFocus() {\n    if (!this.openOnFocus) {\n      return;\n    }\n\n    // Delay opening the dropdown to allow focus to take effect\n    setTimeout(() => {\n      this.isDropdownOpen = true;\n      this.dropdownElement?.show();\n    }, 300);\n  }\n\n  private handleClick() {\n    this.isDropdownOpen = true;\n    this.dropdownElement?.show();\n  }\n\n  applyFilter<T>(list: T[], filterFn: (item: T,searchValue?:string) => boolean): T[] {\n    if(typeof(list)!=='object') return []\n    const res:T[]=[]\n    list.forEach( el=> filterFn(el,this.value) && res.push(el) )\n    return res\n  }\n\n}\n\nexport default NileAutoComplete;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-auto-complete': NileAutoComplete;\n  }\n}\n"]}
+{"version":3,"file":"nile-auto-complete.js","sourceRoot":"","sources":["../../../src/nile-auto-complete/nile-auto-complete.ts"],"names":[],"mappings":";AAAA,OAAO,EAEL,IAAI,EAGJ,OAAO,GACR,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAInD,OAAO,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AAEjE,iDAAiD;AAE1C,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,WAAW;IAA1C;;QAML,8BAA8B;QAED,aAAQ,GAAY,KAAK,CAAC;QAE1B,mBAAc,GAAY,KAAK,CAAC;QAEhC,wBAAmB,GAAY,KAAK,CAAC;QAErC,gBAAW,GAAY,KAAK,CAAC;QAE9B,UAAK,GAAW,EAAE,CAAC;QAEnB,gBAAW,GAAW,cAAc,CAAC;QAEpC,aAAQ,GAAY,KAAK,CAAC;QAE1B,YAAO,GAAY,KAAK,CAAC;QAExB,mBAAc,GAA8C,CAAC,IAAW,EAAC,aAAoB,EAAC,EAAE,CAAA,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,aAAa,CAAC,WAAW,EAAE,CAAC,CAAC;QAEzJ,uBAAkB,GAAuB,CAAC,IAAQ,EAAC,EAAE,CAAA,IAAI,CAAC;QAE7D,iBAAY,GAAQ,EAAE,CAAC;QAEzC,cAAS,GAAQ,EAAE,CAAC;IA2H/B,CAAC;IAzHC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,kBAAkB,GAAC,CAAC,IAAQ,EAAC,EAAE,CAAA,IAAI,CAAC;IAC3C,CAAC;IAES,OAAO,CAAC,iBAAiC;QACjD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,cAAc,CAAC,EAAC,CAAC;YACzC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,EAAC,IAAI,CAAC,cAAc,CAAC,CAAC;YACzE,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC7B,CAAC;QACD,IAAI,iBAAiB,CAAC,GAAG,CAAC,gBAAgB,CAAC;YAAE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,EAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QACtH,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAC,CAAC;YAClC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,EAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAC3E,CAAC;IACH,CAAC;IAEM,MAAM;QACX,MAAM,OAAO,GAAC,IAAI,CAAC,mBAAmB,CAAA,CAAC,CAAA,IAAI,CAAC,qBAAqB,EAAE,CAAA,CAAC,CAAA,IAAI,CAAC,UAAU,EAAE,CAAC;QACtF,OAAO,IAAI,CAAA;0DAC2C,IAAI,CAAC,cAAc;;uBAEtD,IAAI,CAAC,QAAQ;sBACd,IAAI,CAAC,QAAQ;mBAChB,IAAI,CAAC,KAAK;wBACL,IAAI,CAAC,YAAY;mBACtB,IAAI,CAAC,WAAW;mBAChB,IAAI,CAAC,WAAW;;wBAEX,IAAI,CAAC,WAAW;;YAE5B,IAAI,CAAC,OAAO,CAAA,CAAC,CAAA,IAAI,CAAA,kHAAkH,CAAA,CAAC,CAAA,OAAO;;UAE7I,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO;YAC1C,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;IAED,qBAAqB;QACnB,OAAO,IAAI,CAAA;0DAC2C,IAAI,CAAC,YAAY;UACjE,UAAU,CAAC;YACX,KAAK,EAAE,IAAI,CAAC,SAAS;YACrB,UAAU,EAAE,CAAC,IAAQ,EAAgB,EAAE,CAAA,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;YAC5E,QAAQ,EAAC,IAAI;SACT,CAAC;;KAEL,CAAA;IACH,CAAC;IAED,UAAU;QACR,OAAO,IAAI,CAAA;kDACmC,IAAI,CAAC,YAAY;UACzD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAS,EAAG,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC;mBAC3D,CAAA;IACjB,CAAC;IAED,qBAAqB,CAAC,IAAQ;QAC5B,MAAM,KAAK,GAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAA;QACzC,OAAO,IAAI,CAAA;8BACe,KAAK;UACzB,KAAK;;KAEV,CAAC;IACJ,CAAC;IAEO,YAAY,CAAC,KAAkB;QACrC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QAChC,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;QAC1D,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAC5B,IAAI,CAAC,eAAe,EAAE,IAAI,EAAE,CAAC;IAC/B,CAAC;IAEO,mBAAmB;QACzB,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS;aACnC,MAAM,CAAC,CAAC,GAAW,EAAE,IAAS,EAAE,EAAE;YACjC,MAAM,UAAU,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,MAAM,CAAA;YACvD,OAAO,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,UAAU,CAAA;QAC5C,CAAC,EAAE,CAAC,CAAC,CAAA;QACP,MAAM,WAAW,GAAG,GAAG,CAAC;QACxB,MAAM,eAAe,GAAG,GAAG,CAAC;QAC5B,MAAM,SAAS,GAAG,eAAe,GAAG,eAAe,GAAG,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,eAAe,GAAG,eAAe,CAAC;QACpH,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,kCAAkC,EAAE,SAAS,GAAG,IAAI,CAAC,CAAC;IAC/E,CAAC;IAEO,YAAY,CAAC,KAAkB;QACrC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;QAE9C,8CAA8C;QAC9C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,EAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAEzE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;QAChD,IAAI,IAAI,CAAC,cAAc;YAAE,IAAI,CAAC,eAAe,EAAE,IAAI,EAAE,CAAC;IACxD,CAAC;IAEM,WAAW;QAChB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YACtB,OAAO;QACT,CAAC;QAED,2DAA2D;QAC3D,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;YAC3B,IAAI,CAAC,eAAe,EAAE,IAAI,EAAE,CAAC;QAC/B,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC3B,IAAI,CAAC,eAAe,EAAE,IAAI,EAAE,CAAC;IAC/B,CAAC;IAED,WAAW,CAAI,IAAS,EAAE,QAAkD;QAC1E,IAAG,OAAM,CAAC,IAAI,CAAC,KAAG,QAAQ;YAAE,OAAO,EAAE,CAAA;QACrC,MAAM,GAAG,GAAK,EAAE,CAAA;QAChB,IAAI,CAAC,OAAO,CAAE,EAAE,CAAA,EAAE,CAAC,QAAQ,CAAC,EAAE,EAAC,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAE,CAAA;QAC5D,OAAO,GAAG,CAAA;IACZ,CAAC;;AArJM,uBAAM,GAAmB,MAAM,AAAzB,CAA0B;AAEf;IAAvB,KAAK,CAAC,eAAe,CAAC;yDAA+B;AAIzB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAA2B;AAE1B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wDAAiC;AAEhC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6DAAsC;AAErC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qDAA8B;AAE9B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAsC;AAEpC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAA2B;AAE1B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAA0B;AAExB;IAA7B,QAAQ,CAAC,EAAE,SAAS,EAAC,KAAK,EAAC,CAAC;wDAA0J;AAEzJ;IAA7B,QAAQ,CAAC,EAAE,SAAS,EAAC,KAAK,EAAC,CAAC;4DAA2D;AAE7D;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;sDAAwB;AAEzC;IAAR,KAAK,EAAE;mDAAqB;AA9BlB,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAyJ5B;;AAED,eAAe,gBAAgB,CAAC","sourcesContent":["import {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n  nothing,\n} from 'lit';\nimport { customElement, query, state, property } from 'lit/decorators.js';\nimport { styles } from './nile-auto-complete.css';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup, PropertyValues } from 'lit';\nimport { NileDropdown } from '../nile-dropdown';\n\nimport { virtualize } from '@lit-labs/virtualizer/virtualize.js';\n\n// Define the custom element 'nile-auto-complete'\n@customElement('nile-auto-complete')\nexport class NileAutoComplete extends NileElement {\n\n  static styles: CSSResultGroup = styles;\n\n  @query('nile-dropdown') dropdownElement: NileDropdown;\n\n  // Define component properties\n\n  @property({ type: Boolean }) disabled: boolean = false;\n\n  @property({ type: Boolean }) isDropdownOpen: boolean = false;\n\n  @property({ type: Boolean }) enableVirtualScroll: boolean = false;\n\n  @property({ type: Boolean }) openOnFocus: boolean = false;\n\n  @property({ type: String }) value: string = '';\n\n  @property({ type: String }) placeholder: string = 'Type here ..';\n\n  @property({ type: Boolean }) noBorder: boolean = false;\n\n  @property({ type: Boolean }) loading: boolean = false;\n\n  @property({ attribute:false}) filterFunction: (item:string,searchedValue:string)=>boolean=(item:string,searchedValue:string)=>item.toLowerCase().includes(searchedValue.toLowerCase());\n\n  @property({ attribute:false}) renderItemFunction: (item:any)=>string = (item:any)=>item;\n\n  @property({ type: Array }) allMenuItems: any = [];\n\n  @state() menuItems: any = [];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.renderItemFunction=(item:any)=>item;\n  }\n\n  protected updated(changedProperties: PropertyValues): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('allMenuItems')){\n      this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n      this.setVirtualMenuWidth();\n    }\n    if (changedProperties.has('isDropdownOpen')) this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n    if (changedProperties.has('value')){\n      this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n    }\n  }\n\n  public render(): TemplateResult {\n    const content=this.enableVirtualScroll?this.getVirtualizedContent():this.getContent();\n    return html`\n      <nile-dropdown class=\"nile-dropdown--input\" ?open=${this.isDropdownOpen} noOpenOnCLick>\n        <nile-input class=\"nile-auto-complete--input\"\n          ?no-border=${this.noBorder}\n          .disabled=${this.disabled}\n          .value=${this.value}\n          @nile-input=${this.handleSearch}\n          @focus=${this.handleFocus}\n          @click=${this.handleClick}\n          slot=\"trigger\"\n          placeholder=${this.placeholder}\n        >\n          ${this.loading?html`<nile-icon slot=\"suffix\" color=\"var(--nile-colors-primary-600)\" name=\"button-loading-blue-animated\"></nile-icon>`:nothing}\n        </nile-input>\n        ${this.menuItems.length > 0 && !this.loading\n          ? content\n          : nothing}\n      </nile-dropdown>\n    `;\n  }  \n  \n  getVirtualizedContent():TemplateResult{\n    return html`\n      <nile-menu class=\"virtualized__menu\" @nile-select=${this.handleSelect} id=\"content-menu\" exportparts=\"menu__items-wrapper:options__wrapper\">\n        ${virtualize({\n          items: this.menuItems,\n          renderItem: (item:any):TemplateResult=>this.getItemRenderFunction(item),\n\t\t\t\t\tscroller:true\n        })}\n      </nile-menu>\n    `\n  }\n\n  getContent():TemplateResult{\n    return html`\n      <nile-menu id=\"content-menu\" @nile-select=${this.handleSelect} exportparts=\"menu__items-wrapper:options__wrapper\">\n        ${this.menuItems.map((item: any)  => this.getItemRenderFunction(item))}\n      </nile-menu>`\n  }\n\n  getItemRenderFunction(item:any):TemplateResult{\n    const value=this.renderItemFunction(item)\n    return html`\n      <nile-menu-item value=${value}>\n        ${value}\n      </nile-menu-item>\n    `;\n  }\n\n  private handleSelect(event: CustomEvent) {\n    this.value = event.detail.value;\n    this.emit('nile-complete', { value: event.detail.value });\n    this.isDropdownOpen = false;\n    this.dropdownElement?.hide();\n  }\n\n  private setVirtualMenuWidth() {\n    const maxLengthOption = this.menuItems\n      .reduce((acc: number, curr: any) => {\n        const currLength = this.renderItemFunction(curr).length\n        return acc > currLength ? acc : currLength\n      }, 0)\n    const defaultWith = 110;\n    const pixelMultiplier = 9.5;\n    const menuWidth = maxLengthOption * pixelMultiplier < defaultWith ? defaultWith : maxLengthOption * pixelMultiplier;\n    this.style.setProperty(\"--virtual-scroll-container-width\", menuWidth + \"px\");\n  }\n\n  private handleSearch(event: CustomEvent) {\n    this.value = event.detail.value.toLowerCase();\n\n    // Filter menu items based on the search value\n    this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n\n    this.isDropdownOpen = this.menuItems.length > 0;\n    if (this.isDropdownOpen) this.dropdownElement?.show();\n  }\n\n  public handleFocus() {\n    if (!this.openOnFocus) {\n      return;\n    }\n\n    // Delay opening the dropdown to allow focus to take effect\n    setTimeout(() => {\n      this.isDropdownOpen = true;\n      this.dropdownElement?.show();\n    }, 300);\n  }\n\n  private handleClick() {\n    this.isDropdownOpen = true;\n    this.dropdownElement?.show();\n  }\n\n  applyFilter<T>(list: T[], filterFn: (item: T,searchValue?:string) => boolean): T[] {\n    if(typeof(list)!=='object') return []\n    const res:T[]=[]\n    list.forEach( el=> filterFn(el,this.value) && res.push(el) )\n    return res\n  }\n\n}\n\nexport default NileAutoComplete;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-auto-complete': NileAutoComplete;\n  }\n}"]}