@aquera/nile-elements 0.1.64-beta-1.2 → 0.1.64

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

@@ -0,0 +1,111 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Handles the start of a resize operation
+ * @param e Mouse event
+ * @param options Resize configuration options
+ * @returns Cleanup function to remove event listeners
+ */
+export function handleResizeStart(e, options) {
+    e.preventDefault();
+    e.stopPropagation();
+    const { minWidth = 50, startX, startWidth, element } = options;
+    const resizer = e.target;
+    resizer.classList.add('resizing');
+    const onMouseMove = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const delta = e.pageX - startX;
+        const newWidth = Math.max(minWidth, startWidth + delta);
+        element.style.width = newWidth + 'px';
+        synchronizeColumnWidth(element, newWidth);
+    };
+    const onMouseUp = () => {
+        resizer.classList.remove('resizing');
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+    };
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+    return () => {
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+    };
+}
+/**
+ * Gets the column index of an element within its table row
+ * @param element The table cell or header element
+ * @param selector The CSS selector for the column elements
+ * @returns Column index (0-based)
+ */
+export function getColumnIndex(element, selector) {
+    const tableRow = element.closest('nile-table-row');
+    if (tableRow) {
+        const columns = tableRow.querySelectorAll(selector);
+        return Array.from(columns).indexOf(element);
+    }
+    return 0;
+}
+/**
+ * Synchronizes the width of all cells in the same column
+ * @param sourceElement The element that was resized
+ * @param newWidth The new width to apply
+ */
+export function synchronizeColumnWidth(sourceElement, newWidth) {
+    const tableBody = sourceElement.closest('nile-table-body');
+    if (!tableBody)
+        return;
+    const isHeader = sourceElement.tagName.toLowerCase() === 'nile-table-header-item';
+    const selector = isHeader ? 'nile-table-header-item' : 'nile-table-cell-item';
+    const targetSelector = isHeader ? 'nile-table-cell-item' : 'nile-table-cell-item';
+    const columnIndex = getColumnIndex(sourceElement, selector);
+    const rows = tableBody.querySelectorAll('nile-table-row');
+    rows.forEach(row => {
+        const cells = row.querySelectorAll(targetSelector);
+        if (cells[columnIndex]) {
+            cells[columnIndex].style.width = newWidth + 'px';
+        }
+    });
+}
+/**
+ * Checks if an element has the resizable attribute
+ * @param element The element to check
+ * @returns True if the element is resizable
+ */
+export function isResizable(element) {
+    return element.hasAttribute('resizable');
+}
+/**
+ * Creates a resize handler function for use in component event listeners
+ * @param element The element to make resizable
+ * @param minWidth Minimum width constraint
+ * @returns Event handler function
+ */
+export function createResizeHandler(element, minWidth = 50) {
+    return (e) => {
+        const options = {
+            minWidth,
+            startX: e.pageX,
+            startWidth: element.offsetWidth,
+            element
+        };
+        handleResizeStart(e, options);
+    };
+}
+/**
+ * Detects if any columns in a table are resizable
+ * @param tableBody The table body element
+ * @returns True if any columns have resizable attribute
+ */
+export function hasResizableColumns(tableBody) {
+    const headerItems = tableBody.querySelectorAll('nile-table-header-item');
+    const cellItems = tableBody.querySelectorAll('nile-table-cell-item');
+    const hasResizableHeaders = Array.from(headerItems).some(item => isResizable(item));
+    const hasResizableCells = Array.from(cellItems).some(item => isResizable(item));
+    return hasResizableHeaders || hasResizableCells;
+}
+//# sourceMappingURL=resizable-table-helper.js.map

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

@@ -0,0 +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 * 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

@@ -0,0 +1,16 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Resizable Styles Utility
+ * Centralized styles for resizable table functionality
+ */
+export declare const resizableHostStyles: import("lit").CSSResult;
+export declare const resizableHeaderStyles: import("lit").CSSResult;
+export declare const resizerStyles: 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

