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

package/dist/src/nile-table-cell-item/nile-table-cell-item.js

@@ -6,7 +6,7 @@
  */
 import { __decorate } from "tslib";
 import { html, } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement } from 'lit/decorators.js';
 import { styles } from './nile-table-cell-item.css';
 import NileElement from '../internal/nile-element';
 import { HasSlotController } from '../internal/slot';
@@ -20,8 +20,6 @@ let NileTableCellItem = class NileTableCellItem extends NileElement {
     constructor() {
         super(...arguments);
         this.hasSlotController = new HasSlotController(this, '[default]');
-        /** Enables the resize functionality. */
-        this.resizable = false;
         /* #endregion */
     }
     /**
@@ -33,65 +31,18 @@ let NileTableCellItem = class NileTableCellItem extends NileElement {
     }
     /* #endregion */
     /* #region Methods */
-    handleResizeStart(e) {
-        e.preventDefault();
-        const startX = e.pageX;
-        const startWidth = this.offsetWidth;
-        // Add resizing class for visual feedback
-        const resizer = e.target;
-        resizer.classList.add('resizing');
-        const onMouseMove = (e) => {
-            const delta = e.pageX - startX;
-            const newWidth = Math.max(50, startWidth + delta);
-            // Apply width to this cell
-            this.style.width = newWidth + 'px';
-            // Find all cells in the same column and apply width
-            const tableBody = this.closest('nile-table-body');
-            if (tableBody) {
-                const rows = tableBody.querySelectorAll('nile-table-row');
-                const cellIndex = this.getColumnIndex();
-                rows.forEach(row => {
-                    const cells = row.querySelectorAll('nile-table-cell-item');
-                    if (cells[cellIndex]) {
-                        cells[cellIndex].style.width = newWidth + 'px';
-                    }
-                });
-            }
-        };
-        const onMouseUp = () => {
-            resizer.classList.remove('resizing');
-            document.removeEventListener('mousemove', onMouseMove);
-            document.removeEventListener('mouseup', onMouseUp);
-        };
-        document.addEventListener('mousemove', onMouseMove);
-        document.addEventListener('mouseup', onMouseUp);
-    }
-    getColumnIndex() {
-        const tableRow = this.closest('nile-table-row');
-        if (tableRow) {
-            const cells = tableRow.querySelectorAll('nile-table-cell-item');
-            return Array.from(cells).indexOf(this);
-        }
-        return 0;
-    }
     /**
      * Render method
      * @slot This is a slot test
      */
     render() {
         return html `
-      <div class="cell__wrapper" part="nile__table-cell">
-        ${this.hasSlotController.test('[default]')
-            ? html ` <div class="column" part="nile__table-cell"><slot></slot></div>`
+      ${this.hasSlotController.test('[default]')
+            ? html ` <slot class="column" part="nile__table-cell"> </slot>`
             : ''}
-        ${this.resizable ? html `<div class="resizer" @mousedown=${this.handleResizeStart}></div>` : null}
-      </div>
     `;
     }
 };
-__decorate([
-    property({ type: Boolean, reflect: true })
-], NileTableCellItem.prototype, "resizable", void 0);
 NileTableCellItem = __decorate([
     customElement('nile-table-cell-item')
 ], NileTableCellItem);

