tuix-webcomponents 0.63.0 → 0.64.0

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 (168) hide show
  1. package/README.md +2 -2
  2. package/dist/addon-visual-tests-assets/visual-test-illustration.mp4 +0 -0
  3. package/dist/assets/Color-AVL7NMMY-IH_JbDEF.js +1 -0
  4. package/dist/assets/DocsRenderer-PQXLIZUC-C0ZKNA9m.js +1286 -0
  5. package/dist/{src/tuix-icon/TuixIcon.icons.js → assets/TuixIconButton-eQtxZNXh.js} +203 -125
  6. package/dist/assets/TuixModal-BZFIHTi_.js +78 -0
  7. package/dist/assets/TuixToast-BhxwZIGo.js +62 -0
  8. package/dist/assets/_commonjsHelpers-CqkleIqs.js +1 -0
  9. package/dist/assets/axe-C59a3kt3.js +30 -0
  10. package/dist/assets/iframe-ClsPaEIM.js +1057 -0
  11. package/dist/assets/index-DBzYXxxs.js +1554 -0
  12. package/dist/assets/index-TjhCmV-u.js +1 -0
  13. package/dist/assets/matchers-7Z3WT2CE-CcSi9QFY.js +14 -0
  14. package/dist/assets/screenSizes.enum-C1IhC_dy.js +13 -0
  15. package/dist/assets/state-CLjydI9z.js +13 -0
  16. package/dist/assets/tuix-button.stories-Dm_yifox.js +30 -0
  17. package/dist/assets/tuix-checkbox.stories-DmzoygjC.js +44 -0
  18. package/dist/assets/tuix-dropdown-object-list.stories-Neeajtj-.js +56 -0
  19. package/dist/assets/tuix-dropdown.stories-B7ea8QAz.js +28 -0
  20. package/dist/assets/tuix-icon-button.stories-CgbOSRO4.js +21 -0
  21. package/dist/assets/tuix-icon.enums-DYTtwLZl.js +1 -0
  22. package/dist/assets/tuix-icon.stories-CjN2XsKx.js +19 -0
  23. package/dist/assets/tuix-input.stories-CD7onvw2.js +33 -0
  24. package/dist/assets/tuix-link.stories-CT7pzGlx.js +35 -0
  25. package/dist/assets/tuix-modal.stories-B6v3cOPq.js +39 -0
  26. package/dist/assets/tuix-paper.enum-DhmlUJB7.js +1 -0
  27. package/dist/assets/tuix-paper.stories-CLnRPHNK.js +31 -0
  28. package/dist/assets/tuix-radio-button.stories-BwkKC3a9.js +35 -0
  29. package/dist/assets/tuix-table.stories-Bn-aZa0J.js +65 -0
  30. package/dist/assets/tuix-text.enums-Ck8cVqZZ.js +1 -0
  31. package/dist/assets/tuix-text.stories-BNIqPsGD.js +29 -0
  32. package/dist/assets/tuix-toast.stories-CRYiLiHK.js +21 -0
  33. package/dist/assets/tuix-toggle-button.stories-CY6wlDnA.js +40 -0
  34. package/dist/favicon-wrapper.svg +46 -0
  35. package/dist/favicon.svg +1 -0
  36. package/dist/iframe.html +685 -0
  37. package/dist/index.html +160 -0
  38. package/dist/index.json +1 -0
  39. package/dist/nunito-sans-bold-italic.woff2 +0 -0
  40. package/dist/nunito-sans-bold.woff2 +0 -0
  41. package/dist/nunito-sans-italic.woff2 +0 -0
  42. package/dist/nunito-sans-regular.woff2 +0 -0
  43. package/dist/project.json +1 -0
  44. package/dist/sb-addons/a11y-3/manager-bundle.js +5 -0
  45. package/dist/sb-addons/a11y-3/manager-bundle.js.LEGAL.txt +0 -0
  46. package/dist/sb-addons/chromatic-com-storybook-1/manager-bundle.js +356 -0
  47. package/dist/sb-addons/chromatic-com-storybook-1/manager-bundle.js.LEGAL.txt +40 -0
  48. package/dist/sb-addons/docs-2/manager-bundle.js +151 -0
  49. package/dist/sb-addons/docs-2/manager-bundle.js.LEGAL.txt +0 -0
  50. package/dist/sb-addons/storybook-core-server-presets-0/common-manager-bundle.js +971 -0
  51. package/dist/sb-addons/storybook-core-server-presets-0/common-manager-bundle.js.LEGAL.txt +0 -0
  52. package/dist/sb-addons/vitest-4/manager-bundle.js +3 -0
  53. package/dist/sb-addons/vitest-4/manager-bundle.js.LEGAL.txt +0 -0
  54. package/dist/sb-common-assets/favicon-wrapper.svg +46 -0
  55. package/dist/sb-common-assets/favicon.svg +1 -0
  56. package/dist/sb-common-assets/nunito-sans-bold-italic.woff2 +0 -0
  57. package/dist/sb-common-assets/nunito-sans-bold.woff2 +0 -0
  58. package/dist/sb-common-assets/nunito-sans-italic.woff2 +0 -0
  59. package/dist/sb-common-assets/nunito-sans-regular.woff2 +0 -0
  60. package/dist/sb-manager/globals-module-info.js +797 -0
  61. package/dist/sb-manager/globals-runtime.js +69679 -0
  62. package/dist/sb-manager/globals.js +34 -0
  63. package/dist/sb-manager/runtime.js +13195 -0
  64. package/package.json +6 -6
  65. package/dist/src/index.d.ts +0 -36
  66. package/dist/src/index.js +0 -42
  67. package/dist/src/tuix-button/TuixBaseButton.d.ts +0 -17
  68. package/dist/src/tuix-button/TuixBaseButton.js +0 -60
  69. package/dist/src/tuix-button/TuixButton.d.ts +0 -11
  70. package/dist/src/tuix-button/TuixButton.js +0 -84
  71. package/dist/src/tuix-button/TuixButton.styles.d.ts +0 -3
  72. package/dist/src/tuix-button/TuixButton.styles.js +0 -107
  73. package/dist/src/tuix-button/enums/tuix-button.enums.d.ts +0 -2
  74. package/dist/src/tuix-button/enums/tuix-button.enums.js +0 -6
  75. package/dist/src/tuix-button/interfaces/tuix-button.interface.d.ts +0 -1
  76. package/dist/src/tuix-button/interfaces/tuix-button.interface.js +0 -1
  77. package/dist/src/tuix-checkbox/TuixCheckbox.d.ts +0 -15
  78. package/dist/src/tuix-checkbox/TuixCheckbox.js +0 -106
  79. package/dist/src/tuix-checkbox/TuixCheckbox.styles.d.ts +0 -4
  80. package/dist/src/tuix-checkbox/TuixCheckbox.styles.js +0 -132
  81. package/dist/src/tuix-checkbox/enums/tuix-checkbox.enums.d.ts +0 -21
  82. package/dist/src/tuix-checkbox/enums/tuix-checkbox.enums.js +0 -23
  83. package/dist/src/tuix-checkbox/interfaces/tuix-checkbox.interface.d.ts +0 -5
  84. package/dist/src/tuix-checkbox/interfaces/tuix-checkbox.interface.js +0 -1
  85. package/dist/src/tuix-dropdown/TuixDropdown.d.ts +0 -55
  86. package/dist/src/tuix-dropdown/TuixDropdown.js +0 -360
  87. package/dist/src/tuix-dropdown/TuixDropdown.styles.d.ts +0 -3
  88. package/dist/src/tuix-dropdown/TuixDropdown.styles.js +0 -125
  89. package/dist/src/tuix-dropdown/enums/tuix-dropdown.enums.d.ts +0 -4
  90. package/dist/src/tuix-dropdown/enums/tuix-dropdown.enums.js +0 -5
  91. package/dist/src/tuix-dropdown/interfaces/tuix-dropdown.interface.d.ts +0 -15
  92. package/dist/src/tuix-dropdown/interfaces/tuix-dropdown.interface.js +0 -1
  93. package/dist/src/tuix-icon/TuixIcon.d.ts +0 -15
  94. package/dist/src/tuix-icon/TuixIcon.icons.d.ts +0 -6
  95. package/dist/src/tuix-icon/TuixIcon.js +0 -79
  96. package/dist/src/tuix-icon/enums/tuix-icon.enums.d.ts +0 -62
  97. package/dist/src/tuix-icon/enums/tuix-icon.enums.js +0 -69
  98. package/dist/src/tuix-icon-button/TuixIconButton.d.ts +0 -9
  99. package/dist/src/tuix-icon-button/TuixIconButton.js +0 -51
  100. package/dist/src/tuix-input/TuixInput.d.ts +0 -52
  101. package/dist/src/tuix-input/TuixInput.js +0 -370
  102. package/dist/src/tuix-input/TuixInput.styles.d.ts +0 -8
  103. package/dist/src/tuix-input/TuixInput.styles.js +0 -295
  104. package/dist/src/tuix-input/enums/tuix-input.enums.d.ts +0 -38
  105. package/dist/src/tuix-input/enums/tuix-input.enums.js +0 -41
  106. package/dist/src/tuix-input/interfaces/tuix-input.interface.d.ts +0 -18
  107. package/dist/src/tuix-input/interfaces/tuix-input.interface.js +0 -5
  108. package/dist/src/tuix-link/TuixLink.d.ts +0 -15
  109. package/dist/src/tuix-link/TuixLink.js +0 -71
  110. package/dist/src/tuix-link/TuixLink.styles.d.ts +0 -2
  111. package/dist/src/tuix-link/TuixLink.styles.js +0 -55
  112. package/dist/src/tuix-link/enums/linkTarget.enum.d.ts +0 -6
  113. package/dist/src/tuix-link/enums/linkTarget.enum.js +0 -7
  114. package/dist/src/tuix-modal/TuixModal.d.ts +0 -9
  115. package/dist/src/tuix-modal/TuixModal.js +0 -63
  116. package/dist/src/tuix-modal/TuixModal.styles.d.ts +0 -2
  117. package/dist/src/tuix-modal/TuixModal.styles.js +0 -55
  118. package/dist/src/tuix-paper/TuixPaper.d.ts +0 -10
  119. package/dist/src/tuix-paper/TuixPaper.js +0 -46
  120. package/dist/src/tuix-paper/TuixPaper.styles.d.ts +0 -1
  121. package/dist/src/tuix-paper/TuixPaper.styles.js +0 -30
  122. package/dist/src/tuix-paper/enums/tuix-paper.enum.d.ts +0 -13
  123. package/dist/src/tuix-paper/enums/tuix-paper.enum.js +0 -15
  124. package/dist/src/tuix-radio-button/TuixRadioButton.d.ts +0 -16
  125. package/dist/src/tuix-radio-button/TuixRadioButton.js +0 -95
  126. package/dist/src/tuix-radio-button/TuixRadioButton.styles.d.ts +0 -5
  127. package/dist/src/tuix-radio-button/TuixRadioButton.styles.js +0 -135
  128. package/dist/src/tuix-radio-button/interfaces/tuix-radio-button.interface.d.ts +0 -3
  129. package/dist/src/tuix-radio-button/interfaces/tuix-radio-button.interface.js +0 -1
  130. package/dist/src/tuix-table/TuixTable.d.ts +0 -46
  131. package/dist/src/tuix-table/TuixTable.js +0 -367
  132. package/dist/src/tuix-table/TuixTable.styles.d.ts +0 -2
  133. package/dist/src/tuix-table/TuixTable.styles.js +0 -197
  134. package/dist/src/tuix-table/interfaces/tuix-table.interface.d.ts +0 -45
  135. package/dist/src/tuix-table/interfaces/tuix-table.interface.js +0 -1
  136. package/dist/src/tuix-text/TuixText.d.ts +0 -12
  137. package/dist/src/tuix-text/TuixText.js +0 -66
  138. package/dist/src/tuix-text/TuixText.styles.d.ts +0 -2
  139. package/dist/src/tuix-text/TuixText.styles.js +0 -158
  140. package/dist/src/tuix-text/enums/tuix-text.enums.d.ts +0 -31
  141. package/dist/src/tuix-text/enums/tuix-text.enums.js +0 -63
  142. package/dist/src/tuix-toast/TuixToast.d.ts +0 -15
  143. package/dist/src/tuix-toast/TuixToast.js +0 -100
  144. package/dist/src/tuix-toast/TuixToast.styles.d.ts +0 -3
  145. package/dist/src/tuix-toast/TuixToast.styles.js +0 -43
  146. package/dist/src/tuix-toast/enums/tuix-toast.enums.d.ts +0 -20
  147. package/dist/src/tuix-toast/enums/tuix-toast.enums.js +0 -59
  148. package/dist/src/tuix-toggle-button/TuixToggleButton.d.ts +0 -13
  149. package/dist/src/tuix-toggle-button/TuixToggleButton.js +0 -85
  150. package/dist/src/tuix-toggle-button/TuixToggleButton.styles.d.ts +0 -5
  151. package/dist/src/tuix-toggle-button/TuixToggleButton.styles.js +0 -134
  152. package/dist/src/tuix-toggle-button/interfaces/tuix-toggle.interface.d.ts +0 -2
  153. package/dist/src/tuix-toggle-button/interfaces/tuix-toggle.interface.js +0 -1
  154. package/dist/src/utils/colors.d.ts +0 -29
  155. package/dist/src/utils/colors.js +0 -30
  156. package/dist/src/utils/darkColors.d.ts +0 -31
  157. package/dist/src/utils/darkColors.js +0 -32
  158. package/dist/src/utils/hex-rgb.d.ts +0 -5
  159. package/dist/src/utils/hex-rgb.js +0 -15
  160. package/dist/src/utils/interfaces/detail-value.interface.d.ts +0 -3
  161. package/dist/src/utils/interfaces/detail-value.interface.js +0 -1
  162. package/dist/src/utils/mainVariant.enum.d.ts +0 -4
  163. package/dist/src/utils/mainVariant.enum.js +0 -5
  164. package/dist/src/utils/screenSizes.enum.d.ts +0 -4
  165. package/dist/src/utils/screenSizes.enum.js +0 -5
  166. package/dist/src/utils/slottedClassName.d.ts +0 -2
  167. package/dist/src/utils/slottedClassName.js +0 -1
  168. package/dist/tsconfig.publish.tsbuildinfo +0 -1
