tuix-webcomponents 0.69.0 → 0.70.0

package/dist/src/tuix-radio-button/TuixRadioButton.js

@@ -2,9 +2,9 @@ import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums';
-import { TextSize, TextVariant } from '../tuix-text/enums/tuix-text.enums';
-import { radioButtonContainerStyles, radioButtonInnerStyles, radioButtonLabelStyles, radioButtonStyles, radioHostStyles, } from './TuixRadioButton.styles';
+import { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums.js';
+import { TextSize, TextVariant } from '../tuix-text/enums/tuix-text.enums.js';
+import { radioButtonContainerStyles, radioButtonInnerStyles, radioButtonLabelStyles, radioButtonStyles, radioHostStyles, } from './TuixRadioButton.styles.js';
 let TuixRadioButton = class TuixRadioButton extends LitElement {
     constructor() {
         super(...arguments);
@@ -15,13 +15,6 @@ let TuixRadioButton = class TuixRadioButton extends LitElement {
         this.labelSide = CheckboxLabelSide.RIGHT;
         this.selectedOption = null;
     }
-    static { this.styles = [
-        radioHostStyles,
-        radioButtonContainerStyles,
-        radioButtonStyles,
-        radioButtonInnerStyles,
-        radioButtonLabelStyles,
-    ]; }
     _onRadioButtonChange(event) {
         this.dispatchEvent(new CustomEvent('change', {
             detail: {
@@ -71,6 +64,13 @@ let TuixRadioButton = class TuixRadioButton extends LitElement {
         return html `${this.options.map((option, index) => this._formatTemplate(option, index))}`;
     }
 };
+TuixRadioButton.styles = [
+    radioHostStyles,
+    radioButtonContainerStyles,
+    radioButtonStyles,
+    radioButtonInnerStyles,
+    radioButtonLabelStyles,
+];
 __decorate([
     property({ type: Boolean, reflect: true })
 ], TuixRadioButton.prototype, "disabled", void 0);
@@ -93,3 +93,4 @@ TuixRadioButton = __decorate([
     customElement('tuix-radio-button')
 ], TuixRadioButton);
 export { TuixRadioButton };
+//# sourceMappingURL=TuixRadioButton.js.map

package/dist/src/tuix-radio-button/TuixRadioButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TuixRadioButton.js","sourceRoot":"","sources":["../../../src/tuix-radio-button/TuixRadioButton.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\nimport { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums';\nimport { TextSize, TextVariant } from '../tuix-text/enums/tuix-text.enums';\nimport {\n  radioButtonContainerStyles,\n  radioButtonInnerStyles,\n  radioButtonLabelStyles,\n  radioButtonStyles,\n  radioHostStyles,\n} from './TuixRadioButton.styles';\nimport { TuixRadioButtonOption } from './interfaces/tuix-radio-button.interface';\n\n@customElement('tuix-radio-button')\nexport class TuixRadioButton extends LitElement {\n  static styles = [\n    radioHostStyles,\n    radioButtonContainerStyles,\n    radioButtonStyles,\n    radioButtonInnerStyles,\n    radioButtonLabelStyles,\n  ];\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  dark = false;\n\n  @property({ type: Boolean, reflect: true })\n  error = false;\n\n  @property({ type: Array })\n  options: TuixRadioButtonOption[] = [];\n\n  @property({ type: String })\n  labelSide = CheckboxLabelSide.RIGHT;\n\n  @property({ type: String })\n  selectedOption: TuixRadioButtonOption | null = null;\n\n  private _onRadioButtonChange(event: InputEvent) {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: {\n          value: (event.target as HTMLInputElement).value,\n        },\n        bubbles: true,\n      })\n    );\n  }\n\n  private _getFullContainerClasses(): ClassInfo {\n    return {\n      't-radio-button-full-container': true,\n      't-with-error': this.error && !this.disabled,\n      't-with-label-left': this.labelSide === CheckboxLabelSide.LEFT,\n      't-multiple-options': this.options.length > 1,\n    };\n  }\n\n  private _formatTemplate(option: TuixRadioButtonOption, index: number) {\n    return html`<label class=\"${classMap(this._getFullContainerClasses())}\">\n      <div class=\"t-radio-button-container\">\n        <input\n          type=\"radio\"\n          class=\"t-radio-button\"\n          ?disabled=\"${this.disabled}\"\n          .value=\"${option}\"\n          name=\"tuix-radio-button\"\n          ?checked=\"${this.selectedOption === option}\"\n          @change=\"${this._onRadioButtonChange}\"\n        />\n        <div class=\"t-radio-button-checkmark\">\n          <div class=\"t-radio-button-inner\"></div>\n        </div>\n      </div>\n      <div class=\"t-radio-button-label\">\n        <slot name=\"label-${index}\">\n          <tuix-text\n            size=\"${TextSize.Field1}\"\n            color=\"${TextVariant.PRIMARY}\"\n            ?dark=\"${this.dark}\"\n          >\n            ${option}\n          </tuix-text>\n        </slot>\n      </div>\n    </label>`;\n  }\n\n  render() {\n    return html`${this.options.map((option, index) =>\n      this._formatTemplate(option, index)\n    )}`;\n  }\n}\n"]}

package/dist/src/tuix-radio-button/TuixRadioButton.styles.js

@@ -1,7 +1,7 @@
 import { css, unsafeCSS } from 'lit';
-import { hostStyles } from '../tuix-checkbox/TuixCheckbox.styles';
-import { Palette } from '../utils/colors';
-import { ScreenSizes } from '../utils/screenSizes.enum';
+import { hostStyles } from '../tuix-checkbox/TuixCheckbox.styles.js';
+import { Palette } from '../utils/colors.js';
+import { ScreenSizes } from '../utils/screenSizes.enum.js';
 export const radioHostStyles = css `
   ${hostStyles}
   :host {
@@ -133,3 +133,4 @@ export const radioButtonLabelStyles = css `
     margin-left: 0;
   }
 `;
+//# sourceMappingURL=TuixRadioButton.styles.js.map

package/dist/src/tuix-radio-button/TuixRadioButton.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TuixRadioButton.styles.js","sourceRoot":"","sources":["../../../src/tuix-radio-button/TuixRadioButton.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;IAC9B,UAAU;;;6CAG+B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;CAE1E,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCA4BN,WAAW,CAAC,MAAM;;;;;;;CAOxD,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CnC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BxC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;CAcxC,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { hostStyles } from '../tuix-checkbox/TuixCheckbox.styles';\nimport { Palette } from '../utils/colors';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\n\nexport const radioHostStyles = css`\n  ${hostStyles}\n  :host {\n    --t-margin-between-radio-buttons: 1rem;\n    --t-radio-button-inner-color-disabled: ${unsafeCSS(Palette.PRIMARY_300)};\n  }\n`;\n\nexport const radioButtonContainerStyles = css`\n  .t-radio-button-full-container {\n    display: flex;\n    justify-content: var(--t-label-right-default-justify, flex-start);\n    cursor: pointer;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n  :host([disabled]) .t-radio-button-full-container {\n    cursor: not-allowed;\n  }\n  .t-radio-button-container {\n    --t-radio-button-size-box: 1.5rem;\n    --t-radio-button-shadow-width: 2px;\n    display: block;\n    position: relative;\n    height: var(--t-radio-button-size-box);\n    width: var(--t-radio-button-size-box);\n    min-width: var(--t-radio-button-size-box);\n  }\n  .t-radio-button-container .t-radio-button {\n    position: absolute;\n    opacity: 0;\n    height: 0;\n    width: 0;\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-radio-button-container {\n      --t-radio-button-size-box: 1rem;\n      --t-radio-button-shadow-width: 1px;\n      margin-top: 1px;\n    }\n  }\n`;\n\nexport const radioButtonStyles = css`\n  .t-radio-button-full-container.t-multiple-options {\n    margin-bottom: var(--t-margin-between-radio-buttons);\n  }\n  .t-radio-button-container .t-radio-button-checkmark {\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: flex;\n    height: var(--t-radio-button-size-box);\n    width: var(--t-radio-button-size-box);\n    background-color: var(--t-bg-color-primary);\n    border: 1px solid var(--t-stroke-color-grey);\n    box-sizing: border-box;\n    border-radius: 50%;\n  }\n  .t-radio-button-container\n    .t-radio-button:checked\n    ~ .t-radio-button-checkmark {\n    border: 1px solid var(--t-main-color-tuix);\n  }\n  .t-radio-button-container .t-radio-button:focus ~ .t-radio-button-checkmark {\n    box-shadow: 0 0 0px var(--t-radio-button-shadow-width)\n      var(--t-stroke-color-focus);\n  }\n  .t-radio-button-full-container:hover\n    .t-radio-button-container\n    .t-radio-button-checkmark {\n    border: 1px solid var(--t-main-color-tuix);\n  }\n  .t-radio-button-full-container.t-with-error\n    .t-radio-button-container\n    .t-radio-button-checkmark {\n    border: 1px solid var(--t-text-color-error);\n  }\n\n  .t-radio-button-container\n    .t-radio-button:disabled\n    ~ .t-radio-button-checkmark {\n    background-color: var(--t-bg-color-disabled);\n    border: none;\n    box-shadow: none;\n  }\n`;\n\nexport const radioButtonInnerStyles = css`\n  .t-radio-button-container .t-radio-button-checkmark .t-radio-button-inner {\n    background-color: var(--t-main-color-tuix);\n    margin: auto;\n    height: calc(var(--t-radio-button-size-box) / 2 - 2px);\n    width: calc(var(--t-radio-button-size-box) / 2 - 2px);\n    border-radius: 50%;\n    display: none;\n  }\n  .t-radio-button-container\n    .t-radio-button:checked\n    ~ .t-radio-button-checkmark\n    .t-radio-button-inner {\n    display: block;\n  }\n  :host([error])\n    .t-radio-button-container\n    .t-radio-button-checkmark\n    .t-radio-button-inner {\n    background-color: var(--t-text-color-error);\n  }\n  :host([disabled])\n    .t-radio-button-container\n    .t-radio-button-checkmark\n    .t-radio-button-inner {\n    background-color: var(--t-radio-button-inner-color-disabled);\n    cursor: not-allowed;\n  }\n`;\n\nexport const radioButtonLabelStyles = css`\n  .t-radio-button-label {\n    display: block;\n    color: var(--t-text-color-label);\n    margin-left: 0.625rem;\n  }\n  .t-radio-button-full-container.t-with-label-left {\n    flex-direction: row-reverse;\n    justify-content: var(--t-label-left-default-justify, space-between);\n  }\n  .t-radio-button-full-container.t-with-label-left .t-radio-button-label {\n    margin-right: 0.625rem;\n    margin-left: 0;\n  }\n`;\n"]}

package/dist/src/tuix-radio-button/interfaces/tuix-radio-button.interface.d.ts

@@ -1,3 +1,3 @@
-import { type DetailValue } from '../../utils/interfaces/detail-value.interface';
+import { DetailValue } from '../../utils/interfaces/detail-value.interface.js';
 export type TuixRadioButtonOption = string | number;
 export type CustomEventTuixRadioButton<T extends TuixRadioButtonOption = TuixRadioButtonOption> = CustomEvent<DetailValue<T>>;

package/dist/src/tuix-radio-button/interfaces/tuix-radio-button.interface.js

@@ -1 +1,2 @@
 export {};
+//# sourceMappingURL=tuix-radio-button.interface.js.map

package/dist/src/tuix-radio-button/interfaces/tuix-radio-button.interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tuix-radio-button.interface.js","sourceRoot":"","sources":["../../../../src/tuix-radio-button/interfaces/tuix-radio-button.interface.ts"],"names":[],"mappings":"","sourcesContent":["import { DetailValue } from '../../utils/interfaces/detail-value.interface';\n\nexport type TuixRadioButtonOption = string | number;\n\nexport type CustomEventTuixRadioButton<\n  T extends TuixRadioButtonOption = TuixRadioButtonOption\n> = CustomEvent<DetailValue<T>>;\n"]}

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

@@ -3,11 +3,11 @@ 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 { 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';
-import { ScreenSizes } from '../utils/screenSizes.enum';
+import { Palette } from '../utils/colors.js';
+import { ScreenSizes } from '../utils/screenSizes.enum.js';
 let TuixTable = class TuixTable extends LitElement {
     constructor() {
         super(...arguments);
@@ -22,8 +22,9 @@ let TuixTable = class TuixTable extends LitElement {
         this._isMobileView = false;
         this._headerPercents = [];
         this._onScreenSizeChange = () => {
-            this._isTabletView = !!this._mqTablet?.matches;
-            this._isMobileView = !!this._mqMobile?.matches;
+            var _a, _b;
+            this._isTabletView = !!((_a = this._mqTablet) === null || _a === void 0 ? void 0 : _a.matches);
+            this._isMobileView = !!((_b = this._mqMobile) === null || _b === void 0 ? void 0 : _b.matches);
         };
         this._nextPage = () => {
             if (this.currentPage === this.totalPages)
@@ -64,7 +65,6 @@ let TuixTable = class TuixTable extends LitElement {
             }));
         };
     }
-    static { this.styles = [tableStyles, threeDots]; }
     connectedCallback() {
         super.connectedCallback();
         this._mqTablet = window.matchMedia(`(max-width:${ScreenSizes.TABLET}px)`);
@@ -75,22 +75,26 @@ let TuixTable = class TuixTable extends LitElement {
         this._computeHeaderPercents();
     }
     disconnectedCallback() {
+        var _a, _b;
         super.disconnectedCallback();
-        this._mqTablet?.removeEventListener('change', this._onScreenSizeChange);
-        this._mqMobile?.removeEventListener('change', this._onScreenSizeChange);
+        (_a = this._mqTablet) === null || _a === void 0 ? void 0 : _a.removeEventListener('change', this._onScreenSizeChange);
+        (_b = this._mqMobile) === null || _b === void 0 ? void 0 : _b.removeEventListener('change', this._onScreenSizeChange);
     }
     updated(changedProps) {
         if (changedProps.has('headers'))
             this._computeHeaderPercents();
     }
     get _effectiveTotalItems() {
-        return this.totalItems ?? this.data.length;
+        var _a;
+        return (_a = this.totalItems) !== null && _a !== void 0 ? _a : this.data.length;
     }
     get _effectiveCurrentPage() {
-        return this.currentPage ?? 1;
+        var _a;
+        return (_a = this.currentPage) !== null && _a !== void 0 ? _a : 1;
     }
     get _effectivePageSize() {
-        return this.currentSize ?? this.pageSizeOptions[0];
+        var _a;
+        return (_a = this.currentSize) !== null && _a !== void 0 ? _a : this.pageSizeOptions[0];
     }
     get totalPages() {
         const denom = this._effectivePageSize;
@@ -319,6 +323,7 @@ let TuixTable = class TuixTable extends LitElement {
             : html `${this._renderTable()}`;
     }
 };
+TuixTable.styles = [tableStyles, threeDots];
 __decorate([
     property({ type: Boolean })
 ], TuixTable.prototype, "paginated", void 0);
@@ -365,3 +370,4 @@ TuixTable = __decorate([
     customElement('tuix-table')
 ], TuixTable);
 export { TuixTable };
+//# sourceMappingURL=TuixTable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TuixTable.js","sourceRoot":"","sources":["../../../src/tuix-table/TuixTable.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { tableStyles, threeDots } from './TuixTable.styles';\nimport { TextSize, TextVariant } from '../tuix-text/enums/tuix-text.enums';\nimport { IconName } from '../tuix-icon/enums/tuix-icon.enums.js';\nimport { Palette } from '../utils/colors';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\n\nimport type {\n  IDataTableHeader,\n  TablePaginationProps,\n  PaginationEventDetail,\n  ThreeDotsLoaderConfig,\n} from './interfaces/tuix-table.interface.js';\n\n@customElement('tuix-table')\nexport class TuixTable extends LitElement {\n  static styles = [tableStyles, threeDots];\n\n  @property({ type: Boolean }) paginated = false;\n  @property({ type: Boolean }) disableMobileTable = false;\n  @property({ type: Boolean }) showMobileTableInTablet = false;\n  @property({ type: Object }) loader?: ThreeDotsLoaderConfig;\n  @property({ type: Array }) data: Record<string, any>[] = [];\n  @property({ type: Array }) headers: IDataTableHeader<any>[] = [];\n  @property({ type: Array }) pageSizeOptions: number[] = [5, 10, 20];\n\n  @property({ type: Number }) totalItems?: number;\n  @property({ type: Number }) currentPage?: number;\n  @property({ type: Number }) currentSize?: number;\n  @property({ type: Boolean }) isLoadingData = false;\n\n  @state() private _isTabletView = false;\n  @state() private _isMobileView = false;\n  @state() private _headerPercents: number[] = [];\n\n  private _mqTablet?: MediaQueryList;\n  private _mqMobile?: MediaQueryList;\n\n  private _onScreenSizeChange = () => {\n    this._isTabletView = !!this._mqTablet?.matches;\n    this._isMobileView = !!this._mqMobile?.matches;\n  };\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._mqTablet = window.matchMedia(`(max-width:${ScreenSizes.TABLET}px)`);\n    this._mqMobile = window.matchMedia(`(max-width:${ScreenSizes.MOBILE}px)`);\n    this._onScreenSizeChange();\n    this._mqTablet.addEventListener('change', this._onScreenSizeChange);\n    this._mqMobile.addEventListener('change', this._onScreenSizeChange);\n    this._computeHeaderPercents();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._mqTablet?.removeEventListener('change', this._onScreenSizeChange);\n    this._mqMobile?.removeEventListener('change', this._onScreenSizeChange);\n  }\n\n  updated(changedProps: Map<string, any>) {\n    if (changedProps.has('headers')) this._computeHeaderPercents();\n  }\n\n  private get _effectiveTotalItems() {\n    return this.totalItems ?? this.data.length;\n  }\n\n  private get _effectiveCurrentPage() {\n    return this.currentPage ?? 1;\n  }\n\n  private get _effectivePageSize() {\n    return this.currentSize ?? this.pageSizeOptions[0];\n  }\n\n  private get totalPages() {\n    const denom = this._effectivePageSize;\n    return Math.max(1, Math.ceil(this._effectiveTotalItems / denom));\n  }\n\n  private get _paginationProps(): TablePaginationProps {\n    const totalItems = this._effectiveTotalItems;\n    const itemsPerPage = this._effectivePageSize;\n    const startItem = totalItems\n      ? (this._effectiveCurrentPage - 1) * itemsPerPage + 1\n      : 0;\n    const endItem = Math.min(\n      this._effectiveCurrentPage * itemsPerPage,\n      totalItems\n    );\n\n    return {\n      totalItems,\n      currentPage: this._effectiveCurrentPage,\n      itemsPerPage,\n      startItem,\n      endItem,\n      onNextPage: this._nextPage,\n      onPreviousPage: this._prevPage,\n      onItemsPerPageChange: this._setPageSize,\n      isLoading: this.isLoadingData,\n    } as TablePaginationProps;\n  }\n\n  private _nextPage = () => {\n    if (this.currentPage === this.totalPages) return;\n    const next = Math.min(this.totalPages, this._effectiveCurrentPage + 1);\n    const detail: PaginationEventDetail = {\n      page: next,\n      pageSize: this._effectivePageSize,\n    };\n    this.dispatchEvent(\n      new CustomEvent<PaginationEventDetail>('next-page', {\n        detail,\n        bubbles: true,\n        composed: true,\n      })\n    );\n  };\n\n  private _prevPage = () => {\n    if (this.currentPage === 1) return;\n    const prev = Math.max(1, this._effectiveCurrentPage - 1);\n    const detail: PaginationEventDetail = {\n      page: prev,\n      pageSize: this._effectivePageSize,\n    };\n    this.dispatchEvent(\n      new CustomEvent<PaginationEventDetail>('previous-page', {\n        detail,\n        bubbles: true,\n        composed: true,\n      })\n    );\n  };\n\n  private _setPageSize = (value: number) => {\n    const newSize = Math.max(1, Math.floor(value));\n    const newPage = 1;\n    const detail: PaginationEventDetail = { page: newPage, pageSize: newSize };\n    this.dispatchEvent(\n      new CustomEvent<PaginationEventDetail>('page-size-change', {\n        detail,\n        bubbles: true,\n        composed: true,\n      })\n    );\n  };\n\n  private _computeHeaderPercents() {\n    const total = this.headers.reduce((acum, header) => acum + header.width, 0);\n    this._headerPercents =\n      total === 0\n        ? this.headers.map(() => 100 / this.headers.length)\n        : this.headers.map(header => (header.width / total) * 100);\n  }\n\n  private _cellStyleString() {\n    return `border-bottom:1px solid ${Palette.NEUTRAL_200};`;\n  }\n\n  private _textVariantColor(header: IDataTableHeader<any>, row: any) {\n    const color = header.cellColor\n      ? header.cellColor(row)\n      : TextVariant.PRIMARY;\n    return color;\n  }\n\n  private _renderHeaderCells() {\n    return html`<tr>\n      ${this.headers.map(\n        (header, idx) => html`<th\n          style=${styleMap({\n            width: `${this._headerPercents[idx]}%`,\n            color: Palette.WHITE,\n          })}\n        >\n          <tuix-text size=${TextSize.Body1} color=${TextVariant.SECONDARY}\n            >${header.name}</tuix-text\n          >\n        </th>`\n      )}\n    </tr>`;\n  }\n\n  private _renderCell(header: IDataTableHeader<any>, row: any) {\n    if (header.isSlot) {\n      const slotName = `${header.slotName}-${row.id}`;\n      return html`<td style=\"${this._cellStyleString()}\">\n        <slot name=${slotName}></slot>\n      </td>`;\n    }\n    const content = row[header.dataKey];\n    return html`<td style=\"${this._cellStyleString()}\">\n      <tuix-text\n        size=${TextSize.Body1}\n        color=${this._textVariantColor(header, row)}\n        >${content}</tuix-text\n      >\n    </td>`;\n  }\n\n  private _renderRows() {\n    const rows = this.data;\n    return repeat(\n      rows,\n      row => row.id,\n      row =>\n        html`<tr>\n          ${this.headers.map(header => this._renderCell(header, row))}\n        </tr>`\n    );\n  }\n\n  private _onPageSizeChange(e: Event) {\n    const selectedValue = parseInt((e.target as HTMLSelectElement).value);\n    this._setPageSize(selectedValue);\n  }\n\n  private _renderPageSizeOptions() {\n    return this.pageSizeOptions.map(\n      size => html`<option value=${size}>${size}</option>`\n    );\n  }\n\n  private _renderSpinner() {\n    const threeDotsConfiguration = {\n      size: '14px',\n      color: Palette.MAIN,\n      visible: true,\n      ariaLabel: 'Loading',\n      wrapperStyle: {\n        width: '100%',\n        display: 'flex',\n        justifyContent: 'center',\n        padding: '48px 0',\n      },\n      ...this.loader,\n    } as Required<ThreeDotsLoaderConfig>;\n\n    if (!threeDotsConfiguration.visible) return null;\n\n    const wrapperVars: Record<string, string | number> = {\n      '--dot-size': threeDotsConfiguration.size,\n      '--dot-color': threeDotsConfiguration.color,\n      ...threeDotsConfiguration.wrapperStyle,\n    };\n\n    const aria = threeDotsConfiguration.ariaLabel;\n\n    return html`<div class=\"tuix-spinner-wrapper\">\n      <div\n        class=\"three-dots-wrapper\"\n        role=\"status\"\n        aria-label=${aria}\n        style=${styleMap(wrapperVars)}\n      >\n        <span class=\"dot\" aria-hidden=\"true\"></span>\n        <span class=\"dot\" aria-hidden=\"true\"></span>\n        <span class=\"dot\" aria-hidden=\"true\"></span>\n        <span class=\"sr-only\">${aria}</span>\n      </div>\n    </div>`;\n  }\n  private _renderPagination() {\n    const { totalItems, startItem, endItem, itemsPerPage, isLoading } =\n      this._paginationProps;\n\n    return html`<footer\n      style=\"background-color:${Palette.SECTION_BG};\"\n      class=\"table_footer sticky\"\n    >\n      <div class=\"items-per-page\">\n        <tuix-text size=${TextSize.Body2}>Items per page</tuix-text>\n        <div\n          style=\"outline: 1px solid ${Palette.NEUTRAL_200};\"\n          class=\"dropdown_container\"\n        >\n          <select\n            class=\"items-per-page-dropdown\"\n            .value=${String(itemsPerPage)}\n            @change=${this._onPageSizeChange}\n            ?disabled=${isLoading}\n          >\n            ${this._renderPageSizeOptions()}\n          </select>\n          <tuix-icon\n            class=\"arrow-icon\"\n            name=${IconName.CHEVRON_DOWN}\n          ></tuix-icon>\n        </div>\n      </div>\n\n      <div class=\"navigation\">\n        <tuix-text size=${TextSize.Body2}\n          >${startItem} - ${endItem} of ${totalItems}</tuix-text\n        >\n        <div class=\"buttons\">\n          <tuix-icon\n            class=\"arrow-icon\"\n            name=${IconName.CHEVRON_LEFT}\n            @click=${this._prevPage}\n          ></tuix-icon>\n          <tuix-icon\n            class=\"arrow-icon\"\n            name=${IconName.CHEVRON_RIGHT}\n            @click=${this._nextPage}\n          ></tuix-icon>\n        </div>\n      </div>\n    </footer>`;\n  }\n\n  private _renderTable() {\n    return html`<table>\n        <thead style=\"background-color: ${Palette.MAIN}\">\n          ${this._renderHeaderCells()}\n        </thead>\n        ${this.isLoadingData\n          ? html`<tbody>\n              <tr>\n                <td colspan=${this.headers.length}>${this._renderSpinner()}</td>\n              </tr>\n            </tbody>`\n          : html`<tbody>\n              ${this._renderRows()}\n            </tbody>`}\n      </table>\n      ${this.paginated ? this._renderPagination() : null}`;\n  }\n\n  private _renderCards() {\n    const rows = this.data;\n    return html`<div class=\"mobile_table\">\n        ${this.isLoadingData\n          ? this._renderSpinner()\n          : rows.map(\n              row => html`<div\n                style=\"border-bottom: 2px solid ${Palette.MAIN};\"\n                class=\"table_entity\"\n              >\n                ${this.headers.map(\n                  header => html`<div\n                    class=\"table_row\"\n                    style=\"border-bottom:1px solid ${Palette.NEUTRAL_200};\"\n                  >\n                    <div\n                      class=\"header\"\n                      style=\"background-color:${Palette.SECTION_BG};\"\n                    >\n                      <tuix-text\n                        size=${TextSize.Body1}\n                        color=${TextVariant.PRIMARY}\n                        >${header.name}</tuix-text\n                      >\n                    </div>\n                    <div class=\"content\">\n                      ${header.isSlot\n                        ? html`<slot\n                            name=\"${header.slotName}-${row.id}\"\n                          ></slot>`\n                        : html`<tuix-text size=${TextSize.Body1}\n                            >${row[header.dataKey]}</tuix-text\n                          >`}\n                    </div>\n                  </div>`\n                )}\n              </div>`\n            )}\n      </div>\n      ${this.paginated ? this._renderPagination() : null}`;\n  }\n\n  render() {\n    const shouldRenderCards =\n      !this.disableMobileTable &&\n      (this._isMobileView ||\n        (this._isTabletView && this.showMobileTableInTablet));\n\n    return shouldRenderCards\n      ? html`${this._renderCards()}`\n      : html`${this._renderTable()}`;\n  }\n}\n"]}

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

@@ -1,5 +1,5 @@
 import { css } from 'lit';
-import { ScreenSizes } from '../utils/screenSizes.enum';
+import { ScreenSizes } from '../utils/screenSizes.enum.js';
 export const tableStyles = css `
   :host {
     display: block;
@@ -195,3 +195,4 @@ export const threeDots = css `
     padding: 16px 0;
   }
 `;
+//# sourceMappingURL=TuixTable.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TuixTable.styles.js","sourceRoot":"","sources":["../../../src/tuix-table/TuixTable.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCAyGS,WAAW,CAAC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;CAwBxD,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgE3B,CAAC","sourcesContent":["import { css } from 'lit';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\n\nexport const tableStyles = css`\n  :host {\n    display: block;\n    width: 100%;\n  }\n\n  .table_wrapper {\n    width: 100%;\n    overflow-x: auto;\n  }\n\n  table {\n    min-width: 650px;\n    table-layout: fixed;\n    width: 100%;\n    border-collapse: collapse;\n  }\n\n  thead th {\n    box-sizing: border-box;\n    padding: 8px;\n    text-align: left;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  tbody tr td {\n    box-sizing: border-box;\n    height: 52px;\n    padding: 6px 8px;\n    text-align: left;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  ::slotted(*) {\n    display: inline-flex;\n    align-items: center;\n    margin-right: 8px;\n    gap: 10px;\n  }\n\n  .dropdown_container {\n    position: relative;\n    border-radius: 4px;\n  }\n\n  .dropdown_container .items-per-page-dropdown {\n    width: 55px;\n    border: none;\n    background-color: transparent;\n    padding: 8px;\n    cursor: pointer;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n  }\n\n  .dropdown_container .items-per-page-dropdown:focus-visible {\n    border: none;\n    outline: none;\n  }\n\n  .dropdown_container .arrow-icon {\n    position: absolute;\n    right: 8px;\n    bottom: 8px;\n    cursor: pointer;\n    pointer-events: none;\n  }\n\n  footer.table_footer {\n    height: 48px;\n    padding: 8px;\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    box-sizing: border-box;\n  }\n\n  footer.table_footer .items-per-page {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  footer.table_footer .navigation {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  footer.table_footer .navigation .buttons {\n    display: flex;\n    gap: 8px;\n    cursor: pointer;\n  }\n\n  .mobile_table {\n    display: none;\n  }\n\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .mobile_table {\n      display: block;\n    }\n\n    footer.table_footer {\n      align-items: flex-start;\n      gap: 8px;\n    }\n\n    .mobile_table .table_row {\n      display: flex;\n      min-height: 40px;\n    }\n\n    .mobile_table .table_row > * {\n      padding: 0 16px;\n      width: 50%;\n      text-overflow: ellipsis;\n      overflow: hidden;\n      display: flex;\n      align-items: center;\n    }\n  }\n`;\n\nexport const threeDots = css`\n  .tuix-spinner-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 24px 0;\n  }\n\n  .three-dots-wrapper {\n    display: inline-flex;\n    gap: calc(var(--dot-size) * 0.5);\n    align-items: center;\n    justify-content: center;\n    position: relative;\n  }\n  .three-dots-wrapper .dot {\n    width: var(--dot-size);\n    height: var(--dot-size);\n    background: var(--dot-color);\n    border-radius: 50%;\n    display: inline-block;\n    animation: threeDots 0.9s infinite ease-in-out both;\n  }\n  .three-dots-wrapper .dot:nth-child(2) {\n    animation-delay: 0.15s;\n  }\n  .three-dots-wrapper .dot:nth-child(3) {\n    animation-delay: 0.3s;\n  }\n\n  @keyframes threeDots {\n    0%,\n    80%,\n    100% {\n      transform: scale(0.6);\n      opacity: 0.6;\n    }\n    40% {\n      transform: scale(1);\n      opacity: 1;\n    }\n  }\n\n  .sr-only {\n    border: 0;\n    clip: rect(1px, 1px, 1px, 1px);\n    -webkit-clip-path: inset(50%);\n    clip-path: inset(50%);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    width: 1px;\n    white-space: nowrap;\n  }\n\n  .clientsLoader,\n  .mobileClientsLoader,\n  .tabletClientsLoader {\n    display: flex;\n    justify-content: center;\n    padding: 16px 0;\n  }\n`;\n"]}

package/dist/src/tuix-table/interfaces/tuix-table.interface.js

@@ -1 +1,2 @@
 export {};
+//# sourceMappingURL=tuix-table.interface.js.map

package/dist/src/tuix-table/interfaces/tuix-table.interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tuix-table.interface.js","sourceRoot":"","sources":["../../../../src/tuix-table/interfaces/tuix-table.interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface IDataTableHeader<TRowData = Record<string, unknown>> {\n  cellColor?: (rowData: TRowData) => string | undefined;\n  isSlot?: boolean;\n  slotName?: string;\n  name?: string;\n  dataKey: Extract<keyof TRowData, string>;\n  width: number;\n}\n\nexport interface TablePaginationProps {\n  totalItems: number;\n  currentPage: number;\n  itemsPerPage: number;\n\n  startItem: number;\n  endItem: number;\n\n  onNextPage: () => void;\n  onPreviousPage: () => void;\n  onItemsPerPageChange: (newPageSize: number) => void;\n\n  isLoading?: boolean;\n  stickyInTablet?: boolean;\n}\n\nexport interface ThreeDotsLoaderConfig {\n  size?: string;\n  color?: string;\n  visible?: boolean;\n  ariaLabel?: string;\n  wrapperStyle?: Record<string, string | number>;\n}\n\nexport interface TuixTableElement<TRowData = any> extends HTMLElement {\n  data: TRowData[];\n  headers: IDataTableHeader<TRowData>[];\n  totalItems?: number;\n  currentPage?: number;\n  currentSize?: number;\n  isLoadingData?: boolean;\n  paginated?: boolean;\n  showMobileTableInTablet?: boolean;\n  disableMobileTable?: boolean;\n  pageSizeOptions?: number[];\n  loader?: ThreeDotsLoaderConfig;\n}\n\nexport interface PaginationEventDetail {\n  page: number;\n  pageSize: number;\n}\n\nexport type TuixPaginationEvent = CustomEvent<PaginationEventDetail>;\n"]}

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

@@ -26,18 +26,6 @@ let TuixText = class TuixText extends LitElement {
             };
         };
     }
-    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];
@@ -51,6 +39,18 @@ let TuixText = class TuixText extends LitElement {
     </div>`;
     }
 };
+TuixText.styles = [
+    css `
+      ${unsafeCSS(slottedClassName('text'))} {
+        font-family: 'Rubik', sans-serif;
+        display: inline;
+        margin: 0;
+      }
+    `,
+    textStyles,
+    linkFontStyles,
+    buttonSizeStyles,
+];
 __decorate([
     property({ type: TextSize })
 ], TuixText.prototype, "size", void 0);
@@ -64,3 +64,4 @@ TuixText = __decorate([
     customElement('tuix-text')
 ], TuixText);
 export { TuixText };
+//# sourceMappingURL=TuixText.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TuixText.js","sourceRoot":"","sources":["../../../src/tuix-text/TuixText.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EACL,QAAQ,EACR,WAAW,EACX,SAAS,EACT,aAAa,GACd,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,gBAAgB,MAAM,8BAA8B,CAAC;AAC5D,OAAO,EAAa,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAG3E,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAAxC;;QAEE,SAAI,GAAG,QAAQ,CAAC,KAAK,CAAC;QAGtB,UAAK,GAAI,WAAW,CAAC,OAAO,CAAC;QAG7B,SAAI,GAAG,KAAK,CAAC;QAoBL,iBAAY,GAAG,GAAG,EAAE;YAC1B,OAAO;gBACL,KAAK,EAAE,OAAO,wBAAwB,KAAK,IAAI,CAAC,aAAa,EAAE,GAAG;aACnE,CAAC;QACJ,CAAC,CAAC;QAEM,iBAAY,GAAG,GAAc,EAAE;YACrC,OAAO;gBACL,IAAI,EAAE,IAAI;gBACV,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI;aAClB,CAAC;QACJ,CAAC,CAAC;IAUJ,CAAC;IA1BS,aAAa;QACnB,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;QACvD,OAAO,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,WAAW,CAAC,OAAO,CAAC,CAAC;IACrD,CAAC;IAeD,MAAM;QACJ,OAAO,IAAI,CAAA;eACA,QAAQ,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;eAC7B,QAAQ,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;;;WAGjC,CAAC;IACV,CAAC;;AAtCM,eAAM,GAAG;IACd,GAAG,CAAA;QACC,SAAS,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;;;;;KAKtC;IACD,UAAU;IACV,cAAc;IACd,gBAAgB;CACjB,AAXY,CAWX;AAnBF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;sCACP;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;uCACH;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAC9B;AARF,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAiDpB;SAjDY,QAAQ","sourcesContent":["import { html, css, LitElement, unsafeCSS } from 'lit';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport {\n  TextSize,\n  TextVariant,\n  colorText,\n  colorTextDark,\n} from './enums/tuix-text.enums.js';\nimport { linkFontStyles, textStyles } from './TuixText.styles.js';\nimport { buttonSizeStyles } from '../tuix-button/TuixButton.styles.js';\nimport slottedClassName from '../utils/slottedClassName.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\nimport { LINK_TEXT_COLOR_VAR_NAME } from '../tuix-link/TuixLink.styles.js';\n\n@customElement('tuix-text')\nexport class TuixText extends LitElement {\n  @property({ type: TextSize })\n  size = TextSize.Body1;\n\n  @property({ type: TextVariant })\n  color? = TextVariant.PRIMARY;\n\n  @property({ type: Boolean, reflect: true })\n  dark = false;\n\n  static styles = [\n    css`\n      ${unsafeCSS(slottedClassName('text'))} {\n        font-family: 'Rubik', sans-serif;\n        display: inline;\n        margin: 0;\n      }\n    `,\n    textStyles,\n    linkFontStyles,\n    buttonSizeStyles,\n  ];\n\n  private _getTextColor() {\n    const colorMap = this.dark ? colorTextDark : colorText;\n    return colorMap[this.color || TextVariant.PRIMARY];\n  }\n\n  private _getStyleMap = () => {\n    return {\n      color: `var(${LINK_TEXT_COLOR_VAR_NAME}, ${this._getTextColor()})`,\n    };\n  };\n\n  private _getClassMap = (): ClassInfo => {\n    return {\n      text: true,\n      [this.size]: true,\n    };\n  };\n\n  render() {\n    return html` <div\n      class=\"${classMap(this._getClassMap())}\"\n      style=\"${styleMap(this._getStyleMap())}\"\n    >\n      <slot></slot>\n    </div>`;\n  }\n}\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TuixText.styles.js","sourceRoot":"","sources":["../../../src/tuix-text/TuixText.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,gBAAgB,MAAM,2BAA2B,CAAC;AAEzD,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;IAC7B,SAAS,CAAC;IACV,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC;;;;;;uCAMI,WAAW,CAAC,MAAM;MACnD,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC;;;;;uCAKE,WAAW,CAAC,MAAM;MACnD,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC;;;;;CAKpC,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;IACzB,SAAS,CAAC;IACV,gBAAgB,CAAC,QAAQ,CAAC,EAAE,CAAC;;;;;;IAM7B,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;;;;;;IAM5B,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;;;;;;IAM5B,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;;;;;;IAM5B,gBAAgB,CAAC,QAAQ,CAAC,EAAE,CAAC;;;;;;IAM7B,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC;;;;;;IAMhC,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC;;;;;;IAMhC,gBAAgB,CAAC,QAAQ,CAAC,MAAM,CAAC;;;;;;IAMjC,gBAAgB,CAAC,QAAQ,CAAC,MAAM,CAAC;;;;;;uCAME,WAAW,CAAC,MAAM;MACnD,gBAAgB,CAAC,QAAQ,CAAC,EAAE,CAAC;;;;MAI7B,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;;;;MAI5B,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;;;;MAI5B,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;;;;MAI5B,gBAAgB,CAAC,QAAQ,CAAC,EAAE,CAAC;;;;;MAK7B,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC;;;;;MAKhC,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC;;;;;MAKhC,gBAAgB,CAAC,QAAQ,CAAC,MAAM,CAAC;;;;;;uCAMA,WAAW,CAAC,MAAM;MACnD,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC;;;;;MAKhC,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC;;;;MAIhC,gBAAgB,CAAC,QAAQ,CAAC,MAAM,CAAC;;;;;MAKjC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,CAAC;;;;MAI7B,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;;;;MAI5B,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;;;;MAI5B,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;;;;MAI5B,gBAAgB,CAAC,QAAQ,CAAC,EAAE,CAAC;;;;;CAKlC,CAAC;CACD,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport { TextSize } from './enums/tuix-text.enums';\nimport slottedClassName from '../utils/slottedClassName';\n\nexport const linkFontStyles = css`\n  ${unsafeCSS(`\n  ${slottedClassName(TextSize.Link)} {\n    font-family: 'Rubik', sans-serif;\n    font-size: 1rem;\n    font-weight: 400;\n    line-height: 1.25rem;    \n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    ${slottedClassName(TextSize.Link)} {   \n      font-size: 0.938rem;\n      line-height: 1.125rem;    \n    }  \n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    ${slottedClassName(TextSize.Link)} {   \n      font-size: 0.875rem;\n      line-height: 1rem;    \n    }  \n  }\n`)}\n`;\n\nexport const textStyles = css`\n  ${unsafeCSS(`\n  ${slottedClassName(TextSize.XL)} {\n    font-size: 3.375rem;\n    font-weight: 600;\n    line-height: 3.688rem;\n  }\n\n  ${slottedClassName(TextSize.L)} {\n    font-size: 2.813rem;\n    font-weight: 600;\n    line-height: 3.375rem;\n  }\n\n  ${slottedClassName(TextSize.M)} {\n    font-size: 2.313rem;\n    font-weight: 600;\n    line-height: 2.75rem;\n  }\n\n  ${slottedClassName(TextSize.S)} {\n    font-size: 1.938rem;\n    font-weight: 600;\n    line-height: 2.313rem;\n  }\n\n  ${slottedClassName(TextSize.XS)} {\n    font-size: 1.313rem;\n    font-weight: 600;\n    line-height: 1.563rem;\n  }\n\n  ${slottedClassName(TextSize.Body1)} {\n    font-size: 1.125rem;\n    font-weight: 300;\n    line-height: 1.688rem;\n  }\n\n  ${slottedClassName(TextSize.Body2)} {\n    font-size: 0.938rem;\n    font-weight: 300;\n    line-height: 1.313rem;\n  }\n\n  ${slottedClassName(TextSize.Field1)} {\n    font-size: 1rem;\n    font-weight: 300;\n    line-height: 1.25rem;\n  }\n\n  ${slottedClassName(TextSize.Field2)} {\n    font-size: 0.75rem;\n    font-weight: 300;\n    line-height: 0.875rem;\n  }\n\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    ${slottedClassName(TextSize.XL)} {\n      font-size: 3rem;\n      line-height: 3.313rem;\n    }\n    ${slottedClassName(TextSize.L)} {\n      font-size: 2.5rem;\n      line-height: 3rem;\n    }\n    ${slottedClassName(TextSize.M)} {\n      font-size: 2.063rem;\n      line-height: 2.5rem;\n    }\n    ${slottedClassName(TextSize.S)} {\n      font-size: 1.75rem;\n      line-height: 2.125rem;\n    }\n    ${slottedClassName(TextSize.XS)} {\n      font-size: 1.188rem;\n      line-height: 1.438rem;\n    }\n\n    ${slottedClassName(TextSize.Body1)} {\n      font-size: 1rem;\n      line-height: 1.5rem;\n    }\n\n    ${slottedClassName(TextSize.Body2)} {\n      font-size: 0.875rem;\n      line-height: 1.125rem;\n    }\n\n    ${slottedClassName(TextSize.Field1)} {\n      font-size: 0.938rem;\n      line-height: 1.125rem;\n    }\n  }\n\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    ${slottedClassName(TextSize.Body1)} {\n      font-size: 0.875rem;\n      font-weight: 300;\n      line-height: 1.313rem;\n    }\n    ${slottedClassName(TextSize.Body2)} {\n      font-size: 0.75rem;\n      line-height: 1rem;\n    }\n    ${slottedClassName(TextSize.Field1)} {\n      font-size: 0.875rem;\n      font-weight: 300;\n      line-height: 1rem;\n    }\n    ${slottedClassName(TextSize.XL)} {\n      font-size: 2.625rem;\n      line-height: 2.875rem;\n    }\n    ${slottedClassName(TextSize.L)} {\n      font-size: 2.188rem;\n      line-height: 2.438rem;\n    }\n    ${slottedClassName(TextSize.M)} {\n      font-size: 1.813rem;\n      line-height: 2rem;\n    }\n    ${slottedClassName(TextSize.S)} {\n      font-size: 1.5rem;\n      line-height: 1.625rem;\n    }\n    ${slottedClassName(TextSize.XS)} {\n      font-size: 1.063rem;\n      line-height: 1.188rem;\n    }\n  }\n`)}\n`;\n"]}

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

@@ -1,5 +1,5 @@
-import { Palette } from '../../utils/colors';
-import { DarkPalette } from '../../utils/darkColors';
+import { Palette } from '../../utils/colors.js';
+import { DarkPalette } from '../../utils/darkColors.js';
 export var TextSize;
 (function (TextSize) {
     TextSize["XL"] = "xl";
@@ -61,3 +61,4 @@ export const colorTextDark = {
     [TextVariant.DARK_BLUE]: DarkPalette.PRIMARY_800,
     [TextVariant.TITLE_BLUE]: DarkPalette.PRIMARY_300,
 };
+//# sourceMappingURL=tuix-text.enums.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tuix-text.enums.js","sourceRoot":"","sources":["../../../../src/tuix-text/enums/tuix-text.enums.ts"],"names":[],"mappings":"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","sourcesContent":["import { Palette } from '../../utils/colors';\nimport { DarkPalette } from '../../utils/darkColors';\nimport { MainVariant } from '../../utils/mainVariant.enum';\n\nexport enum TextSize {\n  XL = 'xl',\n  L = 'l',\n  M = 'm',\n  S = 's',\n  XS = 'xs',\n  Body1 = 'body1',\n  Body2 = 'body2',\n  Link = 'link',\n  Button = 'button',\n  Field1 = 'field1',\n  Field2 = 'field2',\n}\n\nexport enum TextVariant {\n  PRIMARY = MainVariant.PRIMARY,\n  SECONDARY = MainVariant.SECONDARY,\n  MAIN = 'main',\n  DARK_MAIN = 'dark_main',\n  GREY = 'grey',\n  LIGHT_GREY = 'light_grey',\n  DISABLED = 'disabled',\n  VALIDATION = 'validation',\n  ERROR = 'error',\n  SUCCESS = 'success',\n  LIGHT = 'light',\n  DARK = 'dark',\n  DARK_BLUE = 'dark_blue',\n  TITLE_BLUE = 'title_blue',\n}\n\nexport const colorText: Record<TextVariant, string> = {\n  [TextVariant.MAIN]: Palette.MAIN,\n  [TextVariant.DARK_MAIN]: Palette.DARK_MAIN,\n  [TextVariant.PRIMARY]: Palette.BLACK,\n  [TextVariant.SECONDARY]: Palette.WHITE,\n  [TextVariant.GREY]: Palette.NEUTRAL_600,\n  [TextVariant.LIGHT_GREY]: Palette.NEUTRAL_200,\n  [TextVariant.DISABLED]: Palette.PRIMARY_200,\n  [TextVariant.VALIDATION]: Palette.VALIDATION,\n  [TextVariant.ERROR]: Palette.ERROR,\n  [TextVariant.SUCCESS]: Palette.SUCCESS,\n  [TextVariant.LIGHT]: Palette.WHITE,\n  [TextVariant.DARK]: Palette.BLACK,\n  [TextVariant.DARK_BLUE]: Palette.DARK_MAIN,\n  [TextVariant.TITLE_BLUE]: Palette.DARK_MAIN,\n};\n\nexport const colorTextDark: Record<TextVariant, string> = {\n  ...colorText,\n  [TextVariant.MAIN]: DarkPalette.MAIN,\n  [TextVariant.DARK_MAIN]: DarkPalette.NEUTRAL_600,\n  [TextVariant.PRIMARY]: DarkPalette.WHITE,\n  [TextVariant.SECONDARY]: Palette.BLACK,\n  [TextVariant.GREY]: DarkPalette.NEUTRAL_600,\n  [TextVariant.VALIDATION]: DarkPalette.VALIDATION,\n  [TextVariant.ERROR]: DarkPalette.ERROR,\n  [TextVariant.SUCCESS]: DarkPalette.SUCCESS,\n  [TextVariant.LIGHT]: DarkPalette.WHITE,\n  [TextVariant.DARK_BLUE]: DarkPalette.PRIMARY_800,\n  [TextVariant.TITLE_BLUE]: DarkPalette.PRIMARY_300,\n};\n"]}

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

@@ -1,5 +1,5 @@
-import { LitElement, type PropertyValueMap } from 'lit';
-import { ToastType, type ToastTypeExcludingNone } from './enums/tuix-toast.enums.js';
+import { LitElement, PropertyValueMap } from 'lit';
+import { ToastType, ToastTypeExcludingNone } from './enums/tuix-toast.enums.js';
 export declare class TuixToast extends LitElement {
     static styles: import("lit").CSSResult[];
     type: ToastType;

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

@@ -41,7 +41,6 @@ let TuixToast = class TuixToast extends LitElement {
     `;
         };
     }
-    static { this.styles = [commonToastStyles, tabletToastStyles, mobileToastStyles]; }
     updated(changedProperties) {
         super.updated(changedProperties);
         if (this.type === ToastType.NONE || this.visibilityDuration === 0)
@@ -82,6 +81,7 @@ let TuixToast = class TuixToast extends LitElement {
     `;
     }
 };
+TuixToast.styles = [commonToastStyles, tabletToastStyles, mobileToastStyles];
 __decorate([
     property({ type: ToastType, reflect: true })
 ], TuixToast.prototype, "type", void 0);
@@ -98,3 +98,4 @@ TuixToast = __decorate([
     customElement('tuix-toast')
 ], TuixToast);
 export { TuixToast };
+//# sourceMappingURL=TuixToast.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TuixToast.js","sourceRoot":"","sources":["../../../src/tuix-toast/TuixToast.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, PropertyValueMap } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums.js';\nimport {\n  BorderRadiusPaper,\n  PaperElevation,\n} from '../tuix-paper/enums/tuix-paper.enum.js';\nimport { Palette } from '../utils/colors.js';\nimport {\n  iconDarkPropertiesMap,\n  iconPropertiesMap,\n  toastBgColorMap,\n  toastBgDarkColorMap,\n  ToastType,\n  ToastTypeExcludingNone,\n} from './enums/tuix-toast.enums.js';\nimport {\n  commonToastStyles,\n  mobileToastStyles,\n  tabletToastStyles,\n} from './TuixToast.styles.js';\n\n@customElement('tuix-toast')\nexport class TuixToast extends LitElement {\n  static styles = [commonToastStyles, tabletToastStyles, mobileToastStyles];\n\n  @property({ type: ToastType, reflect: true })\n  type = ToastType.NONE;\n\n  @property({ type: Number, attribute: 'visibility-duration' })\n  visibilityDuration = 4000;\n\n  @property({ type: Boolean, reflect: true })\n  dark = false;\n\n  @state()\n  lastType = ToastType.SUCCESS as ToastTypeExcludingNone;\n\n  updated(changedProperties: PropertyValueMap<unknown>) {\n    super.updated(changedProperties);\n    if (this.type === ToastType.NONE || this.visibilityDuration === 0) return;\n    setTimeout(() => {\n      this.type = ToastType.NONE;\n      this._handleOnClose();\n    }, this.visibilityDuration);\n  }\n\n  private _handleOnClose() {\n    if (this.visibilityDuration === 0) return;\n    this.dispatchEvent(\n      new CustomEvent('on-close', {\n        bubbles: true,\n      })\n    );\n  }\n\n  private _saveType = () => {\n    if (this.type !== ToastType.NONE) {\n      this.lastType = this.type as ToastTypeExcludingNone;\n    }\n  };\n\n  private _getStyleMap = () => {\n    this._saveType();\n    const bgColorMap = this.dark ? toastBgDarkColorMap : toastBgColorMap;\n    const backgroundColor = bgColorMap[this.lastType];\n\n    return { backgroundColor };\n  };\n\n  private _getIcon = () => {\n    this._saveType();\n    if (this.lastType === ToastType.TEXT) return;\n    const { name: iconName, color: iconColor } = this.dark\n      ? iconDarkPropertiesMap[this.lastType]\n      : iconPropertiesMap[this.lastType];\n    return html`\n      <tuix-icon\n        size=\"${IconSizeVariant.MEDIUM}\"\n        name=\"${iconName}\"\n        color=\"${iconColor}\"\n      ></tuix-icon>\n    `;\n  };\n\n  render() {\n    return html`\n      <tuix-paper\n        elevation=${PaperElevation.VARIANT_4}\n        border-radius=${BorderRadiusPaper.SOFT}\n        ?dark=${this.dark}\n      >\n        <div\n          style=\"${styleMap({\n            backgroundColor: this.dark ? Palette.BLACK : Palette.WHITE,\n            borderRadius: BorderRadiusPaper.SOFT,\n          })}\"\n        >\n          <div class=\"toast-container\" style=\"${styleMap(this._getStyleMap())}\">\n            ${this._getIcon()}\n            <tuix-text ?dark=${this.dark}>\n              <slot></slot>\n            </tuix-text>\n          </div>\n        </div>\n      </tuix-paper>\n    `;\n  }\n}\n"]}

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

@@ -1,5 +1,5 @@
 import { css } from 'lit';
-import { ScreenSizes } from '../utils/screenSizes.enum';
+import { ScreenSizes } from '../utils/screenSizes.enum.js';
 export const commonToastStyles = css `
   :host {
     position: fixed;
@@ -41,3 +41,4 @@ export const mobileToastStyles = css `
     }
   }
 `;
+//# sourceMappingURL=TuixToast.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TuixToast.styles.js","sourceRoot":"","sources":["../../../src/tuix-toast/TuixToast.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;CAyBnC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;uCACG,WAAW,CAAC,MAAM;;;;;CAKxD,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;uCACG,WAAW,CAAC,MAAM;;;;;;CAMxD,CAAC","sourcesContent":["import { css } from 'lit';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\n\nexport const commonToastStyles = css`\n  :host {\n    position: fixed;\n    bottom: -100%;\n    left: 50%;\n    transform: translateX(-50%);\n    transition: bottom 600ms linear;\n    width: 640px;\n    z-index: 99;\n  }\n\n  :host([type='text']),\n  :host([type='warning']),\n  :host([type='error']),\n  :host([type='success']) {\n    bottom: 1.5rem;\n  }\n\n  .toast-container {\n    padding: 12px 16px;\n    display: flex;\n    gap: 16px;\n    align-items: center;\n    border-radius: 4px;\n  }\n`;\n\nexport const tabletToastStyles = css`\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    :host {\n      width: 520px;\n    }\n  }\n`;\n\nexport const mobileToastStyles = css`\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    :host {\n      max-width: 343px;\n      width: 90%;\n    }\n  }\n`;\n"]}

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

@@ -1,6 +1,6 @@
-import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';
-import { Palette } from '../../utils/colors';
-import { DarkPalette } from '../../utils/darkColors';
+import { IconName } from '../../tuix-icon/enums/tuix-icon.enums.js';
+import { Palette } from '../../utils/colors.js';
+import { DarkPalette } from '../../utils/darkColors.js';
 export declare enum ToastType {
     NONE = "none",
     TEXT = "text",

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

@@ -1,6 +1,6 @@
-import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';
-import { Palette } from '../../utils/colors';
-import { DarkPalette } from '../../utils/darkColors';
+import { IconName } from '../../tuix-icon/enums/tuix-icon.enums.js';
+import { Palette } from '../../utils/colors.js';
+import { DarkPalette } from '../../utils/darkColors.js';
 export var ToastType;
 (function (ToastType) {
     ToastType["NONE"] = "none";
@@ -57,3 +57,4 @@ export const iconDarkPropertiesMap = {
         color: DarkPalette.SUCCESS,
     },
 };
+//# sourceMappingURL=tuix-toast.enums.js.map

package/dist/src/tuix-toast/enums/tuix-toast.enums.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tuix-toast.enums.js","sourceRoot":"","sources":["../../../../src/tuix-toast/enums/tuix-toast.enums.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,MAAM,CAAN,IAAY,SAMX;AAND,WAAY,SAAS;IACnB,0BAAa,CAAA;IACb,0BAAa,CAAA;IACb,gCAAmB,CAAA;IACnB,4BAAe,CAAA;IACf,gCAAmB,CAAA;AACrB,CAAC,EANW,SAAS,KAAT,SAAS,QAMpB;AASD,MAAM,CAAC,MAAM,eAAe,GAA2C;IACrE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,KAAK;IAC/B,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa;IAC1C,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,QAAQ;IACnC,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU;CACxC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAA2C;IACzE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,WAAW;IACrC,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,aAAa;IAC9C,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,QAAQ;IACvC,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,UAAU;CAC5C,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAC5B;IACE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE;QAChB,IAAI,EAAE,QAAQ,CAAC,UAAU;QACzB,KAAK,EAAE,OAAO,CAAC,KAAK;KACrB;IACD,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE;QACnB,IAAI,EAAE,QAAQ,CAAC,oBAAoB;QACnC,KAAK,EAAE,OAAO,CAAC,UAAU;KAC1B;IACD,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE;QACjB,IAAI,EAAE,QAAQ,CAAC,kBAAkB;QACjC,KAAK,EAAE,OAAO,CAAC,KAAK;KACrB;IACD,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE;QACnB,IAAI,EAAE,QAAQ,CAAC,YAAY;QAC3B,KAAK,EAAE,OAAO,CAAC,OAAO;KACvB;CACF,CAAC;AAEJ,MAAM,CAAC,MAAM,qBAAqB,GAG9B;IACF,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE;QAChB,IAAI,EAAE,QAAQ,CAAC,UAAU;QACzB,KAAK,EAAE,OAAO,CAAC,KAAK;KACrB;IACD,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE;QACnB,IAAI,EAAE,QAAQ,CAAC,oBAAoB;QACnC,KAAK,EAAE,WAAW,CAAC,UAAU;KAC9B;IACD,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE;QACjB,IAAI,EAAE,QAAQ,CAAC,kBAAkB;QACjC,KAAK,EAAE,WAAW,CAAC,KAAK;KACzB;IACD,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE;QACnB,IAAI,EAAE,QAAQ,CAAC,YAAY;QAC3B,KAAK,EAAE,WAAW,CAAC,OAAO;KAC3B;CACF,CAAC","sourcesContent":["import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';\nimport { Palette } from '../../utils/colors';\nimport { DarkPalette } from '../../utils/darkColors';\n\nexport enum ToastType {\n  NONE = 'none',\n  TEXT = 'text',\n  WARNING = 'warning',\n  ERROR = 'error',\n  SUCCESS = 'success',\n}\n\nexport type ToastTypeExcludingNone = Exclude<ToastType, ToastType.NONE>;\n\ninterface IconProperties {\n  name: IconName;\n  color: Palette | DarkPalette;\n}\n\nexport const toastBgColorMap: Record<ToastTypeExcludingNone, string> = {\n  [ToastType.TEXT]: Palette.WHITE,\n  [ToastType.WARNING]: Palette.VALIDATION_50,\n  [ToastType.ERROR]: Palette.ERROR_50,\n  [ToastType.SUCCESS]: Palette.SUCCESS_50,\n};\n\nexport const toastBgDarkColorMap: Record<ToastTypeExcludingNone, string> = {\n  [ToastType.TEXT]: Palette.PRIMARY_950,\n  [ToastType.WARNING]: DarkPalette.VALIDATION_50,\n  [ToastType.ERROR]: DarkPalette.ERROR_50,\n  [ToastType.SUCCESS]: DarkPalette.SUCCESS_50,\n};\n\nexport const iconPropertiesMap: Record<ToastTypeExcludingNone, IconProperties> =\n  {\n    [ToastType.TEXT]: {\n      name: IconName.ARROW_DOWN,\n      color: Palette.BLACK,\n    },\n    [ToastType.WARNING]: {\n      name: IconName.TRIANGLE_EXCLAMATION,\n      color: Palette.VALIDATION,\n    },\n    [ToastType.ERROR]: {\n      name: IconName.CIRCLE_EXCLAMATION,\n      color: Palette.ERROR,\n    },\n    [ToastType.SUCCESS]: {\n      name: IconName.CIRCLE_CHECK,\n      color: Palette.SUCCESS,\n    },\n  };\n\nexport const iconDarkPropertiesMap: Record<\n  ToastTypeExcludingNone,\n  IconProperties\n> = {\n  [ToastType.TEXT]: {\n    name: IconName.ARROW_DOWN,\n    color: Palette.WHITE,\n  },\n  [ToastType.WARNING]: {\n    name: IconName.TRIANGLE_EXCLAMATION,\n    color: DarkPalette.VALIDATION,\n  },\n  [ToastType.ERROR]: {\n    name: IconName.CIRCLE_EXCLAMATION,\n    color: DarkPalette.ERROR,\n  },\n  [ToastType.SUCCESS]: {\n    name: IconName.CIRCLE_CHECK,\n    color: DarkPalette.SUCCESS,\n  },\n};\n"]}

package/dist/src/tuix-toggle-button/TuixToggleButton.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums';
+import { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums.js';
 export declare class TuixToggleButton extends LitElement {
     static styles: import("lit").CSSResult[];
     checked: boolean;

package/dist/src/tuix-toggle-button/TuixToggleButton.js

@@ -2,9 +2,9 @@ import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums';
-import { TextSize, TextVariant } from '../tuix-text/enums/tuix-text.enums';
-import { toggleButtonCheckmarkStyles, toggleButtonContainerStyles, toggleButtonHostStyles, toggleButtonInnerStyles, toggleButtonLabelStyles, } from './TuixToggleButton.styles';
+import { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums.js';
+import { TextSize, TextVariant } from '../tuix-text/enums/tuix-text.enums.js';
+import { toggleButtonCheckmarkStyles, toggleButtonContainerStyles, toggleButtonHostStyles, toggleButtonInnerStyles, toggleButtonLabelStyles, } from './TuixToggleButton.styles.js';
 let TuixToggleButton = class TuixToggleButton extends LitElement {
     constructor() {
         super(...arguments);
@@ -14,13 +14,6 @@ let TuixToggleButton = class TuixToggleButton extends LitElement {
         this.label = '';
         this.labelSide = CheckboxLabelSide.RIGHT;
     }
-    static { this.styles = [
-        toggleButtonHostStyles,
-        toggleButtonContainerStyles,
-        toggleButtonCheckmarkStyles,
-        toggleButtonInnerStyles,
-        toggleButtonLabelStyles,
-    ]; }
     _onToggleButtonChange(event) {
         this.dispatchEvent(new CustomEvent('change', {
             detail: {
@@ -64,6 +57,13 @@ let TuixToggleButton = class TuixToggleButton extends LitElement {
     </label>`;
     }
 };
+TuixToggleButton.styles = [
+    toggleButtonHostStyles,
+    toggleButtonContainerStyles,
+    toggleButtonCheckmarkStyles,
+    toggleButtonInnerStyles,
+    toggleButtonLabelStyles,
+];
 __decorate([
     property({ type: Boolean })
 ], TuixToggleButton.prototype, "checked", void 0);
@@ -83,3 +83,4 @@ TuixToggleButton = __decorate([
     customElement('tuix-toggle-button')
 ], TuixToggleButton);
 export { TuixToggleButton };
+//# sourceMappingURL=TuixToggleButton.js.map

package/dist/src/tuix-toggle-button/TuixToggleButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TuixToggleButton.js","sourceRoot":"","sources":["../../../src/tuix-toggle-button/TuixToggleButton.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAa,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAC/E,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EACL,2BAA2B,EAC3B,2BAA2B,EAC3B,sBAAsB,EACtB,uBAAuB,EACvB,uBAAuB,GACxB,MAAM,2BAA2B,CAAC;AAGnC,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,UAAU;IAAhD;;QAUE,YAAO,GAAG,KAAK,CAAC;QAGhB,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,KAAK,CAAC;QAGb,UAAK,GAAG,EAAE,CAAC;QAGX,cAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC;IAgDtC,CAAC;IA9CS,qBAAqB,CAAC,KAAiB;QAC7C,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,MAAM,EAAE;gBACN,KAAK,EAAG,KAAK,CAAC,MAA2B,CAAC,OAAO;gBACjD,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB;YACD,OAAO,EAAE,IAAI;SACd,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,wBAAwB;QAC9B,OAAO;YACL,gCAAgC,EAAE,IAAI;YACtC,mBAAmB,EAAE,IAAI,CAAC,SAAS,KAAK,iBAAiB,CAAC,IAAI;SAC/D,CAAC;IACJ,CAAC;IAES,MAAM;QACd,OAAO,IAAI,CAAA,iBAAiB,QAAQ,CAAC,IAAI,CAAC,wBAAwB,EAAE,CAAC;;;;;sBAKnD,IAAI,CAAC,OAAO;uBACX,IAAI,CAAC,QAAQ;qBACf,IAAI,CAAC,qBAAqB;;;;;;;;;oBAS3B,QAAQ,CAAC,MAAM;qBACd,WAAW,CAAC,OAAO;qBACnB,IAAI,CAAC,IAAI;;cAEhB,IAAI,CAAC,KAAK;;;;aAIX,CAAC;IACZ,CAAC;;AApEM,uBAAM,GAAG;IACd,sBAAsB;IACtB,2BAA2B;IAC3B,2BAA2B;IAC3B,uBAAuB;IACvB,uBAAuB;CACxB,AANY,CAMX;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACZ;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAC9B;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAChB;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACS;AAtBzB,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAsE5B;SAtEY,gBAAgB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\nimport { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums';\nimport { TextSize, TextVariant } from '../tuix-text/enums/tuix-text.enums';\nimport {\n  toggleButtonCheckmarkStyles,\n  toggleButtonContainerStyles,\n  toggleButtonHostStyles,\n  toggleButtonInnerStyles,\n  toggleButtonLabelStyles,\n} from './TuixToggleButton.styles';\n\n@customElement('tuix-toggle-button')\nexport class TuixToggleButton extends LitElement {\n  static styles = [\n    toggleButtonHostStyles,\n    toggleButtonContainerStyles,\n    toggleButtonCheckmarkStyles,\n    toggleButtonInnerStyles,\n    toggleButtonLabelStyles,\n  ];\n\n  @property({ type: Boolean })\n  checked = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  dark = false;\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String })\n  labelSide = CheckboxLabelSide.RIGHT;\n\n  private _onToggleButtonChange(event: InputEvent) {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: {\n          value: (event.target as HTMLInputElement).checked,\n          label: this.label,\n        },\n        bubbles: true,\n      })\n    );\n  }\n\n  private _getFullContainerClasses(): ClassInfo {\n    return {\n      't-toggle-button-full-container': true,\n      't-with-label-left': this.labelSide === CheckboxLabelSide.LEFT,\n    };\n  }\n\n  protected render() {\n    return html`<label class=\"${classMap(this._getFullContainerClasses())}\">\n      <div class=\"t-toggle-button-container\">\n        <input\n          type=\"checkbox\"\n          class=\"t-toggle-button\"\n          .checked=\"${this.checked}\"\n          ?disabled=\"${this.disabled}\"\n          @change=\"${this._onToggleButtonChange}\"\n        />\n        <div class=\"t-toggle-button-checkmark\">\n          <div class=\"t-toggle-button-inner\"></div>\n        </div>\n      </div>\n      <div class=\"t-toggle-button-label\">\n        <slot>\n          <tuix-text\n            size=\"${TextSize.Field1}\"\n            color=\"${TextVariant.PRIMARY}\"\n            ?dark=\"${this.dark}\"\n          >\n            ${this.label}\n          </tuix-text>\n        </slot>\n      </div>\n    </label>`;\n  }\n}\n"]}

package/dist/src/tuix-toggle-button/TuixToggleButton.styles.js

@@ -1,8 +1,8 @@
 import { css, unsafeCSS } from 'lit';
-import { hostStyles } from '../tuix-checkbox/TuixCheckbox.styles';
-import { Palette } from '../utils/colors';
-import { DarkPalette } from '../utils/darkColors';
-import { ScreenSizes } from '../utils/screenSizes.enum';
+import { hostStyles } from '../tuix-checkbox/TuixCheckbox.styles.js';
+import { Palette } from '../utils/colors.js';
+import { DarkPalette } from '../utils/darkColors.js';
+import { ScreenSizes } from '../utils/screenSizes.enum.js';
 export const toggleButtonHostStyles = css `
   ${hostStyles}
   :host {
@@ -132,3 +132,4 @@ export const toggleButtonLabelStyles = css `
     margin-left: 0;
   }
 `;
+//# sourceMappingURL=TuixToggleButton.styles.js.map

package/dist/src/tuix-toggle-button/TuixToggleButton.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TuixToggleButton.styles.js","sourceRoot":"","sources":["../../../src/tuix-toggle-button/TuixToggleButton.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;IACrC,UAAU;;4BAEc,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;6BAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;;;4BAI/B,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC;6BACjC,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC;0BACrC,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC;;;0BAG5B,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC;;CAEpD,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCAgCP,WAAW,CAAC,MAAM;;;;;;;;CAQxD,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkC7C,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;gDAEM,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;;;;;;;;;;;;;;;;;;;CAmBvE,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;CAczC,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { hostStyles } from '../tuix-checkbox/TuixCheckbox.styles';\nimport { Palette } from '../utils/colors';\nimport { DarkPalette } from '../utils/darkColors';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\n\nexport const toggleButtonHostStyles = css`\n  ${hostStyles}\n  :host {\n    --t-bg-color-primary: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-bg-color-disabled: ${unsafeCSS(Palette.PRIMARY_100)};\n    --t-toggle-shadow-color-focus: rgba(142, 141, 208, 0.16);\n  }\n  :host([dark]) {\n    --t-bg-color-primary: ${unsafeCSS(DarkPalette.PRIMARY_800)};\n    --t-bg-color-disabled: ${unsafeCSS(DarkPalette.PRIMARY_800)};\n    --t-bg-color-inner: ${unsafeCSS(DarkPalette.WHITE)};\n  }\n  :host([dark][disabled]) {\n    --t-bg-color-inner: ${unsafeCSS(DarkPalette.MAIN)};\n  }\n`;\n\nexport const toggleButtonContainerStyles = css`\n  .t-toggle-button-full-container {\n    display: flex;\n    justify-content: var(--t-label-right-default-justify, flex-start);\n    cursor: pointer;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n  :host([disabled]) .t-toggle-button-full-container {\n    cursor: not-allowed;\n  }\n  .t-toggle-button-container {\n    --t-toggle-button-size-box: 3rem;\n    --t-toggle-button-shadow-width: 2px;\n    --t-toggle-inner-radio: 1rem;\n    display: block;\n    position: relative;\n    height: calc(var(--t-toggle-button-size-box) / 2);\n    width: var(--t-toggle-button-size-box);\n    min-width: var(--t-toggle-button-size-box);\n  }\n  .t-toggle-button-container .t-toggle-button {\n    position: absolute;\n    opacity: 0;\n    height: 0;\n    width: 0;\n  }\n  .t-radio-button-full-container:not(.t-with-label-left) {\n    justify-content: flex-start;\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-toggle-button-container {\n      --t-toggle-button-size-box: 2rem;\n      --t-toggle-button-shadow-width: 1px;\n      --t-toggle-inner-radio: 0.75rem;\n      margin-top: 1px;\n    }\n  }\n`;\n\nexport const toggleButtonCheckmarkStyles = css`\n  .t-toggle-button-container .t-toggle-button-checkmark {\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: flex;\n    height: calc(var(--t-toggle-button-size-box) / 2);\n    width: var(--t-toggle-button-size-box);\n    border-radius: 0.75rem;\n    background-color: var(--t-bg-color-primary);\n    box-sizing: border-box;\n  }\n  .t-toggle-button-container\n    .t-toggle-button:checked\n    ~ .t-toggle-button-checkmark {\n    background-color: var(--t-main-color-tuix);\n  }\n  .t-toggle-button-full-container:hover\n    .t-toggle-button-container\n    .t-toggle-button-checkmark {\n    box-shadow: 0px 4px 4px 0px var(--t-toggle-shadow-color-focus);\n  }\n  .t-toggle-button-container\n    .t-toggle-button:focus\n    ~ .t-toggle-button-checkmark {\n    box-shadow: 0 0 0px var(--t-toggle-button-shadow-width)\n      var(--t-stroke-color-focus);\n  }\n  .t-toggle-button-container\n    .t-toggle-button:disabled\n    ~ .t-toggle-button-checkmark {\n    background-color: var(--t-bg-color-disabled);\n    box-shadow: none;\n  }\n`;\n\nexport const toggleButtonInnerStyles = css`\n  .t-toggle-button-container .t-toggle-button-checkmark .t-toggle-button-inner {\n    background-color: var(--t-bg-color-inner, ${unsafeCSS(Palette.WHITE)});\n    margin: auto auto auto calc(var(--t-toggle-button-shadow-width) * 2);\n    height: var(--t-toggle-inner-radio);\n    width: var(--t-toggle-inner-radio);\n    border-radius: 50%;\n    display: block;\n    transition: 0.3s;\n  }\n  .t-toggle-button-container\n    .t-toggle-button:checked\n    ~ .t-toggle-button-checkmark\n    .t-toggle-button-inner {\n    transform: translateX(\n      calc(\n        var(--t-toggle-button-size-box) - var(--t-toggle-inner-radio) -\n          var(--t-toggle-button-shadow-width) * 4\n      )\n    );\n  }\n`;\n\nexport const toggleButtonLabelStyles = css`\n  .t-toggle-button-label {\n    display: block;\n    color: var(--t-text-color-label);\n    margin-left: 0.625rem;\n  }\n  .t-toggle-button-full-container.t-with-label-left {\n    flex-direction: row-reverse;\n    justify-content: var(--t-label-left-default-justify, space-between);\n  }\n  .t-toggle-button-full-container.t-with-label-left .t-toggle-button-label {\n    margin-right: 0.625rem;\n    margin-left: 0;\n  }\n`;\n"]}

package/dist/src/tuix-toggle-button/interfaces/tuix-toggle.interface.d.ts

@@ -1,2 +1,2 @@
-import { type CustomEventTuixCheckbox } from '../../tuix-checkbox/interfaces/tuix-checkbox.interface';
+import { CustomEventTuixCheckbox } from '../../tuix-checkbox/interfaces/tuix-checkbox.interface.js';
 export type CustomEventTuixToggle = CustomEventTuixCheckbox;

package/dist/src/tuix-toggle-button/interfaces/tuix-toggle.interface.js

@@ -1 +1,2 @@
 export {};
+//# sourceMappingURL=tuix-toggle.interface.js.map

package/dist/src/tuix-toggle-button/interfaces/tuix-toggle.interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tuix-toggle.interface.js","sourceRoot":"","sources":["../../../../src/tuix-toggle-button/interfaces/tuix-toggle.interface.ts"],"names":[],"mappings":"","sourcesContent":["import { CustomEventTuixCheckbox } from '../../tuix-checkbox/interfaces/tuix-checkbox.interface';\n\nexport type CustomEventTuixToggle = CustomEventTuixCheckbox;\n"]}