@@ -0,0 +1,149 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { css } from 'lit';
+/**
+ * Resizable Styles Utility
+ * Centralized styles for resizable table functionality
+ */
+export const resizableHostStyles = css `
+  :host([resizable]) {
+    position: relative;
+    overflow: hidden;
+    table-layout: fixed;
+  }
+`;
+export const resizableHeaderStyles = css `
+  :host([resizable]) {
+    position: relative;
+  }
+
+  :host([resizable]) .header__item__wrapper {
+    border-right: 1px solid var(--nile-colors-neutral-400);
+    position: relative;
+  }
+`;
+export const resizerStyles = css `
+  .resizer {
+    position: absolute;
+    right: 0;
+    top: -1000px;
+    bottom: -1000px;
+    width: 8px;
+    cursor: col-resize;
+    user-select: none;
+    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 {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .resizer::before {
+    content: '';
+    position: absolute;
+    right: 3px;
+    top: 0;
+    width: 2px;
+    height: 100%;
+    background-color: var(--nile-colors-neutral-500);
+    opacity: 0.8;
+  }
+
+  .resizer:hover {
+    background-color: var(--nile-colors-neutral-400);
+  }
+
+  .resizer:hover::before {
+    background-color: var(--nile-colors-neutral-700);
+    opacity: 1;
+  }
+
+  .resizer.resizing {
+    background-color: var(--nile-colors-neutral-400);
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .resizer.resizing::before {
+    background-color: var(--nile-colors-neutral-700);
+    opacity: 1;
+    width: 3px;
+  }
+
+  :host([resizable]) .column {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+  }
+`;
+export const headerResizerStyles = css `
+  .resizer {
+    position: absolute;
+    right: -2px;
+    top: -1000px;
+    bottom: -1000px;
+    width: 8px;
+    cursor: ew-resize;
+    user-select: none;
+    transition: background-color 0.2s;
+    z-index: 10;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+  }
+
+  :host([resizable]):hover .resizer {
+    opacity: 1;
+  }
+
+  .resizer::before {
+    content: '';
+    position: absolute;
+    height: 100%;
+    opacity: 0.8;
+  }
+
+  .resizer.resizing {
+    border-right: 4px double var(--nile-colors-neutral-400);
+    background-color: transparent;
+    opacity: 1;
+  }
+
+  :host([resizable]) .headers {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;
+export const resizableSlotStyles = css `
+  :host([resizable]) ::slotted(*) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+  }
+
+  :host([resizable]) ::slotted(span),
+  :host([resizable]) ::slotted(div),
+  :host([resizable]) ::slotted(p) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+  }
+`;
+export const tableLayoutStyles = css `
+  .nile__table__body[resizable] {
+    table-layout: fixed;
+  }
+`;
+//# sourceMappingURL=resizable-table-styles.js.map

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

@@ -0,0 +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,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-chip/nile-chip.js

@@ -58,7 +58,16 @@ let NileChip = class NileChip extends NileElement {
     updated(changedProperties) {
         super.updated(changedProperties);
         if (changedProperties.has('autoCompleteOptions')) {
-            this.filteredAutoCompleteOptions = [...this.autoCompleteOptions];
+            let options = this.autoCompleteOptions;
+            if (typeof options === 'string') {
+                try {
+                    options = JSON.parse(options);
+                }
+                catch (e) {
+                    options = [];
+                }
+            }
+            this.filteredAutoCompleteOptions = Array.isArray(options) ? [...options] : [];
             if (this.noDuplicates) {
                 this.filteredAutoCompleteOptions =
                     this.filteredAutoCompleteOptions.filter(option => !this.value.includes(option));

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

@@ -1 +1 @@
-{"version":3,"file":"nile-chip.js","sourceRoot":"","sources":["../../../src/nile-chip/nile-chip.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n  PropertyValues,\n} from 'lit';\nimport { customElement, query, state, property } from 'lit/decorators.js';\nimport { styles } from './nile-chip.css';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HasSlotController } from '../internal/slot';\nimport NileElement, { NileFormControl } from '../internal/nile-element';\n\ninterface CustomEventDetail {\n  value: string;\n}\n\n@customElement('nile-chip')\nexport class NileChip extends NileElement {\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  private readonly hasSlotController = new HasSlotController(\n    this,\n    'help-text',\n    'label'\n  );\n\n  @state() tags: string[] = [];\n\n  @state() inputValue: string = '';\n\n  @state() isDropdownOpen: boolean = false;\n\n  @query('nile-auto-complete') autoComplete!: any;\n\n  /** Sets the input to a warning state, changing its visual appearance. */\n  @property({ type: Boolean }) warning = false;\n\n  /** Sets the input to an error state, changing its visual appearance. */\n  @property({ type: Boolean }) error = false;\n\n  /** Sets the input to a success state, changing its visual appearance. */\n  @property({ type: Boolean }) success = false;\n\n  /** Disables the duplicate entries. */\n  @property({ type: Boolean }) noDuplicates = false;\n\n  /** The input's label. If you need to display HTML, use the `label` slot instead. */\n  @property() label = '';\n\n  /** Adds a clear button when the input is not empty. */\n  @property({ type: Boolean }) acceptUserInput = false;\n\n  /** Adds a clear button when the input is not empty. */\n  @property({ type: Boolean }) clearable = false;\n\n  /** Placeholder text to show as a hint when the input is empty. */\n  @property() placeholder = 'type here...';\n\n  /** Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /** Disables the input. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  // AUTO-COMPLETE-OPTIONS\n\n  /** Virtual scroll in  dropdown options. */\n  @property({ type: Boolean }) enableVirtualScroll = false;\n\n  @property({ type: Array }) autoCompleteOptions: any[] = [];\n\n  @property({ type: Array }) filteredAutoCompleteOptions: any[] = [];\n\n  @property({ type: Array }) value: any[] = [];\n\n  @property({ type: Boolean }) noWrap: boolean = false;\n\n  @property({ type: Boolean }) loading: boolean = false;\n\n  @property({ type: Array }) errorIndexes: number[] = [];\n\n  @property({ attribute: 'help-text', reflect: true }) helpText = '';\n\n  @property({ attribute: 'error-message', reflect: true }) errorMessage = '';\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  protected updated(changedProperties: PropertyValues): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('autoCompleteOptions')) {\n      this.filteredAutoCompleteOptions = [...this.autoCompleteOptions];\n      if (this.noDuplicates) {\n        this.filteredAutoCompleteOptions =\n          this.filteredAutoCompleteOptions.filter(\n            option => !this.value.includes(option)\n          );\n      }\n    }\n    if (changedProperties.has('value')){\n      this.tags = [...this.value];\n      this.onTagsChanged();\n    }\n    if (changedProperties.has('tags')){\n      this.onTagsChanged();\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (this.noDuplicates) {\n      this.filteredAutoCompleteOptions =\n        this.filteredAutoCompleteOptions.filter(\n          option => !this.value.includes(option)\n        );\n    }\n    this.emit('nile-init');\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.emit('nile-destroy');\n  }\n\n  render() {\n    // Check if slots are present\n    const hasLabelSlot = this.hasSlotController.test('label');\n    const hasHelpTextSlot = this.hasSlotController.test('help-text');\n\n    // Check if label and help text are present\n    const hasLabel = this.label ? true : !!hasLabelSlot;\n\n    const hasHelpText = this.helpText ? true : false;\n    const hasErrorMessage = this.errorMessage ? true : false;\n\n    return html`\n      <div\n        part=\"form-control\"\n        class=${classMap({\n          'form-control': true,\n          'form-control--medium': true,\n          'form-control--has-label': hasLabel,\n          'form-control--has-help-text': hasHelpText,\n          'nile-chip--disabled': this.disabled,\n        })}\n      >\n        <label\n          part=\"form-control-label\"\n          class=\"form-control__label\"\n          for=\"input\"\n          aria-hidden=${hasLabel ? 'false' : 'true'}\n        >\n          <slot name=\"label\">${this.label}</slot>\n        </label>\n\n        <div\n          part='base' \n          class=${classMap({\n            'nile-chip': true,\n            'nile-chip--warning': this.warning,\n            'nile-chip--error': this.error,\n            'nile-chip--success': this.success,\n            'nile-chip--no-wrap': this.noWrap,\n          })}\n        >\n          ${this.tags.map(\n            (tag, index) => html`\n              <nile-tag\n                class=${classMap({\n                  'nile-chip__tags': true,\n                })}\n                .variant=${this.errorIndexes.includes(index) ? 'error' : 'normal'}\n                @nile-remove=${() => this.handleRemove(tag)}\n                removable\n                pill\n              >\n                ${tag}\n              </nile-tag>\n            `\n          )}\n          <div class=\"nile-chip__auto-complete\">\n            <nile-auto-complete\n              .enableVirtualScroll=${this.enableVirtualScroll}\n              .allMenuItems=${this.filteredAutoCompleteOptions}\n              .filterFunction=${this.filterFunction}\n              .renderItemFunction=${this.renderItemFunction}\n              .loading=\"${this.loading}\"\n              .value=${this.inputValue}\n              ?isDropdownOpen=${this.isDropdownOpen}\n              .noBorder=${true}\n              openOnFocus\n              exportparts=\"options__wrapper\"\n              .placeholder=${this.placeholder}\n              @nile-input=${this.handleInputChange}\n              @keydown=${this.handleInputKeydown}\n              @nile-focus=${this.handleFocus}\n              @nile-complete=${this.handleSelect}\n            ></nile-auto-complete>\n          </div>\n        </div>\n        ${\n          hasHelpText\n            ? html`\n                <nile-form-help-text>${this.helpText}</nile-form-help-text>\n              `\n            : ``\n        }\n\n        ${\n          hasErrorMessage\n            ? html`\n                <nile-form-error-message\n                  >${this.errorMessage}</nile-form-error-message\n                >\n              `\n            : ``\n        }\n      </div>\n    `;\n  }\n\n  private handleSelect(event: CustomEvent<CustomEventDetail>) {\n    // Add the selected value to the tags array only if it doesn't already exist\n    if (!this.noDuplicates || !this.tags.includes(event.detail.value)) {\n      this.tags = [...this.tags, event.detail.value];\n      this.emit('nile-chip-change', { value: this.tags });\n      this.resetInput();\n    }\n  }\n\n  private handleRemove(value: string) {\n    // Remove the tag from the tags array\n    this.tags = this.tags.filter(tag => tag !== value);\n\n    if (this.noDuplicates && this.autoCompleteOptions.includes(value)) {\n      this.filteredAutoCompleteOptions = [\n        ...this.filteredAutoCompleteOptions,\n        value,\n      ];\n    }\n    this.emit('nile-chip-change', { value: this.tags });\n  }\n\n  private handleInputChange(event: CustomEvent<CustomEventDetail>) {\n    // Update the input value\n    this.inputValue = event.detail.value;\n  }\n\n  private handleInputKeydown(event: KeyboardEvent) {\n    if (!this.acceptUserInput) {\n      return;\n    }\n\n    if(event.key === 'Tab'){\n      event.preventDefault()\n    }\n    \n    if (\n      (event.key === 'Enter' || event.key === 'Tab' ) \n      && this.inputValue \n      && (!this.noDuplicates || !this.tags.includes(this.inputValue))\n    ) {\n      event.preventDefault()\n      this.tags = [...this.tags, this.inputValue];\n      this.resetInput();\n      this.emit('nile-chip-change', { value: this.tags });\n    }\n\n    if(\n      (event.key === 'Enter'|| event.key === 'Tab' ) \n      && this.inputValue \n      && (this.noDuplicates || this.tags.includes(this.inputValue))\n    ){\n      this.emit('nile-duplicates-blocked');\n    }\n  }\n\n  private handleFocus() {\n    this.isDropdownOpen = true;\n  }\n\n  onTagsChanged() {\n    if (this.noDuplicates)\n      this.filteredAutoCompleteOptions = this.filteredAutoCompleteOptions.filter(option => !this.tags.includes(option));\n  }\n\n\n  private resetInput() {\n    // Reset the input-related properties\n    this.inputValue = '';\n    this.isDropdownOpen = false;\n    this.autoComplete.value = '';\n    this.autoComplete.handleFocus();\n  }\n}\n\nexport default NileChip;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-chip': NileChip;\n  }\n}\n"]}
+{"version":3,"file":"nile-chip.js","sourceRoot":"","sources":["../../../src/nile-chip/nile-chip.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n  PropertyValues,\n} from 'lit';\nimport { customElement, query, state, property } from 'lit/decorators.js';\nimport { styles } from './nile-chip.css';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HasSlotController } from '../internal/slot';\nimport NileElement, { NileFormControl } from '../internal/nile-element';\n\ninterface CustomEventDetail {\n  value: string;\n}\n\n@customElement('nile-chip')\nexport class NileChip extends NileElement {\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  private readonly hasSlotController = new HasSlotController(\n    this,\n    'help-text',\n    'label'\n  );\n\n  @state() tags: string[] = [];\n\n  @state() inputValue: string = '';\n\n  @state() isDropdownOpen: boolean = false;\n\n  @query('nile-auto-complete') autoComplete!: any;\n\n  /** Sets the input to a warning state, changing its visual appearance. */\n  @property({ type: Boolean }) warning = false;\n\n  /** Sets the input to an error state, changing its visual appearance. */\n  @property({ type: Boolean }) error = false;\n\n  /** Sets the input to a success state, changing its visual appearance. */\n  @property({ type: Boolean }) success = false;\n\n  /** Disables the duplicate entries. */\n  @property({ type: Boolean }) noDuplicates = false;\n\n  /** The input's label. If you need to display HTML, use the `label` slot instead. */\n  @property() label = '';\n\n  /** Adds a clear button when the input is not empty. */\n  @property({ type: Boolean }) acceptUserInput = false;\n\n  /** Adds a clear button when the input is not empty. */\n  @property({ type: Boolean }) clearable = false;\n\n  /** Placeholder text to show as a hint when the input is empty. */\n  @property() placeholder = 'type here...';\n\n  /** Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /** Disables the input. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  // AUTO-COMPLETE-OPTIONS\n\n  /** Virtual scroll in  dropdown options. */\n  @property({ type: Boolean }) enableVirtualScroll = false;\n\n  @property({ type: Array }) autoCompleteOptions: any[] = [];\n\n  @property({ type: Array }) filteredAutoCompleteOptions: any[] = [];\n\n  @property({ type: Array }) value: any[] = [];\n\n  @property({ type: Boolean }) noWrap: boolean = false;\n\n  @property({ type: Boolean }) loading: boolean = false;\n\n  @property({ type: Array }) errorIndexes: number[] = [];\n\n  @property({ attribute: 'help-text', reflect: true }) helpText = '';\n\n  @property({ attribute: 'error-message', reflect: true }) errorMessage = '';\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  protected updated(changedProperties: PropertyValues): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('autoCompleteOptions')) {\n      let options = this.autoCompleteOptions;\n      if (typeof options === 'string') {\n        try {\n          options = JSON.parse(options);\n        } catch (e) {\n          options = [];\n        }\n      }\n      this.filteredAutoCompleteOptions = Array.isArray(options) ? [...options] : [];\n      if (this.noDuplicates) {\n        this.filteredAutoCompleteOptions =\n          this.filteredAutoCompleteOptions.filter(\n            option => !this.value.includes(option)\n          );\n      }\n    }\n    if (changedProperties.has('value')){\n      this.tags = [...this.value];\n      this.onTagsChanged();\n    }\n    if (changedProperties.has('tags')){\n      this.onTagsChanged();\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (this.noDuplicates) {\n      this.filteredAutoCompleteOptions =\n        this.filteredAutoCompleteOptions.filter(\n          option => !this.value.includes(option)\n        );\n    }\n    this.emit('nile-init');\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.emit('nile-destroy');\n  }\n\n  render() {\n    // Check if slots are present\n    const hasLabelSlot = this.hasSlotController.test('label');\n    const hasHelpTextSlot = this.hasSlotController.test('help-text');\n\n    // Check if label and help text are present\n    const hasLabel = this.label ? true : !!hasLabelSlot;\n\n    const hasHelpText = this.helpText ? true : false;\n    const hasErrorMessage = this.errorMessage ? true : false;\n\n    return html`\n      <div\n        part=\"form-control\"\n        class=${classMap({\n          'form-control': true,\n          'form-control--medium': true,\n          'form-control--has-label': hasLabel,\n          'form-control--has-help-text': hasHelpText,\n          'nile-chip--disabled': this.disabled,\n        })}\n      >\n        <label\n          part=\"form-control-label\"\n          class=\"form-control__label\"\n          for=\"input\"\n          aria-hidden=${hasLabel ? 'false' : 'true'}\n        >\n          <slot name=\"label\">${this.label}</slot>\n        </label>\n\n        <div\n          part='base' \n          class=${classMap({\n            'nile-chip': true,\n            'nile-chip--warning': this.warning,\n            'nile-chip--error': this.error,\n            'nile-chip--success': this.success,\n            'nile-chip--no-wrap': this.noWrap,\n          })}\n        >\n          ${this.tags.map(\n            (tag, index) => html`\n              <nile-tag\n                class=${classMap({\n                  'nile-chip__tags': true,\n                })}\n                .variant=${this.errorIndexes.includes(index) ? 'error' : 'normal'}\n                @nile-remove=${() => this.handleRemove(tag)}\n                removable\n                pill\n              >\n                ${tag}\n              </nile-tag>\n            `\n          )}\n          <div class=\"nile-chip__auto-complete\">\n            <nile-auto-complete\n              .enableVirtualScroll=${this.enableVirtualScroll}\n              .allMenuItems=${this.filteredAutoCompleteOptions}\n              .filterFunction=${this.filterFunction}\n              .renderItemFunction=${this.renderItemFunction}\n              .loading=\"${this.loading}\"\n              .value=${this.inputValue}\n              ?isDropdownOpen=${this.isDropdownOpen}\n              .noBorder=${true}\n              openOnFocus\n              exportparts=\"options__wrapper\"\n              .placeholder=${this.placeholder}\n              @nile-input=${this.handleInputChange}\n              @keydown=${this.handleInputKeydown}\n              @nile-focus=${this.handleFocus}\n              @nile-complete=${this.handleSelect}\n            ></nile-auto-complete>\n          </div>\n        </div>\n        ${\n          hasHelpText\n            ? html`\n                <nile-form-help-text>${this.helpText}</nile-form-help-text>\n              `\n            : ``\n        }\n\n        ${\n          hasErrorMessage\n            ? html`\n                <nile-form-error-message\n                  >${this.errorMessage}</nile-form-error-message\n                >\n              `\n            : ``\n        }\n      </div>\n    `;\n  }\n\n  private handleSelect(event: CustomEvent<CustomEventDetail>) {\n    // Add the selected value to the tags array only if it doesn't already exist\n    if (!this.noDuplicates || !this.tags.includes(event.detail.value)) {\n      this.tags = [...this.tags, event.detail.value];\n      this.emit('nile-chip-change', { value: this.tags });\n      this.resetInput();\n    }\n  }\n\n  private handleRemove(value: string) {\n    // Remove the tag from the tags array\n    this.tags = this.tags.filter(tag => tag !== value);\n\n    if (this.noDuplicates && this.autoCompleteOptions.includes(value)) {\n      this.filteredAutoCompleteOptions = [\n        ...this.filteredAutoCompleteOptions,\n        value,\n      ];\n    }\n    this.emit('nile-chip-change', { value: this.tags });\n  }\n\n  private handleInputChange(event: CustomEvent<CustomEventDetail>) {\n    // Update the input value\n    this.inputValue = event.detail.value;\n  }\n\n  private handleInputKeydown(event: KeyboardEvent) {\n    if (!this.acceptUserInput) {\n      return;\n    }\n\n    if(event.key === 'Tab'){\n      event.preventDefault()\n    }\n    \n    if (\n      (event.key === 'Enter' || event.key === 'Tab' ) \n      && this.inputValue \n      && (!this.noDuplicates || !this.tags.includes(this.inputValue))\n    ) {\n      event.preventDefault()\n      this.tags = [...this.tags, this.inputValue];\n      this.resetInput();\n      this.emit('nile-chip-change', { value: this.tags });\n    }\n\n    if(\n      (event.key === 'Enter'|| event.key === 'Tab' ) \n      && this.inputValue \n      && (this.noDuplicates || this.tags.includes(this.inputValue))\n    ){\n      this.emit('nile-duplicates-blocked');\n    }\n  }\n\n  private handleFocus() {\n    this.isDropdownOpen = true;\n  }\n\n  onTagsChanged() {\n    if (this.noDuplicates)\n      this.filteredAutoCompleteOptions = this.filteredAutoCompleteOptions.filter(option => !this.tags.includes(option));\n  }\n\n\n  private resetInput() {\n    // Reset the input-related properties\n    this.inputValue = '';\n    this.isDropdownOpen = false;\n    this.autoComplete.value = '';\n    this.autoComplete.handleFocus();\n  }\n}\n\nexport default NileChip;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-chip': NileChip;\n  }\n}\n"]}