package/package.json CHANGED
@@ -119,7 +119,7 @@
119
119
  },
120
120
  "scripts": {
121
121
  "analyze": "cem analyze --litelement",
122
- "build": "rimraf dist && tsc -p tsconfig.publish.json && npm run analyze -- --exclude dist && npm run build:css",
122
+ "build": "rm -rf dist && tsc -p tsconfig.publish.json && npm run analyze -- --exclude dist && npm run build:css",
123
123
  "build:css": "mkdir -p dist/assets && npm run compileStylesJss --silent -- dist/assets/tuix-styles.css",
124
124
  "calculateNextVersion": "tsx ./scripts/detect-changes.ts",
125
125
  "compileStylesJss": "tsx ./scripts/build-styles.ts",
@@ -128,13 +128,13 @@
128
128
  "format:check": "prettier --check \"**/**/*.ts\" ",
129
129
  "lint": "eslint './src/**/*.{ts,tsx}' --fix",
130
130
  "prepare": "husky install",
131
- "prepublish": "rimraf dist && tsc -p tsconfig.publish.json && npm run analyze -- --exclude dist",
131
+ "prepublish": "rm -rf dist && tsc -p tsconfig.publish.json && npm run analyze -- --exclude dist",
132
132
  "publish:local": "./scripts/publish-local-npm.sh",
133
- "start": "rimraf build && tsc --outDir build && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
134
- "storybook": "rimraf build && npm run analyze -- --exclude dist && storybook dev -p 6006",
135
- "storybook:build": "rimraf build && npm run analyze -- --exclude dist && storybook build",
133
+ "start": "rm -rf build && tsc --outDir build && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
134
+ "storybook": "rm -rf build && npm run analyze -- --exclude dist && storybook dev -p 6006",
135
+ "storybook:build": "rm -rf dist && npm run analyze -- --exclude dist && storybook build -o dist",
136
136
  "test": "echo \"Error: no test specified\" && exit 1"
137
137
  },