package/dist/src/nile-table-cell-item/nile-table-cell-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-table-cell-item.js","sourceRoot":"","sources":["../../../src/nile-table-cell-item/nile-table-cell-item.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-table-cell-item.css';\nimport NileElement from '../internal/nile-element';\nimport { HasSlotController } from '../internal/slot';\n\n/**\n * Nile table Cell Item component.\n *\n * @tag nile-table-cell-item\n *\n */\n@customElement('nile-table-cell-item')\nexport class NileTableCellItem extends NileElement {\n  private readonly hasSlotController = new HasSlotController(this, '[default]');\n  /**\n   * The styles for TableCellItem\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  /** Enables the resize functionality. */\n  @property({ type: Boolean, reflect: true }) resizable = false;\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  private handleResizeStart(e: any) {\n    e.preventDefault();\n    const startX = e.pageX;\n    const startWidth = this.offsetWidth;\n    \n    // Add resizing class for visual feedback\n    const resizer = e.target;\n    resizer.classList.add('resizing');\n\n    const onMouseMove = (e: any) => {\n      const delta = e.pageX - startX;\n      const newWidth = Math.max(50, startWidth + delta);\n\n      // Apply width to this cell\n      this.style.width = newWidth + 'px';\n\n      // Find all cells in the same column and apply width\n      const tableBody = this.closest('nile-table-body');\n      if (tableBody) {\n        const rows = tableBody.querySelectorAll('nile-table-row');\n        const cellIndex = this.getColumnIndex();\n        \n        rows.forEach(row => {\n          const cells = row.querySelectorAll('nile-table-cell-item');\n          if (cells[cellIndex]) {\n            cells[cellIndex].style.width = newWidth + 'px';\n          }\n        });\n      }\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\n  private getColumnIndex(): number {\n    const tableRow = this.closest('nile-table-row');\n    if (tableRow) {\n      const cells = tableRow.querySelectorAll('nile-table-cell-item');\n      return Array.from(cells).indexOf(this);\n    }\n    return 0;\n  }\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  public render(): TemplateResult {\n    return html`\n      <div class=\"cell__wrapper\" part=\"nile__table-cell\">\n        ${this.hasSlotController.test('[default]')\n          ? html` <div class=\"column\" part=\"nile__table-cell\"><slot></slot></div>`\n          : ''}\n        ${this.resizable ? html`<div class=\"resizer\" @mousedown=${this.handleResizeStart}></div>` : null}\n      </div>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileTableCellItem;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-table-cell-item': NileTableCellItem;\n  }\n}\n"]}
+{"version":3,"file":"nile-table-cell-item.js","sourceRoot":"","sources":["../../../src/nile-table-cell-item/nile-table-cell-item.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAY,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD;;;;;GAKG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,WAAW;IAA3C;;QACY,sBAAiB,GAAG,IAAI,iBAAiB,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;QAyB9E,gBAAgB;IAClB,CAAC;IAzBC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAED,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACX,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC;YACxC,CAAC,CAAC,IAAI,CAAA,wDAAwD;YAC9D,CAAC,CAAC,EAAE;KACP,CAAC;IACJ,CAAC;CAGF,CAAA;AA3BY,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CA2B7B;;AAED,eAAe,iBAAiB,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-table-cell-item.css';\nimport NileElement from '../internal/nile-element';\nimport { HasSlotController } from '../internal/slot';\n\n/**\n * Nile table Cell Item component.\n *\n * @tag nile-table-cell-item\n *\n */\n@customElement('nile-table-cell-item')\nexport class NileTableCellItem extends NileElement {\n  private readonly hasSlotController = new HasSlotController(this, '[default]');\n  /**\n   * The styles for TableCellItem\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  public render(): TemplateResult {\n    return html`\n      ${this.hasSlotController.test('[default]')\n        ? html` <slot class=\"column\" part=\"nile__table-cell\"> </slot>`\n        : ''}\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileTableCellItem;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-table-cell-item': NileTableCellItem;\n  }\n}\n"]}

package/dist/src/nile-table-header-item/nile-table-header-item.css.js

@@ -14,8 +14,6 @@ export const styles = css `
     --cell-width: auto;
     display: table-cell;
     box-sizing: border-box;
-    position: relative;
-    border-right: 1px solid var(--nile-colors-neutral-400);
   }
   
   .header__item__wrapper{
@@ -27,7 +25,6 @@ export const styles = css `
     padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-3xl);
     min-height: 44px;
     height: 44px;
