tuix-webcomponents 0.92.0 → 0.94.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

@@ -349,6 +349,17 @@ export const iconContentMap = {
     [IconName.BOOK]: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
   <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
   <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>`,
+    [IconName.BOOK_PLUS]: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M12 7v6m-8 6.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5A2.5 2.5 0 0 1 4 19.5m0 0A2.5 2.5 0 0 1 6.5 17H20M9 10h6" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>`,
+    [IconName.BOOKS]: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M5 7a2 2 0 0 0-2 2v11" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M5.803 18H5a2 2 0 1 0 0 4h9.5a.5.5 0 0 0 .5-.5V21m-6-6V4a2 2 0 0 1 2-2h9.5a.5.5 0 0 1 .5.5v14a.5.5 0 0 1-.5.5H11a2 2 0 0 1-2-2m0 0a2 2 0 0 1 2-2h10" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>`,
+    [IconName.BOOK_SEARCH]: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M11 22H5.5a2.5 2.5 0 0 1 0-5h4.501M21 22l-1.879-1.878" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M3 19.5v-15A2.5 2.5 0 0 1 5.5 2H18a1 1 0 0 1 1 1v8M17 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
   </svg>`,
     [IconName.MORE_HORIZONTAL]: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
   <path d="M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2M19 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2M5 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

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

@@ -77,6 +77,9 @@ export declare enum IconName {
     CHAT = "chat",
     MESSAGE_CIRCLE = "message-circle",
     BOOK = "book",
+    BOOK_PLUS = "book-plus",
+    BOOKS = "books",
+    BOOK_SEARCH = "book-search",
     MORE_HORIZONTAL = "more-horizontal",
     BOT = "bot",
     SCROLL_DOWN = "scroll-down",

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

@@ -84,6 +84,9 @@ export var IconName;
     IconName["CHAT"] = "chat";
     IconName["MESSAGE_CIRCLE"] = "message-circle";
     IconName["BOOK"] = "book";
+    IconName["BOOK_PLUS"] = "book-plus";
+    IconName["BOOKS"] = "books";
+    IconName["BOOK_SEARCH"] = "book-search";
     IconName["MORE_HORIZONTAL"] = "more-horizontal";
     IconName["BOT"] = "bot";
     IconName["SCROLL_DOWN"] = "scroll-down";

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;