@nuraly/lumenui 0.1.0

package/dist/src/components/table/bundle.js

@@ -0,0 +1,987 @@
+import{css as t,html as e,nothing as i,LitElement as n}from"lit";import{property as a,state as r,query as o,customElement as l}from"lit/decorators.js";import{NuralyUIBaseMixin as s}from"@nuralyui/common/mixins";import{BaseComponentController as c}from"@nuralyui/common/controllers";import{repeat as d}from"lit/directives/repeat.js";import{choose as h}from"lit/directives/choose.js";var p=t`
+  :host {
+    display: block;
+    width: 100%;
+    font-family: var(--nuraly-font-family, Arial, sans-serif);
+    color: var(--nuraly-color-text);
+    background-color: var(--nuraly-color-background);
+  }
+
+  /* Filter Container Styles */
+  .filter-container {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+    padding: var(--nuraly-spacing-2, 0.5rem) 0;
+    position: relative;
+    margin-bottom: 5px;
+  }
+
+  .filter-container input {
+    padding: 5px;
+    padding-left: 30px;
+    width: 100%;
+    box-sizing: border-box;
+    background-color: var(--nuraly-table-filter-background, #ffffff);
+    color: var(--nuraly-table-filter-text, #000000);
+  }
+
+  .filter-container input:focus {
+    outline-style: none;
+    border: 1px solid var(--nuraly-table-filter-border, #1890ff);
+  }
+
+  .filter-container .icon-container {
+    height: 25px;
+    width: 35px;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .filter-container .search-icon {
+    position: absolute;
+    left: 10px;
+    top: 25%;
+  }
+
+  /* Actions Bar Styles */
+  .actions-container {
+    background-color: var(--nuraly-table-action-color, #0f62fe);
+    padding: 10px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    color: var(--nuraly-table-background, #ffffff);
+  }
+
+  /* Fixed Header Styles */
+  .table-content-wrapper.fixed-header {
+    overflow-y: auto;
+    overflow-x: auto;
+  }
+
+  .table-content-wrapper.fixed-header table {
+    border-collapse: separate;
+    border-spacing: 0;
+  }
+
+  .table-content-wrapper.fixed-header thead {
+    background-color: var(--nuraly-table-header-background, #fafafa);
+  }
+
+  .table-content-wrapper.fixed-header thead th {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    background-color: var(--nuraly-table-header-background, #fafafa);
+    border-bottom: var(--nuraly-table-border-width, 1px) solid var(--nuraly-table-row-border-color, #f0f0f0);
+  }
+
+  .table-content-wrapper.fixed-header thead tr {
+    box-shadow: 0 1px 0 0 var(--nuraly-table-row-border-color, #f0f0f0);
+  }
+
+  .actions-container button {
+    cursor: pointer;
+    border: none;
+    color: var(--nuraly-table-background, #ffffff);
+    background-color: var(--nuraly-table-action-color, #0f62fe);
+  }
+
+  .actions-container[data-size='small'] {
+    padding: 5px;
+  }
+
+  .actions-container[data-size='large'] {
+    padding: 15px;
+  }
+
+  /* Table Content Wrapper Styles */
+  .table-content-wrapper {
+    display: block;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
+  }
+
+  input[type='checkbox'][data-indeterminate='true']::after {
+    width: 13px;
+    height: 13px;
+    background-color: var(--nuraly-table-checkbox-checked, #161616);
+    color: var(--nuraly-table-background, #ffffff);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    content: '-';
+  }
+
+  /* Table Styles */
+  table {
+    width: 100%;
+    border-spacing: 0px;
+    color: var(--nuraly-table-text-color);
+  }
+
+  td {
+    text-align: center;
+    border-bottom: var(--nuraly-table-border-width, 1px) solid var(--nuraly-table-row-border-color, #f0f0f0);
+    padding: var(--nuraly-table-cell-padding, 10px);
+    font-size: var(--nuraly-table-font-size, 14px);
+  }
+
+  th {
+    cursor: pointer;
+    padding: var(--nuraly-table-cell-padding, 10px);
+    font-size: var(--nuraly-table-font-size, 14px);
+  }
+
+  th span {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+  }
+
+  nr-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    --nuraly-icon-color: var(--nuraly-table-text-color);
+  }
+
+  tbody tr {
+    background-color: var(--nuraly-table-row-background, #ffffff);
+  }
+
+  tbody tr:hover {
+    background-color: var(--nuraly-table-row-hover-background, #f5f5f5);
+  }
+
+  tbody tr.clickable {
+    cursor: pointer;
+  }
+
+  thead tr {
+    background-color: var(--nuraly-table-header-background, #fafafa);
+  }
+
+  tbody tr:has(input:checked) {
+    background-color: var(--nuraly-table-row-selected-background, #e6f7ff);
+  }
+
+  input,
+  .expand-icon {
+    cursor: pointer;
+    accent-color: var(--nuraly-table-checkbox-checked, #1890ff);
+  }
+
+  /* Size Variants for Table Content */
+  :host([size='small']) td,
+  :host([size='small']) th {
+    padding: var(--nuraly-table-cell-padding, 8px 16px);
+    font-size: 12px;
+  }
+
+  :host([size='large']) td,
+  :host([size='large']) th {
+    padding: var(--nuraly-table-cell-padding, 15px);
+    font-size: 16px;
+  }
+
+  /* Pagination Styles */
+  .pagination-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: var(--nuraly-pagination-background-color);
+    color: var(--nuraly-pagination-text-color);
+  }
+
+  .pagination-container .left-content {
+    display: flex;
+    align-items: center;
+  }
+
+  .pagination-container .left-content .items-details {
+    border-left: var(--nuraly-pagination-borders);
+    padding: 10px;
+  }
+
+  .pagination-container .left-content .select-details {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px;
+  }
+
+  .pagination-container .left-content .select-details label {
+    font-size: var(--nuraly-font-size-input, 14px);
+    color: var(--nuraly-table-pagination-text, #000000);
+    white-space: nowrap;
+  }
+
+  .pagination-container .left-content .select-details nr-select {
+    min-width: 60px;
+    max-width: 80px;
+    --select-border-color: var(--nuraly-table-border-color, #d9d9d9);
+    --select-background: var(--nuraly-table-pagination-background, #fafafa);
+    --select-text-color: var(--nuraly-table-pagination-text, #000000);
+  }
+
+  .pagination-container .right-content {
+    display: flex;
+    align-items: center;
+    border-left: var(--nuraly-pagination-borders);
+  }
+
+  .pagination-container .right-content .icon-container {
+    display: flex;
+    align-items: center;
+    border-left: var(--nuraly-pagination-borders);
+  }
+
+  .pagination-container .right-content .page-details {
+    padding: 10px;
+  }
+
+  .pagination-container .icon-container .left-arrow,
+  .pagination-container .icon-container .right-arrow {
+    padding: 10px;
+    --nuraly-icon-color: var(--nuraly-pagination-text-color);
+  }
+
+  .pagination-container .icon-container .left-arrow {
+    border-right: var(--nuraly-pagination-borders);
+  }
+
+  .pagination-container nr-icon[data-enabled='false'] {
+    cursor: not-allowed;
+  }
+
+  .pagination-container nr-icon[data-enabled='true'] {
+    cursor: pointer;
+  }
+
+  /* Size Variants for Pagination */
+  .pagination-container[data-size='small'] .left-content .items-details {
+    padding: 5px;
+    font-size: 12px;
+  }
+
+  .pagination-container[data-size='large'] .left-content .items-details {
+    padding: 15px;
+    font-size: 16px;
+  }
+
+  .pagination-container[data-size='small'] .left-content .select-details {
+    padding: 5px;
+    gap: 6px;
+    font-size: 12px;
+  }
+
+  .pagination-container[data-size='large'] .left-content .select-details {
+    padding: 15px;
+    gap: 10px;
+  }
+
+  .pagination-container[data-size='small'] .right-content .page-details {
+    padding: 5px;
+    font-size: 12px;
+  }
+
+  .pagination-container[data-size='large'] .right-content .page-details {
+    padding: 15px;
+  }
+
+  .pagination-container[data-size='small'] .icon-container .left-arrow,
+  .pagination-container[data-size='small'] .icon-container .right-arrow {
+    padding: 5px;
+  }
+
+  .pagination-container[data-size='large'] .icon-container .left-arrow,
+  .pagination-container[data-size='large'] .icon-container .right-arrow {
+    padding: 15px;
+  }
+
+  /* Column Filter Styles */
+  th .th-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    position: relative;
+  }
+
+  th .th-text {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex: 1;
+  }
+
+  th .filter-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  .filter-trigger {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    transition: background-color 0.2s;
+  }
+
+  .filter-trigger:hover {
+    background-color: var(--nuraly-table-filter-hover, rgba(0, 0, 0, 0.04));
+  }
+
+  .filter-icon {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .filter-icon.has-filter {
+    color: var(--nuraly-table-filter-active, #1890ff);
+  }
+
+  .filter-indicator {
+    position: absolute;
+    top: -2px;
+    right: -2px;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: var(--nuraly-table-filter-active, #1890ff);
+  }
+
+  .column-filter-dropdown {
+    position: absolute;
+    top: calc(100% + 4px);
+    right: 0;
+    background: var(--nuraly-table-background, #ffffff);
+    border: 1px solid var(--nuraly-table-row-border-color, #f0f0f0);
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    z-index: 100;
+    min-width: 200px;
+    padding: 8px;
+  }
+
+  .column-filter-content {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .column-filter-input {
+    padding: 8px;
+    border: 1px solid var(--nuraly-table-row-border-color, #d9d9d9);
+    border-radius: 4px;
+    font-size: 14px;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .column-filter-input:focus {
+    outline: none;
+    border-color: var(--nuraly-table-filter-active, #1890ff);
+    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+  }
+
+  .column-filter-clear {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--nuraly-table-text-color, #000);
+    align-self: flex-end;
+  }
+
+  .column-filter-clear:hover {
+    color: var(--nuraly-table-filter-active, #1890ff);
+  }
+
+  /* Fixed Columns Styles */
+  th.fixed-column,
+  td.fixed-column {
+    position: sticky;
+    background-color: var(--nuraly-table-row-background, #ffffff);
+  }
+
+  /* Fixed columns in header - highest priority */
+  thead th.fixed-column {
+    z-index: 20;
+    background-color: var(--nuraly-table-header-background, #fafafa);
+  }
+
+  /* When table has fixed header, fixed columns in header need even higher z-index */
+  .table-content-wrapper.fixed-header thead th.fixed-column {
+    z-index: 25;
+    background-color: var(--nuraly-table-header-background, #fafafa);
+  }
+
+  /* Fixed columns in body */
+  tbody td.fixed-column {
+    z-index: 8;
+    background-color: var(--nuraly-table-row-background, #ffffff);
+  }
+
+  /* Ensure fixed columns in tbody have proper background */
+  tbody tr td.fixed-column {
+    background-color: var(--nuraly-table-row-background, #ffffff);
+  }
+
+  tbody tr:hover td.fixed-column {
+    background-color: var(--nuraly-table-row-hover-background, #f5f5f5);
+  }
+
+  th.fixed-column-left,
+  td.fixed-column-left {
+    left: 0;
+    border-right: 1px solid var(--nuraly-table-row-border-color, #f0f0f0);
+  }
+
+  th.fixed-column-right,
+  td.fixed-column-right {
+    right: 0;
+    border-left: 1px solid var(--nuraly-table-row-border-color, #f0f0f0);
+  }
+
+  /* Shadow effect for fixed columns */
+  th.fixed-column-left::after,
+  td.fixed-column-left::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: -10px;
+    bottom: 0;
+    width: 10px;
+    pointer-events: none;
+    transition: box-shadow 0.3s;
+    box-shadow: none;
+  }
+
+  .table-content-wrapper.has-scroll th.fixed-column-left::after,
+  .table-content-wrapper.has-scroll td.fixed-column-left::after {
+    box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.15);
+  }
+
+  th.fixed-column-right::before,
+  td.fixed-column-right::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -10px;
+    bottom: 0;
+    width: 10px;
+    pointer-events: none;
+    transition: box-shadow 0.3s;
+    box-shadow: none;
+  }
+
+  .table-content-wrapper.has-scroll th.fixed-column-right::before,
+  .table-content-wrapper.has-scroll td.fixed-column-right::before {
+    box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.15);
+  }
+
+  /* ============================================ */
+  /* Loading State Styles */
+  /* ============================================ */
+  
+  /* Skeleton Loading Rows */
+  .skeleton-row {
+    animation: skeleton-pulse 1.5s ease-in-out infinite;
+  }
+
+  .skeleton-cell {
+    padding: var(--nuraly-spacing-3, 0.75rem) var(--nuraly-spacing-4, 1rem);
+    border-bottom: 1px solid var(--nuraly-table-border-color, #f0f0f0);
+  }
+
+  .skeleton-cell.selection-skeleton {
+    width: 48px;
+    text-align: center;
+  }
+
+  .skeleton-checkbox {
+    width: 16px;
+    height: 16px;
+    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+    background-size: 200% 100%;
+    animation: skeleton-shimmer 1.5s ease-in-out infinite;
+    border-radius: 2px;
+    margin: 0 auto;
+  }
+
+  .skeleton-content {
+    height: 16px;
+    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+    background-size: 200% 100%;
+    animation: skeleton-shimmer 1.5s ease-in-out infinite;
+    border-radius: 4px;
+    width: 80%;
+  }
+
+  @keyframes skeleton-shimmer {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+
+  @keyframes skeleton-pulse {
+    0%, 100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.6;
+    }
+  }
+
+  /* Spinner Loading */
+  .loading-row {
+    background-color: var(--nuraly-table-row-background, #ffffff);
+  }
+
+  .loading-cell {
+    padding: var(--nuraly-spacing-8, 2rem) var(--nuraly-spacing-4, 1rem);
+    text-align: center;
+    border-bottom: 1px solid var(--nuraly-table-border-color, #f0f0f0);
+  }
+
+  .loading-spinner-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--nuraly-spacing-4, 1rem);
+  }
+
+  .loading-spinner {
+    width: 40px;
+    height: 40px;
+    border: 4px solid var(--nuraly-table-border-color, #f0f0f0);
+    border-top-color: var(--nuraly-color-primary, #1890ff);
+    border-radius: 50%;
+    animation: spinner-rotate 0.8s linear infinite;
+  }
+
+  @keyframes spinner-rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  .loading-text {
+    margin: 0;
+    color: var(--nuraly-color-text-secondary, #666666);
+    font-size: 14px;
+  }
+
+  /* Empty State Styles */
+  .empty-row {
+    background: var(--nuraly-table-row-bg-color, #ffffff);
+  }
+
+  .empty-row:hover {
+    background: var(--nuraly-table-row-bg-color, #ffffff);
+  }
+
+  .empty-cell {
+    padding: 64px 24px;
+    text-align: center;
+    border-bottom: 1px solid var(--nuraly-table-border-color, #f0f0f0);
+  }
+
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .empty-icon {
+    width: 64px;
+    height: 64px;
+    color: var(--nuraly-color-text-quaternary, #bfbfbf);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .empty-icon svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .empty-icon nr-icon {
+    font-size: 64px;
+  }
+
+  .empty-text {
+    margin: 0;
+    color: var(--nuraly-color-text-secondary, #666666);
+    font-size: 14px;
+    line-height: 1.5;
+  }
+
+  /* Expansion Row Styles */
+  .expand-icon {
+    text-align: center;
+    vertical-align: middle;
+    transition: transform 0.3s ease;
+    outline: none;
+  }
+
+  .expand-icon:hover {
+    background-color: var(--nuraly-color-fill-tertiary, #f5f5f5);
+  }
+
+  .expand-icon:focus {
+    background-color: var(--nuraly-color-fill-tertiary, #f5f5f5);
+    box-shadow: inset 0 0 0 2px var(--nuraly-color-primary, #1890ff);
+  }
+
+  .expand-icon nr-icon {
+    transition: transform 0.3s ease;
+  }
+
+  .expand-icon.expanded nr-icon {
+    transform: rotate(180deg);
+  }
+
+  .expansion-row {
+    transition: all 0.3s ease;
+  }
+
+  .expansion-row.collapsed {
+    opacity: 0;
+    height: 0;
+    overflow: hidden;
+  }
+
+  .expansion-row.expanded {
+    opacity: 1;
+    animation: slideDown 0.3s ease;
+  }
+
+  .expansion-content {
+    padding: 16px;
+    background-color: var(--nuraly-color-fill-quaternary, #fafafa);
+    border-top: 1px solid var(--nuraly-color-border, #d9d9d9);
+  }
+
+  @keyframes slideDown {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+`;
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+class f extends c{}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */class u extends f{initSelection(){this.host.selectionMode&&(this.host.selectedItems=new Array(this.host.rows.length).fill(!1))}handleCheckAll(t){try{const e=(this.host.currentPage-1)*this.host.selectedItemPerPage,i=Math.min(e+this.host.selectedItemPerPage,this.host.selectedItems.length),n=[...this.host.selectedItems];for(let a=e;a<i;a++)n[a]=!t;this.host.selectedItems=n;const a=this.host.rowsCopy.filter((t,e)=>this.host.selectedItems[e]);this.dispatchEvent(new CustomEvent("onSelect",{bubbles:!0,composed:!0,detail:{value:a}})),this.requestUpdate()}catch(t){this.handleError(t,"handleCheckAll")}}handleCheckOne(t,e){try{const i=t+(this.host.currentPage-1)*this.host.selectedItemPerPage;this.host.selectedItems[i]=e,this.host.selectedItems=[...this.host.selectedItems];const n=this.host.rowsCopy.filter((t,e)=>this.host.selectedItems[e]);this.dispatchEvent(new CustomEvent("nr-select",{bubbles:!0,composed:!0,detail:{value:n}})),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 i=t+(this.host.currentPage-1)*this.host.selectedItemPerPage;this.host.selectedItems[i]=!0,this.host.selectedItems=[...this.host.selectedItems];const n=this.host.rowsCopy.filter((t,e)=>this.host.selectedItems[e]);this.dispatchEvent(new CustomEvent("nr-select",{bubbles:!0,composed:!0,detail:{value:n}})),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}}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */class g extends f{initPagination(){try{this.host.serverSide?(this.host.displayedRows=[...this.host.rows],this.host.currentPage=this.host.rows.length>0?1:0):(this.host.displayedRows=this.host.rowsCopy.slice(0,this.host.selectedItemPerPage),this.host.currentPage=this.host.rowsCopy.length>0?1:0),this.requestUpdate()}catch(t){this.handleError(t,"initPagination")}}handleItemPerPageChange(t){try{this.host.selectedItemPerPage=t,this.host.currentPage=1,this.host.serverSide?(this.dispatchEvent(new CustomEvent("onPaginate",{bubbles:!0,composed:!0,detail:{page:1,limit:t,offset:0}})),this.requestUpdate()):this.initPagination()}catch(t){this.handleError(t,"handleItemPerPageChange")}}handlePageChange(t){try{this.host.currentPage=t;const e=(t-1)*this.host.selectedItemPerPage,i=e+this.host.selectedItemPerPage;this.host.serverSide||(this.host.displayedRows=this.host.rowsCopy.slice(e,i)),this.dispatchEvent(new CustomEvent("onPaginate",{bubbles:!0,composed:!0,detail:{page:this.host.currentPage,limit:this.host.selectedItemPerPage,offset:e}})),this.requestUpdate()}catch(t){this.handleError(t,"handlePageChange")}}getTotalPages(){const t=this.host.serverSide?this.host.totalCount:this.host.rowsCopy.length;return Math.ceil(t/this.host.selectedItemPerPage)}hasNextPage(){return this.host.currentPage<this.getTotalPages()}hasPreviousPage(){return this.host.currentPage>1}}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */class b extends f{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,i)=>{const n=this.host.headers[this.host.sortAttribute.index].key,a=JSON.stringify(e[n]),r=JSON.stringify(i[n]);return(a<r?-1:a>r?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 i=this.host.rows.findIndex(e=>JSON.stringify(e)===JSON.stringify(t)),n=this.host.rows.findIndex(t=>JSON.stringify(t)===JSON.stringify(e));return i>n?1:i<n?-1:0}),this.requestUpdate()}catch(t){this.handleError(t,"resetSort")}}isSortActive(){return this.host.sortAttribute.index>-1}isSortDefault(){return"default"===this.host.sortAttribute.order}}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */class x extends f{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,i])=>{const n=t[e];if(null==n)return!1;const a=String(n).toLowerCase(),r=String(i).toLowerCase();return a.includes(r)}))),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 m(t,e,i){let n=0;i&&(n+=50);for(let i=0;i<e;i++)if("left"===t[i].fixed){const e=t[i].width;n+="number"==typeof e?e:Number.parseInt(String(e))||150}return n}function v(t){const e=[];return t.fixed&&(e.push("fixed-column"),e.push(`fixed-column-${t.fixed}`)),e.join(" ")}function y(t){const n=t.headers.some(t=>"left"===t.fixed),a=n?"fixed-column fixed-column-left":"";return e`
+    <table>
+      <thead>
+        <tr>
+          ${t.expandable||t.expansionRenderer||t.selectionMode?e`<th class="${a}" style="${n?"left: 0; width: 50px; min-width: 50px;":""}">
+                ${"multiple"===t.selectionMode?e`<nr-checkbox 
+                      id="global-check"
+                      @nr-change=${t.onCheckAll}
+                    ></nr-checkbox>`:i}
+              </th>`:i}
+          ${d(t.headers,(n,a)=>{const r=v(n),o=t.expandable||t.expansionRenderer||t.selectionMode,l="left"===n.fixed?m(t.headers,a,!!o):void 0,s=n.width?"number"==typeof n.width?`${n.width}px`:n.width:void 0;return e`
+                ${t.expandable!==n.key?e`<th 
+                      class="${[n.filterable?"filterable":"",r].filter(Boolean).join(" ")}"
+                      style="${void 0!==l?`left: ${l}px;`:""} ${s?`width: ${s}; min-width: ${s};`:""}">
+                      <div class="th-content">
+                        <span class="th-text" @click=${()=>t.onUpdateSort(a)}>
+                          ${n.name}
+                          ${a===t.sortAttribute.index?h(t.sortAttribute.order,[["default",()=>e`<nr-icon name="arrow-up-down" size="small"></nr-icon>`],["ascending",()=>e`<nr-icon name="arrow-up" size="small"></nr-icon>`],["descending",()=>e`<nr-icon name="arrow-down" size="small"></nr-icon>`]]):e`<nr-icon name="arrow-up-down" size="small"></nr-icon>`}
+                        </span>
+                        ${n.filterable&&n.filterConfig?e`
+                              <div class="filter-wrapper">
+                                <button 
+                                  class="filter-trigger"
+                                  @click=${e=>{e.stopPropagation(),t.onToggleColumnFilter(n.key)}}
+                                >
+                                  ${t.activeFilterColumn,n.key,c=t.columnFilters.has(n.key),e`
+    <span class="filter-icon ${c?"has-filter":""}">
+      <nr-icon name="filter" size="small"></nr-icon>
+      ${c?e`<span class="filter-indicator"></span>`:i}
+    </span>
+  `}
+                                </button>
+                                ${t.activeFilterColumn===n.key?function(t){const{filterConfig:n,currentValue:a,onFilterChange:r,onClearFilter:o}=t;return e`
+    <div class="column-filter-dropdown">
+      <div class="column-filter-content">
+        ${"select"===n.type?e`
+              <nr-select
+                .options=${n.options||[]}
+                .value=${a||""}
+                placeholder=${n.placeholder||"Filter..."}
+                @nr-change=${t=>r(t.detail.value)}
+              ></nr-select>
+            `:"number"===n.type?e`
+              <input
+                type="number"
+                class="column-filter-input"
+                placeholder=${n.placeholder||"Filter by number..."}
+                .value=${a||""}
+                @input=${t=>r(t.target.value)}
+              />
+            `:"date"===n.type?e`
+              <input
+                type="date"
+                class="column-filter-input"
+                placeholder=${n.placeholder||"Filter by date..."}
+                .value=${a||""}
+                @input=${t=>r(t.target.value)}
+              />
+            `:e`
+              <input
+                type="text"
+                class="column-filter-input"
+                placeholder=${n.placeholder||"Filter..."}
+                .value=${a||""}
+                @input=${t=>r(t.target.value)}
+              />
+            `}
+        
+        ${a?e`
+              <button class="column-filter-clear" @click=${o}>
+                <nr-icon name="x" size="small"></nr-icon>
+              </button>
+            `:i}
+      </div>
+    </div>
+  `}({columnKey:n.key,filterConfig:n.filterConfig,currentValue:t.columnFilters.get(n.key),isActive:!0,onFilterChange:e=>t.onApplyColumnFilter(n.key,e),onClearFilter:()=>t.onClearColumnFilter(n.key)}):i}
+                              </div>
+                            `:i}
+                      </div>
+                    </th>`:i}
+              `;var c;
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */})}
+        </tr>
+      </thead>
+      <tbody>
+        ${t.loading?function(t,i=5){const n=!!t.selectionMode;return e`
+    ${Array.from({length:i},()=>e`
+      <tr class="skeleton-row">
+        ${n?e`
+          <td class="skeleton-cell selection-skeleton">
+            <div class="skeleton-checkbox"></div>
+          </td>
+        `:""}
+        ${t.headers.map(()=>e`
+          <td class="skeleton-cell">
+            <div class="skeleton-content"></div>
+          </td>
+        `)}
+      </tr>
+    `)}
+  `}(t.host,5):0===t.rows.length?function(t){const i=t.headers.length+(t.selectionMode?1:0);return e`
+    <tr class="empty-row">
+      <td colspan="${i}" class="empty-cell">
+        <div class="empty-state">
+          ${t.emptyIcon?e`
+                <div class="empty-icon">
+                  <nr-icon name="${t.emptyIcon}"></nr-icon>
+                </div>
+              `:e`
+                <div class="empty-icon">
+                  <svg
+                    width="64"
+                    height="64"
+                    viewBox="0 0 64 64"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M32 8C18.745 8 8 18.745 8 32s10.745 24 24 24 24-10.745 24-24S45.255 8 32 8zm0 44c-11.028 0-20-8.972-20-20s8.972-20 20-20 20 8.972 20 20-8.972 20-20 20z"
+                      fill="currentColor"
+                      opacity="0.3"
+                    />
+                    <path
+                      d="M32 20c-1.105 0-2 .895-2 2v12c0 1.105.895 2 2 2s2-.895 2-2V22c0-1.105-.895-2-2-2zm0 20c-1.105 0-2 .895-2 2s.895 2 2 2 2-.895 2-2-.895-2-2-2z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+              `}
+          <div class="empty-text">${t.emptyText}</div>
+        </div>
+      </td>
+    </tr>
+  `}(t.host):d(t.rows,(r,o)=>e`
+            <tr class="${t.clickable?"clickable":""}" @click=${()=>{var e;return null===(e=t.onRowClick)||void 0===e?void 0:e.call(t,r,o)}}>
+              ${!t.expandable&&!t.expansionRenderer||t.selectionMode?t.selectionMode?h(t.selectionMode,[["multiple",()=>e`<td class="${a}" style="${n?"left: 0; width: 50px; min-width: 50px;":""}">
+                        <nr-checkbox
+                          @nr-change=${e=>t.onCheckOne(e,o)}
+                          .checked=${t.selectedItems[o+(t.currentPage-1)*t.itemPerPage]}
+                        ></nr-checkbox>
+                      </td>`],["single",()=>e`<td class="${a}" style="${n?"left: 0; width: 50px; min-width: 50px;":""}">
+                      <nr-radio
+                        name="table-row-selection"
+                        value="${o}"
+                        @nr-change=${()=>t.onSelectOne(o)}
+                        .checked=${t.selectedItems[o+(t.currentPage-1)*t.itemPerPage]}
+                      ></nr-radio>
+                    </td>`]]):i:e`
+                  <td 
+                    @click=${()=>t.onShowExpandedContent(o)} 
+                    @keydown=${e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),t.onShowExpandedContent(o))}}
+                    tabindex="0"
+                    role="button"
+                    aria-expanded="${t.expand[o]}"
+                    aria-label="${t.expand[o]?"Collapse row":"Expand row"}"
+                    class="expand-icon ${t.expand[o]?"expanded":""} ${a}" 
+                    style="${n?"left: 0; width: 50px; min-width: 50px;":""}">
+                    <nr-icon name="chevron-down" size="small"></nr-icon>
+                  </td>
+                `}
+            ${d(t.headers,(n,a)=>{const l=v(n),s=t.expandable||t.expansionRenderer||t.selectionMode,c="left"===n.fixed?m(t.headers,a,!!s):void 0,d=n.width?"number"==typeof n.width?`${n.width}px`:n.width:void 0,h=r[n.key],p=n.render?n.render(h,r,o):h;return e`${t.expandable!==n.key?e`<td
+                      class="${l}"
+                      style="${void 0!==c?`left: ${c}px;`:""} ${d?`width: ${d}; min-width: ${d};`:""}">
+                      ${p}
+                    </td>`:i}`})}
+            </tr>
+            ${t.expand[o]?e`
+                <tr class="expansion-row expanded">
+                  <td colspan=${t.headers.length+(t.expandable||t.expansionRenderer||t.selectionMode?1:0)}>
+                    <div class="expansion-content">
+                      ${t.expansionRenderer?t.expansionRenderer(r,o):t.expandable?r[t.expandable]:i}
+                    </div>
+                  </td>
+                </tr>
+              `:i}
+          `)}
+      </tbody>
+    </table>
+  `}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var w=function(t,e,i,n){for(var a,r=arguments.length,o=r<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,i):n,l=t.length-1;l>=0;l--)(a=t[l])&&(o=(r<3?a(o):r>3?a(e,i,o):a(e,i))||o);return r>3&&o&&Object.defineProperty(e,i,o),o};let k=class extends(s(n)){constructor(){super(...arguments),this.rows=[],this.size="normal",this.withFilter=!1,this.fixedHeader=!1,this.loading=!1,this.emptyText="No data available",this.serverSide=!1,this.totalCount=0,this.clickable=!1,this.pageSize=5,this.itemPerPage=[5,10,15,20],this.selectedItemPerPage=5,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 u(this),this.paginationController=new g(this),this.sortController=new b(this),this.filterController=new x(this)}connectedCallback(){super.connectedCallback(),this.selectionController.initSelection(),this.pageSize&&this.itemPerPage.includes(this.pageSize)&&(this.selectedItemPerPage=this.pageSize)}updated(t){var e,i;if(this.globalCheck&&(t.has("selectedItems")||t.has("currentPage")||t.has("displayedRows"))){const t=this.globalCheck,e=(this.currentPage-1)*this.selectedItemPerPage,i=Math.min(e+this.displayedRows.length,this.selectedItems.length),n=this.selectedItems.slice(e,i);n.length>0&&n.every(t=>t)?(t.checked=!0,t.indeterminate=!1):n.some(t=>t)?(t.checked=!1,t.indeterminate=!0):(t.checked=!1,t.indeterminate=!1)}this.showFilterInput&&t.has("showFilterInput")&&(null===(i=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector("input"))||void 0===i||i.focus())}willUpdate(t){t.has("rows")&&(this.expand=new Array(this.rows.length).fill(!1)),this.serverSide?t.has("rows")&&(this.displayedRows=[...this.rows],!this.currentPage&&this.rows.length>0&&(this.currentPage=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,n;const a=this.serverSide?this.totalCount:this.rowsCopy.length,r=Math.ceil(a/this.selectedItemPerPage),o=this.currentPage>0?this.currentPage*this.selectedItemPerPage-this.selectedItemPerPage+1:0,l=this.currentPage*this.selectedItemPerPage<=a?this.currentPage*this.selectedItemPerPage:a,s=l<a,c=o>1;return e`
+      ${this.selectionMode&&!this.withFilter&&this.selectionController.hasSelection()?(d={selectedItems:this.selectionController.getSelectedCount(),size:this.size,onCancelSelection:()=>this._handleCancelSelection()},e`
+    <div class="actions-container" data-size="${d.size}">
+      <span>${d.selectedItems} selected</span>
+      <button @click=${d.onCancelSelection}>Cancel</button>
+    </div>
+  `):this.withFilter?e`
+            <div class="filter-container">
+              ${function(t){return e`
+    <div class="filter-container">
+      ${t.showInput?e`
+            <nr-icon name="search" size="small" class="search-icon"></nr-icon>
+            <input
+              type="text"
+              placeholder="search"
+              @blur=${t.value.trim()?i:t.onToggleInput}
+              @input=${t.onChange}
+            />
+          `:e`
+            <div class="icon-container" @click=${t.onToggleInput}>
+              <nr-icon name="search" size="small"></nr-icon>
+            </div>
+          `}
+    </div>
+  `}({showInput:this.showFilterInput,value:this.filterValue,onToggleInput:()=>this._toggleFilterInput(),onChange:t=>this._handleFilterInputChange(t)})}
+            </div>
+          `:i}
+
+      <div class="table-content-wrapper ${this.fixedHeader?"fixed-header":""}" 
+           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};`:""}
+                  ${(null===(n=this.scrollConfig)||void 0===n?void 0:n.x)?`${this.fixedHeader?"width":"max-width"}: ${"number"==typeof this.scrollConfig.x?this.scrollConfig.x+"px":this.scrollConfig.x};`:""}">
+        ${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,clickable:this.clickable,onCheckAll:()=>{const t=(this.currentPage-1)*this.selectedItemPerPage,e=Math.min(t+this.selectedItemPerPage,this.selectedItems.length),i=this.selectedItems.slice(t,e),n=i.every(t=>t)&&i.length>0;this._handleCheckAll({detail:{isEveryItemChecked:n}})},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),onRowClick:(t,e)=>{this.clickable&&this.dispatchEvent(new CustomEvent("nr-row-click",{detail:{row:t,index:e},bubbles:!0,composed:!0}))}})}
+      </div>
+
+      ${function(t){const n=t.itemPerPage.map(t=>({label:String(t),value:String(t)}));return e`
+    <div class="pagination-container" data-size="${t.size}">
+      <div class="left-content">
+        <span class="select-details">
+          <label>Items per page:</label>
+          <nr-select
+            .options=${n}
+            .value=${String(t.selectedItemPerPage)}
+            size="small"
+            @nr-change=${t.onItemPerPageChange}
+          ></nr-select>
+        </span>
+        <span class="items-details">
+          ${t.fromItem} - ${t.toItem} of ${t.numberOfItems} items
+        </span>
+      </div>
+
+      <div class="right-content">
+        <span class="page-details">
+          ${t.currentPage} of ${t.numberOfPages} pages
+        </span>
+        <span class="icon-container">
+          <nr-icon
+            class="left-arrow"
+            data-enabled=${t.enablePrevious}
+            name="chevron-left" size="small"
+            @click=${t.enablePrevious?t.onPreviousPage:i}
+          ></nr-icon>
+
+          <nr-icon
+            class="right-arrow"
+            data-enabled=${t.enableNext}
+            name="chevron-right" size="small"
+            @click=${t.enableNext?t.onNextPage:i}
+          ></nr-icon>
+        </span>
+      </div>
+    </div>
+  `}({numberOfItems:a,itemPerPage:this.itemPerPage,selectedItemPerPage:this.selectedItemPerPage,currentPage:this.currentPage,size:this.size,numberOfPages:r,fromItem:o,toItem:l,enableNext:s,enablePrevious:c,onItemPerPageChange:t=>this._handleItemPerPage(t),onNextPage:()=>{this.currentPage++,this._handleUpdatePage({detail:{page:this.currentPage}})},onPreviousPage:()=>{this.currentPage--,this._handleUpdatePage({detail:{page:this.currentPage}})}})}
+    `;var d}};k.styles=p,w([a({type:Array})],k.prototype,"headers",void 0),w([a({type:Array})],k.prototype,"rows",void 0),w([a({type:String})],k.prototype,"size",void 0),w([a({type:Boolean})],k.prototype,"withFilter",void 0),w([a({type:String})],k.prototype,"expandable",void 0),w([a({attribute:!1})],k.prototype,"expansionRenderer",void 0),w([a({type:String})],k.prototype,"selectionMode",void 0),w([a({type:Boolean})],k.prototype,"fixedHeader",void 0),w([a({type:Object})],k.prototype,"scrollConfig",void 0),w([a({type:Boolean})],k.prototype,"loading",void 0),w([a({type:String})],k.prototype,"emptyText",void 0),w([a({type:String})],k.prototype,"emptyIcon",void 0),w([a({type:Boolean})],k.prototype,"serverSide",void 0),w([a({type:Number})],k.prototype,"totalCount",void 0),w([a({type:Boolean})],k.prototype,"clickable",void 0),w([a({type:Number})],k.prototype,"pageSize",void 0),w([r()],k.prototype,"itemPerPage",void 0),w([r()],k.prototype,"selectedItemPerPage",void 0),w([r()],k.prototype,"displayedRows",void 0),w([r()],k.prototype,"selectedItems",void 0),w([r()],k.prototype,"currentPage",void 0),w([r()],k.prototype,"rowsCopy",void 0),w([r()],k.prototype,"activeSearch",void 0),w([r()],k.prototype,"sortAttribute",void 0),w([r()],k.prototype,"expand",void 0),w([r()],k.prototype,"showFilterInput",void 0),w([r()],k.prototype,"filterValue",void 0),w([r()],k.prototype,"columnFilters",void 0),w([r()],k.prototype,"activeFilterColumn",void 0),w([o("#global-check")],k.prototype,"globalCheck",void 0),k=w([l("nr-table")],k);export{k as HyTable};