-    position: relative;
   }
 
   .headers {
@@ -68,38 +65,6 @@ export const styles = css `
   .headers:hover .hover__arrow {
     opacity: 0.3;
   }
-
-  .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: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;
-  }
-
 `;
 export default [styles];
 //# sourceMappingURL=nile-table-header-item.css.js.map

package/dist/src/nile-table-header-item/nile-table-header-item.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-table-header-item.css.js","sourceRoot":"","sources":["../../../src/nile-table-header-item/nile-table-header-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4FxB,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 * TableHeaderItem CSS\n */\nexport const styles = css`\n  :host {\n    --cell-min-width: auto;\n    --cell-width: auto;\n    display: table-cell;\n    box-sizing: border-box;\n    position: relative;\n    border-right: 1px solid var(--nile-colors-neutral-400);\n  }\n  \n  .header__item__wrapper{\n    min-width:var(--cell-min-width);\n    width:var(--cell-width);\n    display:flex;\n    align-items:center;\n    box-sizing: border-box;\n    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-3xl);\n    min-height: 44px;\n    height: 44px;\n    position: relative;\n  }\n\n  .headers {\n    overflow:hidden;\n    display: flex;\n    align-items: center;\n    height: auto;\n    width: 100%;\n    gap: 8px;\n    color: var(--nile-colors-gray-light-mode-600);\n    font-family: var(--nile-font-family-serif);\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-size: var(--nile-type-scale-2);\n    font-weight: 500;\n    font-style: normal;\n    /* line-height: var(--nile-type-scale-5); */\n    line-height: normal;\n  }\n\n  nile-icon {\n    cursor: pointer;\n  }\n\n  .sorting__icons {\n    display: flex;\n    flex-direction: column;\n    align-items: centre;\n  }\n\n  .sorting__icons nile-icon:hover {\n    opacity: 0.4;\n  }\n\n  .hover__arrow {\n    opacity: 0;\n  }\n\n  .headers:hover .hover__arrow {\n    opacity: 0.3;\n  }\n\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: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`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-table-header-item.css.js","sourceRoot":"","sources":["../../../src/nile-table-header-item/nile-table-header-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyDxB,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 * TableHeaderItem CSS\n */\nexport const styles = css`\n  :host {\n    --cell-min-width: auto;\n    --cell-width: auto;\n    display: table-cell;\n    box-sizing: border-box;\n  }\n  \n  .header__item__wrapper{\n    min-width:var(--cell-min-width);\n    width:var(--cell-width);\n    display:flex;\n    align-items:center;\n    box-sizing: border-box;\n    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-3xl);\n    min-height: 44px;\n    height: 44px;\n  }\n\n  .headers {\n    overflow:hidden;\n    display: flex;\n    align-items: center;\n    height: auto;\n    width: 100%;\n    gap: 8px;\n    color: var(--nile-colors-gray-light-mode-600);\n    font-family: var(--nile-font-family-serif);\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-size: var(--nile-type-scale-2);\n    font-weight: 500;\n    font-style: normal;\n    /* line-height: var(--nile-type-scale-5); */\n    line-height: normal;\n  }\n\n  nile-icon {\n    cursor: pointer;\n  }\n\n  .sorting__icons {\n    display: flex;\n    flex-direction: column;\n    align-items: centre;\n  }\n\n  .sorting__icons nile-icon:hover {\n    opacity: 0.4;\n  }\n\n  .hover__arrow {\n    opacity: 0;\n  }\n\n  .headers:hover .hover__arrow {\n    opacity: 0.3;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-table-header-item/nile-table-header-item.d.ts

@@ -25,18 +25,13 @@ export declare class NileTableHeaderItem extends NileElement {
     havefilter: boolean;
     /** Places the icon . */
     iconName: string;
-    /** Enables the resize functionality. */
-    resizable: boolean;
     sorting_ct: number;
-    connectedCallback(): void;
     /**
      * Render method
      * @slot This is a slot test
      */
     private handleSort;
     private handleSearch;
-    private handleResizeStart;
-    private getColumnIndex;
     render(): TemplateResult;
 }
 export default NileTableHeaderItem;

package/dist/src/nile-table-header-item/nile-table-header-item.js

@@ -26,9 +26,8 @@ let NileTableHeaderItem = class NileTableHeaderItem extends NileElement {
         this.havefilter = false;
         /** Places the icon . */
         this.iconName = '';
-        /** Enables the resize functionality. */
-        this.resizable = false;
         this.sorting_ct = 0;
+        /* #endregion */
     }
     /**
      * The styles for TableHeaderItem
@@ -39,10 +38,6 @@ let NileTableHeaderItem = class NileTableHeaderItem extends NileElement {
     }
     /* #endregion */
     /* #region Methods */
-    connectedCallback() {
-        super.connectedCallback();
-        console.log('Table header item connected, resizable:', this.resizable);
-    }
     /**
      * Render method
      * @slot This is a slot test
@@ -58,76 +53,39 @@ let NileTableHeaderItem = class NileTableHeaderItem extends NileElement {
     handleSearch(e) {
         this.emit('nile-search', { value: e.detail.value });
     }
-    handleResizeStart(e) {
-        e.preventDefault();
-        const startX = e.pageX;
-        const startWidth = this.offsetWidth;
-        const resizer = e.target;
-        resizer.classList.add('resizing');
-        const onMouseMove = (e) => {
-            const delta = e.pageX - startX;
-            const newWidth = Math.max(50, startWidth + delta);
-            this.style.width = newWidth + 'px';
-            const tableBody = this.closest('nile-table-body');
-            if (tableBody) {
-                const rows = tableBody.querySelectorAll('nile-table-row');
-                const headerIndex = this.getColumnIndex();
-                rows.forEach(row => {
-                    const cells = row.querySelectorAll('nile-table-cell-item');
-                    if (cells[headerIndex]) {
-                        cells[headerIndex].style.width = newWidth + 'px';
-                    }
-                });
-            }
-        };
-        const onMouseUp = () => {
-            resizer.classList.remove('resizing');
-            document.removeEventListener('mousemove', onMouseMove);
-            document.removeEventListener('mouseup', onMouseUp);
-        };
-        document.addEventListener('mousemove', onMouseMove);
-        document.addEventListener('mouseup', onMouseUp);
-    }
-    getColumnIndex() {
-        const headerRow = this.closest('nile-table-row');
-        if (headerRow) {
-            const headers = headerRow.querySelectorAll('nile-table-header-item');
-            return Array.from(headers).indexOf(this);
-        }
-        return 0;
-    }
     render() {
-        return html `
+        return html ` ${this.hasSlotController.test('[default]')
+            ? html `
       <div class="header__item__wrapper" part="nile__table-header-cell">
         <div class="headers">
           <slot> </slot>
           ${this.havesort && this.sorting_ct % 3 === 0
-            ? html `<nile-icon
+                ? html `<nile-icon
                 name="sortdown"
                 size="16"
                 @click=${this.handleSort}
                 class="hover__arrow"
               ></nile-icon>`
-            : null}
+                : null}
           ${this.havesort && this.sorting_ct % 3 === 1
-            ? html `<nile-icon
+                ? html `<nile-icon
                 name="sortdown"
                 size="16"
                 @click=${this.handleSort}
               ></nile-icon>`
-            : null}
+                : null}
           ${this.havesort && this.sorting_ct % 3 === 2
-            ? html `<nile-icon
+                ? html `<nile-icon
                 name="sortup"
                 size="16"
                 @click=${this.handleSort}
               ></nile-icon>`
-            : null}
+                : null}
           ${this.iconName
-            ? html ` <nile-icon name="${this.iconName}" size="16"></nile-icon>`
-            : html ``}
+                ? html ` <nile-icon name="${this.iconName}" size="16"></nile-icon>`
+                : html ``}
           ${this.havefilter
-            ? html ` <nile-popover title="Filter" placement="bottom">
+                ? html ` <nile-popover title="Filter" placement="bottom">
                 <nile-icon name="filter" size="16" slot="anchor"></nile-icon>
                 <nile-input
                   placeholder="Search"
@@ -136,10 +94,10 @@ let NileTableHeaderItem = class NileTableHeaderItem extends NileElement {
                 ></nile-input>
                 <slot name="filter__content" part="filter__content"></slot>
               </nile-popover>`
-            : html ``}
+                : html ``}
         </div>