138
138
  "type": "module",
139
- "version": "0.63.0"
139
+ "version": "0.64.0"
140
140
  }
@@ -1,36 +0,0 @@
1
- export { type CustomEventTuixButton } from './tuix-button/interfaces/tuix-button.interface.js';
2
- export type { CustomEventTuixCheckbox, DetailValueCheckbox, } from './tuix-checkbox/interfaces/tuix-checkbox.interface.js';
3
- export type { CustomEventTuixDropdownInput, CustomEventTuixDropdownSelect, TuixDropdownOption, TuixDropdownObjectOption, TuixDropdownPlainOption, } from './tuix-dropdown/interfaces/tuix-dropdown.interface.js';
4
- export type { CustomEventTuixInput } from './tuix-input/interfaces/tuix-input.interface.js';
5
- export type { CustomEventTuixRadioButton } from './tuix-radio-button/interfaces/tuix-radio-button.interface.js';
6
- export type { CustomEventTuixToggle } from './tuix-toggle-button/interfaces/tuix-toggle.interface.js';
7
- export type { DetailValue } from './utils/interfaces/detail-value.interface.js';
8
- export { TuixText } from './tuix-text/TuixText.js';
9
- export { TuixIcon } from './tuix-icon/TuixIcon.js';
10
- export { TuixButton } from './tuix-button/TuixButton.js';
11
- export { TuixPaper } from './tuix-paper/TuixPaper.js';
12
- export { TuixIconButton } from './tuix-icon-button/TuixIconButton.js';
13
- export { TuixLink } from './tuix-link/TuixLink.js';
14
- export { TuixInput } from './tuix-input/TuixInput.js';
15
- export { TuixDropdown } from './tuix-dropdown/TuixDropdown.js';
16
- export { TuixCheckbox } from './tuix-checkbox/TuixCheckbox.js';
17
- export { TuixRadioButton } from './tuix-radio-button/TuixRadioButton.js';
18
- export { TuixToggleButton } from './tuix-toggle-button/TuixToggleButton.js';
19
- export { TuixTable } from './tuix-table/TuixTable.js';
20
- export type { IDataTableHeader, TuixTableElement, } from './tuix-table/interfaces/tuix-table.interface.js';
21
- export { TuixToast } from './tuix-toast/TuixToast.js';
22
- export { TuixModal } from './tuix-modal/TuixModal.js';
23
- export { ToastType } from './tuix-toast/enums/tuix-toast.enums.js';
24
- export { TextSize, TextVariant } from './tuix-text/enums/tuix-text.enums.js';
25
- export { MainVariant } from './utils/mainVariant.enum.js';
26
- export { CheckboxLabelSide } from './tuix-checkbox/enums/tuix-checkbox.enums.js';
27
- export { PaperElevation } from './tuix-paper/enums/tuix-paper.enum.js';
28
- export { LinkTarget } from './tuix-link/enums/linkTarget.enum.js';
29
- export { IconName, IconSizeVariant, } from './tuix-icon/enums/tuix-icon.enums.js';
30
- export { DescriptionType, InputType, } from './tuix-input/enums/tuix-input.enums.js';
31
- export { Palette } from './utils/colors.js';
32
- export { DarkPalette } from './utils/darkColors.js';
33
- export { DropdownType } from './tuix-dropdown/enums/tuix-dropdown.enums.js';
34
- export { BorderRadiusPaper } from './tuix-paper/enums/tuix-paper.enum.js';
35
- export { ScreenSizes } from './utils/screenSizes.enum.js';
36
- export declare function loadFonts(): void;
package/dist/src/index.js DELETED
@@ -1,42 +0,0 @@
1
- export { TuixText } from './tuix-text/TuixText.js';
2
- export { TuixIcon } from './tuix-icon/TuixIcon.js';
3
- export { TuixButton } from './tuix-button/TuixButton.js';
4
- export { TuixPaper } from './tuix-paper/TuixPaper.js';
5
- export { TuixIconButton } from './tuix-icon-button/TuixIconButton.js';
6
- export { TuixLink } from './tuix-link/TuixLink.js';
7
- export { TuixInput } from './tuix-input/TuixInput.js';
8
- export { TuixDropdown } from './tuix-dropdown/TuixDropdown.js';
9
- export { TuixCheckbox } from './tuix-checkbox/TuixCheckbox.js';
10
- export { TuixRadioButton } from './tuix-radio-button/TuixRadioButton.js';
11
- export { TuixToggleButton } from './tuix-toggle-button/TuixToggleButton.js';
12
- export { TuixTable } from './tuix-table/TuixTable.js';
13
- export { TuixToast } from './tuix-toast/TuixToast.js';
14
- export { TuixModal } from './tuix-modal/TuixModal.js';
15
- export { ToastType } from './tuix-toast/enums/tuix-toast.enums.js';
16
- export { TextSize, TextVariant } from './tuix-text/enums/tuix-text.enums.js';
17
- export { MainVariant } from './utils/mainVariant.enum.js';
18
- export { CheckboxLabelSide } from './tuix-checkbox/enums/tuix-checkbox.enums.js';
19
- export { PaperElevation } from './tuix-paper/enums/tuix-paper.enum.js';
20
- export { LinkTarget } from './tuix-link/enums/linkTarget.enum.js';
21
- export { IconName, IconSizeVariant, } from './tuix-icon/enums/tuix-icon.enums.js';
22
- export { DescriptionType, InputType, } from './tuix-input/enums/tuix-input.enums.js';
23
- export { Palette } from './utils/colors.js';
24
- export { DarkPalette } from './utils/darkColors.js';
25
- export { DropdownType } from './tuix-dropdown/enums/tuix-dropdown.enums.js';
26
- export { BorderRadiusPaper } from './tuix-paper/enums/tuix-paper.enum.js';
27
- export { ScreenSizes } from './utils/screenSizes.enum.js';
28
- export function loadFonts() {
29
- const link1 = document.createElement('link');
30
- link1.rel = 'preconnect';
31
- link1.href = 'https://fonts.googleapis.com';
32
- const link2 = document.createElement('link');
33
- link2.rel = 'preconnect';
34
- link2.href = 'https://fonts.gstatic.com';
35
- const link3 = document.createElement('link');
36
- link3.rel = 'stylesheet';
37
- link3.href =
38
- 'https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap';
39
- document.head.appendChild(link1);
40
- document.head.appendChild(link2);
41
- document.head.appendChild(link3);
42
- }
@@ -1,17 +0,0 @@
1
- import { LitElement, type TemplateResult } from 'lit';
2
- import { MainVariant } from '../utils/mainVariant.enum';
3
- import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
4
- import '../tuix-icon/TuixIcon.js';
5
- export declare abstract class TuixBaseButton extends LitElement {
6
- variant: MainVariant;
7
- disabled: boolean;
8
- dark: boolean;
9
- protected iconColor: string;
10
- updated(): void;
11
- protected _getTextColor(): string;
12
- protected abstract _updateIconColor(): void;
13
- protected _handleClick(): void;
14
- protected _iconTemplate(iconName: IconName, iconSize: IconSizeVariant): TemplateResult;
15
- protected abstract _buttonContent(): TemplateResult;
16
- protected render(): TemplateResult;
17
- }
@@ -1,60 +0,0 @@
1
- import { __decorate } from "tslib";
2
- import { LitElement, html } from 'lit';
3
- import { MainVariant } from '../utils/mainVariant.enum';
4
- import { property, state } from 'lit/decorators.js';
5
- import { buttonTextColor } from './enums/tuix-button.enums';
6
- import '../tuix-icon/TuixIcon.js';
7
- export class TuixBaseButton extends LitElement {
8
- constructor() {
9
- super(...arguments);
10
- this.variant = MainVariant.PRIMARY;
11
- this.disabled = false;
12
- this.dark = false;
13
- this.iconColor = '';
14
- }
15
- updated() {
16
- this._updateIconColor();
17
- }
18
- _getTextColor() {
19
- const element = this.shadowRoot?.querySelector('.button');
20
- if (!element)
21
- return buttonTextColor[this.variant];
22
- const computedStyle = getComputedStyle(element);
23
- return computedStyle.color;
24
- }
25
- _handleClick() {
26
- this.dispatchEvent(new CustomEvent('customClick', { bubbles: true }));
27
- }
28
- _iconTemplate(iconName, iconSize) {
29
- this._updateIconColor();
30
- return html `<tuix-icon
31
- size="${iconSize}"
32
- name="${iconName}"
33
- color="${this.iconColor}"
34
- ></tuix-icon>`;
35
- }
36
- render() {
37
- return html `<button
38
- @click=${this._handleClick}
39
- @mouseenter=${this._updateIconColor}
40
- @mouseleave=${this._updateIconColor}
41
- @blur=${this._updateIconColor}
42
- ?disabled="${this.disabled}"
43
- class="button"
44
- >
45
- ${this._buttonContent()}
46
- </button>`;
47
- }
48
- }
49
- __decorate([
50
- property({ type: MainVariant, reflect: true })
51
- ], TuixBaseButton.prototype, "variant", void 0);
52
- __decorate([
53
- property({ type: Boolean, reflect: true })
54
- ], TuixBaseButton.prototype, "disabled", void 0);
55
- __decorate([
56
- property({ type: Boolean, reflect: true })
57
- ], TuixBaseButton.prototype, "dark", void 0);
58
- __decorate([
59
- state()
60
- ], TuixBaseButton.prototype, "iconColor", void 0);
@@ -1,11 +0,0 @@
1
- import { type TemplateResult } from 'lit';
2
- import { IconName } from '../tuix-icon/enums/tuix-icon.enums';
3
- import { TuixBaseButton } from './TuixBaseButton';
4
- export declare class TuixButton extends TuixBaseButton {
5
- static styles: import("lit").CSSResult[];
6
- full: boolean;
7
- iconRight?: IconName;
8
- iconLeft?: IconName;
9
- protected _updateIconColor(): void;
10
- protected _buttonContent(): TemplateResult;
11
- }
@@ -1,84 +0,0 @@
1
- import { __decorate } from "tslib";
2
- import { css, html, nothing } from 'lit';
3
- import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
4
- import { buttonSizeStyles, buttonColorStyles, hostButtonStyles, } from './TuixButton.styles';
5
- import { customElement, property } from 'lit/decorators.js';
6
- import { ScreenSizes } from '../utils/screenSizes.enum';
7
- import { TuixBaseButton } from './TuixBaseButton';
8
- let TuixButton = class TuixButton extends TuixBaseButton {
9
- constructor() {
10
- super(...arguments);
11
- this.full = false;
12
- }
13
- static { this.styles = [
14
- css `
15
- :host([full]) .button {
16
- width: 100%;
17
- }
18
- .button {
19
- padding: 16px 32px;
20
- border-radius: 4px;
21
- border: none;
22
- font-family: 'Rubik', sans-serif;
23
- }
24
-
25
- @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
26
- .button {
27
- padding: 14px 32px;
28
- }
29
- }
30
-
31
- @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
32
- .button {
33
- padding: 12px 24px;
34
- }
35
- }
36
-
37
- .container {
38
- display: flex;
39
- flex-direction: row;
40
- justify-content: center;
41
- align-items: center;
42
- gap: 8px;
43
- }
44
-
45
- @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
46
- .container {
47
- gap: 6px;
48
- }
49
- }
50
- `,
51
- hostButtonStyles,
52
- buttonColorStyles,
53
- buttonSizeStyles,
54
- ]; }
55
- _updateIconColor() {
56
- if (!this.iconLeft && !this.iconRight)
57
- return;
58
- this.iconColor = this._getTextColor();
59
- }
60
- _buttonContent() {
61
- let iconSize = IconSizeVariant.MEDIUM;
62
- if (screen.width <= ScreenSizes.TABLET) {
63
- iconSize = IconSizeVariant.SMALL;
64
- }
65
- return html ` <div class="container">
66
- ${this.iconLeft ? this._iconTemplate(this.iconLeft, iconSize) : nothing}
67
- <slot></slot>
68
- ${this.iconRight ? this._iconTemplate(this.iconRight, iconSize) : nothing}
69
- </div>`;
70
- }
71
- };
72
- __decorate([
73
- property({ type: Boolean, reflect: true })
74
- ], TuixButton.prototype, "full", void 0);
75
- __decorate([
76
- property({ type: IconName })
77
- ], TuixButton.prototype, "iconRight", void 0);
78
- __decorate([
79
- property({ type: IconName })
80
- ], TuixButton.prototype, "iconLeft", void 0);
81
- TuixButton = __decorate([
82
- customElement('tuix-button')
83
- ], TuixButton);
84
- export { TuixButton };
@@ -1,3 +0,0 @@
1
- export declare const hostButtonStyles: import("lit").CSSResult;
2
- export declare const buttonSizeStyles: import("lit").CSSResult;
3
- export declare const buttonColorStyles: import("lit").CSSResult;
@@ -1,107 +0,0 @@
1
- import { css, unsafeCSS } from 'lit';
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
- export const hostButtonStyles = css `
9
- :host {
10
- --t-button-primary-color: ${unsafeCSS(Palette.MAIN)};
11
- --t-button-secondary-color: ${unsafeCSS(Palette.WHITE)};
12
- --t-button-accent-color: ${unsafeCSS(Palette.SECONDARY)};
13
- --t-button-text-color: ${unsafeCSS(Palette.WHITE)};
14
- --t-button-text-secondary-color: ${unsafeCSS(Palette.MAIN)};
15
- --t-button-text-muted-color: ${unsafeCSS(Palette.PRIMARY_300)};
16
- --t-button-disabled-bg-color: ${unsafeCSS(Palette.PRIMARY_100)};
17
- --t-button-hover-primary-color: ${unsafeCSS(Palette.PRIMARY_600)};
18
- --t-button-active-primary-color: ${unsafeCSS(Palette.PRIMARY_800)};
19
- --t-button-hover-secondary-color: ${unsafeCSS(Palette.PRIMARY_100)};
20
- --t-button-active-secondary-color: ${unsafeCSS(Palette.PRIMARY_200)};
21
- }
22
- :host([dark]) {
23
- --t-button-primary-color: ${unsafeCSS(DarkPalette.MAIN)};
24
- --t-button-text-color: ${unsafeCSS(DarkPalette.WHITE)};
25
- --t-button-text-muted-color: ${unsafeCSS(Palette.PRIMARY_800)};
26
- --t-button-disabled-bg-color: ${unsafeCSS(Palette.PRIMARY_950)};
27
- --t-button-hover-primary-color: ${unsafeCSS(Palette.MAIN)};
28
- --t-button-active-primary-color: ${unsafeCSS(Palette.PRIMARY_600)};
29
- --t-button-secondary-color: ${unsafeCSS(Palette.BLACK)};
30
- --t-button-hover-secondary-color: ${unsafeCSS(Palette.PRIMARY_950)};
31
- --t-button-active-secondary-color: ${unsafeCSS(Palette.PRIMARY_800)};
32
- }
33
- `;
34
- export const buttonSizeStyles = css `
35
- ${unsafeCSS(`
36
- ${slottedClassName(TextSize.Button)} {
37
- font-size: 1rem;
38
- font-weight: 400;
39
- line-height: 1.2rem;
40
- }
41
- @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
42
- ${slottedClassName(TextSize.Button)} {
43
- font-size: 0.888rem;
44
- font-weight: 400;
45
- line-height: 1.065rem;
46
- }
47
- }
48
- @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
49
- ${slottedClassName(TextSize.Button)} {
50
- font-size: 0.875rem;
51
- font-weight: 400;
52
- line-height: 1rem;
53
- }
54
- }
55
- `)}
56
- `;
57
- export const buttonColorStyles = css `
58
- :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button {
59
- background-color: var(--t-button-primary-color);
60
- outline: none;
61
- color: var(--t-button-text-color);
62
- }
63
- :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:hover {
64
- background-color: var(--t-button-hover-primary-color);
65
- cursor: pointer;
66
- }
67
- :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:focus {
68
- background-color: var(--t-button-hover-primary-color);
69
- outline: 2px solid var(--t-button-accent-color);
70
- }
71
- :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:active {
72
- background-color: var(--t-button-active-primary-color);
73
- outline: none;
74
- }
75
-
76
- :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button {
77
- background-color: var(--t-button-secondary-color);
78
- outline: 1px solid var(--t-button-hover-primary-color);
79
- color: var(--t-button-text-secondary-color);
80
- }
81
- :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:hover {
82
- background-color: var(--t-button-hover-secondary-color);
83
- outline: 1px solid var(--t-button-primary-color);
84
- color: var(--t-button-primary-color);
85
- cursor: pointer;
86
- }
87
- :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:focus {
88
- background-color: var(--t-button-hover-secondary-color);
89
- outline: 2px solid var(--t-button-accent-color);
90
- color: var(--t-button-primary-color);
91
- }
92
- :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:active {
93
- background-color: var(--t-button-active-secondary-color);
94
- outline: 1px solid var(--t-button-primary-color);
95
- color: var(--t-button-primary-color);
96
- }
97
- :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:disabled {
98
- outline: 1px solid var(--t-button-text-muted-color);
99
- }
100
-
101
- :host([variant='${unsafeCSS(MainVariant.SECONDARY)}'][disabled]) .button,
102
- :host([variant='${unsafeCSS(MainVariant.PRIMARY)}'][disabled]) .button {
103
- background-color: var(--t-button-disabled-bg-color);
104
- color: var(--t-button-text-muted-color);
105
- cursor: not-allowed;
106
- }
107
- `;
@@ -1,2 +0,0 @@
1
- import { MainVariant } from '../../utils/mainVariant.enum';
2
- export declare const buttonTextColor: Record<MainVariant, string>;
@@ -1,6 +0,0 @@
1
- import { Palette } from '../../utils/colors';
2
- import { MainVariant } from '../../utils/mainVariant.enum';
3
- export const buttonTextColor = {
4
- [MainVariant.PRIMARY]: Palette.WHITE,
5
- [MainVariant.SECONDARY]: Palette.MAIN,
6
- };
@@ -1 +0,0 @@
1
- export type CustomEventTuixButton = CustomEvent<undefined>;
@@ -1,15 +0,0 @@
1
- import { LitElement, type TemplateResult } from 'lit';
2
- import { CheckboxLabelSide } from './enums/tuix-checkbox.enums';
3
- export declare class TuixCheckbox extends LitElement {
4
- static styles: import("lit").CSSResult[];
5
- checked: boolean;
6
- disabled: boolean;
7
- dark: boolean;
8
- error: boolean;
9
- label: string;
10
- labelSide: CheckboxLabelSide;
11
- private _onCheckboxChange;
12
- private _getIconMode;
13
- private _getFullContainerClasses;
14
- protected render(): TemplateResult;
15
- }
@@ -1,106 +0,0 @@
1
- import { __decorate } from "tslib";
2
- import { LitElement, html } from 'lit';
3
- import { customElement, property } from 'lit/decorators.js';
4
- import { classMap } from 'lit/directives/class-map.js';
5
- import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
6
- import { TextSize, TextVariant } from '../tuix-text/enums/tuix-text.enums';
7
- import { checkboxCheckmarkStyles, checkboxContainerStyles, checkboxLabelStyles, hostStyles, } from './TuixCheckbox.styles';
8
- import { CheckboxIconColorDark, CheckboxIconColorLight, CheckboxIconMode, CheckboxLabelSide, } from './enums/tuix-checkbox.enums';
9
- let TuixCheckbox = class TuixCheckbox extends LitElement {
10
- constructor() {
11
- super(...arguments);
12
- this.checked = false;
13
- this.disabled = false;
14
- this.dark = false;
15
- this.error = false;
16
- this.label = '';
17
- this.labelSide = CheckboxLabelSide.RIGHT;
18
- }
19
- static { this.styles = [
20
- hostStyles,
21
- checkboxContainerStyles,
22
- checkboxCheckmarkStyles,
23
- checkboxLabelStyles,
24
- ]; }
25
- _onCheckboxChange(event) {
26
- this.dispatchEvent(new CustomEvent('change', {
27
- detail: {
28
- value: event.target.checked,
29
- label: this.label,
30
- },
31
- bubbles: true,
32
- }));
33
- }
34
- _getIconMode() {
35
- if (this.disabled) {
36
- return CheckboxIconMode.DISABLED;
37
- }
38
- if (this.error) {
39
- return CheckboxIconMode.ERROR;
40
- }
41
- return CheckboxIconMode.DEFAULT;
42
- }
43
- _getFullContainerClasses() {
44
- return {
45
- 't-checkbox-full-container': true,
46
- 't-with-error': this.error && !this.disabled,
47
- 't-with-label-left': this.labelSide === CheckboxLabelSide.LEFT,
48
- };
49
- }
50
- render() {
51
- return html `<label class="${classMap(this._getFullContainerClasses())}">
52
- <div class="t-checkbox-container">
53
- <input
54
- type="checkbox"
55
- class="t-checkbox"
56
- .checked="${this.checked}"
57
- ?disabled="${this.disabled}"
58
- @change="${this._onCheckboxChange}"
59
- />
60
- <div class="t-checkbox-checkmark">
61
- <tuix-icon
62
- size="${IconSizeVariant.FULL}"
63
- name="${IconName.CHECK}"
64
- color="${this.dark
65
- ? CheckboxIconColorDark[this._getIconMode()]
66
- : CheckboxIconColorLight[this._getIconMode()]}"
67
- >
68
- </tuix-icon>
69
- </div>
70
- </div>
71
- <div class="t-checkbox-label">
72
- <slot>
73
- <tuix-text
74
- size="${TextSize.Field1}"
75
- color="${TextVariant.PRIMARY}"
76
- ?dark="${this.dark}"
77
- >
78
- ${this.label}
79
- </tuix-text>
80
- </slot>
81
- </div>
82
- </label>`;
83
- }
84
- };
85
- __decorate([
86
- property({ type: Boolean })
87
- ], TuixCheckbox.prototype, "checked", void 0);
88
- __decorate([
89
- property({ type: Boolean, reflect: true })
90
- ], TuixCheckbox.prototype, "disabled", void 0);
91
- __decorate([
92
- property({ type: Boolean, reflect: true })
93
- ], TuixCheckbox.prototype, "dark", void 0);
94
- __decorate([
95
- property({ type: Boolean, reflect: true })
96
- ], TuixCheckbox.prototype, "error", void 0);
97
- __decorate([
98
- property({ type: String })
99
- ], TuixCheckbox.prototype, "label", void 0);
100
- __decorate([
101
- property({ type: String })
102
- ], TuixCheckbox.prototype, "labelSide", void 0);
103
- TuixCheckbox = __decorate([
104
- customElement('tuix-checkbox')
105
- ], TuixCheckbox);
106
- export { TuixCheckbox };
@@ -1,4 +0,0 @@
1
- export declare const hostStyles: import("lit").CSSResult;
2
- export declare const checkboxContainerStyles: import("lit").CSSResult;
3
- export declare const checkboxCheckmarkStyles: import("lit").CSSResult;
4
- export declare const checkboxLabelStyles: import("lit").CSSResult;