tuix-webcomponents 0.0.32 → 0.0.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/README.md +2 -2
  2. package/custom-elements.json +1549 -1369
  3. package/dist/src/index.d.ts +1 -1
  4. package/dist/src/react/index.d.ts +2 -1
  5. package/dist/src/react/index.js +1 -0
  6. package/dist/src/tuix-button/TuixBaseButton.d.ts +2 -2
  7. package/dist/src/tuix-button/TuixBaseButton.js +2 -2
  8. package/dist/src/tuix-button/TuixButton.d.ts +2 -2
  9. package/dist/src/tuix-button/TuixButton.js +4 -4
  10. package/dist/src/tuix-button/TuixButton.styles.js +6 -6
  11. package/dist/src/tuix-button/enums/tuix-button.enums.d.ts +1 -1
  12. package/dist/src/tuix-button/enums/tuix-button.enums.js +2 -2
  13. package/dist/src/tuix-checkbox/TuixCheckbox.d.ts +1 -1
  14. package/dist/src/tuix-checkbox/TuixCheckbox.js +4 -4
  15. package/dist/src/tuix-checkbox/TuixCheckbox.styles.js +3 -3
  16. package/dist/src/tuix-checkbox/enums/tuix-checkbox.enums.d.ts +2 -2
  17. package/dist/src/tuix-checkbox/enums/tuix-checkbox.enums.js +2 -2
  18. package/dist/src/tuix-checkbox/interfaces/tuix-checkbox.interface.d.ts +1 -1
  19. package/dist/src/tuix-dropdown/TuixDropdown.d.ts +3 -3
  20. package/dist/src/tuix-dropdown/TuixDropdown.js +4 -4
  21. package/dist/src/tuix-dropdown/TuixDropdown.styles.js +4 -4
  22. package/dist/src/tuix-dropdown/interfaces/tuix-dropdown.interface.d.ts +2 -2
  23. package/dist/src/tuix-icon/TuixIcon.d.ts +2 -2
  24. package/dist/src/tuix-icon/TuixIcon.icons.d.ts +1 -1
  25. package/dist/src/tuix-icon/TuixIcon.icons.js +2 -13
  26. package/dist/src/tuix-icon/TuixIcon.js +4 -4
  27. package/dist/src/tuix-icon/enums/tuix-icon.enums.d.ts +0 -3
  28. package/dist/src/tuix-icon/enums/tuix-icon.enums.js +0 -3
  29. package/dist/src/tuix-icon-button/TuixIconButton.d.ts +2 -2
  30. package/dist/src/tuix-icon-button/TuixIconButton.js +4 -4
  31. package/dist/src/tuix-input/TuixInput.d.ts +1 -1
  32. package/dist/src/tuix-input/TuixInput.js +1 -1
  33. package/dist/src/tuix-input/TuixInput.styles.js +4 -4
  34. package/dist/src/tuix-input/enums/tuix-input.enums.d.ts +3 -3
  35. package/dist/src/tuix-input/enums/tuix-input.enums.js +3 -3
  36. package/dist/src/tuix-input/interfaces/tuix-input.interface.d.ts +5 -5
  37. package/dist/src/tuix-link/TuixLink.d.ts +2 -2
  38. package/dist/src/tuix-link/TuixLink.js +4 -4
  39. package/dist/src/tuix-link/TuixLink.styles.js +3 -3
  40. package/dist/src/tuix-modal/TuixModal.styles.js +2 -2
  41. package/dist/src/tuix-paper/TuixPaper.d.ts +1 -1
  42. package/dist/src/tuix-paper/TuixPaper.js +2 -2
  43. package/dist/src/tuix-paper/TuixPaper.styles.js +2 -2
  44. package/dist/src/tuix-radio-button/TuixRadioButton.d.ts +2 -2
  45. package/dist/src/tuix-radio-button/TuixRadioButton.js +3 -3
  46. package/dist/src/tuix-radio-button/TuixRadioButton.styles.js +3 -3
  47. package/dist/src/tuix-radio-button/interfaces/tuix-radio-button.interface.d.ts +1 -1
  48. package/dist/src/tuix-table/TuixTable.d.ts +10 -2
  49. package/dist/src/tuix-table/TuixTable.js +168 -84
  50. package/dist/src/tuix-table/TuixTable.styles.d.ts +1 -0
  51. package/dist/src/tuix-table/TuixTable.styles.js +137 -34
  52. package/dist/src/tuix-table/interfaces/tuix-table.interface.d.ts +11 -0
  53. package/dist/src/tuix-text/TuixText.styles.js +3 -3
  54. package/dist/src/tuix-text/enums/tuix-text.enums.js +2 -2
  55. package/dist/src/tuix-toast/TuixToast.styles.js +1 -1
  56. package/dist/src/tuix-toast/enums/tuix-toast.enums.d.ts +3 -3
  57. package/dist/src/tuix-toast/enums/tuix-toast.enums.js +3 -3
  58. package/dist/src/tuix-toggle-button/TuixToggleButton.d.ts +1 -1
  59. package/dist/src/tuix-toggle-button/TuixToggleButton.js +3 -3
  60. package/dist/src/tuix-toggle-button/TuixToggleButton.styles.js +4 -4
  61. package/dist/src/tuix-toggle-button/interfaces/tuix-toggle.interface.d.ts +1 -1
  62. package/package.json +2 -3
