tuix-webcomponents 0.93.0 → 0.95.0

package/dist/src/index.d.ts

@@ -17,7 +17,7 @@ export { TuixCheckbox } from './tuix-checkbox/TuixCheckbox.js';
 export { TuixRadioButton } from './tuix-radio-button/TuixRadioButton.js';
 export { TuixToggleButton } from './tuix-toggle-button/TuixToggleButton.js';
 export { TuixTable } from './tuix-table/TuixTable.js';
-export type { IDataTableHeader, PaginationEventDetail, ThreeDotsLoaderConfig, TuixPaginationEvent, TuixTableElement, } from './tuix-table/interfaces/tuix-table.interface.js';
+export type { IDataTableHeader, PaginationEventDetail, SortDirection, SortEventDetail, ThreeDotsLoaderConfig, TuixPaginationEvent, TuixSortEvent, TuixTableElement, } from './tuix-table/interfaces/tuix-table.interface.js';
 export { TuixToast } from './tuix-toast/TuixToast.js';
 export { TuixModal } from './tuix-modal/TuixModal.js';
 export { ToastType } from './tuix-toast/enums/tuix-toast.enums.js';

package/dist/src/react/index.d.ts

@@ -1,6 +1,6 @@
 import { type EventName } from '@lit/react';
 import { TuixText as WrappedTuixText, TuixIcon as WrappedTuixIcon, TuixButton as WrappedTuixButton, TuixPaper as WrappedTuixPaper, TuixIconButton as WrappedTuixIconButton, TuixLink as WrappedTuixLink, TuixInput as WrappedTuixInput, TuixDropdown as WrappedTuixDropdown, TuixCheckbox as WrappedTuixCheckbox, TuixRadioButton as WrappedTuixRadioButton, TuixToggleButton as WrappedTuixToggleButton, TuixTable as WrappedTuixTable, TuixToast as WrappedTuixToast, TuixModal as WrappedTuixModal } from '../index.js';