package/dist/src/nile-code-editor/nile-code-editor.d.ts

@@ -51,6 +51,7 @@ export declare class NileCodeEditor extends NileElement {
     private placeholderComp;
     private defaultSyntaxHighlightingComp;
     private themeComp;
+    private isSpacePressed;
     /**
      * The styles for CodeEditor
      * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
@@ -63,6 +64,8 @@ export declare class NileCodeEditor extends NileElement {
     protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     render(): TemplateResult;
     createNewView(emitEvent?: boolean): void;
+    checkForSpaceKey(e: KeyboardEvent): void;
+    handleEscapeKey(e: KeyboardEvent): void;
     createState(): EditorState;
     /**
      * Custom autocomplete handler for code editor suggestions

package/dist/src/nile-code-editor/nile-code-editor.js

@@ -17,7 +17,7 @@ import { javascript, javascriptLanguage, } from '@codemirror/lang-javascript';
 import { sql } from '@codemirror/lang-sql';
 import { json } from '@codemirror/lang-json';
 import { html as htmlLang } from '@codemirror/lang-html';
-import { autocompletion } from '@codemirror/autocomplete';
+import { autocompletion, closeCompletion, completionStatus } from '@codemirror/autocomplete';
 import NileElement from '../internal/nile-element';
 import { basicSetup } from './extensionSetup';
 import { classMap } from 'lit/directives/class-map.js';
@@ -57,7 +57,7 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
         this.debounce = false;
         this.debounceTimeout = 200;
         this.aboveCursor = false;
-        this.tabCompletion = false;
+        this.tabCompletion = true;
         this.timeOut = null;
         // Compartments for initialiazing and switching extensions
         this.lineNumbersComp = new Compartment();
@@ -67,6 +67,7 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
         this.placeholderComp = new Compartment();
         this.defaultSyntaxHighlightingComp = new Compartment();
         this.themeComp = new Compartment();
+        this.isSpacePressed = false;
         /**
          * Custom autocomplete handler for code editor suggestions
          * @param context CompletionContext from CodeMirror
@@ -225,9 +226,28 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
             state: this.viewState,
             parent: this.codeEditor
         });
+        this.view.dom.addEventListener('keydown', (e) => {
+            this.checkForSpaceKey(e);
+            this.handleEscapeKey(e);
+        }, true);
         if (emitEvent)
             this.emit('nile-after-update', { createNewView: this.createNewView, codeMirrorInstance: this.view, }, false);
     }
+    checkForSpaceKey(e) {
+        if (e.code === 'Space' && !e.ctrlKey) {
+            this.isSpacePressed = true;
+        }
+        else {
+            this.isSpacePressed = false;
+        }
+    }
+    handleEscapeKey(e) {
+        if (e.key === 'Escape' && this.view && completionStatus(this.view.state) !== null) {
+            e.stopPropagation();
+            e.preventDefault();
+            closeCompletion(this.view);
+        }
+    }
     createState() {
         const lineNumbersExtension = this.lineNumbersComp.of(this.getLineNumbersExension());
         const readOnlyExtension = this.readOnlyComp.of(this.getReadOnlyExtension());
@@ -321,7 +341,7 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
         const baseMatch = textBeforeCursor.match(/([a-zA-Z_$][\w$]*)$/);
         if (!baseMatch) {
             const trimmedText = textBeforeCursor.trim();
-            if (trimmedText === '') {
+            if (trimmedText === '' && !this.isSpacePressed) {
                 const optionsList = Object.keys(this.customAutoCompletions).filter(key => Object.keys(this.customAutoCompletions[key]).length);
                 const options = optionsList.map((key) => ({
                     label: key,