tuix-webcomponents 0.0.32 → 0.0.33

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.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';
+import { tableHostStyles, tableStyles, threeDots } from './TuixTable.styles';
+import { TextSize, TextVariant } from '../tuix-text/enums/tuix-text.enums';
+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;

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

@@ -1,11 +1,43 @@
-import { css } from 'lit';
-import { ScreenSizes } from '../utils/screenSizes.enum.js';
-export const tableStyles = css `
+import { css, unsafeCSS } from 'lit';
+import { ScreenSizes } from '../utils/screenSizes.enum';
+import { Palette } from '../utils/colors';
+import { DarkPalette } from '../utils/darkColors';
+import { LINK_TEXT_COLOR_VAR_NAME } from '../tuix-link/TuixLink.styles';
+export const tableHostStyles = css `
   :host {
     display: block;
     width: 100%;
+
+    --t-table-header-bg: ${unsafeCSS(Palette.PRIMARY_100)};
+    --t-table-header-text-color: ${unsafeCSS(Palette.PRIMARY_700)};
+    --t-table-header-focus-color: ${unsafeCSS(Palette.MAIN)};
+    --t-table-cell-bg: ${unsafeCSS(Palette.WHITE)};
+    --t-table-cell-border-color: ${unsafeCSS(Palette.NEUTRAL_200)};
+    --t-table-entity-border-color: ${unsafeCSS(Palette.MAIN)};
+    --t-table-row-border-color: ${unsafeCSS(Palette.NEUTRAL_200)};
+    --t-table-mobile-header-bg: ${unsafeCSS(Palette.SECTION_BG)};
+    --t-table-footer-bg: ${unsafeCSS(Palette.WHITE)};
+    --t-table-dropdown-stroke: ${unsafeCSS(Palette.NEUTRAL_200)};
+    --t-table-dropdown-text-color: ${unsafeCSS(Palette.BLACK)};
+    --t-table-dropdown-option-bg: ${unsafeCSS(Palette.WHITE)};
   }
 
