npm - @aquera/nile-elements - Versions diffs - 0.1.57 → 0.1.58-beta-1.0 - Mend

@aquera/nile-elements 0.1.57 → 0.1.58-beta-1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (121) hide show

package/dist/src/nile-table-body/nile-table-body.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-table-body.css.js","sourceRoot":"","sources":["../../../src/nile-table-body/nile-table-body.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;~~AAE1B~~;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCxB~~,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 TableBody CSS\n */\nexport const styles = css`\n :host {\n box-sizing: border-box;\n --nile-table-background--odd: var(--nile-colors-base-white);\n --nile-table-background--even: var(--nile-colors-base-white);\n }\n\n .base {\n background-color: var(--nile-colors-white-base);\n border: 1px solid var(--nile-table-row-border-color);\n border-radius: var(--nile-radius-radius-xl);\n box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1),0px 1px 2px 0px rgba(16, 24, 40, 0.06);\n overflow: hidden;\n }\n\n .table__header {\n display: flex;\n box-sizing: border-box;\n }\n\n .nile__table__body {\n display: table;\n border-collapse: collapse;\n width: 100%;\n }\n\n slot::slotted(nile-table-row:nth-child(odd)) {\n border-bottom: 1px solid var(--nile-colors-neutral-400);\n background: var(--nile-table-background--odd);\n }\n\n slot::slotted(nile-table-row:nth-child(even)) {\n background: var(--nile-table-background--even);\n }\n\n slot::slotted(nile-table-row:last-child) {\n border-bottom: 0px;\n }\n`;\n\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-table-body.css.js","sourceRoot":"","sources":["../../../src/nile-table-body/nile-table-body.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAEvE;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAwCrB,iBAAiB;CACpB,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';\nimport { tableLayoutStyles } from '../internal/resizable-table-styles';\n\n/\n TableBody CSS\n /\nexport const styles = css`\n :host {\n box-sizing: border-box;\n --nile-table-background--odd: var(--nile-colors-base-white);\n --nile-table-background--even: var(--nile-colors-base-white);\n }\n\n .base {\n background-color: var(--nile-colors-white-base);\n border: 1px solid var(--nile-table-row-border-color);\n border-radius: var(--nile-radius-radius-xl);\n box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1),0px 1px 2px 0px rgba(16, 24, 40, 0.06);\n overflow: hidden;\n }\n\n .table__header {\n display: flex;\n box-sizing: border-box;\n }\n\n .nile__table__body {\n display: table;\n border-collapse: collapse;\n width: 100%;\n }\n\n slot::slotted(nile-table-row:nth-child(odd)) {\n border-bottom: 1px solid var(--nile-colors-neutral-400);\n background: var(--nile-table-background--odd);\n }\n\n slot::slotted(nile-table-row:nth-child(even)) {\n background: var(--nile-table-background--even);\n }\n\n slot::slotted(nile-table-row:last-child) {\n border-bottom: 0px;\n }\n\n / Import resizable styles */\n ${tableLayoutStyles}\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-table-body/nile-table-body.d.ts CHANGED Viewed