@@ -17,7 +17,7 @@ export { TuixCheckbox } from './tuix-checkbox/TuixCheckbox.js';
17
17
  export { TuixRadioButton } from './tuix-radio-button/TuixRadioButton.js';
18
18
  export { TuixToggleButton } from './tuix-toggle-button/TuixToggleButton.js';
19
19
  export { TuixTable } from './tuix-table/TuixTable.js';
20
- export type { IDataTableHeader, PaginationEventDetail, ThreeDotsLoaderConfig, TuixPaginationEvent, TuixTableElement, } from './tuix-table/interfaces/tuix-table.interface.js';
20
+ export type { IDataTableHeader, PaginationEventDetail, SortDirection, SortEventDetail, ThreeDotsLoaderConfig, TuixPaginationEvent, TuixSortEvent, TuixTableElement, } from './tuix-table/interfaces/tuix-table.interface.js';
21
21
  export { TuixToast } from './tuix-toast/TuixToast.js';
22
22
  export { TuixModal } from './tuix-modal/TuixModal.js';
23
23
  export { ToastType } from './tuix-toast/enums/tuix-toast.enums.js';
@@ -1,6 +1,6 @@
1
1
  import { type EventName } from '@lit/react';
2
2
  import { TuixText as WrappedTuixText, TuixIcon as WrappedTuixIcon, TuixButton as WrappedTuixButton, TuixPaper as WrappedTuixPaper, TuixIconButton as WrappedTuixIconButton, TuixLink as WrappedTuixLink, TuixInput as WrappedTuixInput, TuixDropdown as WrappedTuixDropdown, TuixCheckbox as WrappedTuixCheckbox, TuixRadioButton as WrappedTuixRadioButton, TuixToggleButton as WrappedTuixToggleButton, TuixTable as WrappedTuixTable, TuixToast as WrappedTuixToast, TuixModal as WrappedTuixModal } from '../index.js';
3
- import type { DetailValue, DetailValueCheckbox, PaginationEventDetail, TuixDropdownPlainOption } from '../index.js';
3
+ import type { DetailValue, DetailValueCheckbox, PaginationEventDetail, SortEventDetail, TuixDropdownPlainOption } from '../index.js';
4
4
  export declare const TuixText: import("@lit/react").ReactWebComponent<WrappedTuixText, {}>;
5
5
  export declare const TuixIcon: import("@lit/react").ReactWebComponent<WrappedTuixIcon, {}>;
6
6
  export declare const TuixButton: import("@lit/react").ReactWebComponent<WrappedTuixButton, {
@@ -33,6 +33,7 @@ export declare const TuixTable: import("@lit/react").ReactWebComponent<WrappedTu
33
33
  onNextPage: EventName<CustomEvent<PaginationEventDetail>>;
34
34
  onPreviousPage: EventName<CustomEvent<PaginationEventDetail>>;
35
35
  onPageSizeChange: EventName<CustomEvent<PaginationEventDetail>>;
36
+ onSort: EventName<CustomEvent<SortEventDetail>>;
36
37
  }>;
37
38
  export declare const TuixToast: import("@lit/react").ReactWebComponent<WrappedTuixToast, {
38
39
  onClose: EventName<CustomEvent<undefined>>;
@@ -94,6 +94,7 @@ export const TuixTable = createComponent({
94
94
  onNextPage: 'next-page',
95
95
  onPreviousPage: 'previous-page',
96
96
  onPageSizeChange: 'page-size-change',
97
+ onSort: 'sort',
97
98
  },
98
99
  });
