tuix-webcomponents 0.65.0 → 0.67.0

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

@@ -1,367 +0,0 @@
-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

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

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

@@ -1,197 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

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

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

@@ -1,12 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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

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