@@ -24,10 +24,12 @@ export declare class NileTableBody extends NileElement {
     private header_rows_data;
     private sort__index;
     private search__index;
+    private hasResizableColumns;
     static get styles(): CSSResultArray;
     protected firstUpdated(_changedProperties: PropertyValues): void;
     private getChildren;
     private getIndexValue;
+    private checkForResizableColumns;
     handleSlotchange(e: any): void;
     private handleSort;
     private handleSearch;

package/dist/src/nile-table-body/nile-table-body.js CHANGED Viewed

@@ -9,6 +9,7 @@ import { html, } from 'lit';
 import { customElement, query, state, queryAssignedNodes, property } from 'lit/decorators.js';
 import { styles } from './nile-table-body.css';
 import NileElement from '../internal/nile-element';
+import { hasResizableColumns } from '../internal/resizable-table-helper';
 /**
  * nile-table-body component.
  *
@@ -25,6 +26,7 @@ let NileTableBody = class NileTableBody extends NileElement {
         this.type = 'primary';
         this.rows_data = [];
         this.header_rows_data = [];
+        this.hasResizableColumns = false;
         /* #endregion */
     }
     static get styles() {
@@ -41,6 +43,9 @@ let NileTableBody = class NileTableBody extends NileElement {
     getIndexValue(index__value) {
         return this.header_rows_data.indexOf(index__value);
     }
+    checkForResizableColumns() {
+        this.hasResizableColumns = hasResizableColumns(this);
+    }
     handleSlotchange(e) {
         let row_data = [];
         this._childNodes.forEach((child) => {
@@ -63,6 +68,8 @@ let NileTableBody = class NileTableBody extends NileElement {
                 row_data = [];
             }
         });
+        // Check for resizable columns after slot change
+        this.checkForResizableColumns();
     }
     handleSort(e) {
         const { curr_sort_string, order } = e.detail.value;
@@ -87,6 +94,7 @@ let NileTableBody = class NileTableBody extends NileElement {
           @slotchange=${this.handleSlotchange}
           @nile-click-sort=${this.handleSort}
           class="nile__table__body"
+          ?resizable=${this.hasResizableColumns}
           @nile-search=${this.handleSearch}
         ></slot>
       </div>
@@ -114,6 +122,9 @@ __decorate([
 __decorate([
     state()
 ], NileTableBody.prototype, "search__index", void 0);
+__decorate([
+    state()
+], NileTableBody.prototype, "hasResizableColumns", void 0);
 NileTableBody = __decorate([
     customElement('nile-table-body')
 ], NileTableBody);

package/dist/src/nile-table-body/nile-table-body.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-table-body.js","sourceRoot":"","sources":["../../../src/nile-table-body/nile-table-body.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAIL,MAAM,KAAK,CAAC;AACb,OAAO,EACL,aAAa,EACb,KAAK,EACL,KAAK,EAGL,kBAAkB,EAClB,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,WAAW,MAAM,0BAA0B,CAAC;~~AAGnD~~;;;;;GAKG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,WAAW;IAAvC;QACL;;;WAGG;;QAIS,SAAI,GAA4B,SAAS,CAAC;QAErC,cAAS,GAAU,EAAE,CAAC;QACtB,qBAAgB,GAAU,EAAE,CAAC;~~QA8E9C~~,gBAAgB;IAClB,CAAC;~~IA3EQ~~,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAES,YAAY,CAAC,kBAAkC;QACvD,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,EAAE,EAAC,IAAI,EAAC,KAAK,CAAC,CAAA;IACzE,CAAC;IAED,gBAAgB;IAEhB,qBAAqB;IAEb,WAAW,CAAC,KAAU,EAAE,OAAe;QAC7C,OAAO,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACzC,CAAC;IAEO,aAAa,CAAC,YAAoB;QACxC,OAAO,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;IACrD,CAAC;IAED,gBAAgB,CAAC,CAAM;QACrB,IAAI,QAAQ,GAAQ,EAAE,CAAC;QACvB,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,KAAU,EAAE,EAAE;YACtC,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,CAAC;gBACxE,IAAI,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,sBAAsB,CAAC,CAAC;gBAC/D,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;oBACxB,QAAQ,CAAC,OAAO,CAAC,CAAC,OAA2B,EAAE,EAAE;wBAC/C,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;oBACnC,CAAC,CAAC,CAAC;oBACH,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;gBAChC,CAAC;qBAAM,CAAC;oBACN,IAAI,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,wBAAwB,CAAC,CAAC;oBACpE,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;wBAC3B,WAAW,CAAC,OAAO,CAAC,CAAC,MAAuB,EAAE,KAAa,EAAE,EAAE;4BAC7D,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;wBAC/C,CAAC,CAAC,CAAC;oBACL,CAAC;gBACH,CAAC;gBACD,QAAQ,GAAG,EAAE,CAAC;YAChB,CAAC;QACH,CAAC,CAAC,CAAC;~~IACL~~,CAAC;IAEO,UAAU,CAAC,CAAM;QACvB,MAAM,EAAE,gBAAgB,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QACnD,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAC1D,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,KAAK,EAAE,EAAE,YAAY,EAAE,gBAAgB,EAAE,KAAK,EAAE;SACjD,CAAC,CAAC;IACL,CAAC;IAEO,YAAY,CAAC,CAAM;QACzB,MAAM,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QAClC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;QAC9D,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE;YAC7B,KAAK,EAAE,IAAI,CAAC,aAAa;YACzB,KAAK,EAAE,UAAU;SAClB,CAAC,CAAC;IACL,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;;;wBAIS,IAAI,CAAC,gBAAgB;6BAChB,IAAI,CAAC,UAAU;;~~yBAEnB~~,IAAI,CAAC,YAAY;;;KAGrC,CAAC;IACJ,CAAC;CAGF,CAAA;~~AApFgB~~;IAAd,KAAK,CAAC,MAAM,CAAC;kDAA8B;AACL;IAAtC,kBAAkB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAkC;AAC5D;IAAX,QAAQ,EAAE;2CAA2C;AAErC;IAAhB,KAAK,EAAE;gDAA+B;AACtB;IAAhB,KAAK,EAAE;uDAAsC;AAC7B;IAAhB,KAAK,EAAE;kDAA6B;AACpB;IAAhB,KAAK,EAAE;oDAA+B;~~AAb5B~~,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,~~CA0FzB~~;;AAED,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 {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n PropertyValues,\n} from 'lit';\nimport {\n customElement,\n query,\n state,\n queryAll,\n queryAssignedElements,\n queryAssignedNodes,\n property\n} from 'lit/decorators.js';\nimport { styles } from './nile-table-body.css';\nimport NileElement from '../internal/nile-element';\nimport { getInnerHTML } from '../slot';\n\n/\n nile-table-body component.\n \n @tag nile-table-body\n \n /\n@customElement('nile-table-body')\nexport class NileTableBody extends NileElement {\n /*\n The styles for TableBody\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n /\n\n @query('slot') defaultSlot: HTMLSlotElement;\n @queryAssignedNodes({ flatten: true }) _childNodes!: Array<HTMLElement>;\n @property() type: 'primary' \| 'secondary' = 'primary';\n\n @state() private rows_data: any[] = [];\n @state() private header_rows_data: any[] = [];\n @state() private sort__index: number;\n @state() private search__index: number;\n\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n protected firstUpdated(_changedProperties: PropertyValues): void {\n this.emit('nile-body-load', { value: this.type, comp:this },true,false)\n }\n\n / #endregion /\n\n / #region Methods /\n\n private getChildren(child: any, tagname: string) {\n return child.querySelectorAll(tagname);\n }\n\n private getIndexValue(index__value: string): number {\n return this.header_rows_data.indexOf(index__value);\n }\n\n handleSlotchange(e: any) {\n let row_data: any = [];\n this._childNodes.forEach((child: any) => {\n if (child.tagName && child?.tagName?.toLowerCase() === 'nile-table-row') {\n let nilerows = this.getChildren(child, 'nile-table-cell-item');\n if (nilerows.length > 0) {\n nilerows.forEach((element: { innerHTML: any }) => {\n row_data.push(element.innerHTML);\n });\n this.rows_data.push(row_data);\n } else {\n let nileheaders = this.getChildren(child, 'nile-table-header-item');\n if (nileheaders.length > 0) {\n nileheaders.forEach((header: HTMLSlotElement, index: number) => {\n this.header_rows_data.push(header.innerHTML);\n });\n }\n }\n row_data = [];\n }\n });\n }\n\n private handleSort(e: any) {\n const { curr_sort_string, order } = e.detail.value;\n const header_index = this.getIndexValue(curr_sort_string);\n this.emit('nile-sort', {\n value: { header_index, curr_sort_string, order },\n });\n }\n\n private handleSearch(e: any) {\n const searchText = e.detail.value;\n this.search__index = this.getIndexValue(e.target.textContent);\n this.emit('nile-table-search', {\n index: this.search__index,\n value: searchText,\n });\n }\n\n public render(): TemplateResult {\n return html`\n <div class=\"base\" part=\"base\">\n <slot name=\"table__header\" class=\"table__header\"></slot>\n <slot\n @slotchange=${this.handleSlotchange}\n @nile-click-sort=${this.handleSort}\n class=\"nile__table__body\"\n @nile-search=${this.handleSearch}\n ></slot>\n </div>\n `;\n }\n\n / #endregion */\n}\n\nexport default NileTableBody;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-table-body': NileTableBody;\n }\n}\n"]}
1	+ {"version":3,"file":"nile-table-body.js","sourceRoot":"","sources":["../../../src/nile-table-body/nile-table-body.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 {\n customElement,\n query,\n state,\n queryAll,\n queryAssignedElements,\n queryAssignedNodes,\n property\n} from 'lit/decorators.js';\nimport { styles } from './nile-table-body.css';\nimport NileElement from '../internal/nile-element';\nimport { getInnerHTML } from '../slot';\nimport { hasResizableColumns } from '../internal/resizable-table-helper';\n\n/\n nile-table-body component.\n \n @tag nile-table-body\n \n /\n@customElement('nile-table-body')\nexport class NileTableBody extends NileElement {\n /*\n The styles for TableBody\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n /\n\n @query('slot') defaultSlot: HTMLSlotElement;\n @queryAssignedNodes({ flatten: true }) _childNodes!: Array<HTMLElement>;\n @property() type: 'primary' \| 'secondary' = 'primary';\n\n @state() private rows_data: any[] = [];\n @state() private header_rows_data: any[] = [];\n @state() private sort__index: number;\n @state() private search__index: number;\n @state() private hasResizableColumns = false;\n\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n protected firstUpdated(_changedProperties: PropertyValues): void {\n this.emit('nile-body-load', { value: this.type, comp:this },true,false)\n }\n\n / #endregion /\n\n / #region Methods /\n\n private getChildren(child: any, tagname: string) {\n return child.querySelectorAll(tagname);\n }\n\n private getIndexValue(index__value: string): number {\n return this.header_rows_data.indexOf(index__value);\n }\n\n private checkForResizableColumns() {\n this.hasResizableColumns = hasResizableColumns(this);\n }\n\n handleSlotchange(e: any) {\n let row_data: any = [];\n this._childNodes.forEach((child: any) => {\n if (child.tagName && child?.tagName?.toLowerCase() === 'nile-table-row') {\n let nilerows = this.getChildren(child, 'nile-table-cell-item');\n if (nilerows.length > 0) {\n nilerows.forEach((element: { innerHTML: any }) => {\n row_data.push(element.innerHTML);\n });\n this.rows_data.push(row_data);\n } else {\n let nileheaders = this.getChildren(child, 'nile-table-header-item');\n if (nileheaders.length > 0) {\n nileheaders.forEach((header: HTMLSlotElement, index: number) => {\n this.header_rows_data.push(header.innerHTML);\n });\n }\n }\n row_data = [];\n }\n });\n \n // Check for resizable columns after slot change\n this.checkForResizableColumns();\n }\n\n private handleSort(e: any) {\n const { curr_sort_string, order } = e.detail.value;\n const header_index = this.getIndexValue(curr_sort_string);\n this.emit('nile-sort', {\n value: { header_index, curr_sort_string, order },\n });\n }\n\n private handleSearch(e: any) {\n const searchText = e.detail.value;\n this.search__index = this.getIndexValue(e.target.textContent);\n this.emit('nile-table-search', {\n index: this.search__index,\n value: searchText,\n });\n }\n\n public render(): TemplateResult {\n return html`\n <div class=\"base\" part=\"base\">\n <slot name=\"table__header\" class=\"table__header\"></slot>\n <slot\n @slotchange=${this.handleSlotchange}\n @nile-click-sort=${this.handleSort}\n class=\"nile__table__body\"\n ?resizable=${this.hasResizableColumns}\n @nile-search=${this.handleSearch}\n ></slot>\n </div>\n `;\n }\n\n / #endregion */\n}\n\nexport default NileTableBody;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-table-body': NileTableBody;\n }\n}\n"]}

package/dist/src/nile-table-cell-item/nile-table-cell-item.css.js CHANGED Viewed

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { css } from 'lit';
+import { resizableHostStyles, resizerStyles, resizableSlotStyles } from '../internal/resizable-table-styles';
 /**
  * TableCellItem CSS
  */
@@ -17,11 +18,20 @@ export const styles = css `
     box-sizing: border-box;
     display: table-cell;
     vertical-align: middle;
-    max-width: var(--max--cell-width);
     padding: 16px 24px;
+    max-width: var(--max--cell-width);
     min-height: var(--min--height);
   }
+  .cell__wrapper {
+    height: 100%;
+    position: relative;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    width: 100%;
+  }
   .column {
     min-width:var(--min-cell-width);
     width:var(--cell-width);
@@ -34,7 +44,16 @@ export const styles = css `
     /* line-height: var(--nile-type-scale-6); */
     line-height: normal;
     letter-spacing: 0.2px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
   }
+  /* Import resizable styles */
+  ${resizableHostStyles}
+  ${resizerStyles}
+  ${resizableSlotStyles}
 `;
 export default [styles];
 //# sourceMappingURL=nile-table-cell-item.css.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-table-cell-item.css.js","sourceRoot":"","sources":["../../../src/nile-table-cell-item/nile-table-cell-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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BxB~~,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 TableCellItem CSS\n /\nexport const styles = css`\n :host {\n --min-cell-width:auto;\n --cell-width:auto;\n --min--height: 52px;\n --max--cell-width: auto;\n box-sizing: border-box;\n display: table-cell;\n vertical-align: middle;\n max-width: var(--max--cell-width);\n ~~padding: 16px 24px;\n~~ min-height: var(--min--height);\n }\n\n .column {\n min-width:var(--min-cell-width);\n width:var(--cell-width);\n height: 100%;\n color: var(--nile-colors-gray-light-mode-600);\n font-family: var(--nile-font-family-serif);\n font-size: var(--nile-type-scale-3);\n font-style: normal;\n font-weight: var(--nile-font-weight-regular);\n / line-height: var(--nile-type-scale-6); */\n line-height: normal;\n letter-spacing: 0.2px;\n }\n`;\n\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-table-cell-item.css.js","sourceRoot":"","sources":["../../../src/nile-table-cell-item/nile-table-cell-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAE7G;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA0CrB,mBAAmB;IACnB,aAAa;IACb,mBAAmB;CACtB,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';\nimport { resizableHostStyles, resizerStyles, resizableSlotStyles } from '../internal/resizable-table-styles';\n\n/\n TableCellItem CSS\n /\nexport const styles = css`\n :host {\n --min-cell-width:auto;\n --cell-width:auto;\n --min--height: 52px;\n --max--cell-width: auto;\n box-sizing: border-box;\n display: table-cell;\n vertical-align: middle;\n padding: 16px 24px;\n max-width: var(--max--cell-width); \n min-height: var(--min--height);\n }\n\n .cell__wrapper {\n height: 100%;\n position: relative;\n display: flex;\n align-items: center;\n overflow: hidden;\n width: 100%;\n }\n\n .column {\n min-width:var(--min-cell-width);\n width:var(--cell-width);\n height: 100%;\n color: var(--nile-colors-gray-light-mode-600);\n font-family: var(--nile-font-family-serif);\n font-size: var(--nile-type-scale-3);\n font-style: normal;\n font-weight: var(--nile-font-weight-regular);\n / line-height: var(--nile-type-scale-6); /\n line-height: normal;\n letter-spacing: 0.2px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: block;\n }\n\n / Import resizable styles */\n ${resizableHostStyles}\n ${resizerStyles}\n ${resizableSlotStyles}\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-table-cell-item/nile-table-cell-item.d.ts CHANGED Viewed

@@ -19,6 +19,9 @@ export declare class NileTableCellItem extends NileElement {
      * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
      */
     static get styles(): CSSResultArray;
+    /** Enables the resize functionality. */
+    resizable: boolean;
+    private handleResizeStart;
     /**
      * Render method
      * @slot This is a slot test

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

@@ -6,10 +6,11 @@
  */
 import { __decorate } from "tslib";
 import { html, } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { styles } from './nile-table-cell-item.css';
 import NileElement from '../internal/nile-element';
 import { HasSlotController } from '../internal/slot';
+import { createResizeHandler } from '../internal/resizable-table-helper';
 /**
  * Nile table Cell Item component.
  *
@@ -20,6 +21,11 @@ let NileTableCellItem = class NileTableCellItem extends NileElement {
     constructor() {
         super(...arguments);
         this.hasSlotController = new HasSlotController(this, '[default]');
+        /** Enables the resize functionality. */
+        this.resizable = false;
+        /* #endregion */
+        /* #region Methods */
+        this.handleResizeStart = createResizeHandler(this, 50);
         /* #endregion */
     }
     /**
@@ -29,20 +35,33 @@ let NileTableCellItem = class NileTableCellItem extends NileElement {
     static get styles() {
         return [styles];
     }
-    /* #endregion */
-    /* #region Methods */
     /**
      * Render method
      * @slot This is a slot test
      */
     render() {
-        return html `
-      ${this.hasSlotController.test('[default]')
-            ? html ` <slot class="column" part="nile__table-cell"> </slot>`
-            : ''}
-    `;
+        if (this.resizable) {
+            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>`
+                : ''}
+          <div class="resizer" @mousedown=${this.handleResizeStart}></div>
+        </div>
+      `;
+        }
+        else {
+            return html `
+        ${this.hasSlotController.test('[default]')
+                ? html ` <slot class="column" part="nile__table-cell"> </slot>`
+                : ''}
+      `;
+        }
     }
 };
+__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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"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"]}
1	+ {"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,EAAE,QAAQ,EAAE,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;AACrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAEzE;;;;;GAKG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,WAAW;IAA3C;;QACY,sBAAiB,GAAG,IAAI,iBAAiB,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;QAS9E,wCAAwC;QACI,cAAS,GAAG,KAAK,CAAC;QAE9D,gBAAgB;QAEhB,qBAAqB;QAEb,sBAAiB,GAAG,mBAAmB,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QAyB1D,gBAAgB;IAClB,CAAC;IAzCC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAWD;;;OAGG;IACI,MAAM;QACX,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,OAAO,IAAI,CAAA;;YAEL,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC;gBACxC,CAAC,CAAC,IAAI,CAAA,kEAAkE;gBACxE,CAAC,CAAC,EAAE;4CAC4B,IAAI,CAAC,iBAAiB;;OAE3D,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAA;UACP,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC;gBACxC,CAAC,CAAC,IAAI,CAAA,wDAAwD;gBAC9D,CAAC,CAAC,EAAE;OACP,CAAC;QACJ,CAAC;IACH,CAAC;CAGF,CAAA;AAhC6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDAAmB;AAXnD,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CA2C7B;;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';\nimport { createResizeHandler } from '../internal/resizable-table-helper';\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 = createResizeHandler(this, 50);\n\n /\n Render method\n * @slot This is a slot test\n /\n public render(): TemplateResult {\n if (this.resizable) {\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 <div class=\"resizer\" @mousedown=${this.handleResizeStart}></div>\n </div>\n `;\n } else {\n return html`\n ${this.hasSlotController.test('[default]')\n ? html` <slot class=\"column\" part=\"nile__table-cell\"> </slot>`\n : ''}\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 CHANGED Viewed

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { css } from 'lit';
+import { resizableHeaderStyles, headerResizerStyles } from '../internal/resizable-table-styles';
 /**
  * TableHeaderItem CSS
  */
@@ -42,6 +43,8 @@ export const styles = css `
     font-style: normal;
     /* line-height: var(--nile-type-scale-5); */
     line-height: normal;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
   nile-icon {
@@ -65,6 +68,10 @@ export const styles = css `
   .headers:hover .hover__arrow {
     opacity: 0.3;
   }
+  /* Import resizable styles */
+  ${resizableHeaderStyles}
+  ${headerResizerStyles}
 `;
 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 CHANGED Viewed

	@@ -1 +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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"]}
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;AAC1B,OAAO,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAEhG;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA6DrB,qBAAqB;IACrB,mBAAmB;CACtB,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';\nimport { resizableHeaderStyles, headerResizerStyles } from '../internal/resizable-table-styles';\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 text-overflow: ellipsis;\n white-space: nowrap;\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 / Import resizable styles */\n ${resizableHeaderStyles}\n ${headerResizerStyles}\n`;\n\nexport default [styles];\n"]}

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

@@ -25,6 +25,8 @@ export declare class NileTableHeaderItem extends NileElement {
     havefilter: boolean;
     /** Places the icon . */
     iconName: string;
+    /** Enables the resize functionality. */
+    resizable: boolean;
     sorting_ct: number;
     /**
      * Render method
@@ -32,6 +34,7 @@ export declare class NileTableHeaderItem extends NileElement {
      */
     private handleSort;
     private handleSearch;
+    private handleResizeStart;
     render(): TemplateResult;
 }
 export default NileTableHeaderItem;

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

@@ -10,6 +10,7 @@ import { customElement, state, property } from 'lit/decorators.js';
 import { styles } from './nile-table-header-item.css';
 import NileElement from '../internal/nile-element';
 import { HasSlotController } from '../internal/slot';
+import { createResizeHandler } from '../internal/resizable-table-helper';
 /**
  * Nile icon component.
  *
@@ -26,8 +27,10 @@ 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 */
+        this.handleResizeStart = createResizeHandler(this, 50);
     }
     /**
      * The styles for TableHeaderItem
@@ -54,50 +57,95 @@ let NileTableHeaderItem = class NileTableHeaderItem extends NileElement {
         this.emit('nile-search', { value: e.detail.value });
     }
     render() {
-        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
+        if (this.resizable) {
+            return 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
-                name="sortdown"
-                size="16"
-                @click=${this.handleSort}
-                class="hover__arrow"
-              ></nile-icon>`
+                  name="sortdown"
+                  size="16"
+                  @click=${this.handleSort}
+                  class="hover__arrow"
+                ></nile-icon>`
                 : null}
-          ${this.havesort && this.sorting_ct % 3 === 1
+            ${this.havesort && this.sorting_ct % 3 === 1
                 ? html `<nile-icon
-                name="sortdown"
-                size="16"
-                @click=${this.handleSort}
-              ></nile-icon>`
+                  name="sortdown"
+                  size="16"
+                  @click=${this.handleSort}
+                ></nile-icon>`
                 : null}
-          ${this.havesort && this.sorting_ct % 3 === 2
+            ${this.havesort && this.sorting_ct % 3 === 2
                 ? html `<nile-icon
-                name="sortup"
-                size="16"
-                @click=${this.handleSort}
-              ></nile-icon>`
+                  name="sortup"
+                  size="16"
+                  @click=${this.handleSort}
+                ></nile-icon>`
                 : null}
-          ${this.iconName
+            ${this.iconName
                 ? html ` <nile-icon name="${this.iconName}" size="16"></nile-icon>`
                 : html ``}
-          ${this.havefilter
+            ${this.havefilter
                 ? html ` <nile-popover title="Filter" placement="bottom">
-                <nile-icon name="filter" size="16" slot="anchor"></nile-icon>
-                <nile-input
-                  placeholder="Search"
-                  @nile-input=${this.handleSearch}
-                  part="filter__search"
-                ></nile-input>
-                <slot name="filter__content" part="filter__content"></slot>
-              </nile-popover>`
+                  <nile-icon name="filter" size="16" slot="anchor"></nile-icon>
+                  <nile-input
+                    placeholder="Search"
+                    @nile-input=${this.handleSearch}
+                    part="filter__search"
+                  ></nile-input>
+                  <slot name="filter__content" part="filter__content"></slot>
+                </nile-popover>`
                 : html ``}
-        </div>
-      </div>`
-            : null}`;
+          </div>
+          <div class="resizer" @mousedown=${this.handleResizeStart}></div>
+        </div>`;
+        }
+        else {
+            return 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
+                  name="sortdown"
+                  size="16"
+                  @click=${this.handleSort}
+                  class="hover__arrow"
+                ></nile-icon>`
+                : null}
+            ${this.havesort && this.sorting_ct % 3 === 1
+                ? html `<nile-icon
+                  name="sortdown"
+                  size="16"
+                  @click=${this.handleSort}
+                ></nile-icon>`
+                : null}
+            ${this.havesort && this.sorting_ct % 3 === 2
+                ? html `<nile-icon
+                  name="sortup"
+                  size="16"
+                  @click=${this.handleSort}
+                ></nile-icon>`
+                : null}
+            ${this.iconName
+                ? html ` <nile-icon name="${this.iconName}" size="16"></nile-icon>`
+                : html ``}
+            ${this.havefilter
+                ? html ` <nile-popover title="Filter" placement="bottom">
+                  <nile-icon name="filter" size="16" slot="anchor"></nile-icon>
+                  <nile-input
+                    placeholder="Search"
+                    @nile-input=${this.handleSearch}
+                    part="filter__search"
+                  ></nile-input>
+                  <slot name="filter__content" part="filter__content"></slot>
+                </nile-popover>`
+                : html ``}
+          </div>
+        </div>`;
+        }
     }
 };
 __decorate([
@@ -109,6 +157,9 @@ __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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-table-header-item.js","sourceRoot":"","sources":["../../../src/nile-table-header-item/nile-table-header-item.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;~~AAErD~~;;;;;GAKG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,WAAW;IAA7C;;QACY,sBAAiB,GAAG,IAAI,iBAAiB,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;QAS9E,sCAAsC;QACM,aAAQ,GAAG,KAAK,CAAC;QAE7D,sCAAsC;QACM,eAAU,GAAG,KAAK,CAAC;QAE/D,wBAAwB;QAC2C,aAAQ,GACzE,EAAE,CAAC;~~QAEI~~,eAAU,GAAG,CAAC,CAAC;~~QAqExB~~,~~gBAAgB~~;~~IAClB~~,CAAC;~~IAxFC~~;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;~~IAcD~~,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACK,UAAU,CAAC,CAAM;QACvB,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,gBAAgB,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC;QAC7D,MAAM,KAAK,GAAG,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QACvC,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;YAC3B,KAAK,EAAE,EAAE,gBAAgB,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,EAAE;SAC/D,CAAC,CAAC;IACL,CAAC;IAEO,YAAY,CAAC,CAAM;QACzB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;IACtD,CAAC;~~IAEM~~,MAAM;QACX,OAAO,IAAI,CAAA,IAAI,IAAI,CAAC,~~iBAAiB~~,CAAC,IAAI,CAAC,~~WAAW~~,CAAC;~~YACrD~~,CAAC,CAAC,IAAI,CAAA;;;;~~YAIA~~,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,GAAG,CAAC,KAAK,CAAC;gBAC1C,CAAC,CAAC,IAAI,CAAA;;;~~yBAGO~~,IAAI,CAAC,UAAU;;~~4BAEZ~~;gBAChB,CAAC,CAAC,IAAI;~~YACN~~,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,GAAG,CAAC,KAAK,CAAC;gBAC1C,CAAC,CAAC,IAAI,CAAA;;;~~yBAGO~~,IAAI,CAAC,UAAU;~~4BACZ~~;gBAChB,CAAC,CAAC,IAAI;~~YACN~~,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,GAAG,CAAC,KAAK,CAAC;gBAC1C,CAAC,CAAC,IAAI,CAAA;;;~~yBAGO~~,IAAI,CAAC,UAAU;~~4BACZ~~;gBAChB,CAAC,CAAC,IAAI;~~YACN~~,IAAI,CAAC,QAAQ;gBACb,CAAC,CAAC,IAAI,CAAA,qBAAqB,IAAI,CAAC,QAAQ,0BAA0B;gBAClE,CAAC,CAAC,IAAI,CAAA,EAAE;~~YACR~~,IAAI,CAAC,UAAU;gBACf,CAAC,CAAC,IAAI,CAAA;;;;~~gCAIc~~,IAAI,CAAC,YAAY;;;;~~8BAInB~~;gBAClB,CAAC,CAAC,IAAI,CAAA,EAAE;;~~aAEP;YACP~~,CAAC,CAAC~~,IAAI,EAAE,CAAC~~;~~IACb~~,CAAC;~~CAEF~~,CAAA;AA/~~E6C~~;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qDAAkB;AAGjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDAAoB;AAGI;IAAlE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;qDAC7D;~~AAEI~~;IAAR,KAAK,EAAE;uDAAgB;~~AApBb~~,mBAAmB;IAD/B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,mBAAmB,~~CA0F~~/B;;AAED,eAAe,mBAAmB,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, 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"]}
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';\nimport { createResizeHandler } from '../internal/resizable-table-helper';\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 /\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 = createResizeHandler(this, 50);\n\n public render(): TemplateResult {\n if (this.resizable) {\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 <div class=\"resizer\" @mousedown=${this.handleResizeStart}></div>\n </div>`;\n } else {\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 </div>`;\n }\n }\n}\n\nexport default NileTableHeaderItem;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-table-header-item': NileTableHeaderItem;\n }\n}\n"]}