tuix-webcomponents 0.63.0 → 0.64.0

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

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

package/dist/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/dist/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/dist/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;

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

@@ -1,158 +0,0 @@
-import { css, unsafeCSS } from 'lit';
-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)} {
-    font-family: 'Rubik', sans-serif;
-    font-size: 1rem;
-    font-weight: 400;
-    line-height: 1.25rem;    
-  }
-  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
-    ${slottedClassName(TextSize.Link)} {   
-      font-size: 0.938rem;
-      line-height: 1.125rem;    
-    }  
-  }
-  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
-    ${slottedClassName(TextSize.Link)} {   
-      font-size: 0.875rem;
-      line-height: 1rem;    
-    }  
-  }
-`)}
-`;
-export const textStyles = css `
-  ${unsafeCSS(`
-  ${slottedClassName(TextSize.XL)} {
-    font-size: 3.375rem;
-    font-weight: 600;
-    line-height: 3.688rem;
-  }
-
-  ${slottedClassName(TextSize.L)} {
-    font-size: 2.813rem;
-    font-weight: 600;
-    line-height: 3.375rem;
-  }
-
-  ${slottedClassName(TextSize.M)} {
-    font-size: 2.313rem;
-    font-weight: 600;
-    line-height: 2.75rem;
-  }
-
-  ${slottedClassName(TextSize.S)} {
-    font-size: 1.938rem;
-    font-weight: 600;
-    line-height: 2.313rem;
-  }
-
-  ${slottedClassName(TextSize.XS)} {
-    font-size: 1.313rem;
-    font-weight: 600;
-    line-height: 1.563rem;
-  }
-
-  ${slottedClassName(TextSize.Body1)} {
-    font-size: 1.125rem;
-    font-weight: 300;
-    line-height: 1.688rem;
-  }
-
-  ${slottedClassName(TextSize.Body2)} {
-    font-size: 0.938rem;
-    font-weight: 300;
-    line-height: 1.313rem;
-  }
-
-  ${slottedClassName(TextSize.Field1)} {
-    font-size: 1rem;
-    font-weight: 300;
-    line-height: 1.25rem;
-  }
-
-  ${slottedClassName(TextSize.Field2)} {
-    font-size: 0.75rem;
-    font-weight: 300;
-    line-height: 0.875rem;
-  }
-
-  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
-    ${slottedClassName(TextSize.XL)} {
-      font-size: 3rem;
-      line-height: 3.313rem;
-    }
-    ${slottedClassName(TextSize.L)} {
-      font-size: 2.5rem;
-      line-height: 3rem;
-    }
-    ${slottedClassName(TextSize.M)} {
-      font-size: 2.063rem;
-      line-height: 2.5rem;
-    }
-    ${slottedClassName(TextSize.S)} {
-      font-size: 1.75rem;
-      line-height: 2.125rem;
-    }
-    ${slottedClassName(TextSize.XS)} {
-      font-size: 1.188rem;
-      line-height: 1.438rem;
-    }
-
-    ${slottedClassName(TextSize.Body1)} {
-      font-size: 1rem;
-      line-height: 1.5rem;
-    }
-
-    ${slottedClassName(TextSize.Body2)} {
-      font-size: 0.875rem;
-      line-height: 1.125rem;
-    }
-
-    ${slottedClassName(TextSize.Field1)} {
-      font-size: 0.938rem;
-      line-height: 1.125rem;
-    }
-  }
-
-  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
-    ${slottedClassName(TextSize.Body1)} {
-      font-size: 0.875rem;
-      font-weight: 300;
-      line-height: 1.313rem;
-    }
-    ${slottedClassName(TextSize.Body2)} {
-      font-size: 0.75rem;
-      line-height: 1rem;
-    }
-    ${slottedClassName(TextSize.Field1)} {
-      font-size: 0.875rem;
-      font-weight: 300;
-      line-height: 1rem;
-    }
-    ${slottedClassName(TextSize.XL)} {
-      font-size: 2.625rem;
-      line-height: 2.875rem;
-    }
-    ${slottedClassName(TextSize.L)} {
-      font-size: 2.188rem;
-      line-height: 2.438rem;
-    }
-    ${slottedClassName(TextSize.M)} {
-      font-size: 1.813rem;
-      line-height: 2rem;
-    }
-    ${slottedClassName(TextSize.S)} {
-      font-size: 1.5rem;
-      line-height: 1.625rem;
-    }
-    ${slottedClassName(TextSize.XS)} {
-      font-size: 1.063rem;
-      line-height: 1.188rem;
-    }
-  }
-`)}
-`;

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

