tuix-webcomponents 0.64.0 → 0.65.0

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

@@ -0,0 +1,367 @@
+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';
+import { TextSize, TextVariant } from '../tuix-text/enums/tuix-text.enums';
+import { IconName } from '../tuix-icon/enums/tuix-icon.enums.js';
+import { Palette } from '../utils/colors';
+import { ScreenSizes } from '../utils/screenSizes.enum';
+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 = () => {
+            this._isTabletView = !!this._mqTablet?.matches;
+            this._isMobileView = !!this._mqMobile?.matches;
+        };
+        this._nextPage = () => {
+            if (this.currentPage === this.totalPages)
+                return;
+            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 = () => {
+            if (this.currentPage === 1)
+                return;
+            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,
+            }));
+        };
+    }
+    static { this.styles = [tableStyles, threeDots]; }
+    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() {
+        super.disconnectedCallback();
+        this._mqTablet?.removeEventListener('change', this._onScreenSizeChange);
+        this._mqMobile?.removeEventListener('change', this._onScreenSizeChange);
+    }
+    updated(changedProps) {
+        if (changedProps.has('headers'))
+            this._computeHeaderPercents();
+    }
+    get _effectiveTotalItems() {
+        return this.totalItems ?? this.data.length;
+    }
+    get _effectiveCurrentPage() {
+        return this.currentPage ?? 1;
+    }
+    get _effectivePageSize() {
+        return this.currentSize ?? 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,
+        };
+    }
+    _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.data;
+        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.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>`)}
+      </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()}`;
+    }
+};
+__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 };

package/package-build/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/package-build/src/tuix-table/TuixTable.styles.js

@@ -0,0 +1,197 @@
+import { css } from 'lit';
+import { ScreenSizes } from '../utils/screenSizes.enum';
+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;
+  }
+`;

package/package-build/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/package-build/src/tuix-table/interfaces/tuix-table.interface.js

@@ -0,0 +1 @@
+export {};

package/package-build/src/tuix-text/TuixText.d.ts

@@ -0,0 +1,12 @@
+import { LitElement } from 'lit';
+import { TextSize, TextVariant } from './enums/tuix-text.enums.js';
+export declare class TuixText extends LitElement {
+    size: TextSize;
+    color?: TextVariant | undefined;
+    dark: boolean;
+    static styles: import("lit").CSSResult[];
+    private _getTextColor;
+    private _getStyleMap;
+    private _getClassMap;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/package-build/src/tuix-text/TuixText.js

@@ -0,0 +1,66 @@
+import { __decorate } from "tslib";
+import { html, css, LitElement, unsafeCSS } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+import { customElement, property } from 'lit/decorators.js';
+import { TextSize, TextVariant, colorText, colorTextDark, } from './enums/tuix-text.enums.js';
+import { linkFontStyles, textStyles } from './TuixText.styles.js';
+import { buttonSizeStyles } from '../tuix-button/TuixButton.styles.js';
+import slottedClassName from '../utils/slottedClassName.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { LINK_TEXT_COLOR_VAR_NAME } from '../tuix-link/TuixLink.styles.js';
+let TuixText = class TuixText extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.size = TextSize.Body1;
+        this.color = TextVariant.PRIMARY;
+        this.dark = false;
+        this._getStyleMap = () => {
+            return {
+                color: `var(${LINK_TEXT_COLOR_VAR_NAME}, ${this._getTextColor()})`,
+            };
+        };
+        this._getClassMap = () => {
+            return {
+                text: true,
+                [this.size]: true,
+            };
+        };
+    }
+    static { this.styles = [
+        css `
+      ${unsafeCSS(slottedClassName('text'))} {
+        font-family: 'Rubik', sans-serif;
+        display: inline;
+        margin: 0;
+      }
+    `,
+        textStyles,
+        linkFontStyles,
+        buttonSizeStyles,
+    ]; }
+    _getTextColor() {
+        const colorMap = this.dark ? colorTextDark : colorText;
+        return colorMap[this.color || TextVariant.PRIMARY];
+    }
+    render() {
+        return html ` <div
+      class="${classMap(this._getClassMap())}"
+      style="${styleMap(this._getStyleMap())}"
+    >
+      <slot></slot>
+    </div>`;
+    }
+};
+__decorate([
+    property({ type: TextSize })
+], TuixText.prototype, "size", void 0);
+__decorate([
+    property({ type: TextVariant })
+], TuixText.prototype, "color", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TuixText.prototype, "dark", void 0);
+TuixText = __decorate([
+    customElement('tuix-text')
+], TuixText);
+export { TuixText };

package/package-build/src/tuix-text/TuixText.styles.d.ts

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