tuix-webcomponents 0.57.0 → 0.59.0

package/dist/src/tuix-table/TuixTable.js

@@ -0,0 +1,378 @@
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { tableStyles, threeDots } from './TuixTable.styles.js';
+import { TextSize, TextVariant } from '../tuix-text/enums/tuix-text.enums.js';
+import { IconName } from '../tuix-icon/enums/tuix-icon.enums.js';
+import { Palette } from '../utils/colors.js';
+import { ScreenSizes } from '../utils/screenSizes.enum.js';
+let TuixTable = class TuixTable extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.paginated = false;
+        this.disableMobileTable = false;
+        this.showMobileTableInTablet = false;
+        this.data = [];
+        this.headers = [];
+        this.pageSizeOptions = [5, 10, 20];
+        this.isLoadingData = false;
+        this._isTabletView = false;
+        this._isMobileView = false;
+        this._headerPercents = [];
+        this._onScreenSizeChange = () => {
+            var _a, _b;
+            this._isTabletView = !!((_a = this._mqTablet) === null || _a === void 0 ? void 0 : _a.matches);
+            this._isMobileView = !!((_b = this._mqMobile) === null || _b === void 0 ? void 0 : _b.matches);
+        };
+        this._nextPage = () => {
+            const next = Math.min(this.totalPages, this._effectiveCurrentPage + 1);
+            const detail = {
+                page: next,
+                pageSize: this._effectivePageSize,
+            };
+            this.dispatchEvent(new CustomEvent('next-page', {
+                detail,
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        this._prevPage = () => {
+            const prev = Math.max(1, this._effectiveCurrentPage - 1);
+            const detail = {
+                page: prev,
+                pageSize: this._effectivePageSize,
+            };
+            this.dispatchEvent(new CustomEvent('previous-page', {
+                detail,
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        this._setPageSize = (value) => {
+            const newSize = Math.max(1, Math.floor(value));
+            const newPage = 1;
+            const detail = { page: newPage, pageSize: newSize };
+            this.dispatchEvent(new CustomEvent('page-size-change', {
+                detail,
+                bubbles: true,
+                composed: true,
+            }));
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._mqTablet = window.matchMedia(`(max-width:${ScreenSizes.TABLET}px)`);
+        this._mqMobile = window.matchMedia(`(max-width:${ScreenSizes.MOBILE}px)`);
+        this._onScreenSizeChange();
+        this._mqTablet.addEventListener('change', this._onScreenSizeChange);
+        this._mqMobile.addEventListener('change', this._onScreenSizeChange);
+        this._computeHeaderPercents();
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        super.disconnectedCallback();
+        (_a = this._mqTablet) === null || _a === void 0 ? void 0 : _a.removeEventListener('change', this._onScreenSizeChange);
+        (_b = this._mqMobile) === null || _b === void 0 ? void 0 : _b.removeEventListener('change', this._onScreenSizeChange);
+    }
+    updated(changedProps) {
+        if (changedProps.has('headers'))
+            this._computeHeaderPercents();
+    }
+    get _effectiveTotalItems() {
+        var _a;
+        return (_a = this.data.length) !== null && _a !== void 0 ? _a : this.totalItems;
+    }
+    get _effectiveCurrentPage() {
+        var _a;
+        return (_a = this.currentPage) !== null && _a !== void 0 ? _a : 1;
+    }
+    get _effectivePageSize() {
+        var _a;
+        return (_a = this.currentSize) !== null && _a !== void 0 ? _a : this.pageSizeOptions[0];
+    }
+    get totalPages() {
+        const denom = this._effectivePageSize;
+        return Math.max(1, Math.ceil(this._effectiveTotalItems / denom));
+    }
+    get _paginationProps() {
+        const totalItems = this._effectiveTotalItems;
+        const itemsPerPage = this._effectivePageSize;
+        const startItem = totalItems
+            ? (this._effectiveCurrentPage - 1) * itemsPerPage + 1
+            : 0;
+        const endItem = Math.min(this._effectiveCurrentPage * itemsPerPage, totalItems);
+        return {
+            totalItems,
+            currentPage: this._effectiveCurrentPage,
+            itemsPerPage,
+            startItem,
+            endItem,
+            onNextPage: this._nextPage,
+            onPreviousPage: this._prevPage,
+            onItemsPerPageChange: this._setPageSize,
+            isLoading: this.isLoadingData,
+        };
+    }
+    _paginatedData() {
+        if (!this.paginated)
+            return this.data;
+        const page = this._effectiveCurrentPage;
+        const size = this._effectivePageSize;
+        const start = (page - 1) * size;
+        const end = start + size;
+        return this.data.slice(start, end);
+    }
+    _computeHeaderPercents() {
+        const total = this.headers.reduce((acum, header) => acum + header.width, 0);
+        this._headerPercents =
+            total === 0
+                ? this.headers.map(() => 100 / this.headers.length)
+                : this.headers.map(header => (header.width / total) * 100);
+    }
+    _cellStyleString() {
+        return `border-bottom:1px solid ${Palette.NEUTRAL_200};`;
+    }
+    _textVariantColor(header, row) {
+        const color = header.cellColor
+            ? header.cellColor(row)
+            : TextVariant.PRIMARY;
+        return color;
+    }
+    _renderHeaderCells() {
+        return html `<tr>
+      ${this.headers.map((header, idx) => html `<th
+          style=${styleMap({
+            width: `${this._headerPercents[idx]}%`,
+            color: Palette.WHITE,
+        })}
+        >
+          <tuix-text size=${TextSize.Body1} color=${TextVariant.SECONDARY}
+            >${header.name}</tuix-text
+          >
+        </th>`)}
+    </tr>`;
+    }
+    _renderCell(header, row) {
+        if (header.isSlot) {
+            const slotName = `${header.slotName}-${row.id}`;
+            return html `<td style="${this._cellStyleString()}">
+        <slot name=${slotName}></slot>
+      </td>`;
+        }
+        const content = row[header.dataKey];
+        return html `<td style="${this._cellStyleString()}">
+      <tuix-text
+        size=${TextSize.Body1}
+        color=${this._textVariantColor(header, row)}
+        >${content}</tuix-text
+      >
+    </td>`;
+    }
+    _renderRows() {
+        const rows = this._paginatedData();
+        return repeat(rows, row => row.id, row => html `<tr>
+          ${this.headers.map(header => this._renderCell(header, row))}
+        </tr>`);
+    }
+    _onPageSizeChange(e) {
+        const selectedValue = parseInt(e.target.value);
+        this._setPageSize(selectedValue);
+    }
+    _renderPageSizeOptions() {
+        return this.pageSizeOptions.map(size => html `<option value=${size}>${size}</option>`);
+    }
+    _renderSpinner() {
+        const threeDotsConfiguration = {
+            size: '14px',
+            color: Palette.MAIN,
+            visible: true,
+            ariaLabel: 'Loading',
+            wrapperStyle: {
+                width: '100%',
+                display: 'flex',
+                justifyContent: 'center',
+                padding: '48px 0',
+            },
+            ...this.loader,
+        };
+        if (!threeDotsConfiguration.visible)
+            return null;
+        const wrapperVars = {
+            '--dot-size': threeDotsConfiguration.size,
+            '--dot-color': threeDotsConfiguration.color,
+            ...threeDotsConfiguration.wrapperStyle,
+        };
+        const aria = threeDotsConfiguration.ariaLabel;
+        return html `<div class="tuix-spinner-wrapper">
+      <div
+        class="three-dots-wrapper"
+        role="status"
+        aria-label=${aria}
+        style=${styleMap(wrapperVars)}
+      >
+        <span class="dot" aria-hidden="true"></span>
+        <span class="dot" aria-hidden="true"></span>
+        <span class="dot" aria-hidden="true"></span>
+        <span class="sr-only">${aria}</span>
+      </div>
+    </div>`;
+    }
+    _renderPagination() {
+        const { totalItems, startItem, endItem, itemsPerPage, isLoading } = this._paginationProps;
+        return html `<footer
+      style="background-color:${Palette.SECTION_BG};"
+      class="table_footer sticky"
+    >
+      <div class="items-per-page">
+        <tuix-text size=${TextSize.Body2}>Items per page</tuix-text>
+        <div
+          style="outline: 1px solid ${Palette.NEUTRAL_200};"
+          class="dropdown_container"
+        >
+          <select
+            class="items-per-page-dropdown"
+            .value=${String(itemsPerPage)}
+            @change=${this._onPageSizeChange}
+            ?disabled=${isLoading}
+          >
+            ${this._renderPageSizeOptions()}
+          </select>
+          <tuix-icon
+            class="arrow-icon"
+            name=${IconName.CHEVRON_DOWN}
+          ></tuix-icon>
+        </div>
+      </div>
+
+      <div class="navigation">
+        <tuix-text size=${TextSize.Body2}
+          >${startItem} - ${endItem} of ${totalItems}</tuix-text
+        >
+        <div class="buttons">
+          <tuix-icon
+            class="arrow-icon"
+            name=${IconName.CHEVRON_LEFT}
+            @click=${this._prevPage}
+          ></tuix-icon>
+          <tuix-icon
+            class="arrow-icon"
+            name=${IconName.CHEVRON_RIGHT}
+            @click=${this._nextPage}
+          ></tuix-icon>
+        </div>
+      </div>
+    </footer>`;
+    }
+    _renderTable() {
+        return html `<table>
+        <thead style="background-color: ${Palette.MAIN}">
+          ${this._renderHeaderCells()}
+        </thead>
+        ${this.isLoadingData
+            ? html `<tbody>
+              <tr>
+                <td colspan=${this.headers.length}>${this._renderSpinner()}</td>
+              </tr>
+            </tbody>`
+            : html `<tbody>
+              ${this._renderRows()}
+            </tbody>`}
+      </table>
+      ${this.paginated ? this._renderPagination() : null}`;
+    }
+    _renderCards() {
+        const rows = this._paginatedData();
+        return html `<div class="mobile_table">
+        ${this.isLoadingData
+            ? this._renderSpinner()
+            : rows.map(row => html `<div
+                style="border-bottom: 2px solid ${Palette.MAIN};"
+                class="table_entity"
+              >
+                ${this.headers.map(header => html `<div
+                    class="table_row"
+                    style="border-bottom:1px solid ${Palette.NEUTRAL_200};"
+                  >
+                    <div
+                      class="header"
+                      style="background-color:${Palette.SECTION_BG};"
+                    >
+                      <tuix-text
+                        size=${TextSize.Body1}
+                        color=${TextVariant.PRIMARY}
+                        >${header.name}</tuix-text
+                      >
+                    </div>
+                    <div class="content">
+                      ${header.isSlot
+                ? html `<slot
+                            name="${header.slotName}-${row.id}"
+                          ></slot>`
+                : html `<tuix-text size=${TextSize.Body1}
+                            >${row[header.dataKey]}</tuix-text
+                          >`}
+                    </div>
+                  </div>`)}
+              </div>`)}
+      </div>
+      ${this.paginated ? this._renderPagination() : null}`;
+    }
+    render() {
+        const shouldRenderCards = !this.disableMobileTable &&
+            (this._isMobileView ||
+                (this._isTabletView && this.showMobileTableInTablet));
+        return shouldRenderCards
+            ? html `${this._renderCards()}`
+            : html `${this._renderTable()}`;
+    }
+};
+TuixTable.styles = [tableStyles, threeDots];
+__decorate([
+    property({ type: Boolean })
+], TuixTable.prototype, "paginated", void 0);
+__decorate([
+    property({ type: Boolean })
+], TuixTable.prototype, "disableMobileTable", void 0);
+__decorate([
+    property({ type: Boolean })
+], TuixTable.prototype, "showMobileTableInTablet", void 0);
+__decorate([
+    property({ type: Object })
+], TuixTable.prototype, "loader", void 0);
+__decorate([
+    property({ type: Array })
+], TuixTable.prototype, "data", void 0);
+__decorate([
+    property({ type: Array })
+], TuixTable.prototype, "headers", void 0);
+__decorate([
+    property({ type: Array })
+], TuixTable.prototype, "pageSizeOptions", void 0);
+__decorate([
+    property({ type: Number })
+], TuixTable.prototype, "totalItems", void 0);
+__decorate([
+    property({ type: Number })
+], TuixTable.prototype, "currentPage", void 0);
+__decorate([
+    property({ type: Number })
+], TuixTable.prototype, "currentSize", void 0);
+__decorate([
+    property({ type: Boolean })
+], TuixTable.prototype, "isLoadingData", void 0);
+__decorate([
+    state()
+], TuixTable.prototype, "_isTabletView", void 0);
+__decorate([
+    state()
+], TuixTable.prototype, "_isMobileView", void 0);
+__decorate([
+    state()
+], TuixTable.prototype, "_headerPercents", void 0);
+TuixTable = __decorate([
+    customElement('tuix-table')
+], TuixTable);
+export { TuixTable };
+//# sourceMappingURL=TuixTable.js.map

package/dist/src/tuix-table/TuixTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TuixTable.js","sourceRoot":"","sources":["../../../src/tuix-table/TuixTable.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { tableStyles, threeDots } from './TuixTable.styles';\nimport { TextSize, TextVariant } from '../tuix-text/enums/tuix-text.enums';\nimport { IconName } from '../tuix-icon/enums/tuix-icon.enums.js';\nimport { Palette } from '../utils/colors';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\n\nimport type {\n  IDataTableHeader,\n  TablePaginationProps,\n  PaginationEventDetail,\n  ThreeDotsLoaderConfig,\n} from './interfaces/tuix-table.interface.js';\n\n@customElement('tuix-table')\nexport class TuixTable extends LitElement {\n  static styles = [tableStyles, threeDots];\n\n  @property({ type: Boolean }) paginated = false;\n  @property({ type: Boolean }) disableMobileTable = false;\n  @property({ type: Boolean }) showMobileTableInTablet = false;\n  @property({ type: Object }) loader?: ThreeDotsLoaderConfig;\n  @property({ type: Array }) data: Record<string, any>[] = [];\n  @property({ type: Array }) headers: IDataTableHeader<any>[] = [];\n  @property({ type: Array }) pageSizeOptions: number[] = [5, 10, 20];\n\n  @property({ type: Number }) totalItems?: number;\n  @property({ type: Number }) currentPage?: number;\n  @property({ type: Number }) currentSize?: number;\n  @property({ type: Boolean }) isLoadingData = false;\n\n  @state() private _isTabletView = false;\n  @state() private _isMobileView = false;\n  @state() private _headerPercents: number[] = [];\n\n  private _mqTablet?: MediaQueryList;\n  private _mqMobile?: MediaQueryList;\n\n  private _onScreenSizeChange = () => {\n    this._isTabletView = !!this._mqTablet?.matches;\n    this._isMobileView = !!this._mqMobile?.matches;\n  };\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._mqTablet = window.matchMedia(`(max-width:${ScreenSizes.TABLET}px)`);\n    this._mqMobile = window.matchMedia(`(max-width:${ScreenSizes.MOBILE}px)`);\n    this._onScreenSizeChange();\n    this._mqTablet.addEventListener('change', this._onScreenSizeChange);\n    this._mqMobile.addEventListener('change', this._onScreenSizeChange);\n    this._computeHeaderPercents();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._mqTablet?.removeEventListener('change', this._onScreenSizeChange);\n    this._mqMobile?.removeEventListener('change', this._onScreenSizeChange);\n  }\n\n  updated(changedProps: Map<string, any>) {\n    if (changedProps.has('headers')) this._computeHeaderPercents();\n  }\n\n  private get _effectiveTotalItems() {\n    return this.data.length ?? this.totalItems;\n  }\n\n  private get _effectiveCurrentPage() {\n    return this.currentPage ?? 1;\n  }\n\n  private get _effectivePageSize() {\n    return this.currentSize ?? this.pageSizeOptions[0];\n  }\n\n  private get totalPages() {\n    const denom = this._effectivePageSize;\n    return Math.max(1, Math.ceil(this._effectiveTotalItems / denom));\n  }\n\n  private get _paginationProps(): TablePaginationProps {\n    const totalItems = this._effectiveTotalItems;\n    const itemsPerPage = this._effectivePageSize;\n    const startItem = totalItems\n      ? (this._effectiveCurrentPage - 1) * itemsPerPage + 1\n      : 0;\n    const endItem = Math.min(\n      this._effectiveCurrentPage * itemsPerPage,\n      totalItems\n    );\n\n    return {\n      totalItems,\n      currentPage: this._effectiveCurrentPage,\n      itemsPerPage,\n      startItem,\n      endItem,\n      onNextPage: this._nextPage,\n      onPreviousPage: this._prevPage,\n      onItemsPerPageChange: this._setPageSize,\n      isLoading: this.isLoadingData,\n    } as TablePaginationProps;\n  }\n\n  private _nextPage = () => {\n    const next = Math.min(this.totalPages, this._effectiveCurrentPage + 1);\n    const detail: PaginationEventDetail = {\n      page: next,\n      pageSize: this._effectivePageSize,\n    };\n    this.dispatchEvent(\n      new CustomEvent<PaginationEventDetail>('next-page', {\n        detail,\n        bubbles: true,\n        composed: true,\n      })\n    );\n  };\n\n  private _prevPage = () => {\n    const prev = Math.max(1, this._effectiveCurrentPage - 1);\n    const detail: PaginationEventDetail = {\n      page: prev,\n      pageSize: this._effectivePageSize,\n    };\n    this.dispatchEvent(\n      new CustomEvent<PaginationEventDetail>('previous-page', {\n        detail,\n        bubbles: true,\n        composed: true,\n      })\n    );\n  };\n\n  private _setPageSize = (value: number) => {\n    const newSize = Math.max(1, Math.floor(value));\n    const newPage = 1;\n    const detail: PaginationEventDetail = { page: newPage, pageSize: newSize };\n    this.dispatchEvent(\n      new CustomEvent<PaginationEventDetail>('page-size-change', {\n        detail,\n        bubbles: true,\n        composed: true,\n      })\n    );\n  };\n\n  private _paginatedData() {\n    if (!this.paginated) return this.data;\n\n    const page = this._effectiveCurrentPage;\n    const size = this._effectivePageSize;\n    const start = (page - 1) * size;\n    const end = start + size;\n    return this.data.slice(start, end);\n  }\n\n  private _computeHeaderPercents() {\n    const total = this.headers.reduce((acum, header) => acum + header.width, 0);\n    this._headerPercents =\n      total === 0\n        ? this.headers.map(() => 100 / this.headers.length)\n        : this.headers.map(header => (header.width / total) * 100);\n  }\n\n  private _cellStyleString() {\n    return `border-bottom:1px solid ${Palette.NEUTRAL_200};`;\n  }\n\n  private _textVariantColor(header: IDataTableHeader<any>, row: any) {\n    const color = header.cellColor\n      ? header.cellColor(row)\n      : TextVariant.PRIMARY;\n    return color;\n  }\n\n  private _renderHeaderCells() {\n    return html`<tr>\n      ${this.headers.map(\n        (header, idx) => html`<th\n          style=${styleMap({\n            width: `${this._headerPercents[idx]}%`,\n            color: Palette.WHITE,\n          })}\n        >\n          <tuix-text size=${TextSize.Body1} color=${TextVariant.SECONDARY}\n            >${header.name}</tuix-text\n          >\n        </th>`\n      )}\n    </tr>`;\n  }\n\n  private _renderCell(header: IDataTableHeader<any>, row: any) {\n    if (header.isSlot) {\n      const slotName = `${header.slotName}-${row.id}`;\n      return html`<td style=\"${this._cellStyleString()}\">\n        <slot name=${slotName}></slot>\n      </td>`;\n    }\n    const content = row[header.dataKey];\n    return html`<td style=\"${this._cellStyleString()}\">\n      <tuix-text\n        size=${TextSize.Body1}\n        color=${this._textVariantColor(header, row)}\n        >${content}</tuix-text\n      >\n    </td>`;\n  }\n\n  private _renderRows() {\n    const rows = this._paginatedData();\n    return repeat(\n      rows,\n      row => row.id,\n      row =>\n        html`<tr>\n          ${this.headers.map(header => this._renderCell(header, row))}\n        </tr>`\n    );\n  }\n\n  private _onPageSizeChange(e: Event) {\n    const selectedValue = parseInt((e.target as HTMLSelectElement).value);\n    this._setPageSize(selectedValue);\n  }\n\n  private _renderPageSizeOptions() {\n    return this.pageSizeOptions.map(\n      size => html`<option value=${size}>${size}</option>`\n    );\n  }\n\n  private _renderSpinner() {\n    const threeDotsConfiguration = {\n      size: '14px',\n      color: Palette.MAIN,\n      visible: true,\n      ariaLabel: 'Loading',\n      wrapperStyle: {\n        width: '100%',\n        display: 'flex',\n        justifyContent: 'center',\n        padding: '48px 0',\n      },\n      ...this.loader,\n    } as Required<ThreeDotsLoaderConfig>;\n\n    if (!threeDotsConfiguration.visible) return null;\n\n    const wrapperVars: Record<string, string | number> = {\n      '--dot-size': threeDotsConfiguration.size,\n      '--dot-color': threeDotsConfiguration.color,\n      ...threeDotsConfiguration.wrapperStyle,\n    };\n\n    const aria = threeDotsConfiguration.ariaLabel;\n\n    return html`<div class=\"tuix-spinner-wrapper\">\n      <div\n        class=\"three-dots-wrapper\"\n        role=\"status\"\n        aria-label=${aria}\n        style=${styleMap(wrapperVars)}\n      >\n        <span class=\"dot\" aria-hidden=\"true\"></span>\n        <span class=\"dot\" aria-hidden=\"true\"></span>\n        <span class=\"dot\" aria-hidden=\"true\"></span>\n        <span class=\"sr-only\">${aria}</span>\n      </div>\n    </div>`;\n  }\n  private _renderPagination() {\n    const { totalItems, startItem, endItem, itemsPerPage, isLoading } =\n      this._paginationProps;\n\n    return html`<footer\n      style=\"background-color:${Palette.SECTION_BG};\"\n      class=\"table_footer sticky\"\n    >\n      <div class=\"items-per-page\">\n        <tuix-text size=${TextSize.Body2}>Items per page</tuix-text>\n        <div\n          style=\"outline: 1px solid ${Palette.NEUTRAL_200};\"\n          class=\"dropdown_container\"\n        >\n          <select\n            class=\"items-per-page-dropdown\"\n            .value=${String(itemsPerPage)}\n            @change=${this._onPageSizeChange}\n            ?disabled=${isLoading}\n          >\n            ${this._renderPageSizeOptions()}\n          </select>\n          <tuix-icon\n            class=\"arrow-icon\"\n            name=${IconName.CHEVRON_DOWN}\n          ></tuix-icon>\n        </div>\n      </div>\n\n      <div class=\"navigation\">\n        <tuix-text size=${TextSize.Body2}\n          >${startItem} - ${endItem} of ${totalItems}</tuix-text\n        >\n        <div class=\"buttons\">\n          <tuix-icon\n            class=\"arrow-icon\"\n            name=${IconName.CHEVRON_LEFT}\n            @click=${this._prevPage}\n          ></tuix-icon>\n          <tuix-icon\n            class=\"arrow-icon\"\n            name=${IconName.CHEVRON_RIGHT}\n            @click=${this._nextPage}\n          ></tuix-icon>\n        </div>\n      </div>\n    </footer>`;\n  }\n\n  private _renderTable() {\n    return html`<table>\n        <thead style=\"background-color: ${Palette.MAIN}\">\n          ${this._renderHeaderCells()}\n        </thead>\n        ${this.isLoadingData\n          ? html`<tbody>\n              <tr>\n                <td colspan=${this.headers.length}>${this._renderSpinner()}</td>\n              </tr>\n            </tbody>`\n          : html`<tbody>\n              ${this._renderRows()}\n            </tbody>`}\n      </table>\n      ${this.paginated ? this._renderPagination() : null}`;\n  }\n\n  private _renderCards() {\n    const rows = this._paginatedData();\n    return html`<div class=\"mobile_table\">\n        ${this.isLoadingData\n          ? this._renderSpinner()\n          : rows.map(\n              row => html`<div\n                style=\"border-bottom: 2px solid ${Palette.MAIN};\"\n                class=\"table_entity\"\n              >\n                ${this.headers.map(\n                  header => html`<div\n                    class=\"table_row\"\n                    style=\"border-bottom:1px solid ${Palette.NEUTRAL_200};\"\n                  >\n                    <div\n                      class=\"header\"\n                      style=\"background-color:${Palette.SECTION_BG};\"\n                    >\n                      <tuix-text\n                        size=${TextSize.Body1}\n                        color=${TextVariant.PRIMARY}\n                        >${header.name}</tuix-text\n                      >\n                    </div>\n                    <div class=\"content\">\n                      ${header.isSlot\n                        ? html`<slot\n                            name=\"${header.slotName}-${row.id}\"\n                          ></slot>`\n                        : html`<tuix-text size=${TextSize.Body1}\n                            >${row[header.dataKey]}</tuix-text\n                          >`}\n                    </div>\n                  </div>`\n                )}\n              </div>`\n            )}\n      </div>\n      ${this.paginated ? this._renderPagination() : null}`;\n  }\n\n  render() {\n    const shouldRenderCards =\n      !this.disableMobileTable &&\n      (this._isMobileView ||\n        (this._isTabletView && this.showMobileTableInTablet));\n\n    return shouldRenderCards\n      ? html`${this._renderCards()}`\n      : html`${this._renderTable()}`;\n  }\n}\n"]}

package/dist/src/tuix-table/TuixTable.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const tableStyles: import("lit").CSSResult;
+export declare const threeDots: import("lit").CSSResult;

package/dist/src/tuix-table/TuixTable.styles.js

@@ -0,0 +1,198 @@
+import { css } from 'lit';
+import { ScreenSizes } from '../utils/screenSizes.enum.js';
+export const tableStyles = css `
+  :host {
+    display: block;
+    width: 100%;
+  }
+
+  .table_wrapper {
+    width: 100%;
+    overflow-x: auto;
+  }
+
+  table {
+    min-width: 650px;
+    table-layout: fixed;
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  thead th {
+    box-sizing: border-box;
+    padding: 8px;
+    text-align: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  tbody tr td {
+    box-sizing: border-box;
+    height: 52px;
+    padding: 6px 8px;
+    text-align: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  ::slotted(*) {
+    display: inline-flex;
+    align-items: center;
+    margin-right: 8px;
+    gap: 10px;
+  }
+
+  .dropdown_container {
+    position: relative;
+    border-radius: 4px;
+  }
+
+  .dropdown_container .items-per-page-dropdown {
+    width: 55px;
+    border: none;
+    background-color: transparent;
+    padding: 8px;
+    cursor: pointer;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+  }
+
+  .dropdown_container .items-per-page-dropdown:focus-visible {
+    border: none;
+    outline: none;
+  }
+
+  .dropdown_container .arrow-icon {
+    position: absolute;
+    right: 8px;
+    bottom: 8px;
+    cursor: pointer;
+    pointer-events: none;
+  }
+
+  footer.table_footer {
+    height: 48px;
+    padding: 8px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+  }
+
+  footer.table_footer .items-per-page {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  footer.table_footer .navigation {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  footer.table_footer .navigation .buttons {
+    display: flex;
+    gap: 8px;
+    cursor: pointer;
+  }
+
+  .mobile_table {
+    display: none;
+  }
+
+  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
+    .mobile_table {
+      display: block;
+    }
+
+    footer.table_footer {
+      align-items: flex-start;
+      gap: 8px;
+    }
+
+    .mobile_table .table_row {
+      display: flex;
+      min-height: 40px;
+    }
+
+    .mobile_table .table_row > * {
+      padding: 0 16px;
+      width: 50%;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+    }
+  }
+`;
+export const threeDots = css `
+  .tuix-spinner-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 24px 0;
+  }
+
+  .three-dots-wrapper {
+    display: inline-flex;
+    gap: calc(var(--dot-size) * 0.5);
+    align-items: center;
+    justify-content: center;
+    position: relative;
+  }
+  .three-dots-wrapper .dot {
+    width: var(--dot-size);
+    height: var(--dot-size);
+    background: var(--dot-color);
+    border-radius: 50%;
+    display: inline-block;
+    animation: threeDots 0.9s infinite ease-in-out both;
+  }
+  .three-dots-wrapper .dot:nth-child(2) {
+    animation-delay: 0.15s;
+  }
+  .three-dots-wrapper .dot:nth-child(3) {
+    animation-delay: 0.3s;
+  }
+
+  @keyframes threeDots {
+    0%,
+    80%,
+    100% {
+      transform: scale(0.6);
+      opacity: 0.6;
+    }
+    40% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  .sr-only {
+    border: 0;
+    clip: rect(1px, 1px, 1px, 1px);
+    -webkit-clip-path: inset(50%);
+    clip-path: inset(50%);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+    white-space: nowrap;
+  }
+
+  .clientsLoader,
+  .mobileClientsLoader,
+  .tabletClientsLoader {
+    display: flex;
+    justify-content: center;
+    padding: 16px 0;
+  }
+`;
+//# sourceMappingURL=TuixTable.styles.js.map

package/dist/src/tuix-table/TuixTable.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TuixTable.styles.js","sourceRoot":"","sources":["../../../src/tuix-table/TuixTable.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCAyGS,WAAW,CAAC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;CAwBxD,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgE3B,CAAC","sourcesContent":["import { css } from 'lit';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\n\nexport const tableStyles = css`\n  :host {\n    display: block;\n    width: 100%;\n  }\n\n  .table_wrapper {\n    width: 100%;\n    overflow-x: auto;\n  }\n\n  table {\n    min-width: 650px;\n    table-layout: fixed;\n    width: 100%;\n    border-collapse: collapse;\n  }\n\n  thead th {\n    box-sizing: border-box;\n    padding: 8px;\n    text-align: left;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  tbody tr td {\n    box-sizing: border-box;\n    height: 52px;\n    padding: 6px 8px;\n    text-align: left;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  ::slotted(*) {\n    display: inline-flex;\n    align-items: center;\n    margin-right: 8px;\n    gap: 10px;\n  }\n\n  .dropdown_container {\n    position: relative;\n    border-radius: 4px;\n  }\n\n  .dropdown_container .items-per-page-dropdown {\n    width: 55px;\n    border: none;\n    background-color: transparent;\n    padding: 8px;\n    cursor: pointer;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n  }\n\n  .dropdown_container .items-per-page-dropdown:focus-visible {\n    border: none;\n    outline: none;\n  }\n\n  .dropdown_container .arrow-icon {\n    position: absolute;\n    right: 8px;\n    bottom: 8px;\n    cursor: pointer;\n    pointer-events: none;\n  }\n\n  footer.table_footer {\n    height: 48px;\n    padding: 8px;\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    box-sizing: border-box;\n  }\n\n  footer.table_footer .items-per-page {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  footer.table_footer .navigation {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  footer.table_footer .navigation .buttons {\n    display: flex;\n    gap: 8px;\n    cursor: pointer;\n  }\n\n  .mobile_table {\n    display: none;\n  }\n\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .mobile_table {\n      display: block;\n    }\n\n    footer.table_footer {\n      align-items: flex-start;\n      gap: 8px;\n    }\n\n    .mobile_table .table_row {\n      display: flex;\n      min-height: 40px;\n    }\n\n    .mobile_table .table_row > * {\n      padding: 0 16px;\n      width: 50%;\n      text-overflow: ellipsis;\n      overflow: hidden;\n      display: flex;\n      align-items: center;\n    }\n  }\n`;\n\nexport const threeDots = css`\n  .tuix-spinner-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 24px 0;\n  }\n\n  .three-dots-wrapper {\n    display: inline-flex;\n    gap: calc(var(--dot-size) * 0.5);\n    align-items: center;\n    justify-content: center;\n    position: relative;\n  }\n  .three-dots-wrapper .dot {\n    width: var(--dot-size);\n    height: var(--dot-size);\n    background: var(--dot-color);\n    border-radius: 50%;\n    display: inline-block;\n    animation: threeDots 0.9s infinite ease-in-out both;\n  }\n  .three-dots-wrapper .dot:nth-child(2) {\n    animation-delay: 0.15s;\n  }\n  .three-dots-wrapper .dot:nth-child(3) {\n    animation-delay: 0.3s;\n  }\n\n  @keyframes threeDots {\n    0%,\n    80%,\n    100% {\n      transform: scale(0.6);\n      opacity: 0.6;\n    }\n    40% {\n      transform: scale(1);\n      opacity: 1;\n    }\n  }\n\n  .sr-only {\n    border: 0;\n    clip: rect(1px, 1px, 1px, 1px);\n    -webkit-clip-path: inset(50%);\n    clip-path: inset(50%);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    width: 1px;\n    white-space: nowrap;\n  }\n\n  .clientsLoader,\n  .mobileClientsLoader,\n  .tabletClientsLoader {\n    display: flex;\n    justify-content: center;\n    padding: 16px 0;\n  }\n`;\n"]}

package/dist/src/tuix-table/interfaces/tuix-table.interface.d.ts

@@ -0,0 +1,45 @@
+export interface IDataTableHeader<TRowData = Record<string, unknown>> {
+    cellColor?: (rowData: TRowData) => string | undefined;
+    isSlot?: boolean;
+    slotName?: string;
+    name?: string;
+    dataKey: Extract<keyof TRowData, string>;
+    width: number;
+}
+export interface TablePaginationProps {
+    totalItems: number;
+    currentPage: number;
+    itemsPerPage: number;
+    startItem: number;
+    endItem: number;
+    onNextPage: () => void;
+    onPreviousPage: () => void;
+    onItemsPerPageChange: (newPageSize: number) => void;
+    isLoading?: boolean;
+    stickyInTablet?: boolean;
+}
+export interface ThreeDotsLoaderConfig {
+    size?: string;
+    color?: string;
+    visible?: boolean;
+    ariaLabel?: string;
+    wrapperStyle?: Record<string, string | number>;
+}
+export interface TuixTableElement<TRowData = any> extends HTMLElement {
+    data: TRowData[];
+    headers: IDataTableHeader<TRowData>[];
+    totalItems?: number;
+    currentPage?: number;
+    currentSize?: number;
+    isLoadingData?: boolean;
+    paginated?: boolean;
+    showMobileTableInTablet?: boolean;
+    disableMobileTable?: boolean;
+    pageSizeOptions?: number[];
+    loader?: ThreeDotsLoaderConfig;
+}
+export interface PaginationEventDetail {
+    page: number;
+    pageSize: number;
+}
+export type TuixPaginationEvent = CustomEvent<PaginationEventDetail>;

package/dist/src/tuix-table/interfaces/tuix-table.interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=tuix-table.interface.js.map