@@ -1,31 +0,0 @@
-export declare enum TextSize {
-    XL = "xl",
-    L = "l",
-    M = "m",
-    S = "s",
-    XS = "xs",
-    Body1 = "body1",
-    Body2 = "body2",
-    Link = "link",
-    Button = "button",
-    Field1 = "field1",
-    Field2 = "field2"
-}
-export declare enum TextVariant {
-    PRIMARY = "primary",
-    SECONDARY = "secondary",
-    MAIN = "main",
-    DARK_MAIN = "dark_main",
-    GREY = "grey",
-    LIGHT_GREY = "light_grey",
-    DISABLED = "disabled",
-    VALIDATION = "validation",
-    ERROR = "error",
-    SUCCESS = "success",
-    LIGHT = "light",
-    DARK = "dark",
-    DARK_BLUE = "dark_blue",
-    TITLE_BLUE = "title_blue"
-}
-export declare const colorText: Record<TextVariant, string>;
-export declare const colorTextDark: Record<TextVariant, string>;

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

@@ -1,63 +0,0 @@
-import { Palette } from '../../utils/colors';
-import { DarkPalette } from '../../utils/darkColors';
-export var TextSize;
-(function (TextSize) {
-    TextSize["XL"] = "xl";
-    TextSize["L"] = "l";
-    TextSize["M"] = "m";
-    TextSize["S"] = "s";
-    TextSize["XS"] = "xs";
-    TextSize["Body1"] = "body1";
-    TextSize["Body2"] = "body2";
-    TextSize["Link"] = "link";
-    TextSize["Button"] = "button";
-    TextSize["Field1"] = "field1";
-    TextSize["Field2"] = "field2";
-})(TextSize || (TextSize = {}));
-export var TextVariant;
-(function (TextVariant) {
-    TextVariant["PRIMARY"] = "primary";
-    TextVariant["SECONDARY"] = "secondary";
-    TextVariant["MAIN"] = "main";
-    TextVariant["DARK_MAIN"] = "dark_main";
-    TextVariant["GREY"] = "grey";
-    TextVariant["LIGHT_GREY"] = "light_grey";
-    TextVariant["DISABLED"] = "disabled";
-    TextVariant["VALIDATION"] = "validation";
-    TextVariant["ERROR"] = "error";
-    TextVariant["SUCCESS"] = "success";
-    TextVariant["LIGHT"] = "light";
-    TextVariant["DARK"] = "dark";
-    TextVariant["DARK_BLUE"] = "dark_blue";
-    TextVariant["TITLE_BLUE"] = "title_blue";
-})(TextVariant || (TextVariant = {}));
-export const colorText = {
-    [TextVariant.MAIN]: Palette.MAIN,
-    [TextVariant.DARK_MAIN]: Palette.DARK_MAIN,
-    [TextVariant.PRIMARY]: Palette.BLACK,
-    [TextVariant.SECONDARY]: Palette.WHITE,
-    [TextVariant.GREY]: Palette.NEUTRAL_600,
-    [TextVariant.LIGHT_GREY]: Palette.NEUTRAL_200,
-    [TextVariant.DISABLED]: Palette.PRIMARY_200,
-    [TextVariant.VALIDATION]: Palette.VALIDATION,
-    [TextVariant.ERROR]: Palette.ERROR,
-    [TextVariant.SUCCESS]: Palette.SUCCESS,
-    [TextVariant.LIGHT]: Palette.WHITE,
-    [TextVariant.DARK]: Palette.BLACK,
-    [TextVariant.DARK_BLUE]: Palette.DARK_MAIN,
-    [TextVariant.TITLE_BLUE]: Palette.DARK_MAIN,
-};
-export const colorTextDark = {
-    ...colorText,
-    [TextVariant.MAIN]: DarkPalette.MAIN,
-    [TextVariant.DARK_MAIN]: DarkPalette.NEUTRAL_600,
-    [TextVariant.PRIMARY]: DarkPalette.WHITE,
-    [TextVariant.SECONDARY]: Palette.BLACK,
-    [TextVariant.GREY]: DarkPalette.NEUTRAL_600,
-    [TextVariant.VALIDATION]: DarkPalette.VALIDATION,
-    [TextVariant.ERROR]: DarkPalette.ERROR,
-    [TextVariant.SUCCESS]: DarkPalette.SUCCESS,
-    [TextVariant.LIGHT]: DarkPalette.WHITE,
-    [TextVariant.DARK_BLUE]: DarkPalette.PRIMARY_800,
-    [TextVariant.TITLE_BLUE]: DarkPalette.PRIMARY_300,
-};

