@nuralyui/table 0.0.10 → 0.0.11
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.
- package/bundle.js +16 -16
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/react.js.map +1 -1
- package/table.component.d.ts +5 -1
- package/table.component.js +50 -7
- package/table.component.js.map +1 -1
- package/table.style.js +16 -4
- package/table.style.js.map +1 -1
- package/table.types.d.ts +18 -0
- package/table.types.js.map +1 -1
package/bundle.js
CHANGED
|
@@ -694,7 +694,7 @@ class p{constructor(t){this._host=t,this._host.addController(this)}get host(){re
|
|
|
694
694
|
* @license
|
|
695
695
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
696
696
|
* SPDX-License-Identifier: MIT
|
|
697
|
-
*/class f extends p{initSelection(){this.host.selectionMode&&(this.host.selectedItems=Array(this.host.rows.length).fill(!1))}handleCheckAll(t){try{const e=(this.host.currentPage-1)*this.host.selectedItemPerPage,n=Math.min(e+this.host.selectedItemPerPage,this.host.selectedItems.length),i=[...this.host.selectedItems];for(let r=e;r<n;r++)i[r]=!t;this.host.selectedItems=i;const r=this.host.rowsCopy.filter((
|
|
697
|
+
*/class f extends p{initSelection(){this.host.selectionMode&&(this.host.selectedItems=Array(this.host.rows.length).fill(!1))}handleCheckAll(t){try{const e=(this.host.currentPage-1)*this.host.selectedItemPerPage,n=Math.min(e+this.host.selectedItemPerPage,this.host.selectedItems.length),i=[...this.host.selectedItems];for(let r=e;r<n;r++)i[r]=!t;this.host.selectedItems=i;const r=this.host.rowsCopy.filter((t,e)=>this.host.selectedItems[e]);this.dispatchEvent(new CustomEvent("onSelect",{bubbles:!0,composed:!0,detail:{value:r}})),this.requestUpdate()}catch(t){this.handleError(t,"handleCheckAll")}}handleCheckOne(t,e){try{const n=t+(this.host.currentPage-1)*this.host.selectedItemPerPage;this.host.selectedItems[n]=e,this.host.selectedItems=[...this.host.selectedItems];const i=this.host.rowsCopy.filter((t,e)=>this.host.selectedItems[e]);this.dispatchEvent(new CustomEvent("nr-select",{bubbles:!0,composed:!0,detail:{value:i}})),this.requestUpdate()}catch(t){this.handleError(t,"handleCheckOne")}}handleSelectOne(t){try{const e=this.host.selectedItems.findIndex(t=>t);e>-1&&(this.host.selectedItems[e]=!1);const n=t+(this.host.currentPage-1)*this.host.selectedItemPerPage;this.host.selectedItems[n]=!0,this.host.selectedItems=[...this.host.selectedItems];const i=this.host.rowsCopy.filter((t,e)=>this.host.selectedItems[e]);this.dispatchEvent(new CustomEvent("nr-select",{bubbles:!0,composed:!0,detail:{value:i}})),this.requestUpdate()}catch(t){this.handleError(t,"handleSelectOne")}}cancelSelection(){try{this.host.selectedItems=this.host.selectedItems.map(()=>!1),this.dispatchEvent(new CustomEvent("nr-select",{bubbles:!0,composed:!0,detail:{value:[]}})),this.requestUpdate()}catch(t){this.handleError(t,"cancelSelection")}}hasSelection(){return this.host.selectedItems.some(t=>t)}getSelectedCount(){return this.host.selectedItems.filter(t=>t).length}}
|
|
698
698
|
/**
|
|
699
699
|
* @license
|
|
700
700
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
@@ -704,12 +704,12 @@ class p{constructor(t){this._host=t,this._host.addController(this)}get host(){re
|
|
|
704
704
|
* @license
|
|
705
705
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
706
706
|
* SPDX-License-Identifier: MIT
|
|
707
|
-
*/class g extends p{handleSortOrderChange(t){try{t!==this.host.sortAttribute.index?(this.host.sortAttribute.index=t,this.host.sortAttribute.order="ascending"):"default"===this.host.sortAttribute.order?this.host.sortAttribute.order="ascending":"ascending"===this.host.sortAttribute.order?this.host.sortAttribute.order="descending":this.host.sortAttribute.order="default",this.host.sortAttribute=Object.assign({},this.host.sortAttribute),this.requestUpdate()}catch(t){this.handleError(t,"handleSortOrderChange")}}sort(){try{if(!this.host.rowsCopy.length)return;const t="default"===this.host.sortAttribute.order?0:"ascending"===this.host.sortAttribute.order?1:-1;this.host.rowsCopy.sort((
|
|
707
|
+
*/class g extends p{handleSortOrderChange(t){try{t!==this.host.sortAttribute.index?(this.host.sortAttribute.index=t,this.host.sortAttribute.order="ascending"):"default"===this.host.sortAttribute.order?this.host.sortAttribute.order="ascending":"ascending"===this.host.sortAttribute.order?this.host.sortAttribute.order="descending":this.host.sortAttribute.order="default",this.host.sortAttribute=Object.assign({},this.host.sortAttribute),this.requestUpdate()}catch(t){this.handleError(t,"handleSortOrderChange")}}sort(){try{if(!this.host.rowsCopy.length)return;const t="default"===this.host.sortAttribute.order?0:"ascending"===this.host.sortAttribute.order?1:-1;this.host.rowsCopy.sort((e,n)=>{const i=this.host.headers[this.host.sortAttribute.index].key,r=JSON.stringify(e[i]),a=JSON.stringify(n[i]);return(r<a?-1:r>a?1:0)*t}),this.dispatchEvent(new CustomEvent("onSort",{bubbles:!0,composed:!0,detail:{value:this.host.rowsCopy}})),this.requestUpdate()}catch(t){this.handleError(t,"sort")}}resetSort(){try{this.host.rowsCopy.sort((t,e)=>{const n=this.host.rows.findIndex(e=>JSON.stringify(e)===JSON.stringify(t)),i=this.host.rows.findIndex(t=>JSON.stringify(t)===JSON.stringify(e));return n>i?1:n<i?-1:0}),this.requestUpdate()}catch(t){this.handleError(t,"resetSort")}}isSortActive(){return this.host.sortAttribute.index>-1}isSortDefault(){return"default"===this.host.sortAttribute.order}}
|
|
708
708
|
/**
|
|
709
709
|
* @license
|
|
710
710
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
711
711
|
* SPDX-License-Identifier: MIT
|
|
712
|
-
*/class b extends p{handleSearch(t){try{t.trim().length>0?(this.host.activeSearch=!0,this.host.rowsCopy=this.host.rows.filter(
|
|
712
|
+
*/class b extends p{handleSearch(t){try{t.trim().length>0?(this.host.activeSearch=!0,this.host.rowsCopy=this.host.rows.filter(e=>Object.values(e).some(e=>JSON.stringify(e).includes(t))),this.dispatchEvent(new CustomEvent("onSearch",{bubbles:!0,composed:!0,detail:{value:this.host.rowsCopy}}))):this.clearSearch(),this.requestUpdate()}catch(t){this.handleError(t,"handleSearch")}}clearSearch(){try{this.host.activeSearch=!1,this.requestUpdate()}catch(t){this.handleError(t,"clearSearch")}}isSearchActive(){return this.host.activeSearch}getFilteredCount(){return this.host.rowsCopy.length}applyColumnFilter(t,e){try{""===e||null==e?this.host.columnFilters.delete(t):this.host.columnFilters.set(t,e),this.filterRows(),this.requestUpdate()}catch(t){this.handleError(t,"applyColumnFilter")}}clearColumnFilter(t){try{this.host.columnFilters.delete(t),this.filterRows(),this.requestUpdate()}catch(t){this.handleError(t,"clearColumnFilter")}}clearAllColumnFilters(){try{this.host.columnFilters.clear(),this.filterRows(),this.requestUpdate()}catch(t){this.handleError(t,"clearAllColumnFilters")}}toggleColumnFilterDropdown(t){try{this.host.activeFilterColumn=this.host.activeFilterColumn===t?null:t,this.requestUpdate()}catch(t){this.handleError(t,"toggleColumnFilterDropdown")}}filterRows(){var t;let e=[...this.host.rows];this.host.columnFilters.size>0&&(e=e.filter(t=>Array.from(this.host.columnFilters.entries()).every(([e,n])=>{const i=t[e];if(null==i)return!1;const r=String(i).toLowerCase(),a=String(n).toLowerCase();return r.includes(a)}))),this.host.activeSearch&&this.host.filterValue&&(e=e.filter(t=>Object.values(t).some(t=>JSON.stringify(t).toLowerCase().includes(this.host.filterValue.toLowerCase())))),this.host.rowsCopy=e,this.host.activeSearch=this.host.columnFilters.size>0||(null===(t=this.host.filterValue)||void 0===t?void 0:t.length)>0}}function x(t,e,n){let i=0;n&&(i+=50);for(let n=0;n<e;n++)if("left"===t[n].fixed){const e=t[n].width;i+="number"==typeof e?e:parseInt(String(e))||150}return i}function m(t){const e=[];return t.fixed&&(e.push("fixed-column"),e.push(`fixed-column-${t.fixed}`)),e.join(" ")}function y(t){const i=t.headers.some(t=>"left"===t.fixed),r=i?"fixed-column fixed-column-left":"";return e`
|
|
713
713
|
<table>
|
|
714
714
|
<thead>
|
|
715
715
|
<tr>
|
|
@@ -719,7 +719,7 @@ class p{constructor(t){this._host=t,this._host.addController(this)}get host(){re
|
|
|
719
719
|
@nr-change=${t.onCheckAll}
|
|
720
720
|
></nr-checkbox>`:n}
|
|
721
721
|
</th>`:n}
|
|
722
|
-
${c(t.headers,(
|
|
722
|
+
${c(t.headers,(i,r)=>{const a=m(i),o=t.expandable||t.expansionRenderer||t.selectionMode,l="left"===i.fixed?x(t.headers,r,!!o):void 0,s=i.width?"number"==typeof i.width?`${i.width}px`:i.width:void 0;return e`
|
|
723
723
|
${t.expandable!==i.key?e`<th
|
|
724
724
|
class="${[i.filterable?"filterable":"",a].filter(Boolean).join(" ")}"
|
|
725
725
|
style="${void 0!==l?`left: ${l}px;`:""} ${s?`width: ${s}; min-width: ${s};`:""}">
|
|
@@ -794,25 +794,25 @@ class p{constructor(t){this._host=t,this._host.addController(this)}get host(){re
|
|
|
794
794
|
* @license
|
|
795
795
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
796
796
|
* SPDX-License-Identifier: MIT
|
|
797
|
-
*/})
|
|
797
|
+
*/})}
|
|
798
798
|
</tr>
|
|
799
799
|
</thead>
|
|
800
800
|
<tbody>
|
|
801
801
|
${t.loading?function(t,n=5){const i=!!t.selectionMode;return e`
|
|
802
|
-
${Array.from({length:n},(
|
|
802
|
+
${Array.from({length:n},()=>e`
|
|
803
803
|
<tr class="skeleton-row">
|
|
804
804
|
${i?e`
|
|
805
805
|
<td class="skeleton-cell selection-skeleton">
|
|
806
806
|
<div class="skeleton-checkbox"></div>
|
|
807
807
|
</td>
|
|
808
808
|
`:""}
|
|
809
|
-
${t.headers.map((
|
|
809
|
+
${t.headers.map(()=>e`
|
|
810
810
|
<td class="skeleton-cell">
|
|
811
811
|
<div class="skeleton-content"></div>
|
|
812
812
|
</td>
|
|
813
|
-
`)
|
|
813
|
+
`)}
|
|
814
814
|
</tr>
|
|
815
|
-
`)
|
|
815
|
+
`)}
|
|
816
816
|
`}(t.host,5):0===t.rows.length?function(t){const n=t.headers.length+(t.selectionMode?1:0);return e`
|
|
817
817
|
<tr class="empty-row">
|
|
818
818
|
<td colspan="${n}" class="empty-cell">
|
|
@@ -846,7 +846,7 @@ class p{constructor(t){this._host=t,this._host.addController(this)}get host(){re
|
|
|
846
846
|
</div>
|
|
847
847
|
</td>
|
|
848
848
|
</tr>
|
|
849
|
-
`}(t.host):c(t.rows,(
|
|
849
|
+
`}(t.host):c(t.rows,(a,o)=>e`
|
|
850
850
|
<tr>
|
|
851
851
|
${!t.expandable&&!t.expansionRenderer||t.selectionMode?t.selectionMode?d(t.selectionMode,[["multiple",()=>e`<td class="${r}" style="${i?"left: 0; width: 50px; min-width: 50px;":""}">
|
|
852
852
|
<nr-checkbox
|
|
@@ -873,11 +873,11 @@ class p{constructor(t){this._host=t,this._host.addController(this)}get host(){re
|
|
|
873
873
|
<nr-icon name="angle-down"></nr-icon>
|
|
874
874
|
</td>
|
|
875
875
|
`}
|
|
876
|
-
${c(t.headers,(
|
|
876
|
+
${c(t.headers,(i,r)=>{const o=m(i),l=t.expandable||t.expansionRenderer||t.selectionMode,s="left"===i.fixed?x(t.headers,r,!!l):void 0,c=i.width?"number"==typeof i.width?`${i.width}px`:i.width:void 0;return e`${t.expandable!==i.key?e`<td
|
|
877
877
|
class="${o}"
|
|
878
878
|
style="${void 0!==s?`left: ${s}px;`:""} ${c?`width: ${c}; min-width: ${c};`:""}">
|
|
879
879
|
${a[i.key]}
|
|
880
|
-
</td>`:n}`})
|
|
880
|
+
</td>`:n}`})}
|
|
881
881
|
</tr>
|
|
882
882
|
${t.expand[o]?e`
|
|
883
883
|
<tr class="expansion-row expanded">
|
|
@@ -888,7 +888,7 @@ class p{constructor(t){this._host=t,this._host.addController(this)}get host(){re
|
|
|
888
888
|
</td>
|
|
889
889
|
</tr>
|
|
890
890
|
`:n}
|
|
891
|
-
`)
|
|
891
|
+
`)}
|
|
892
892
|
</tbody>
|
|
893
893
|
</table>
|
|
894
894
|
`}
|
|
@@ -897,7 +897,7 @@ class p{constructor(t){this._host=t,this._host.addController(this)}get host(){re
|
|
|
897
897
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
898
898
|
* SPDX-License-Identifier: MIT
|
|
899
899
|
*/
|
|
900
|
-
var v=function(t,e,n,i){for(var r,a=arguments.length,o=a<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,n):i,l=t.length-1;l>=0;l--)(r=t[l])&&(o=(a<3?r(o):a>3?r(e,n,o):r(e,n))||o);return a>3&&o&&Object.defineProperty(e,n,o),o};let w=class extends(s(i)){constructor(){super(...arguments),this.rows=[],this.size="normal",this.withFilter=!1,this.fixedHeader=!1,this.loading=!1,this.emptyText="No data available",this.itemPerPage=[5,10,15,20],this.selectedItemPerPage=this.itemPerPage[0],this.displayedRows=[],this.selectedItems=[],this.rowsCopy=[],this.activeSearch=!1,this.sortAttribute={index:-1,order:"default"},this.expand=[],this.showFilterInput=!1,this.filterValue="",this.columnFilters=new Map,this.activeFilterColumn=null,this.requiredComponents=["nr-select","nr-icon","nr-checkbox","nr-radio"],this.selectionController=new f(this),this.paginationController=new u(this),this.sortController=new g(this),this.filterController=new b(this)}connectedCallback(){super.connectedCallback(),this.selectionController.initSelection()}updated(t){var e,n;if(this.globalCheck&&(t.has("selectedItems")||t.has("currentPage")||t.has("displayedRows"))){const t=this.globalCheck,e=(this.currentPage-1)*this.selectedItemPerPage,n=Math.min(e+this.displayedRows.length,this.selectedItems.length),i=this.selectedItems.slice(e,n);i.length>0&&i.every(
|
|
900
|
+
var v=function(t,e,n,i){for(var r,a=arguments.length,o=a<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,n):i,l=t.length-1;l>=0;l--)(r=t[l])&&(o=(a<3?r(o):a>3?r(e,n,o):r(e,n))||o);return a>3&&o&&Object.defineProperty(e,n,o),o};let w=class extends(s(i)){constructor(){super(...arguments),this.rows=[],this.size="normal",this.withFilter=!1,this.fixedHeader=!1,this.loading=!1,this.emptyText="No data available",this.itemPerPage=[5,10,15,20],this.selectedItemPerPage=this.itemPerPage[0],this.displayedRows=[],this.selectedItems=[],this.rowsCopy=[],this.activeSearch=!1,this.sortAttribute={index:-1,order:"default"},this.expand=[],this.showFilterInput=!1,this.filterValue="",this.columnFilters=new Map,this.activeFilterColumn=null,this.requiredComponents=["nr-select","nr-icon","nr-checkbox","nr-radio"],this.selectionController=new f(this),this.paginationController=new u(this),this.sortController=new g(this),this.filterController=new b(this)}connectedCallback(){super.connectedCallback(),this.selectionController.initSelection()}updated(t){var e,n;if(this.globalCheck&&(t.has("selectedItems")||t.has("currentPage")||t.has("displayedRows"))){const t=this.globalCheck,e=(this.currentPage-1)*this.selectedItemPerPage,n=Math.min(e+this.displayedRows.length,this.selectedItems.length),i=this.selectedItems.slice(e,n);i.length>0&&i.every(t=>t)?(t.checked=!0,t.indeterminate=!1):i.some(t=>t)?(t.checked=!1,t.indeterminate=!0):(t.checked=!1,t.indeterminate=!1)}this.showFilterInput&&t.has("showFilterInput")&&(null===(n=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector("input"))||void 0===n||n.focus())}willUpdate(t){t.has("rows")&&(this.expand=Array(this.rows.length).fill(!1)),t.has("sortAttribute")&&this.sortController.isSortActive()&&(this._initPagination(),this.selectionController.initSelection()),t.has("rowsCopy")&&this.filterController.isSearchActive()&&this._initPagination(),(t.has("activeSearch")||t.has("rows"))&&(this.filterController.isSearchActive()||(this.rowsCopy=[...this.rows],this._initPagination()))}_initPagination(){this.sortController.isSortActive()&&(this.sortController.isSortDefault()?this.sortController.resetSort():this.sortController.sort()),this.paginationController.initPagination()}_handleItemPerPage(t){const e=t.detail.value||t.detail.selectedItemPerPage;this.paginationController.handleItemPerPageChange(Number(e))}_handleUpdatePage(t){this.paginationController.handlePageChange(t.detail.page)}_handleCheckAll(t){this.selectionController.handleCheckAll(t.detail.isEveryItemChecked)}_handleCheckOne(t){this.selectionController.handleCheckOne(t.detail.index,t.detail.value)}_handleSelectOne(t){this.selectionController.handleSelectOne(t.detail.index)}_handleCancelSelection(){this.selectionController.cancelSelection()}_handleSearch(t){this.filterController.handleSearch(t.detail.value)}_handleSortOrder(t){this.sortController.handleSortOrderChange(t.detail.index)}_showExpandedContent(t){this.expand[t]=!this.expand[t],this.requestUpdate()}_toggleFilterInput(){this.showFilterInput=!this.showFilterInput}_handleFilterInputChange(t){this.filterValue=t.target.value,this.filterController.handleSearch(this.filterValue)}render(){var t,i;const r=Math.ceil(this.rowsCopy.length/this.selectedItemPerPage),a=this.currentPage>0?this.currentPage*this.selectedItemPerPage-this.selectedItemPerPage+1:0,o=this.currentPage*this.selectedItemPerPage<=this.rowsCopy.length?this.currentPage*this.selectedItemPerPage:this.rowsCopy.length,l=o<this.rowsCopy.length,s=a>1;return e`
|
|
901
901
|
${this.selectionMode&&!this.withFilter&&this.selectionController.hasSelection()?(c={selectedItems:this.selectionController.getSelectedCount(),size:this.size,onCancelSelection:()=>this._handleCancelSelection()},e`
|
|
902
902
|
<div class="actions-container" data-size="${c.size}">
|
|
903
903
|
<span>${c.selectedItems} selected</span>
|
|
@@ -928,10 +928,10 @@ var v=function(t,e,n,i){for(var r,a=arguments.length,o=a<3?e:null===i?i=Object.g
|
|
|
928
928
|
<div class="table-content-wrapper ${this.fixedHeader?"fixed-header":""}"
|
|
929
929
|
style="${(null===(t=this.scrollConfig)||void 0===t?void 0:t.y)?`${this.fixedHeader?"height":"max-height"}: ${"number"==typeof this.scrollConfig.y?this.scrollConfig.y+"px":this.scrollConfig.y};`:""}
|
|
930
930
|
${(null===(i=this.scrollConfig)||void 0===i?void 0:i.x)?`${this.fixedHeader?"width":"max-width"}: ${"number"==typeof this.scrollConfig.x?this.scrollConfig.x+"px":this.scrollConfig.x};`:""}">
|
|
931
|
-
${y({headers:this.headers,rows:this.displayedRows,expandable:this.expandable&&!this.selectionMode?this.expandable:void 0,expansionRenderer:this.selectionMode?void 0:this.expansionRenderer,selectionMode:this.selectionMode&&!this.withFilter?this.selectionMode:void 0,selectedItems:this.selectedItems,currentPage:this.currentPage,itemPerPage:this.selectedItemPerPage,sortAttribute:this.sortAttribute,expand:this.expand,columnFilters:this.columnFilters,activeFilterColumn:this.activeFilterColumn,loading:this.loading,host:this,onCheckAll:()=>{const t=(this.currentPage-1)*this.selectedItemPerPage,e=Math.min(t+this.selectedItemPerPage,this.selectedItems.length),n=this.selectedItems.slice(t,e),i=n.every(
|
|
931
|
+
${y({headers:this.headers,rows:this.displayedRows,expandable:this.expandable&&!this.selectionMode?this.expandable:void 0,expansionRenderer:this.selectionMode?void 0:this.expansionRenderer,selectionMode:this.selectionMode&&!this.withFilter?this.selectionMode:void 0,selectedItems:this.selectedItems,currentPage:this.currentPage,itemPerPage:this.selectedItemPerPage,sortAttribute:this.sortAttribute,expand:this.expand,columnFilters:this.columnFilters,activeFilterColumn:this.activeFilterColumn,loading:this.loading,host:this,onCheckAll:()=>{const t=(this.currentPage-1)*this.selectedItemPerPage,e=Math.min(t+this.selectedItemPerPage,this.selectedItems.length),n=this.selectedItems.slice(t,e),i=n.every(t=>t)&&n.length>0;this._handleCheckAll({detail:{isEveryItemChecked:i}})},onCheckOne:(t,e)=>this._handleCheckOne({detail:{index:e,value:t.detail.checked}}),onSelectOne:t=>this._handleSelectOne({detail:{index:t}}),onUpdateSort:t=>this._handleSortOrder({detail:{index:t}}),onShowExpandedContent:t=>this._showExpandedContent(t),onToggleColumnFilter:t=>this.filterController.toggleColumnFilterDropdown(t),onApplyColumnFilter:(t,e)=>this.filterController.applyColumnFilter(t,e),onClearColumnFilter:t=>this.filterController.clearColumnFilter(t)})}
|
|
932
932
|
</div>
|
|
933
933
|
|
|
934
|
-
${function(t){const i=t.itemPerPage.map(
|
|
934
|
+
${function(t){const i=t.itemPerPage.map(t=>({label:String(t),value:String(t)}));return e`
|
|
935
935
|
<div class="pagination-container" data-size="${t.size}">
|
|
936
936
|
<div class="left-content">
|
|
937
937
|
<span class="select-details">
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/table/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC","sourcesContent":["export * from './table.component.js';"]}
|
package/package.json
CHANGED
package/react.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../../src/components/table/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,MAAM,CAAC,MAAM,gBAAgB,GAAG,eAAe,CAAC;IAC9C,OAAO,EAAE,UAAU;IACnB,YAAY,EAAE,OAAO;IACrB,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,QAAQ,EAAE,WAAW;QACrB,UAAU,EAAE,aAAa;QACzB,eAAe,EAAE,WAAW;KAC7B;CACF,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { HyTable } from './table.component.js';\n\nexport const HyTableComponent = createComponent({\n tagName: 'nr-table',\n elementClass: HyTable,\n react: React,\n events: {\n rowClick: 'row-click',\n sortChange: 'sort-change',\n selectionChange: 'nr-select',\n },\n});\n"]}
|
package/table.component.d.ts
CHANGED
|
@@ -57,6 +57,10 @@ export declare class HyTable extends HyTable_base implements TableHost {
|
|
|
57
57
|
loading: boolean;
|
|
58
58
|
emptyText: string;
|
|
59
59
|
emptyIcon: string | undefined;
|
|
60
|
+
serverSide: boolean;
|
|
61
|
+
totalCount: number;
|
|
62
|
+
clickable: boolean;
|
|
63
|
+
pageSize: number;
|
|
60
64
|
itemPerPage: number[];
|
|
61
65
|
selectedItemPerPage: number;
|
|
62
66
|
displayedRows: any[];
|
|
@@ -130,7 +134,7 @@ export declare class HyTable extends HyTable_base implements TableHost {
|
|
|
130
134
|
/**
|
|
131
135
|
* Render the table component with all templates
|
|
132
136
|
*/
|
|
133
|
-
render(): import("lit").TemplateResult<1>;
|
|
137
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
134
138
|
}
|
|
135
139
|
export {};
|
|
136
140
|
//# sourceMappingURL=table.component.d.ts.map
|
package/table.component.js
CHANGED
|
@@ -60,8 +60,12 @@ let HyTable = class HyTable extends NuralyUIBaseMixin(LitElement) {
|
|
|
60
60
|
this.fixedHeader = false;
|
|
61
61
|
this.loading = false;
|
|
62
62
|
this.emptyText = 'No data available';
|
|
63
|
+
this.serverSide = false;
|
|
64
|
+
this.totalCount = 0;
|
|
65
|
+
this.clickable = false;
|
|
66
|
+
this.pageSize = 5;
|
|
63
67
|
this.itemPerPage = [5, 10, 15, 20];
|
|
64
|
-
this.selectedItemPerPage =
|
|
68
|
+
this.selectedItemPerPage = 5;
|
|
65
69
|
this.displayedRows = [];
|
|
66
70
|
this.selectedItems = [];
|
|
67
71
|
this.rowsCopy = [];
|
|
@@ -82,6 +86,10 @@ let HyTable = class HyTable extends NuralyUIBaseMixin(LitElement) {
|
|
|
82
86
|
connectedCallback() {
|
|
83
87
|
super.connectedCallback();
|
|
84
88
|
this.selectionController.initSelection();
|
|
89
|
+
// Initialize selectedItemPerPage from pageSize property
|
|
90
|
+
if (this.pageSize && this.itemPerPage.includes(this.pageSize)) {
|
|
91
|
+
this.selectedItemPerPage = this.pageSize;
|
|
92
|
+
}
|
|
85
93
|
}
|
|
86
94
|
updated(_changedProperties) {
|
|
87
95
|
var _a, _b;
|
|
@@ -112,6 +120,18 @@ let HyTable = class HyTable extends NuralyUIBaseMixin(LitElement) {
|
|
|
112
120
|
if (_changedProperties.has('rows')) {
|
|
113
121
|
this.expand = Array(this.rows.length).fill(false);
|
|
114
122
|
}
|
|
123
|
+
// Server-side pagination: rows are already paginated from backend
|
|
124
|
+
if (this.serverSide) {
|
|
125
|
+
if (_changedProperties.has('rows')) {
|
|
126
|
+
this.displayedRows = [...this.rows];
|
|
127
|
+
// Initialize currentPage on first data load
|
|
128
|
+
if (!this.currentPage && this.rows.length > 0) {
|
|
129
|
+
this.currentPage = 1;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
return;
|
|
133
|
+
}
|
|
134
|
+
// Client-side pagination logic
|
|
115
135
|
if (_changedProperties.has('sortAttribute') && this.sortController.isSortActive()) {
|
|
116
136
|
this._initPagination();
|
|
117
137
|
this.selectionController.initSelection();
|
|
@@ -216,14 +236,15 @@ let HyTable = class HyTable extends NuralyUIBaseMixin(LitElement) {
|
|
|
216
236
|
*/
|
|
217
237
|
render() {
|
|
218
238
|
var _a, _b;
|
|
219
|
-
const
|
|
239
|
+
const totalItems = this.serverSide ? this.totalCount : this.rowsCopy.length;
|
|
240
|
+
const numberOfPages = Math.ceil(totalItems / this.selectedItemPerPage);
|
|
220
241
|
const fromItem = this.currentPage > 0
|
|
221
242
|
? this.currentPage * this.selectedItemPerPage - this.selectedItemPerPage + 1
|
|
222
243
|
: 0;
|
|
223
|
-
const toItem = this.currentPage * this.selectedItemPerPage <=
|
|
244
|
+
const toItem = this.currentPage * this.selectedItemPerPage <= totalItems
|
|
224
245
|
? this.currentPage * this.selectedItemPerPage
|
|
225
|
-
:
|
|
226
|
-
const enableNext = toItem <
|
|
246
|
+
: totalItems;
|
|
247
|
+
const enableNext = toItem < totalItems;
|
|
227
248
|
const enablePrevious = fromItem > 1;
|
|
228
249
|
return html `
|
|
229
250
|
${this.selectionMode && !this.withFilter && this.selectionController.hasSelection()
|
|
@@ -263,6 +284,7 @@ let HyTable = class HyTable extends NuralyUIBaseMixin(LitElement) {
|
|
|
263
284
|
activeFilterColumn: this.activeFilterColumn,
|
|
264
285
|
loading: this.loading,
|
|
265
286
|
host: this,
|
|
287
|
+
clickable: this.clickable,
|
|
266
288
|
onCheckAll: () => {
|
|
267
289
|
const startIndex = (this.currentPage - 1) * this.selectedItemPerPage;
|
|
268
290
|
const endIndex = Math.min(startIndex + this.selectedItemPerPage, this.selectedItems.length);
|
|
@@ -276,12 +298,21 @@ let HyTable = class HyTable extends NuralyUIBaseMixin(LitElement) {
|
|
|
276
298
|
onShowExpandedContent: (index) => this._showExpandedContent(index),
|
|
277
299
|
onToggleColumnFilter: (columnKey) => this.filterController.toggleColumnFilterDropdown(columnKey),
|
|
278
300
|
onApplyColumnFilter: (columnKey, value) => this.filterController.applyColumnFilter(columnKey, value),
|
|
279
|
-
onClearColumnFilter: (columnKey) => this.filterController.clearColumnFilter(columnKey)
|
|
301
|
+
onClearColumnFilter: (columnKey) => this.filterController.clearColumnFilter(columnKey),
|
|
302
|
+
onRowClick: (row, index) => {
|
|
303
|
+
if (this.clickable) {
|
|
304
|
+
this.dispatchEvent(new CustomEvent('nr-row-click', {
|
|
305
|
+
detail: { row, index },
|
|
306
|
+
bubbles: true,
|
|
307
|
+
composed: true
|
|
308
|
+
}));
|
|
309
|
+
}
|
|
310
|
+
}
|
|
280
311
|
})}
|
|
281
312
|
</div>
|
|
282
313
|
|
|
283
314
|
${renderPaginationTemplate({
|
|
284
|
-
numberOfItems:
|
|
315
|
+
numberOfItems: totalItems,
|
|
285
316
|
itemPerPage: this.itemPerPage,
|
|
286
317
|
selectedItemPerPage: this.selectedItemPerPage,
|
|
287
318
|
currentPage: this.currentPage,
|
|
@@ -341,6 +372,18 @@ __decorate([
|
|
|
341
372
|
__decorate([
|
|
342
373
|
property({ type: String })
|
|
343
374
|
], HyTable.prototype, "emptyIcon", void 0);
|
|
375
|
+
__decorate([
|
|
376
|
+
property({ type: Boolean })
|
|
377
|
+
], HyTable.prototype, "serverSide", void 0);
|
|
378
|
+
__decorate([
|
|
379
|
+
property({ type: Number })
|
|
380
|
+
], HyTable.prototype, "totalCount", void 0);
|
|
381
|
+
__decorate([
|
|
382
|
+
property({ type: Boolean })
|
|
383
|
+
], HyTable.prototype, "clickable", void 0);
|
|
384
|
+
__decorate([
|
|
385
|
+
property({ type: Number })
|
|
386
|
+
], HyTable.prototype, "pageSize", void 0);
|
|
344
387
|
__decorate([
|
|
345
388
|
state()
|
|
346
389
|
], HyTable.prototype, "itemPerPage", void 0);
|
package/table.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.component.js","sourceRoot":"","sources":["../../../src/components/table/table.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, PropertyValueMap, html, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport styles from './table.style.js';\nimport { IHeader, SelectionMode, Sizes, SortAttribute, SortOrder, EMPTY_STRING } from './table.types.js';\n\n// Import controllers\nimport {\n TableSelectionController,\n TablePaginationController,\n TableSortController,\n TableFilterController\n} from './controllers/index.js';\n\n// Import interfaces\nimport { TableHost } from './interfaces/index.js';\n\n// Import templates\nimport {\n renderPaginationTemplate,\n renderContentTemplate,\n renderActionsTemplate,\n renderFilterTemplate\n} from './templates/index.js';\n\n/**\n * Advanced table component with sorting, filtering, pagination, selection, and fixed columns.\n * \n * @example\n * ```html\n * <!-- Basic table with fixed header -->\n * <nr-table\n * .headers=${headers}\n * .rows=${data}\n * size=\"normal\"\n * selectionMode=\"multiple\"\n * fixedHeader\n * .scrollConfig=${{ y: 400 }}>\n * </nr-table>\n * \n * <!-- Table with fixed columns -->\n * <nr-table\n * .headers=${[\n * { name: 'ID', key: 'id', fixed: 'left', width: 80 },\n * { name: 'Name', key: 'name', fixed: 'left', width: 150 },\n * { name: 'Email', key: 'email' },\n * { name: 'Status', key: 'status' }\n * ]}\n * .rows=${data}\n * .scrollConfig=${{ x: 800 }}>\n * </nr-table>\n * ```\n * \n * @fires onPaginate - Fired when pagination changes\n * @fires nr-select - Fired when row selection changes\n * @fires onSearch - Fired when search/filter is applied\n * @fires onSort - Fired when sorting is applied\n */\n@customElement('nr-table')\nexport class HyTable extends NuralyUIBaseMixin(LitElement) implements TableHost {\n static override styles = styles;\n\n @property({ type: Array }) headers!: IHeader[];\n @property({ type: Array }) rows: any[] = [];\n @property({ type: String }) size: Sizes = Sizes.Normal;\n @property({ type: Boolean }) withFilter = false;\n @property({ type: String }) expandable: string | undefined;\n @property({ attribute: false }) expansionRenderer: ((row: any, index: number) => any) | undefined;\n @property({ type: String }) selectionMode: SelectionMode | undefined;\n @property({ type: Boolean }) fixedHeader = false;\n @property({ type: Object }) scrollConfig: { x?: number | string; y?: number | string } | undefined;\n @property({ type: Boolean }) loading = false;\n @property({ type: String }) emptyText = 'No data available';\n @property({ type: String }) emptyIcon: string | undefined;\n\n @state() itemPerPage = [5, 10, 15, 20];\n @state() selectedItemPerPage = this.itemPerPage[0];\n @state() displayedRows: any[] = [];\n @state() selectedItems: boolean[] = [];\n @state() currentPage!: number;\n @state() rowsCopy: any[] = [];\n @state() activeSearch = false;\n @state() sortAttribute: SortAttribute = {index: -1, order: SortOrder.Default};\n @state() expand: boolean[] = [];\n @state() showFilterInput = false;\n @state() filterValue = EMPTY_STRING;\n @state() columnFilters: Map<string, string | number> = new Map();\n @state() activeFilterColumn: string | null = null;\n\n @query('#global-check')\n globalCheck?: HTMLElement;\n\n override requiredComponents = ['nr-select', 'nr-icon', 'nr-checkbox', 'nr-radio'];\n\n // Controllers\n private selectionController = new TableSelectionController(this);\n private paginationController = new TablePaginationController(this);\n private sortController = new TableSortController(this);\n private filterController = new TableFilterController(this);\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.selectionController.initSelection();\n }\n\n override updated(_changedProperties: PropertyValueMap<this> | Map<PropertyKey, unknown>): void {\n if (this.globalCheck && (_changedProperties.has('selectedItems') || _changedProperties.has('currentPage') || _changedProperties.has('displayedRows'))) {\n const checkbox = this.globalCheck as any;\n \n // Get the selection state for the current page only\n const startIndex = (this.currentPage - 1) * this.selectedItemPerPage;\n const endIndex = Math.min(startIndex + this.displayedRows.length, this.selectedItems.length);\n const currentPageSelections = this.selectedItems.slice(startIndex, endIndex);\n \n if (currentPageSelections.length > 0 && currentPageSelections.every((isSelected) => isSelected)) {\n checkbox.checked = true;\n checkbox.indeterminate = false;\n } else if (currentPageSelections.some((isSelected) => isSelected)) {\n checkbox.checked = false;\n checkbox.indeterminate = true;\n } else {\n checkbox.checked = false;\n checkbox.indeterminate = false;\n }\n }\n if (this.showFilterInput && _changedProperties.has('showFilterInput')) {\n this.shadowRoot?.querySelector('input')?.focus();\n }\n }\n\n override willUpdate(_changedProperties: PropertyValueMap<this>) {\n if (_changedProperties.has('rows')) {\n this.expand = Array(this.rows.length).fill(false);\n }\n if (_changedProperties.has('sortAttribute') && this.sortController.isSortActive()) {\n this._initPagination();\n this.selectionController.initSelection();\n }\n if (_changedProperties.has('rowsCopy')) {\n if (this.filterController.isSearchActive()) {\n this._initPagination();\n }\n }\n if (_changedProperties.has('activeSearch') || _changedProperties.has('rows')) {\n if (!this.filterController.isSearchActive()) {\n this.rowsCopy = [...this.rows];\n this._initPagination();\n }\n }\n }\n\n /**\n * Initialize or reset pagination state\n */\n private _initPagination() {\n if (this.sortController.isSortActive()) {\n if (!this.sortController.isSortDefault()) {\n this.sortController.sort();\n } else {\n this.sortController.resetSort();\n }\n }\n this.paginationController.initPagination();\n }\n\n /**\n * Handle items per page change event\n */\n _handleItemPerPage(itemPerPageEvent: CustomEvent) {\n const value = itemPerPageEvent.detail.value || itemPerPageEvent.detail.selectedItemPerPage;\n this.paginationController.handleItemPerPageChange(Number(value));\n }\n\n /**\n * Handle page navigation event\n */\n _handleUpdatePage(updatePageEvent: CustomEvent) {\n this.paginationController.handlePageChange(updatePageEvent.detail.page);\n }\n\n /**\n * Handle check all rows event\n */\n _handleCheckAll(checkAllEvent: CustomEvent) {\n this.selectionController.handleCheckAll(checkAllEvent.detail.isEveryItemChecked);\n }\n\n /**\n * Handle check single row event\n */\n _handleCheckOne(checkOneEvent: CustomEvent) {\n this.selectionController.handleCheckOne(checkOneEvent.detail.index, checkOneEvent.detail.value);\n }\n\n /**\n * Handle select single row event (radio button mode)\n */\n _handleSelectOne(selectOneEvent: CustomEvent) {\n this.selectionController.handleSelectOne(selectOneEvent.detail.index);\n }\n\n /**\n * Handle cancel selection action\n */\n _handleCancelSelection() {\n this.selectionController.cancelSelection();\n }\n\n /**\n * Handle search/filter input\n */\n _handleSearch(searchEvent: CustomEvent) {\n this.filterController.handleSearch(searchEvent.detail.value);\n }\n\n /**\n * Handle column sort order change\n */\n _handleSortOrder(sortOrderEvent: CustomEvent) {\n this.sortController.handleSortOrderChange(sortOrderEvent.detail.index);\n }\n\n /**\n * Toggle expanded content for a row\n */\n private _showExpandedContent(index: number) {\n this.expand[index] = !this.expand[index];\n this.requestUpdate();\n }\n\n /**\n * Toggle filter input visibility\n */\n private _toggleFilterInput() {\n this.showFilterInput = !this.showFilterInput;\n }\n\n /**\n * Handle filter input change\n */\n private _handleFilterInputChange(event: Event) {\n this.filterValue = (event.target as HTMLInputElement).value;\n this.filterController.handleSearch(this.filterValue);\n }\n\n /**\n * Render the table component with all templates\n */\n override render() {\n const numberOfPages = Math.ceil(this.rowsCopy.length / this.selectedItemPerPage);\n const fromItem = this.currentPage > 0 \n ? this.currentPage * this.selectedItemPerPage - this.selectedItemPerPage + 1 \n : 0;\n const toItem = this.currentPage * this.selectedItemPerPage <= this.rowsCopy.length\n ? this.currentPage * this.selectedItemPerPage\n : this.rowsCopy.length;\n const enableNext = toItem < this.rowsCopy.length;\n const enablePrevious = fromItem > 1;\n\n return html`\n ${this.selectionMode && !this.withFilter && this.selectionController.hasSelection()\n ? renderActionsTemplate({\n selectedItems: this.selectionController.getSelectedCount(),\n size: this.size,\n onCancelSelection: () => this._handleCancelSelection()\n })\n : this.withFilter\n ? html`\n <div class=\"filter-container\">\n ${renderFilterTemplate({\n showInput: this.showFilterInput,\n value: this.filterValue,\n onToggleInput: () => this._toggleFilterInput(),\n onChange: (e) => this._handleFilterInputChange(e)\n })}\n </div>\n `\n : nothing}\n\n <div class=\"table-content-wrapper ${this.fixedHeader ? 'fixed-header' : ''}\" \n style=\"${this.scrollConfig?.y ? `${this.fixedHeader ? 'height' : 'max-height'}: ${typeof this.scrollConfig.y === 'number' ? this.scrollConfig.y + 'px' : this.scrollConfig.y};` : ''}\n ${this.scrollConfig?.x ? `${this.fixedHeader ? 'width' : 'max-width'}: ${typeof this.scrollConfig.x === 'number' ? this.scrollConfig.x + 'px' : this.scrollConfig.x};` : ''}\">\n ${renderContentTemplate({\n headers: this.headers,\n rows: this.displayedRows,\n expandable: this.expandable && !this.selectionMode ? this.expandable : undefined,\n expansionRenderer: !this.selectionMode ? this.expansionRenderer : undefined,\n selectionMode: this.selectionMode && !this.withFilter ? this.selectionMode : undefined,\n selectedItems: this.selectedItems,\n currentPage: this.currentPage,\n itemPerPage: this.selectedItemPerPage,\n sortAttribute: this.sortAttribute,\n expand: this.expand,\n columnFilters: this.columnFilters,\n activeFilterColumn: this.activeFilterColumn,\n loading: this.loading,\n host: this,\n onCheckAll: () => {\n const startIndex = (this.currentPage - 1) * this.selectedItemPerPage;\n const endIndex = Math.min(startIndex + this.selectedItemPerPage, this.selectedItems.length);\n const currentPageItems = this.selectedItems.slice(startIndex, endIndex);\n const isEveryItemChecked = currentPageItems.every(i => i) && currentPageItems.length > 0;\n this._handleCheckAll({ detail: { isEveryItemChecked } } as CustomEvent);\n },\n onCheckOne: (e, index) => this._handleCheckOne({ detail: { index, value: (e as CustomEvent).detail.checked } } as CustomEvent),\n onSelectOne: (index) => this._handleSelectOne({ detail: { index } } as CustomEvent),\n onUpdateSort: (index) => this._handleSortOrder({ detail: { index } } as CustomEvent),\n onShowExpandedContent: (index) => this._showExpandedContent(index),\n onToggleColumnFilter: (columnKey) => this.filterController.toggleColumnFilterDropdown(columnKey),\n onApplyColumnFilter: (columnKey, value) => this.filterController.applyColumnFilter(columnKey, value),\n onClearColumnFilter: (columnKey) => this.filterController.clearColumnFilter(columnKey)\n })}\n </div>\n\n ${renderPaginationTemplate({\n numberOfItems: this.rowsCopy.length,\n itemPerPage: this.itemPerPage,\n selectedItemPerPage: this.selectedItemPerPage,\n currentPage: this.currentPage,\n size: this.size,\n numberOfPages,\n fromItem,\n toItem,\n enableNext,\n enablePrevious,\n onItemPerPageChange: (e) => this._handleItemPerPage(e),\n onNextPage: () => {\n this.currentPage++;\n this._handleUpdatePage({ detail: { page: this.currentPage } } as CustomEvent);\n },\n onPreviousPage: () => {\n this.currentPage--;\n this._handleUpdatePage({ detail: { page: this.currentPage } } as CustomEvent);\n }\n })}\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"table.component.js","sourceRoot":"","sources":["../../../../src/components/table/table.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, PropertyValueMap, html, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport styles from './table.style.js';\nimport { IHeader, SelectionMode, Sizes, SortAttribute, SortOrder, EMPTY_STRING } from './table.types.js';\n\n// Import controllers\nimport {\n TableSelectionController,\n TablePaginationController,\n TableSortController,\n TableFilterController\n} from './controllers/index.js';\n\n// Import interfaces\nimport { TableHost } from './interfaces/index.js';\n\n// Import templates\nimport {\n renderPaginationTemplate,\n renderContentTemplate,\n renderActionsTemplate,\n renderFilterTemplate\n} from './templates/index.js';\n\n/**\n * Advanced table component with sorting, filtering, pagination, selection, and fixed columns.\n * \n * @example\n * ```html\n * <!-- Basic table with fixed header -->\n * <nr-table\n * .headers=${headers}\n * .rows=${data}\n * size=\"normal\"\n * selectionMode=\"multiple\"\n * fixedHeader\n * .scrollConfig=${{ y: 400 }}>\n * </nr-table>\n * \n * <!-- Table with fixed columns -->\n * <nr-table\n * .headers=${[\n * { name: 'ID', key: 'id', fixed: 'left', width: 80 },\n * { name: 'Name', key: 'name', fixed: 'left', width: 150 },\n * { name: 'Email', key: 'email' },\n * { name: 'Status', key: 'status' }\n * ]}\n * .rows=${data}\n * .scrollConfig=${{ x: 800 }}>\n * </nr-table>\n * ```\n * \n * @fires onPaginate - Fired when pagination changes\n * @fires nr-select - Fired when row selection changes\n * @fires onSearch - Fired when search/filter is applied\n * @fires onSort - Fired when sorting is applied\n */\n@customElement('nr-table')\nexport class HyTable extends NuralyUIBaseMixin(LitElement) implements TableHost {\n static override styles = styles;\n\n @property({ type: Array }) headers!: IHeader[];\n @property({ type: Array }) rows: any[] = [];\n @property({ type: String }) size: Sizes = Sizes.Normal;\n @property({ type: Boolean }) withFilter = false;\n @property({ type: String }) expandable: string | undefined;\n @property({ attribute: false }) expansionRenderer: ((row: any, index: number) => any) | undefined;\n @property({ type: String }) selectionMode: SelectionMode | undefined;\n @property({ type: Boolean }) fixedHeader = false;\n @property({ type: Object }) scrollConfig: { x?: number | string; y?: number | string } | undefined;\n @property({ type: Boolean }) loading = false;\n @property({ type: String }) emptyText = 'No data available';\n @property({ type: String }) emptyIcon: string | undefined;\n @property({ type: Boolean }) serverSide = false;\n @property({ type: Number }) totalCount = 0;\n @property({ type: Boolean }) clickable = false;\n @property({ type: Number }) pageSize = 5;\n\n @state() itemPerPage = [5, 10, 15, 20];\n @state() selectedItemPerPage = 5;\n @state() displayedRows: any[] = [];\n @state() selectedItems: boolean[] = [];\n @state() currentPage!: number;\n @state() rowsCopy: any[] = [];\n @state() activeSearch = false;\n @state() sortAttribute: SortAttribute = {index: -1, order: SortOrder.Default};\n @state() expand: boolean[] = [];\n @state() showFilterInput = false;\n @state() filterValue = EMPTY_STRING;\n @state() columnFilters: Map<string, string | number> = new Map();\n @state() activeFilterColumn: string | null = null;\n\n @query('#global-check')\n globalCheck?: HTMLElement;\n\n override requiredComponents = ['nr-select', 'nr-icon', 'nr-checkbox', 'nr-radio'];\n\n // Controllers\n private selectionController = new TableSelectionController(this);\n private paginationController = new TablePaginationController(this);\n private sortController = new TableSortController(this);\n private filterController = new TableFilterController(this);\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.selectionController.initSelection();\n // Initialize selectedItemPerPage from pageSize property\n if (this.pageSize && this.itemPerPage.includes(this.pageSize)) {\n this.selectedItemPerPage = this.pageSize;\n }\n }\n\n override updated(_changedProperties: PropertyValueMap<this> | Map<PropertyKey, unknown>): void {\n if (this.globalCheck && (_changedProperties.has('selectedItems') || _changedProperties.has('currentPage') || _changedProperties.has('displayedRows'))) {\n const checkbox = this.globalCheck as any;\n \n // Get the selection state for the current page only\n const startIndex = (this.currentPage - 1) * this.selectedItemPerPage;\n const endIndex = Math.min(startIndex + this.displayedRows.length, this.selectedItems.length);\n const currentPageSelections = this.selectedItems.slice(startIndex, endIndex);\n \n if (currentPageSelections.length > 0 && currentPageSelections.every((isSelected) => isSelected)) {\n checkbox.checked = true;\n checkbox.indeterminate = false;\n } else if (currentPageSelections.some((isSelected) => isSelected)) {\n checkbox.checked = false;\n checkbox.indeterminate = true;\n } else {\n checkbox.checked = false;\n checkbox.indeterminate = false;\n }\n }\n if (this.showFilterInput && _changedProperties.has('showFilterInput')) {\n this.shadowRoot?.querySelector('input')?.focus();\n }\n }\n\n override willUpdate(_changedProperties: PropertyValueMap<this>) {\n if (_changedProperties.has('rows')) {\n this.expand = Array(this.rows.length).fill(false);\n }\n\n // Server-side pagination: rows are already paginated from backend\n if (this.serverSide) {\n if (_changedProperties.has('rows')) {\n this.displayedRows = [...this.rows];\n // Initialize currentPage on first data load\n if (!this.currentPage && this.rows.length > 0) {\n this.currentPage = 1;\n }\n }\n return;\n }\n\n // Client-side pagination logic\n if (_changedProperties.has('sortAttribute') && this.sortController.isSortActive()) {\n this._initPagination();\n this.selectionController.initSelection();\n }\n if (_changedProperties.has('rowsCopy')) {\n if (this.filterController.isSearchActive()) {\n this._initPagination();\n }\n }\n if (_changedProperties.has('activeSearch') || _changedProperties.has('rows')) {\n if (!this.filterController.isSearchActive()) {\n this.rowsCopy = [...this.rows];\n this._initPagination();\n }\n }\n }\n\n /**\n * Initialize or reset pagination state\n */\n private _initPagination() {\n if (this.sortController.isSortActive()) {\n if (!this.sortController.isSortDefault()) {\n this.sortController.sort();\n } else {\n this.sortController.resetSort();\n }\n }\n this.paginationController.initPagination();\n }\n\n /**\n * Handle items per page change event\n */\n _handleItemPerPage(itemPerPageEvent: CustomEvent) {\n const value = itemPerPageEvent.detail.value || itemPerPageEvent.detail.selectedItemPerPage;\n this.paginationController.handleItemPerPageChange(Number(value));\n }\n\n /**\n * Handle page navigation event\n */\n _handleUpdatePage(updatePageEvent: CustomEvent) {\n this.paginationController.handlePageChange(updatePageEvent.detail.page);\n }\n\n /**\n * Handle check all rows event\n */\n _handleCheckAll(checkAllEvent: CustomEvent) {\n this.selectionController.handleCheckAll(checkAllEvent.detail.isEveryItemChecked);\n }\n\n /**\n * Handle check single row event\n */\n _handleCheckOne(checkOneEvent: CustomEvent) {\n this.selectionController.handleCheckOne(checkOneEvent.detail.index, checkOneEvent.detail.value);\n }\n\n /**\n * Handle select single row event (radio button mode)\n */\n _handleSelectOne(selectOneEvent: CustomEvent) {\n this.selectionController.handleSelectOne(selectOneEvent.detail.index);\n }\n\n /**\n * Handle cancel selection action\n */\n _handleCancelSelection() {\n this.selectionController.cancelSelection();\n }\n\n /**\n * Handle search/filter input\n */\n _handleSearch(searchEvent: CustomEvent) {\n this.filterController.handleSearch(searchEvent.detail.value);\n }\n\n /**\n * Handle column sort order change\n */\n _handleSortOrder(sortOrderEvent: CustomEvent) {\n this.sortController.handleSortOrderChange(sortOrderEvent.detail.index);\n }\n\n /**\n * Toggle expanded content for a row\n */\n private _showExpandedContent(index: number) {\n this.expand[index] = !this.expand[index];\n this.requestUpdate();\n }\n\n /**\n * Toggle filter input visibility\n */\n private _toggleFilterInput() {\n this.showFilterInput = !this.showFilterInput;\n }\n\n /**\n * Handle filter input change\n */\n private _handleFilterInputChange(event: Event) {\n this.filterValue = (event.target as HTMLInputElement).value;\n this.filterController.handleSearch(this.filterValue);\n }\n\n /**\n * Render the table component with all templates\n */\n override render() {\n const totalItems = this.serverSide ? this.totalCount : this.rowsCopy.length;\n const numberOfPages = Math.ceil(totalItems / this.selectedItemPerPage);\n const fromItem = this.currentPage > 0\n ? this.currentPage * this.selectedItemPerPage - this.selectedItemPerPage + 1\n : 0;\n const toItem = this.currentPage * this.selectedItemPerPage <= totalItems\n ? this.currentPage * this.selectedItemPerPage\n : totalItems;\n const enableNext = toItem < totalItems;\n const enablePrevious = fromItem > 1;\n\n return html`\n ${this.selectionMode && !this.withFilter && this.selectionController.hasSelection()\n ? renderActionsTemplate({\n selectedItems: this.selectionController.getSelectedCount(),\n size: this.size,\n onCancelSelection: () => this._handleCancelSelection()\n })\n : this.withFilter\n ? html`\n <div class=\"filter-container\">\n ${renderFilterTemplate({\n showInput: this.showFilterInput,\n value: this.filterValue,\n onToggleInput: () => this._toggleFilterInput(),\n onChange: (e) => this._handleFilterInputChange(e)\n })}\n </div>\n `\n : nothing}\n\n <div class=\"table-content-wrapper ${this.fixedHeader ? 'fixed-header' : ''}\" \n style=\"${this.scrollConfig?.y ? `${this.fixedHeader ? 'height' : 'max-height'}: ${typeof this.scrollConfig.y === 'number' ? this.scrollConfig.y + 'px' : this.scrollConfig.y};` : ''}\n ${this.scrollConfig?.x ? `${this.fixedHeader ? 'width' : 'max-width'}: ${typeof this.scrollConfig.x === 'number' ? this.scrollConfig.x + 'px' : this.scrollConfig.x};` : ''}\">\n ${renderContentTemplate({\n headers: this.headers,\n rows: this.displayedRows,\n expandable: this.expandable && !this.selectionMode ? this.expandable : undefined,\n expansionRenderer: !this.selectionMode ? this.expansionRenderer : undefined,\n selectionMode: this.selectionMode && !this.withFilter ? this.selectionMode : undefined,\n selectedItems: this.selectedItems,\n currentPage: this.currentPage,\n itemPerPage: this.selectedItemPerPage,\n sortAttribute: this.sortAttribute,\n expand: this.expand,\n columnFilters: this.columnFilters,\n activeFilterColumn: this.activeFilterColumn,\n loading: this.loading,\n host: this,\n clickable: this.clickable,\n onCheckAll: () => {\n const startIndex = (this.currentPage - 1) * this.selectedItemPerPage;\n const endIndex = Math.min(startIndex + this.selectedItemPerPage, this.selectedItems.length);\n const currentPageItems = this.selectedItems.slice(startIndex, endIndex);\n const isEveryItemChecked = currentPageItems.every(i => i) && currentPageItems.length > 0;\n this._handleCheckAll({ detail: { isEveryItemChecked } } as CustomEvent);\n },\n onCheckOne: (e, index) => this._handleCheckOne({ detail: { index, value: (e as CustomEvent).detail.checked } } as CustomEvent),\n onSelectOne: (index) => this._handleSelectOne({ detail: { index } } as CustomEvent),\n onUpdateSort: (index) => this._handleSortOrder({ detail: { index } } as CustomEvent),\n onShowExpandedContent: (index) => this._showExpandedContent(index),\n onToggleColumnFilter: (columnKey) => this.filterController.toggleColumnFilterDropdown(columnKey),\n onApplyColumnFilter: (columnKey, value) => this.filterController.applyColumnFilter(columnKey, value),\n onClearColumnFilter: (columnKey) => this.filterController.clearColumnFilter(columnKey),\n onRowClick: (row, index) => {\n if (this.clickable) {\n this.dispatchEvent(new CustomEvent('nr-row-click', {\n detail: { row, index },\n bubbles: true,\n composed: true\n }));\n }\n }\n })}\n </div>\n\n ${renderPaginationTemplate({\n numberOfItems: totalItems,\n itemPerPage: this.itemPerPage,\n selectedItemPerPage: this.selectedItemPerPage,\n currentPage: this.currentPage,\n size: this.size,\n numberOfPages,\n fromItem,\n toItem,\n enableNext,\n enablePrevious,\n onItemPerPageChange: (e) => this._handleItemPerPage(e),\n onNextPage: () => {\n this.currentPage++;\n this._handleUpdatePage({ detail: { page: this.currentPage } } as CustomEvent);\n },\n onPreviousPage: () => {\n this.currentPage--;\n this._handleUpdatePage({ detail: { page: this.currentPage } } as CustomEvent);\n }\n })}\n `;\n }\n}\n"]}
|
package/table.style.js
CHANGED
|
@@ -126,12 +126,14 @@ export default css `
|
|
|
126
126
|
td {
|
|
127
127
|
text-align: center;
|
|
128
128
|
border-bottom: var(--nuraly-table-border-width, 1px) solid var(--nuraly-table-row-border-color, #f0f0f0);
|
|
129
|
-
padding: 10px;
|
|
129
|
+
padding: var(--nuraly-table-cell-padding, 10px);
|
|
130
|
+
font-size: var(--nuraly-table-font-size, 14px);
|
|
130
131
|
}
|
|
131
132
|
|
|
132
133
|
th {
|
|
133
134
|
cursor: pointer;
|
|
134
|
-
padding: 10px;
|
|
135
|
+
padding: var(--nuraly-table-cell-padding, 10px);
|
|
136
|
+
font-size: var(--nuraly-table-font-size, 14px);
|
|
135
137
|
}
|
|
136
138
|
|
|
137
139
|
th span {
|
|
@@ -155,6 +157,10 @@ export default css `
|
|
|
155
157
|
background-color: var(--nuraly-table-row-hover-background, #f5f5f5);
|
|
156
158
|
}
|
|
157
159
|
|
|
160
|
+
tbody tr.clickable {
|
|
161
|
+
cursor: pointer;
|
|
162
|
+
}
|
|
163
|
+
|
|
158
164
|
thead tr {
|
|
159
165
|
background-color: var(--nuraly-table-header-background, #fafafa);
|
|
160
166
|
}
|
|
@@ -172,12 +178,14 @@ export default css `
|
|
|
172
178
|
/* Size Variants for Table Content */
|
|
173
179
|
:host([size='small']) td,
|
|
174
180
|
:host([size='small']) th {
|
|
175
|
-
padding:
|
|
181
|
+
padding: var(--nuraly-table-cell-padding, 8px 16px);
|
|
182
|
+
font-size: 12px;
|
|
176
183
|
}
|
|
177
184
|
|
|
178
185
|
:host([size='large']) td,
|
|
179
186
|
:host([size='large']) th {
|
|
180
|
-
padding: 15px;
|
|
187
|
+
padding: var(--nuraly-table-cell-padding, 15px);
|
|
188
|
+
font-size: 16px;
|
|
181
189
|
}
|
|
182
190
|
|
|
183
191
|
/* Pagination Styles */
|
|
@@ -257,15 +265,18 @@ export default css `
|
|
|
257
265
|
/* Size Variants for Pagination */
|
|
258
266
|
.pagination-container[data-size='small'] .left-content .items-details {
|
|
259
267
|
padding: 5px;
|
|
268
|
+
font-size: 12px;
|
|
260
269
|
}
|
|
261
270
|
|
|
262
271
|
.pagination-container[data-size='large'] .left-content .items-details {
|
|
263
272
|
padding: 15px;
|
|
273
|
+
font-size: 16px;
|
|
264
274
|
}
|
|
265
275
|
|
|
266
276
|
.pagination-container[data-size='small'] .left-content .select-details {
|
|
267
277
|
padding: 5px;
|
|
268
278
|
gap: 6px;
|
|
279
|
+
font-size: 12px;
|
|
269
280
|
}
|
|
270
281
|
|
|
271
282
|
.pagination-container[data-size='large'] .left-content .select-details {
|
|
@@ -275,6 +286,7 @@ export default css `
|
|
|
275
286
|
|
|
276
287
|
.pagination-container[data-size='small'] .right-content .page-details {
|
|
277
288
|
padding: 5px;
|
|
289
|
+
font-size: 12px;
|
|
278
290
|
}
|
|
279
291
|
|
|
280
292
|
.pagination-container[data-size='large'] .right-content .page-details {
|
package/table.style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.style.js","sourceRoot":"","sources":["../../../src/components/table/table.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6qBjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n :host {\n display: block;\n width: 100%;\n font-family: var(--nuraly-font-family, Arial, sans-serif);\n color: var(--nuraly-color-text);\n background-color: var(--nuraly-color-background);\n }\n\n /* Filter Container Styles */\n .filter-container {\n display: flex;\n justify-content: flex-end;\n width: 100%;\n padding: var(--nuraly-spacing-2, 0.5rem) 0;\n position: relative;\n margin-bottom: 5px;\n }\n\n .filter-container input {\n padding: 5px;\n padding-left: 30px;\n width: 100%;\n box-sizing: border-box;\n background-color: var(--nuraly-table-filter-background, #ffffff);\n color: var(--nuraly-table-filter-text, #000000);\n }\n\n .filter-container input:focus {\n outline-style: none;\n border: 1px solid var(--nuraly-table-filter-border, #1890ff);\n }\n\n .filter-container .icon-container {\n height: 25px;\n width: 35px;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .filter-container .search-icon {\n position: absolute;\n left: 10px;\n top: 25%;\n }\n\n /* Actions Bar Styles */\n .actions-container {\n background-color: var(--nuraly-table-action-color, #0f62fe);\n padding: 10px;\n box-sizing: border-box;\n display: flex;\n justify-content: space-between;\n color: var(--nuraly-table-background, #ffffff);\n }\n\n /* Fixed Header Styles */\n .table-content-wrapper.fixed-header {\n overflow-y: auto;\n overflow-x: auto;\n }\n\n .table-content-wrapper.fixed-header table {\n border-collapse: separate;\n border-spacing: 0;\n }\n\n .table-content-wrapper.fixed-header thead {\n background-color: var(--nuraly-table-header-background, #fafafa);\n }\n\n .table-content-wrapper.fixed-header thead th {\n position: sticky;\n top: 0;\n z-index: 10;\n background-color: var(--nuraly-table-header-background, #fafafa);\n border-bottom: var(--nuraly-table-border-width, 1px) solid var(--nuraly-table-row-border-color, #f0f0f0);\n }\n\n .table-content-wrapper.fixed-header thead tr {\n box-shadow: 0 1px 0 0 var(--nuraly-table-row-border-color, #f0f0f0);\n }\n\n .actions-container button {\n cursor: pointer;\n border: none;\n color: var(--nuraly-table-background, #ffffff);\n background-color: var(--nuraly-table-action-color, #0f62fe);\n }\n\n .actions-container[data-size='small'] {\n padding: 5px;\n }\n\n .actions-container[data-size='large'] {\n padding: 15px;\n }\n\n /* Table Content Wrapper Styles */\n .table-content-wrapper {\n display: block;\n overflow: auto;\n }\n\n input[type='checkbox'][data-indeterminate='true']::after {\n width: 13px;\n height: 13px;\n background-color: var(--nuraly-table-checkbox-checked, #161616);\n color: var(--nuraly-table-background, #ffffff);\n display: flex;\n justify-content: center;\n align-items: center;\n content: '-';\n }\n\n /* Table Styles */\n table {\n width: 100%;\n border-spacing: 0px;\n color: var(--nuraly-table-text-color);\n }\n\n td {\n text-align: center;\n border-bottom: var(--nuraly-table-border-width, 1px) solid var(--nuraly-table-row-border-color, #f0f0f0);\n padding: 10px;\n }\n\n th {\n cursor: pointer;\n padding: 10px;\n }\n\n th span {\n display: flex;\n justify-content: center;\n gap: 10px;\n }\n\n nr-icon {\n display: flex;\n justify-content: center;\n align-items: center;\n --nuraly-icon-color: var(--nuraly-table-text-color);\n }\n\n tbody tr {\n background-color: var(--nuraly-table-row-background, #ffffff);\n }\n\n tbody tr:hover {\n background-color: var(--nuraly-table-row-hover-background, #f5f5f5);\n }\n\n thead tr {\n background-color: var(--nuraly-table-header-background, #fafafa);\n }\n\n tbody tr:has(input:checked) {\n background-color: var(--nuraly-table-row-selected-background, #e6f7ff);\n }\n\n input,\n .expand-icon {\n cursor: pointer;\n accent-color: var(--nuraly-table-checkbox-checked, #1890ff);\n }\n\n /* Size Variants for Table Content */\n :host([size='small']) td,\n :host([size='small']) th {\n padding: 5px;\n }\n\n :host([size='large']) td,\n :host([size='large']) th {\n padding: 15px;\n }\n\n /* Pagination Styles */\n .pagination-container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n background-color: var(--nuraly-pagination-background-color);\n color: var(--nuraly-pagination-text-color);\n }\n\n .pagination-container .left-content {\n display: flex;\n align-items: center;\n }\n\n .pagination-container .left-content .items-details {\n border-left: var(--nuraly-pagination-borders);\n padding: 10px;\n }\n\n .pagination-container .left-content .select-details {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px;\n }\n\n .pagination-container .left-content .select-details label {\n font-size: var(--nuraly-font-size-input, 14px);\n color: var(--nuraly-table-pagination-text, #000000);\n white-space: nowrap;\n }\n\n .pagination-container .left-content .select-details nr-select {\n min-width: 60px;\n max-width: 80px;\n --select-border-color: var(--nuraly-table-border-color, #d9d9d9);\n --select-background: var(--nuraly-table-pagination-background, #fafafa);\n --select-text-color: var(--nuraly-table-pagination-text, #000000);\n }\n\n .pagination-container .right-content {\n display: flex;\n align-items: center;\n border-left: var(--nuraly-pagination-borders);\n }\n\n .pagination-container .right-content .icon-container {\n display: flex;\n align-items: center;\n border-left: var(--nuraly-pagination-borders);\n }\n\n .pagination-container .right-content .page-details {\n padding: 10px;\n }\n\n .pagination-container .icon-container .left-arrow,\n .pagination-container .icon-container .right-arrow {\n padding: 10px;\n --nuraly-icon-color: var(--nuraly-pagination-text-color);\n }\n\n .pagination-container .icon-container .left-arrow {\n border-right: var(--nuraly-pagination-borders);\n }\n\n .pagination-container nr-icon[data-enabled='false'] {\n cursor: not-allowed;\n }\n\n .pagination-container nr-icon[data-enabled='true'] {\n cursor: pointer;\n }\n\n /* Size Variants for Pagination */\n .pagination-container[data-size='small'] .left-content .items-details {\n padding: 5px;\n }\n\n .pagination-container[data-size='large'] .left-content .items-details {\n padding: 15px;\n }\n\n .pagination-container[data-size='small'] .left-content .select-details {\n padding: 5px;\n gap: 6px;\n }\n\n .pagination-container[data-size='large'] .left-content .select-details {\n padding: 15px;\n gap: 10px;\n }\n\n .pagination-container[data-size='small'] .right-content .page-details {\n padding: 5px;\n }\n\n .pagination-container[data-size='large'] .right-content .page-details {\n padding: 15px;\n }\n\n .pagination-container[data-size='small'] .icon-container .left-arrow,\n .pagination-container[data-size='small'] .icon-container .right-arrow {\n padding: 5px;\n }\n\n .pagination-container[data-size='large'] .icon-container .left-arrow,\n .pagination-container[data-size='large'] .icon-container .right-arrow {\n padding: 15px;\n }\n\n /* Column Filter Styles */\n th .th-content {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n position: relative;\n }\n\n th .th-text {\n display: flex;\n align-items: center;\n gap: 10px;\n flex: 1;\n }\n\n th .filter-wrapper {\n position: relative;\n display: flex;\n align-items: center;\n }\n\n .filter-trigger {\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n transition: background-color 0.2s;\n }\n\n .filter-trigger:hover {\n background-color: var(--nuraly-table-filter-hover, rgba(0, 0, 0, 0.04));\n }\n\n .filter-icon {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .filter-icon.has-filter {\n color: var(--nuraly-table-filter-active, #1890ff);\n }\n\n .filter-indicator {\n position: absolute;\n top: -2px;\n right: -2px;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: var(--nuraly-table-filter-active, #1890ff);\n }\n\n .column-filter-dropdown {\n position: absolute;\n top: calc(100% + 4px);\n right: 0;\n background: var(--nuraly-table-background, #ffffff);\n border: 1px solid var(--nuraly-table-row-border-color, #f0f0f0);\n border-radius: 4px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n z-index: 100;\n min-width: 200px;\n padding: 8px;\n }\n\n .column-filter-content {\n display: flex;\n flex-direction: column;\n gap: 8px;\n }\n\n .column-filter-input {\n padding: 8px;\n border: 1px solid var(--nuraly-table-row-border-color, #d9d9d9);\n border-radius: 4px;\n font-size: 14px;\n width: 100%;\n box-sizing: border-box;\n }\n\n .column-filter-input:focus {\n outline: none;\n border-color: var(--nuraly-table-filter-active, #1890ff);\n box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);\n }\n\n .column-filter-clear {\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--nuraly-table-text-color, #000);\n align-self: flex-end;\n }\n\n .column-filter-clear:hover {\n color: var(--nuraly-table-filter-active, #1890ff);\n }\n\n /* Fixed Columns Styles */\n th.fixed-column,\n td.fixed-column {\n position: sticky;\n background-color: var(--nuraly-table-row-background, #ffffff);\n }\n\n /* Fixed columns in header - highest priority */\n thead th.fixed-column {\n z-index: 20;\n background-color: var(--nuraly-table-header-background, #fafafa);\n }\n\n /* When table has fixed header, fixed columns in header need even higher z-index */\n .table-content-wrapper.fixed-header thead th.fixed-column {\n z-index: 25;\n background-color: var(--nuraly-table-header-background, #fafafa);\n }\n\n /* Fixed columns in body */\n tbody td.fixed-column {\n z-index: 8;\n background-color: var(--nuraly-table-row-background, #ffffff);\n }\n\n /* Ensure fixed columns in tbody have proper background */\n tbody tr td.fixed-column {\n background-color: var(--nuraly-table-row-background, #ffffff);\n }\n\n tbody tr:hover td.fixed-column {\n background-color: var(--nuraly-table-row-hover-background, #f5f5f5);\n }\n\n th.fixed-column-left,\n td.fixed-column-left {\n left: 0;\n border-right: 1px solid var(--nuraly-table-row-border-color, #f0f0f0);\n }\n\n th.fixed-column-right,\n td.fixed-column-right {\n right: 0;\n border-left: 1px solid var(--nuraly-table-row-border-color, #f0f0f0);\n }\n\n /* Shadow effect for fixed columns */\n th.fixed-column-left::after,\n td.fixed-column-left::after {\n content: '';\n position: absolute;\n top: 0;\n right: -10px;\n bottom: 0;\n width: 10px;\n pointer-events: none;\n transition: box-shadow 0.3s;\n box-shadow: none;\n }\n\n .table-content-wrapper.has-scroll th.fixed-column-left::after,\n .table-content-wrapper.has-scroll td.fixed-column-left::after {\n box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.15);\n }\n\n th.fixed-column-right::before,\n td.fixed-column-right::before {\n content: '';\n position: absolute;\n top: 0;\n left: -10px;\n bottom: 0;\n width: 10px;\n pointer-events: none;\n transition: box-shadow 0.3s;\n box-shadow: none;\n }\n\n .table-content-wrapper.has-scroll th.fixed-column-right::before,\n .table-content-wrapper.has-scroll td.fixed-column-right::before {\n box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.15);\n }\n\n /* ============================================ */\n /* Loading State Styles */\n /* ============================================ */\n \n /* Skeleton Loading Rows */\n .skeleton-row {\n animation: skeleton-pulse 1.5s ease-in-out infinite;\n }\n\n .skeleton-cell {\n padding: var(--nuraly-spacing-3, 0.75rem) var(--nuraly-spacing-4, 1rem);\n border-bottom: 1px solid var(--nuraly-table-border-color, #f0f0f0);\n }\n\n .skeleton-cell.selection-skeleton {\n width: 48px;\n text-align: center;\n }\n\n .skeleton-checkbox {\n width: 16px;\n height: 16px;\n background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);\n background-size: 200% 100%;\n animation: skeleton-shimmer 1.5s ease-in-out infinite;\n border-radius: 2px;\n margin: 0 auto;\n }\n\n .skeleton-content {\n height: 16px;\n background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);\n background-size: 200% 100%;\n animation: skeleton-shimmer 1.5s ease-in-out infinite;\n border-radius: 4px;\n width: 80%;\n }\n\n @keyframes skeleton-shimmer {\n 0% {\n background-position: 200% 0;\n }\n 100% {\n background-position: -200% 0;\n }\n }\n\n @keyframes skeleton-pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.6;\n }\n }\n\n /* Spinner Loading */\n .loading-row {\n background-color: var(--nuraly-table-row-background, #ffffff);\n }\n\n .loading-cell {\n padding: var(--nuraly-spacing-8, 2rem) var(--nuraly-spacing-4, 1rem);\n text-align: center;\n border-bottom: 1px solid var(--nuraly-table-border-color, #f0f0f0);\n }\n\n .loading-spinner-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--nuraly-spacing-4, 1rem);\n }\n\n .loading-spinner {\n width: 40px;\n height: 40px;\n border: 4px solid var(--nuraly-table-border-color, #f0f0f0);\n border-top-color: var(--nuraly-color-primary, #1890ff);\n border-radius: 50%;\n animation: spinner-rotate 0.8s linear infinite;\n }\n\n @keyframes spinner-rotate {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n\n .loading-text {\n margin: 0;\n color: var(--nuraly-color-text-secondary, #666666);\n font-size: 14px;\n }\n\n /* Empty State Styles */\n .empty-row {\n background: var(--nuraly-table-row-bg-color, #ffffff);\n }\n\n .empty-row:hover {\n background: var(--nuraly-table-row-bg-color, #ffffff);\n }\n\n .empty-cell {\n padding: 64px 24px;\n text-align: center;\n border-bottom: 1px solid var(--nuraly-table-border-color, #f0f0f0);\n }\n\n .empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n }\n\n .empty-icon {\n width: 64px;\n height: 64px;\n color: var(--nuraly-color-text-quaternary, #bfbfbf);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .empty-icon svg {\n width: 100%;\n height: 100%;\n }\n\n .empty-icon nr-icon {\n font-size: 64px;\n }\n\n .empty-text {\n margin: 0;\n color: var(--nuraly-color-text-secondary, #666666);\n font-size: 14px;\n line-height: 1.5;\n }\n\n /* Expansion Row Styles */\n .expand-icon {\n text-align: center;\n vertical-align: middle;\n transition: transform 0.3s ease;\n outline: none;\n }\n\n .expand-icon:hover {\n background-color: var(--nuraly-color-fill-tertiary, #f5f5f5);\n }\n\n .expand-icon:focus {\n background-color: var(--nuraly-color-fill-tertiary, #f5f5f5);\n box-shadow: inset 0 0 0 2px var(--nuraly-color-primary, #1890ff);\n }\n\n .expand-icon nr-icon {\n transition: transform 0.3s ease;\n }\n\n .expand-icon.expanded nr-icon {\n transform: rotate(180deg);\n }\n\n .expansion-row {\n transition: all 0.3s ease;\n }\n\n .expansion-row.collapsed {\n opacity: 0;\n height: 0;\n overflow: hidden;\n }\n\n .expansion-row.expanded {\n opacity: 1;\n animation: slideDown 0.3s ease;\n }\n\n .expansion-content {\n padding: 16px;\n background-color: var(--nuraly-color-fill-quaternary, #fafafa);\n border-top: 1px solid var(--nuraly-color-border, #d9d9d9);\n }\n\n @keyframes slideDown {\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n`;\n\n"]}
|
|
1
|
+
{"version":3,"file":"table.style.js","sourceRoot":"","sources":["../../../../src/components/table/table.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyrBjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n :host {\n display: block;\n width: 100%;\n font-family: var(--nuraly-font-family, Arial, sans-serif);\n color: var(--nuraly-color-text);\n background-color: var(--nuraly-color-background);\n }\n\n /* Filter Container Styles */\n .filter-container {\n display: flex;\n justify-content: flex-end;\n width: 100%;\n padding: var(--nuraly-spacing-2, 0.5rem) 0;\n position: relative;\n margin-bottom: 5px;\n }\n\n .filter-container input {\n padding: 5px;\n padding-left: 30px;\n width: 100%;\n box-sizing: border-box;\n background-color: var(--nuraly-table-filter-background, #ffffff);\n color: var(--nuraly-table-filter-text, #000000);\n }\n\n .filter-container input:focus {\n outline-style: none;\n border: 1px solid var(--nuraly-table-filter-border, #1890ff);\n }\n\n .filter-container .icon-container {\n height: 25px;\n width: 35px;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .filter-container .search-icon {\n position: absolute;\n left: 10px;\n top: 25%;\n }\n\n /* Actions Bar Styles */\n .actions-container {\n background-color: var(--nuraly-table-action-color, #0f62fe);\n padding: 10px;\n box-sizing: border-box;\n display: flex;\n justify-content: space-between;\n color: var(--nuraly-table-background, #ffffff);\n }\n\n /* Fixed Header Styles */\n .table-content-wrapper.fixed-header {\n overflow-y: auto;\n overflow-x: auto;\n }\n\n .table-content-wrapper.fixed-header table {\n border-collapse: separate;\n border-spacing: 0;\n }\n\n .table-content-wrapper.fixed-header thead {\n background-color: var(--nuraly-table-header-background, #fafafa);\n }\n\n .table-content-wrapper.fixed-header thead th {\n position: sticky;\n top: 0;\n z-index: 10;\n background-color: var(--nuraly-table-header-background, #fafafa);\n border-bottom: var(--nuraly-table-border-width, 1px) solid var(--nuraly-table-row-border-color, #f0f0f0);\n }\n\n .table-content-wrapper.fixed-header thead tr {\n box-shadow: 0 1px 0 0 var(--nuraly-table-row-border-color, #f0f0f0);\n }\n\n .actions-container button {\n cursor: pointer;\n border: none;\n color: var(--nuraly-table-background, #ffffff);\n background-color: var(--nuraly-table-action-color, #0f62fe);\n }\n\n .actions-container[data-size='small'] {\n padding: 5px;\n }\n\n .actions-container[data-size='large'] {\n padding: 15px;\n }\n\n /* Table Content Wrapper Styles */\n .table-content-wrapper {\n display: block;\n overflow: auto;\n }\n\n input[type='checkbox'][data-indeterminate='true']::after {\n width: 13px;\n height: 13px;\n background-color: var(--nuraly-table-checkbox-checked, #161616);\n color: var(--nuraly-table-background, #ffffff);\n display: flex;\n justify-content: center;\n align-items: center;\n content: '-';\n }\n\n /* Table Styles */\n table {\n width: 100%;\n border-spacing: 0px;\n color: var(--nuraly-table-text-color);\n }\n\n td {\n text-align: center;\n border-bottom: var(--nuraly-table-border-width, 1px) solid var(--nuraly-table-row-border-color, #f0f0f0);\n padding: var(--nuraly-table-cell-padding, 10px);\n font-size: var(--nuraly-table-font-size, 14px);\n }\n\n th {\n cursor: pointer;\n padding: var(--nuraly-table-cell-padding, 10px);\n font-size: var(--nuraly-table-font-size, 14px);\n }\n\n th span {\n display: flex;\n justify-content: center;\n gap: 10px;\n }\n\n nr-icon {\n display: flex;\n justify-content: center;\n align-items: center;\n --nuraly-icon-color: var(--nuraly-table-text-color);\n }\n\n tbody tr {\n background-color: var(--nuraly-table-row-background, #ffffff);\n }\n\n tbody tr:hover {\n background-color: var(--nuraly-table-row-hover-background, #f5f5f5);\n }\n\n tbody tr.clickable {\n cursor: pointer;\n }\n\n thead tr {\n background-color: var(--nuraly-table-header-background, #fafafa);\n }\n\n tbody tr:has(input:checked) {\n background-color: var(--nuraly-table-row-selected-background, #e6f7ff);\n }\n\n input,\n .expand-icon {\n cursor: pointer;\n accent-color: var(--nuraly-table-checkbox-checked, #1890ff);\n }\n\n /* Size Variants for Table Content */\n :host([size='small']) td,\n :host([size='small']) th {\n padding: var(--nuraly-table-cell-padding, 8px 16px);\n font-size: 12px;\n }\n\n :host([size='large']) td,\n :host([size='large']) th {\n padding: var(--nuraly-table-cell-padding, 15px);\n font-size: 16px;\n }\n\n /* Pagination Styles */\n .pagination-container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n background-color: var(--nuraly-pagination-background-color);\n color: var(--nuraly-pagination-text-color);\n }\n\n .pagination-container .left-content {\n display: flex;\n align-items: center;\n }\n\n .pagination-container .left-content .items-details {\n border-left: var(--nuraly-pagination-borders);\n padding: 10px;\n }\n\n .pagination-container .left-content .select-details {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px;\n }\n\n .pagination-container .left-content .select-details label {\n font-size: var(--nuraly-font-size-input, 14px);\n color: var(--nuraly-table-pagination-text, #000000);\n white-space: nowrap;\n }\n\n .pagination-container .left-content .select-details nr-select {\n min-width: 60px;\n max-width: 80px;\n --select-border-color: var(--nuraly-table-border-color, #d9d9d9);\n --select-background: var(--nuraly-table-pagination-background, #fafafa);\n --select-text-color: var(--nuraly-table-pagination-text, #000000);\n }\n\n .pagination-container .right-content {\n display: flex;\n align-items: center;\n border-left: var(--nuraly-pagination-borders);\n }\n\n .pagination-container .right-content .icon-container {\n display: flex;\n align-items: center;\n border-left: var(--nuraly-pagination-borders);\n }\n\n .pagination-container .right-content .page-details {\n padding: 10px;\n }\n\n .pagination-container .icon-container .left-arrow,\n .pagination-container .icon-container .right-arrow {\n padding: 10px;\n --nuraly-icon-color: var(--nuraly-pagination-text-color);\n }\n\n .pagination-container .icon-container .left-arrow {\n border-right: var(--nuraly-pagination-borders);\n }\n\n .pagination-container nr-icon[data-enabled='false'] {\n cursor: not-allowed;\n }\n\n .pagination-container nr-icon[data-enabled='true'] {\n cursor: pointer;\n }\n\n /* Size Variants for Pagination */\n .pagination-container[data-size='small'] .left-content .items-details {\n padding: 5px;\n font-size: 12px;\n }\n\n .pagination-container[data-size='large'] .left-content .items-details {\n padding: 15px;\n font-size: 16px;\n }\n\n .pagination-container[data-size='small'] .left-content .select-details {\n padding: 5px;\n gap: 6px;\n font-size: 12px;\n }\n\n .pagination-container[data-size='large'] .left-content .select-details {\n padding: 15px;\n gap: 10px;\n }\n\n .pagination-container[data-size='small'] .right-content .page-details {\n padding: 5px;\n font-size: 12px;\n }\n\n .pagination-container[data-size='large'] .right-content .page-details {\n padding: 15px;\n }\n\n .pagination-container[data-size='small'] .icon-container .left-arrow,\n .pagination-container[data-size='small'] .icon-container .right-arrow {\n padding: 5px;\n }\n\n .pagination-container[data-size='large'] .icon-container .left-arrow,\n .pagination-container[data-size='large'] .icon-container .right-arrow {\n padding: 15px;\n }\n\n /* Column Filter Styles */\n th .th-content {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n position: relative;\n }\n\n th .th-text {\n display: flex;\n align-items: center;\n gap: 10px;\n flex: 1;\n }\n\n th .filter-wrapper {\n position: relative;\n display: flex;\n align-items: center;\n }\n\n .filter-trigger {\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n transition: background-color 0.2s;\n }\n\n .filter-trigger:hover {\n background-color: var(--nuraly-table-filter-hover, rgba(0, 0, 0, 0.04));\n }\n\n .filter-icon {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .filter-icon.has-filter {\n color: var(--nuraly-table-filter-active, #1890ff);\n }\n\n .filter-indicator {\n position: absolute;\n top: -2px;\n right: -2px;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: var(--nuraly-table-filter-active, #1890ff);\n }\n\n .column-filter-dropdown {\n position: absolute;\n top: calc(100% + 4px);\n right: 0;\n background: var(--nuraly-table-background, #ffffff);\n border: 1px solid var(--nuraly-table-row-border-color, #f0f0f0);\n border-radius: 4px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n z-index: 100;\n min-width: 200px;\n padding: 8px;\n }\n\n .column-filter-content {\n display: flex;\n flex-direction: column;\n gap: 8px;\n }\n\n .column-filter-input {\n padding: 8px;\n border: 1px solid var(--nuraly-table-row-border-color, #d9d9d9);\n border-radius: 4px;\n font-size: 14px;\n width: 100%;\n box-sizing: border-box;\n }\n\n .column-filter-input:focus {\n outline: none;\n border-color: var(--nuraly-table-filter-active, #1890ff);\n box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);\n }\n\n .column-filter-clear {\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--nuraly-table-text-color, #000);\n align-self: flex-end;\n }\n\n .column-filter-clear:hover {\n color: var(--nuraly-table-filter-active, #1890ff);\n }\n\n /* Fixed Columns Styles */\n th.fixed-column,\n td.fixed-column {\n position: sticky;\n background-color: var(--nuraly-table-row-background, #ffffff);\n }\n\n /* Fixed columns in header - highest priority */\n thead th.fixed-column {\n z-index: 20;\n background-color: var(--nuraly-table-header-background, #fafafa);\n }\n\n /* When table has fixed header, fixed columns in header need even higher z-index */\n .table-content-wrapper.fixed-header thead th.fixed-column {\n z-index: 25;\n background-color: var(--nuraly-table-header-background, #fafafa);\n }\n\n /* Fixed columns in body */\n tbody td.fixed-column {\n z-index: 8;\n background-color: var(--nuraly-table-row-background, #ffffff);\n }\n\n /* Ensure fixed columns in tbody have proper background */\n tbody tr td.fixed-column {\n background-color: var(--nuraly-table-row-background, #ffffff);\n }\n\n tbody tr:hover td.fixed-column {\n background-color: var(--nuraly-table-row-hover-background, #f5f5f5);\n }\n\n th.fixed-column-left,\n td.fixed-column-left {\n left: 0;\n border-right: 1px solid var(--nuraly-table-row-border-color, #f0f0f0);\n }\n\n th.fixed-column-right,\n td.fixed-column-right {\n right: 0;\n border-left: 1px solid var(--nuraly-table-row-border-color, #f0f0f0);\n }\n\n /* Shadow effect for fixed columns */\n th.fixed-column-left::after,\n td.fixed-column-left::after {\n content: '';\n position: absolute;\n top: 0;\n right: -10px;\n bottom: 0;\n width: 10px;\n pointer-events: none;\n transition: box-shadow 0.3s;\n box-shadow: none;\n }\n\n .table-content-wrapper.has-scroll th.fixed-column-left::after,\n .table-content-wrapper.has-scroll td.fixed-column-left::after {\n box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.15);\n }\n\n th.fixed-column-right::before,\n td.fixed-column-right::before {\n content: '';\n position: absolute;\n top: 0;\n left: -10px;\n bottom: 0;\n width: 10px;\n pointer-events: none;\n transition: box-shadow 0.3s;\n box-shadow: none;\n }\n\n .table-content-wrapper.has-scroll th.fixed-column-right::before,\n .table-content-wrapper.has-scroll td.fixed-column-right::before {\n box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.15);\n }\n\n /* ============================================ */\n /* Loading State Styles */\n /* ============================================ */\n \n /* Skeleton Loading Rows */\n .skeleton-row {\n animation: skeleton-pulse 1.5s ease-in-out infinite;\n }\n\n .skeleton-cell {\n padding: var(--nuraly-spacing-3, 0.75rem) var(--nuraly-spacing-4, 1rem);\n border-bottom: 1px solid var(--nuraly-table-border-color, #f0f0f0);\n }\n\n .skeleton-cell.selection-skeleton {\n width: 48px;\n text-align: center;\n }\n\n .skeleton-checkbox {\n width: 16px;\n height: 16px;\n background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);\n background-size: 200% 100%;\n animation: skeleton-shimmer 1.5s ease-in-out infinite;\n border-radius: 2px;\n margin: 0 auto;\n }\n\n .skeleton-content {\n height: 16px;\n background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);\n background-size: 200% 100%;\n animation: skeleton-shimmer 1.5s ease-in-out infinite;\n border-radius: 4px;\n width: 80%;\n }\n\n @keyframes skeleton-shimmer {\n 0% {\n background-position: 200% 0;\n }\n 100% {\n background-position: -200% 0;\n }\n }\n\n @keyframes skeleton-pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.6;\n }\n }\n\n /* Spinner Loading */\n .loading-row {\n background-color: var(--nuraly-table-row-background, #ffffff);\n }\n\n .loading-cell {\n padding: var(--nuraly-spacing-8, 2rem) var(--nuraly-spacing-4, 1rem);\n text-align: center;\n border-bottom: 1px solid var(--nuraly-table-border-color, #f0f0f0);\n }\n\n .loading-spinner-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--nuraly-spacing-4, 1rem);\n }\n\n .loading-spinner {\n width: 40px;\n height: 40px;\n border: 4px solid var(--nuraly-table-border-color, #f0f0f0);\n border-top-color: var(--nuraly-color-primary, #1890ff);\n border-radius: 50%;\n animation: spinner-rotate 0.8s linear infinite;\n }\n\n @keyframes spinner-rotate {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n\n .loading-text {\n margin: 0;\n color: var(--nuraly-color-text-secondary, #666666);\n font-size: 14px;\n }\n\n /* Empty State Styles */\n .empty-row {\n background: var(--nuraly-table-row-bg-color, #ffffff);\n }\n\n .empty-row:hover {\n background: var(--nuraly-table-row-bg-color, #ffffff);\n }\n\n .empty-cell {\n padding: 64px 24px;\n text-align: center;\n border-bottom: 1px solid var(--nuraly-table-border-color, #f0f0f0);\n }\n\n .empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n }\n\n .empty-icon {\n width: 64px;\n height: 64px;\n color: var(--nuraly-color-text-quaternary, #bfbfbf);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .empty-icon svg {\n width: 100%;\n height: 100%;\n }\n\n .empty-icon nr-icon {\n font-size: 64px;\n }\n\n .empty-text {\n margin: 0;\n color: var(--nuraly-color-text-secondary, #666666);\n font-size: 14px;\n line-height: 1.5;\n }\n\n /* Expansion Row Styles */\n .expand-icon {\n text-align: center;\n vertical-align: middle;\n transition: transform 0.3s ease;\n outline: none;\n }\n\n .expand-icon:hover {\n background-color: var(--nuraly-color-fill-tertiary, #f5f5f5);\n }\n\n .expand-icon:focus {\n background-color: var(--nuraly-color-fill-tertiary, #f5f5f5);\n box-shadow: inset 0 0 0 2px var(--nuraly-color-primary, #1890ff);\n }\n\n .expand-icon nr-icon {\n transition: transform 0.3s ease;\n }\n\n .expand-icon.expanded nr-icon {\n transform: rotate(180deg);\n }\n\n .expansion-row {\n transition: all 0.3s ease;\n }\n\n .expansion-row.collapsed {\n opacity: 0;\n height: 0;\n overflow: hidden;\n }\n\n .expansion-row.expanded {\n opacity: 1;\n animation: slideDown 0.3s ease;\n }\n\n .expansion-content {\n padding: 16px;\n background-color: var(--nuraly-color-fill-quaternary, #fafafa);\n border-top: 1px solid var(--nuraly-color-border, #d9d9d9);\n }\n\n @keyframes slideDown {\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n`;\n\n"]}
|
package/table.types.d.ts
CHANGED
|
@@ -35,6 +35,16 @@ export interface IHeader {
|
|
|
35
35
|
filterConfig?: ColumnFilter;
|
|
36
36
|
fixed?: 'left' | 'right';
|
|
37
37
|
width?: number | string;
|
|
38
|
+
/**
|
|
39
|
+
* Custom cell renderer function
|
|
40
|
+
* When provided, this function will be called to render the cell content
|
|
41
|
+
* instead of using the raw value from row[key]
|
|
42
|
+
* @param value - The cell value from row[key]
|
|
43
|
+
* @param row - The full row data
|
|
44
|
+
* @param index - The row index
|
|
45
|
+
* @returns Template result for the cell content (e.g., html`<nr-badge>...</nr-badge>`)
|
|
46
|
+
*/
|
|
47
|
+
render?: CellContentRenderer;
|
|
38
48
|
}
|
|
39
49
|
/**
|
|
40
50
|
* Selection mode for table rows
|
|
@@ -81,5 +91,13 @@ export interface SortAttribute {
|
|
|
81
91
|
* @returns Template result for the expanded content
|
|
82
92
|
*/
|
|
83
93
|
export declare type ExpansionContentRenderer = (row: any, index: number) => any;
|
|
94
|
+
/**
|
|
95
|
+
* Cell content render function
|
|
96
|
+
* @param value - The cell value from row[key]
|
|
97
|
+
* @param row - The full row data
|
|
98
|
+
* @param index - The row index
|
|
99
|
+
* @returns Template result for the cell content
|
|
100
|
+
*/
|
|
101
|
+
export declare type CellContentRenderer = (value: any, row: any, index: number) => any;
|
|
84
102
|
export declare const EMPTY_STRING = "";
|
|
85
103
|
//# sourceMappingURL=table.types.d.ts.map
|
package/table.types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.types.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"table.types.js","sourceRoot":"","sources":["../../../../src/components/table/table.types.ts"],"names":[],"mappings":"AA6GA,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC","sourcesContent":["/**\n * Column filter types\n */\nexport const enum FilterType {\n Text = 'text',\n Select = 'select',\n Number = 'number',\n Date = 'date',\n}\n\n/**\n * Column filter configuration\n */\nexport interface ColumnFilter {\n type: FilterType;\n placeholder?: string;\n options?: Array<{ label: string; value: string | number }>;\n}\n\n/**\n * Active filter state for a column\n */\nexport interface ActiveColumnFilter {\n columnKey: string;\n value: string | number | null;\n}\n\n/**\n * Table header configuration\n */\nexport interface IHeader {\n name: string;\n key: string;\n filterable?: boolean;\n filterConfig?: ColumnFilter;\n fixed?: 'left' | 'right';\n width?: number | string;\n /**\n * Custom cell renderer function\n * When provided, this function will be called to render the cell content\n * instead of using the raw value from row[key]\n * @param value - The cell value from row[key]\n * @param row - The full row data\n * @param index - The row index\n * @returns Template result for the cell content (e.g., html`<nr-badge>...</nr-badge>`)\n */\n render?: CellContentRenderer;\n}\n\n/**\n * Selection mode for table rows\n */\nexport const enum SelectionMode {\n Single = 'single',\n Multiple = 'multiple',\n}\n\n/**\n * Table size variants\n */\nexport const enum Sizes {\n Small = 'small',\n Normal = 'normal',\n Large = 'large',\n}\n\n/**\n * Sort order states\n */\nexport const enum SortOrder {\n Default = 'default',\n Ascending = 'ascending',\n Descending = 'descending',\n}\n\n/**\n * Sort direction values\n */\nexport const enum SortValue {\n Default = 0,\n Ascending = 1,\n Descending = -1,\n}\n\n/**\n * Sort attribute configuration\n */\nexport interface SortAttribute {\n index: number;\n order: SortOrder;\n}\n\n/**\n * Expansion content render function\n * @param row - The row data\n * @param index - The row index\n * @returns Template result for the expanded content\n */\nexport type ExpansionContentRenderer = (row: any, index: number) => any;\n\n/**\n * Cell content render function\n * @param value - The cell value from row[key]\n * @param row - The full row data\n * @param index - The row index\n * @returns Template result for the cell content\n */\nexport type CellContentRenderer = (value: any, row: any, index: number) => any;\n\nexport const EMPTY_STRING = '';\n"]}
|