-import type { DetailValue, DetailValueCheckbox, PaginationEventDetail, TuixDropdownPlainOption } from '../index.js';
+import type { DetailValue, DetailValueCheckbox, PaginationEventDetail, SortEventDetail, TuixDropdownPlainOption } from '../index.js';
 export declare const TuixText: import("@lit/react").ReactWebComponent<WrappedTuixText, {}>;
 export declare const TuixIcon: import("@lit/react").ReactWebComponent<WrappedTuixIcon, {}>;
 export declare const TuixButton: import("@lit/react").ReactWebComponent<WrappedTuixButton, {
@@ -33,6 +33,7 @@ export declare const TuixTable: import("@lit/react").ReactWebComponent<WrappedTu
     onNextPage: EventName<CustomEvent<PaginationEventDetail>>;
     onPreviousPage: EventName<CustomEvent<PaginationEventDetail>>;
     onPageSizeChange: EventName<CustomEvent<PaginationEventDetail>>;
+    onSort: EventName<CustomEvent<SortEventDetail>>;
 }>;
 export declare const TuixToast: import("@lit/react").ReactWebComponent<WrappedTuixToast, {
     onClose: EventName<CustomEvent<undefined>>;

package/dist/src/react/index.js

@@ -94,6 +94,7 @@ export const TuixTable = createComponent({
         onNextPage: 'next-page',
         onPreviousPage: 'previous-page',
         onPageSizeChange: 'page-size-change',
+        onSort: 'sort',
     },
 });
 export const TuixToast = createComponent({

package/dist/src/tuix-icon/TuixIcon.icons.js

@@ -410,5 +410,16 @@ export const iconContentMap = {
   <path d="M17 20a3 3 0 1 0 0-6 3 3 0 0 0 0 6M7 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6M21 7a3 3 0 1 0-6 0 3 3 0 0 0 6 0M10.5 10.5l4 4" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
   <rect width="8" height="8" x="3" y="3" rx="2" stroke="#121212" stroke-width="2"/>
   <path d="M7 12v3M12 7h3" stroke="#121212" stroke-width="2" stroke-linecap="round"/>
+  </svg>`,
+    [IconName.PLAY_OUTLINE]: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5 3L19 12L5 21V3Z" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>`,
+    [IconName.REFRESH]: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M23 4V10H17" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M1 20V14H7" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M3.506 8.998C4.013 7.564 4.875 6.283 6.012 5.273C7.148 4.263 8.522 3.557 10.004 3.222C11.487 2.886 13.031 2.932 14.491 3.354C15.952 3.777 17.281 4.562 18.356 5.638L23 10M1 14L5.636 18.358C6.711 19.433 8.04 20.218 9.501 20.641C10.961 21.063 12.505 21.109 13.988 20.773C15.471 20.438 16.844 19.732 17.981 18.722C19.117 17.712 19.979 16.431 20.486 14.998" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>`,
+    [IconName.SHIELD]: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 22C12 22 20 18 20 12V5L12 2L4 5V12C4 18 12 22 12 22Z" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
   </svg>`,
 };

package/dist/src/tuix-icon/enums/tuix-icon.enums.d.ts

@@ -90,5 +90,8 @@ export declare enum IconName {
     FILE_TEXT = "file-text",
     HIGHLIGHT = "highlight",
     MCP_LOGO = "mcp-logo",
-    ENDPOINTS = "endpoints"
+    ENDPOINTS = "endpoints",
+    PLAY_OUTLINE = "play-outline",
+    REFRESH = "refresh",
+    SHIELD = "shield"
 }

package/dist/src/tuix-icon/enums/tuix-icon.enums.js

@@ -98,4 +98,7 @@ export var IconName;
     IconName["HIGHLIGHT"] = "highlight";
     IconName["MCP_LOGO"] = "mcp-logo";
     IconName["ENDPOINTS"] = "endpoints";
+    IconName["PLAY_OUTLINE"] = "play-outline";
+    IconName["REFRESH"] = "refresh";
+    IconName["SHIELD"] = "shield";
 })(IconName || (IconName = {}));

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

@@ -1,9 +1,10 @@
 import { LitElement } from 'lit';
 import '../tuix-icon/TuixIcon.js';
 import '../tuix-text/TuixText.js';
-import type { IDataTableHeader, ThreeDotsLoaderConfig } from './interfaces/tuix-table.interface.js';
+import type { IDataTableHeader, SortDirection, ThreeDotsLoaderConfig } from './interfaces/tuix-table.interface.js';
 export declare class TuixTable extends LitElement {
     static styles: import("lit").CSSResult[];
+    dark: boolean;
     paginated: boolean;
     disableMobileTable: boolean;
     showMobileTableInTablet: boolean;
@@ -15,6 +16,8 @@ export declare class TuixTable extends LitElement {
     currentPage?: number;
     currentSize?: number;
     isLoadingData: boolean;
+    sortBy?: string;
+    sortDirection: SortDirection;
     private _isTabletView;
     private _isMobileView;
     private _headerPercents;
@@ -32,9 +35,13 @@ export declare class TuixTable extends LitElement {
     private _nextPage;
     private _prevPage;
     private _setPageSize;
+    private _sort;
     private _computeHeaderPercents;
-    private _cellStyleString;
+    private _cellBackgroundColor;
     private _textVariantColor;
+    private _renderSortIcons;
+    private _ariaSort;
+    private _onHeaderKeyDown;
     private _renderHeaderCells;
     private _renderCell;
     private _renderRows;
@@ -43,6 +50,7 @@ export declare class TuixTable extends LitElement {
     private _renderSpinner;
     private _renderPagination;
     private _renderTable;
+    private _renderCard;
     private _renderCards;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -1,18 +1,21 @@
 import { __decorate } from "tslib";
-import { LitElement, html } from 'lit';
+import { LitElement, html, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
 import '../tuix-icon/TuixIcon.js';
 import '../tuix-text/TuixText.js';
-import { tableStyles, threeDots } from './TuixTable.styles';
+import { tableHostStyles, tableStyles, threeDots } from './TuixTable.styles';
 import { TextSize, TextVariant } from '../tuix-text/enums/tuix-text.enums';
-import { IconName } from '../tuix-icon/enums/tuix-icon.enums.js';
+import { IconName, IconSizeVariant, } from '../tuix-icon/enums/tuix-icon.enums.js';
 import { Palette } from '../utils/colors';
+import { DarkPalette } from '../utils/darkColors';
 import { ScreenSizes } from '../utils/screenSizes.enum';
 let TuixTable = class TuixTable extends LitElement {
     constructor() {
         super(...arguments);
+        this.dark = false;
         this.paginated = false;
         this.disableMobileTable = false;
         this.showMobileTableInTablet = false;
@@ -20,6 +23,7 @@ let TuixTable = class TuixTable extends LitElement {
         this.headers = [];
         this.pageSizeOptions = [5, 10, 20];
         this.isLoadingData = false;
+        this.sortDirection = 'asc';
         this._isTabletView = false;
         this._isMobileView = false;
         this._headerPercents = [];
@@ -28,7 +32,7 @@ let TuixTable = class TuixTable extends LitElement {
             this._isMobileView = !!this._mqMobile?.matches;
         };
         this._nextPage = () => {
-            if (this.currentPage === this.totalPages)
+            if (this._effectiveCurrentPage >= this.totalPages)
                 return;
             const next = Math.min(this.totalPages, this._effectiveCurrentPage + 1);
             const detail = {
@@ -42,7 +46,7 @@ let TuixTable = class TuixTable extends LitElement {
             }));
         };
         this._prevPage = () => {
-            if (this.currentPage === 1)
+            if (this._effectiveCurrentPage <= 1)
                 return;
             const prev = Math.max(1, this._effectiveCurrentPage - 1);
             const detail = {
@@ -66,7 +70,7 @@ let TuixTable = class TuixTable extends LitElement {
             }));
         };
     }
-    static { this.styles = [tableStyles, threeDots]; }
+    static { this.styles = [tableHostStyles, tableStyles, threeDots]; }
     connectedCallback() {
         super.connectedCallback();
         this._mqTablet = window.matchMedia(`(max-width:${ScreenSizes.TABLET}px)`);
@@ -115,8 +119,21 @@ let TuixTable = class TuixTable extends LitElement {
             onPreviousPage: this._prevPage,
             onItemsPerPageChange: this._setPageSize,
             isLoading: this.isLoadingData,
+            stickyInTablet: this.showMobileTableInTablet,
         };
     }
+    _sort(sortKey) {
+        const isActive = this.sortBy === sortKey;
+        const detail = {
+            sortKey,
+            sortDirection: isActive && this.sortDirection === 'asc' ? 'desc' : 'asc',
+        };
+        this.dispatchEvent(new CustomEvent('sort', {
+            detail,
+            bubbles: true,
+            composed: true,
+        }));
+    }
     _computeHeaderPercents() {
         const total = this.headers.reduce((acum, header) => acum + header.width, 0);
         this._headerPercents =
@@ -124,42 +141,90 @@ let TuixTable = class TuixTable extends LitElement {
                 ? this.headers.map(() => 100 / this.headers.length)
                 : this.headers.map(header => (header.width / total) * 100);
     }
-    _cellStyleString() {
-        return `border-bottom:1px solid ${Palette.NEUTRAL_200};`;
+    _cellBackgroundColor(header, row) {
+        return header.cellBackgroundColor?.(row) || '';
     }
     _textVariantColor(header, row) {
-        const color = header.cellColor
-            ? header.cellColor(row)
-            : TextVariant.PRIMARY;
-        return color;
+        return header.cellColor?.(row) ?? TextVariant.PRIMARY;
+    }
+    _renderSortIcons(header) {
+        if (!header.sortKey)
+            return nothing;
+        const isActive = this.sortBy === header.sortKey;
+        return html `<span class="sort-icons" aria-hidden="true">
+      <tuix-icon
+        ?dark=${this.dark}
+        name=${IconName.CHEVRON_UP}
+        size=${IconSizeVariant.MEDIUM}
+        color=${isActive && this.sortDirection === 'asc'
+            ? TextVariant.SECTION
+            : TextVariant.STROKE}
+      ></tuix-icon>
+      <tuix-icon
+        ?dark=${this.dark}
+        name=${IconName.CHEVRON_DOWN}
+        size=${IconSizeVariant.MEDIUM}
+        color=${isActive && this.sortDirection === 'desc'
+            ? TextVariant.SECTION
+            : TextVariant.STROKE}
+      ></tuix-icon>
+    </span>`;
+    }
+    _ariaSort(header) {
+        if (!this.sortBy || this.sortBy !== header.sortKey)
+            return nothing;
+        return this.sortDirection === 'asc' ? 'ascending' : 'descending';
+    }
+    _onHeaderKeyDown(event, sortKey) {
+        if (event.key !== 'Enter' && event.key !== ' ')
+            return;
+        event.preventDefault();
+        this._sort(sortKey);
     }
     _renderHeaderCells() {
         return html `<tr>
-      ${this.headers.map((header, idx) => html `<th
-          style=${styleMap({
-            width: `${this._headerPercents[idx]}%`,
-            color: Palette.WHITE,
-        })}
+      ${this.headers.map((header, idx) => {
+            const sortKey = header.sortKey;
+            return html `<th
+          class=${classMap({ sortable: !!sortKey })}
+          style=${styleMap({ width: `${this._headerPercents[idx]}%` })}
+          tabindex=${sortKey ? 0 : nothing}
+          aria-sort=${this._ariaSort(header)}
+          @click=${sortKey ? () => this._sort(sortKey) : nothing}
+          @keydown=${sortKey
+                ? (event) => this._onHeaderKeyDown(event, sortKey)
+                : nothing}
         >
-          <tuix-text size=${TextSize.Body1} color=${TextVariant.SECONDARY}
-            >${header.name}</tuix-text
-          >
-        </th>`)}
+          <span class="header-cell">
+            <tuix-text
+              class="header-name"
+              ?dark=${this.dark}
+              size=${TextSize.Body1}
+              color=${TextVariant.SECTION}
+              >${header.name}</tuix-text
+            >
+            ${this._renderSortIcons(header)}
+          </span>
+        </th>`;
+        })}
     </tr>`;
     }
     _renderCell(header, row) {
+        const cellStyle = styleMap({
+            backgroundColor: this._cellBackgroundColor(header, row) || undefined,
+        });
         if (header.isSlot) {
             const slotName = `${header.slotName}-${row.id}`;
-            return html `<td style="${this._cellStyleString()}">
+            return html `<td style=${cellStyle}>
         <slot name=${slotName}></slot>
       </td>`;
         }
-        const content = row[header.dataKey];
-        return html `<td style="${this._cellStyleString()}">
+        return html `<td style=${cellStyle}>
       <tuix-text
-        size=${TextSize.Body1}
+        ?dark=${this.dark}
+        size=${TextSize.Body2}
         color=${this._textVariantColor(header, row)}
-        >${content}</tuix-text
+        >${row[header.dataKey]}</tuix-text
       >
     </td>`;
     }
@@ -179,7 +244,7 @@ let TuixTable = class TuixTable extends LitElement {
     _renderSpinner() {
         const threeDotsConfiguration = {
             size: '14px',
-            color: Palette.MAIN,
+            color: this.dark ? DarkPalette.MAIN : Palette.MAIN,
             visible: true,
             ariaLabel: 'Loading',
             wrapperStyle: {
@@ -213,17 +278,18 @@ let TuixTable = class TuixTable extends LitElement {
     </div>`;
     }
     _renderPagination() {
-        const { totalItems, startItem, endItem, itemsPerPage, isLoading } = this._paginationProps;
+        const { totalItems, startItem, endItem, itemsPerPage, isLoading, stickyInTablet, } = this._paginationProps;
+        const iconSize = this._isMobileView
+            ? IconSizeVariant.SMALL
+            : IconSizeVariant.MEDIUM;
         return html `<footer
-      style="background-color:${Palette.SECTION_BG};"
-      class="table_footer sticky"
+      class=${classMap({ table_footer: true, sticky: !!stickyInTablet })}
     >
       <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"
+        <tuix-text ?dark=${this.dark} size=${TextSize.Body2}
+          >Items per page</tuix-text
         >
+        <div class="dropdown_container">
           <select
             class="items-per-page-dropdown"
             .value=${String(itemsPerPage)}
@@ -234,81 +300,90 @@ let TuixTable = class TuixTable extends LitElement {
           </select>
           <tuix-icon
             class="arrow-icon"
+            ?dark=${this.dark}
             name=${IconName.CHEVRON_DOWN}
           ></tuix-icon>
         </div>
       </div>
 
       <div class="navigation">
-        <tuix-text size=${TextSize.Body2}
+        <tuix-text ?dark=${this.dark} size=${TextSize.Body2}
           >${startItem} - ${endItem} of ${totalItems}</tuix-text
         >
         <div class="buttons">
           <tuix-icon
-            class="arrow-icon"
+            class="arrow"
+            ?dark=${this.dark}
             name=${IconName.CHEVRON_LEFT}
-            @click=${this._prevPage}
+            size=${iconSize}
+            @click=${startItem > 1 ? this._prevPage : nothing}
           ></tuix-icon>
           <tuix-icon
-            class="arrow-icon"
+            class="arrow"
+            ?dark=${this.dark}
             name=${IconName.CHEVRON_RIGHT}
-            @click=${this._nextPage}
+            size=${iconSize}
+            @click=${totalItems !== endItem ? this._nextPage : nothing}
           ></tuix-icon>
         </div>
       </div>
     </footer>`;
     }
     _renderTable() {
-        return html `<table>
-        <thead style="background-color: ${Palette.MAIN}">
-          ${this._renderHeaderCells()}
-        </thead>
-        ${this.isLoadingData
+        return html `<div class="table_wrapper">
+        <table>
+          <thead>
+            ${this._renderHeaderCells()}
+          </thead>
+          ${this.isLoadingData
             ? html `<tbody>
-              <tr>
-                <td colspan=${this.headers.length}>${this._renderSpinner()}</td>
-              </tr>
-            </tbody>`
+                <tr>
+                  <td colspan=${this.headers.length}>
+                    ${this._renderSpinner()}
+                  </td>
+                </tr>
+              </tbody>`
             : html `<tbody>
-              ${this._renderRows()}
-            </tbody>`}
-      </table>
+                ${this._renderRows()}
+              </tbody>`}
+        </table>
+      </div>
       ${this.paginated ? this._renderPagination() : null}`;
     }
+    _renderCard(row) {
+        return html `<div class="table_entity">
+      ${this.headers.map(header => html `<div
+          class="table_row"
+          style=${styleMap({
+            backgroundColor: this._cellBackgroundColor(header, row) || undefined,
+        })}
+        >
+          <div class="header">
+            <tuix-text
+              ?dark=${this.dark}
+              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
+                  ?dark=${this.dark}
+                  size=${TextSize.Body2}
+                  color=${this._textVariantColor(header, row)}
+                  >${row[header.dataKey]}</tuix-text
+                >`}
+          </div>
+        </div>`)}
+    </div>`;
+    }
     _renderCards() {
-        const rows = this.data;
         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>`)}
+            : this.data.map(row => this._renderCard(row))}
       </div>
       ${this.paginated ? this._renderPagination() : null}`;
     }
@@ -321,6 +396,9 @@ let TuixTable = class TuixTable extends LitElement {
             : html `${this._renderTable()}`;
     }
 };
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TuixTable.prototype, "dark", void 0);
 __decorate([
     property({ type: Boolean })
 ], TuixTable.prototype, "paginated", void 0);
@@ -354,6 +432,12 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], TuixTable.prototype, "isLoadingData", void 0);
+__decorate([
+    property({ type: String })
+], TuixTable.prototype, "sortBy", void 0);
+__decorate([
+    property({ type: String })
+], TuixTable.prototype, "sortDirection", void 0);
 __decorate([
     state()
 ], TuixTable.prototype, "_isTabletView", void 0);

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

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