99
100
  export const TuixToast = createComponent({
@@ -1,6 +1,6 @@
1
1
  import { LitElement, type TemplateResult } from 'lit';
2
- import { MainVariant } from '../utils/mainVariant.enum.js';
3
- import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums.js';
2
+ import { MainVariant } from '../utils/mainVariant.enum';
3
+ import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
4
4
  import '../tuix-icon/TuixIcon.js';
5
5
  export declare abstract class TuixBaseButton extends LitElement {
6
6
  variant: MainVariant;
@@ -1,8 +1,8 @@
1
1
  import { __decorate } from "tslib";
2
2
  import { LitElement, html } from 'lit';
3
- import { MainVariant } from '../utils/mainVariant.enum.js';
3
+ import { MainVariant } from '../utils/mainVariant.enum';
4
4
  import { property, state } from 'lit/decorators.js';
5
- import { buttonTextColor } from './enums/tuix-button.enums.js';
5
+ import { buttonTextColor } from './enums/tuix-button.enums';
6
6
  import '../tuix-icon/TuixIcon.js';
7
7
  export class TuixBaseButton extends LitElement {
8
8
  constructor() {
@@ -1,6 +1,6 @@
1
1
  import { type TemplateResult } from 'lit';
2
- import { IconName } from '../tuix-icon/enums/tuix-icon.enums.js';
3
- import { TuixBaseButton } from './TuixBaseButton.js';
2
+ import { IconName } from '../tuix-icon/enums/tuix-icon.enums';
3
+ import { TuixBaseButton } from './TuixBaseButton';
4
4
  export declare class TuixButton extends TuixBaseButton {
5
5
  static styles: import("lit").CSSResult[];
6
6
  full: boolean;
@@ -1,10 +1,10 @@
1
1
  import { __decorate } from "tslib";
2
2
  import { css, html, nothing } from 'lit';
3
- import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums.js';
4
- import { buttonSizeStyles, buttonColorStyles, hostButtonStyles, } from './TuixButton.styles.js';
3
+ import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
4
+ import { buttonSizeStyles, buttonColorStyles, hostButtonStyles, } from './TuixButton.styles';
5
5
  import { customElement, property } from 'lit/decorators.js';
6
- import { ScreenSizes } from '../utils/screenSizes.enum.js';
7
- import { TuixBaseButton } from './TuixBaseButton.js';
6
+ import { ScreenSizes } from '../utils/screenSizes.enum';
7
+ import { TuixBaseButton } from './TuixBaseButton';
8
8
  let TuixButton = class TuixButton extends TuixBaseButton {
9
9
  constructor() {
10
10
  super(...arguments);
@@ -1,10 +1,10 @@
1
1
  import { css, unsafeCSS } from 'lit';
2
- import { Palette } from '../utils/colors.js';
3
- import { ScreenSizes } from '../utils/screenSizes.enum.js';
4
- import { DarkPalette } from '../utils/darkColors.js';
5
- import { MainVariant } from '../utils/mainVariant.enum.js';
6
- import slottedClassName from '../utils/slottedClassName.js';
7
- import { TextSize } from '../tuix-text/enums/tuix-text.enums.js';
2
+ import { Palette } from '../utils/colors';
3
+ import { ScreenSizes } from '../utils/screenSizes.enum';
4
+ import { DarkPalette } from '../utils/darkColors';
5
+ import { MainVariant } from '../utils/mainVariant.enum';
6
+ import slottedClassName from '../utils/slottedClassName';
7
+ import { TextSize } from '../tuix-text/enums/tuix-text.enums';
8
8
  export const hostButtonStyles = css `
9
9
  :host {
10
10
  --t-button-primary-color: ${unsafeCSS(Palette.MAIN)};
@@ -1,2 +1,2 @@
1
- import { MainVariant } from '../../utils/mainVariant.enum.js';
1
+ import { MainVariant } from '../../utils/mainVariant.enum';
2
2
  export declare const buttonTextColor: Record<MainVariant, string>;
@@ -1,5 +1,5 @@
1
- import { Palette } from '../../utils/colors.js';
2
- import { MainVariant } from '../../utils/mainVariant.enum.js';
1
+ import { Palette } from '../../utils/colors';
2
+ import { MainVariant } from '../../utils/mainVariant.enum';
3
3
  export const buttonTextColor = {
4
4
  [MainVariant.PRIMARY]: Palette.WHITE,
5
5
  [MainVariant.SECONDARY]: Palette.MAIN,
@@ -1,7 +1,7 @@
1
1
  import { LitElement, type TemplateResult } from 'lit';
2
2
  import '../tuix-icon/TuixIcon.js';
3
3
  import '../tuix-text/TuixText.js';
4
- import { CheckboxLabelSide } from './enums/tuix-checkbox.enums.js';
4
+ import { CheckboxLabelSide } from './enums/tuix-checkbox.enums';
5
5
  export declare class TuixCheckbox extends LitElement {
6
6
  static styles: import("lit").CSSResult[];
7
7
  checked: boolean;
@@ -4,10 +4,10 @@ import { customElement, property } from 'lit/decorators.js';
4
4
  import { classMap } from 'lit/directives/class-map.js';
5
5
  import '../tuix-icon/TuixIcon.js';
6
6
  import '../tuix-text/TuixText.js';
7
- import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums.js';
8
- import { TextSize, TextVariant } from '../tuix-text/enums/tuix-text.enums.js';
9
- import { checkboxCheckmarkStyles, checkboxContainerStyles, checkboxLabelStyles, hostStyles, } from './TuixCheckbox.styles.js';
10
- import { CheckboxIconColorDark, CheckboxIconColorLight, CheckboxIconMode, CheckboxLabelSide, } from './enums/tuix-checkbox.enums.js';
7
+ import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
8
+ import { TextSize, TextVariant } from '../tuix-text/enums/tuix-text.enums';
9
+ import { checkboxCheckmarkStyles, checkboxContainerStyles, checkboxLabelStyles, hostStyles, } from './TuixCheckbox.styles';
10
+ import { CheckboxIconColorDark, CheckboxIconColorLight, CheckboxIconMode, CheckboxLabelSide, } from './enums/tuix-checkbox.enums';
11
11
  let TuixCheckbox = class TuixCheckbox extends LitElement {
12
12
  constructor() {
13
13
  super(...arguments);
@@ -1,7 +1,7 @@
1
1
  import { css, unsafeCSS } from 'lit';
2
- import { Palette } from '../utils/colors.js';
3
- import { DarkPalette } from '../utils/darkColors.js';
4
- import { ScreenSizes } from '../utils/screenSizes.enum.js';
2
+ import { Palette } from '../utils/colors';
3
+ import { DarkPalette } from '../utils/darkColors';
4
+ import { ScreenSizes } from '../utils/screenSizes.enum';
5
5
  export const hostStyles = css `
6
6
  :host {
7
7
  --t-main-color-tuix: ${unsafeCSS(Palette.MAIN)};
@@ -1,5 +1,5 @@
1
- import { Palette } from '../../utils/colors.js';
2
- import { DarkPalette } from '../../utils/darkColors.js';
1
+ import { Palette } from '../../utils/colors';
2
+ import { DarkPalette } from '../../utils/darkColors';
3
3
  export declare enum CheckboxIconMode {
4
4
  DEFAULT = "default",
5
5
  DISABLED = "disabled",
@@ -1,5 +1,5 @@
1
- import { Palette } from '../../utils/colors.js';
2
- import { DarkPalette } from '../../utils/darkColors.js';
1
+ import { Palette } from '../../utils/colors';
2
+ import { DarkPalette } from '../../utils/darkColors';
3
3
  export var CheckboxIconMode;
4
4
  (function (CheckboxIconMode) {
5
5
  CheckboxIconMode["DEFAULT"] = "default";
@@ -1,4 +1,4 @@
1
- import { type DetailValue } from '../../utils/interfaces/detail-value.interface.js';
1
+ import { type DetailValue } from '../../utils/interfaces/detail-value.interface';
2
2
  export interface DetailValueCheckbox extends DetailValue<boolean> {
3
3
  label?: string;
4
4
  }
@@ -1,8 +1,8 @@
1
1
  import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
2
2
  import '../tuix-input/TuixInput.js';
3
- import type { TuixDropdownExtendedOption, TuixDropdownOption } from './interfaces/tuix-dropdown.interface.js';
4
- import { DescriptionType } from '../tuix-input/enums/tuix-input.enums.js';
5
- import { DropdownType } from './enums/tuix-dropdown.enums.js';
3
+ import type { TuixDropdownExtendedOption, TuixDropdownOption } from './interfaces/tuix-dropdown.interface';
4
+ import { DescriptionType } from '../tuix-input/enums/tuix-input.enums';
5
+ import { DropdownType } from './enums/tuix-dropdown.enums';
6
6
  export declare class TuixDropdown extends LitElement {
7
7
  static styles: import("lit").CSSResult[];
8
8
  value?: TuixDropdownOption;
@@ -3,10 +3,10 @@ import { LitElement, html, } from 'lit';
3
3
  import { customElement, property, query, state } from 'lit/decorators.js';
4
4
  import { classMap } from 'lit/directives/class-map.js';
5
5
  import '../tuix-input/TuixInput.js';
6
- import { IconName } from '../tuix-icon/enums/tuix-icon.enums.js';
7
- import { dropdownHostStyles, dropdownMainContainerStyles, dropdownOptionStyles, } from './TuixDropdown.styles.js';
8
- import { DescriptionType } from '../tuix-input/enums/tuix-input.enums.js';
9
- import { DropdownType } from './enums/tuix-dropdown.enums.js';
6
+ import { IconName } from '../tuix-icon/enums/tuix-icon.enums';
7
+ import { dropdownHostStyles, dropdownMainContainerStyles, dropdownOptionStyles, } from './TuixDropdown.styles';
8
+ import { DescriptionType } from '../tuix-input/enums/tuix-input.enums';
9
+ import { DropdownType } from './enums/tuix-dropdown.enums';
10
10
  let TuixDropdown = class TuixDropdown extends LitElement {
11
11
  constructor() {
12
12
  super(...arguments);
@@ -1,8 +1,8 @@
1
1
  import { css, unsafeCSS } from 'lit';
2
- import { hostStyles } from '../tuix-input/TuixInput.styles.js';
3
- import { Palette } from '../utils/colors.js';
4
- import { ScreenSizes } from '../utils/screenSizes.enum.js';
5
- import { DarkPalette } from '../utils/darkColors.js';
2
+ import { hostStyles } from '../tuix-input/TuixInput.styles';
3
+ import { Palette } from '../utils/colors';
4
+ import { ScreenSizes } from '../utils/screenSizes.enum';
5
+ import { DarkPalette } from '../utils/darkColors';
6
6
  export const dropdownHostStyles = css `
7
7
  ${hostStyles}
8
8
  :host {
@@ -1,5 +1,5 @@
1
- import { type CustomEventTuixInput } from '../../tuix-input/interfaces/tuix-input.interface.js';
2
- import { type DetailValue } from '../../utils/interfaces/detail-value.interface.js';
1
+ import { type CustomEventTuixInput } from '../../tuix-input/interfaces/tuix-input.interface';
2
+ import { type DetailValue } from '../../utils/interfaces/detail-value.interface';
3
3
  export type TuixDropdownPlainOption = string | number | boolean;
4
4
  export interface TuixDropdownObjectOption {
5
5
  name: string;
@@ -1,6 +1,6 @@
1
1
  import { LitElement, TemplateResult } from 'lit';
2
- import { IconName, IconSizeVariant } from './enums/tuix-icon.enums.js';
3
- import { TextVariant } from '../tuix-text/enums/tuix-text.enums.js';
2
+ import { IconName, IconSizeVariant } from './enums/tuix-icon.enums';
3
+ import { TextVariant } from '../tuix-text/enums/tuix-text.enums';
4
4
  export declare class TuixIcon extends LitElement {
5
5
  static styles: import("lit").CSSResult;
6
6
  name: IconName;
@@ -1,5 +1,5 @@
1
1
  import { html } from 'lit';
2
- import { IconName } from './enums/tuix-icon.enums.js';
2
+ import { IconName } from './enums/tuix-icon.enums';
3
3
  export declare const iconTemplate: (name?: IconName, color?: string, fill?: string) => ReturnType<typeof html>;
4
4
  type IconContentMapType = Record<IconName, string>;
5
5
  export declare const iconContentMap: IconContentMapType;
@@ -1,7 +1,7 @@
1
1
  import { html } from 'lit';
2
2
  import { unsafeHTML } from 'lit/directives/unsafe-html.js';
3
- import { Palette } from '../utils/colors.js';
4
- import { IconName } from './enums/tuix-icon.enums.js';
3
+ import { Palette } from '../utils/colors';
4
+ import { IconName } from './enums/tuix-icon.enums';
5
5
  export const iconTemplate = (name, color = Palette.BLACK, fill) => {
6
6
  const iconName = name || IconName.ARROW_DOWN;
7
7
  const iconContent = iconContentMap[iconName];
@@ -349,17 +349,6 @@ export const iconContentMap = {
349
349
  [IconName.BOOK]: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
350
350
  <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
351
351
  <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
352
- </svg>`,
353
- [IconName.BOOK_PLUS]: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
354
- <path d="M12 7v6m-8 6.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5A2.5 2.5 0 0 1 4 19.5m0 0A2.5 2.5 0 0 1 6.5 17H20M9 10h6" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
355
- </svg>`,
356
- [IconName.BOOKS]: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
357
- <path d="M5 7a2 2 0 0 0-2 2v11" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
358
- <path d="M5.803 18H5a2 2 0 1 0 0 4h9.5a.5.5 0 0 0 .5-.5V21m-6-6V4a2 2 0 0 1 2-2h9.5a.5.5 0 0 1 .5.5v14a.5.5 0 0 1-.5.5H11a2 2 0 0 1-2-2m0 0a2 2 0 0 1 2-2h10" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
359
- </svg>`,
360
- [IconName.BOOK_SEARCH]: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
361
- <path d="M11 22H5.5a2.5 2.5 0 0 1 0-5h4.501M21 22l-1.879-1.878" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
362
- <path d="M3 19.5v-15A2.5 2.5 0 0 1 5.5 2H18a1 1 0 0 1 1 1v8M17 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
363
352
  </svg>`,
364
353
  [IconName.MORE_HORIZONTAL]: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
365
354
  <path d="M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2M19 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2M5 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@@ -2,10 +2,10 @@ import { __decorate } from "tslib";
2
2
  import { LitElement, css, html } from 'lit';
3
3
  import { customElement, property } from 'lit/decorators.js';
4
4
  import { styleMap } from 'lit/directives/style-map.js';
5
- import { IconName, IconSizeVariant, iconSize } from './enums/tuix-icon.enums.js';
6
- import { iconTemplate } from './TuixIcon.icons.js';
7
- import { Palette } from '../utils/colors.js';
8
- import { TextVariant, colorText, colorTextDark, } from '../tuix-text/enums/tuix-text.enums.js';
5
+ import { IconName, IconSizeVariant, iconSize } from './enums/tuix-icon.enums';
6
+ import { iconTemplate } from './TuixIcon.icons';
7
+ import { Palette } from '../utils/colors';
8
+ import { TextVariant, colorText, colorTextDark, } from '../tuix-text/enums/tuix-text.enums';
9
9
  let TuixIcon = class TuixIcon extends LitElement {
10
10
  constructor() {
11
11
  super(...arguments);
@@ -77,9 +77,6 @@ export declare enum IconName {
77
77
  CHAT = "chat",
78
78
  MESSAGE_CIRCLE = "message-circle",
79
79
  BOOK = "book",
80
- BOOK_PLUS = "book-plus",
81
- BOOKS = "books",
82
- BOOK_SEARCH = "book-search",
83
80
  MORE_HORIZONTAL = "more-horizontal",
84
81
  BOT = "bot",
85
82
  SCROLL_DOWN = "scroll-down",
@@ -84,9 +84,6 @@ export var IconName;
84
84
  IconName["CHAT"] = "chat";
85
85
  IconName["MESSAGE_CIRCLE"] = "message-circle";
86
86
  IconName["BOOK"] = "book";
87
- IconName["BOOK_PLUS"] = "book-plus";
88
- IconName["BOOKS"] = "books";
89
- IconName["BOOK_SEARCH"] = "book-search";
90
87
  IconName["MORE_HORIZONTAL"] = "more-horizontal";
91
88
  IconName["BOT"] = "bot";
92
89
  IconName["SCROLL_DOWN"] = "scroll-down";
@@ -1,6 +1,6 @@
1
1
  import { type TemplateResult } from 'lit';
2
- import { IconName } from '../tuix-icon/enums/tuix-icon.enums.js';
3
- import { TuixBaseButton } from '../tuix-button/TuixBaseButton.js';
2
+ import { IconName } from '../tuix-icon/enums/tuix-icon.enums';
3
+ import { TuixBaseButton } from '../tuix-button/TuixBaseButton';
4
4
  export declare class TuixIconButton extends TuixBaseButton {
5
5
  static styles: import("lit").CSSResult[];
6
6
  icon: IconName;
@@ -1,10 +1,10 @@
1
1
  import { __decorate } from "tslib";
2
2
  import { css, html } from 'lit';
3
- import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums.js';
3
+ import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
4
4
  import { customElement, property } from 'lit/decorators.js';
5
- import { ScreenSizes } from '../utils/screenSizes.enum.js';
6
- import { buttonColorStyles, hostButtonStyles, } from '../tuix-button/TuixButton.styles.js';
7
- import { TuixBaseButton } from '../tuix-button/TuixBaseButton.js';
5
+ import { ScreenSizes } from '../utils/screenSizes.enum';
6
+ import { buttonColorStyles, hostButtonStyles, } from '../tuix-button/TuixButton.styles';
7
+ import { TuixBaseButton } from '../tuix-button/TuixBaseButton';
8
8
  let TuixIconButton = class TuixIconButton extends TuixBaseButton {
9
9
  constructor() {
10
10
  super(...arguments);
@@ -1,6 +1,6 @@
1
1
  import { LitElement, type TemplateResult, CSSResult, type PropertyValueMap } from 'lit';
2
2
  import '../tuix-icon/TuixIcon.js';
3
- import { IconName } from '../tuix-icon/enums/tuix-icon.enums.js';
3
+ import { IconName } from '../tuix-icon/enums/tuix-icon.enums';
4
4
  import { DescriptionType, InputType } from './enums/tuix-input.enums.js';
5
5
  export declare class TuixInput extends LitElement {
6
6
  _inputId: string;
@@ -3,7 +3,7 @@ import { LitElement, html, nothing, } from 'lit';
3
3
  import { customElement, property, query, state } from 'lit/decorators.js';
4
4
  import { classMap } from 'lit/directives/class-map.js';
5
5
  import '../tuix-icon/TuixIcon.js';
6
- import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums.js';
6
+ import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
7
7
  import { Palette } from '../utils/colors.js';
8
8
  import { DarkPalette } from '../utils/darkColors.js';
9
9
  import { hostStyles, inputColorStyles, inputComponentStyles, inputDescriptionStyles, inputFontStyles, inputIconStyles, inputSearchStyles, inputTitleStyles, } from './TuixInput.styles.js';
@@ -1,8 +1,8 @@
1
1
  import { css, unsafeCSS } from 'lit';
2
- import { ScreenSizes } from '../utils/screenSizes.enum.js';
3
- import { Palette } from '../utils/colors.js';
4
- import { DarkPalette } from '../utils/darkColors.js';
5
- import { hexToRgb } from '../utils/hex-rgb.js';
2
+ import { ScreenSizes } from '../utils/screenSizes.enum';
3
+ import { Palette } from '../utils/colors';
4
+ import { DarkPalette } from '../utils/darkColors';
5
+ import { hexToRgb } from '../utils/hex-rgb';
6
6
  const inputVars = {
7
7
  gapX: '10px',
8
8
  iconDesktopSize: '1.5rem',
@@ -1,6 +1,6 @@
1
- import { IconName } from '../../tuix-icon/enums/tuix-icon.enums.js';
2
- import { Palette } from '../../utils/colors.js';
3
- import { DarkPalette } from '../../utils/darkColors.js';
1
+ import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';
2
+ import { Palette } from '../../utils/colors';
3
+ import { DarkPalette } from '../../utils/darkColors';
4
4
  export declare enum InputType {
5
5
  TEXT = "text",
6
6
  SEARCH = "search",
@@ -1,6 +1,6 @@
1
- import { IconName } from '../../tuix-icon/enums/tuix-icon.enums.js';
2
- import { Palette } from '../../utils/colors.js';
3
- import { DarkPalette } from '../../utils/darkColors.js';
1
+ import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';
2
+ import { Palette } from '../../utils/colors';
3
+ import { DarkPalette } from '../../utils/darkColors';
4
4
  export var InputType;
5
5
  (function (InputType) {
6
6
  InputType["TEXT"] = "text";
@@ -1,8 +1,8 @@
1
- import { IconName } from '../../tuix-icon/enums/tuix-icon.enums.js';
2
- import { type DetailValue } from '../../utils/interfaces/detail-value.interface.js';
3
- import { InputIconLocation } from '../enums/tuix-input.enums.js';
4
- import { DarkPalette } from '../../utils/darkColors.js';
5
- import { Palette } from '../../utils/colors.js';
1
+ import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';
2
+ import { type DetailValue } from '../../utils/interfaces/detail-value.interface';
3
+ import { InputIconLocation } from '../enums/tuix-input.enums';
4
+ import { DarkPalette } from '../../utils/darkColors';
5
+ import { Palette } from '../../utils/colors';
6
6
  export declare const InputState: {
7
7
  INACTIVE: string;
8
8
  ACTIVE: string;
@@ -1,6 +1,6 @@
1
1
  import { LitElement, type TemplateResult } from 'lit';
2
- import { MainVariant } from '../utils/mainVariant.enum.js';
3
- import { LinkTarget } from './enums/linkTarget.enum.js';
2
+ import { MainVariant } from '../utils/mainVariant.enum';
3
+ import { LinkTarget } from './enums/linkTarget.enum';
4
4
  export declare class TuixLink extends LitElement {
5
5
  static styles: import("lit").CSSResult[];
6
6
  href?: string;
@@ -1,11 +1,11 @@
1
1
  import { __decorate } from "tslib";
2
2
  import { html, LitElement } from 'lit';
3
3
  import { customElement, property } from 'lit/decorators.js';
4
- import { MainVariant } from '../utils/mainVariant.enum.js';
5
- import { LinkTarget } from './enums/linkTarget.enum.js';
4
+ import { MainVariant } from '../utils/mainVariant.enum';
5
+ import { LinkTarget } from './enums/linkTarget.enum';
6
6
  import { classMap } from 'lit/directives/class-map.js';
7
- import { linkStyles } from './TuixLink.styles.js';
8
- import { linkFontStyles } from '../tuix-text/TuixText.styles.js';
7
+ import { linkStyles } from './TuixLink.styles';
8
+ import { linkFontStyles } from '../tuix-text/TuixText.styles';
9
9
  let TuixLink = class TuixLink extends LitElement {
10
10
  constructor() {
11
11
  super(...arguments);
@@ -1,7 +1,7 @@
1
1
  import { css, unsafeCSS } from 'lit';
2
- import { MainVariant } from '../utils/mainVariant.enum.js';
3
- import { Palette } from '../utils/colors.js';
4
- import { DarkPalette } from '../utils/darkColors.js';
2
+ import { MainVariant } from '../utils/mainVariant.enum';
3
+ import { Palette } from '../utils/colors';
4
+ import { DarkPalette } from '../utils/darkColors';
5
5
  export const LINK_TEXT_COLOR_VAR_NAME = '--t-link-text-color';
6
6
  export const linkStyles = css `
7
7
  ${unsafeCSS(`
@@ -1,6 +1,6 @@
1
1
  import { css, unsafeCSS } from 'lit';
2
- import { ScreenSizes } from '../utils/screenSizes.enum.js';
3
- import { Palette } from '../utils/colors.js';
2
+ import { ScreenSizes } from '../utils/screenSizes.enum';
3
+ import { Palette } from '../utils/colors';
4
4
  export const commonModalStyles = css `
5
5
  :host {
6
6
  display: none;
@@ -1,5 +1,5 @@
1
1
  import { LitElement, type TemplateResult } from 'lit';
2
- import { BorderRadiusPaper, PaperElevation } from './enums/tuix-paper.enum.js';
2
+ import { BorderRadiusPaper, PaperElevation } from './enums/tuix-paper.enum';
3
3
  export declare class TuixPaper extends LitElement {
4
4
  static styles: import("lit").CSSResult[];
5
5
  elevation: PaperElevation;
@@ -1,10 +1,10 @@
1
1
  import { __decorate } from "tslib";
2
2
  import { LitElement, html } from 'lit';
3
3
  import { customElement, property } from 'lit/decorators.js';
4
- import { BorderRadiusPaper, PaperElevation } from './enums/tuix-paper.enum.js';
4
+ import { BorderRadiusPaper, PaperElevation } from './enums/tuix-paper.enum';
5
5
  import { classMap } from 'lit/directives/class-map.js';
6
6
  import { styleMap } from 'lit/directives/style-map.js';
7
- import { paperStyles } from './TuixPaper.styles.js';
7
+ import { paperStyles } from './TuixPaper.styles';
8
8
  let TuixPaper = class TuixPaper extends LitElement {
9
9
  constructor() {
10
10
  super(...arguments);
@@ -1,6 +1,6 @@
1
1
  import { css, unsafeCSS } from 'lit';
2
- import { PaperElevation } from './enums/tuix-paper.enum.js';
3
- import { Palette } from '../utils/colors.js';
2
+ import { PaperElevation } from './enums/tuix-paper.enum';
3
+ import { Palette } from '../utils/colors';
4
4
  const calculatedStyles = Object.values(PaperElevation)
5
5
  .slice(1, -1)
6
6
  .map((variant, index) => `
@@ -1,7 +1,7 @@
1
1
  import { LitElement } from 'lit';
2
2
  import '../tuix-text/TuixText.js';
3
- import { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums.js';
4
- import type { TuixRadioButtonOption } from './interfaces/tuix-radio-button.interface.js';
3
+ import { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums';
4
+ import type { TuixRadioButtonOption } from './interfaces/tuix-radio-button.interface';
5
5
  export declare class TuixRadioButton extends LitElement {
6
6
  static styles: import("lit").CSSResult[];
7
7
  disabled: boolean;
@@ -3,9 +3,9 @@ import { LitElement, html } from 'lit';
3
3
  import { customElement, property } from 'lit/decorators.js';
4
4
  import { classMap } from 'lit/directives/class-map.js';
5
5
  import '../tuix-text/TuixText.js';
6
- import { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums.js';
7
- import { TextSize, TextVariant } from '../tuix-text/enums/tuix-text.enums.js';
8
- import { radioButtonContainerStyles, radioButtonInnerStyles, radioButtonLabelStyles, radioButtonStyles, radioHostStyles, } from './TuixRadioButton.styles.js';
6
+ import { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums';
7
+ import { TextSize, TextVariant } from '../tuix-text/enums/tuix-text.enums';
8
+ import { radioButtonContainerStyles, radioButtonInnerStyles, radioButtonLabelStyles, radioButtonStyles, radioHostStyles, } from './TuixRadioButton.styles';
9
9
  let TuixRadioButton = class TuixRadioButton extends LitElement {
10
10
  constructor() {
11
11
  super(...arguments);
@@ -1,7 +1,7 @@
1
1
  import { css, unsafeCSS } from 'lit';
2
- import { hostStyles } from '../tuix-checkbox/TuixCheckbox.styles.js';
3
- import { Palette } from '../utils/colors.js';
4
- import { ScreenSizes } from '../utils/screenSizes.enum.js';
2
+ import { hostStyles } from '../tuix-checkbox/TuixCheckbox.styles';
3
+ import { Palette } from '../utils/colors';
4
+ import { ScreenSizes } from '../utils/screenSizes.enum';
5
5
  export const radioHostStyles = css `
6
6
  ${hostStyles}
7
7
  :host {
@@ -1,3 +1,3 @@
1
- import { type DetailValue } from '../../utils/interfaces/detail-value.interface.js';
1
+ import { type DetailValue } from '../../utils/interfaces/detail-value.interface';
2
2
  export type TuixRadioButtonOption = string | number;
3
3
  export type CustomEventTuixRadioButton<T extends TuixRadioButtonOption = TuixRadioButtonOption> = CustomEvent<DetailValue<T>>;
@@ -1,9 +1,10 @@
1
1
  import { LitElement } from 'lit';
2
2
  import '../tuix-icon/TuixIcon.js';
3
3
  import '../tuix-text/TuixText.js';
4
- import type { IDataTableHeader, ThreeDotsLoaderConfig } from './interfaces/tuix-table.interface.js';
4
+ import type { IDataTableHeader, SortDirection, ThreeDotsLoaderConfig } from './interfaces/tuix-table.interface.js';
5
5
  export declare class TuixTable extends LitElement {
6
6
  static styles: import("lit").CSSResult[];
7
+ dark: boolean;
7
8
  paginated: boolean;
8
9
  disableMobileTable: boolean;
9
10
  showMobileTableInTablet: boolean;
@@ -15,6 +16,8 @@ export declare class TuixTable extends LitElement {
15
16
  currentPage?: number;
16
17
  currentSize?: number;
17
18
  isLoadingData: boolean;
19
+ sortBy?: string;
20
+ sortDirection: SortDirection;
18
21
  private _isTabletView;
19
22
  private _isMobileView;
20
23
  private _headerPercents;
@@ -32,9 +35,13 @@ export declare class TuixTable extends LitElement {
32
35
  private _nextPage;
33
36
  private _prevPage;
34
37
  private _setPageSize;
38
+ private _sort;
35
39
  private _computeHeaderPercents;
36
- private _cellStyleString;
40
+ private _cellBackgroundColor;
37
41
  private _textVariantColor;
42
+ private _renderSortIcons;
43
+ private _ariaSort;
44
+ private _onHeaderKeyDown;
38
45
  private _renderHeaderCells;
39
46
  private _renderCell;
40
47
  private _renderRows;
@@ -43,6 +50,7 @@ export declare class TuixTable extends LitElement {
43
50
  private _renderSpinner;
44
51
  private _renderPagination;
45
52
  private _renderTable;
53
+ private _renderCard;
46
54
  private _renderCards;
47
55
  render(): import("lit-html").TemplateResult<1>;
48
56
  }