+  :host([dark]) {
+    --t-table-header-bg: ${unsafeCSS(DarkPalette.PRIMARY_800)};
+    --t-table-header-text-color: ${unsafeCSS(DarkPalette.WHITE)};
+    --t-table-header-focus-color: ${unsafeCSS(DarkPalette.PRIMARY_300)};
+    --t-table-cell-bg: ${unsafeCSS(DarkPalette.BLACK)};
+    --t-table-cell-border-color: ${unsafeCSS(DarkPalette.PRIMARY_800)};
+    --t-table-entity-border-color: ${unsafeCSS(DarkPalette.PRIMARY_800)};
+    --t-table-row-border-color: ${unsafeCSS(DarkPalette.ELEVATION_4)};
+    --t-table-mobile-header-bg: ${unsafeCSS(DarkPalette.PRIMARY_800)};
+    --t-table-footer-bg: ${unsafeCSS(DarkPalette.PRIMARY_900)};
+    --t-table-dropdown-stroke: ${unsafeCSS(DarkPalette.PRIMARY_800)};
+    --t-table-dropdown-text-color: ${unsafeCSS(DarkPalette.PRIMARY_50)};
+    --t-table-dropdown-option-bg: ${unsafeCSS(DarkPalette.ELEVATION_2)};
+  }
+`;
+export const tableStyles = css `
   .table_wrapper {
     width: 100%;
     overflow-x: auto;
@@ -18,23 +50,68 @@ export const tableStyles = css `
     border-collapse: collapse;
   }
 
+  thead {
+    background-color: var(--t-table-header-bg);
+  }
+
   thead th {
     box-sizing: border-box;
-    padding: 8px;
+    padding: 8px 16px;
     text-align: left;
     overflow: hidden;
+  }
+
+  thead th.sortable {
+    cursor: pointer;
+  }
+
+  thead th.sortable:focus-visible {
+    outline: 2px solid var(--t-table-header-focus-color);
+    outline-offset: -2px;
+  }
+
+  thead th .header-cell {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+
+    ${unsafeCSS(LINK_TEXT_COLOR_VAR_NAME)}: var(--t-table-header-text-color);
+  }
+
+  thead th .header-cell .header-name {
+    overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
+  thead th .sort-icons {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+  }
+
+  thead th .sort-icons tuix-icon {
+    height: 12px;
+    display: flex;
+    align-items: center;
+  }
+
   tbody tr td {
+    border-bottom: 1px solid var(--t-table-cell-border-color);
     box-sizing: border-box;
     height: 52px;
-    padding: 6px 8px;
+    padding: 6px 16px;
     text-align: left;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    overflow-x: auto;
+    scrollbar-width: none;
+    background-color: var(--t-table-cell-bg);
+  }
+
+  tbody tr td::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+    display: none;
   }
 
   ::slotted(*) {
@@ -47,12 +124,15 @@ export const tableStyles = css `
   .dropdown_container {
     position: relative;
     border-radius: 4px;
+    outline: 1px solid var(--t-table-dropdown-stroke);
   }
 
   .dropdown_container .items-per-page-dropdown {
     width: 55px;
     border: none;
     background-color: transparent;
+    color: var(--t-table-dropdown-text-color);
+    font-family: 'Rubik', sans-serif;
     padding: 8px;
     cursor: pointer;
     -webkit-appearance: none;
@@ -60,6 +140,10 @@ export const tableStyles = css `
     appearance: none;
   }
 
+  .dropdown_container .items-per-page-dropdown option {
+    background-color: var(--t-table-dropdown-option-bg);
+  }
+
   .dropdown_container .items-per-page-dropdown:focus-visible {
     border: none;
     outline: none;
@@ -80,6 +164,7 @@ export const tableStyles = css `
     display: flex;
     justify-content: space-between;
     align-items: center;
+    background-color: var(--t-table-footer-bg);
     box-sizing: border-box;
   }
 
@@ -98,35 +183,61 @@ export const tableStyles = css `
   footer.table_footer .navigation .buttons {
     display: flex;
     gap: 8px;
+  }
+
+  footer.table_footer .navigation .buttons .arrow {
     cursor: pointer;
   }
 
-  .mobile_table {
-    display: none;
+  .mobile_table .table_entity {
+    border-bottom: 2px solid var(--t-table-entity-border-color);
+  }
+
+  .mobile_table .table_row {
+    display: flex;
+    border-bottom: 1px solid var(--t-table-row-border-color);
+    min-height: 40px;
+  }
+
+  .mobile_table .table_row > * {
+    padding: 0 16px;
+    width: 50%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+
+  .mobile_table .table_row .content {
+    padding: 12px 16px;
+  }
+
+  .mobile_table .table_row .content > * {
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .mobile_table .table_row .header {
+    background-color: var(--t-table-mobile-header-bg);
+
+    ${unsafeCSS(LINK_TEXT_COLOR_VAR_NAME)}: var(--t-table-header-text-color);
   }
 
   @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
-    .mobile_table {
-      display: block;
+    footer.table_footer.sticky {
+      position: sticky;
+      bottom: 0;
     }
+  }
 
+  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
     footer.table_footer {
-      align-items: flex-start;
-      gap: 8px;
-    }
-
-    .mobile_table .table_row {
-      display: flex;
-      min-height: 40px;
+      position: sticky;
+      bottom: 0;
     }
 
-    .mobile_table .table_row > * {
-      padding: 0 16px;
-      width: 50%;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      display: flex;
-      align-items: center;
+    footer.table_footer .navigation .buttons {
+      gap: 4px;
     }
   }
 `;
@@ -186,12 +297,4 @@ export const threeDots = css `
     width: 1px;
     white-space: nowrap;
   }
-
-  .clientsLoader,
-  .mobileClientsLoader,
-  .tabletClientsLoader {
-    display: flex;
-    justify-content: center;
-    padding: 16px 0;
-  }
 `;

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

@@ -1,9 +1,12 @@
+export type SortDirection = 'asc' | 'desc';
 export interface IDataTableHeader<TRowData = Record<string, unknown>> {
     cellColor?: (rowData: TRowData) => string | undefined;
+    cellBackgroundColor?: (rowData: TRowData) => string | undefined;
     isSlot?: boolean;
     slotName?: string;
     name?: string;
     dataKey: Extract<keyof TRowData, string>;
+    sortKey?: Extract<keyof TRowData, string>;
     width: number;
 }
 export interface TablePaginationProps {
@@ -37,9 +40,17 @@ export interface TuixTableElement<TRowData = any> extends HTMLElement {
     disableMobileTable?: boolean;
     pageSizeOptions?: number[];
     loader?: ThreeDotsLoaderConfig;
+    dark?: boolean;
+    sortBy?: string;
+    sortDirection?: SortDirection;
 }
 export interface PaginationEventDetail {
     page: number;
     pageSize: number;
 }
+export interface SortEventDetail {
+    sortKey: string;
+    sortDirection: SortDirection;
+}
 export type TuixPaginationEvent = CustomEvent<PaginationEventDetail>;
+export type TuixSortEvent = CustomEvent<SortEventDetail>;

package/dist/src/tuix-text/TuixText.styles.js

@@ -1,7 +1,7 @@
 import { css, unsafeCSS } from 'lit';
-import { ScreenSizes } from '../utils/screenSizes.enum.js';
-import { TextSize } from './enums/tuix-text.enums.js';
-import slottedClassName from '../utils/slottedClassName.js';
+import { ScreenSizes } from '../utils/screenSizes.enum';
+import { TextSize } from './enums/tuix-text.enums';
+import slottedClassName from '../utils/slottedClassName';
 export const linkFontStyles = css `
   ${unsafeCSS(`
   ${slottedClassName(TextSize.Link)} {

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

@@ -1,5 +1,5 @@
-import { Palette } from '../../utils/colors.js';
-import { DarkPalette } from '../../utils/darkColors.js';
+import { Palette } from '../../utils/colors';
+import { DarkPalette } from '../../utils/darkColors';
 export var TextSize;
 (function (TextSize) {
     TextSize["XXL"] = "xxl";