-        ${this.resizable ? html `<div class="resizer" @mousedown=${this.handleResizeStart}></div>` : null}
-      </div>`;
+      </div>`
+            : null}`;
     }
 };
 __decorate([
@@ -151,9 +109,6 @@ __decorate([
 __decorate([
     property({ type: String, reflect: true, attribute: 'icon-name' })
 ], NileTableHeaderItem.prototype, "iconName", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], NileTableHeaderItem.prototype, "resizable", void 0);
 __decorate([
     state()
 ], NileTableHeaderItem.prototype, "sorting_ct", void 0);

package/dist/src/nile-table-header-item/nile-table-header-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-table-header-item.js","sourceRoot":"","sources":["../../../src/nile-table-header-item/nile-table-header-item.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, state, property } from 'lit/decorators.js';\nimport { styles } from './nile-table-header-item.css';\nimport NileElement from '../internal/nile-element';\nimport { HasSlotController } from '../internal/slot';\n\n/**\n * Nile icon component.\n *\n * @tag nile-table-header-item\n *\n */\n@customElement('nile-table-header-item')\nexport class NileTableHeaderItem extends NileElement {\n  private readonly hasSlotController = new HasSlotController(this, '[default]');\n  /**\n   * The styles for TableHeaderItem\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  /** Enables the sort functionality. */\n  @property({ type: Boolean, reflect: true }) havesort = false;\n\n  /** Enables the sort functionality. */\n  @property({ type: Boolean, reflect: true }) havefilter = false;\n\n  /** Places the icon . */\n  @property({ type: String, reflect: true, attribute: 'icon-name' }) iconName =\n    '';\n\n  /** Enables the resize functionality. */\n  @property({ type: Boolean, reflect: true }) resizable = false;\n\n  @state() sorting_ct = 0;\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  connectedCallback() {\n    super.connectedCallback();\n    console.log('Table header item connected, resizable:', this.resizable);\n  }\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  private handleSort(e: any) {\n    this.sorting_ct++;\n    let curr_sort_string = this.hasSlotController.host.innerHTML;\n    const order = ['normal', 'asc', 'des'];\n    this.emit('nile-click-sort', {\n      value: { curr_sort_string, order: order[this.sorting_ct % 3] },\n    });\n  }\n\n  private handleSearch(e: any) {\n    this.emit('nile-search', { value: e.detail.value });\n  }\n\n  private handleResizeStart(e: any) {\n    e.preventDefault();\n    const startX = e.pageX;\n    const startWidth = this.offsetWidth;\n    \n    const resizer = e.target;\n    resizer.classList.add('resizing');\n\n    const onMouseMove = (e: any) => {\n      const delta = e.pageX - startX;\n      const newWidth = Math.max(50, startWidth + delta);\n\n      this.style.width = newWidth + 'px';\n\n      const tableBody = this.closest('nile-table-body');\n      if (tableBody) {\n        const rows = tableBody.querySelectorAll('nile-table-row');\n        const headerIndex = this.getColumnIndex();\n        \n        rows.forEach(row => {\n          const cells = row.querySelectorAll('nile-table-cell-item');\n          if (cells[headerIndex]) {\n            cells[headerIndex].style.width = newWidth + 'px';\n          }\n        });\n      }\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\n  private getColumnIndex(): number {\n    const headerRow = this.closest('nile-table-row');\n    if (headerRow) {\n      const headers = headerRow.querySelectorAll('nile-table-header-item');\n      return Array.from(headers).indexOf(this);\n    }\n    return 0;\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"header__item__wrapper\" part=\"nile__table-header-cell\">\n        <div class=\"headers\">\n          <slot> </slot>\n          ${this.havesort && this.sorting_ct % 3 === 0\n            ? html`<nile-icon\n                name=\"sortdown\"\n                size=\"16\"\n                @click=${this.handleSort}\n                class=\"hover__arrow\"\n              ></nile-icon>`\n            : null}\n          ${this.havesort && this.sorting_ct % 3 === 1\n            ? html`<nile-icon\n                name=\"sortdown\"\n                size=\"16\"\n                @click=${this.handleSort}\n              ></nile-icon>`\n            : null}\n          ${this.havesort && this.sorting_ct % 3 === 2\n            ? html`<nile-icon\n                name=\"sortup\"\n                size=\"16\"\n                @click=${this.handleSort}\n              ></nile-icon>`\n            : null}\n          ${this.iconName\n            ? html` <nile-icon name=\"${this.iconName}\" size=\"16\"></nile-icon>`\n            : html``}\n          ${this.havefilter\n            ? html` <nile-popover title=\"Filter\" placement=\"bottom\">\n                <nile-icon name=\"filter\" size=\"16\" slot=\"anchor\"></nile-icon>\n                <nile-input\n                  placeholder=\"Search\"\n                  @nile-input=${this.handleSearch}\n                  part=\"filter__search\"\n                ></nile-input>\n                <slot name=\"filter__content\" part=\"filter__content\"></slot>\n              </nile-popover>`\n            : html``}\n        </div>\n        ${this.resizable ? html`<div class=\"resizer\" @mousedown=${this.handleResizeStart}></div>` : null}\n      </div>`;\n  }\n}\n\nexport default NileTableHeaderItem;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-table-header-item': NileTableHeaderItem;\n  }\n}\n"]}
+{"version":3,"file":"nile-table-header-item.js","sourceRoot":"","sources":["../../../src/nile-table-header-item/nile-table-header-item.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, state, property } from 'lit/decorators.js';\nimport { styles } from './nile-table-header-item.css';\nimport NileElement from '../internal/nile-element';\nimport { HasSlotController } from '../internal/slot';\n\n/**\n * Nile icon component.\n *\n * @tag nile-table-header-item\n *\n */\n@customElement('nile-table-header-item')\nexport class NileTableHeaderItem extends NileElement {\n  private readonly hasSlotController = new HasSlotController(this, '[default]');\n  /**\n   * The styles for TableHeaderItem\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  /** Enables the sort functionality. */\n  @property({ type: Boolean, reflect: true }) havesort = false;\n\n  /** Enables the sort functionality. */\n  @property({ type: Boolean, reflect: true }) havefilter = false;\n\n  /** Places the icon . */\n  @property({ type: String, reflect: true, attribute: 'icon-name' }) iconName =\n    '';\n\n  @state() sorting_ct = 0;\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  private handleSort(e: any) {\n    this.sorting_ct++;\n    let curr_sort_string = this.hasSlotController.host.innerHTML;\n    const order = ['normal', 'asc', 'des'];\n    this.emit('nile-click-sort', {\n      value: { curr_sort_string, order: order[this.sorting_ct % 3] },\n    });\n  }\n\n  private handleSearch(e: any) {\n    this.emit('nile-search', { value: e.detail.value });\n  }\n\n  public render(): TemplateResult {\n    return html` ${this.hasSlotController.test('[default]')\n      ? html`\n      <div class=\"header__item__wrapper\" part=\"nile__table-header-cell\">\n        <div class=\"headers\">\n          <slot> </slot>\n          ${this.havesort && this.sorting_ct % 3 === 0\n            ? html`<nile-icon\n                name=\"sortdown\"\n                size=\"16\"\n                @click=${this.handleSort}\n                class=\"hover__arrow\"\n              ></nile-icon>`\n            : null}\n          ${this.havesort && this.sorting_ct % 3 === 1\n            ? html`<nile-icon\n                name=\"sortdown\"\n                size=\"16\"\n                @click=${this.handleSort}\n              ></nile-icon>`\n            : null}\n          ${this.havesort && this.sorting_ct % 3 === 2\n            ? html`<nile-icon\n                name=\"sortup\"\n                size=\"16\"\n                @click=${this.handleSort}\n              ></nile-icon>`\n            : null}\n          ${this.iconName\n            ? html` <nile-icon name=\"${this.iconName}\" size=\"16\"></nile-icon>`\n            : html``}\n          ${this.havefilter\n            ? html` <nile-popover title=\"Filter\" placement=\"bottom\">\n                <nile-icon name=\"filter\" size=\"16\" slot=\"anchor\"></nile-icon>\n                <nile-input\n                  placeholder=\"Search\"\n                  @nile-input=${this.handleSearch}\n                  part=\"filter__search\"\n                ></nile-input>\n                <slot name=\"filter__content\" part=\"filter__content\"></slot>\n              </nile-popover>`\n            : html``}\n        </div>\n      </div>`\n      : null}`;\n  }\n  /* #endregion */\n}\n\nexport default NileTableHeaderItem;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-table-header-item': NileTableHeaderItem;\n  }\n}\n"]}