package/dist/src/tuix-toast/TuixToast.d.ts

@@ -1,15 +0,0 @@
-import { LitElement, type PropertyValueMap } from 'lit';
-import { ToastType, type ToastTypeExcludingNone } from './enums/tuix-toast.enums.js';
-export declare class TuixToast extends LitElement {
-    static styles: import("lit").CSSResult[];
-    type: ToastType;
-    visibilityDuration: number;
-    dark: boolean;
-    lastType: ToastTypeExcludingNone;
-    updated(changedProperties: PropertyValueMap<unknown>): void;
-    private _handleOnClose;
-    private _saveType;
-    private _getStyleMap;
-    private _getIcon;
-    render(): import("lit-html").TemplateResult<1>;
-}

package/dist/src/tuix-toast/TuixToast.js

@@ -1,100 +0,0 @@
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { styleMap } from 'lit/directives/style-map.js';
-import { IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums.js';
-import { BorderRadiusPaper, PaperElevation, } from '../tuix-paper/enums/tuix-paper.enum.js';
-import { Palette } from '../utils/colors.js';
-import { iconDarkPropertiesMap, iconPropertiesMap, toastBgColorMap, toastBgDarkColorMap, ToastType, } from './enums/tuix-toast.enums.js';
-import { commonToastStyles, mobileToastStyles, tabletToastStyles, } from './TuixToast.styles.js';
-let TuixToast = class TuixToast extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.type = ToastType.NONE;
-        this.visibilityDuration = 4000;
-        this.dark = false;
-        this.lastType = ToastType.SUCCESS;
-        this._saveType = () => {
-            if (this.type !== ToastType.NONE) {
-                this.lastType = this.type;
-            }
-        };
-        this._getStyleMap = () => {
-            this._saveType();
-            const bgColorMap = this.dark ? toastBgDarkColorMap : toastBgColorMap;
-            const backgroundColor = bgColorMap[this.lastType];
-            return { backgroundColor };
-        };
-        this._getIcon = () => {
-            this._saveType();
-            if (this.lastType === ToastType.TEXT)
-                return;
-            const { name: iconName, color: iconColor } = this.dark
-                ? iconDarkPropertiesMap[this.lastType]
-                : iconPropertiesMap[this.lastType];
-            return html `
-      <tuix-icon
-        size="${IconSizeVariant.MEDIUM}"
-        name="${iconName}"
-        color="${iconColor}"
-      ></tuix-icon>
-    `;
-        };
-    }
-    static { this.styles = [commonToastStyles, tabletToastStyles, mobileToastStyles]; }
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        if (this.type === ToastType.NONE || this.visibilityDuration === 0)
-            return;
-        setTimeout(() => {
-            this.type = ToastType.NONE;
-            this._handleOnClose();
-        }, this.visibilityDuration);
-    }
-    _handleOnClose() {
-        if (this.visibilityDuration === 0)
-            return;
-        this.dispatchEvent(new CustomEvent('on-close', {
-            bubbles: true,
-        }));
-    }
-    render() {
-        return html `
-      <tuix-paper
-        elevation=${PaperElevation.VARIANT_4}
-        border-radius=${BorderRadiusPaper.SOFT}
-        ?dark=${this.dark}
-      >
-        <div
-          style="${styleMap({
-            backgroundColor: this.dark ? Palette.BLACK : Palette.WHITE,
-            borderRadius: BorderRadiusPaper.SOFT,
-        })}"
-        >
-          <div class="toast-container" style="${styleMap(this._getStyleMap())}">
-            ${this._getIcon()}
-            <tuix-text ?dark=${this.dark}>
-              <slot></slot>
-            </tuix-text>
-          </div>
-        </div>
-      </tuix-paper>
-    `;
-    }
-};
-__decorate([
-    property({ type: ToastType, reflect: true })
-], TuixToast.prototype, "type", void 0);
-__decorate([
-    property({ type: Number, attribute: 'visibility-duration' })
-], TuixToast.prototype, "visibilityDuration", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], TuixToast.prototype, "dark", void 0);
-__decorate([
-    state()
-], TuixToast.prototype, "lastType", void 0);
-TuixToast = __decorate([
-    customElement('tuix-toast')
-], TuixToast);
-export { TuixToast };

package/dist/src/tuix-toast/TuixToast.styles.d.ts

@@ -1,3 +0,0 @@
-export declare const commonToastStyles: import("lit").CSSResult;
-export declare const tabletToastStyles: import("lit").CSSResult;
-export declare const mobileToastStyles: import("lit").CSSResult;